@buildcanada/components 0.3.3 → 0.3.5

package/src/layout/Divider/Divider.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Divider } from "./Divider"
+
+const meta: Meta<typeof Divider> = {
+    title: "Components/Layout/Divider",
+    component: Divider,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A visual separator for dividing content sections.
+
+## Usage
+
+\`\`\`tsx
+import { Divider } from "@buildcanada/components"
+
+<Divider variant="solid" spacing="md" />
+\`\`\`
+
+## Variants
+
+- **solid**: Standard solid line
+- **dashed**: Dashed line for lighter separation
+- **construction**: Blueprint-style pattern (Build Canada brand)
+
+## Vertical Orientation
+
+Use \`orientation="vertical"\` for horizontal layouts:
+
+\`\`\`tsx
+<div style={{ display: "flex" }}>
+  <div>Left</div>
+  <Divider orientation="vertical" />
+  <div>Right</div>
+</div>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        orientation: {
+            control: "radio",
+            options: ["horizontal", "vertical"],
+            description: "Direction of the divider",
+        },
+        variant: {
+            control: "select",
+            options: ["solid", "dashed", "construction"],
+            description: "Visual style of the divider",
+        },
+        spacing: {
+            control: "select",
+            options: ["none", "sm", "md", "lg"],
+            description: "Margin around the divider",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Divider>
+
+export const Default: Story = {
+    args: {
+        orientation: "horizontal",
+        variant: "solid",
+        spacing: "md",
+    },
+}
+
+export const Solid: Story = {
+    args: {
+        variant: "solid",
+        spacing: "md",
+    },
+}
+
+export const Dashed: Story = {
+    args: {
+        variant: "dashed",
+        spacing: "md",
+    },
+}
+
+export const Construction: Story = {
+    args: {
+        variant: "construction",
+        spacing: "md",
+    },
+}
+
+export const NoSpacing: Story = {
+    args: {
+        variant: "solid",
+        spacing: "none",
+    },
+}
+
+export const SmallSpacing: Story = {
+    args: {
+        variant: "solid",
+        spacing: "sm",
+    },
+}
+
+export const LargeSpacing: Story = {
+    args: {
+        variant: "solid",
+        spacing: "lg",
+    },
+}
+
+export const Vertical: Story = {
+    args: {
+        orientation: "vertical",
+        variant: "solid",
+        spacing: "md",
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ display: "flex", height: "100px", alignItems: "stretch" }}>
+                <div style={{ padding: "16px", fontFamily: "sans-serif" }}>Left Content</div>
+                <Story />
+                <div style={{ padding: "16px", fontFamily: "sans-serif" }}>Right Content</div>
+            </div>
+        ),
+    ],
+}
+
+export const VerticalDashed: Story = {
+    args: {
+        orientation: "vertical",
+        variant: "dashed",
+        spacing: "md",
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ display: "flex", height: "100px", alignItems: "stretch" }}>
+                <div style={{ padding: "16px", fontFamily: "sans-serif" }}>Left</div>
+                <Story />
+                <div style={{ padding: "16px", fontFamily: "sans-serif" }}>Right</div>
+            </div>
+        ),
+    ],
+}
+
+export const InContent: Story = {
+    render: () => (
+        <div style={{ maxWidth: "600px", fontFamily: "sans-serif" }}>
+            <h2 style={{ margin: "0 0 8px" }}>Section One</h2>
+            <p style={{ margin: "0 0 16px", lineHeight: 1.6 }}>
+                This is the first section of content. It contains some text that
+                demonstrates how dividers work to separate content.
+            </p>
+            <Divider variant="solid" spacing="md" />
+            <h2 style={{ margin: "0 0 8px" }}>Section Two</h2>
+            <p style={{ margin: "0 0 16px", lineHeight: 1.6 }}>
+                This is the second section. The solid divider above creates a
+                clear visual break between the two sections.
+            </p>
+            <Divider variant="dashed" spacing="md" />
+            <h2 style={{ margin: "0 0 8px" }}>Section Three</h2>
+            <p style={{ margin: "0", lineHeight: 1.6 }}>
+                The dashed divider provides a lighter separation, suggesting
+                related but distinct content.
+            </p>
+        </div>
+    ),
+}
+
+export const ConstructionStyle: Story = {
+    render: () => (
+        <div style={{ maxWidth: "600px", fontFamily: "sans-serif" }}>
+            <h2 style={{ margin: "0 0 16px" }}>Build Canada</h2>
+            <Divider variant="construction" spacing="lg" />
+            <p style={{ margin: 0, lineHeight: 1.6 }}>
+                The construction variant uses the blueprint/draft aesthetic that's
+                part of the Build Canada design language. It features a distinctive
+                pattern that references technical drawings.
+            </p>
+        </div>
+    ),
+}
+
+export const AllVariants: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "32px", fontFamily: "sans-serif" }}>
+            <div>
+                <p style={{ marginBottom: "8px" }}>Solid</p>
+                <Divider variant="solid" spacing="none" />
+            </div>
+            <div>
+                <p style={{ marginBottom: "8px" }}>Dashed</p>
+                <Divider variant="dashed" spacing="none" />
+            </div>
+            <div>
+                <p style={{ marginBottom: "8px" }}>Construction</p>
+                <Divider variant="construction" spacing="none" />
+            </div>
+        </div>
+    ),
+}

package/src/layout/Divider/index.ts

@@ -1,2 +1,2 @@
-export { Divider, type DividerProps, type DividerOrientation, type DividerVariant } from "./Divider"
-export { default } from "./Divider"
+export { Divider, type DividerProps, type DividerOrientation, type DividerVariant } from "./Divider.js"
+export { default } from "./Divider.js"

package/src/layout/Grid/Grid.stories.tsx

@@ -0,0 +1,263 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Grid, GridItem } from "./Grid"
+
+const meta: Meta<typeof Grid> = {
+    title: "Components/Layout/Grid",
+    component: Grid,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A responsive CSS grid layout component with customizable columns and gaps.
+
+## Usage
+
+\`\`\`tsx
+import { Grid, GridItem } from "@buildcanada/components"
+
+<Grid columns={3} gap="md">
+  <GridItem>Item 1</GridItem>
+  <GridItem>Item 2</GridItem>
+  <GridItem span={2}>Wide Item</GridItem>
+</Grid>
+\`\`\`
+
+## Responsive Columns
+
+Use \`columnsMd\` and \`columnsLg\` props for responsive layouts:
+
+\`\`\`tsx
+<Grid columns={1} columnsMd={2} columnsLg={4} gap="md">
+  {/* 1 column on mobile, 2 on tablet, 4 on desktop */}
+</Grid>
+\`\`\`
+
+## GridItem Spanning
+
+Use \`GridItem\` with the \`span\` prop to make items span multiple columns:
+
+\`\`\`tsx
+<Grid columns={12} gap="sm">
+  <GridItem span={4}>4 columns</GridItem>
+  <GridItem span={8}>8 columns</GridItem>
+</Grid>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        columns: {
+            control: "select",
+            options: [1, 2, 3, 4, 6, 12],
+            description: "Number of columns (base/mobile)",
+        },
+        columnsMd: {
+            control: "select",
+            options: [undefined, 1, 2, 3, 4, 6, 12],
+            description: "Number of columns at medium breakpoint",
+        },
+        columnsLg: {
+            control: "select",
+            options: [undefined, 1, 2, 3, 4, 6, 12],
+            description: "Number of columns at large breakpoint",
+        },
+        gap: {
+            control: "select",
+            options: ["none", "sm", "md", "lg"],
+            description: "Gap size between grid items",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Grid>
+
+const GridCell = ({ children }: { children: React.ReactNode }) => (
+    <div style={{
+        padding: "24px",
+        backgroundColor: "#F6ECE3",
+        border: "1px solid #272727",
+        textAlign: "center",
+        fontFamily: "sans-serif"
+    }}>
+        {children}
+    </div>
+)
+
+export const Default: Story = {
+    args: {
+        columns: 3,
+        gap: "md",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+                <GridCell>Item 4</GridCell>
+                <GridCell>Item 5</GridCell>
+                <GridCell>Item 6</GridCell>
+            </>
+        ),
+    },
+}
+
+export const TwoColumns: Story = {
+    args: {
+        columns: 2,
+        gap: "md",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+                <GridCell>Item 4</GridCell>
+            </>
+        ),
+    },
+}
+
+export const ThreeColumns: Story = {
+    args: {
+        columns: 3,
+        gap: "md",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+            </>
+        ),
+    },
+}
+
+export const FourColumns: Story = {
+    args: {
+        columns: 4,
+        gap: "md",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+                <GridCell>Item 4</GridCell>
+            </>
+        ),
+    },
+}
+
+export const ResponsiveGrid: Story = {
+    args: {
+        columns: 1,
+        columnsMd: 2,
+        columnsLg: 4,
+        gap: "md",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+                <GridCell>Item 4</GridCell>
+            </>
+        ),
+    },
+}
+
+export const NoGap: Story = {
+    args: {
+        columns: 3,
+        gap: "none",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+            </>
+        ),
+    },
+}
+
+export const SmallGap: Story = {
+    args: {
+        columns: 3,
+        gap: "sm",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+            </>
+        ),
+    },
+}
+
+export const LargeGap: Story = {
+    args: {
+        columns: 3,
+        gap: "lg",
+        children: (
+            <>
+                <GridCell>Item 1</GridCell>
+                <GridCell>Item 2</GridCell>
+                <GridCell>Item 3</GridCell>
+            </>
+        ),
+    },
+}
+
+export const WithGridItems: Story = {
+    render: () => (
+        <Grid columns={4} gap="md">
+            <GridItem span={2}>
+                <GridCell>Span 2</GridCell>
+            </GridItem>
+            <GridItem>
+                <GridCell>Span 1</GridCell>
+            </GridItem>
+            <GridItem>
+                <GridCell>Span 1</GridCell>
+            </GridItem>
+            <GridItem>
+                <GridCell>Span 1</GridCell>
+            </GridItem>
+            <GridItem span={3}>
+                <GridCell>Span 3</GridCell>
+            </GridItem>
+        </Grid>
+    ),
+}
+
+export const TwelveColumnGrid: Story = {
+    render: () => (
+        <Grid columns={12} gap="sm">
+            <GridItem span={4}>
+                <GridCell>4 cols</GridCell>
+            </GridItem>
+            <GridItem span={4}>
+                <GridCell>4 cols</GridCell>
+            </GridItem>
+            <GridItem span={4}>
+                <GridCell>4 cols</GridCell>
+            </GridItem>
+            <GridItem span={6}>
+                <GridCell>6 cols</GridCell>
+            </GridItem>
+            <GridItem span={6}>
+                <GridCell>6 cols</GridCell>
+            </GridItem>
+            <GridItem span={3}>
+                <GridCell>3</GridCell>
+            </GridItem>
+            <GridItem span={3}>
+                <GridCell>3</GridCell>
+            </GridItem>
+            <GridItem span={3}>
+                <GridCell>3</GridCell>
+            </GridItem>
+            <GridItem span={3}>
+                <GridCell>3</GridCell>
+            </GridItem>
+        </Grid>
+    ),
+}

package/src/layout/Grid/index.ts

@@ -1,2 +1,2 @@
-export { Grid, GridItem, type GridProps, type GridItemProps, type GridColumns, type GridGap } from "./Grid"
-export { default } from "./Grid"
+export { Grid, GridItem, type GridProps, type GridItemProps, type GridColumns, type GridGap } from "./Grid.js"
+export { default } from "./Grid.js"

package/src/layout/Section/Section.stories.tsx

@@ -0,0 +1,173 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Section } from "./Section"
+import { Container } from "../Container"
+
+const meta: Meta<typeof Section> = {
+    title: "Components/Layout/Section",
+    component: Section,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A full-width section component with background colors and vertical padding.
+
+## Usage
+
+\`\`\`tsx
+import { Section, Container } from "@buildcanada/components"
+
+<Section background="linen" spacing="lg">
+  <Container>
+    <h2>Section Title</h2>
+    <p>Section content goes here.</p>
+  </Container>
+</Section>
+\`\`\`
+
+## Backgrounds
+
+- **white**: #FFFFFF
+- **linen**: #F6ECE3 (Build Canada brand)
+- **charcoal**: #272727 (dark mode)
+
+## Building Page Layouts
+
+Stack sections to create full page layouts:
+
+\`\`\`tsx
+<>
+  <Section background="linen" spacing="xl">
+    <Container><Hero /></Container>
+  </Section>
+  <Section background="white" spacing="lg">
+    <Container><Content /></Container>
+  </Section>
+</>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        background: {
+            control: "select",
+            options: ["white", "linen", "charcoal"],
+            description: "Background color of the section",
+        },
+        spacing: {
+            control: "select",
+            options: ["none", "sm", "md", "lg", "xl"],
+            description: "Vertical padding (top and bottom)",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Section>
+
+const SectionContent = ({ dark = false }: { dark?: boolean }) => (
+    <Container>
+        <div style={{
+            fontFamily: "sans-serif",
+            color: dark ? "#ffffff" : "#272727"
+        }}>
+            <h2 style={{ margin: "0 0 16px" }}>Section Title</h2>
+            <p style={{ margin: 0 }}>
+                This is example content inside a section. Sections provide consistent
+                vertical spacing and background colors for page layouts.
+            </p>
+        </div>
+    </Container>
+)
+
+export const Default: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "white",
+        spacing: "lg",
+    },
+}
+
+export const WhiteBackground: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "white",
+        spacing: "lg",
+    },
+}
+
+export const LinenBackground: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "linen",
+        spacing: "lg",
+    },
+}
+
+export const CharcoalBackground: Story = {
+    args: {
+        children: <SectionContent dark />,
+        background: "charcoal",
+        spacing: "lg",
+    },
+}
+
+export const NoSpacing: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "linen",
+        spacing: "none",
+    },
+}
+
+export const SmallSpacing: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "linen",
+        spacing: "sm",
+    },
+}
+
+export const LargeSpacing: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "linen",
+        spacing: "lg",
+    },
+}
+
+export const ExtraLargeSpacing: Story = {
+    args: {
+        children: <SectionContent />,
+        background: "linen",
+        spacing: "xl",
+    },
+}
+
+export const StackedSections: Story = {
+    render: () => (
+        <div>
+            <Section background="linen" spacing="lg">
+                <Container>
+                    <h2 style={{ fontFamily: "sans-serif", margin: 0 }}>Linen Section</h2>
+                </Container>
+            </Section>
+            <Section background="white" spacing="lg">
+                <Container>
+                    <h2 style={{ fontFamily: "sans-serif", margin: 0 }}>White Section</h2>
+                </Container>
+            </Section>
+            <Section background="charcoal" spacing="lg">
+                <Container>
+                    <h2 style={{ fontFamily: "sans-serif", margin: 0, color: "#fff" }}>Charcoal Section</h2>
+                </Container>
+            </Section>
+            <Section background="linen" spacing="lg">
+                <Container>
+                    <h2 style={{ fontFamily: "sans-serif", margin: 0 }}>Linen Section</h2>
+                </Container>
+            </Section>
+        </div>
+    ),
+}

package/src/layout/Section/index.ts

@@ -1,2 +1,2 @@
-export { Section, type SectionProps, type SectionBackground, type SectionSpacing } from "./Section"
-export { default } from "./Section"
+export { Section, type SectionProps, type SectionBackground, type SectionSpacing } from "./Section.js"
+export { default } from "./Section.js"