feat(card): v2 card style updates (carbon-design-system#10903)

* feat(card): v2 card style updates * feat(card): move card styles to styles package * feat(card): react wrapper storybook changes * feat(card): aspect ratio property * feat(card): fix focus state style * feat(card): style adjustments * feat(card): import tag theme colors * chore(merge): edit from merge conflict * chore(styles): revert back to styles package * test(formatVideoCaption): edit test to include min * chore(styles): use calc
ariellalgilmore · Sep 12, 2023 · cd84259 · cd84259
1 parent 259e220
commit cd84259
Show file tree

Hide file tree

Showing 17 changed files with 213 additions and 230 deletions.
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
@@ -18,6 +18,7 @@ For Carbon v11 migration guidance, see their
 | back-to-top               | View changes [here](#backtotop)        |
 | background-media          | No API changes.                        |
 | button                    | This component is deprecated in v2 in favor for Carbon's core Button |
+| card                      | View changes [here] (#card)            |
 | card-group-card-link-item | This component is deprecated in v2 in favor for default card or with content-item |
 | card-link                 | This component is deprecated in v2 in favor for card (link variant) component |
 | card-section-carousel     | This component is deprecated in v2 in favor for content-section/block component combined with carousel |
@@ -47,6 +48,12 @@ For Carbon v11 migration guidance, see their
 
 - 
 
+### Card
+
+- `<dds-card-footer>` has `icon-placement` property has been removed
+- Removed `border` property, clickable cards inherit the Carbon v11 experimental tile border style
+- New `aspect-ratio` property with '1:1', '2:1', '3:2', '4:3', and '16:9' as options
+
 ### CTA
 
 In Carbon for IBM.com v2, the CTA component (and all of its subcomponents) have been deprecated in favor of their base components.

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
@@ -18,8 +18,19 @@
 @use '../../globals/utils/content-width' as *;
 @use '../../globals/utils/ratio-base' as *;
 @use '../lightbox-media-viewer/lightbox-media-viewer';
+@use '../link-with-icon/link-with-icon';
 
 @mixin card {
+  .#{$prefix}--card,
+  :host(#{$c4d-prefix}-card),
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card-group-item),
+  :host(#{$c4d-prefix}-card-group-item) .#{$prefix}--card,
+  :host(#{$c4d-prefix}-content-group-cards-item),
+  :host(#{$c4d-prefix}-content-group-cards-item) .#{$prefix}--card {
+    @include tile($enable-experimental-tile-contrast: true);
+  }
+
   .#{$prefix}--card,
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-link-list-item-card),
@@ -40,8 +51,8 @@
     padding: 0;
     transition: $duration-moderate-01 motion(standard, productive);
 
-    &:hover {
-      background-color: $background-hover;
+    .#{$prefix}-tile--clickable:hover {
+      background-color: $layer-hover-01;
       text-decoration: none;
 
       .#{$prefix}--card__wrapper {
@@ -83,10 +94,12 @@
     }
 
     &:focus-within {
-      outline: $spacing-01 solid $focus;
-      outline-offset: -#{$spacing-01};
-      position: relative;
-      z-index: 2;
+      .#{$prefix}--tile--clickable {
+        outline: $spacing-01 solid $focus;
+        outline-offset: -#{$spacing-01};
+        position: relative;
+        z-index: 2;
+      }
 
       ::slotted(#{$c4d-prefix}-image),
       ::slotted(#{$c4d-prefix}-card-cta-image),
@@ -175,7 +188,7 @@
     }
 
     .#{$prefix}--card__copy:not([hidden]) {
-      @include type-style('body-compact-02');
+      @include type-style('body-02');
 
       margin-bottom: $spacing-07;
     }
@@ -191,6 +204,21 @@
     }
   }
 
+  :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
+    @include ratio-base(1, 1, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='3:2']) .#{$prefix}--card__wrapper {
+    @include ratio-base(3, 2, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='4:3']) .#{$prefix}--card__wrapper {
+    @include ratio-base(4, 3, false);
+  }
+
+  :host(#{$c4d-prefix}-card[aspect-ratio='16:9']) .#{$prefix}--card__wrapper {
+    @include ratio-base(16, 9, false);
+  }
   .#{$prefix}--card.#{$prefix}--card--light {
     background-color: $layer-02;
   }
@@ -211,7 +239,7 @@
 
         svg,
         .#{$prefix}--card__cta__copy {
-          color: $link-primary-hover;
+          color: $text-primary;
         }
       }
 
@@ -350,7 +378,7 @@
     .#{$c4d-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']) {
     margin-left: 0;
