From 7592980f17804ca0f1083ba9c01727bd7108d5f0 Mon Sep 17 00:00:00 2001 From: Daksh Kulshreshtha Date: Fri, 25 Sep 2020 22:40:02 +0530 Subject: [PATCH 1/3] Card added --- .env | 1 + src/components/Card/Card.jsx | 25 +++++++++++++++++++++++++ src/components/Card/Card.scss | 31 +++++++++++++++++++++++++++++++ src/components/index.js | 1 + src/demos/CardDemo.jsx | 29 +++++++++++++++++++++++++++++ src/docs/card.md | 27 +++++++++++++++++++++++++++ src/docs/heading.md | 4 ++-- src/exports/exports.js | 1 + 8 files changed, 117 insertions(+), 2 deletions(-) create mode 100644 .env create mode 100644 src/components/Card/Card.jsx create mode 100644 src/components/Card/Card.scss create mode 100644 src/demos/CardDemo.jsx create mode 100644 src/docs/card.md diff --git a/.env b/.env new file mode 100644 index 0000000..7d910f1 --- /dev/null +++ b/.env @@ -0,0 +1 @@ +SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx new file mode 100644 index 0000000..5d2d7e6 --- /dev/null +++ b/src/components/Card/Card.jsx @@ -0,0 +1,25 @@ +import React from 'react'; +import PropTypes from 'prop-types'; + +import './Card.scss'; + +export default function Card({ title, body }) { + + return ( +
+

{title}

+ +

{body}

+
+ ); +}; + +Card.propTypes = { + title: PropTypes.string.isRequired, + body: PropTypes.string.isRequired +}; + +Card.defaultProps = { + title: 'Title', + body: 'Body' +}; \ No newline at end of file diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss new file mode 100644 index 0000000..60a7a98 --- /dev/null +++ b/src/components/Card/Card.scss @@ -0,0 +1,31 @@ +@import url('https://fonts.googleapis.com/css2?family=Headland+One&family=Open+Sans&display=swap'); + +.card { + width: 60vw; + background: whitesmoke; + padding: 1rem 1.5rem 1.8rem 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 10px 10px 10px 10px; + -moz-border-radius: 10px 10px 10px 10px; + -webkit-border-radius: 10px 10px 10px 10px; + border: 1px solid #6b6b6b; +} + +.card h2 { + font-family: 'Headland One', serif; + margin-bottom: 0; + border: none; +} + +.card p { + font-family: 'Open Sans', sans-serif; +} + +.separator { + border: 0.5px solid rgba(66, 66, 66, 0.438); + width: 60%; + margin: 1rem 0 1rem 0; +} \ No newline at end of file diff --git a/src/components/index.js b/src/components/index.js index 41b629c..ca0b0e5 100644 --- a/src/components/index.js +++ b/src/components/index.js @@ -6,3 +6,4 @@ export { default as SimpleButton } from './SimpleButton/SimpleButton'; export { default as InfiniteScroll } from './InfiniteScroll/InfiniteScroll'; export { default as Tabs } from './Tabs/Tabs'; export { default as RadioButton } from './RadioButton/RadioButton'; +export { default as Card } from './Card/Card'; diff --git a/src/demos/CardDemo.jsx b/src/demos/CardDemo.jsx new file mode 100644 index 0000000..bb016ea --- /dev/null +++ b/src/demos/CardDemo.jsx @@ -0,0 +1,29 @@ +import React, { useState, useEffect } from 'react'; +import ReactMarkdown from 'react-markdown'; +import Card from '../components/Card/Card'; +import simpleButtonPath from '../docs/card.md'; + +const HeadingDemo = () => { + const [markdown, setMarkdown] = useState(''); + + useEffect(() => { + fetch(simpleButtonPath) + .then((response) => response.text()) + .then((text) => { + setMarkdown(text); + }); + }); + + return ( + <> + + + + ); +}; + +export default HeadingDemo; + diff --git a/src/docs/card.md b/src/docs/card.md new file mode 100644 index 0000000..9533449 --- /dev/null +++ b/src/docs/card.md @@ -0,0 +1,27 @@ +## Usage + +``` +import React from 'react' +import Card from '../components/Card' + +function App() { + return ( +
+ +
+ ); +} + +export default App; +``` + +### Properties + +Property | Type | Required | Default value | Description +:--- | :--- | :--- | :--- | :--- +`title`|string|yes|Title| The title that you want to put. +`body`|string|yes|Body| Body of the card. + diff --git a/src/docs/heading.md b/src/docs/heading.md index 9903836..473506c 100644 --- a/src/docs/heading.md +++ b/src/docs/heading.md @@ -19,6 +19,6 @@ export default App; Property | Type | Required | Default value | Description :--- | :--- | :--- | :--- | :--- -`children`|children|no|empty| Text/children of heading -`type`|string|no|h2| h1,h2,h3,h4,h5,h6 +`title`|string|yes|Title| The title that you want to put. +`body`|string|yes|Body| Body of the card diff --git a/src/exports/exports.js b/src/exports/exports.js index 7c664ea..f230a78 100644 --- a/src/exports/exports.js +++ b/src/exports/exports.js @@ -3,3 +3,4 @@ export { default as SimpleButtonDemo } from '../demos/SimpleButtonDemo'; export { default as HeadingDemo } from '../demos/HeadingDemo'; export { default as AvatarDemo } from '../demos/AvatarDemo'; export { default as ProgressBarDemo } from '../demos/ProgressBarDemo'; +export { default as CardDemo } from '../demos/CardDemo'; From 19408de28196307357bf0f123d823140bfb182a5 Mon Sep 17 00:00:00 2001 From: Daksh Kulshreshtha Date: Thu, 1 Oct 2020 00:04:40 +0530 Subject: [PATCH 2/3] added card --- .env | 1 - src/components/Card/Card.jsx | 12 ++++------- src/components/Card/Card.scss | 38 +++++++++++++++++------------------ src/demos/CardDemo.jsx | 35 ++++++++++++++++---------------- 4 files changed, 40 insertions(+), 46 deletions(-) delete mode 100644 .env diff --git a/.env b/.env deleted file mode 100644 index 7d910f1..0000000 --- a/.env +++ /dev/null @@ -1 +0,0 @@ -SKIP_PREFLIGHT_CHECK=true \ No newline at end of file diff --git a/src/components/Card/Card.jsx b/src/components/Card/Card.jsx index 5d2d7e6..10d7b2c 100644 --- a/src/components/Card/Card.jsx +++ b/src/components/Card/Card.jsx @@ -4,22 +4,18 @@ import PropTypes from 'prop-types'; import './Card.scss'; export default function Card({ title, body }) { - return (

{title}

- +

{body}

); -}; +} Card.propTypes = { title: PropTypes.string.isRequired, - body: PropTypes.string.isRequired + body: PropTypes.string.isRequired, }; -Card.defaultProps = { - title: 'Title', - body: 'Body' -}; \ No newline at end of file +Card.defaultProps = {}; diff --git a/src/components/Card/Card.scss b/src/components/Card/Card.scss index 60a7a98..cefa9a1 100644 --- a/src/components/Card/Card.scss +++ b/src/components/Card/Card.scss @@ -1,31 +1,31 @@ @import url('https://fonts.googleapis.com/css2?family=Headland+One&family=Open+Sans&display=swap'); .card { - width: 60vw; - background: whitesmoke; - padding: 1rem 1.5rem 1.8rem 1.5rem; - display: flex; - flex-direction: column; - justify-content: center; - align-items: center; - border-radius: 10px 10px 10px 10px; - -moz-border-radius: 10px 10px 10px 10px; - -webkit-border-radius: 10px 10px 10px 10px; - border: 1px solid #6b6b6b; + width: 60vw; + background: whitesmoke; + padding: 1rem 1.5rem 1.8rem 1.5rem; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + border-radius: 10px 10px 10px 10px; + -moz-border-radius: 10px 10px 10px 10px; + -webkit-border-radius: 10px 10px 10px 10px; + border: 1px solid #6b6b6b; } .card h2 { - font-family: 'Headland One', serif; - margin-bottom: 0; - border: none; + font-family: 'Headland One', serif; + margin-bottom: 0; + border: none; } .card p { - font-family: 'Open Sans', sans-serif; + font-family: 'Open Sans', sans-serif; } .separator { - border: 0.5px solid rgba(66, 66, 66, 0.438); - width: 60%; - margin: 1rem 0 1rem 0; -} \ No newline at end of file + border: 0.5px solid rgba(66, 66, 66, 0.438); + width: 60%; + margin: 1rem 0 1rem 0; +} diff --git a/src/demos/CardDemo.jsx b/src/demos/CardDemo.jsx index bb016ea..652d63a 100644 --- a/src/demos/CardDemo.jsx +++ b/src/demos/CardDemo.jsx @@ -4,26 +4,25 @@ import Card from '../components/Card/Card'; import simpleButtonPath from '../docs/card.md'; const HeadingDemo = () => { - const [markdown, setMarkdown] = useState(''); + const [markdown, setMarkdown] = useState(''); - useEffect(() => { - fetch(simpleButtonPath) - .then((response) => response.text()) - .then((text) => { - setMarkdown(text); - }); - }); + useEffect(() => { + fetch(simpleButtonPath) + .then((response) => response.text()) + .then((text) => { + setMarkdown(text); + }); + }); - return ( - <> - - - - ); + return ( + <> + + + + ); }; export default HeadingDemo; - From 89c741c610682dfc8e1d3048a334df877c94edd5 Mon Sep 17 00:00:00 2001 From: Daksh Kulshreshtha Date: Thu, 1 Oct 2020 00:12:33 +0530 Subject: [PATCH 3/3] undo unwanted changes --- src/docs/heading.md | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/src/docs/heading.md b/src/docs/heading.md index 473506c..9903836 100644 --- a/src/docs/heading.md +++ b/src/docs/heading.md @@ -19,6 +19,6 @@ export default App; Property | Type | Required | Default value | Description :--- | :--- | :--- | :--- | :--- -`title`|string|yes|Title| The title that you want to put. -`body`|string|yes|Body| Body of the card +`children`|children|no|empty| Text/children of heading +`type`|string|no|h2| h1,h2,h3,h4,h5,h6