refactor(content-group-simple): use CSS grid for layout (carbon-desig…

…n-system#5038) ### Related Ticket(s) Refs carbon-design-system#4967. ### Description Use CSS grid for layout for `<dds-content-group-simple>` to ensure correct Carbon grid alignment and simplify the markup. ### Changelog **Changed** - Change to use CSS grid for layout for `<dds-content-group-simple>`.
IgnacioBecerra · Feb 22, 2021 · 747f948 · 747f948
1 parent 1d19caa
commit 747f948
Show file tree

Hide file tree

Showing 8 changed files with 138 additions and 110 deletions.
diff --git a/packages/styles/scss/internal/content-block/_content-block.scss b/packages/styles/scss/internal/content-block/_content-block.scss
@@ -63,6 +63,54 @@
         'body body' auto
         'footer .' auto / 1fr 1fr;
     }
+
+    // Most slotted contents have margins aligning to Carbon grid gutters.
+    // Note: Child contents define their margin by their own
+    ::slotted([slot]) {
+      margin-left: $carbon--spacing-05;
+      margin-right: $carbon--spacing-05;
+    }
+
+    // Cards and link lists are the exceptions of above
+    // TODO: Remove negative margin adjustment from `<dds-link-list-item*>` and add `<dds-link-list>` here
+    ::slotted(#{$dds-prefix}-card[slot]),
+    ::slotted(#{$dds-prefix}-card-cta[slot]) {
+      margin-left: 0;
+      margin-right: 0;
+    }
+
+    ::slotted([slot='complementary']) {
+      grid-area: complementary;
+      margin-top: $layout-05;
+      margin-bottom: $layout-05;
+
+      @include carbon--breakpoint('lg') {
+        margin-top: 0;
+        margin-bottom: 0;
+      }
+    }
+
+    ::slotted([slot='footer']) {
+      margin-top: $carbon--layout-04;
+
+      @include carbon--breakpoint('md') {
+        width: 50%;
+        margin-top: $carbon--layout-05;
+      }
+    }
+
+    ::slotted([slot='heading']) {
+      grid-area: heading;
+    }
+
+    ::slotted([slot='media']) {
+      margin-top: $carbon--spacing-07;
+    }
+
+    ::slotted(#{$dds-prefix}-video-player-container) {
+      // Ensures the margin gets effective
+      display: block;
+    }
   }
 
   .#{$prefix}--content-layout--with-complementary {

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

diff --git a/packages/web-components/src/components/content-block-media/content-block-media-content.ts b/packages/web-components/src/components/content-block-media/content-block-media-content.ts
@@ -12,7 +12,7 @@ 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';
 import styles from './content-block-media.scss';
-import DDSContentGroupSimple from '../content-group-simple/content-group-simple';
+import DDSContentGroup from '../content-group/content-group';
 
 const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
@@ -23,7 +23,7 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  * @element dds-content-block-media-content
  */
 @customElement(`${ddsPrefix}-content-block-media-content`)
-class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroupSimple) {
+class DDSContentBlockMediaContent extends StableSelectorMixin(DDSContentGroup) {
   protected _renderInnerBody(): TemplateResult | string | void {
     const { _hasContent: hasContent, _hasMedia: hasMedia } = this;
     // Moves media content out of `<div class="bx--content-block__children">`

diff --git a/packages/web-components/src/components/content-block/content-block.scss b/packages/web-components/src/components/content-block/content-block.scss
@@ -45,62 +45,6 @@
   }
 }
 
-.#{$prefix}--content-layout {
-  // Most slotted contents have margins aligning to Carbon grid gutters.
-  // Note: Child contents define their margin by their own
-  ::slotted([slot]) {
-    margin-left: $carbon--spacing-05;
-    margin-right: $carbon--spacing-05;
-  }
-
-  // Cards and link lists are the exceptions of above
-  // TODO: Remove negative margin adjustment from `<dds-link-list-item*>` and add `<dds-link-list>` here
-  ::slotted(#{$dds-prefix}-card[slot]),
-  ::slotted(#{$dds-prefix}-card-cta[slot]) {
-    margin-left: 0;
-    margin-right: 0;
-  }
-
-  ::slotted([slot='complementary']) {
-    grid-area: complementary;
-    margin-top: $layout-05;
-    margin-bottom: $layout-05;
-
-    @include carbon--breakpoint('lg') {
-      margin-top: 0;
-      margin-bottom: 0;
-    }
-  }
-
-  ::slotted([slot='footer']) {
-    margin-top: $carbon--layout-04;
-
-    @include carbon--breakpoint('md') {
-      width: 50%;
-      margin-top: $carbon--layout-05;
-    }
-  }
-
-  ::slotted([slot='heading']) {
-    grid-area: heading;
-  }
-
-  ::slotted([slot='media']) {
-    margin-top: $carbon--spacing-07;
-  }
-
-  ::slotted(#{$dds-prefix}-video-player-container) {
-    // Ensures the margin gets effective
-    display: block;
-  }
-}
-
-.#{$prefix}--content-layout--card-group ::slotted([slot='footer']) {
-  @include carbon--breakpoint('lg') {
-    width: calc(100% / 3);
-  }
-}
-
 // TODO: Apply `dds--make-col(2, 3)` to React version, too, so we can merge the style to React version
 .#{$dds-prefix}-ce--content-block__col {
   @include dds--make-col(2, 3);

