diff --git a/packages/web-components/src/components/content-block/content-block.ts b/packages/web-components/src/components/content-block/content-block.ts index ca5056092b0..fd976b0315f 100644 --- 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 index d2d825aa113..ef3e5315066 100644 --- 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 index 41878bca187..d3bccf2d775 100644 --- 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` 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 index 5ecbfc5873c..49fd1cfcd36 100644 --- 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` diff --git a/packages/web-components/src/components/cta-section/cta-section.ts b/packages/web-components/src/components/cta-section/cta-section.ts index f916515d24a..424970bf7ea 100644 --- 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,7 +34,7 @@ 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. */ @@ -42,10 +42,28 @@ class DDSCTASection extends StableSelectorMixin(DDSContentItem) { 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` +
+ +
+ `; } /** - * @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` -
- -
- -
+
- +
`; } + /** + * @returns The main content. + */ + protected _renderInnerBody(): TemplateResult | string | void { + // Note: The media content in `` 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` + + `; + } + + /** + * @returns The footer content. + */ + // eslint-disable-next-line class-methods-use-this + protected _renderFooter(): TemplateResult | string | void { + // Note: The CTA content of `` 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 index ce318ebda07..3156bbc312a 100644 --- a/packages/web-components/tests/snapshots/dds-cta-section.md +++ b/packages/web-components/tests/snapshots/dds-cta-section.md @@ -7,11 +7,7 @@ ``` -
- - -
- + + + ``` @@ -39,11 +37,7 @@ ``` -
- - -
- +
@@ -56,10 +50,12 @@ hidden="" >
- +
+ + ```