Merge branch 'main' into fix/notice-choice-attribute-snake-case

carbon-design-system · Dec 5, 2024 · 5e518c3 · 5e518c3
2 parents 64b66e4 + 6f3768c
commit 5e518c3
Show file tree

Hide file tree

Showing 15 changed files with 144 additions and 86 deletions.
diff --git a/packages/services/CHANGELOG.md b/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.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-services
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-services

diff --git a/packages/services/package.json b/packages/services/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-services",
   "description": "Carbon for IBM.com Services",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.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.0-rc.1",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.2",
     "@ibm/telemetry-js": "^1.5.0",
     "axios": "^1.6.8",
     "marked": "^4.0.10",

diff --git a/packages/styles/CHANGELOG.md b/packages/styles/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.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-styles
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-styles

diff --git a/packages/styles/package.json b/packages/styles/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-styles",
   "description": "Carbon for IBM.com Styles",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.2",
   "license": "Apache-2.0",
   "main": "dist/ibm-dotcom-styles.min.css",
   "module": "src/scss",

diff --git a/packages/styles/scss/components/feature-card/_feature-card.scss b/packages/styles/scss/components/feature-card/_feature-card.scss
@@ -86,6 +86,10 @@ $feature-flags: (
       flex: 1 0 50%;
     }
 
+    .#{$prefix}--card__image-wrapper {
+      aspect-ratio: 1 / 1;
+    }
+
     .#{$prefix}--card__wrapper {
       &::before,
       &::after {
@@ -247,10 +251,27 @@ $feature-flags: (
     }
   }
 
-  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse']
-    .#{$c4d-prefix}-ce--card__footer
-    ::slotted(svg[slot='icon']) {
-    fill: $link-inverse;
+  :host(#{$c4d-prefix}-feature-card-footer)[color-scheme='inverse'] {
+    .#{$c4d-prefix}-ce--card__footer {
+      .#{$c4d-prefix}-ce--cta__icon,
+      ::slotted(svg[slot='icon']) {
+        fill: $link-inverse;
+      }
+
+      &:hover {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-hover;
+        }
+      }
+
+      &:active {
+        .#{$c4d-prefix}-ce--cta__icon,
+        ::slotted(svg[slot='icon']) {
+          fill: $link-inverse-active;
+        }
+      }
+    }
   }
 
   :host(#{$c4d-prefix}-feature-card[size='large']) {

diff --git a/packages/styles/scss/components/tableofcontents/_table-of-contents.scss b/packages/styles/scss/components/tableofcontents/_table-of-contents.scss
@@ -112,7 +112,6 @@ $hover-transition-timing: 95ms;
     @extend .#{$prefix}--col-lg-12;
 
     box-sizing: border-box;
-    padding-block: $spacing-05 $spacing-09;
   }
 
   .#{$prefix}--tableofcontents {

diff --git a/packages/utilities/CHANGELOG.md b/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.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-utilities
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-utilities

diff --git a/packages/utilities/package.json b/packages/utilities/package.json
@@ -1,7 +1,7 @@
 {
   "name": "@carbon/ibmdotcom-utilities",
   "description": "Carbon for IBM.com Utilities",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.2",
   "license": "Apache-2.0",
   "main": "lib/index.js",
   "module": "es/index.js",

diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
@@ -1,7 +1,7 @@
 //
 // @license
 //
-// Copyright IBM Corp. 2020, 2021
+// Copyright IBM Corp. 2020, 2024
 //
 // This source code is licensed under the Apache-2.0 license found in the
 // LICENSE file in the root directory of this source tree.
@@ -25,28 +25,28 @@
 @include grid.flex-grid();
 
 :root {
-  @include theme($white, true);
+  @include theme($white);
 
-  height: 100%;
+  block-size: 100%;
 }
 
 :root[storybook-carbon-theme='g10'] {
-  @include theme($g10, true);
+  @include theme($g10);
 }
 
 :root[storybook-carbon-theme='g90'] {
-  @include theme($g90, true);
+  @include theme($g90);
 }
 
 :root[storybook-carbon-theme='g100'] {
-  @include theme($g100, true);
+  @include theme($g100);
 }
 
 body {
   // `@include css-body` has `font-family: inherit` via `@include type-style('body-short-01')`,
   // which kills `font-family` from `@include carbon--type-reset`
-  color: $text-primary;
   background-color: $background;
+  color: $text-primary;
   line-height: 1;
 }
 
@@ -71,6 +71,5 @@ html {
 }
 
 .c4d-story-padding {
-  padding-top: $spacing-05;
-  padding-bottom: $spacing-05;
+  padding-block: $spacing-05;
 }
diff --git a/packages/web-components/CHANGELOG.md b/packages/web-components/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.0-rc.2](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-12-05)
+
+**Note:** Version bump only for package @carbon/ibmdotcom-web-components
+
+
+
+
+
 # [2.16.0-rc.1](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/compare/@carbon/[email protected]...@carbon/[email protected]) (2024-11-29)
 
 **Note:** Version bump only for package @carbon/ibmdotcom-web-components

