fixup! fixup! fixup! fixup! fixup! fixup! Feat(web-react): Introduce …

…Card component #1535
lmc-eu · Nov 21, 2024 · 1d57a87 · 1d57a87
1 parent 3887074
commit 1d57a87
Showing 1 changed file with 45 additions and 19 deletions.
diff --git a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx
@@ -16,17 +16,17 @@ import { AlignmentX, Direction, Sizes } from '../../../src/constants';
 import { GridColumns } from '../../../src/types';
 
 type CardCompositionType = {
+  contentText: string;
   eyebrowText: string;
   image: string;
   numCards: number;
-  showActions: boolean;
   showContent: boolean;
   showEyebrow: boolean;
+  showFooter: boolean;
   showMedia: boolean;
   showTitle: boolean;
   titleText: string;
   titleWithLink: boolean;
-  userText: string;
 } & UseCardStyleProps;
 
 export default {
@@ -37,56 +37,76 @@ export default {
       description: 'Alignment inside CardFooter component.',
       options: [...Object.values(AlignmentX)],
       table: {
+        category: 'CardFooter',
         defaultValue: { summary: AlignmentX.LEFT },
       },
     },
+    contentText: {
+      control: 'text',
+      description: 'Text for the user content.',
+      table: {
+        category: 'CardBody',
+        subcategory: 'Demo settings',
+        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.',
       table: {
+        category: 'CardEyebrow',
         defaultValue: { summary: '' },
       },
     },
     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.',
       table: {
+        category: 'CardMedia',
+        subcategory: 'Demo settings',
         defaultValue: '',
       },
     },
     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: false },
       },
     },
@@ -95,38 +115,48 @@ export default {
       description: 'Number of cards to display.',
       options: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12],
     },
-    showActions: {
+    showFooter: {
       control: 'boolean',
       description: 'Show the CardFooter component.',
       table: {
+        category: 'CardFooter',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
     showContent: {
       control: 'boolean',
       description: 'Show the user content component.',
       table: {
+        category: 'CardBody',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
     showEyebrow: {
       control: 'boolean',
       description: 'Show the CardEyebrow component.',
       table: {
+        category: 'CardEyebrow',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
     showMedia: {
       control: 'boolean',
       description: 'Show the CardMedia component.',
       table: {
+        category: 'CardMedia',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
     showTitle: {
       control: 'boolean',
       description: 'Show the CardTitle component.',
       table: {
+        category: 'CardTitle',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
@@ -135,35 +165,33 @@ export default {
       description: 'Size of the media.',
       options: [...Object.values(Sizes), 'auto'],
       table: {
+        category: 'CardMedia',
         defaultValue: { summary: Sizes.MEDIUM },
       },
     },
     titleText: {
       control: 'text',
       description: 'Text for the CardTitle component.',
       table: {
+        category: 'CardTitle',
+        subcategory: 'Demo settings',
         defaultValue: { summary: '' },
       },
     },
     titleWithLink: {
       control: 'boolean',
       description: 'Add a link to the CardTitle component.',
       table: {
+        category: 'CardTitle',
+        subcategory: 'Demo settings',
         defaultValue: { summary: false },
       },
     },
-    userText: {
-      control: 'text',
-      description: 'Text for the user content.',
-      table: {
-        defaultValue: {
-          summary: '',
-        },
-      },
-    },
   },
   args: {
     alignmentX: AlignmentX.LEFT,
+    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',
     hasFilledHeight: false,
@@ -172,22 +200,21 @@ export default {
     isExpanded: false,
     isHeading: false,
     numCards: 3,
-    showActions: true,
+    showFooter: true,
     showContent: true,
     showEyebrow: true,
     showMedia: true,
     showTitle: true,
     size: Sizes.MEDIUM,
     titleText: 'Card Title',
     titleWithLink: false,
-    userText:
-      '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.',
   },
 };
 
 export const CardComposition = (args: CardCompositionType) => {
   const {
     alignmentX,
+    contentText,
     direction,
     eyebrowText,
     hasFilledHeight,
@@ -196,15 +223,14 @@ export const CardComposition = (args: CardCompositionType) => {
     isExpanded,
     isHeading,
     numCards,
-    showActions,
     showContent,
     showEyebrow,
+    showFooter,
     showMedia,
     showTitle,
     size,
     titleText,
     titleWithLink,
-    userText,
     ...restProps
   } = args;
 
@@ -251,10 +277,10 @@ export const CardComposition = (args: CardCompositionType) => {
             <CardBody>
               {showEyebrow && <CardEyebrow>{eyebrowText}</CardEyebrow>}
               {showTitle && renderTitle()}
-              {showContent && <p>{userText}</p>}
+              {showContent && <p>{contentText}</p>}
             </CardBody>
           )}
-          {showActions && (
+          {showFooter && (
             <CardFooter alignmentX={alignmentX}>
               <Button color="primary">Primary</Button>
               <Button color="secondary">Secondary</Button>