From 221a2adc6deb2676a591ea2e3d6d027fbbba981f Mon Sep 17 00:00:00 2001
From: Ariella Gilmore <ariellalgilmore@gmail.com>
Date: Fri, 13 Oct 2023 08:04:36 -0700
Subject: [PATCH] fix(card): heading/copy spacing (#11018)

* fix(card): heading/copy spacing

* fix(card): format

* fix(card): cleanup styles

* fix(card): clean up inverse and static styles

* fix(card): format

* fix(card): align to bottom
---
 .../styles/scss/components/card/_card.scss    | 244 ++++++------------
 .../src/components/card/card.ts               |  10 +-
 2 files changed, 83 insertions(+), 171 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index ce132fc975b..3a130945d5d 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -21,7 +21,6 @@
 @use '../link-with-icon/link-with-icon';
 
 @mixin card {
-  .#{$prefix}--card,
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
   :host(#{$c4d-prefix}-card-cta),
@@ -33,7 +32,6 @@
     @include tile($enable-experimental-tile-contrast: true);
   }
 
-  .#{$prefix}--card,
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-region-item) .#{$prefix}--link,
   :host(#{$c4d-prefix}-link-list-item-card),
@@ -54,48 +52,6 @@
     padding: 0;
     transition: $duration-moderate-01 motion(standard, productive);
 
-    .#{$prefix}-tile--clickable:hover {
-      background-color: $layer-hover-01;
-      text-decoration: none;
-
-      .#{$prefix}--card__wrapper {
-        background-color: $background-hover;
-      }
-
-      &.#{$prefix}--card__CTA--disabled.#{$prefix}--tile--clickable {
-        background-color: $layer-01;
-
-        > * {
-          background-color: $layer-01;
-        }
-      }
-
-      ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image,
-      .#{$prefix}--card__video-thumbnail {
-        &::before {
-          opacity: 0.08;
-          z-index: 1;
-        }
-      }
-
-      .#{$prefix}--card__video-thumbnail {
-        svg {
-          circle {
-            opacity: 0.9;
-            fill: $gray-100;
-          }
-
-          path {
-            fill: $icon-on-color;
-          }
-        }
-      }
-    }
-
     &:focus-within {
       .#{$prefix}--tile--clickable {
         outline: $spacing-01 solid $focus;
@@ -126,11 +82,7 @@
     }
 
     ::slotted(#{$c4d-prefix}-image),
-    ::slotted(#{$c4d-prefix}-card-cta-image),
-    .#{$prefix}--card__img,
-    .#{$prefix}--card__image_img,
-    .#{$prefix}--image,
-    .#{$prefix}--card__video-thumbnail {
+    ::slotted(#{$c4d-prefix}-card-cta-image) {
       position: relative;
 
       &::before {
@@ -146,18 +98,25 @@
       }
     }
 
-    .#{$prefix}--card__video-thumbnail {
-      svg {
-        circle,
-        path {
-          transition: $duration-moderate-01 motion(standard, productive);
-        }
-      }
-    }
-
-    .#{$prefix}--card.#{$prefix}--tile {
+    &:not([disabled]) .#{$prefix}--card.#{$prefix}--tile {
       padding: 0;
       transition: $duration-moderate-01 motion(standard, productive);
+
+      &:hover {
+        #{$c4d-prefix}-image,
+        ::slotted(#{$c4d-prefix}-image),
+        ::slotted(#{$c4d-prefix}-card-cta-image) {
+          &::after {
+            content: '';
+            position: absolute;
+            top: 0;
+            width: 100%;
+            height: 100%;
+            background: $overlay;
+            opacity: 16%;
+          }
+        }
+      }
     }
 
     .#{$prefix}--card__wrapper {
@@ -229,8 +188,7 @@
       }
     }
 
-    &[pictogram-placement='top'] .#{$prefix}--card,
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
+    &[pictogram] .#{$prefix}--card {
       ::slotted(#{$c4d-prefix}-card-heading) {
         padding-top: 0;
       }