diff --git a/packages/web-components/package.json b/packages/web-components/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@carbon/ibmdotcom-web-components",
-  "version": "2.16.0-rc.1",
+  "version": "2.16.0-rc.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.0-rc.1",
-    "@carbon/ibmdotcom-styles": "2.16.0-rc.1",
-    "@carbon/ibmdotcom-utilities": "2.16.0-rc.1",
+    "@carbon/ibmdotcom-services": "2.16.0-rc.2",
+    "@carbon/ibmdotcom-styles": "2.16.0-rc.2",
+    "@carbon/ibmdotcom-utilities": "2.16.0-rc.2",
     "@carbon/layout": "11.27.0",
     "@carbon/motion": "11.22.0",
     "@carbon/styles": "1.65.0",

diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -340,7 +340,9 @@ class C4DCard extends CTAMixin(StableSelectorMixin(CDSLink)) {
         formatVideoCaption: formatVideoCaptionInEffect,
         formatVideoDuration: formatVideoDurationInEffect,
       } = this;
-      const footer = this.querySelector(`${c4dPrefix}-card-footer`);
+      const footer = this.querySelector(
+        (this.constructor as typeof C4DCard).selectorFooter
+      );
 
       const headingText = this.querySelector(
         `${c4dPrefix}-card-heading`

diff --git a/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts b/packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts
@@ -21,53 +21,49 @@ import imgLg1x1 from '../../../../.storybook/storybook-images/assets/720/fpo--1x
 import imgXlg1x1 from '../../../../.storybook/storybook-images/assets/1312/fpo--1x1--1312x1312--002.jpg';
 import imgMax1x1 from '../../../../.storybook/storybook-images/assets/1584/fpo--1x1--1584x1584--002.jpg';
 import settings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
+import { typeOptions, types } from '../../cta/__stories__/ctaTypeConfig';
 
 const { stablePrefix: c4dPrefix, prefix } = settings;
 
 import readme from './README.stories.mdx';
 import textNullable from '../../../../.storybook/knob-text-nullable';
+import { CTA_TYPE } from '../../cta/defs';
 
 const colorSchemeMap = {
   Regular: BASIC_COLOR_SCHEME.REGULAR,
   Inverse: BASIC_COLOR_SCHEME.INVERSE,
 };
 
 export const Medium = (args) => {
-  const { heading, href, colorScheme } =
+  const { heading, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
   return html`
-    <c4d-feature-card
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      <c4d-feature-card-footer></c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" alt="Image alt text" default-src="${imgMax1x1}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${mediumImgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        <c4d-feature-card-footer></c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
-Medium.story = {
-  parameters: {
-    percy: {
-      skip: true,
-    },
-  },
-};
-
 export const Large = (args) => {
-  const { eyebrow, heading, copy, href, colorScheme } =
+  const { eyebrow, heading, copy, href, colorScheme, ctaType } =
     args?.[`${c4dPrefix}-feature-card`] ?? {};
 
   const copyComponent = document
@@ -77,36 +73,35 @@ export const Large = (args) => {
     copyComponent!.innerHTML = copy;
   }
   return html`
-    <c4d-feature-card
-      size="large"
-      href=${ifDefined(href || undefined)}
-      color-scheme=${colorSchemeMap[colorScheme]}
-      cta-type="local">
-      <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
-        <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
-        </c4d-image-item>
-        <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
-        </c4d-image-item>
-      </c4d-image>
-      <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
-      <c4d-card-heading>${heading}</c4d-card-heading>
-      ${copy ? html`<p>${copy}</p>` : ''}
-      <c4d-feature-card-footer> </c4d-feature-card-footer>
-    </c4d-feature-card>
+    <c4d-video-cta-container>
+      <c4d-feature-card
+        size="large"
+        href=${ifDefined(href || undefined)}
+        color-scheme=${colorSchemeMap[colorScheme]}
+        cta-type=${ctaType}>
+        <c4d-image slot="image" default-src="${ifDefined(imgLg1x1)}">
+          <c4d-image-item media="(min-width: 1312px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 1056px)" srcset="${imgXlg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 991px)" srcset="${imgLg1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 672px)" srcset="${imgMd1x1}">
+          </c4d-image-item>
+          <c4d-image-item media="(min-width: 0px)" srcset="${imgSm4x3}">
+          </c4d-image-item>
+        </c4d-image>
+        <c4d-card-eyebrow>${eyebrow}</c4d-card-eyebrow>
+        <c4d-card-heading>${heading}</c4d-card-heading>
+        ${copy ? html`<p>${copy}</p>` : ''}
+        <c4d-feature-card-footer> </c4d-feature-card-footer>
+      </c4d-feature-card>
+    </c4d-video-cta-container>
   `;
 };
 
 Large.story = {
   parameters: {
-    percy: {
-      skip: true,
-    },
     storyGrid: `${prefix}--col-lg-12`,
     knobs: {
       [`${c4dPrefix}-feature-card`]: () => ({
@@ -124,6 +119,11 @@ Large.story = {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {
@@ -164,6 +164,11 @@ export default {
         ),
         href: textNullable('Card Href (href):', 'https://example.com'),
         colorScheme: select('Color scheme:', ['Regular', 'Inverse'], 'Regular'),
+        ctaType: select(
+          'CTA type (cta-type)',
+          typeOptions,
+          types[CTA_TYPE.LOCAL]
+        ),
       }),
     },
     propsSet: {