feat: card: update card size prop and remove bunko story

EightfoldAI · Aug 7, 2023 · 4c2c639 · 4c2c639
1 parent 2bf20ef
commit 4c2c639
Show file tree

Hide file tree

Showing 6 changed files with 126 additions and 92 deletions.
diff --git 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<typeof Card>;
 
 const Card_Story: ComponentStory<typeof Card> = (args) => <Card {...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: <div>Senior UX Designer</div>,
-  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: (
     <div style={{ textAlign: 'center', position: 'relative' }}>
       <Avatar

diff --git a/src/components/Card/Card.test.tsx b/src/components/Card/Card.test.tsx
@@ -4,6 +4,8 @@ import Enzyme, { mount, ReactWrapper } from 'enzyme';
 import Adapter from '@wojtekmaj/enzyme-adapter-react-17';
 import { Card } from './Card';
 import { IconName } from '../Icon';
+import { render } from '@testing-library/react';
+import { CardSize } from './Card.types';
 
 Enzyme.configure({ adapter: new Adapter() });
 
@@ -49,4 +51,33 @@ describe('Card', () => {
     });
     expect(wrapper.find('.header-button').length).toBeTruthy();
   });
+
+  test('Card is large', () => {
+    const { container } = render(
+      <Card body={body} footer={footer} header={header} size={CardSize.Large} />
+    );
+    expect(container.getElementsByClassName('card-large')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Card is medium', () => {
+    const { container } = render(
+      <Card
+        body={body}
+        footer={footer}
+        header={header}
+        size={CardSize.Medium}
+      />
+    );
+    expect(container.getElementsByClassName('card-medium')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('Card is small', () => {
+    const { container } = render(
+      <Card body={body} footer={footer} header={header} size={CardSize.Small} />
+    );
+    expect(container.getElementsByClassName('card-small')).toHaveLength(1);
+    expect(container).toMatchSnapshot();
+  });
 });
diff --git a/src/components/Card/Card.tsx b/src/components/Card/Card.tsx
@@ -122,6 +122,7 @@ export const Card: FC<CardProps> = React.forwardRef(
           children
         ) : (
           <>
+            {/** TODO: Update predefined variants to meet latest specification. */}
             <div className={headerClasses}>
               {header && header}
               {(icon || headerTitle) && (

diff --git 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<HTMLDivElement> {
    */
   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
@@ -0,0 +1,73 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Card Card is large 1`] = `
+<div>
+  <div
+    class="card list card-large"
+  >
+    <div
+      class="header"
+    >
+      This is the card header
+    </div>
+    <div
+      class="body"
+    >
+      This is the card body
+    </div>
+    <div
+      class="footer"
+    >
+      This is the card footer
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Card is medium 1`] = `
+<div>
+  <div
+    class="card list card-medium"
+  >
+    <div
+      class="header"
+    >
+      This is the card header
+    </div>
+    <div
+      class="body"
+    >
+      This is the card body
+    </div>
+    <div
+      class="footer"
+    >
+      This is the card footer
+    </div>
+  </div>
+</div>
+`;
+
+exports[`Card Card is small 1`] = `
+<div>
+  <div
+    class="card list card-small"
+  >
+    <div
+      class="header"
+    >
+      This is the card header
+    </div>
+    <div
+      class="body"
+    >
+      This is the card body
+    </div>
+    <div
+      class="footer"
+    >
+      This is the card footer
+    </div>
+  </div>
+</div>
+`;
diff --git 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 {