Merge branch 'main' into fix/cta-video

carbon-design-system · Dec 18, 2024 · c4138e4 · c4138e4
2 parents 72a063f + 62fcdba
commit c4138e4
Show file tree

Hide file tree

Showing 6 changed files with 29 additions and 9 deletions.
diff --git a/packages/styles/scss/components/card-group/_card-group.scss b/packages/styles/scss/components/card-group/_card-group.scss
@@ -59,6 +59,10 @@
   :host(#{$c4d-prefix}-card-group-item) {
     display: contents;
 
+    * {
+      row-gap: 0;
+    }
+
     .#{$prefix}--card {
       display: grid;
       border: 0;
@@ -73,6 +77,7 @@
         display: grid;
         justify-content: revert;
         grid-row: span 10;
+        grid-template-columns: subgrid;
         grid-template-rows: subgrid;
 
         &::before,
@@ -91,15 +96,15 @@
       .#{$prefix}--card__content {
         display: grid;
         grid-area: 1 / 1 / -1 / -1;
+        grid-template-columns: subgrid;
         grid-template-rows: subgrid;
-        row-gap: 0;
       }
 
       .#{$prefix}--card__copy {
         display: grid;
         grid-row: span 2;
+        grid-template-columns: subgrid;
         grid-template-rows: subgrid;
-        row-gap: 0;
       }
     }
 

diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -340,7 +340,7 @@ $hover-transition-timing: 95ms;
 
   .#{$prefix}--toc__navbar-chevron-right-container {
     z-index: 2;
-    inset-inline-end: -$spacing-01;
+    inset-inline-end: 0;
 
     @include breakpoint(md) {
       inset-inline-end: -$spacing-05;
@@ -417,11 +417,11 @@ $hover-transition-timing: 95ms;
       border-block-start: 1px solid $border-subtle-00;
       content: '';
       inset-block-start: -1px;
-      inset-inline: calc(-50vw + 50%) 100%;
+      inset-inline: calc(-50vw + 50% + $spacing-03) 100%;
     }
 
     &::after {
-      inset-inline: 100% calc(-50vw + 50%);
+      inset-inline: 100% calc(-50vw + 50% + $spacing-03);
     }
   }
 

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -38,6 +38,14 @@ const tagGroupContent = html`
   </div>
 `;
 
+const copyMarkupContent = html`
+  <ul>
+    <li>Placerat augue</li>
+    <li>Mauris aliquam</li>
+    <li>Habitant hac</li>
+  </ul>
+`;
+
 export const Default = (args) => {
   const {
     aspectRatio,
@@ -52,6 +60,7 @@ export const Default = (args) => {
     eyebrow,
     tagGroup,
     copy,
+    copyMarkup,
     cardStyles,
     customVideoTitle,
   } = args?.Card ?? {};
@@ -96,7 +105,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>` : ``}
+        ${copyMarkup ? copyMarkupContent : copy ? html`<p>${copy}</p>` : ``}
         ${tagGroup ? html` ${tagGroupContent} ` : ``}
         ${ctaType === CTA_TYPE.VIDEO
           ? html` <c4d-card-footer> ${videoFooterCopy} </c4d-card-footer> `
@@ -152,6 +161,7 @@ Default.story = {
           eyebrow: textNullable('Eyebrow:', 'Industry'),
           heading,
           copy: textNullable('Body copy:', ''),
+          copyMarkup: boolean('Body copy markup', false),
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
           tagGroup: boolean('Add tags:', false),
@@ -170,6 +180,7 @@ Default.story = {
           eyebrow: 'Industry',
           heading: 'Aerospace and defence',
           copy: '',
+          copyMarkup: false,
           alt: 'Image alt text',
           defaultSrc: imgXlg4x3,
           tagGroup: false,

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -105,8 +105,12 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
   /**
    * Handles `slotchange` event for the copy slot.
    */
-  protected _handleCopySlotChange() {
-    this._hasCopy = Boolean(this.querySelector('p'));
+  protected _handleCopySlotChange({ target }: Event) {
+    this._hasCopy = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(
+        (node) => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim()
+      );
   }
 
   /**

diff --git a/packages/web-components/src/components/cta-block/cta-block.scss b/packages/web-components/src/components/cta-block/cta-block.scss
@@ -169,6 +169,7 @@
   position: relative;
   display: grid;
   grid-row: auto / span 5;
+  grid-template-columns: subgrid;
   grid-template-rows: subgrid;
   inline-size: 100%;
   margin-block: 0;

diff --git a/packages/web-components/src/components/cta/video-cta-composite.ts b/packages/web-components/src/components/cta/video-cta-composite.ts
@@ -41,7 +41,6 @@ class C4DVideoCTAComposite extends ModalRenderMixin(
    *
    * @internal
    */
-  @state()
   _embedMedia?: (videoId: string) => Promise<any>;
 
   /**
-Original file line number
+Diff line change
@@ Expand Up / @@ -41,7 +41,6 @@ class C4DVideoCTAComposite extends ModalRenderMixin( @@
        *
        * @internal
        */
-      @state()
       _embedMedia?: (videoId: string) => Promise<any>;
       /**
@@ Expand Down @@