@buildcanada/components 0.3.4 → 0.3.5

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/Grid.tsx

@@ -0,0 +1,75 @@
+import cx from "classnames"
+
+export type GridColumns = 1 | 2 | 3 | 4 | 6 | 12
+export type GridGap = "none" | "sm" | "md" | "lg"
+
+export interface GridProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    columns?: GridColumns
+    columnsMd?: GridColumns
+    columnsLg?: GridColumns
+    gap?: GridGap
+    as?: "div" | "ul" | "ol"
+}
+
+export function Grid({
+    children,
+    className,
+    style,
+    columns = 1,
+    columnsMd,
+    columnsLg,
+    gap = "md",
+    as: Component = "div",
+}: GridProps) {
+    const classes = cx(
+        "bc-grid",
+        `bc-grid--cols-${columns}`,
+        `bc-grid--gap-${gap}`,
+        columnsMd && `bc-grid--cols-md-${columnsMd}`,
+        columnsLg && `bc-grid--cols-lg-${columnsLg}`,
+        className
+    )
+
+    return (
+        <Component className={classes} style={style}>
+            {children}
+        </Component>
+    )
+}
+
+export interface GridItemProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    span?: number
+    spanMd?: number
+    spanLg?: number
+}
+
+export function GridItem({
+    children,
+    className,
+    style,
+    span,
+    spanMd,
+    spanLg,
+}: GridItemProps) {
+    const classes = cx(
+        "bc-grid__item",
+        span && `bc-grid__item--span-${span}`,
+        spanMd && `bc-grid__item--span-md-${spanMd}`,
+        spanLg && `bc-grid__item--span-lg-${spanLg}`,
+        className
+    )
+
+    return (
+        <div className={classes} style={style}>
+            {children}
+        </div>
+    )
+}
+
+export default Grid

package/src/layout/Grid/index.ts

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

package/src/layout/Section/Section.scss

@@ -0,0 +1,74 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Section Component
+ *
+ * Full-width section with background color variants
+ ******************************************************************************/
+
+.bc-section {
+  width: 100%;
+
+  /***************************************************************************
+   * Background Variants
+   ***************************************************************************/
+
+  &--bg-white {
+    background-color: $white;
+    color: $text-primary;
+  }
+
+  &--bg-linen {
+    background-color: $linen;
+    color: $text-primary;
+  }
+
+  &--bg-charcoal {
+    background-color: $charcoal;
+    color: $text-inverse;
+  }
+
+  /***************************************************************************
+   * Spacing Variants
+   ***************************************************************************/
+
+  &--spacing-none {
+    padding-top: 0;
+    padding-bottom: 0;
+  }
+
+  &--spacing-sm {
+    padding-top: $space-4;
+    padding-bottom: $space-4;
+  }
+
+  &--spacing-md {
+    padding-top: $space-6;
+    padding-bottom: $space-6;
+
+    @include md-up {
+      padding-top: $space-8;
+      padding-bottom: $space-8;
+    }
+  }
+
+  &--spacing-lg {
+    padding-top: $space-8;
+    padding-bottom: $space-8;
+
+    @include md-up {
+      padding-top: $space-10;
+      padding-bottom: $space-10;
+    }
+  }
+
+  &--spacing-xl {
+    padding-top: $space-10;
+    padding-bottom: $space-10;
+
+    @include md-up {
+      padding-top: $space-12;
+      padding-bottom: $space-12;
+    }
+  }
+}

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/Section.tsx

@@ -0,0 +1,37 @@
+import cx from "classnames"
+
+export type SectionBackground = "white" | "linen" | "charcoal"
+export type SectionSpacing = "none" | "sm" | "md" | "lg" | "xl"
+
+export interface SectionProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    background?: SectionBackground
+    spacing?: SectionSpacing
+    id?: string
+}
+
+export function Section({
+    children,
+    className,
+    style,
+    background = "white",
+    spacing = "lg",
+    id,
+}: SectionProps) {
+    const classes = cx(
+        "bc-section",
+        `bc-section--bg-${background}`,
+        `bc-section--spacing-${spacing}`,
+        className
+    )
+
+    return (
+        <section className={classes} style={style} id={id}>
+            {children}
+        </section>
+    )
+}
+
+export default Section

package/src/layout/Section/index.ts

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

package/src/layout/Stack/Stack.scss

@@ -0,0 +1,61 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Stack Component
+ *
+ * Flexbox-based layout for consistent spacing
+ ******************************************************************************/
+
+.bc-stack {
+  display: flex;
+
+  /***************************************************************************
+   * Direction Variants
+   ***************************************************************************/
+
+  &--vertical {
+    flex-direction: column;
+  }
+
+  &--horizontal {
+    flex-direction: row;
+  }
+
+  /***************************************************************************
+   * Spacing Variants
+   ***************************************************************************/
+
+  &--spacing-none { gap: 0; }
+  &--spacing-xs { gap: calc($space-1 / 2); }
+  &--spacing-sm { gap: $space-1; }
+  &--spacing-md { gap: $space-2; }
+  &--spacing-lg { gap: $space-3; }
+  &--spacing-xl { gap: $space-4; }
+
+  /***************************************************************************
+   * Alignment Variants
+   ***************************************************************************/
+
+  &--align-start { align-items: flex-start; }
+  &--align-center { align-items: center; }
+  &--align-end { align-items: flex-end; }
+  &--align-stretch { align-items: stretch; }
+
+  /***************************************************************************
+   * Justify Variants
+   ***************************************************************************/
+
+  &--justify-start { justify-content: flex-start; }
+  &--justify-center { justify-content: center; }
+  &--justify-end { justify-content: flex-end; }
+  &--justify-between { justify-content: space-between; }
+  &--justify-around { justify-content: space-around; }
+
+  /***************************************************************************
+   * Wrap
+   ***************************************************************************/
+
+  &--wrap {
+    flex-wrap: wrap;
+  }
+}