Merge branch 'main' into feat/migrate-caem-video-enhancements

packages/services-store/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.53.5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-18)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services-store
+
+
+
+
+
 ## [1.53.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services-store

packages/services-store/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services-store",
   "private": true,
-  "version": "1.53.4",
+  "version": "1.53.5",
   "description": "Redux store for Carbon for IBM.com Services",
   "license": "Apache-2.0",
   "main": "lib/store.js",

packages/services/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-18)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
 ## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services

packages/services/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "2.16.1",
+  "version": "2.16.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",
@@ -47,7 +47,7 @@
   },
   "dependencies": {
     "@babel/runtime": "^7.16.3",
-    "@carbon/ibmdotcom-utilities": "2.16.1",
+    "@carbon/ibmdotcom-utilities": "2.16.2",
     "@ibm/telemetry-js": "^1.5.0",
     "axios": "^1.6.8",
     "marked": "^4.0.10",

packages/storybook-addon-theme/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.44.5](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-18)
+
+**Note:** Version bump only for package @carbon/storybook-addon-theme
+
+
+
+
+
 ## [1.44.4](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/storybook-addon-theme

packages/storybook-addon-theme/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/storybook-addon-theme",
   "private": true,
-  "version": "1.44.4",
+  "version": "1.44.5",
   "description": "Storybook add-on for Carbon theme chooser",
   "license": "Apache-2.0",
   "main": "es/index.js",

packages/styles/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-18)
+
+
+### Bug Fixes
+
+* **card-group:** subgrid fixes ([#12174](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12174)) ([658b50a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/658b50a592270b795e90804f6515552e652b7780))
+* **toc:** address horizontal overflow ([#12171](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12171)) ([9291729](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/9291729ac0758048bdfa52b2e621b4fa378e620f))
+
+
+
+
+
 ## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-12)
 
 

packages/styles/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.1",
+  "version": "2.16.2",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",

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;
       }
     }
 

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);
     }
   }
 

packages/utilities/CHANGELOG.md

@@ -3,6 +3,14 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-18)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 ## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities

packages/utilities/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.16.1",
+  "version": "2.16.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

packages/utilities/src/utilities/settings/settings.js

@@ -12,10 +12,10 @@
  * @type {object} Settings object
  * @property {string} [stablePrefix=c4d] stable prefix
  * @property {string} [prefix=cds] core Carbon prefix
- * Carbon for IBM.com v2.16.1',
+ * Carbon for IBM.com v2.16.2',
  */
 const settings = {
-  version: 'Carbon for IBM.com v2.16.1',
+  version: 'Carbon for IBM.com v2.16.2',
   stablePrefix: 'c4d',
   prefix: 'cds',
 };

packages/web-components/CHANGELOG.md

@@ -3,6 +3,20 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [2.16.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-18)
+
+
+### Bug Fixes
+
+* **card-group:** subgrid fixes ([#12174](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12174)) ([658b50a](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/658b50a592270b795e90804f6515552e652b7780))
+* **card:** allow copy other than <p> tags ([#12172](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12172)) ([856dc23](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/856dc2368619e8af9cddc4e488933db919f18337))
+* **cta:** cause ctas to only respond to relevant video events ([#12169](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12169)) ([2720e55](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/2720e5567aabcd4406e6ae0980188d69bbbb85a4))
+* **video:** remove [@state](https://github.com/state) declaration for function _embedMedia ([#12168](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/issues/12168)) ([62fcdba](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/commit/62fcdba555bec64184c2135cc48cd2a9aefcfda8))
+
+
+
+
+
 ## [2.16.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-12)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-web-components

packages/web-components/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.16.1",
+  "version": "2.16.2",
   "description": "Carbon for IBM.com Web Components",
   "license": "Apache-2.0",
   "exports": {
@@ -92,9 +92,9 @@
     "cypress:verify": "cypress verify"
   },
   "dependencies": {
-    "@carbon/ibmdotcom-services": "2.16.1",
-    "@carbon/ibmdotcom-styles": "2.16.1",
-    "@carbon/ibmdotcom-utilities": "2.16.1",
+    "@carbon/ibmdotcom-services": "2.16.2",
+    "@carbon/ibmdotcom-styles": "2.16.2",
+    "@carbon/ibmdotcom-utilities": "2.16.2",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",
@@ -131,7 +131,7 @@
     "@babel/preset-react": "~7.12.1",
     "@babel/template": "~7.12.0",
     "@babel/traverse": "~7.23.7",
-    "@carbon/ibmdotcom-services-store": "1.53.4",
+    "@carbon/ibmdotcom-services-store": "1.53.5",
     "@carbon/icon-helpers": "10.53.0",
     "@carbon/icons": "10.48.5",
     "@carbon/icons-react": "^11.33.0",

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,

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()
+      );
   }
 
   /**

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;

packages/web-components/src/components/cta/button-cta.ts

@@ -78,6 +78,12 @@ class C4DButtonCTA extends VideoCTAMixin(CTAMixin(C4DButtonGroupItem)) {
   @property({ reflect: true, attribute: 'cta-type' })
   ctaType = CTA_TYPE.REGULAR;
 
+  /**
+   * Link `href`.
+   */
+  @property({ attribute: 'href' })
+  href?: string;
+
   /**
    * The formatter for the video caption, composed with the video name and the video duration.
    * Should be changed upon the locale the UI is rendered with.

packages/web-components/src/components/cta/cta.ts

@@ -20,6 +20,7 @@ import {
   formatVideoDuration,
 } from '@carbon/ibmdotcom-utilities/es/utilities/formatVideoCaption/formatVideoCaption.js';
 import { carbonElement as customElement } from '@carbon/web-components/es/globals/decorators/carbon-element.js';
+import { CTA_TYPE } from './defs';
 
 const { stablePrefix: c4dPrefix } = settings;
 
@@ -55,6 +56,9 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   @property({ reflect: true })
   thumbnail;
 
+  @property({ attribute: 'href' })
+  href?: string;
+
   updated() {
     // transpose attributes from parent cta handler to desired cta style
     Array.from(this.attributes).forEach((e) => {
@@ -79,13 +83,17 @@ class C4DCTAHead extends HostListenerMixin(StableSelectorMixin(LitElement)) {
   // @ts-ignore: The decorator refers to this method but TS thinks this method is not referred to
   private _handleVideoTitleUpdate = async (event: FocusEvent) => {
     if (event) {
-      const { videoDuration, videoName } = event.detail as any;
+      const { videoDuration, videoName, videoId } = event.detail as any;
       const formattedVideoDuration = formatVideoDuration({
         duration: !videoDuration ? videoDuration : videoDuration * 1000,
       });
       this.videoDuration ? null : (this.videoDuration = formattedVideoDuration);
-
-      if (this.ctaStyle !== 'card' && this.ctaStyle !== 'feature') {
+      if (
+        this.ctaStyle !== 'card' &&
+        this.ctaStyle !== 'feature' &&
+        this.ctaType === CTA_TYPE.VIDEO &&
+        (this as any).href === videoId
+      ) {
         const heading = formatVideoCaption({
           duration: formattedVideoDuration,
           name: videoName,

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>;
 
   /**