refactor(leadspace): reorganize slots (carbon-design-system#4898)

### Related Ticket(s) Refs carbon-design-system#4627. ### Description Changes `<slot name="buttons">` to `<slot name="action">` to align the naming strategy to `<dds-cta-section>`. ### Changelog **Changed** - Changes `<slot name="buttons">` to `<slot name="action">`.
IgnacioBecerra · Feb 22, 2021 · 94c7628 · 94c7628
1 parent ec4b534
commit 94c7628
Show file tree

Hide file tree

Showing 4 changed files with 22 additions and 20 deletions.
diff --git a/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx b/packages/web-components/src/components/leadspace/__stories__/README.stories.mdx
@@ -31,7 +31,7 @@ import '@carbon/ibmdotcom-web-components/es/components/button-group/button-group
 <dds-leadspace alt="alt text" default-src="www.example.com">
   <dds-leadspace-heading>LeadSpace title</dds-leadspace-heading>
   LeadSpace copy
-  <dds-button-group slot="buttons">
+  <dds-button-group slot="action">
     ${buttons.map( elem => html`
     <dds-button-group-item href="www.example.com">${elem.copy}${ArrowRight20}</dds-button-group-item>
     ` )}

diff --git a/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts b/packages/web-components/src/components/leadspace/__stories__/leadspace.stories.ts
@@ -39,7 +39,7 @@ export const DefaultWithNoImage = ({ parameters }) => {
     <dds-leadspace alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}">
       <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
       ${ifNonNull(copy)}
-      <dds-button-group slot="buttons">
+      <dds-button-group slot="action">
         ${buttons.map(
           elem => html`
             <dds-button-group-item href="${elem.href}">${elem.copy}${elem.renderIcon}</dds-button-group-item>
@@ -60,7 +60,7 @@ export const DefaultWithImage = ({ parameters }) => {
     >
       <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
       ${ifNonNull(copy)}
-      <dds-button-group slot="buttons">
+      <dds-button-group slot="action">
         ${buttons.map(
           elem => html`
             <dds-button-group-item href="${elem.href}">${elem.copy}${elem.renderIcon}</dds-button-group-item>
@@ -81,7 +81,7 @@ export const Centered = ({ parameters }) => {
     <dds-leadspace type="centered">
       <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
       ${ifNonNull(copy)}
-      <dds-button-group slot="buttons">
+      <dds-button-group slot="action">
         ${buttons.map(
           elem => html`
             <dds-button-group-item href="${elem.href}">${elem.copy}${elem.renderIcon}</dds-button-group-item>
@@ -103,7 +103,7 @@ export const CenteredWithImage = ({ parameters }) => {
     >
       <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
       ${ifNonNull(copy)}
-      <dds-button-group slot="buttons">
+      <dds-button-group slot="action">
         ${buttons.map(
           elem => html`
             <dds-button-group-item href="${elem.href}">${elem.copy}${elem.renderIcon}</dds-button-group-item>
@@ -124,7 +124,7 @@ export const Small = ({ parameters }) => {
     <dds-leadspace alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}" type="small">
       <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
       ${ifNonNull(copy)}
-      <dds-button-group slot="buttons">
+      <dds-button-group slot="action">
         ${buttons.map(
           elem => html`
             <dds-button-group-item href="${elem.href}">${elem.copy}${elem.renderIcon}</dds-button-group-item>
@@ -141,7 +141,7 @@ export const SmallWithImage = ({ parameters }) => {
     <dds-leadspace ?gradient="${ifNonNull(gradient)}" alt="${ifNonNull(alt)}" default-src="${ifNonNull(defaultSrc)}" type="small">
       <dds-leadspace-heading>${ifNonNull(title)}</dds-leadspace-heading>
       ${ifNonNull(copy)}
-      <dds-button-group slot="buttons">
+      <dds-button-group slot="action">
         ${buttons.map(
           elem => html`
             <dds-button-group-item href="${elem.href}">${elem.copy}${elem.renderIcon}</dds-button-group-item>

diff --git a/packages/web-components/src/components/leadspace/leadspace.ts b/packages/web-components/src/components/leadspace/leadspace.ts
@@ -24,6 +24,8 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * The LeadSpace component.
  *
  * @element dds-leadspace
+ * @slot action The action (CTA) content.
+ * @slot image The image content.
  * @csspart section The first DOM node inside the shadow-root
  */
 @customElement(`${ddsPrefix}-leadspace`)
@@ -176,7 +178,7 @@ class DDSLeadSpace extends StableSelectorMixin(LitElement) {
               </div>
               <div class="${prefix}--leadspace__content">
                 ${this._renderCopy()}
-                <slot name="buttons"></slot>
+                <slot name="action"></slot>
               </div>
             </div>
           </div>

diff --git a/packages/web-components/tests/snapshots/dds-leadspace.md b/packages/web-components/tests/snapshots/dds-leadspace.md
@@ -27,7 +27,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -64,7 +64,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -103,7 +103,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -140,7 +140,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -179,7 +179,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -223,7 +223,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -269,7 +269,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -313,7 +313,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -359,7 +359,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -396,7 +396,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -435,7 +435,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>
@@ -472,7 +472,7 @@
               </slot>
             </p>
           </div>
-          <slot name="buttons">
+          <slot name="action">
           </slot>
         </div>
       </div>