fix(content-block-cards): fix margin in smallest breakpoint (#5014)

### Related Ticket(s) Refs #4959. ### Description Fixes wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. Also migrates the internal layout to CSS grid to eliminate the negative margin adjustment of heading vs. cards. ### Changelog **Changed** - Change to fix wrong margin in `<dds-content-block-cards>` in its smallest breakpoint. - Change to migrate the internal layout to CSS grid.
carbon-design-system · Jan 30, 2021 · 0016be2 · 0016be2
1 parent c211f70
commit 0016be2
Show file tree

Hide file tree

Showing 7 changed files with 97 additions and 60 deletions.
diff --git a/packages/web-components/.storybook/container.scss b/packages/web-components/.storybook/container.scss
@@ -78,7 +78,8 @@ body {
 .dds-ce-demo-devenv--simple-grid--card,
 .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-layout--with-complementary,
+.dds-ce-demo-devenv--simple-grid--content-block-cards {
   > * {
     grid-column: 1 / span 4;
   }
@@ -117,8 +118,11 @@ body {
     grid-column: 3 / span 12;
   }
 
-  .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary > * {
-    grid-column: 5 / span 12;
+  .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary,
+  .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-cards/index.html b/packages/web-components/examples/codesandbox/components/content-block-cards/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-cards>
             <dds-content-block-heading>Lorem ipsum dolor sit amet</dds-content-block-heading>
             <dds-card-group>

diff --git a/...-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts b/...-components/src/components/content-block-cards/__stories__/content-block-cards.stories.ts
@@ -126,14 +126,14 @@ export default {
   title: 'Components/Content Block Cards',
   decorators: [
     story => html`
-      <dds-video-cta-container>
+      <dds-video-cta-container class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--content-block-cards">
         ${story()}
       </dds-video-cta-container>
     `,
   ],
   parameters: {
     ...readme.parameters,
-    hasCardGroup: true,
+    hasGrid: true,
     hasVerticalSpacingInComponent: true,
     knobs: {
       ContentBlockCards: () => ({

diff --git a/packages/web-components/src/components/content-block-cards/content-block-cards.scss b/packages/web-components/src/components/content-block-cards/content-block-cards.scss
@@ -1,18 +1,8 @@
 //
-// 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-cards/content-block-cards';
-
-:host(#{$dds-prefix}-content-block-cards) {
-  padding-left: calc(#{$carbon--grid-gutter} / 2);
-  padding-right: calc(#{$carbon--grid-gutter} / 2);
-
-  .#{$prefix}--content-block__children {
-    margin-left: calc(-1 * #{$carbon--grid-gutter} / 2);
-    margin-right: calc(-1 * #{$carbon--grid-gutter} / 2);
-  }
-}
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
@@ -7,12 +7,15 @@
  * LICENSE file in the root directory of this source tree.
  */
 
-import { css, customElement } from 'lit-element';
+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';
 import StableSelectorMixin from '../../globals/mixins/stable-selector';
 import DDSContentBlock from '../content-block/content-block';
 import styles from './content-block-cards.scss';
 
+const { prefix } = settings;
 const { stablePrefix: ddsPrefix } = ddsSettings;
 
 /**
@@ -22,6 +25,50 @@ const { stablePrefix: ddsPrefix } = ddsSettings;
  */
 @customElement(`${ddsPrefix}-content-block-cards`)
 class DDSContentBlockCards 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--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/content-block.scss b/packages/web-components/src/components/content-block/content-block.scss
@@ -95,6 +95,12 @@
   }
 }
 
+.#{$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/packages/web-components/tests/snapshots/dds-content-block-cards.md b/packages/web-components/tests/snapshots/dds-content-block-cards.md
@@ -5,64 +5,54 @@
 ####   `should render with minimum attributes`
 
 ```
-<slot name="heading">
-</slot>
-<slot name="copy">
-</slot>
-<div
-  class="bx--content-block__children"
-  hidden=""
->
-  <slot>
+<div class="bx--content-layout bx--content-layout--card-group">
+  <slot name="heading">
   </slot>
-  <div hidden="">
-    <slot name="media">
+  <div
+    class="bx--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
     </slot>
-  </div>
-</div>
-<div
-  class="bx--content-block__cta-row"
-  hidden=""
->
-  <div class="bx--content-block__cta bx--content-block__cta-col">
-    <slot name="footer">
+    <slot>
     </slot>
+    <div hidden="">
+      <slot name="media">
+      </slot>
+    </div>
+    <div hidden="">
+      <slot name="footer">
+      </slot>
+    </div>
   </div>
 </div>
-<slot name="complementary">
-</slot>
 
 ```
 
 ####   `should render with various attributes`
 
 ```
-<slot name="heading">
-</slot>
-<slot name="copy">
-</slot>
-<div
-  class="bx--content-block__children"
-  hidden=""
->
-  <slot>
+<div class="bx--content-layout bx--content-layout--card-group">
+  <slot name="heading">
   </slot>
-  <div hidden="">
-    <slot name="media">
+  <div
+    class="bx--content-layout__body"
+    hidden=""
+  >
+    <slot name="copy">
     </slot>
-  </div>
-</div>
-<div
-  class="bx--content-block__cta-row"
-  hidden=""
->
-  <div class="bx--content-block__cta bx--content-block__cta-col">
-    <slot name="footer">
+    <slot>
     </slot>
+    <div hidden="">
+      <slot name="media">
+      </slot>
+    </div>
+    <div hidden="">
+      <slot name="footer">
+      </slot>
+    </div>
   </div>
 </div>
-<slot name="complementary">
-</slot>
 
 ```