[Layout foundations] Add LegacyCard component (#8238)

### WHY are these changes introduced?

Resolves #8231.
Creating a `LegacyCard` component that is a duplicate of the existing
`Card` in light of upcoming work to replace this with the `AlphaCard`
component.

### WHAT is this pull request doing?

Adds `LegacyCard` to `polaris-react`.
Adds `LegacyCard` page to style guide with examples and prop table.

<!-- ℹ️ Delete the following for small / trivial changes -->

### How to 🎩

🖥 [Local development
instructions](https://github.com/Shopify/polaris/blob/main/README.md#local-development)
🗒 [General tophatting
guidelines](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md)
📄 [Changelog
guidelines](https://github.com/Shopify/polaris/blob/main/.github/CONTRIBUTING.md#changelog)

### 🎩 checklist

- [ ] Tested on
[mobile](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting.md#cross-browser-testing)
- [ ] Tested on [multiple
browsers](https://help.shopify.com/en/manual/shopify-admin/supported-browsers)
- [ ] Tested for
[accessibility](https://github.com/Shopify/polaris/blob/main/documentation/Accessibility%20testing.md)
- [ ] Updated the component's `README.md` with documentation changes
- [x] [Tophatted
documentation](https://github.com/Shopify/polaris/blob/main/documentation/Tophatting%20documentation.md)
changes in the style guide

---------

Co-authored-by: aveline <[email protected]>

.changeset/swift-jokes-punch.md

@@ -0,0 +1,6 @@
+---
+'@shopify/polaris': minor
+'polaris.shopify.com': minor
+---
+
+Added `LegacyCard` component

polaris-react/src/components/LegacyCard/LegacyCard.scss

@@ -0,0 +1,160 @@
+@import '../../styles/common';
+
+.LegacyCard {
+  background-color: var(--p-surface);
+  box-shadow: var(--p-shadow-card);
+  outline: var(--p-border-width-1) solid transparent;
+
+  + .LegacyCard {
+    margin-top: var(--p-space-4);
+
+    @media print {
+      margin-top: calc(-1 * var(--p-space-2));
+    }
+  }
+
+  @media #{$p-breakpoints-sm-up} {
+    border-radius: var(--p-border-radius-2);
+  }
+
+  @media print {
+    box-shadow: none;
+  }
+}
+
+.subdued {
+  background-color: var(--p-surface-subdued);
+}
+
+.Section-hideOnPrint,
+.hideOnPrint {
+  @media print {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    display: none !important;
+  }
+}
+
+.Header {
+  padding: var(--p-space-4) var(--p-space-4) 0;
+
+  @media #{$p-breakpoints-sm-up} {
+    padding: var(--p-space-5) var(--p-space-5) 0;
+  }
+
+  @media print and #{$p-breakpoints-sm-up} {
+    padding: var(--p-space-2) var(--p-space-4) var(--p-space-0);
+  }
+}
+
+.Section {
+  padding: var(--p-space-4);
+
+  @media #{$p-breakpoints-sm-up} {
+    padding: var(--p-space-5);
+  }
+
+  + .Section {
+    border-top: var(--p-border-divider);
+
+    @media print {
+      border-top: 0;
+    }
+  }
+
+  @media print {
+    padding-top: var(--p-space-1);
+    padding-bottom: var(--p-space-1);
+  }
+}
+
+.Section:first-child {
+  border-top-left-radius: var(--p-border-radius-2);
+  border-top-right-radius: var(--p-border-radius-2);
+}
+
+.Section:last-child {
+  border-bottom-left-radius: var(--p-border-radius-2);
+  border-bottom-right-radius: var(--p-border-radius-2);
+}
+
+.Section-fullWidth {
+  padding: var(--p-space-4) var(--p-space-0);
+
+  @media #{$p-breakpoints-sm-up} {
+    padding: var(--p-space-5) var(--p-space-0);
+  }
+}
+
+.Section-flush {
+  padding: var(--p-space-0);
+
+  @media #{$p-breakpoints-sm-up} {
+    padding: var(--p-space-0);
+  }
+}
+
+.Section-subdued {
+  background-color: var(--p-surface-subdued);
+
+  @media (-ms-high-contrast: active) {
+    background-color: transparent;
+  }
+
+  .Header + & {
+    border-top: var(--p-border-divider);
+    margin-top: var(--p-space-5);
+  }
+}
+
+.SectionHeader {
+  padding-bottom: var(--p-space-2);
+
+  .Section-fullWidth & {
+    padding-left: var(--p-space-4);
+    padding-right: var(--p-space-4);
+
+    @media #{$p-breakpoints-sm-up} {
+      padding-left: var(--p-space-5);
+      padding-right: var(--p-space-5);
+    }
+  }
+}
+
+.Subsection {
+  + .Subsection {
+    margin-top: var(--p-space-4);
+    padding-top: var(--p-space-4);
+    border-top: var(--p-border-divider);
+
+    @media print {
+      border-top: 0;
+    }
+  }
+
+  @media print {
+    padding-top: var(--p-space-1);
+    padding-bottom: var(--p-space-1);
+  }
+}
+
+.Footer {
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  display: flex;
+  // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+  justify-content: flex-end;
+  padding: 0 var(--p-space-4) var(--p-space-4);
+
+  @media #{$p-breakpoints-sm-up} {
+    padding: 0 var(--p-space-5) var(--p-space-5);
+  }
+
+  &.LeftJustified {
+    // stylelint-disable-next-line -- generated by polaris-migrator DO NOT COPY
+    justify-content: flex-start;
+  }
+
+  .Section-subdued + & {
+    border-top: var(--p-border-divider);
+    padding: var(--p-space-5);
+  }
+}