Merge branch 'master' into fix/table-of-contents-mobile-styles

carbon-design-system · Dec 7, 2020 · 748245a · 748245a
2 parents acdb782 + b5ea995
commit 748245a
Show file tree

Hide file tree

Showing 75 changed files with 253 additions and 171 deletions.
diff --git a/.github/ISSUE_TEMPLATE/bug_report.md b/.github/ISSUE_TEMPLATE/bug_report.md
@@ -2,7 +2,7 @@
 name: Bug Report 🐛
 about: Something isn't working as expected? Here is the right place to report.
 labels: bug
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, RaphaelAmadeu, JennySanchez, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, andysherman2121, IgnacioBecerra
 ---
 
 <!-- Feel free to remove sections that aren't relevant.

diff --git a/.github/ISSUE_TEMPLATE/feature_request.md b/.github/ISSUE_TEMPLATE/feature_request.md
@@ -3,7 +3,7 @@ name: Feature Request 💡
 about: Suggest a new idea for the project.
 title: ''
 labels: Feature request
-assignees: jeffchew, wonilsuhibm, RaphaelAmadeu, JennySanchez, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, andysherman2121, IgnacioBecerra
 ---
 
 <!-- replace _{{...}}_ with your own words -->

diff --git a/.github/ISSUE_TEMPLATE/question.md b/.github/ISSUE_TEMPLATE/question.md
@@ -2,7 +2,7 @@
 name: Question 🤔
 about: Usage question or discussion about Carbon for IBM.com.
 labels: question
-assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, RaphaelAmadeu, JennySanchez, IgnacioBecerra
+assignees: jeffchew, wonilsuhibm, ljcarot, RobertaJHahn, andysherman2121, IgnacioBecerra
 ---
 
 <!--

diff --git a/packages/react/src/components/LocaleModal/LocaleModalRegions.js b/packages/react/src/components/LocaleModal/LocaleModalRegions.js
@@ -150,14 +150,16 @@ export const addLocaleBackBtnListeners = (
         : returnButtonLabel
     );
 
-    btn.addEventListener('click', function click() {
+    btn.addEventListener('click', function click(e) {
       localeBackActive(btn, setIsFiltering, setClearResults);
       btn.removeEventListener('click', click);
+      e.preventDefault();
     });
     btn.addEventListener('keyup', function keyup(e) {
       if (e.keyCode === 32 || e.keyCode === 13) {
         localeBackActive(btn, setIsFiltering, setClearResults);
         btn.removeEventListener('keyup', keyup);
+        e.preventDefault();
       }
     });
   });

diff --git a/packages/web-components/examples/codesandbox/components/content-block-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/index.html
@@ -63,7 +63,7 @@
                 </dds-card-cta-footer>
               </dds-card-group-item>
             </dds-card-group>
-            <dds-card-cta slot="cta" cta-type="local" href="https://www.ibm.com">
+            <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
               <p>Lorem ipsum dolor sit ametttt</p>
               <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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>

diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
@@ -32,7 +32,7 @@
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
                 faster.</dds-content-item-copy
               >
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>
@@ -44,7 +44,7 @@
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
                 faster.</dds-content-item-copy
               >
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>
@@ -53,7 +53,7 @@
             <dds-content-block-headlines-item slot="content">
               <dds-content-block-headlines-heading>1.34M</dds-content-block-headlines-heading>
               <dds-content-item-copy slot="copy">Save 1.34M per year by optimizing your time and IT expenses.</dds-content-item-copy>
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>
@@ -65,7 +65,7 @@
                 >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
                 faster.</dds-content-item-copy
               >
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
                   Link text
                 </dds-link-list-item-cta>

diff --git a/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html b/packages/web-components/examples/codesandbox/components/content-block-segmented/index.html
@@ -50,7 +50,7 @@
               </dds-image-with-caption>
               <dds-text-cta slot="footer" cta-type="local" icon-placement="right" href="https://example.com">Lorem Ipsum dolor sit</dds-text-cta>
             </dds-content-block-segmented-item>
-            <dds-card-cta slot="cta" cta-type="local" href="https://example.com">
+            <dds-card-cta slot="footer" cta-type="local" href="https://example.com">
               Lorem ipsum dolor
               <dds-card-cta-footer></dds-card-cta-footer>
             </dds-card-cta>

