From 89887d18ff628abfe14c5b4ef4030db53d08a093 Mon Sep 17 00:00:00 2001 From: melencholicmice Date: Thu, 1 Dec 2022 18:06:32 +0530 Subject: [PATCH 1/2] Added SummitCard component for the fifth theme --- src/components/SummitCard/SummitCard.md | 36 ++++++++ .../SummitCard/SummitCard.stories.js | 46 ++++++++++ src/components/SummitCard/index.js | 46 ++++++++++ src/components/SummitCard/style.sass | 83 +++++++++++++++++++ 4 files changed, 211 insertions(+) create mode 100644 src/components/SummitCard/SummitCard.md create mode 100644 src/components/SummitCard/SummitCard.stories.js create mode 100644 src/components/SummitCard/index.js create mode 100644 src/components/SummitCard/style.sass diff --git a/src/components/SummitCard/SummitCard.md b/src/components/SummitCard/SummitCard.md new file mode 100644 index 00000000..b8e6abb3 --- /dev/null +++ b/src/components/SummitCard/SummitCard.md @@ -0,0 +1,36 @@ +## Initial Setup + +Hope you have successfully set up the project in your local system and install all dependencies + +## About the SummitCard Component + +This is a resuasble component for displaying data related to conferences in card format. This Component is highly reusable and customizable via props. + +## How to use the component + +Import the component to `pages/index.js` + +`import SummitCard from "../components/SummitCard";` + +## How to handle props to the component + +``` + +``` +`title` prop is the title at the beginning of the component +`subText` prop is the sub heading or additional info related to the content of component +`emptyMessage` prop is the message to be displayed when there is no card data +`cardData` prop is an array containing data to be displayed in cards ( the object inside the array contains cardtitle , card content and image source) + + diff --git a/src/components/SummitCard/SummitCard.stories.js b/src/components/SummitCard/SummitCard.stories.js new file mode 100644 index 00000000..0a7339b6 --- /dev/null +++ b/src/components/SummitCard/SummitCard.stories.js @@ -0,0 +1,46 @@ +import React from "react" + +import { SummitCard } from "./index" + +import "bootstrap/dist/css/bootstrap.css" + +export default { + title: "General/SummitCard", + component: SummitCard, + argTypes: { + title: { control: "text" }, + subText: { control: "text"}, + cardData: { control: "array"}, + emptyMessage: { control: "text"}, + }, +} + +export const summitCard = args => + +summitCard.args = { + title: "Summit Meeting", + subText: "What we offer", + cardData: [ + { + image:"https://user-images.githubusercontent.com/109169835/204906679-43affa5c-22d5-43d3-adb1-89835a781974.png", + title:"Conference", + description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque", + }, + { + image:"https://user-images.githubusercontent.com/109169835/204906976-d3f51e01-dd36-4442-b72f-792f480c30e2.png", + title:"Conference", + description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque", + }, + { + image:"https://user-images.githubusercontent.com/109169835/204906877-115fecd8-8e8a-4bd8-abc1-73eacb6b3749.png", + title:"Conference", + description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque", + }, + { + image:"https://user-images.githubusercontent.com/109169835/204906818-be5d2619-6137-4eed-bcb4-af2f82a1bce1.png", + title:"Conference", + description:"Nam libero tempore, cum Soluta nobis est eligendi optio cumque", + } + ], + emptyMessage:"No data Available", +} diff --git a/src/components/SummitCard/index.js b/src/components/SummitCard/index.js new file mode 100644 index 00000000..24c265e8 --- /dev/null +++ b/src/components/SummitCard/index.js @@ -0,0 +1,46 @@ +import React from "react"; +import PropTypes from "prop-types" +import "./style.sass" + +import { Card , Container } from "react-bootstrap"; + +export const SummitCard = ({title , subText , cardData , emptyMessage}) => { + return( +
+
+

{title}

+

{subText}

