chore: update Card spacings and use HeadingGroup in stories (#38)

bloom-housing · May 23, 2023 · 8660d88 · 8660d88
1 parent 0fe438f
commit 8660d88
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 32 deletions.
diff --git a/src/blocks/Card.scss b/src/blocks/Card.scss
@@ -1,11 +1,11 @@
 .card {
   /* Component Variables */
-  --card-spacing-base: var(--bloom-s6);
   --card-spacing-sm: var(--bloom-s4);
-  --card-spacing-md: var(--bloom-s8);
-  --card-spacing-lg: var(--bloom-s12); 
+  --card-spacing-md: var(--bloom-s6);
+  --card-spacing-lg: var(--bloom-s8);
+  --card-spacing-xl: var(--bloom-s12); 
 
-  --card-spacing: var(--card-spacing-base);
+  --card-spacing: var(--card-spacing-md);
 
   --card-background-color: var(--bloom-color-white);
   --card-border-radius: var(--bloom-rounded-lg);
@@ -54,6 +54,10 @@
     --card-spacing: var(--card-spacing-lg);
   }
 
+  &[data-spacing="xl"] {
+    --card-spacing: var(--card-spacing-xl);
+  }
+
   &[data-spacing="none"] {
     --card-spacing: 0rem;
   }
@@ -63,6 +67,11 @@
   padding-block-start: var(--card-header-padding-block);
   padding-inline: var(--card-header-padding-inline);
 
+  /* Solves extra HeadingGroup paragraph spacing */
+  p:last-child {
+    margin-block-end: 0;
+  }
+
   &[data-divider="flush"] {
     padding-block-end: var(--card-header-padding-block);
     border-bottom: var(--card-divider-width) solid var(--card-divider-color);

diff --git a/src/blocks/Card.tsx b/src/blocks/Card.tsx
@@ -68,7 +68,7 @@ export interface CardProps {
   /** Control spacing around card elements
    * @default base
    */
-  spacing?: "sm" | "base" | "md" | "lg" | "none"
+  spacing?: "sm" | "md" | "lg" | "xl" | "none"
   /** Element ID */
   id?: string
   /** Additional class name */

diff --git a/src/blocks/__stories__/Card.docs.mdx b/src/blocks/__stories__/Card.docs.mdx
@@ -24,10 +24,10 @@ import { Swatch } from "../../../documentation/components/Swatch.tsx"
 
 | Name                                    | Description                                                          | Default                   |
 | --------------------------------------- | -------------------------------------------------------------------- | ------------------------- |
-| `--card-spacing-base`                   | Default spacing around card elements                                 | `--bloom-s6`              |
 | `--card-spacing-sm`                     | Small card spacing                                                   | `--bloom-s4`              |
-| `--card-spacing-md`                     | Medium card spacing                                                  | `--bloom-s8`              |
-| `--card-spacing-lg`                     | Large card spacing                                                   | `--bloom-s12`             |
+| `--card-spacing-md`                   | Medium card spacing (default)                                 | `--bloom-s6`              |
+| `--card-spacing-lg`                     | Large card spacing                                                  | `--bloom-s8`              |
+| `--card-spacing-xl`                     | Extra Large card spacing                                                   | `--bloom-s12`             |
 | `--card-background-color`               | Background of the card                                               | `--bloom-color-white`     |
 | `--card-border-radius`                  | Card corner radius                                                   | `--bloom-rounded-lg`      |
 | `--card-border-width`                   | Border width                                                         | `--bloom-border-1`        |

diff --git a/src/blocks/__stories__/Card.stories.tsx b/src/blocks/__stories__/Card.stories.tsx
@@ -1,5 +1,6 @@
 import React from "react"
 import Card from "../Card"
+import HeadingGroup from "../../text/HeadingGroup"
 
 import MDXDocs from "./Card.docs.mdx"
 
@@ -13,14 +14,11 @@ export default {
   },
 }
 
-const sharedStyles =
-  ".test-card-header h3 { font-family: var(--bloom-font-serif); font-weight: normal; font-size: var(--bloom-font-size-2xl); line-height: var(--bloom-line-height-heading);"
-
 export const TextContent = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header className="test-card-header">
-        <h3>Wildflower</h3>
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
       </Card.Header>
 
       <Card.Section>
@@ -39,16 +37,14 @@ export const TextContent = () => (
         </p>
       </Card.Section>
     </Card>
-
-    <style>{sharedStyles}</style>
   </div>
 )
 
 export const FlushDividers = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header divider="flush" className="test-card-header">
-        <h3>Wildflower</h3>
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
       </Card.Header>
 
       <Card.Section divider="flush">
@@ -67,16 +63,14 @@ export const FlushDividers = () => (
         </p>
       </Card.Section>
     </Card>
-
-    <style>{sharedStyles}</style>
   </div>
 )
 
 export const InsetDividers = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header className="test-card-header" divider="inset">
-        <h3>Wildflower</h3>
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
       </Card.Header>
 
       <Card.Section divider="inset">
@@ -95,16 +89,14 @@ export const InsetDividers = () => (
         </p>
       </Card.Section>
     </Card>
-
-    <style>{sharedStyles}</style>
   </div>
 )
 
 export const WithFooter = () => (
   <div style={{ maxWidth: "500px" }}>
     <Card>
       <Card.Header className="test-card-header">
-        <h3>Wildflower</h3>
+        <HeadingGroup size="2xl" heading="Wildflower" subheading="Wildflower (or wild flower)"  />
       </Card.Header>
 
       <Card.Section>
@@ -138,17 +130,17 @@ export const WithFooter = () => (
     <style>
       {"#test-card-footer { --card-footer-background-color: var(--bloom-color-primary-lighter) }"}
     </style>
-    <style>{sharedStyles}</style>
   </div>
 )
 
 export const Spacings = () => (
   <div style={{ maxWidth: "500px", display: "grid", gap: "2rem" }}>
     <Card spacing="none">
       <Card.Header className="test-card-header">
-        <h3>"None" Spacing</h3>
+        <HeadingGroup size="2xl" heading="none" subheading="No Spacing"  />
       </Card.Header>
 
+      <br/>
       <Card.Section>
         <p>
           The term can refer to the flowering plant as a whole, even when not in bloom, and not just
@@ -159,7 +151,7 @@ export const Spacings = () => (
 
     <Card spacing="sm">
       <Card.Header className="test-card-header">
-        <h3>Small Spacing</h3>
+        <HeadingGroup size="2xl" heading="sm" subheading="Small Spacing"  />
       </Card.Header>
 
       <Card.Section>
@@ -170,9 +162,9 @@ export const Spacings = () => (
       </Card.Section>
     </Card>
 
-    <Card spacing="base">
+    <Card spacing="md">
       <Card.Header className="test-card-header">
-        <h3>Default (Base) Spacing</h3>
+      <HeadingGroup size="2xl" heading="md" subheading="Medium (Default) Spacing"  />
       </Card.Header>
 
       <Card.Section>
@@ -183,9 +175,9 @@ export const Spacings = () => (
       </Card.Section>
     </Card>
 
-    <Card spacing="md">
+    <Card spacing="lg">
       <Card.Header className="test-card-header">
-        <h3>Medium Spacing</h3>
+        <HeadingGroup size="2xl" heading="lg" subheading="Large Spacing"  />
       </Card.Header>
 
       <Card.Section>
@@ -196,9 +188,9 @@ export const Spacings = () => (
       </Card.Section>
     </Card>
 
-    <Card spacing="lg">
+    <Card spacing="xl">
       <Card.Header className="test-card-header">
-        <h3>Large Spacing</h3>
+        <HeadingGroup size="2xl" heading="xl" subheading="Extra Large Spacing"  />
       </Card.Header>
 
       <Card.Section>
@@ -208,7 +200,5 @@ export const Spacings = () => (
         </p>
       </Card.Section>
     </Card>
-
-    <style>{sharedStyles}</style>
   </div>
 )