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 carbon-design-system#4174.
asudoh · Mar 13, 2021 · 679cc8f · 679cc8f
1 parent 84ef0df
commit 679cc8f
Show file tree

Hide file tree

Showing 13 changed files with 48 additions and 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
@@ -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
@@ -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`
-      <div ?hidden="${!hasContent && !hasCopy && !hasMedia}" class="${prefix}--content-layout__body">
-        ${super._renderBody()}
-      </div>
-    `;
-  }
-
-  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 `<div>`
-    return html`
-      <div ?hidden="${!hasFooter}">
-        <slot name="footer" @slotchange="${handleSlotChange}"></slot>
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="${this._getContainerClasses()}">
-        ${this._renderHeading()}${this._renderBody()}
-      </div>
-    `;
-  }
-
   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
@@ -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`
-      <div ?hidden="${!hasContent && !hasCopy && !hasMedia}" class="${prefix}--content-layout__body">
-        ${super._renderBody()}
-      </div>
-    `;
-  }
-
   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`
-      <slot @slotchange="${handleSlotChange}"></slot>
-    `;
-  }
-
-  protected _renderFooter(): TemplateResult | string | void {
-    const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this;
-    // TODO: See if we can remove the surrounding `<div>`
-    return html`
-      <div ?hidden="${!hasFooter}">
-        <slot name="footer" @slotchange="${handleSlotChange}"></slot>
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="${this._getContainerClasses()}">
-        ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()}
-      </div>
-    `;
-  }
-
   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
@@ -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
@@ -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
@@ -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
@@ -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`
-      <div ?hidden="${!hasContent && !hasCopy && !hasMedia}" class="${prefix}--content-layout__body">
-        ${super._renderBody()}
-      </div>
-    `;
-  }
-
-  /**
-   * @returns The media content.
-   */
-  protected _renderMedia(): TemplateResult | string | void {
-    const { _handleSlotChange: handleSlotChange } = this;
-    return html`
-      <slot name="media" @slotchange="${handleSlotChange}"></slot>
-    `;
-  }
-
-  protected _renderInnerBody() {
-    return html`
-      ${this._renderContent()}${this._renderMedia()}
-    `;
-  }
-
-  protected _renderContent(): TemplateResult | string | void {
-    const { _handleSlotChange: handleSlotChange } = this;
-    return html`
-      <slot @slotchange="${handleSlotChange}"></slot>
-    `;
-  }
-
-  protected _renderFooter(): TemplateResult | string | void {
-    const { _hasFooter: hasFooter, _handleSlotChange: handleSlotChange } = this;
-    // TODO: See if we can remove the surrounding `<div>`
-    return html`
-      <div ?hidden="${!hasFooter}">
-        <slot name="footer" @slotchange="${handleSlotChange}"></slot>
-      </div>
-    `;
-  }
-
-  render() {
-    return html`
-      <div class="${this._getContainerClasses()}">
-        ${this._renderHeading()}${this._renderBody()}${this._renderComplementary()}
-      </div>
-    `;
-  }
-
   static get stableSelector() {
     return `${ddsPrefix}--content-block-simple`;
   }