-
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(web-react): Introduce Card component #1535
- Loading branch information
1 parent
5a68dcc
commit a249f6d
Showing
52 changed files
with
3,455 additions
and
0 deletions.
There are no files selected for viewing
380 changes: 380 additions & 0 deletions
380
packages/web-react/docs/stories/examples/CardComposition.stories.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,380 @@ | ||
| import React, { ElementType } from 'react'; | ||
| import { | ||
| Button, | ||
| Card, | ||
| CardArtwork, | ||
| CardBody, | ||
| CardEyebrow, | ||
| CardFooter, | ||
| CardLink, | ||
| CardLogo, | ||
| CardMedia, | ||
| CardTitle, | ||
| Container, | ||
| Grid, | ||
| Icon, | ||
| PartnerLogo, | ||
| UseCardStyleProps, | ||
| } from '../../../src/components'; | ||
| import { LOGO, MEDIA_IMAGE } from '../../../src/components/Card/demo/constants'; | ||
| import { AlignmentX, Direction, Sizes } from '../../../src/constants'; | ||
| import { GridColumns, SizesDictionaryType } from '../../../src/types'; | ||
|
|
||
| type CardCompositionType = { | ||
| cardElementType: ElementType; | ||
| cardLogoHasSafeArea: boolean; | ||
| cardLogoSize: SizesDictionaryType; | ||
| contentText: string; | ||
| eyebrowText: string; | ||
| gridCols: GridColumns; | ||
| image: string; | ||
| numCards: number; | ||
| showArtwork: boolean; | ||
| showContent: boolean; | ||
| showEyebrow: boolean; | ||
| showFooter: boolean; | ||
| showLogo: boolean; | ||
| showMedia: boolean; | ||
| showTitle: boolean; | ||
| titleElementType: ElementType; | ||
| titleText: string; | ||
| titleWithLink: boolean; | ||
| wrapInContainer: boolean; | ||
| } & UseCardStyleProps; | ||
|
|
||
| export default { | ||
| title: 'Examples/Compositions', | ||
| argTypes: { | ||
| alignmentX: { | ||
| control: 'select', | ||
| description: 'Alignment inside CardFooter component.', | ||
| options: [...Object.values(AlignmentX)], | ||
| table: { | ||
| category: 'CardFooter', | ||
| defaultValue: { summary: AlignmentX.LEFT }, | ||
| }, | ||
| }, | ||
| cardElementType: { | ||
| control: 'text', | ||
| name: 'elementType', | ||
| description: 'Element type for the card.', | ||
| table: { | ||
| category: 'Card', | ||
| defaultValue: { summary: 'article' }, | ||
| }, | ||
| }, | ||
| cardLogoHasSafeArea: { | ||
| control: 'boolean', | ||
| description: 'If true, the logo will have a safe area.', | ||
| name: 'logo safe area', | ||
| table: { | ||
| category: 'CardLogo', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| cardLogoSize: { | ||
| control: 'select', | ||
| description: 'Size of the logo.', | ||
| options: [...Object.values(Sizes)], | ||
| name: 'logo size', | ||
| table: { | ||
| category: 'CardLogo', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| contentText: { | ||
| control: 'text', | ||
| description: 'Text for the user content.', | ||
| name: 'children', | ||
| table: { | ||
| category: 'CardBody', | ||
| defaultValue: { | ||
| summary: '', | ||
| }, | ||
| }, | ||
| }, | ||
| direction: { | ||
| control: 'select', | ||
| description: 'Direction of the card.', | ||
| options: [...Object.values(Direction), 'horizontal-reversed'], | ||
| table: { | ||
| category: 'Card', | ||
| defaultValue: { summary: Direction.VERTICAL }, | ||
| }, | ||
| }, | ||
| eyebrowText: { | ||
| control: 'text', | ||
| description: 'Text for the CardEyebrow component.', | ||
| name: 'children', | ||
| table: { | ||
| category: 'CardEyebrow', | ||
| defaultValue: { summary: '' }, | ||
| }, | ||
| }, | ||
| gridCols: { | ||
| control: 'select', | ||
| name: 'grid columns', | ||
| description: 'Number of columns in the grid.', | ||
| options: [1, 2, 3, 4, 5, 6, 12], | ||
| }, | ||
| hasFilledHeight: { | ||
| control: 'boolean', | ||
| description: 'Fill the height of the media.', | ||
| table: { | ||
| category: 'CardMedia', | ||
| defaultValue: { summary: false }, | ||
| }, | ||
| }, | ||
| image: { | ||
| control: 'text', | ||
| description: 'Image source for the CardMedia image.', | ||
| name: 'image url', | ||
| table: { | ||
| category: 'CardMedia', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| isBoxed: { | ||
| control: 'boolean', | ||
| description: 'Border around the card.', | ||
| table: { | ||
| category: 'Card', | ||
| defaultValue: { summary: false }, | ||
| }, | ||
| }, | ||
| isExpanded: { | ||
| control: 'boolean', | ||
| description: 'Expand the media to fill the card. Only works when isBoxed is true.', | ||
| table: { | ||
| category: 'CardMedia', | ||
| defaultValue: { summary: false }, | ||
| }, | ||
| }, | ||
| isHeading: { | ||
| control: 'boolean', | ||
| description: 'If true, the CardTitle will render as a heading.', | ||
| table: { | ||
| category: 'CardTitle', | ||
| defaultValue: { summary: true }, | ||
| }, | ||
| }, | ||
| numCards: { | ||
| control: 'select', | ||
| name: 'number of cards', | ||
| description: 'Number of cards to display.', | ||
| options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12], | ||
| }, | ||
| showArtwork: { | ||
| control: 'boolean', | ||
| description: 'Show the CardArtwork component.', | ||
| name: 'show artwork', | ||
| table: { | ||
| category: 'CardArtwork', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| showFooter: { | ||
| control: 'boolean', | ||
| description: 'Show the CardFooter component.', | ||
| name: 'show footer', | ||
| table: { | ||
| category: 'CardFooter', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| showLogo: { | ||
| control: 'boolean', | ||
| description: 'Show the CardLogo component.', | ||
| name: 'show logo', | ||
| table: { | ||
| category: 'CardLogo', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| showContent: { | ||
| control: 'boolean', | ||
| description: 'Show the user content component.', | ||
| name: 'show card content', | ||
| table: { | ||
| category: 'CardBody', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| showEyebrow: { | ||
| control: 'boolean', | ||
| description: 'Show the CardEyebrow component.', | ||
| name: 'show eyebrow', | ||
| table: { | ||
| category: 'CardEyebrow', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| showMedia: { | ||
| control: 'boolean', | ||
| description: 'Show the CardMedia component.', | ||
| name: 'show media', | ||
| table: { | ||
| category: 'CardMedia', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| showTitle: { | ||
| control: 'boolean', | ||
| description: 'Show the CardTitle component.', | ||
| name: 'show title', | ||
| table: { | ||
| category: 'CardTitle', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| size: { | ||
| control: 'select', | ||
| description: 'Size of the media.', | ||
| options: [...Object.values(Sizes), 'auto'], | ||
| table: { | ||
| category: 'CardMedia', | ||
| defaultValue: { summary: Sizes.MEDIUM }, | ||
| }, | ||
| }, | ||
| titleElementType: { | ||
| control: 'text', | ||
| name: 'elementType', | ||
| description: 'Element type for the title.', | ||
| table: { | ||
| category: 'CardTitle', | ||
| defaultValue: { summary: 'h4' }, | ||
| }, | ||
| }, | ||
| titleText: { | ||
| control: 'text', | ||
| description: 'Text for the CardTitle component.', | ||
| name: 'children', | ||
| table: { | ||
| category: 'CardTitle', | ||
| defaultValue: { summary: '' }, | ||
| }, | ||
| }, | ||
| titleWithLink: { | ||
| control: 'boolean', | ||
| description: 'Add a link to the CardTitle component.', | ||
| name: 'title as link', | ||
| table: { | ||
| category: 'CardTitle', | ||
| subcategory: 'Demo settings', | ||
| }, | ||
| }, | ||
| wrapInContainer: { | ||
| control: 'boolean', | ||
| description: 'Wrap the card in a container.', | ||
| name: 'wrap cards in container', | ||
| }, | ||
| }, | ||
| args: { | ||
| alignmentX: AlignmentX.LEFT, | ||
| cardElementType: 'article', | ||
| cardLogoHasSafeArea: true, | ||
| cardLogoSize: Sizes.MEDIUM, | ||
| contentText: | ||
| 'Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nulla accumsan, metus ultrices eleifend gravida, nulla nunc varius lectus, nec rutrum justo nibh eu lectus. Ut vulputate semper dui. Fusce erat. Morbi fringilla convallis sapien. Sed ac felis. Aliquam erat volutpat. Aliquam euismod. Aenean vel lectus. Nunc imperdiet justo nec dolor.', | ||
| direction: Direction.VERTICAL, | ||
| eyebrowText: 'Eyebrow title', | ||
| gridCols: 3, | ||
| hasFilledHeight: false, | ||
| image: MEDIA_IMAGE, | ||
| isBoxed: false, | ||
| isExpanded: false, | ||
| isHeading: true, | ||
| numCards: 3, | ||
| showArtwork: false, | ||
| showFooter: true, | ||
| showLogo: true, | ||
| showContent: true, | ||
| showEyebrow: true, | ||
| showMedia: true, | ||
| showTitle: true, | ||
| size: Sizes.MEDIUM, | ||
| titleElementType: 'h4', | ||
| titleText: 'Card Title', | ||
| titleWithLink: false, | ||
| wrapInContainer: true, | ||
| }, | ||
| }; | ||
|
|
||
| export const CardComposition = (args: CardCompositionType) => { | ||
| const { | ||
| alignmentX, | ||
| cardElementType, | ||
| cardLogoHasSafeArea, | ||
| cardLogoSize, | ||
| contentText, | ||
| direction, | ||
| eyebrowText, | ||
| gridCols, | ||
| hasFilledHeight, | ||
| image, | ||
| isBoxed, | ||
| isExpanded, | ||
| isHeading, | ||
| numCards, | ||
| showArtwork, | ||
| showContent, | ||
| showEyebrow, | ||
| showFooter, | ||
| showLogo, | ||
| showMedia, | ||
| showTitle, | ||
| size, | ||
| titleElementType, | ||
| titleText, | ||
| titleWithLink, | ||
| wrapInContainer, | ||
| ...restProps | ||
| } = args; | ||
|
|
||
| const renderTitle = () => ( | ||
| <CardTitle isHeading={isHeading} elementType={titleElementType}> | ||
| {titleWithLink ? <CardLink href="#">{titleText}</CardLink> : titleText} | ||
| </CardTitle> | ||
| ); | ||
|
|
||
| const renderCard = () => ( | ||
| <Grid cols={gridCols}> | ||
| {Array.from({ length: numCards }, (_, index) => ( | ||
| <Card key={index} elementType={cardElementType} {...restProps} isBoxed={isBoxed} direction={direction}> | ||
| {showMedia && ( | ||
| <CardMedia isExpanded={isExpanded} size={size} hasFilledHeight={hasFilledHeight}> | ||
| <img src={image} alt="" /> | ||
| </CardMedia> | ||
| )} | ||
| {showArtwork && ( | ||
| <CardArtwork> | ||
| <Icon name="file" /> | ||
| </CardArtwork> | ||
| )} | ||
| {showLogo && ( | ||
| <CardLogo> | ||
| <PartnerLogo size={cardLogoSize} hasSafeArea={cardLogoHasSafeArea}> | ||
| {LOGO} | ||
| </PartnerLogo> | ||
| </CardLogo> | ||
| )} | ||
| {(showEyebrow || showTitle || showContent) && ( | ||
| <CardBody> | ||
| {showEyebrow && <CardEyebrow>{eyebrowText}</CardEyebrow>} | ||
| {showTitle && renderTitle()} | ||
| {showContent && <p>{contentText}</p>} | ||
| </CardBody> | ||
| )} | ||
| {showFooter && ( | ||
| <CardFooter alignmentX={alignmentX}> | ||
| <Button color="primary">Primary</Button> | ||
| <Button color="secondary">Secondary</Button> | ||
| </CardFooter> | ||
| )} | ||
| </Card> | ||
| ))} | ||
| </Grid> | ||
| ); | ||
|
|
||
| return wrapInContainer ? <Container>{renderCard()}</Container> : renderCard(); | ||
| }; |
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
Oops, something went wrong.