From e89c82defeb9d5bfdbb1ae6c532e0041a2fb6986 Mon Sep 17 00:00:00 2001
From: Will Martin <contact@willmartian.com>
Date: Wed, 24 Apr 2024 14:52:29 -0400
Subject: [PATCH] [CL-236] Card component (#8900)

* add card component; adjust section margin on small screens
---
 libs/components/src/card/card.component.ts    | 15 +++++
 libs/components/src/card/card.stories.ts      | 62 +++++++++++++++++++
 libs/components/src/card/index.ts             |  1 +
 libs/components/src/index.ts                  |  1 +
 .../src/section/section.component.ts          |  2 +-
 .../components/src/section/section.stories.ts |  2 +-
 6 files changed, 81 insertions(+), 2 deletions(-)
 create mode 100644 libs/components/src/card/card.component.ts
 create mode 100644 libs/components/src/card/card.stories.ts
 create mode 100644 libs/components/src/card/index.ts

diff --git a/libs/components/src/card/card.component.ts b/libs/components/src/card/card.component.ts
new file mode 100644
index 0000000000..da61d53664
--- /dev/null
+++ b/libs/components/src/card/card.component.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from "@angular/common";
+import { ChangeDetectionStrategy, Component } from "@angular/core";
+
+@Component({
+  selector: "bit-card",
+  standalone: true,
+  imports: [CommonModule],
+  template: `<ng-content></ng-content>`,
+  changeDetection: ChangeDetectionStrategy.OnPush,
+  host: {
+    class:
+      "tw-box-border tw-block tw-bg-background tw-text-main tw-border-solid tw-border-b tw-border-0 tw-border-b-secondary-300 tw-rounded-lg tw-py-4 tw-px-3",
+  },
+})
+export class CardComponent {}
diff --git a/libs/components/src/card/card.stories.ts b/libs/components/src/card/card.stories.ts
new file mode 100644
index 0000000000..702a8aeb63
--- /dev/null
+++ b/libs/components/src/card/card.stories.ts
@@ -0,0 +1,62 @@
+import { Meta, StoryObj, componentWrapperDecorator, moduleMetadata } from "@storybook/angular";
+
+import { SectionComponent } from "../section";
+import { TypographyModule } from "../typography";
+
+import { CardComponent } from "./card.component";
+
+export default {
+  title: "Component Library/Card",
+  component: CardComponent,
+  decorators: [
+    moduleMetadata({
+      imports: [TypographyModule, SectionComponent],
+    }),
+    componentWrapperDecorator(
+      (story) => `<div class="tw-bg-background-alt tw-p-10 tw-text-main">${story}</div>`,
+    ),
+  ],
+} as Meta;
+
+type Story = StoryObj<CardComponent>;
+
+/** Cards are presentational containers. */
+export const Default: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+        <bit-card>
+            <p bitTypography="body1" class="!tw-mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+        </bit-card>
+    `,
+  }),
+};
+
+/** Cards are often paired with [Sections](/docs/component-library-section--docs). */
+export const WithinSections: Story = {
+  render: (args) => ({
+    props: args,
+    template: /*html*/ `
+          <bit-section>
+            <h2 bitTypography="h5">Bar</h2>
+            <bit-card>
+                <p bitTypography="body1" class="!tw-mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+            </bit-card>
+          </bit-section>
+
+          <bit-section>
+            <h2 bitTypography="h5">Bar</h2>
+            <bit-card>
+                <p bitTypography="body1" class="!tw-mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+            </bit-card>
+          </bit-section>
+
+          <bit-section>
+            <h2 bitTypography="h5">Bar</h2>
+            <bit-card>
+                <p bitTypography="body1" class="!tw-mb-0">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras vitae congue risus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Nunc elementum odio nibh, eget pellentesque sem ornare vitae. Etiam vel ante et velit fringilla egestas a sed sem. Fusce molestie nisl et nisi accumsan dapibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed eu risus ex. </p>
+            </bit-card>
+          </bit-section>
+      `,
+  }),
+};
diff --git a/libs/components/src/card/index.ts b/libs/components/src/card/index.ts
new file mode 100644
index 0000000000..8151bac4c8
--- /dev/null
+++ b/libs/components/src/card/index.ts
@@ -0,0 +1 @@
+export * from "./card.component";
diff --git a/libs/components/src/index.ts b/libs/components/src/index.ts
index 527d5f3615..36185911a6 100644
--- a/libs/components/src/index.ts
+++ b/libs/components/src/index.ts
@@ -7,6 +7,7 @@ export * from "./breadcrumbs";
 export * from "./button";
 export { ButtonType } from "./shared/button-like.abstraction";
 export * from "./callout";
+export * from "./card";
 export * from "./checkbox";
 export * from "./color-password";
 export * from "./container";
diff --git a/libs/components/src/section/section.component.ts b/libs/components/src/section/section.component.ts
index a681dcf7d9..a60e232eec 100644
--- a/libs/components/src/section/section.component.ts
+++ b/libs/components/src/section/section.component.ts
@@ -6,7 +6,7 @@ import { Component } from "@angular/core";
   standalone: true,
   imports: [CommonModule],
   template: `
-    <section class="tw-mb-12">
+    <section class="tw-mb-6 md:tw-mb-12">
       <ng-content></ng-content>
     </section>
   `,
diff --git a/libs/components/src/section/section.stories.ts b/libs/components/src/section/section.stories.ts
index fb9948e9be..65b6a67d47 100644
--- a/libs/components/src/section/section.stories.ts
+++ b/libs/components/src/section/section.stories.ts
@@ -17,7 +17,7 @@ export default {
 
 type Story = StoryObj<SectionComponent>;
 
-/** Sections are simple containers that apply a bottom margin. They often contain a heading. */
+/** Sections are simple containers that apply a responsive bottom margin. They often contain a heading. */
 export const Default: Story = {
   render: (args) => ({
     props: args,