From 4c2c6396cb5c01f4bdfba4badcfa99b24ce6e7aa Mon Sep 17 00:00:00 2001 From: Dylan Kilgore Date: Mon, 7 Aug 2023 15:17:32 -0700 Subject: [PATCH] feat: card: update card size prop and remove bunko story --- src/components/Card/Card.stories.tsx | 98 ++----------------- src/components/Card/Card.test.tsx | 31 ++++++ src/components/Card/Card.tsx | 1 + src/components/Card/Card.types.ts | 4 +- .../Card/__snapshots__/Card.test.tsx.snap | 73 ++++++++++++++ src/components/Card/card.module.scss | 11 ++- 6 files changed, 126 insertions(+), 92 deletions(-) create mode 100644 src/components/Card/__snapshots__/Card.test.tsx.snap diff --git a/src/components/Card/Card.stories.tsx b/src/components/Card/Card.stories.tsx index d83c37c8c..437101ddd 100644 --- a/src/components/Card/Card.stories.tsx +++ b/src/components/Card/Card.stories.tsx @@ -1,7 +1,7 @@ import React from 'react'; import { Stories } from '@storybook/addon-docs'; import { ComponentStory, ComponentMeta } from '@storybook/react'; -import { Card, CardType } from './'; +import { Card, CardSize } from './'; import { IconName } from '../Icon'; import { Avatar } from '../Avatar'; import { Pill } from '../Pills'; @@ -29,113 +29,35 @@ export default { ), }, }, + argTypes: { + size: { + options: [CardSize.Flex, CardSize.Large, CardSize.Medium, CardSize.Small], + control: { type: 'radio' }, + }, + }, } as ComponentMeta; const Card_Story: ComponentStory = (args) => ; -export const BaseCard = Card_Story.bind({}); export const CustomCard = Card_Story.bind({}); // Storybook 6.5 using Webpack >= 5.76.0 automatically alphabetizes exports, // this line ensures they are exported in the desired order. // See https://www.npmjs.com/package/babel-plugin-named-exports-order -export const __namedExportsOrder = ['BaseCard', 'CustomCard']; +export const __namedExportsOrder = ['CustomCard']; const baseCardArgs: Object = { dropShadow: true, + size: CardSize.Medium, style: {}, classNames: 'my-card-class', - icon: IconName.mdiInformation, - type: CardType.list, - headerButtonProps: { - iconProps: { - path: IconName.mdiBookmark, - }, - }, - headerTitle:
Senior UX Designer
, - bodyListOneProps: { - iconProps: { - path: IconName.mdiCheck, - color: 'green', - style: { marginRight: '2px' }, - }, - type: 'list', - contents: [ - { - showIcon: true, - label: 'Matched Skill', - }, - { - showIcon: true, - label: 'Matched Skill', - }, - { - showIcon: true, - label: 'Matched Skill', - }, - { - showIcon: false, - label: 'Other Skill', - }, - { - showIcon: false, - label: 'Other Skill', - }, - ], - }, - bodyListTwoProps: { - iconProps: { - path: IconName.mdiCheck, - color: 'green', - }, - type: 'pills', - contents: [ - { - showIcon: false, - label: 'Department', - }, - { - showIcon: false, - label: 'Urgent Hire', - }, - ], - }, - bodyListOnePillProps: { - theme: 'grey', - }, - bodyListTwoPillProps: { - theme: 'grey', - }, - subHeaderSeparatorIcon: IconName.mdiCircle, - subHeaderProps: ['Company', 'Job Location'], - footerProps: [ - { - iconProps: { - path: IconName.mdiWeb, - color: 'blue', - style: { marginRight: '2px' }, - }, - text: 'Strong match', - }, - { - iconProps: { - path: IconName.mdiCheck, - color: 'green', - style: { marginRight: '2px' }, - }, - text: 'Applied', - }, - ], -}; - -BaseCard.args = { - ...baseCardArgs, }; CustomCard.args = { ...baseCardArgs, width: '360px', height: '520px', + size: CardSize.Large, children: (
{ }); expect(wrapper.find('.header-button').length).toBeTruthy(); }); + + test('Card is large', () => { + const { container } = render( + + ); + expect(container.getElementsByClassName('card-large')).toHaveLength(1); + expect(container).toMatchSnapshot(); + }); + + test('Card is medium', () => { + const { container } = render( + + ); + expect(container.getElementsByClassName('card-medium')).toHaveLength(1); + expect(container).toMatchSnapshot(); + }); + + test('Card is small', () => { + const { container } = render( + + ); + expect(container.getElementsByClassName('card-small')).toHaveLength(1); + expect(container).toMatchSnapshot(); + }); }); diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx index ce1ff48ca..9ea3d1104 100644 --- a/src/components/Card/Card.tsx +++ b/src/components/Card/Card.tsx @@ -122,6 +122,7 @@ export const Card: FC = React.forwardRef( children ) : ( <> + {/** TODO: Update predefined variants to meet latest specification. */}
{header && header} {(icon || headerTitle) && ( diff --git a/src/components/Card/Card.types.ts b/src/components/Card/Card.types.ts index ddae43f05..36acf04dd 100644 --- a/src/components/Card/Card.types.ts +++ b/src/components/Card/Card.types.ts @@ -9,7 +9,7 @@ export enum CardSize { Flex = 'flex', Large = 'large', Medium = 'medium', - Small = 'medium', + Small = 'small', } export enum CardType { @@ -149,7 +149,7 @@ export interface CardProps extends OcBaseProps { */ size?: CardSize | Size; /** - * The button style. + * The card style. */ style?: React.CSSProperties; /** diff --git a/src/components/Card/__snapshots__/Card.test.tsx.snap b/src/components/Card/__snapshots__/Card.test.tsx.snap new file mode 100644 index 000000000..cbd57cd51 --- /dev/null +++ b/src/components/Card/__snapshots__/Card.test.tsx.snap @@ -0,0 +1,73 @@ +// Jest Snapshot v1, https://goo.gl/fbAQLP + +exports[`Card Card is large 1`] = ` +
+
+
+ This is the card header +
+
+ This is the card body +
+
+ This is the card footer +
+
+
+`; + +exports[`Card Card is medium 1`] = ` +
+
+
+ This is the card header +
+
+ This is the card body +
+
+ This is the card footer +
+
+
+`; + +exports[`Card Card is small 1`] = ` +
+
+
+ This is the card header +
+
+ This is the card body +
+
+ This is the card footer +
+
+
+`; diff --git a/src/components/Card/card.module.scss b/src/components/Card/card.module.scss index 0e6782ce8..82df84bd5 100644 --- a/src/components/Card/card.module.scss +++ b/src/components/Card/card.module.scss @@ -5,7 +5,8 @@ display: block; font-family: var(--card-font-family); gap: $space-m; - padding: $space-ml; + height: 260px; + padding: $space-m; width: 360px; position: relative; @@ -30,11 +31,17 @@ &-large { height: 278px; + padding: $space-ml; + } + + &-medium { + height: 260px; + padding: $space-m; } - &-medium, &-small { height: 260px; + padding: $space-s; } &.disabled {