-
Notifications
You must be signed in to change notification settings - Fork 1
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
feat: add cardgrid component and docs
- Loading branch information
1 parent
e8d6302
commit 321b35c
Showing
9 changed files
with
407 additions
and
1 deletion.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
243 changes: 243 additions & 0 deletions
243
packages/examples-site/src/pages/CardGridPage/index.tsx
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,243 @@ | ||
| import React, { FunctionComponent } from "react"; | ||
| import { Flex, FlexItem, Text, HR, Table } from "@bigcommerce/big-design"; | ||
| import { | ||
| CardGrid, | ||
| Page, | ||
| AdvancedPanel as Panel, | ||
| } from "bigcommerce-design-patterns"; | ||
| import { useNavigate } from "react-router"; | ||
| import { theme } from "@bigcommerce/big-design-theme"; | ||
|
|
||
| import { CopyBlock, nord as codecolor } from "react-code-blocks"; | ||
|
|
||
| const CardGridPage: FunctionComponent = () => { | ||
| const navigate = useNavigate(); | ||
|
|
||
| const copyBlockProps = { | ||
| language: "jsx", | ||
| showLineNumbers: true, | ||
| startingLineNumber: 1, | ||
| wrapLines: true, | ||
| theme: codecolor, | ||
| customStyle: { | ||
| width: "100%", | ||
| minHeight: "45px", | ||
| }, | ||
| }; | ||
|
|
||
| return ( | ||
| <Page | ||
| headerTitle="Card Grids" | ||
| headerBackButtonLabel="Back to patterns" | ||
| onHeaderBackButtonClick={() => navigate("/")} | ||
| pageDescription={ | ||
| <Text color="secondary60"> | ||
| Card grids are used to showcase relevant resources or actions in a condensed, | ||
| organized manner. | ||
| </Text> | ||
| } | ||
| > | ||
| <Flex flexDirection="column" flexGap={theme.spacing.xLarge}> | ||
| <Panel headerTitle="Example: Content"> | ||
| <Flex flexDirection="column" flexGap={theme.spacing.medium}> | ||
| <FlexItem> | ||
| <CardGrid | ||
| items={[ | ||
| { | ||
| name: "Helpful resource one", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. ", | ||
| href: "https://developer.bigcommerce.com", | ||
| }, | ||
| { | ||
| name: "Helpful resource two", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. ", | ||
| href: "https://developer.bigcommerce.com", | ||
| }, | ||
| ]} | ||
| /> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <HR /> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <CopyBlock | ||
| {...copyBlockProps} | ||
| text={`import { CardGrid } from "bigcommerce-design-patterns"; | ||
| <CardGrid items={[ | ||
| { | ||
| name: "Helpful resource one", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. ", | ||
| href: "https://developer.bigcommerce.com", | ||
| }, | ||
| { | ||
| name: "Helpful resource two", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. ", | ||
| href: "https://developer.bigcommerce.com", | ||
| }, | ||
| ]} />`} | ||
| /> | ||
| </FlexItem> | ||
| </Flex> | ||
| </Panel> | ||
|
|
||
| <Panel headerTitle="Example: Actions"> | ||
| <Flex flexDirection="column" flexGap={theme.spacing.medium}> | ||
| <FlexItem> | ||
| <CardGrid | ||
| items={[ | ||
| { | ||
| name: "Grid Item 1", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet.", | ||
| button: { | ||
| variant: "primary", | ||
| text: "Connect", | ||
| }, | ||
| icon: ( | ||
| <img | ||
| src="https://storage.googleapis.com/bigcommerce-developers/images/bigc-dev/bigc-inverted-black.svg" | ||
| height="45" | ||
| width="45" | ||
| /> | ||
| ), | ||
| format: "action", | ||
| }, | ||
| { | ||
| name: "Grid Item 2", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet. Proin gravida dolor sit amet.", | ||
| button: { | ||
| variant: "primary", | ||
| text: "Connect", | ||
| }, | ||
| icon: ( | ||
| <img | ||
| src="https://storage.googleapis.com/bigcommerce-developers/images/bigc-dev/bigc-inverted-black.svg" | ||
| height="45" | ||
| width="45" | ||
| /> | ||
| ), | ||
| format: "action", | ||
| }, | ||
| ]} | ||
| /> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <HR /> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <CopyBlock | ||
| {...copyBlockProps} | ||
| text={`import { CardGrid } from "bigcommerce-design-patterns"; | ||
| <CardGrid items={[ | ||
| { | ||
| name: "Grid Item 1", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.", | ||
| button: { | ||
| variant: "primary", | ||
| text: "Connect", | ||
| }, | ||
| icon: ( | ||
| <img | ||
| src="https://storage.googleapis.com/bigcommerce-developers/logos/bigcommerce-dx.svg" | ||
| height="45" | ||
| width="45" | ||
| /> | ||
| ), | ||
| format: "action", | ||
| }, | ||
| { | ||
| name: "Grid Item 2", | ||
| description: | ||
| "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean euismod bibendum laoreet.", | ||
| button: { | ||
| variant: "primary", | ||
| text: "Connect", | ||
| }, | ||
| icon: ( | ||
| <img | ||
| src="https://storage.googleapis.com/bigcommerce-developers/logos/bigcommerce-dx.svg" | ||
| height="45" | ||
| width="45" | ||
| /> | ||
| ), | ||
| format: "action", | ||
| }, | ||
| ]} />`} | ||
| /> | ||
| </FlexItem> | ||
| </Flex> | ||
| </Panel> | ||
| <Panel headerTitle="Example: Skeleton"> | ||
| <Flex flexDirection="column" flexGap={theme.spacing.medium}> | ||
| <FlexItem> | ||
| <CardGrid /> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <HR /> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| <CopyBlock | ||
| {...copyBlockProps} | ||
| text={`import { CardGrid } from "bigcommerce-design-patterns"; | ||
| <CardGrid />`} | ||
| /> | ||
| </FlexItem> | ||
| </Flex> | ||
| </Panel> | ||
|
|
||
| <Panel headerTitle="Props" contentsPadding={false}> | ||
| <Table | ||
| columns={[ | ||
| { | ||
| header: "Prop Name", | ||
| hash: "propName", | ||
| render: ({ propName }) => propName, | ||
| }, | ||
| { | ||
| header: "Type", | ||
| hash: "type", | ||
| render: ({ type }) => type, | ||
| }, | ||
| { | ||
| header: "Default", | ||
| hash: "default", | ||
| render: ({ default: defaultValue }) => defaultValue.toString(), | ||
| }, | ||
| { | ||
| header: "Description", | ||
| hash: "description", | ||
| render: ({ description }) => description, | ||
| }, | ||
| { | ||
| header: "Required", | ||
| hash: "required", | ||
| render: ({ required }) => (required ? "Yes" : "No"), | ||
| }, | ||
| ]} | ||
| items={[ | ||
| { | ||
| propName: "items", | ||
| type: "array", | ||
| default: "-", | ||
| description: "Array of entries for content or actions. See above for examples for each. If you don't include the items prop, a loading skeleton will render.", | ||
| required: false, | ||
| }, | ||
| ]} | ||
| stickyHeader | ||
| /> | ||
| </Panel> | ||
| </Flex> | ||
| </Page> | ||
| ); | ||
| }; | ||
|
|
||
| export default CardGridPage; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,115 @@ | ||
| import Skeleton from "react-loading-skeleton"; | ||
| import "react-loading-skeleton/dist/skeleton.css"; | ||
| import { | ||
| Box, | ||
| Button, | ||
| Grid, | ||
| Text, | ||
| Flex, | ||
| FlexItem, | ||
| } from "@bigcommerce/big-design"; | ||
| import { ChevronRightIcon } from "@bigcommerce/big-design-icons"; | ||
| import { StyledLinkBox, StyledLink } from "./styled"; | ||
|
|
||
| export type CardGridItem = { | ||
| button?: { | ||
| variant: "primary" | "secondary" | "subtle" | "danger"; | ||
| text: string; | ||
| }; | ||
| name?: string; | ||
| description?: string; | ||
| format?: string; | ||
| href?: string; | ||
| icon?: React.ReactNode; | ||
| }; | ||
|
|
||
| function CardGridItem({ | ||
| button, | ||
| name, | ||
| description, | ||
| format = "content", | ||
| href, | ||
| icon, | ||
| }: CardGridItem) { | ||
| if (format === "action") { | ||
| return ( | ||
| <Box border="box" borderRadius="normal" padding="medium"> | ||
| <Flex flexGap="16px" flexDirection="row"> | ||
| <FlexItem> | ||
| {icon ? icon : <Skeleton width={45} height={45} />} | ||
| </FlexItem> | ||
| <FlexItem flexGrow={1}> | ||
| <Text bold>{name ?? <Skeleton width={150} />}</Text> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| {button ? ( | ||
| <Button | ||
| variant="secondary" | ||
| onClick={() => { | ||
| alert(`${name} clicked`); | ||
| }} | ||
| > | ||
| {button.text} | ||
| </Button> | ||
| ) : ( | ||
| <Skeleton height={36} width={100} /> | ||
| )} | ||
| </FlexItem> | ||
| </Flex> | ||
|
|
||
| <Text marginTop="medium">{description ?? <Skeleton count={2} />}</Text> | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| // Default format is "content" | ||
| const itemContent = ( | ||
| <> | ||
| <Flex flexGap="16px" flexDirection="row"> | ||
| <FlexItem flexGrow={1}> | ||
| <Text bold>{name ?? <Skeleton width={150} />}</Text> | ||
| </FlexItem> | ||
| <FlexItem> | ||
| {name ? <ChevronRightIcon /> : <Skeleton width={24} />} | ||
| </FlexItem> | ||
| </Flex> | ||
|
|
||
| <Text marginTop="medium">{description ?? <Skeleton count={2} />}</Text> | ||
| </> | ||
| ); | ||
| return href ? ( | ||
| <StyledLink target="_blank" href={href}> | ||
| <StyledLinkBox border="box" borderRadius="normal" padding="medium"> | ||
| {itemContent} | ||
| </StyledLinkBox> | ||
| </StyledLink> | ||
| ) : ( | ||
| <Box border="box" borderRadius="normal" padding="medium"> | ||
| {itemContent} | ||
| </Box> | ||
| ); | ||
| } | ||
|
|
||
| export function CardGrid({ | ||
| items, | ||
| format, | ||
| }: { | ||
| items?: CardGridItem[]; | ||
| format?: "content" | "action"; | ||
| }) { | ||
| return ( | ||
| <Grid | ||
| gridColumns={{ mobile: "repeat(1, 1fr)", tablet: "repeat(2, 1fr)" }} | ||
| gridGap="16px" | ||
| > | ||
| {items ? ( | ||
| items.map((item) => <CardGridItem format={format} {...item} />) | ||
| ) : ( | ||
| <> | ||
| <CardGridItem format={format} /> | ||
| <CardGridItem format={format} /> | ||
| </> | ||
| )} | ||
| </Grid> | ||
| ); | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1 @@ | ||
| export { CardGrid, type CardGridItem } from './CardGrid'; |
Oops, something went wrong.