@@ -260,34 +218,36 @@
       }
     }
 
-    &[pictogram-placement='top'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        align-items: flex-end;
-        margin-bottom: 0;
-        margin-top: auto;
-      }
+    &[pictogram] {
+      &[pictogram-placement='top'] .#{$prefix}--card {
+        ::slotted(#{$c4d-prefix}-card-heading) {
+          align-items: flex-end;
+          margin-bottom: 0;
+          margin-top: auto;
+        }
 
-      .#{$prefix}--card__copy {
-        margin-top: $spacing-07;
-      }
+        .#{$prefix}--card__copy {
+          margin-top: $spacing-07;
+        }
 
-      ::slotted(svg[slot='pictogram']) {
-        margin-bottom: $spacing-07;
+        ::slotted(svg[slot='pictogram']) {
+          margin-bottom: $spacing-07;
+        }
       }
-    }
 
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        align-items: flex-start;
-      }
+      &[pictogram-placement='bottom'] .#{$prefix}--card {
+        ::slotted(#{$c4d-prefix}-card-heading) {
+          align-items: flex-start;
+        }
 
-      .#{$prefix}--card__copy {
-        margin-bottom: $spacing-07;
-      }
+        .#{$prefix}--card__copy {
+          margin-bottom: $spacing-07;
+        }
 
-      ::slotted(svg[slot='pictogram']) {
-        margin-top: auto;
-        align-items: flex-end;
+        ::slotted(svg[slot='pictogram']) {
+          margin-top: auto;
+          align-items: flex-end;
+        }
       }
     }
 
@@ -344,26 +304,17 @@
   }
 
   // static card
-  :host(#{$c4d-prefix}-card) {
-    // Outlined/Border card
-    &[border] {
-      .#{$prefix}--card {
-        border: 1px solid $layer-accent-01;
-      }
-    }
-  }
 
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-card-group-item) {
     &:not([href]) {
-      .cds--card .cds--card__copy {
+      .#{$prefix}--card .#{$prefix}--card__copy {
         margin-bottom: $spacing-01;
       }
 
-      &,
-      &:hover {
-        .#{$prefix}--card__wrapper {
-          background-color: $layer-01;
+      .#{$prefix}--card.#{$prefix}--tile ::slotted(#{$c4d-prefix}-image) {
+        &::after {
+          display: none;
         }
       }
 
@@ -371,6 +322,11 @@
         z-index: 0;
       }
 
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-bottom: $spacing-10;
+        margin-bottom: auto;
+      }
+
       ::slotted(#{$c4d-prefix}-card-footer) {
         margin-top: $spacing-07;
         display: inline-flex;
@@ -465,12 +421,6 @@
     color: $text-secondary;
   }
 
-  :host(#{$c4d-prefix}-card-footer[disabled])
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    color: $text-disabled;
-  }
-
   :host(#{$c4d-prefix}-card-footer),
   :host(#{$c4d-prefix}-card-cta-footer),
   :host(#{$c4d-prefix}-card-in-card-footer),
@@ -547,45 +497,24 @@
     }
   }
 
-  :host(#{$c4d-prefix}-feature-cta-footer) a {
-    svg,
-    ::slotted(svg[slot='icon']) {
-      fill: $link-inverse;
-
-      @include breakpoint(max) {
-        width: $spacing-07;
-        height: $spacing-07;
-      }
-    }
-  }
-
   :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;
       align-items: center;
-    }
 
-    svg {
-      color: $link-primary;
-    }
-
-    &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
-      color: $link-inverse;
+      &:active {
+        color: $link-primary-hover;
+      }
     }
 
     &[color-scheme='inverse']
-      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon {
-      svg,
-      ::slotted(svg[slot='icon']) {
-        color: $link-inverse;
-      }
+      .#{$prefix}--link-with-icon.#{$prefix}--link-with-icon--inline-icon:not(
+        .#{$prefix}--link--disabled
+      ) {
+      color: $link-inverse;
     }
   }
 
