feat(card): implemented big changes and refactor after design feedabck

nl-design-system · Oct 15, 2024 · 918bcf6 · 918bcf6
1 parent 1bcd5e8
commit 918bcf6
Show file tree

Hide file tree

Showing 3 changed files with 55 additions and 5 deletions.
diff --git a/packages/components-css/card/_mixin.scss b/packages/components-css/card/_mixin.scss
@@ -19,17 +19,32 @@
 }
 
 @mixin rhc-card--full-bleed {
+  --rhc-card-as-link-metadata-color: var(
+    --rhc-card-as-link-full-bleed-metadata-color,
+    var(--rhc-card-as-link-full-bleed-color, white)
+  );
+
   color: var(--rhc-card-as-link-full-bleed-color, white);
 }
 
+@mixin rhc-card--horizontal {
+  flex-direction: row;
+  gap: 0;
+  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
+}
+
 @mixin rhc-card--active {
   background-color: var(--rhc-card-as-link-active-background-color, #dce3ea);
 }
 
-@mixin rhc-card--focus {
+@mixin rhc-card--default--focus {
   background-color: var(--rhc-card-as-link-focus-background-color, #dce3ea);
 }
 
+@mixin rhc-card--default--hover {
+  background-color: var(--rhc-card-as-link-hover-background-color, #f8fafc);
+}
+
 @mixin rhc-card--full-bleed__footer {
   padding-block-end: var(--rhc-card-as-link-full-bleed-padding-block-end, 16px);
   padding-block-start: var(--rhc-card-as-link-full-bleed-padding-block-start, 16px);
@@ -43,6 +58,8 @@
 }
 
 @mixin rhc-card__content {
+  display: flex;
+  flex-direction: column;
   padding-block-end: var(--rhc-card-as-link-padding-block-end, 16px);
   padding-block-start: var(--rhc-card-as-link-padding-block-start, 16px);
   padding-inline-end: var(--rhc-card-as-link-padding-inline-end, 16px);
@@ -54,9 +71,10 @@
   @include rounded-border-corners;
 
   background-color: var(--rhc-card-as-link-horizontal-background-color, #154273);
+  border-end-start-radius: 0;
+  border-start-start-radius: 0;
   color: var(--rhc-card-as-link-horizontal-color, white);
   column-gap: var(--rhc-card-as-link-column-gap, 16px);
-  display: flex;
   flex-direction: row;
   padding-block-end: var(--rhc-card-as-link-horizontal-padding-block-end, 0);
   padding-block-start: var(--rhc-card-as-link-horizontal-padding-block-start, 0);
@@ -65,6 +83,10 @@
   row-gap: var(--rhc-card-as-link-row-gap, 12px);
 }
 
+@mixin rhc-card--horizontal__heading {
+  inline-size: var(--rhc-card-as-link-horizontal-heading-inline-size);
+}
+
 @mixin rhc-card--full-bleed__image-container {
   block-size: 100%;
   inline-size: 100%;
@@ -74,13 +96,19 @@
   @include rounded-border-corners;
 
   block-size: unset;
+  filter: brightness(var(--rhc-card-as-link-full-bleed-opacity, 0.5));
   inline-size: var(--rhc-card-as-link-inline-size, 328px);
   position: absolute;
   z-index: -1;
 }
 
 @mixin rhc-card--horizontal__image {
   @include rounded-border-corners;
+
+  aspect-ratio: 1 / 1;
+  border-end-end-radius: 0;
+  border-start-end-radius: 0;
+  max-block-size: var(--rhc-card-as-link-horizontal-max-block-size);
 }
 
 @mixin rhc-card__heading {

diff --git a/packages/components-css/card/index.scss b/packages/components-css/card/index.scss
@@ -16,6 +16,10 @@
   @include rhc-card--full-bleed;
 }
 
+.rhc-card--horizontal {
+  @include rhc-card--horizontal;
+}
+
 .rhc-card__footer {
   @include rhc-card__content;
 }
@@ -43,6 +47,10 @@
   @include rhc-card--horizontal__content;
 }
 
+.rhc-card--horizontal .rhc-card__heading {
+  @include rhc-card--horizontal__heading;
+}
+
 .rhc-card--horizontal .rhc-card__image {
   @include rhc-card--horizontal__image;
 }
@@ -71,8 +79,8 @@
   @include rhc-card__link--active;
 }
 
-.rhc-card:focus {
-  @include rhc-card--focus;
+.rhc-card--default:focus {
+  @include rhc-card--default--focus;
 }
 
 .rhc-card:focus .rhc-card__heading {
@@ -83,6 +91,10 @@
   @include rhc-card__link--focus;
 }
 
+.rhc-card--default:hover {
+  @include rhc-card--default--hover;
+}
+
 .rhc-card:hover .rhc-card__heading {
   @include rhc-card__heading--active;
 }

diff --git a/proprietary/design-tokens/figma/figma.tokens.json b/proprietary/design-tokens/figma/figma.tokens.json
@@ -2686,6 +2686,10 @@
             "value": "{rhc.color.foreground.onEmphasis}",
             "type": "color"
           },
+          "max-block-size": {
+            "value": "{rhc.size.2-lint}",
+            "type": "sizing"
+          },
           "padding-block-end": {
             "value": "0",
             "type": "spacing"
@@ -2699,8 +2703,14 @@
             "type": "spacing"
           },
           "padding-inline-start": {
-            "value": "0",
+            "value": "{rhc.space.200}",
             "type": "spacing"
+          },
+          "heading": {
+            "inline-size": {
+              "value": "200px",
+              "type": "sizing"
+            }
           }
         }
       }