+
+ {cardData?.length > 0 ? ( +
+ {cardData.map((item, index) => { + return ( + +
+
+ {item.title} +
+
+

{item.title}

+

{item.description}

+ + ) + })} +
+ ) : ( +

{emptyMessage}

+ )} +
+ ) +} + + +SummitCard.propTypes = { + title: PropTypes.string, + subText: PropTypes.string, + cardData: PropTypes.array, + emptyMessage: PropTypes.string, +} \ No newline at end of file diff --git a/src/components/SummitCard/style.sass b/src/components/SummitCard/style.sass new file mode 100644 index 00000000..9307c881 --- /dev/null +++ b/src/components/SummitCard/style.sass @@ -0,0 +1,83 @@ +@import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap') + + +.SummitCardHeadingWrapper + display: flex + flex-direction: column + align-items: center + justify-content: center + text-transform: uppercase + font-family: inter + .SummitCardTitle + color: #54AD28 + font-size: 2rem + font-weight: 500 + margin: 20px + @media (max-width: 576px) + font-size: 1.5rem + .SummitCardSubText + color:#6D6D6D + font-family: inter + font-size: 3rem + font-weight: 700 + margin-bottom: 80px + @media (max-width: 576px) + font-size: 2.25rem + +.cardItem + font-family: inter + display: grid + margin: auto + grid-template-columns: repeat(4,1fr) + max-width: 1600px + @media( max-width: 1300px) + grid-template-columns: repeat(3,1fr) + @media( max-width: 896px) + grid-template-columns: repeat(2,1fr) + @media (max-width: 576px) + grid-template-columns: repeat(1,1fr) + + .card + border: 1px solid #14F195 + border-radius: 16px + height: 430px + max-width: 344px + width: inherit + display: flex + justify-content: center + align-items: center + margin: 10px + .cardImageDisplay + height: 217px + display: flex + justify-content: center + align-items: center + .imageWrapper + height: 155px + width: 155px + background: linear-gradient(130.58deg, #14F195 15.22%, rgba(97, 232, 232, 0.609375) 85.92%, rgba(217, 217, 217, 0) 85.93%) + border-radius: 100% + display: flex + align-items: center + justify-content: center + .cardItemTitle + font-weight: 600 + margin-bottom: 2rem + @media (max-width: 576px) + font-size: 1.75rem + margin-bottom: 1rem + .cardItemDescription + font-weight: 500 + font-size: 1.5rem + color:#5D5E8D + line-height: 1.815rem + padding: 1rem + @media (max-width: 576px) + font-size: 1.5rem + + + + + + + From aa10ed35aed2606462d256dcb45f8c2955e5c936 Mon Sep 17 00:00:00 2001 From: melencholicmice Date: Thu, 1 Dec 2022 18:54:15 +0530 Subject: [PATCH 2/2] formatted with proper indentation code --- src/components/SummitCard/index.js | 2 +- src/components/SummitCard/style.sass | 18 +++++------------- 2 files changed, 6 insertions(+), 14 deletions(-) diff --git a/src/components/SummitCard/index.js b/src/components/SummitCard/index.js index 24c265e8..844a7bbd 100644 --- a/src/components/SummitCard/index.js +++ b/src/components/SummitCard/index.js @@ -2,7 +2,7 @@ import React from "react"; import PropTypes from "prop-types" import "./style.sass" -import { Card , Container } from "react-bootstrap"; +import { Card } from "react-bootstrap"; export const SummitCard = ({title , subText , cardData , emptyMessage}) => { return( diff --git a/src/components/SummitCard/style.sass b/src/components/SummitCard/style.sass index 9307c881..887f4e0c 100644 --- a/src/components/SummitCard/style.sass +++ b/src/components/SummitCard/style.sass @@ -1,6 +1,5 @@ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@100;300;400;500;600;700&display=swap') - .SummitCardHeadingWrapper display: flex flex-direction: column @@ -16,7 +15,7 @@ @media (max-width: 576px) font-size: 1.5rem .SummitCardSubText - color:#6D6D6D + color: #6D6D6D font-family: inter font-size: 3rem font-weight: 700 @@ -27,7 +26,7 @@ .cardItem font-family: inter display: grid - margin: auto + margin: auto grid-template-columns: repeat(4,1fr) max-width: 1600px @media( max-width: 1300px) @@ -36,8 +35,8 @@ grid-template-columns: repeat(2,1fr) @media (max-width: 576px) grid-template-columns: repeat(1,1fr) - - .card + + .card border: 1px solid #14F195 border-radius: 16px height: 430px @@ -69,15 +68,8 @@ .cardItemDescription font-weight: 500 font-size: 1.5rem - color:#5D5E8D + color: #5D5E8D line-height: 1.815rem padding: 1rem @media (max-width: 576px) font-size: 1.5rem - - - - - - -