fix: solved grid problems and add necessary tokens

Capgemini · May 12, 2024 · 01783fd · 01783fd
1 parent 221bdd6
commit 01783fd
Show file tree

Hide file tree

Showing 7 changed files with 546 additions and 32 deletions.
diff --git a/example/src/components/CardDemo.tsx b/example/src/components/CardDemo.tsx
@@ -17,7 +17,6 @@ import { faAngleRight } from '@fortawesome/free-solid-svg-icons';
 import './cardDemo.scss';
 
 export const CardDemo = () => {
-  console.log('HELLO');
   return (
     <div className="demo-cards-container">
       <h1>Horizontal card example</h1>

diff --git a/src/design-system/card.css b/src/design-system/card.css
@@ -2,16 +2,24 @@
   /*
  * Default
  */
-
-  background: token('color-background-card_box');
+  box-sizing: border-box;
+  background: token('color-background-card_box-default');
   padding: token('spacing-x-card_box') token('spacing-y-card_box');
+  height: 100%;
+  box-shadow: token('box-shadow-card_box');
+  border-radius: token('border-radius-card_box');
+  border: token('border-width-card_box') token('border-style-card_box')
+    token('border-color-card_box-default');
 
-  .dcx-card-header {
-    line-height: token('line-height-header-card_box');
-  }
-
-  .dcx-card-content {
-    line-height: token('line-height-content-card_box');
+  &.dcx-card-interact {
+    &.dcx-card--selected {
+      border-color: token('border-color-card_box-selected');
+      background: token('color-background-card_box-selected');
+    }
+    &:hover {
+      border-color: token('border-color-card_box-hover');
+      background: token('color-background-card_box-hover');
+    }
   }
 
   .dcx-card-actions {
@@ -29,28 +37,68 @@
 
   &.dcx-card-horizontal {
     display: grid;
-    grid-template-columns: repeat(2, 1fr);
-    gap: 10px;
-
+    column-gap: token('spacing-y-card_box');
+    &:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content):has(.dcx-card-actions):has(.dcx-card-footer) {
+      grid-template-areas:
+        'card-image card-header'
+        'card-image card-content'
+        'card-image card-actions'
+        'card-image card-footer';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content):has(.dcx-card-footer) {
+      grid-template-areas:
+        'card-image card-header'
+        'card-image card-content'
+        'card-image card-footer';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content):has(.dcx-card-actions) {
+      grid-template-areas:
+        'card-image card-header'
+        'card-image card-content'
+        'card-image card-actions';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-header):has(.dcx-card-content) {
+      grid-template-areas:
+        'card-image card-header'
+        'card-image card-content';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-content) {
+      grid-template-areas: 'card-image card-content';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-content):has(.dcx-card-actions):has(.dcx-card-footer) {
+      grid-template-areas:
+        'card-image card-content'
+        'card-image card-actions'
+        'card-image card-footer';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-content):has(.dcx-card-footer) {
+      grid-template-areas:
+        'card-image card-content'
+        'card-image card-footer';
+    }
+    &:has(.dcx-card-image):has(.dcx-card-content):has(.dcx-card-actions) {
+      grid-template-areas:
+        'card-image card-content'
+        'card-image card-actions';
+    }
+    &:not(:has(.dcx-card-image)) {
+      display: flex;
+      flex-direction: column;
+    }
     .dcx-card-header {
-      grid-column: 1;
-      grid-row: 1;
+      grid-area: card-header;
     }
     .dcx-card-image {
-      grid-column: 1;
-      grid-row: 2;
+      grid-area: card-image;
     }
     .dcx-card-content {
-      grid-column: 2;
-      grid-row: 2;
+      grid-area: card-content;
     }
     .dcx-card-actions {
-      grid-column: 2;
-      grid-row: 3;
+      grid-area: card-actions;
     }
     .dcx-card-footer {
-      grid-column: 1/2;
-      grid-row: 4;
+      grid-area: card-footer;
     }
   }
 }
diff --git a/src/design-system/tokens.json b/src/design-system/tokens.json
@@ -14,18 +14,25 @@
   "border-color-action-hover-primary": "#3f51c9",
   "border-color-action-hover-secondary": "#454545",
   "border-color-action-hover-tertiary": "transparent",
+  "border-color-card_box-default": "transparent",
+  "border-color-card_box-selected": "#3f51b0",
+  "border-color-card_box-hover": "#3f51c9",
   "border-color-formcontrol": "#000",
   "border-radius-action": "6px",
+  "border-radius-card_box": "6px",
   "border-radius-formcontrol": "4px",
   "border-radius-formcontrol-floating": "4px",
   "border-radius-abbreviate": "3px",
   "border-style-action": "solid",
+  "border-style-card_box": "solid",
   "border-width-action": "1px",
+  "border-width-card_box": "1px",
   "border-width-formcontrol": "1px",
   "border-width-formcontrol-floating": "1px",
   "border-width-formcontrol_prefix": "1px",
   "border-width-formcontrol_suffix": "1px",
   "box-shadow-action": "0px 8px 15px rgba(0, 0, 0, 0.1)",
+  "box-shadow-card_box": "0px 8px 15px rgba(0, 0, 0, 0.1)",
   "color-background-action-active-primary": "#3f51c9",
   "color-background-action-active-secondary": "transparent",
   "color-background-action-active-tertiary": "#3f51b0",
@@ -41,7 +48,9 @@
   "color-background-action-hover-primary": "#3f51c9",
   "color-background-action-hover-secondary": "transparent",
   "color-background-action-hover-tertiary": "#3f51b0",
-  "color-background-card_box": "transparent",
+  "color-background-card_box-default": "transparent",
+  "color-background-card_box-selected": "transparent",
+  "color-background-card_box-hover": "#CFD1D0",
   "color-background-formcontrol": "transparent",
   "color-background-formcontrol-floating": "transparent",
   "color-background-formcontrol_label": "transparent",
@@ -140,8 +149,6 @@
   "font-weight-highlight_body": "normal",
   "font-weight-paragraph": "bold",
   "font-weight-pre_body": "normal",
-  "line-height-content-card_box": "18px",
-  "line-height-header-card_box": "22px",
   "spacing-pre_box": "6px",
   "spacing-x-action": "8px",
   "spacing-x-action_label": "6px",