fix(card): adjust storybook to align left (carbon-design-system#5009)

### Related Ticket(s)

carbon-design-system#4399 

### Description

Updated Card and Card Link to align left and have top padding of 1 rem, so that react and web components are aligned

### Changelog

**Changed**

- storybook change container styles 

<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->


<!-- React and Web Component deploy previews are enabled by default. -->
<!-- To enable additional available deploy previews, apply the following -->
<!-- labels for the corresponding package: -->
<!-- *** "package: services": Services -->
<!-- *** "package: utilities": Utilities -->
<!-- *** "package: styles": Carbon Expressive -->
<!-- *** "RTL": React / Web Components (RTL) -->
<!-- *** "feature flag": React / Web Components (experimental) -->

packages/react/.storybook/_container.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.
@@ -90,3 +90,7 @@ div[role='main'] {
     list-style: decimal;
   }
 }
+
+.bx--grid--card {
+  padding-top: 1rem;
+}

packages/react/src/__tests__/__snapshots__/storyshots.test.js.snap

@@ -3303,7 +3303,7 @@ exports[`Storyshots Components|Card Default 1`] = `
       className="bx--card--white"
     >
       <div
-        className="bx--grid"
+        className="bx--grid bx--grid--card"
       >
         <div
           className="bx--row"
@@ -9284,13 +9284,13 @@ exports[`Storyshots Components|CardLink Default 1`] = `
     role="main"
   >
     <div
-      className="bx--grid bx--grid--condensed"
+      className="bx--grid bx--grid--card bx--grid--condensed"
     >
       <div
         className="bx--row"
       >
         <div
-          className="bx--col-sm-4 bx--col-md-4 bx--col-lg-4 bx--offset-lg-4"
+          className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter"
         >
           <CardLink
             card={

packages/react/src/components/Card/__stories__/Card.stories.js

@@ -65,7 +65,7 @@ export const Default = ({ parameters }) => {
 
   return (
     <div className={`bx--card--${theme}`}>
-      <div className="bx--grid">
+      <div className="bx--grid bx--grid--card">
         <div className="bx--row">
           <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
             <Card {...(parameters?.props?.Card ?? {})} />

packages/react/src/components/CardLink/__stories__/CardLink.stories.js

@@ -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.
@@ -56,9 +56,9 @@ export const Default = ({ parameters }) => {
   const { card, disabled } = parameters?.props?.CardLink ?? {};
 
   return (
-    <div className="bx--grid bx--grid--condensed">
+    <div className="bx--grid bx--grid--card bx--grid--condensed">
       <div className="bx--row">
-        <div className="bx--col-sm-4 bx--col-md-4 bx--col-lg-4 bx--offset-lg-4">
+        <div className="bx--col-sm-4 bx--col-md-3 bx--col-lg-6 bx--col-xlg-4 bx--no-gutter">
           <CardLink card={card} disabled={disabled} />
         </div>
       </div>

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

@@ -81,8 +81,18 @@ body {
 .dds-ce-demo-devenv--simple-grid--content-layout--with-complementary {
   > * {
     grid-column: 1 / span 4;
+  }
+}
 
-    @include carbon--breakpoint('md') {
+@include carbon--breakpoint('md') {
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 1 / span 3;
+  }
+  .dds-ce-demo-devenv--simple-grid--callout,
+  .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 {
+    > * {
       grid-column: 1 / span 8;
     }
   }
@@ -93,7 +103,10 @@ body {
     grid-column: 5 / span 12;
   }
 
-  .dds-ce-demo-devenv--simple-grid--card,
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 1 / span 6;
+  }
+
   .dds-ce-demo-devenv--simple-grid--content-layout {
     > * {
       grid-column: 5 / span 8;
@@ -109,6 +122,12 @@ body {
   }
 }
 
+@include carbon--breakpoint('xlg') {
+  .dds-ce-demo-devenv--simple-grid--card > * {
+    grid-column: 1 / span 4;
+  }
+}
+
 .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/__stories__/card.stories.ts

@@ -102,11 +102,7 @@ export default {
   decorators: [
     story => html`
       <div class="dds-ce-demo-devenv--simple-grid dds-ce-demo-devenv--simple-grid--card">
-        <div class="bx--row dds-ce-demo-devenv--grid-row">
-          <div class="bx--col-sm-4 bx--col-md-3 bx--col-lg-12 bx--col-xlg-8 bx--no-gutter">
-            ${story()}
-          </div>
-        </div>
+        ${story()}
       </div>
     `,
   ],