fixup! fixup! fixup! fixup! fixup! fixup! fixup! fixup! Feat(web-reac…

…t): Introduce Card component #1535
lmc-eu · Nov 28, 2024 · 3fe88fe · 3fe88fe
1 parent 33233bd
commit 3fe88fe
Showing 1 changed file with 18 additions and 5 deletions.
diff --git a/packages/web-react/docs/stories/examples/CardComposition.stories.tsx b/packages/web-react/docs/stories/examples/CardComposition.stories.tsx
@@ -45,12 +45,13 @@ type CardCompositionType = {
 export default {
   title: 'Examples/Compositions',
   argTypes: {
-    footerAlignmentX: {
+    artworkAlignmentX: {
       control: 'select',
-      description: 'Alignment inside CardFooter component.',
+      description: 'Alignment inside CardArtwork component.',
       options: [...Object.values(AlignmentX)],
+      name: 'alignmentX',
       table: {
-        category: 'CardFooter',
+        category: 'CardArtwork',
         defaultValue: { summary: AlignmentX.LEFT },
       },
     },
@@ -111,6 +112,16 @@ export default {
         defaultValue: { summary: '' },
       },
     },
+    footerAlignmentX: {
+      control: 'select',
+      description: 'Alignment inside CardFooter component.',
+      options: [...Object.values(AlignmentX)],
+      name: 'alignmentX',
+      table: {
+        category: 'CardFooter',
+        defaultValue: { summary: AlignmentX.LEFT },
+      },
+    },
     gridCols: {
       control: 'select',
       name: 'grid columns',
@@ -270,14 +281,15 @@ export default {
     },
   },
   args: {
-    alignmentX: AlignmentX.LEFT,
+    artworkAlignmentX: 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: CardDirection.VERTICAL,
     eyebrowText: 'Eyebrow title',
+    footerAlignmentX: AlignmentX.LEFT,
     gridCols: 3,
     hasFilledHeight: false,
     image: MEDIA_IMAGE,
@@ -302,6 +314,7 @@ export default {
 
 export const CardComposition = (args: CardCompositionType) => {
   const {
+    artworkAlignmentX,
     cardElementType,
     cardLogoHasSafeArea,
     cardLogoSize,
@@ -347,7 +360,7 @@ export const CardComposition = (args: CardCompositionType) => {
             </CardMedia>
           )}
           {showArtwork && (
-            <CardArtwork>
+            <CardArtwork alignmentX={artworkAlignmentX}>
               <Icon name="file" />
             </CardArtwork>
           )}