From 6df36659dc14baaf64e237ce28d42c269e81aa95 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Fri, 15 Sep 2023 09:59:36 -0700
Subject: [PATCH 1/6] feat(card-static): update v2 styles

---
 .../styles/scss/components/card/_card.scss    | 355 ++++++++----------
 1 file changed, 166 insertions(+), 189 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 3d5ada6a603..dfea73116f2 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -204,6 +204,114 @@
     }
   }
 
+    // Card with pictogram placement style
+  :host(#{$c4d-prefix}-card-group-item),
+  :host(#{$c4d-prefix}-card-in-card),
+  :host(#{$c4d-prefix}-card-cta),
+  :host(#{$c4d-prefix}-card) {
+    outline: none;
+
+    .#{$prefix}--card__pictogram {
+      display: flex;
+
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: $spacing-07;
+        margin-bottom: 0;
+
+        @include breakpoint(md) {
+          padding-left: 0;
+          flex: 1;
+          display: flex;
+        }
+      }
+    }
+
+    &[pictogram-placement='top'] .#{$prefix}--card,
+    &[pictogram-placement='bottom'] .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        padding-top: 0;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-left: 0;
+      }
+
+      .#{$prefix}--card__content {
+        position: relative;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-top: $spacing-07;
+        margin-bottom: 0;
+
+        &[hidden] {
+          margin: 0;
+        }
+      }
+
+      svg {
+        position: absolute;
+        right: $spacing-05;
+        bottom: $spacing-05;
+        color: $link-primary;
+      }
+    }
+
+    &[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;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-bottom: $spacing-07;
+      }
+    }
+
+    &[pictogram-placement='bottom'] .#{$prefix}--card {
+      ::slotted(#{$c4d-prefix}-card-heading) {
+        align-items: flex-start;
+      }
+
+      .#{$prefix}--card__copy {
+        margin-bottom: $spacing-07;
+      }
+
+      ::slotted(svg[slot='pictogram']) {
+        margin-top: auto;
+        align-items: flex-end;
+      }
+    }
+
+    ::slotted(svg[slot='pictogram']) {
+      fill: currentColor;
+      @include breakpoint(md) {
+        margin-left: 0;
+      }
+      @include breakpoint(sm) {
+        margin-left: $spacing-05;
+      }
+    }
+
+    &[color-scheme='inverse'] {
+      .#{$prefix}--card svg,
+      ::slotted(svg[slot='pictogram']) {
+      color: $link-inverse;
+    }
+  }
+
+    .#{$prefix}--card__copy {
+      display: flex;
+      flex-direction: column;
+      gap: $spacing-05;
+    }
+  }
+
   :host(#{$c4d-prefix}-card[aspect-ratio='1:1']) .#{$prefix}--card__wrapper {
     @include ratio-base(1, 1, false);
   }
@@ -223,37 +331,6 @@
     background-color: $layer-02;
   }
 
-  .#{$prefix}--card.#{$prefix}--card--static {
-    outline: none;
-
-    &:hover {
-      .#{$prefix}--card__wrapper {
-        background-color: $layer-02;
-      }
-    }
-
-    .#{$prefix}--card__footer {
-      align-self: flex-start;
-      &:hover {
-        text-decoration: underline;
-
-        svg,
-        .#{$prefix}--card__cta__copy {
-          color: $text-primary;
-        }
-      }
-
-      &:active,
-      &:focus {
-        align-self: flex-start;
-        outline: 1px solid $focus;
-      }
-      &::after {
-        position: relative;
-      }
-    }
-  }
-
   .#{$prefix}--card--border {
     border: 1px solid $layer-accent-01;
   }
@@ -276,6 +353,11 @@
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-card-group-item) {
     &:not([href]) {
+
+      .cds--card .cds--card__copy  {
+        margin-bottom: $spacing-01;
+      }
+
       &,
       &:hover {
         .#{$prefix}--card__wrapper {
@@ -283,18 +365,19 @@
         }
       }
 
-      &:focus-within,
-      .#{$prefix}--card:focus-within {
-        outline: none;
+      &:focus-within ::slotted(#{$c4d-prefix}-image){
+          z-index: 0;
       }
 
       ::slotted(#{$c4d-prefix}-card-footer) {
+        margin-top: $spacing-07;
         display: inline-flex;
         &::after {
           position: relative;
         }
       }
     }