-    color: $link-primary;
+    color: $icon-interactive;
   }
 
   :host(#{$c4d-prefix}-card-footer[disabled])
@@ -419,8 +447,8 @@
     .#{$prefix}--card__cta__copy {
       max-width: calc(100% - 20px - #{$spacing-03});
       margin-right: $spacing-03;
-      color: $link-primary;
-      @include type-style('body-compact-02');
+      color: $text-primary;
+      @include type-style('body-02');
     }
 
     .#{$prefix}--card__footer__copy {
@@ -436,14 +464,6 @@
     }
   }
 
-  :host(#{$c4d-prefix}-card-footer) a,
-  :host(#{$c4d-prefix}-card-cta-footer) a,
-  :host(#{$c4d-prefix}-card-in-card-footer) a {
-    @include breakpoint(md) {
-      padding-right: $spacing-07;
-    }
-  }
-
   :host(#{$c4d-prefix}-feature-cta-footer) a {
     svg,
     ::slotted(svg[slot='icon']) {
@@ -495,7 +515,9 @@
   :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
   :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']
     .#{$prefix}--card {
-    background-color: $background-inverse;
+    .#{$prefix}--tile {
+      background-color: $background-inverse;
+    }
 
     .#{$prefix}--card__wrapper:hover {
       background-color: $background-inverse-hover;
@@ -532,7 +554,7 @@
         bottom: 0;
         right: 0;
         border: $spacing-01 solid $focus;
-        outline: 1px solid $focus-inverse;
+        outline: 1px solid $focus-inset;
         outline-offset: -3px;
         pointer-events: none;
       }
@@ -548,7 +570,7 @@
   }
 
   :host(#{$c4d-prefix}-card-heading) {
-    @include type-style('fluid-heading-03', true);
+    @include type-style('heading-03', true);
   }
 
   :host(#{$c4d-prefix}-card-link-heading) {
@@ -561,13 +583,10 @@
   :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse'],
   :host(#{$c4d-prefix}-feature-section-card-link)[color-scheme='inverse'],
   .#{$prefix}--card-group__card {
-    ::slotted(#{$c4d-prefix}-card-eyebrow) {
-      color: $text-placeholder;
-    }
-
+    ::slotted(#{$c4d-prefix}-card-eyebrow),
     ::slotted(#{$c4d-prefix}-card-heading),
     ::slotted(#{$c4d-prefix}-card-link-heading) {
-      color: $icon-inverse;
+      color: $text-inverse;
     }
 
     &:hover {
@@ -801,4 +820,46 @@
       gap: $spacing-05;
     }
   }
+
+  :host(#{$c4d-prefix}-card-footer),
+  :host(#{$c4d-prefix}-card-cta-footer) {
+    .#{$c4d-prefix}-ce--card__footer--static {
+      color: $link-primary;
+    }
+
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      display: flex;
+      width: 100%;
+      justify-content: flex-end;
+    }
+
+    &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
+      color: $link-inverse;
+    }
+
+    &[color-scheme='inverse']
+      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      svg,
+      ::slotted(svg[slot='icon']) {
+        color: $link-inverse;
+      }
+    }
+
+    &:hover {
+      ::slotted(svg[slot='icon']) {
+        color: $link-primary-hover;
+      }
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-cta-footer[cta-type='video']),
+  :host(#{$c4d-prefix}-card-footer[cta-type='video']) {
+    .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
+      justify-content: space-between;
+    }
+  }
+
+  :host(#{$c4d-prefix}-card-footer[href])::after {
+    position: relative;
+  }
 }
diff --git a/packages/styles/scss/globals/utils/_aspect-ratio.scss b/packages/styles/scss/globals/utils/_aspect-ratio.scss
@@ -14,6 +14,6 @@
 //
 // @return percentage of height vs width
 @function aspect-ratio($width, $height) {
-  $ratio: $height / $width * 100%;
+  $ratio: calc($height / $width) * 100%;
   @return $ratio;
 }
diff --git a/packages/styles/scss/globals/utils/_ratio-base.scss b/packages/styles/scss/globals/utils/_ratio-base.scss
@@ -6,7 +6,7 @@
  */
 
 // mixin to give the ratio for lays doen for an aspect ratio