@@ -617,13 +546,24 @@
     }
   }
 
-  .#{$prefix}--card--inverse,
-  .#{$prefix}--card.#{$prefix}--card--inverse,
-  :host(#{$c4d-prefix}-card)[color-scheme='inverse'],
-  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']
+  :host(#{$c4d-prefix}-card)[color-scheme='inverse']:not([disabled]),
+  :host(#{$c4d-prefix}-card-group-item)[color-scheme='inverse']:not([disabled])
     .#{$prefix}--card {
     .#{$prefix}--tile {
       background-color: $background-inverse;
+      border-color: $background-inverse;
+
+      &:hover {
+        #{$c4d-prefix}-image,
+        ::slotted(#{$c4d-prefix}-image),
+        ::slotted(#{$c4d-prefix}-card-cta-image) {
+          filter: brightness(108%);
+
+          &::after {
+            display: none;
+          }
+        }
+      }
     }
 
     .#{$prefix}--card__wrapper:hover {
@@ -639,18 +579,6 @@
       color: $text-placeholder;
     }
 
-    &:hover {
-      background-color: $background-inverse-hover;
-
-      ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image {
-        filter: brightness(108%);
-      }
-    }
-
     &:focus-within {
       &::after {
         content: '';
@@ -698,34 +626,12 @@
 
     &:hover {
       ::slotted(#{$c4d-prefix}-image),
-      ::slotted(#{$c4d-prefix}-card-cta-image),
-      .#{$prefix}--card__img,
-      .#{$prefix}--card__image_img,
-      .#{$prefix}--image {
+      ::slotted(#{$c4d-prefix}-card-cta-image) {
         filter: brightness(108%);
       }
     }
   }
 
-  .#{$prefix}--card--inverse .#{$prefix}--card__cta,
-  .#{$prefix}--card--inverse .#{$prefix}--card__cta a,
-  .#{$prefix}--card--inverse .#{$prefix}--card__cta a:visited,
-  .#{$prefix}--card--inverse
-    .#{$prefix}--card__footer
-    .#{$prefix}--card__cta__copy,
-  :host(#{$c4d-prefix}-card-cta-footer[color-scheme='inverse'])
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$c4d-prefix}-card-cta-footer[color-scheme='inverse'])
-    .#{$prefix}--card__cta__copy,
-  :host(#{$c4d-prefix}-card-footer[color-scheme='inverse'])
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$c4d-prefix}-card-footer[color-scheme='inverse'])
-    .#{$prefix}--card__cta__copy {
-    color: $link-inverse;
-  }
-
   @media print {
     :host(#{$c4d-prefix}-card),
     :host(#{$c4d-prefix}-link-list-item-card),
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
index 3f566abba43..ef584163e25 100644
--- a/packages/web-components/src/components/card/card.ts
+++ b/packages/web-components/src/components/card/card.ts
@@ -223,7 +223,7 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
 
   updated(changedProperties) {
     super.updated(changedProperties);
-    const { colorScheme, href, _linkNode: linkNode, ctaType } = this;
+    const { colorScheme, disabled, href, _linkNode: linkNode, ctaType } = this;
 
     if (
       changedProperties.has('ctaType') ||
@@ -235,7 +235,6 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
     ) {
       const {
         ctaType,
-        disabled,
         videoDuration,
         videoName,
         videoDescription,
@@ -296,10 +295,17 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
         `${prefix}--card--inverse`,
         colorScheme === BASIC_COLOR_SCHEME.INVERSE
       );
+      linkNode.classList.toggle(
+        `${prefix}--link--disabled`,
+        Boolean(this.disabled)
+      );
     }
 
     if (this._hasPictogram) {
       this.onclick = () => window.open(this.href, '_self');
+      this.setAttribute('pictogram', '');
+    } else {
+      this.removeAttribute('pictogram');
     }
 
     const copyElement = this.querySelector('p');