+
     &[color-scheme='light'] {
       &,
       &:hover {
@@ -447,7 +530,6 @@
     .#{$prefix}--card__cta__copy {
       max-width: calc(100% - 20px - #{$spacing-03});
       margin-right: $spacing-03;
-      color: $text-primary;
       @include type-style('body-02');
     }
 
@@ -476,9 +558,57 @@
     }
   }
 
+  :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;
+      }
+    }
+  }
+
   // static card footer
   :host(#{$c4d-prefix}-card-footer):not([parent-href]) {
     .#{$prefix}--card__footer {
+      width: auto;
+      justify-content: flex-start;
+      align-items: center;
+
+      &:active,
+      &:hover {
+        text-decoration: none;
+      }
+
+      &:active{
+        ::slotted([slot="icon"]) {
+          color: $text-primary;
+        }
+      }
+
+
+
       &::after {
         content: none;
       }
@@ -486,28 +616,11 @@
         outline: $spacing-01 solid $focus;
       }
     }
-  }
-
-  .#{$prefix}--card__footer__icon-left {
-    svg.#{$prefix}--card__cta,
-    ::slotted(svg[slot='icon']) {
-      margin-right: $spacing-03;
-    }
 
     .#{$prefix}--card__cta__copy {
-      margin-right: 0;
+      margin-right: $spacing-03;
     }
-  }
-
-  .#{$prefix}--card .#{$prefix}--card__footer,
-  .#{$c4d-prefix}-ce--card__footer {
-    display: flex;
-  }
 
-  .#{$prefix}--card .#{$prefix}--card__footer svg,
-  .#{$c4d-prefix}-ce--card__footer ::slotted(svg[slot='icon']) {
-    fill: currentColor;
-    align-self: center;
   }
 
   .#{$prefix}--card--inverse,
@@ -655,142 +768,6 @@
     }
   }
 
-  // Card with pictogram placement style
-  :host(#{$c4d-prefix}-card-group-item),
-  :host(#{$c4d-prefix}-card-in-card),
-  :host(#{$c4d-prefix}-card-cta),
-  :host(#{$c4d-prefix}-card) {
-    outline: none;
-
-    .#{$prefix}--card__pictogram {
-      display: flex;
-
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        padding-top: $spacing-07;
-        margin-bottom: 0;
-
-        @include breakpoint(md) {
-          padding-left: 0;
-          flex: 1;
-          display: flex;
-        }
-      }
-    }
-
-    &[pictogram-placement='top'] .#{$prefix}--card,
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        padding-top: 0;
-      }
-
-      ::slotted(svg[slot='pictogram']) {
-        margin-left: 0;
-      }
-
-      .#{$prefix}--card__content {
-        position: relative;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-top: $spacing-07;
-        margin-bottom: 0;
-
-        &[hidden] {
-          margin: 0;
-        }
-      }
-
-      svg {
-        position: absolute;
-        right: $spacing-05;
-        bottom: $spacing-05;
-        color: $link-primary;
-      }
-    }
-
-    &[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;
-      }
-
-      ::slotted(svg[slot='pictogram']) {
-        margin-bottom: $spacing-07;
-      }
-    }
-
-    &[pictogram-placement='bottom'] .#{$prefix}--card {
-      ::slotted(#{$c4d-prefix}-card-heading) {
-        align-items: flex-start;
-      }
-
-      .#{$prefix}--card__copy {
-        margin-bottom: $spacing-07;
-      }
-
-      ::slotted(svg[slot='pictogram']) {
-        margin-top: auto;
-        align-items: flex-end;
-      }
-    }
-
-    ::slotted(svg[slot='pictogram']) {
-      fill: currentColor;
-      @include breakpoint(md) {
-        margin-left: 0;
-      }
-      @include breakpoint(sm) {
-        margin-left: $spacing-05;
-      }
-    }
-
-    &[color-scheme='inverse'] ::slotted(svg[slot='pictogram']) {
-      color: $link-inverse;
-    }
-
-    .#{$prefix}--card__copy {
-      display: flex;
-      flex-direction: column;
-      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 {

From b2b1a65f27c5a3e8156781b4e461b9d5926c011d Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Fri, 15 Sep 2023 10:41:49 -0700
Subject: [PATCH 2/6] fix(card): format styles

---
 .../styles/scss/components/card/_card.scss    | 20 ++++++++-----------
 1 file changed, 8 insertions(+), 12 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index dfea73116f2..d9edde0b18f 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -204,7 +204,7 @@
     }
   }
 