-@use '../../globals/utils/aspect-ratio';
+@use '../../globals/utils/aspect-ratio' as *;
 
 @mixin ratio-base($height, $width, $fixed) {
   @if ($fixed) {

diff --git a/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js b/packages/utilities/src/utilities/formatVideoCaption/__tests__/formatVideoCaption.test.js
@@ -42,15 +42,15 @@ describe('g11n formatter for video caption', () => {
     });
 
     it('should fill zero for minutes', async () => {
-      expect(formatVideoDuration({ duration: 30000 })).toBe('0:30');
+      expect(formatVideoDuration({ duration: 30000 })).toBe('0:30 min');
     });
 
     it('should fill zero for seconds', async () => {
-      expect(formatVideoDuration({ duration: 65000 })).toBe('1:05');
+      expect(formatVideoDuration({ duration: 65000 })).toBe('1:05 min');
     });
 
     it('should support more than 1 minute', async () => {
-      expect(formatVideoDuration({ duration: 90000 })).toBe('1:30');
+      expect(formatVideoDuration({ duration: 90000 })).toBe('1:30 min');
     });
   });
 });
diff --git a/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js b/packages/utilities/src/utilities/formatVideoCaption/formatVideoCaption.js
@@ -33,10 +33,17 @@ export function formatVideoCaption({ duration, name } = {}) {
  * @returns {string} The formatted video duration.
  */
 export function formatVideoDuration({ duration } = {}) {
+  const hours = Math.floor(((duration ?? 0) / (1000 * 60 * 60)) % 24);
   const minutes = Math.floor((duration ?? 0) / 60000);
   const seconds = Math.floor(((duration ?? 0) / 1000) % 60);
+
   const fillSeconds = Array.from({
     length: 2 - String(seconds).length + 1,
   }).join('0');
-  return duration == null ? duration : `${minutes}:${fillSeconds}${seconds}`;
+
+  return duration == null
+    ? duration
+    : hours
+    ? `${hours}:${minutes} hr`
+    : `${minutes}:${fillSeconds}${seconds} min`;
 }
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
@@ -12,6 +12,8 @@
 @use '@carbon/styles/scss/themes' as *;
 @use '@carbon/styles/scss/type' as *;
 @use '@carbon/grid';
+@use '@carbon/styles/scss/components/tag/tokens' as tag-tokens;
+@include add-component-tokens(tag-tokens.$tag-tokens);
 
 // Emit the flex-grid styles
 @include grid.flex-grid();

diff --git a/packages/web-components/src/component-mixins/cta/cta.ts b/packages/web-components/src/component-mixins/cta/cta.ts
@@ -14,7 +14,7 @@ import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arr
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
 import KalturaPlayerAPI from '../../internal/vendor/@carbon/ibmdotcom-services/services/KalturaPlayer/KalturaPlayer';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
-import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
+import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js';
 import Blog20 from '../../internal/vendor/@carbon/web-components/icons/blog/20.js';
 import DocumentPDF20 from '../../internal/vendor/@carbon/web-components/icons/document--pdf/20.js';
 import NewTab20 from '../../internal/vendor/@carbon/web-components/icons/new-tab/20.js';
@@ -41,7 +41,7 @@ export const icons = {
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.NEW_TAB]: NewTab20,
   [CTA_TYPE.JUMP]: ArrowDown20,
-  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.VIDEO]: PlayFilledAlt20,
   [CTA_TYPE.PDF]: DocumentPDF20,
   [CTA_TYPE.BLOG]: Blog20,
   [CTA_TYPE.EMAIL]: Email20,

diff --git a/packages/web-components/src/component-mixins/cta/video.ts b/packages/web-components/src/component-mixins/cta/video.ts
@@ -11,7 +11,7 @@ import ArrowDown20 from '../../internal/vendor/@carbon/web-components/icons/arro
 import ArrowRight20 from '../../internal/vendor/@carbon/web-components/icons/arrow--right/20.js';
 import Download20 from '../../internal/vendor/@carbon/web-components/icons/download/20.js';
 import Launch20 from '../../internal/vendor/@carbon/web-components/icons/launch/20.js';
-import PlayOutline20 from '../../internal/vendor/@carbon/web-components/icons/play--outline/20.js';
+import PlayFilledAlt20 from '../../internal/vendor/@carbon/web-components/icons/play--filled--alt/20.js';
 import settings from '../../internal/vendor/@carbon/ibmdotcom-utilities/utilities/settings/settings';
 import { Constructor } from '../../globals/defs';
 import { CTA_TYPE } from '../../components/cta/defs';
@@ -27,7 +27,7 @@ export const icons = {
   [CTA_TYPE.DOWNLOAD]: Download20,
   [CTA_TYPE.EXTERNAL]: Launch20,
   [CTA_TYPE.JUMP]: ArrowDown20,
-  [CTA_TYPE.VIDEO]: PlayOutline20,
+  [CTA_TYPE.VIDEO]: PlayFilledAlt20,
 };
 
 /**