refactor(content-block-headlines): use CSS grid for layout (carbon-de…

…sign-system#5078) Use CSS grid for layout for `<dds-content-block-headlines>` to ensure correct Carbon grid alignment and simplify the markup. Refs carbon-design-system#4960. Co-authored-by: kennylam <[email protected]>
IgnacioBecerra · Feb 22, 2021 · 62c1fd0 · 62c1fd0
1 parent bdf1677
commit 62c1fd0
Show file tree

Hide file tree

Showing 8 changed files with 109 additions and 43 deletions.
diff --git a/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss b/packages/styles/scss/components/content-block-headlines/_content-block-headlines.scss
@@ -1,5 +1,5 @@
 /**
-* Copyright IBM Corp. 2016, 2020
+* Copyright IBM Corp. 2016, 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.
@@ -30,7 +30,7 @@
       }
     }
 
-    :host(#{$dds-prefix}-content-block__copy),
+    ::slotted(#{$dds-prefix}-content-block-copy),
     .#{$prefix}--content-block__copy {
       margin-bottom: 6rem;
       p {
@@ -112,6 +112,27 @@
       padding-bottom: $carbon--layout-05;
     }
   }
+
+  .#{$prefix}--content-layout--with-headlines {
+    grid-template:
+      'heading' auto
+      'body' auto
+      'footer' auto / 1fr;
+
+    @include carbon--breakpoint('md') {
+      grid-template:
+        'heading heading' auto
+        'body body' auto
+        'footer .' auto / 1fr 1fr;
+    }
+
+    @include carbon--breakpoint('lg') {
+      grid-template:
+        'heading heading .' auto
+        'body body .' auto
+        'footer . .' auto / 1fr 1fr 1fr;
+    }
+  }
 }
 
 @include exports('content-block-headlines') {

diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss
@@ -64,6 +64,13 @@
         'footer .' auto / 1fr 1fr;
     }
 
+    &.#{$prefix}--layout--border {
+      margin-left: 0;
+      margin-right: 0;
+      padding-left: 0;
+      padding-right: 0;
+    }
+
     // Most slotted contents have margins aligning to Carbon grid gutters.
     // Note: Child contents define their margin by their own
     ::slotted([slot]) {

diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
@@ -79,6 +79,7 @@ body {
 .dds-ce-demo-devenv--simple-grid--card-group,
 .dds-ce-demo-devenv--simple-grid--content-layout,
 .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary,
+.dds-ce-demo-devenv--simple-grid--content-block-headlines,
 .dds-ce-demo-devenv--simple-grid--content-section,
 .dds-ce-demo-devenv--simple-grid--content-block-cards {
   > * {
@@ -125,6 +126,7 @@ body {
   }
 
   .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary,
+  .dds-ce-demo-devenv--simple-grid--content-block-headlines,
   .dds-ce-demo-devenv--simple-grid--content-block-cards {
     > * {
       grid-column: 5 / span 12;

diff --git a/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html b/packages/web-components/examples/codesandbox/components/content-block-headlines/index.html
@@ -22,7 +22,7 @@
   <body>
     <div class="bx--grid">
       <div class="bx--row">
-        <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4">
+        <div class="bx--col-sm-4 bx-col-lg-12 bx--offset-lg-4 bx--no-gutter">
           <dds-content-block-headlines>
             <dds-content-block-heading>Curabitur malesuada varius mi eu posuere</dds-content-block-heading>
             <dds-content-item-copy>Lorem ipsum *dolor* sit amet</dds-content-item-copy>

diff --git a/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts b/...nts/src/components/content-block-headlines/__stories__/content-block-headlines.stories.ts
@@ -77,12 +77,8 @@ export default !DDS_CONTENT_BLOCK_HEADLINES
         },
         decorators: [
           story => html`
-            <div class="bx--grid dds-ce-demo-devenv--grid--stretch">
-              <div class="bx--row dds-ce-demo-devenv--grid-row">
-                <div class="bx--col-sm-4 bx--offset-lg-4 bx--col-lg-12">
-                  ${story()}
-                </div>
-              </div>
+            <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--content-block-headlines">
+              ${story()}
             </div>
           `,
         ],

diff --git a/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss b/packages/web-components/src/components/content-block-headlines/content-block-headlines.scss
@@ -1,8 +1,12 @@
 //
-// 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 '@carbon/ibmdotcom-styles/scss/components/content-block-headlines/content-block-headlines';
+
+:host(#{$dds-prefix}-content-block-headlines-item) {
+  display: block;
+}
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
@@ -7,6 +7,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 
+import { Part } from 'lit-html';
 import { css, customElement, html, TemplateResult } from 'lit-element';
 import settings from 'carbon-components/es/globals/js/settings';
 import ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
@@ -24,17 +25,56 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-content-block-headlines`)
 class DDSContentBlockHeadlines extends StableSelectorMixin(DDSContentBlock) {
+  /**
+   * 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 ${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`
-      <div ?hidden="${!hasContent}" class="${prefix}--content-block__children">
-        <div class="${prefix}--content-block-headlines__container">
-          <div class="${prefix}--content-block-headlines__row">
-            <div class="${prefix}--content-block-headlines__item-container">
-              <slot @slotchange="${handleSlotChange}"></slot>
-            </div>
-          </div>
-        </div>
+      <div ?hidden="${!hasContent}" class="${prefix}--content-block-headlines__item-container">
+        <slot @slotchange="${handleSlotChange}"></slot>
+      </div>
+    `;
+  }
+
+  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>
     `;
   }

diff --git a/packages/web-components/tests/snapshots/dds-content-block-headlines.md b/packages/web-components/tests/snapshots/dds-content-block-headlines.md
@@ -5,34 +5,30 @@
 ####   `should render with minimum attributes`
 
 ```
-<slot name="heading">
-</slot>
-<slot name="copy">
-</slot>
-<div
-  class="bx--content-block__children"
-  hidden=""
->
-  <div class="bx--content-block-headlines__container">
-    <div class="bx--content-block-headlines__row">
-      <div class="bx--content-block-headlines__item-container">
-        <slot>
-        </slot>
-      </div>
-    </div>
-  </div>
-</div>
-<div
-  class="bx--content-block__cta-row"
-  hidden=""
->
-  <div class="bx--content-block__cta bx--content-block__cta-col">
-    <slot name="footer">
+<div class="bx--content-layout bx--content-layout--with-headlines bx--layout--border">
+  <slot name="heading">
+  </slot>
+  <div
+    class="bx--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
     </slot>
+    <div
+      class="bx--content-block-headlines__item-container"
+      hidden=""
+    >
+      <slot>
+      </slot>
+    </div>
+    <div hidden="">
+      <slot name="footer">
+      </slot>
+    </div>
   </div>
+  <slot name="complementary">
+  </slot>
 </div>
-<slot name="complementary">
-</slot>
 
 ```