-    // Card with pictogram placement style
+  // Card with pictogram placement style
   :host(#{$c4d-prefix}-card-group-item),
   :host(#{$c4d-prefix}-card-in-card),
   :host(#{$c4d-prefix}-card-cta),
@@ -301,9 +301,9 @@
     &[color-scheme='inverse'] {
       .#{$prefix}--card svg,
       ::slotted(svg[slot='pictogram']) {
-      color: $link-inverse;
+        color: $link-inverse;
+      }
     }
-  }
 
     .#{$prefix}--card__copy {
       display: flex;
@@ -353,8 +353,7 @@
   :host(#{$c4d-prefix}-card),
   :host(#{$c4d-prefix}-card-group-item) {
     &:not([href]) {
-
-      .cds--card .cds--card__copy  {
+      .cds--card .cds--card__copy {
         margin-bottom: $spacing-01;
       }
 
@@ -365,8 +364,8 @@
         }
       }
 
-      &:focus-within ::slotted(#{$c4d-prefix}-image){
-          z-index: 0;
+      &:focus-within ::slotted(#{$c4d-prefix}-image) {
+        z-index: 0;
       }
 
       ::slotted(#{$c4d-prefix}-card-footer) {
@@ -601,14 +600,12 @@
         text-decoration: none;
       }
 
-      &:active{
-        ::slotted([slot="icon"]) {
+      &:active {
+        ::slotted([slot='icon']) {
           color: $text-primary;
         }
       }
 
-
-
       &::after {
         content: none;
       }
@@ -620,7 +617,6 @@
     .#{$prefix}--card__cta__copy {
       margin-right: $spacing-03;
     }
-
   }
 
   .#{$prefix}--card--inverse,

From 95ccbf4eaa054afd1ebceafa2d40b8405b6a6ccd Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Fri, 15 Sep 2023 12:04:42 -0700
Subject: [PATCH 3/6] fix(card): adjust styles

---
 packages/styles/scss/components/card/_card.scss | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index d9edde0b18f..52acf90c7fd 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -567,6 +567,7 @@
       display: flex;
       width: 100%;
       justify-content: flex-end;
+      align-items: center;
     }
 
     &[color-scheme='inverse'] .#{$c4d-prefix}-ce--card__footer--static {
@@ -593,7 +594,6 @@
     .#{$prefix}--card__footer {
       width: auto;
       justify-content: flex-start;
-      align-items: center;
 
       &:active,
       &:hover {

From a24e9b8df23099989014450b235b729bee027d6b Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Fri, 15 Sep 2023 13:23:05 -0700
Subject: [PATCH 4/6] fix(card): story copy error

---
 .../card/__stories__/card.stories.ts          | 30 ++++++++++++++++---
 1 file changed, 26 insertions(+), 4 deletions(-)

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index b08583a5ddc..aba8c011a27 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -71,6 +71,11 @@ export const Default = (args) => {
     videoFooterCopy = duration;
   }
 
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
     <c4d-video-cta-container>
       <c4d-card
@@ -89,7 +94,7 @@ export const Default = (args) => {
           : ``}
         <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
-        ${copy ? html` <p>${copy}</p> ` : ``}
+        ${copy ? html`<p></p>` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
         <c4d-card-footer> ${videoFooterCopy ?? ''} </c4d-card-footer>
       </c4d-card>
@@ -174,13 +179,18 @@ Default.story = {
 export const Pictogram = (args) => {
   const { href, heading, copy, tagGroup, pictogramPlacement, cardStyles } =
     args?.PictogramCard ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
   return html`
     <c4d-card
       pictogram-placement="${pictogramPlacement}"
       href=${ifDefined(href || undefined)}
       color-scheme=${cardStyles === 'Inverse card' ? 'inverse' : ''}>
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       <svg
         slot="pictogram"
@@ -267,6 +277,12 @@ export const Static = (args) => {
     cta,
     ctaCopy,
   } = args?.Card ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
     <c4d-card>
       ${image
@@ -279,7 +295,7 @@ export const Static = (args) => {
         : ``}
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
       ${cta
         ? html`
@@ -345,6 +361,12 @@ Static.story = {
 export const Logo = (args) => {
   const { alt, defaultSrc, eyebrow, heading, href, copy, tagGroup } =
     args?.Card ?? {};
+
+  const copyComponent = document.querySelector('c4d-card')?.querySelector('p');
+  if (copyComponent) {
+    copyComponent!.innerHTML = copy;
+  }
+
   return html`
     <c4d-card logo href=${ifDefined(href || undefined)}>
       <c4d-image-logo
@@ -353,7 +375,7 @@ export const Logo = (args) => {
         default-src="${ifDefined(defaultSrc)}"></c4d-image-logo>
       ${eyebrow ? html` <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow> ` : ``}
       ${heading ? html` <c4d-card-heading>${heading}</c4d-card-heading> ` : ``}
-      ${copy ? html` <p>${copy}</p> ` : ``}
+      ${copy ? html` <p></p> ` : ``}
       ${tagGroup ? html` ${tagGroupContent} ` : ``}
 
       <c4d-card-footer></c4d-card-footer>

From f3fb3e1f6704520e3dabb8113e987c946939dbea Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Fri, 15 Sep 2023 15:32:38 -0700
Subject: [PATCH 5/6] fix(icon): color

---
 packages/styles/scss/components/card/_card.scss | 13 -------------
 1 file changed, 13 deletions(-)

diff --git a/packages/styles/scss/components/card/_card.scss b/packages/styles/scss/components/card/_card.scss
index 52acf90c7fd..b3ebab2e452 100644
--- a/packages/styles/scss/components/card/_card.scss
+++ b/packages/styles/scss/components/card/_card.scss
@@ -450,19 +450,6 @@
     color: $text-secondary;
   }
 
-  .#{$prefix}--card .#{$prefix}--card__cta,
-  .#{$prefix}--card .#{$prefix}--card__cta a,
-  .#{$prefix}--card .#{$prefix}--card__cta a:visited,
-  :host(#{$c4d-prefix}-card-footer)
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']),
-  :host(#{$c4d-prefix}-card-cta-footer)
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    margin-left: 0;
-    color: $icon-interactive;
-  }
-
   :host(#{$c4d-prefix}-card-footer[disabled])
     .#{$c4d-prefix}-ce--card__footer
     ::slotted(svg[slot='icon']) {

From b4cf2ac0c26de64645a2f831f31487c54a8264e2 Mon Sep 17 00:00:00 2001
From: ariellalgilmore <ariellalgilmore@gmail.com>
Date: Mon, 18 Sep 2023 11:24:15 -0700
Subject: [PATCH 6/6] fix(card): video knob

---
 .../src/components/card/__stories__/card.stories.ts           | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
index aba8c011a27..eabccc6902e 100644
--- a/packages/web-components/src/components/card/__stories__/card.stories.ts
+++ b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -96,7 +96,9 @@ export const Default = (args) => {
         <c4d-card-heading>${videoCopy ?? heading}</c4d-card-heading>
         ${copy ? html`<p></p>` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
-        <c4d-card-footer> ${videoFooterCopy ?? ''} </c4d-card-footer>
+        ${ctaType === CTA_TYPE.VIDEO
+          ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `
+          : html`<c4d-card-footer></c4d-card-footer>`}
       </c4d-card>
     </c4d-video-cta-container>
   `;