diff --git a/packages/web-components/examples/codesandbox/components/content-block-simple/index.html b/packages/web-components/examples/codesandbox/components/content-block-simple/index.html
@@ -31,7 +31,7 @@
               <dds-image-item media="(min-width: 400px)" srcset="https://fpoimg.com/400x225?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
               <dds-image-item media="(min-width: 320px)" srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
             </dds-image>
-            <dds-text-cta slot="cta" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
+            <dds-text-cta slot="footer" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
           </dds-content-block-simple>
         </div>
       </div>

diff --git a/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-group-horizontal/index.html
@@ -29,7 +29,7 @@
               <span slot="eyebrow">Lorem ipsum</span>
               <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
               <dds-content-item-horizontal-copy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy>
-              <dds-link-list slot="cta" type="vertical">
+              <dds-link-list slot="footer" type="vertical">
                 <dds-link-list-item-cta
                   icon-placement="right"
                   href="https://www.ibm.com"

diff --git a/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html b/packages/web-components/examples/codesandbox/components/content-group-pictograms/index.html
@@ -56,7 +56,7 @@
               <dds-content-item-copy>
                 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum non porttitor libero, in venenatis magna.
               </dds-content-item-copy>
-              <dds-link-with-icon href="https://www.example.com" slot="cta">
+              <dds-link-with-icon href="https://www.example.com" slot="footer">
                 Aliquam condimentum interdum
                 <svg id="icon" xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 32 32">
                   <defs>

diff --git a/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html b/packages/web-components/examples/codesandbox/components/content-item-horizontal/index.html
@@ -27,7 +27,7 @@ <h1>Hello World! 👋</h1>
     <span slot="eyebrow">Lorem ipsum</span>
     <dds-content-item-heading>Aliquam condimentum</dds-content-item-heading>
     <dds-content-item-horizontal-copy>Lorem ipsum dolor sit amet, _consectetur_ adipiscing elit. Aenean et ultricies est. Mauris iaculis eget dolor nec hendrerit. Phasellus at elit sollicitudin.</dds-content-item-horizontal-copy>
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"

diff --git a/packages/web-components/examples/codesandbox/components/cta-section/index.html b/packages/web-components/examples/codesandbox/components/cta-section/index.html
@@ -26,14 +26,14 @@
           <dds-cta-section>
             <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
             <dds-cta-section-copy>Want to discuss your options with a DevOps expert? Contact our sales team to evaluate your needs.</dds-cta-section-copy>
-            <dds-button-group slot='buttons'>
-                <dds-button-group-item href="https://example.com">
-                  Primary Button
-                </dds-button-group-item>
-                <dds-button-group-item href="https://example.com">
-                  Primary button
-                </dds-button-group-item>
-              </dds-button-group>
+            <dds-button-group slot="action">
+              <dds-button-group-item href="https://example.com">
+                Primary Button
+              </dds-button-group-item>
+              <dds-button-group-item href="https://example.com">
+                Primary button
+              </dds-button-group-item>
+            </dds-button-group>
           </dds-cta-section>
         </div>
       </div>

diff --git a/packages/web-components/examples/codesandbox/components/pictogram-item/index.html b/packages/web-components/examples/codesandbox/components/pictogram-item/index.html
@@ -69,7 +69,7 @@ <h1>Hello World! 👋</h1>
     </svg>
     <dds-content-item-heading>Lorem ipsum dolor sit</dds-content-item-heading>
     <dds-content-item-copy>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam</dds-content-item-copy>
-    <dds-link-with-icon slot="cta">
+    <dds-link-with-icon slot="footer">
       Lorem ipsum dolor
       <svg
         slot="icon"

diff --git a/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs b/packages/web-components/examples/codesandbox/usage/markdown-handlebars/index.hbs
@@ -59,7 +59,7 @@ LICENSE file in the root directory of this source tree.
             <dds-image-item media="(min-width: 320px)"
               srcset="https://fpoimg.com/672x672?text=16:9&bg_color=ee5396&text_color=161616"></dds-image-item>
           </dds-image>
-          <dds-text-cta slot="cta" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
+          <dds-text-cta slot="footer" href="https://www.ibm.com/" type="local">Lorem ipsum dolor sit amet</dds-text-cta>
         </dds-content-block-simple>
       </div>
     </div>

