diff --git a/src/blocks/Card.scss b/src/blocks/Card.scss index ffd3594..f1e7f2d 100644 --- 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 index 35f03d8..39d055b 100644 --- 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 index c1f1b05..d5c8365 100644 --- 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 index c4b5b86..d83c0c0 100644 --- 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 = () => (
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 = () => (
Small Spacing
+ Default (Base) Spacing
+ Medium Spacing
+ Large Spacing
+