fix(carousel): update v2 styles and fix broken video cards (#11006)

* fix(carousel): add xlg breakpoint page size * fix(card-cta): define thumbnail in card-cta * docs(migration): add carousel * refactor(carousel): replace deprecated `card-cta` * docs(carousel): combine carousel stories * docs(carousel): update video card icons * fix(carousel): update carousel page size * fix(card): inject video card heading * fix(image): reinclude card cta image styles * fix(carousel): sameheight functionality * fix(carousel): stories * fix(carousel): readme/examples --------- Co-authored-by: ariellalgilmore <[email protected]>
carbon-design-system · Nov 9, 2023 · e34be4c · e34be4c
1 parent 3e677b6
commit e34be4c
Show file tree

Hide file tree

Showing 13 changed files with 326 additions and 461 deletions.
diff --git a/docs/dotcom-v2-migration.md b/docs/dotcom-v2-migration.md
diff --git a/packages/styles/scss/components/carousel/_carousel.scss b/packages/styles/scss/components/carousel/_carousel.scss
@@ -25,7 +25,7 @@
     }
 
     @include breakpoint(lg) {
-      --#{$c4d-prefix}--carousel--page-size: 3;
+      --#{$c4d-prefix}--carousel--page-size: 4;
     }
 
     [role='region'] {

diff --git a/packages/styles/scss/components/image/_image.scss b/packages/styles/scss/components/image/_image.scss
@@ -47,10 +47,12 @@
   }
 
   :host(#{$c4d-prefix}-image)[card-group-item],
-  :host(#{$c4d-prefix}-card-cta-image) {
+  :host(#{$c4d-prefix}-image) {
     @include ratio-base(4, 3, true);
 
     padding-top: 75%;
+    height: 0;
+    overflow: hidden;
 
     .#{$c4d-prefix}--image__img {
       position: absolute;

diff --git a/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js b/packages/web-components/examples/codesandbox/components-react/carousel/src/index.js
@@ -9,7 +9,6 @@
 
 import React from 'react';
 import { render } from 'react-dom';
-import ArrowRight20 from '@carbon/icons-react/es/arrow--right/20.js';
 import C4DCard from '@carbon/ibmdotcom-web-components/es/components-react/card/card';
 import C4DCardFooter from '@carbon/ibmdotcom-web-components/es/components-react/card/card-footer';
 import C4DCardHeading from '@carbon/ibmdotcom-web-components/es/components-react/card/card-heading';
@@ -25,11 +24,10 @@ const copyOdd = `
 
 // eslint-disable-next-line react/prop-types
 const Card = ({ copy = copyDefault, heading = headingDefault } = {}) => (
-  <C4DCard href="https://www.ibm.com/standards/carbon">
+  <C4DCard href="https://www.ibm.com/standards/carbon" cta-type="local">
     <C4DCardHeading>{heading}</C4DCardHeading>
-    {copy}
+    <p>{copy}</p>
     <C4DCardFooter>
-      <ArrowRight20 slot="icon" />
     </C4DCardFooter>
   </C4DCard>
 );

diff --git a/packages/web-components/examples/codesandbox/components/carousel/cdn.html b/packages/web-components/examples/codesandbox/components/carousel/cdn.html
@@ -29,110 +29,45 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-16">
-      <cds-carousel>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <c4d-carousel>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-      </cds-carousel>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-carousel>
     </div>
   </div>
 </div>

diff --git a/packages/web-components/examples/codesandbox/components/carousel/index.html b/packages/web-components/examples/codesandbox/components/carousel/index.html
@@ -16,7 +16,7 @@
   <link rel="stylesheet" href="https://1.www.s81c.com/common/carbon/web-components/tag/v2/latest/grid.css" />
   <style>
     /* Suppress custom element until styles are loaded */
-    cds-carousel:not(:defined) {
+    c4d-carousel:not(:defined) {
       display: none;
     }
   </style>
@@ -26,110 +26,45 @@
 <div class="cds--grid">
   <div class="cds--row">
     <div class="cds--col-sm-4 cds--col-lg-16">
-      <cds-carousel>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+      <c4d-carousel>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est. Mauris iaculis eget dolor nec hendrerit.
           Phasellus at elit sollicitudin, sodales nulla quis, consequat libero.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-        <cds-card href="https://example.com">
-          <cds-card-heading>Lorem ipsum dolor sit amet</cds-card-heading>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+        <c4d-card href="https://example.com" cta-type="local">
+          <c4d-card-heading>Lorem ipsum dolor sit amet</c4d-card-heading>
           <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean et
           ultricies est.</p>
-          <cds-card-footer>
-            <svg
-              slot="icon"
-              focusable="false"
-              preserveAspectRatio="xMidYMid meet"
-              xmlns="http://www.w3.org/2000/svg"
-              aria-hidden="true"
-              width="20"
-              height="20"
-              viewBox="0 0 20 20"
-            >
-              <path
-                d="M11.8 2.8L10.8 3.8 16.2 9.3 1 9.3 1 10.7 16.2 10.7 10.8 16.2 11.8 17.2 19 10z"></path>
-            </svg>
-          </cds-card-footer>
-        </cds-card>
-      </cds-carousel>
+          <c4d-card-footer>
+          </c4d-card-footer>
+        </c4d-card>
+      </c4d-carousel>
     </div>
   </div>
 </div>

diff --git a/packages/web-components/src/components/card/__stories__/card.stories.ts b/packages/web-components/src/components/card/__stories__/card.stories.ts
@@ -379,8 +379,6 @@ export const Link = (args) => {
       videoCopy = customVideoTitle;
     }
 
-    console.log(card.querySelector('c4d-card-footer'), duration);
-
     card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
   }
 

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -87,7 +87,29 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
    */
   // eslint-disable-next-line class-methods-use-this
   protected _renderHeading(): TemplateResult | string | void {
-    return html` <slot name="heading"></slot> `;
+    const {
+      ctaType,
+      videoName,
+      formatVideoCaption: formatVideoCaptionInEffect,
+    } = this;
+    if (ctaType !== CTA_TYPE.VIDEO) {
+      return html`<slot name="heading"></slot>`;
+    }
+    const caption = formatVideoCaptionInEffect({ name: videoName });
+
+    this.dispatchEvent(
+      new CustomEvent(
+        (this.constructor as typeof C4DCard).eventVideoTitleUpdated,
+        {
+          bubbles: true,
+          composed: true,
+        }
+      )
+    );
+    return html`
+      <slot name="heading"></slot
+      ><c4d-card-heading>${caption}</c4d-card-heading>
+    `;
   }
 
   /**
@@ -404,6 +426,13 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
     return `${c4dPrefix}-cta-request-additional-video-data`;
   }
 
+  /**
+   * The name of the custom event fired when the video title is updated
+   */
+  static get eventVideoTitleUpdated() {
+    return `${c4dPrefix}-card-video-title-updated`;
+  }
+
   static shadowRootOptions = {
     ...LitElement.shadowRootOptions,
     delegatesFocus: true,
-Original file line number
+Diff line change
@@ Expand Up / @@ -379,8 +379,6 @@ export const Link = (args) => { @@
           videoCopy = customVideoTitle;
         }
-        console.log(card.querySelector('c4d-card-footer'), duration);
         card.querySelector('c4d-card-footer')!.innerHTML = duration ?? '';
       }
@@ Expand Down @@