fix(feature-card): ensure aligned to grid line

packages/styles/scss/components/feature-card/_feature-card.scss

@@ -25,8 +25,6 @@
 
   @include carbon--breakpoint('md') {
     flex-direction: row;
-
-    @include hang;
   }
 
   &:focus {
@@ -40,21 +38,38 @@
 }
 
 @mixin feature-card {
-  .#{$prefix}--feature-card,
-  :host(#{$dds-prefix}-feature-card),
-  :host(#{$dds-prefix}-feature-cta) {
-    position: relative;
-
+  .#{$prefix}--feature-card {
     @include carbon--breakpoint-down('md') {
-      padding-top: aspect-ratio(1, 1);
-
       @include carbon--make-row;
     }
 
+    @include carbon--breakpoint('md') {
+      .#{$prefix}--card {
+        @include hang;
+      }
+    }
+
     @include carbon--breakpoint('lg') {
       margin-right: $spacing-05;
       margin-left: $spacing-05;
     }
+  }
+
+  :host(#{$dds-prefix}-feature-card),
+  :host(#{$dds-prefix}-feature-cta) {
+    @include carbon--breakpoint-down('md') {
+      display: flex;
+    }
+  }
+
+  .#{$prefix}--feature-card,
+  :host(#{$dds-prefix}-feature-card),
+  :host(#{$dds-prefix}-feature-cta) {
+    position: relative;
+
+    @include carbon--breakpoint-down('md') {
+      padding-top: aspect-ratio(1, 1);
+    }
 
     .#{$prefix}--feature-card__card .#{$prefix}--card__footer {
       flex-direction: row-reverse;
@@ -93,6 +108,7 @@
 
       @include carbon--breakpoint('md') {
         width: 50%;
+        height: 100%;
       }
     }
   }

packages/web-components/.storybook/_simple-grid.scss

@@ -0,0 +1,74 @@
+/**
+ * @license
+ *
+ * Copyright IBM Corp. 2020
+ *
+ * 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-components/scss/globals/scss/vendor/@carbon/elements/scss/layout/breakpoint';
+
+.dds-ce-demo-devenv--simple-grid {
+  display: grid;
+  grid-template-columns: repeat(4, 1fr);
+
+  @include carbon--breakpoint('md') {
+    grid-template-columns: repeat(8, 1fr);
+    padding-left: 1rem;
+    padding-right: 1rem;
+  }
+
+  @include carbon--breakpoint('lg') {
+    grid-template-columns: repeat(16, 1fr);
+  }
+
+  @include carbon--breakpoint('max') {
+    padding-left: 1.5rem;
+    padding-right: 1.5rem;
+    margin-left: calc((100% - 99rem) / 2);
+    margin-right: calc((100% - 99rem) / 2);
+  }
+}
+
+.dds-ce-demo-devenv--simple-grid-gutter {
+  column-gap: 2rem;
+  padding-left: 1rem;
+  padding-right: 1rem;
+
+  @include carbon--breakpoint('md') {
+    padding-left: 2rem;
+    padding-right: 2rem;
+  }
+
+  @include carbon--breakpoint('max') {
+    padding-left: 2.5rem;
+    padding-right: 2.5rem;
+  }
+}
+
+.dds-ce-demo-devenv--simple-grid-gutter--narrow {
+  column-gap: 1rem;
+  padding-right: 1rem;
+
+  @include carbon--breakpoint('md') {
+    padding-right: 2rem;
+  }
+
+  @include carbon--breakpoint('max') {
+    padding-right: 2.5rem;
+  }
+}
+
+.dds-ce-demo-devenv--simple-grid-gutter--condensed {
+  column-gap: 0.0625rem;
+  padding-right: 0.125rem;
+
+  @include carbon--breakpoint('md') {
+    padding-right: 1.125rem;
+  }
+
+  @include carbon--breakpoint('max') {
+    padding-right: 1.625rem;
+  }
+}

packages/web-components/.storybook/container.scss

@@ -13,6 +13,7 @@
 @import 'carbon-components/scss/globals/scss/vendor/@carbon/elements/scss/themes/mixins';
 @import '@carbon/ibmdotcom-styles/scss/components/masthead/masthead-megamenu-scroll';
 @import '@carbon/ibmdotcom-styles/scss/themes/expressive/index';
+@import './simple-grid';
 
 :root {
   @include carbon--theme($carbon--theme--white, true);
@@ -73,6 +74,32 @@ body {
   position: relative;
 }
 
+.dds-ce-demo-devenv--simple-grid--callout,
+.dds-ce-demo-devenv--simple-grid--card,
+.dds-ce-demo-devenv--simple-grid--card-group {
+  > * {
+    grid-column: 1 / span 4;
+
+    @include carbon--breakpoint('md') {
+      grid-column: 1 / span 8;
+    }
+  }
+}
+
+@include carbon--breakpoint('lg') {
+  .dds-ce-demo-devenv--simple-grid--callout > * {
+    grid-column: 5 / span 12;
+  }
+
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 5 / span 8;
+  }
+
+  .dds-ce-demo-devenv--simple-grid--card-group > * {
+    grid-column: 3 / span 12;
+  }
+}
+
 .dds-ce-demo-devenv--container--has-card-group,
 .dds-ce-demo-devenv--container--has-card-group-standalone {
   padding: 0;

packages/web-components/src/components/card-link/__stories__/card-link.stories.ts

@@ -32,12 +32,8 @@ export default {
   title: 'Components/Card Link',
   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--col-md-4 bx--col-lg-3 bx--offset-lg-4">
-            ${story()}
-          </div>
-        </div>
+      <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--card">
+        ${story()}
       </div>
     `,
   ],

packages/web-components/src/components/card/__stories__/card.stories.ts

@@ -49,12 +49,8 @@ export default {
   title: 'Components/Card',
   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--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
-            ${story()}
-          </div>
-        </div>
+      <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--card">
+        ${story()}
       </div>
     `,
   ],

packages/web-components/src/components/cta/__stories__/cta.stories.ts

@@ -106,8 +106,7 @@ export const Card = ({ parameters }) => {
 
 Card.story = {
   parameters: {
-    colExtraClasses: 'bx--col-md-4 bx--col-lg-4',
-    useGridForCard: true,
+    hasGrid: true,
     knobs: {
       CardCTA: ({ groupId }) => Text.story.parameters.knobs.TextCTA({ groupId }),
       CardCTAFooter: ({ groupId }) => {
@@ -154,8 +153,7 @@ export const Feature = ({ parameters }) => {
 
 Feature.story = {
   parameters: {
-    colExtraClasses: 'bx--col-lg-8 bx--offset-lg-4',
-    useGridForCard: true,
+    hasGrid: true,
     knobs: {
       FeatureCTA: ({ groupId }) => Card.story.parameters.knobs.CardCTA({ groupId }),
       FeatureCTAFooter: ({ groupId }) => Card.story.parameters.knobs.CardCTAFooter({ groupId }),
@@ -167,24 +165,19 @@ export default {
   title: 'Components/CTA',
   decorators: [
     (story, { parameters }) => {
-      const { colExtraClasses = 'bx--col-lg-8', useGridForCard } = parameters ?? {};
+      const { hasGrid } = parameters;
       const classes = classMap({
-        'bx--grid': true,
-        'dds-ce-demo-devenv--grid--stretch': useGridForCard,
+        'dds-ce-demo-devenv--simple-grid': hasGrid,
+        'dds-ce-demo-devenv--simple-grid--card': hasGrid,
       });
       return html`
         <dds-video-cta-container class="${classes}">
-          <div class="bx--row dds-ce-demo-devenv--grid-row">
-            <div class="bx--col-sm-4 ${colExtraClasses}">
-              ${story()}
-            </div>
-          </div>
+          ${story()}
         </dds-video-cta-container>
       `;
     },
   ],
   parameters: {
     ...readme.parameters,
-    hasGrid: true,
   },
 };

packages/web-components/src/components/feature-card/__stories__/feature-card.stories.ts

@@ -32,12 +32,8 @@ export default {
   title: 'Components/Feature Card',
   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--col-lg-8 bx--offset-lg-4">
-            ${story()}
-          </div>
-        </div>
+      <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--card">
+        ${story()}
       </div>
     `,
   ],

packages/web-components/src/components/feature-card/feature-card.ts

@@ -29,7 +29,7 @@ class DDSFeatureCard extends DDSCard {
     const { _linkNode: linkNode } = this;
     if (linkNode) {
       linkNode.classList.remove(`${prefix}--link`);
-      linkNode.classList.add(`${prefix}--feature-card`);
+      linkNode.classList.add(`${prefix}--feature-card__card`);
     }
   }
 

packages/web-components/tests/snapshots/dds-feature-card-block-large.md

@@ -44,7 +44,7 @@
 ```
 <div class="bx--feature-card-block-large__container">
   <a
-    class="bx--card bx--card--link bx--feature-card-block-large bx--tile bx--tile--clickable"
+    class="bx--card bx--card--link bx--feature-card-block-large bx--feature-card__card bx--tile bx--tile--clickable"
     href="https://example.com"
     id="link"
     part="link"

packages/web-components/tests/snapshots/dds-feature-card-block-medium.md

@@ -54,7 +54,7 @@
   data-autoid="dds--feature-card"
 >
   <a
-    class="bx--card bx--card--link bx--feature-card bx--tile bx--tile--clickable"
+    class="bx--card bx--card--link bx--feature-card__card bx--tile bx--tile--clickable"
     href="https://example.com"
     id="link"
     part="link"

packages/web-components/tests/snapshots/dds-feature-card.md

@@ -41,7 +41,7 @@
 
 ```
 <a
-  class="bx--card bx--card--link bx--feature-card bx--tile bx--tile--clickable"
+  class="bx--card bx--card--link bx--feature-card__card bx--tile bx--tile--clickable"
   href="https://example.com"
   id="link"
   part="link"