diff --git a/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts b/packages/web-components/src/components/callout-quote/__stories__/callout-quote.stories.ts
@@ -29,7 +29,7 @@ export const Default = ({ parameters }) => {
       <span slot="sourceBottomCopy">
         ${sourceBottomCopy}
       </span>
-      <dds-link-with-icon slot="cta" href="https://example.com">
+      <dds-link-with-icon slot="footer" href="https://example.com">
         Link with Icon ${ArrowRight20({ slot: 'icon' })}
       </dds-link-with-icon>
     </dds-callout-quote>

diff --git a/packages/web-components/src/components/card/__stories__/README.stories.mdx b/packages/web-components/src/components/card/__stories__/README.stories.mdx
@@ -28,7 +28,17 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
   <span slot="heading">Lorem ipsum dolor sit amet</span>
   <dds-card-footer slot="footer">
     Card cta text
-    <svg slot="icon" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" aria-hidden="true" width="20" height="20" viewBox="0 0 20 20">
+    <svg
+      slot="icon"
+      focusable="false"
+      preserveAspectRatio="xMidYMid meet"
+      xmlns="http://www.w3.org/2000/svg"
+      fill="currentColor"
+      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>
   </dds-card-footer>
@@ -39,4 +49,12 @@ import '@carbon/ibmdotcom-web-components/es/components/card/card.js';
 
 <Props of="dds-card" />
 
+## Stable selectors
+
+See [our README](https://github.com/carbon-design-system/carbon-for-ibm-dotcom/tree/master/packages/web-components#stable-selectors-for-analytics-and-integratione2e-testing-in-web-components) to see how Web Components selector and `data-autoid` should be used.
+
+| Web Components selector | Compatibility selector    | Description |
+| ----------------------- | ------------------------- | ----------- |
+| `<dds-card>`            | `data-autoid="dds--card"` | Component   |
+
 <Description markdown={contributing} />
diff --git a/packages/web-components/src/components/card/card.ts b/packages/web-components/src/components/card/card.ts
@@ -11,6 +11,7 @@ import { html, property, internalProperty, customElement, TemplateResult } from
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import { BASIC_COLOR_SCHEME } from '../../globals/shared-enums';
+import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import DDSLink from '../../globals/internal/link';
 import DDSCardFooter from './card-footer';
 import styles from './card.scss';
@@ -37,7 +38,7 @@ const slotExistencePropertyNames = {
  * @slot footer - The footer content.
  */
 @customElement(`${ddsPrefix}-card`)
-class DDSCard extends DDSLink {
+class DDSCard extends StableSelectorMixin(DDSLink) {
   /**
    * `true` if there is eyebrow content.
    */
@@ -163,7 +164,7 @@ class DDSCard extends DDSLink {
    * A selector that will return the child footer.
    */
   static get selectorFooter() {
-    return `${ddsPrefix}-card-footer`;
+    return `${ddsPrefix}-card`;
   }
 
   static styles = styles;

diff --git a/...eb-components/src/components/content-block-cards/__stories__/README.stories.mdx b/...eb-components/src/components/content-block-cards/__stories__/README.stories.mdx
@@ -71,7 +71,7 @@ import '@carbon/ibmdotcom-web-components/es/components/cta/video-cta-container.j
       </dds-card-cta-footer>
     </dds-card-group-item>
   </dds-card-group>
-  <dds-card-cta slot="cta" cta-type="local" href="https://www.ibm.com">
+  <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
     <p>Lorem ipsum dolor sit ametttt</p>
     <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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>

diff --git a/...-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts b/...-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
@@ -74,7 +74,7 @@ export const Default = ({ parameters }) => {
       <dds-card-group slot="content">
         ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem} ${cardGroupItem}
       </dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>${ctaCopy}</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>
@@ -91,7 +91,7 @@ export const withImages = ({ parameters }) => {
         ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages} ${cardGroupItemWithImages}
         ${cardGroupItemWithImages}
       </dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>${ctaCopy}</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>
@@ -108,7 +108,7 @@ export const withVideos = ({ parameters }) => {
         ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos} ${cardGroupItemWithVideos}
         ${cardGroupItemWithVideos}
       </dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>${ctaCopy}</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>

diff --git a/...s/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts b/...s/web-components/src/components/content-block-cards/__tests__/content-block-cards.test.ts
@@ -18,7 +18,7 @@ const template = (props?) => {
     <dds-content-block-cards>
       <dds-content-block-heading>${heading}</dds-content-block-heading>
       <dds-card-group>${children}</dds-card-group>
-      <dds-card-cta slot="cta" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
+      <dds-card-cta slot="footer" cta-type="${ifNonNull(ctaType)}" href="${ifNonNull(href)}">
         <p>ctaCopy-foo</p>
         ${ArrowRight20({ slot: 'footer' })}
       </dds-card-cta>

diff --git a/...omponents/src/components/content-block-headlines/__stories__/README.stories.mdx b/...omponents/src/components/content-block-headlines/__stories__/README.stories.mdx
@@ -41,7 +41,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Modernize mission-critical applications and infrastructure in a hybrid
       multicloud environment up to 25 percent faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
@@ -59,7 +59,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Modernize mission-critical applications and infrastructure in a hybrid
       multicloud environment up to 25 percent faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
@@ -77,7 +77,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Save 1.34M per year by optimizing your time and IT
       expenses.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"
@@ -95,7 +95,7 @@ import '@carbon/ibmdotcom-web-components/es/components/content-item/content-item
       >Modernize mission-critical applications and infrastructure in a hybrid
       multicloud environment up to 25 percent faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta
         icon-placement="right"
         href="https://www.ibm.com"

diff --git a/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts b/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
@@ -23,7 +23,7 @@ const contentItemRow1 = html`
       >Modernize mission-critical applications and infrastructure in a hybrid multicloud environment up to 25 percent
       faster.</dds-content-item-copy
     >
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Link text
       </dds-link-list-item-cta>
@@ -35,7 +35,7 @@ const contentItemRow2 = html`
   <dds-content-block-headlines-item>
     <dds-content-block-headlines-heading>1.34M</dds-content-block-headlines-heading>
     <dds-content-item-copy slot="copy">Save 1.34M per year by optimizing your time and IT expenses.</dds-content-item-copy>
-    <dds-link-list slot="cta" type="vertical">
+    <dds-link-list slot="footer" type="vertical">
       <dds-link-list-item-cta icon-placement="right" href="https://www.ibm.com" cta-type="local">
         Link text
       </dds-link-list-item-cta>

diff --git a/...ges/web-components/src/components/content-block-headlines/content-block-headlines-item.ts b/...ges/web-components/src/components/content-block-headlines/content-block-headlines-item.ts
@@ -32,7 +32,7 @@ class DDSContentBlockHeadlinesItem extends StableSelectorMixin(DDSContentItem) {
     return html`
       <h4 class="bx--content-block-headlines__heading"><slot name="heading"></slot></h4>
       <p class="bx--content-block-headlines__copy"><slot name="copy"></slot></p>
-      <slot name="cta"></slot>
+      <slot name="footer"></slot>
     `;
   }
 

diff --git a/...eb-components/src/components/content-block-mixed/__stories__/README.stories.mdx b/...eb-components/src/components/content-block-mixed/__stories__/README.stories.mdx
@@ -80,7 +80,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
         </dds-card-cta-footer>
       </dds-card-group-item>
     </dds-card-group>
-    <dds-card-cta slot="cta" cta-type="local" href="https://www.ibm.com">
+    <dds-card-cta slot="footer" cta-type="local" href="https://www.ibm.com">
       <p>Lorem ipsum dolor sit ametttt</p>
       <svg slot="footer" focusable="false" preserveAspectRatio="xMidYMid meet" xmlns="http://www.w3.org/2000/svg" fill="currentColor" 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>
@@ -97,7 +97,7 @@ import '@carbon/ibmdotcom-web-components/cta/card-cta-footer.js';
       </svg>
       <dds-content-item-heading>Lorem ipsum dolor sit amet</dds-content-item-heading>
       <dds-content-item-copy>Lorem ipsum dolor sit amet</dds-content-item-copy>
-      <dds-link-with-icon href="https://www.ibm.com/" slot="cta">
+      <dds-link-with-icon href="https://www.ibm.com/" slot="footer">
         Link text
         <svg slot="icon" ...>
           ...

diff --git a/...-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts b/...-components/src/components/content-block-mixed/__stories__/content-block-mixed.stories.ts
@@ -166,7 +166,7 @@ export const Default = ({ parameters }) => {
               </svg>
               <dds-content-item-heading>${itemHeading}</dds-content-item-heading>
               <dds-content-item-copy>${itemCopy}</dds-content-item-copy>
-              <dds-link-with-icon href="${linkWithIcon.href}" slot="cta">
+              <dds-link-with-icon href="${linkWithIcon.href}" slot="footer">
                 ${linkWithIcon.copy} ${ArrowRight20({ slot: 'icon' })}
               </dds-link-with-icon>
             </dds-pictogram-item>