From 1d57a87d43a79085bc4dbef386d378340df45037 Mon Sep 17 00:00:00 2001
From: Pavel Klibani <pavel@techloop.io>
Date: Thu, 21 Nov 2024 11:50:37 +0100
Subject: [PATCH] fixup! fixup! fixup! fixup! fixup! fixup! Feat(web-react):
 Introduce Card component #1535

---
 .../examples/CardComposition.stories.tsx      | 64 +++++++++++++------
 1 file changed, 45 insertions(+), 19 deletions(-)

diff --git a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx
index c35d3be904..5e34a24ee0 100644
--- 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,14 +37,27 @@ 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 },
       },
     },
@@ -52,6 +65,7 @@ export default {
       control: 'text',
       description: 'Text for the CardEyebrow component.',
       table: {
+        category: 'CardEyebrow',
         defaultValue: { summary: '' },
       },
     },
@@ -59,6 +73,7 @@ export default {
       control: 'boolean',
       description: 'Fill the height of the media.',
       table: {
+        category: 'CardMedia',
         defaultValue: { summary: false },
       },
     },
@@ -66,6 +81,8 @@ export default {
       control: 'text',
       description: 'Image source for the CardMedia image.',
       table: {
+        category: 'CardMedia',
+        subcategory: 'Demo settings',
         defaultValue: '',
       },
     },
@@ -73,6 +90,7 @@ export default {
       control: 'boolean',
       description: 'Border around the card.',
       table: {
+        category: 'Card',
         defaultValue: { summary: false },
       },
     },
@@ -80,6 +98,7 @@ export default {
       control: 'boolean',
       description: 'Expand the media to fill the card. Only works when isBoxed is true.',
       table: {
+        category: 'CardMedia',
         defaultValue: { summary: false },
       },
     },
@@ -87,6 +106,7 @@ export default {
       control: 'boolean',
       description: 'If true, the CardTitle will render as a heading.',
       table: {
+        category: 'CardTitle',
         defaultValue: { summary: false },
       },
     },
@@ -95,10 +115,12 @@ 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 },
       },
     },
@@ -106,6 +128,8 @@ export default {
       control: 'boolean',
       description: 'Show the user content component.',
       table: {
+        category: 'CardBody',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
@@ -113,6 +137,8 @@ export default {
       control: 'boolean',
       description: 'Show the CardEyebrow component.',
       table: {
+        category: 'CardEyebrow',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
@@ -120,6 +146,8 @@ export default {
       control: 'boolean',
       description: 'Show the CardMedia component.',
       table: {
+        category: 'CardMedia',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
@@ -127,6 +155,8 @@ export default {
       control: 'boolean',
       description: 'Show the CardTitle component.',
       table: {
+        category: 'CardTitle',
+        subcategory: 'Demo settings',
         defaultValue: { summary: true },
       },
     },
@@ -135,6 +165,7 @@ export default {
       description: 'Size of the media.',
       options: [...Object.values(Sizes), 'auto'],
       table: {
+        category: 'CardMedia',
         defaultValue: { summary: Sizes.MEDIUM },
       },
     },
@@ -142,6 +173,8 @@ export default {
       control: 'text',
       description: 'Text for the CardTitle component.',
       table: {
+        category: 'CardTitle',
+        subcategory: 'Demo settings',
         defaultValue: { summary: '' },
       },
     },
@@ -149,21 +182,16 @@ export default {
       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,7 +200,7 @@ export default {
     isExpanded: false,
     isHeading: false,
     numCards: 3,
-    showActions: true,
+    showFooter: true,
     showContent: true,
     showEyebrow: true,
     showMedia: true,
@@ -180,14 +208,13 @@ export default {
     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>