diff --git a/...omponents/src/components/content-group-simple/__stories__/content-group-simple.stories.ts b/...omponents/src/components/content-group-simple/__stories__/content-group-simple.stories.ts
@@ -179,12 +179,8 @@ export default {
   title: 'Components/Content group simple',
   decorators: [
     story => html`
-      <dds-video-cta-container class="bx--grid dds-ce-demo-devenv--grid--stretch">
-        <div class="bx--row dds-ce-demo-devenv--grid-row">
-          <div class="bx--col-lg-8 bx--col-sm-4 bx--offset-lg-4">
-            ${story()}
-          </div>
-        </div>
+      <dds-video-cta-container class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--content-layout">
+        ${story()}
       </dds-video-cta-container>
     `,
   ],

diff --git a/packages/web-components/src/components/content-group-simple/content-group-simple.scss b/packages/web-components/src/components/content-group-simple/content-group-simple.scss
@@ -1,5 +1,5 @@
 //
-// 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.
@@ -8,8 +8,15 @@
 @import 'carbon-components/scss/globals/scss/vars';
 @import '@carbon/ibmdotcom-styles/scss/globals/vars';
 @import '../../globals/scss/box-sizing';
+@import '@carbon/ibmdotcom-styles/scss/internal/content-block/content-block';
 @import '@carbon/ibmdotcom-styles/scss/components/content-group-simple/content-group-simple';
 
 :host(#{$dds-prefix}-content-group-simple) {
   display: block;
+
+  // TODO: Define the padding on `<dds-content-item>` by default
+  ::slotted(#{$dds-prefix}-content-item) {
+    margin-left: $spacing-05;
+    margin-right: $spacing-05;
+  }
 }
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
@@ -7,6 +7,7 @@
  * 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 ddsSettings from '@carbon/ibmdotcom-utilities/es/utilities/settings/settings.js';
@@ -24,11 +25,46 @@ 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`
+      <div ?hidden="${!hasContent && !hasCopy && !hasMedia}" class="${prefix}--content-layout__body">
+        ${super._renderBody()}
+      </div>
+    `;
+  }
+
   protected _renderInnerBody(): TemplateResult | string | void {
-    const { _hasContent: hasContent, _hasMedia: hasMedia } = this;
     return html`
-      <div ?hidden="${!hasContent && !hasMedia}" class="${prefix}--content-group__children ${prefix}--content-group__col">
-        ${this._renderMedia()}${this._renderContent()}
+      ${this._renderMedia()}${this._renderContent()}
+    `;
+  }
+
+  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-group-simple.md b/packages/web-components/tests/snapshots/dds-content-group-simple.md
@@ -5,61 +5,58 @@
 ####   `should render with minimum attributes`
 
 ```
-<slot name="heading">
-</slot>
-<slot name="copy">
-</slot>
-<div
-  class="bx--content-group__children bx--content-group__col"
-  hidden=""
->
-  <div hidden="">
-    <slot name="media">
-    </slot>
-  </div>
-  <slot>
+<div class="bx--content-layout">
+  <slot name="heading">
   </slot>
-</div>
-<div
-  class="bx--content-group__cta-row"
-  hidden=""
->
-  <div class="bx--content-group__cta bx--content-group__cta-col">
-    <slot name="footer">
+  <div
+    class="bx--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
     </slot>
+    <div hidden="">
+      <slot name="media">
+      </slot>
+    </div>
+    <slot>
+    </slot>
+    <div hidden="">
+      <slot name="footer">
+      </slot>
+    </div>
   </div>
+  <slot name="complementary">
+  </slot>
 </div>
-<slot name="complementary">
-</slot>
 
 ```
 
 ####   `should render with various attributes`
 
 ```
-<slot name="heading">
-</slot>
-<slot name="copy">
-</slot>
-<div
-  class="bx--content-group__children bx--content-group__col"
-  hidden=""
->
-  <div hidden="">
-    <slot name="media">
-    </slot>
-  </div>
-  <slot>
+<div class="bx--content-layout">
+  <slot name="heading">
   </slot>
-</div>
-<div class="bx--content-group__cta-row">
-  <div class="bx--content-group__cta bx--content-group__cta-col">
-    <slot name="footer">
+  <div
+    class="bx--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
     </slot>
+    <div hidden="">
+      <slot name="media">
+      </slot>
+    </div>
+    <slot>
+    </slot>
+    <div>
+      <slot name="footer">
+      </slot>
+    </div>
   </div>
+  <slot name="complementary">
+  </slot>
 </div>
-<slot name="complementary">
-</slot>
 
 ```