[wip] adds grid layout to default stories

Capgemini · Mar 5, 2024 · fe0073b · fe0073b
1 parent 6061ff1
commit fe0073b
Show file tree

Hide file tree

Showing 2 changed files with 50 additions and 32 deletions.
diff --git a/src/design-system/card.css b/src/design-system/card.css
@@ -7,19 +7,11 @@
   padding: token('spacing-x-card_box') token('spacing-y-card_box');
 
   .dcx-card-header {
-    font-size: token('font-size-pre_body');
-    font-weight: token('font-weight-paragraph');
     line-height: token('line-height-header-card_box');
-    padding-top: token('spacing-x-card_box');
-    padding-bottom: token('spacing-x-card_box');
   }
 
   .dcx-card-content {
-    font-size: token('font-size-paragraph');
-    font-weight: token('font-weight-body');
     line-height: token('line-height-content-card_box');
-    padding-top: token('spacing-x-card_box');
-    padding-bottom: token('spacing-x-card_box');
   }
 
   .dcx-card-actions {
@@ -29,19 +21,36 @@
   .dcx-card-image {
     max-width: 100%;
     max-height: 100%;
-    object-fit: 'cover';
-  }
-
-  .dcx-card-footer {
-    padding-top: token('spacing-x-card_box');
-    padding-bottom: token('spacing-x-card_box');
   }
 
   /*
  * horizontal
  */
 
   &.dcx-card-horizontal {
-    display: flex;
+    display: grid;
+    grid-template-columns: repeat(2, 1fr);
+    gap: 10px;
+
+    .dcx-card-header {
+      grid-column: 1;
+      grid-row: 1;
+    }
+    .dcx-card-image {
+      grid-column: 1;
+      grid-row: 2;
+    }
+    .dcx-card-content {
+      grid-column: 2;
+      grid-row: 2;
+    }
+    .dcx-card-actions {
+      grid-column: 2;
+      grid-row: 3;
+    }
+    .dcx-card-footer {
+      grid-column: 1/2;
+      grid-row: 4;
+    }
   }
 }
diff --git a/stories/Card/design-system/Default.stories.js b/stories/Card/design-system/Default.stories.js
@@ -6,6 +6,9 @@ import {
   CardImage,
 } from '../../../src/card';
 import { Card } from '../../../src/card/Card';
+import { Heading } from '../../../src/heading/Heading';
+import { Button } from '../../../src/button/Button';
+import { Paragraph } from '../../../src/paragraph/Paragraph';
 
 /**
  * Here we display the component in its natural form, importing only the base Design System styles.
@@ -32,16 +35,20 @@ export const Default = {
     variant: 'default',
     children: [
       <>
-        <CardHeader>John Doe</CardHeader>
+        <CardHeader></CardHeader>
         <CardImage src="https://placehold.co/100" alt="" />
         <CardContent>
-          Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
-          nisl, egestas et elit et, interdum cursus massa.
+          <Paragraph>
+            Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
+            nisl, egestas et elit et, interdum cursus massa.
+          </Paragraph>
         </CardContent>
         <CardActions>
-          <button>Share</button>
+          <Button>Share</Button>
         </CardActions>
-        <CardFooter>12/02/2024</CardFooter>
+        <CardFooter>
+          <Paragraph>12/02/2024</Paragraph>
+        </CardFooter>
       </>,
     ],
   },
@@ -54,20 +61,22 @@ export const DefaultHorizontal = {
     layout: 'horizontal',
     children: [
       <>
-        <div>
-          <CardHeader>Article title</CardHeader>
-          <CardImage src="https://placehold.co/100" alt="" />
-        </div>
-        <div>
-          <CardContent>
+        <CardHeader>
+          <Heading level="h3" label="John Doe" />
+        </CardHeader>
+        <CardImage src="https://placehold.co/200" alt="" />
+        <CardContent>
+          <Paragraph>
             Nullam sodales semper ipsum, et luctus lacus sodales in. Nulla nibh
             nisl, egestas et elit et, interdum cursus massa.
-          </CardContent>
-          <CardActions>
-            <button>Share</button>
-          </CardActions>
-          <CardFooter>12/02/2024</CardFooter>
-        </div>
+          </Paragraph>
+        </CardContent>
+        <CardActions>
+          <Button label="Read more" />
+        </CardActions>
+        <CardFooter>
+          <Paragraph>12/02/2024</Paragraph>
+        </CardFooter>
       </>,
     ],
   },