refactor(cta-section): reorganize slots

Repurposes the default `<slot>` in `<dds-cta-section>` from the copy content to the child content items. Also makes `<dds-cta-section>` inherit `<dds-content-block>` instead of `<dds-content-item>` in its TypeScript code (not style code). These are because `<dds-cta-section>` doesn't work as a (child) content item; Instead, it _contains_ child items. Refs carbon-design-system#4627.
asudoh · Jan 14, 2021 · 0ebc520 · 0ebc520
1 parent 3613d7b
commit 0ebc520
Show file tree

Hide file tree

Showing 6 changed files with 88 additions and 48 deletions.
diff --git a/packages/web-components/src/components/content-block/content-block.ts b/packages/web-components/src/components/content-block/content-block.ts
@@ -25,6 +25,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
 const slotExistencePropertyNames = {
   complementary: '_hasComplementary',
   copy: '_hasCopy',
+  heading: '_hasHeading',
   footer: '_hasFooter',
   media: '_hasMedia',
 };

diff --git a/packages/web-components/src/components/content-item/content-item.ts b/packages/web-components/src/components/content-item/content-item.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -49,7 +49,7 @@ class DDSContentItem extends StableSelectorMixin(LitElement) {
     const hasContent = (target as HTMLSlotElement)
       .assignedNodes()
       .some(node => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim());
-    this[slotExistencePropertyNames[name] || '_hasDefaultContent'] = hasContent;
+    this[slotExistencePropertyNames[name] || '_hasCopy'] = hasContent;
   }
 
   /**

diff --git a/packages/web-components/src/components/cta-section/cta-section-copy.ts b/packages/web-components/src/components/cta-section/cta-section-copy.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, customElement } from 'lit-element';
+import { html, property, customElement } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import DDSContentItemParagraph from '../content-item/content-item-paragraph';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
@@ -22,6 +22,12 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-cta-section-copy`)
 class DDSCTASectionItemCopy extends StableSelectorMixin(DDSContentItemParagraph) {
+  /**
+   * The shadow slot this copy content should be in.
+   */
+  @property({ reflect: true })
+  slot = 'copy';
+
   render() {
     return html`
       <slot></slot>

diff --git a/packages/web-components/src/components/cta-section/cta-section-item.ts b/packages/web-components/src/components/cta-section/cta-section-item.ts
@@ -1,13 +1,13 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
  */
 
-import { html, property, css, customElement } from 'lit-element';
+import { html, css, customElement } from 'lit-element';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import styles from './cta-section.scss';
@@ -22,12 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-cta-section-item`)
 class DDSCTASectionItem extends StableSelectorMixin(DDSContentItem) {
-  /**
-   * The shadow slot this CTA section item should be in.
-   */
-  @property({ reflect: true })
-  slot = 'items';
-
   render() {
     return html`
       <slot name="heading"></slot>

diff --git a/packages/web-components/src/components/cta-section/cta-section.ts b/packages/web-components/src/components/cta-section/cta-section.ts
@@ -1,7 +1,7 @@
 /**
  * @license
  *
- * Copyright IBM Corp. 2020
+ * Copyright IBM Corp. 2020, 2021
  *
  * This source code is licensed under the Apache-2.0 license found in the
  * LICENSE file in the root directory of this source tree.
@@ -13,7 +13,7 @@ import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/setti
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 
 import styles from './cta-section.scss';
-import DDSContentItem from '../content-item/content-item';
+import DDSContentBlock from '../content-block/content-block';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -23,7 +23,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 const slotExistencePropertyNames = {
   action: '_hasAction',
-  items: '_hasItems',
+  'link-list': '_hasLinkList',
 };
 
 /**
@@ -34,18 +34,36 @@ const slotExistencePropertyNames = {
  * @slot action - The CTA Buttons.
  */
 @customElement(`${ddsPrefix}-cta-section`)
-class DDSCTASection extends StableSelectorMixin(DDSContentItem) {
+class DDSCTASection extends StableSelectorMixin(DDSContentBlock) {
   /**
    * `true` if there are CTA action in the content item area.
    */
   @internalProperty()
   protected _hasAction = false;
 
   /**
-   * `true` if there are CTA section items.
+   * `true` if there is a link list.
    */
   @internalProperty()
-  protected _hasItems = false;
+  protected _hasLinkList = false;
+
+  /**
+   * Handles `slotchange` event.
+   *
+   * @param event The event.
+   */
+  protected _handleSlotChange(event: Event) {
+    const { target } = event;
+    const { name } = target as HTMLSlotElement;
+    if (!slotExistencePropertyNames[name]) {
+      super._handleSlotChange(event);
+      return;
+    }
+    const hasContent = (target as HTMLSlotElement)
+      .assignedNodes()
+      .some(node => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim());
+    this[slotExistencePropertyNames[name]] = hasContent;
+  }
 
   /**
    * Applies section attribute
@@ -58,36 +76,61 @@ class DDSCTASection extends StableSelectorMixin(DDSContentItem) {
   }
 
   /**
-   * Handles `slotchange` event.
-   *
-   * @param event The event.
+   * @returns The actions (CTA) content.
    */
-  protected _handleSlotChange({ target }: Event) {
-    const { name } = target as HTMLSlotElement;
-    const hasContent = (target as HTMLSlotElement)
-      .assignedNodes()
-      .some(node => node.nodeType !== Node.TEXT_NODE || node!.textContent!.trim());
-    this[slotExistencePropertyNames[name] || '_hasDefaultContent'] = hasContent;
+  protected _renderActions(): TemplateResult | string | void {
+    const { _hasAction: hasAction, _handleSlotChange: handleSlotChange } = this;
+    return html`
+      <div ?hidden="${!hasAction}" class="${prefix}--content-item__cta">
+        <slot name="action" @slotchange="${handleSlotChange}"></slot>
+      </div>
+    `;
   }
 
   /**
-   * @returns The footer content.
+   * @returns The main content.
    */
-  protected _renderFooter(): TemplateResult | string | void {
-    const { _hasAction: hasAction, _hasItems: hasItems } = this;
+  protected _renderContent(): TemplateResult | string | void {
+    const { _hasContent: hasContent, _handleSlotChange: handleSlotChange } = this;
     return html`
-      <div ?hidden="${!hasAction}" class="${prefix}--content-item__cta">
-        <slot name="action" @slotchange="${this._handleSlotChange}"></slot>
-      </div>
-      <slot name="link-list"></slot>
-      <div ?hidden="${!hasItems}" class="${prefix}--helper-wrapper">
+      <div ?hidden="${!hasContent}" class="${prefix}--helper-wrapper">
         <div class="${prefix}--content-item-wrapper">
-          <slot name="items" @slotchange="${this._handleSlotChange}"></slot>
+          <slot @slotchange="${handleSlotChange}"></slot>
         </div>
       </div>
     `;
   }
 
+  /**
+   * @returns The main content.
+   */
+  protected _renderInnerBody(): TemplateResult | string | void {
+    // Note: The media content in `<dds-cta-section>` is not supported at the time of writing this code
+    return html`
+      ${this._renderActions()}${this._renderLinkList()}${this._renderContent()}
+    `;
+  }
+
+  /**
+   * @returns The link list content.
+   */
+  protected _renderLinkList(): TemplateResult | string | void {
+    const { _handleSlotChange: handleSlotChange } = this;
+    return html`
+      <slot name="link-list" @slotchange="${handleSlotChange}"></slot>
+    `;
+  }
+
+  /**
+   * @returns The footer content.
+   */
+  // eslint-disable-next-line class-methods-use-this
+  protected _renderFooter(): TemplateResult | string | void {
+    // Note: The CTA content of `<dds-cta-section>` is rendered above the main content, instead of as a footer.
+    // The slot name reflects that (`action`)
+    return undefined;
+  }
+
   static get stableSelector() {
     return `${ddsPrefix}--cta-section`;
   }

diff --git a/packages/web-components/tests/snapshots/dds-cta-section.md b/packages/web-components/tests/snapshots/dds-cta-section.md
@@ -7,11 +7,7 @@
 ```
 <slot name="heading">
 </slot>
-<div>
-  <slot name="media">
-  </slot>
-</div>
-<slot>
+<slot name="copy">
 </slot>
 <div
   class="bx--content-item__cta"
@@ -27,10 +23,12 @@
   hidden=""
 >
   <div class="bx--content-item-wrapper">
-    <slot name="items">
+    <slot>
     </slot>
   </div>
 </div>
+<slot name="complementary">
+</slot>
 
 ```
 
@@ -39,11 +37,7 @@
 ```
 <slot name="heading">
 </slot>
-<div>
-  <slot name="media">
-  </slot>
-</div>
-<slot>
+<slot name="copy">
 </slot>
 <div class="bx--content-item__cta">
   <slot name="action">
@@ -56,10 +50,12 @@
   hidden=""
 >
   <div class="bx--content-item-wrapper">
-    <slot name="items">
+    <slot>
     </slot>
   </div>
 </div>
+<slot name="complementary">
+</slot>
 
 ```