From 679cc8fe6d9f896b8dd454bc65b07dee72a9aa0b Mon Sep 17 00:00:00 2001 From: Akira Sudoh Date: Sat, 13 Mar 2021 18:02:32 +0900 Subject: [PATCH] chore(content-group): update base class to new layout As we finished migrating all content patterns to the new layout aligning to non-gutter grid, updates the base classes to the new one, that finishes the migration. Refs #4174. --- .../callout-with-media/callout-with-media.ts | 6 +- .../content-block-cards.ts | 38 +--------- .../content-block-headlines.ts | 37 ---------- .../content-block-media.ts | 4 +- .../content-block-mixed.ts | 4 +- .../content-block-segmented.ts | 5 +- .../content-block-simple.ts | 74 +------------------ .../components/content-block/content-block.ts | 68 ++++++++--------- .../content-group-cards.ts | 4 +- .../content-group-horizontal.ts | 4 +- .../content-group-pictograms.ts | 4 +- .../content-group-simple.ts | 49 +----------- .../components/content-group/content-group.ts | 24 ------ 13 files changed, 48 insertions(+), 273 deletions(-) diff --git a/packages/web-components/src/components/callout-with-media/callout-with-media.ts b/packages/web-components/src/components/callout-with-media/callout-with-media.ts index 08e73d9dc25..ae9688dece4 100644 --- a/packages/web-components/src/components/callout-with-media/callout-with-media.ts +++ b/packages/web-components/src/components/callout-with-media/callout-with-media.ts @@ -1,7 +1,7 @@ /** * @license * - * Copyright IBM Corp. 2019, 2020 + * Copyright IBM Corp. 2019, 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. @@ -11,7 +11,7 @@ import { customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import styles from './callout-with-media.scss'; import DDSCalloutMixin from '../../component-mixins/callout/callout'; -import DDSContentBlockSimple from '../content-block-simple/content-block-simple'; +import DDSContentBlock from '../content-block/content-block'; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -21,7 +21,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-callout-data */ @customElement(`${ddsPrefix}-callout-with-media`) -class DDSCalloutWithMedia extends DDSCalloutMixin(DDSContentBlockSimple) { +class DDSCalloutWithMedia extends DDSCalloutMixin(DDSContentBlock) { static styles = styles; } diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.ts b/packages/web-components/src/components/content-block-cards/content-block-cards.ts index 4633d0ad137..cf1fa4f9129 100644 --- a/packages/web-components/src/components/content-block-cards/content-block-cards.ts +++ b/packages/web-components/src/components/content-block-cards/content-block-cards.ts @@ -8,7 +8,7 @@ */ import { Part } from 'lit-html'; -import { html, css, customElement, TemplateResult } from 'lit-element'; +import { css, customElement } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; @@ -33,42 +33,6 @@ class DDSContentBlockCards extends StableSelectorMixin(DDSContentBlock) { return `${prefix}--content-layout ${prefix}--content-layout--card-group`; } - /** - * @returns The non-header, non-complementary contents. - */ - protected _renderBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; - return html` -
- ${super._renderBody()} -
- `; - } - - protected _renderInnerBody() { - return html` - ${this._renderContent()}${this._renderMedia()} - `; - } - - protected _renderFooter(): TemplateResult | string | void { - const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; - // TODO: See if we can remove the surrounding `
` - return html` -
- -
- `; - } - - render() { - return html` -
- ${this._renderHeading()}${this._renderBody()} -
- `; - } - static get stableSelector() { return `${ddsPrefix}--content-block-cards`; } diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts index f1fe938d73f..ecfe615fc34 100755 --- a/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts +++ b/packages/web-components/src/components/content-block-headlines/content-block-headlines.ts @@ -33,18 +33,6 @@ class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) { return `${prefix}--content-layout ${prefix}--content-layout--with-headlines ${prefix}--layout--border`; } - /** - * @returns The non-header, non-complementary contents. - */ - protected _renderBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; - return html` -
- ${super._renderBody()} -
- `; - } - protected _renderInnerBody(): TemplateResult | string | void { const { _hasContent: hasContent, _handleSlotChange: handleSlotChange } = this; return html` @@ -54,31 +42,6 @@ class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) { `; } - protected _renderContent(): TemplateResult | string | void { - const { _handleSlotChange: handleSlotChange } = this; - return html` - - `; - } - - protected _renderFooter(): TemplateResult | string | void { - const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; - // TODO: See if we can remove the surrounding `
` - return html` -
- -
- `; - } - - render() { - return html` -
- ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()} -
- `; - } - static get stableSelector() { return `${ddsPrefix}-content-block-headlines`; } diff --git a/packages/web-components/src/components/content-block-media/content-block-media.ts b/packages/web-components/src/components/content-block-media/content-block-media.ts index 64651eadfe8..4087eff52d0 100644 --- a/packages/web-components/src/components/content-block-media/content-block-media.ts +++ b/packages/web-components/src/components/content-block-media/content-block-media.ts @@ -9,7 +9,7 @@ import { css, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import DDSContentBlockSimple from '../content-block-simple/content-block-simple'; +import DDSContentBlock from '../content-block/content-block'; import styles from './content-block-media.scss'; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -20,7 +20,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-block-media */ @customElement(`${ddsPrefix}-content-block-media`) -class DDSContentBlockMedia extends DDSContentBlockSimple { +class DDSContentBlockMedia extends DDSContentBlock { static get stableSelector() { return `${ddsPrefix}--content-block-media`; } diff --git a/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts b/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts index 341a3222269..8e387f9b0c9 100644 --- a/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts +++ b/packages/web-components/src/components/content-block-mixed/content-block-mixed.ts @@ -9,7 +9,7 @@ import { customElement, css } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import DDSContentBlockSimple from '../content-block-simple/content-block-simple'; +import DDSContentBlock from '../content-block/content-block'; import styles from './content-block-mixed.scss'; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -20,7 +20,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-block-mixed */ @customElement(`${ddsPrefix}-content-block-mixed`) -class DDSContentBlockMixed extends DDSContentBlockSimple { +class DDSContentBlockMixed extends DDSContentBlock { static get stableSelector() { return `${ddsPrefix}--content-block-mixed`; } diff --git a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts index c75384dd36d..abe5ecb3aff 100644 --- a/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts +++ b/packages/web-components/src/components/content-block-segmented/content-block-segmented.ts @@ -12,8 +12,7 @@ import { classMap } from 'lit-html/directives/class-map'; import { html, css, customElement } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../content-block/content-block'; -import DDSContentBlockSimple from '../content-block-simple/content-block-simple'; +import DDSContentBlock, { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../content-block/content-block'; import styles from './content-block-segmented.scss'; const { prefix } = settings; @@ -25,7 +24,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-block-segmented */ @customElement(`${ddsPrefix}-content-block-segmented`) -class DDSContentBlockSegmented extends DDSContentBlockSimple { +class DDSContentBlockSegmented extends DDSContentBlock { protected _getContainerClasses(): string | ((part: Part) => void) { const { complementaryStyleScheme, diff --git a/packages/web-components/src/components/content-block-simple/content-block-simple.ts b/packages/web-components/src/components/content-block-simple/content-block-simple.ts index dd5c7ac1c32..772b9116a44 100644 --- a/packages/web-components/src/components/content-block-simple/content-block-simple.ts +++ b/packages/web-components/src/components/content-block-simple/content-block-simple.ts @@ -7,16 +7,12 @@ * LICENSE file in the root directory of this source tree. */ -import { Part } from 'lit-html'; -import { classMap } from 'lit-html/directives/class-map'; -import { html, css, customElement, TemplateResult } from 'lit-element'; -import settings from 'carbon-components/es/globals/js/settings.js'; +import { css, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; -import DDSContentBlock, { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from '../content-block/content-block'; +import DDSContentBlock from '../content-block/content-block'; import styles from './content-block-simple.scss'; -const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -26,72 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-block-simple`) class DDSContentBlockSimple extends StableSelectorMixin(DDSContentBlock) { - /** - * The CSS class list for the container (grid) node. - */ - protected _getContainerClasses(): string | ((part: Part) => void) { - const { complementaryStyleScheme, _hasComplementary: hasComplementary } = this; - return classMap({ - [`${prefix}--content-layout`]: true, - [`${prefix}--content-layout--with-complementary`]: hasComplementary, - [`${prefix}--layout--border`]: - hasComplementary && complementaryStyleScheme === CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER, - }); - } - - /** - * @returns The non-header, non-complementary contents. - */ - protected _renderBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; - return html` -
- ${super._renderBody()} -
- `; - } - - /** - * @returns The media content. - */ - protected _renderMedia(): TemplateResult | string | void { - const { _handleSlotChange: handleSlotChange } = this; - return html` - - `; - } - - protected _renderInnerBody() { - return html` - ${this._renderContent()}${this._renderMedia()} - `; - } - - protected _renderContent(): TemplateResult | string | void { - const { _handleSlotChange: handleSlotChange } = this; - return html` - - `; - } - - protected _renderFooter(): TemplateResult | string | void { - const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; - // TODO: See if we can remove the surrounding `
` - return html` -
- -
- `; - } - - render() { - return html` -
- ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()} -
- `; - } - static get stableSelector() { return `${ddsPrefix}--content-block-simple`; } 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 3e3a66ae2a0..892d8795b76 100644 --- a/packages/web-components/src/components/content-block/content-block.ts +++ b/packages/web-components/src/components/content-block/content-block.ts @@ -7,17 +7,16 @@ * LICENSE file in the root directory of this source tree. */ +import { Part } from 'lit-html'; import { classMap } from 'lit-html/directives/class-map'; import { html, property, internalProperty, LitElement, TemplateResult } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings.js'; -import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME } from './defs'; import styles from './content-block.scss'; export { CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME }; const { prefix } = settings; -const { stablePrefix: ddsPrefix } = ddsSettings; /** * The table mapping slot name with the private property name that indicates the existence of the slot content. @@ -78,6 +77,19 @@ class DDSContentBlock extends LitElement { @internalProperty() protected _hasMedia = false; + /** + * The CSS class list for the container (grid) node. + */ + protected _getContainerClasses(): string | ((part: Part) => void) { + const { complementaryStyleScheme, _hasComplementary: hasComplementary } = this; + return classMap({ + [`${prefix}--content-layout`]: true, + [`${prefix}--content-layout--with-complementary`]: hasComplementary, + [`${prefix}--layout--border`]: + hasComplementary && complementaryStyleScheme === CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER, + }); + } + /** * Handles `slotchange` event. * @@ -95,8 +107,11 @@ class DDSContentBlock extends LitElement { * @returns The non-header, non-complementary contents. */ protected _renderBody(): TemplateResult | string | void { + const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; return html` - ${this._renderCopy()}${this._renderInnerBody()}${this._renderFooter()} +
+ ${this._renderCopy()}${this._renderInnerBody()}${this._renderFooter()} +
`; } @@ -125,11 +140,10 @@ class DDSContentBlock extends LitElement { */ protected _renderFooter(): TemplateResult | string | void { const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; + // TODO: See if we can remove the surrounding `
` return html` -
-
- -
+
+
`; } @@ -148,11 +162,8 @@ class DDSContentBlock extends LitElement { * @returns The main/media content. */ protected _renderInnerBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` -
- ${this._renderContent()}${this._renderMedia()} -
+ ${this._renderContent()}${this._renderMedia()} `; } @@ -160,11 +171,9 @@ class DDSContentBlock extends LitElement { * @returns The media content. */ protected _renderMedia(): TemplateResult | string | void { - const { _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this; + const { _handleSlotChange: handleSlotChange } = this; return html` -
- -
+ `; } @@ -185,30 +194,11 @@ class DDSContentBlock extends LitElement { complementaryStyleScheme = CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.REGULAR; render() { - const { complementaryStyleScheme, _hasComplementary: hasComplementary } = this; - const complementaryRowClasses = classMap({ - [`${prefix}--row`]: true, - [`${prefix}--layout--border`]: complementaryStyleScheme === CONTENT_BLOCK_COMPLEMENTARY_STYLE_SCHEME.WITH_BORDER, - }); - - return !hasComplementary - ? html` - ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()} - ` - : html` -
-
- ${this._renderHeading()} -
-
-
-
-
- ${this._renderBody()} -
- ${this._renderComplementary()} -
- `; + return html` +
+ ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()} +
+ `; } static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader diff --git a/packages/web-components/src/components/content-group-cards/content-group-cards.ts b/packages/web-components/src/components/content-group-cards/content-group-cards.ts index 73c63481238..66c61582edb 100644 --- a/packages/web-components/src/components/content-group-cards/content-group-cards.ts +++ b/packages/web-components/src/components/content-group-cards/content-group-cards.ts @@ -10,7 +10,7 @@ import { html, css, customElement, TemplateResult } from 'lit-element'; import settings from 'carbon-components/es/globals/js/settings.js'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import DDSContentGroupSimple from '../content-group-simple/content-group-simple'; +import DDSContentGroup from '../content-group/content-group'; import styles from './content-group-cards.scss'; const { prefix } = settings; @@ -22,7 +22,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-group-cards */ @customElement(`${ddsPrefix}-content-group-cards`) -class DDSContentGroupCards extends DDSContentGroupSimple { +class DDSContentGroupCards extends DDSContentGroup { protected _renderInnerBody(): TemplateResult | string | void { const { _hasContent: hasContent, _hasMedia: hasMedia } = this; return html` diff --git a/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts b/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts index 599ffc5cf40..a69a2cb38bf 100644 --- a/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts +++ b/packages/web-components/src/components/content-group-horizontal/content-group-horizontal.ts @@ -9,7 +9,7 @@ import { css, customElement, html } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import DDSContentGroupSimple from '../content-group-simple/content-group-simple'; +import DDSContentGroup from '../content-group/content-group'; import '../horizontal-rule/horizontal-rule'; import styles from './content-group-horizontal.scss'; @@ -21,7 +21,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; * @element dds-content-group-horizontal */ @customElement(`${ddsPrefix}-content-group-horizontal`) -class DDSContentGroupHorizontal extends DDSContentGroupSimple { +class DDSContentGroupHorizontal extends DDSContentGroup { render() { return html` ${super.render()} diff --git a/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts b/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts index 4cb7bcee76d..9adcf8e9d3b 100644 --- a/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts +++ b/packages/web-components/src/components/content-group-pictograms/content-group-pictograms.ts @@ -9,7 +9,7 @@ import { customElement, css } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; -import DDSContentGroupSimple from '../content-group-simple/content-group-simple'; +import DDSContentGroup from '../content-group/content-group'; import styles from './content-group-pictograms.scss'; const { stablePrefix: ddsPrefix } = ddsSettings; @@ -21,7 +21,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-group-pictograms`) -class DDSContentGroupPictograms extends DDSContentGroupSimple { +class DDSContentGroupPictograms extends DDSContentGroup { static get stableSelector() { return `${ddsPrefix}--content-group-pictograms`; } diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.ts b/packages/web-components/src/components/content-group-simple/content-group-simple.ts index 4a7234cefec..12ad7aec21b 100644 --- a/packages/web-components/src/components/content-group-simple/content-group-simple.ts +++ b/packages/web-components/src/components/content-group-simple/content-group-simple.ts @@ -7,15 +7,12 @@ * LICENSE file in the root directory of this source tree. */ -import { Part } from 'lit-html'; -import { html, css, customElement, TemplateResult } from 'lit-element'; -import settings from 'carbon-components/es/globals/js/settings.js'; +import { css, customElement } from 'lit-element'; import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js'; import StableSelectorMixin from '../../globals/mixins/stable-selector'; import DDSContentGroup from '../content-group/content-group'; import styles from './content-group-simple.scss'; -const { prefix } = settings; const { stablePrefix: ddsPrefix } = ddsSettings; /** @@ -25,50 +22,6 @@ const { stablePrefix: ddsPrefix } = ddsSettings; */ @customElement(`${ddsPrefix}-content-group-simple`) class DDSContentGroupSimple extends StableSelectorMixin(DDSContentGroup) { - /** - * The CSS class list for the container (grid) node. - */ - // eslint-disable-next-line class-methods-use-this - protected _getContainerClasses(): string | ((part: Part) => void) { - return `${prefix}--content-layout`; - } - - /** - * @returns The non-header, non-complementary contents. - */ - protected _renderBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasCopy: hasCopy, _hasMedia: hasMedia } = this; - return html` -
- ${super._renderBody()} -
- `; - } - - protected _renderInnerBody(): TemplateResult | string | void { - return html` - ${this._renderMedia()}${this._renderContent()} - `; - } - - protected _renderFooter(): TemplateResult | string | void { - const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; - // TODO: See if we can remove the surrounding `
` - return html` -
- -
- `; - } - - render() { - return html` -
- ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()} -
- `; - } - static get stableSelector() { return `${ddsPrefix}--content-group-simple`; } diff --git a/packages/web-components/src/components/content-group/content-group.ts b/packages/web-components/src/components/content-group/content-group.ts index 94a8bf927f0..520bd933129 100644 --- a/packages/web-components/src/components/content-group/content-group.ts +++ b/packages/web-components/src/components/content-group/content-group.ts @@ -7,39 +7,15 @@ * LICENSE file in the root directory of this source tree. */ -import { html, TemplateResult } from 'lit-element'; -import settings from 'carbon-components/es/globals/js/settings.js'; import DDSContentBlock from '../content-block/content-block'; import styles from './content-group.scss'; -const { prefix } = settings; - /** * Content group. * * @abstract */ class DDSContentGroup extends DDSContentBlock { - protected _renderFooter(): TemplateResult | string | void { - const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this; - return html` -
-
- -
-
- `; - } - - protected _renderInnerBody(): TemplateResult | string | void { - const { _hasContent: hasContent, _hasMedia: hasMedia, _handleSlotChange: handleSlotChange } = this; - return html` -
- -
- `; - } - static styles = styles; // `styles` here is a `CSSResult` generated by custom WebPack loader }