@buildcanada/components 0.3.4 → 0.3.5

package/src/layout/Container/Container.tsx

@@ -0,0 +1,29 @@
+import cx from "classnames"
+
+export type ContainerSize = "sm" | "md" | "lg" | "xl" | "full"
+
+export interface ContainerProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    size?: ContainerSize
+    as?: "div" | "main" | "article" | "section"
+}
+
+export function Container({
+    children,
+    className,
+    style,
+    size = "lg",
+    as: Component = "div",
+}: ContainerProps) {
+    const classes = cx("bc-container", `bc-container--${size}`, className)
+
+    return (
+        <Component className={classes} style={style}>
+            {children}
+        </Component>
+    )
+}
+
+export default Container

package/src/layout/Container/index.ts

@@ -0,0 +1,2 @@
+export { Container, type ContainerProps, type ContainerSize } from "./Container.js"
+export { default } from "./Container.js"

package/src/layout/Divider/Divider.scss

@@ -0,0 +1,117 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Divider Component
+ *
+ * Construction line motif - blueprint/draft aesthetic
+ ******************************************************************************/
+
+.bc-divider {
+  border: none;
+  background-color: $border-default;
+
+  /***************************************************************************
+   * Orientation Variants
+   ***************************************************************************/
+
+  &--horizontal {
+    width: 100%;
+    height: 1px;
+  }
+
+  &--vertical {
+    width: 1px;
+    height: 100%;
+    min-height: 24px;
+  }
+
+  /***************************************************************************
+   * Style Variants
+   ***************************************************************************/
+
+  &--solid {
+    background-color: $border-default;
+  }
+
+  &--dashed {
+    background-color: transparent;
+
+    &.bc-divider--horizontal {
+      background-image: linear-gradient(
+        to right,
+        $border-default 50%,
+        transparent 50%
+      );
+      background-size: 8px 1px;
+      background-repeat: repeat-x;
+    }
+
+    &.bc-divider--vertical {
+      background-image: linear-gradient(
+        to bottom,
+        $border-default 50%,
+        transparent 50%
+      );
+      background-size: 1px 8px;
+      background-repeat: repeat-y;
+    }
+  }
+
+  // Construction line motif - blueprint aesthetic
+  &--construction {
+    background-color: $charcoal;
+    opacity: 0.15;
+
+    &.bc-divider--horizontal {
+      height: 1px;
+    }
+
+    &.bc-divider--vertical {
+      width: 1px;
+    }
+  }
+
+  /***************************************************************************
+   * Spacing Variants
+   ***************************************************************************/
+
+  &--spacing-none {
+    margin: 0;
+  }
+
+  &--spacing-sm {
+    &.bc-divider--horizontal {
+      margin-top: $space-2;
+      margin-bottom: $space-2;
+    }
+
+    &.bc-divider--vertical {
+      margin-left: $space-2;
+      margin-right: $space-2;
+    }
+  }
+
+  &--spacing-md {
+    &.bc-divider--horizontal {
+      margin-top: $space-4;
+      margin-bottom: $space-4;
+    }
+
+    &.bc-divider--vertical {
+      margin-left: $space-4;
+      margin-right: $space-4;
+    }
+  }
+
+  &--spacing-lg {
+    &.bc-divider--horizontal {
+      margin-top: $space-6;
+      margin-bottom: $space-6;
+    }
+
+    &.bc-divider--vertical {
+      margin-left: $space-6;
+      margin-right: $space-6;
+    }
+  }
+}

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

@@ -0,0 +1,32 @@
+import cx from "classnames"
+
+export type DividerOrientation = "horizontal" | "vertical"
+export type DividerVariant = "solid" | "dashed" | "construction"
+
+export interface DividerProps {
+    className?: string
+    style?: React.CSSProperties
+    orientation?: DividerOrientation
+    variant?: DividerVariant
+    spacing?: "none" | "sm" | "md" | "lg"
+}
+
+export function Divider({
+    className,
+    style,
+    orientation = "horizontal",
+    variant = "solid",
+    spacing = "md",
+}: DividerProps) {
+    const classes = cx(
+        "bc-divider",
+        `bc-divider--${orientation}`,
+        `bc-divider--${variant}`,
+        `bc-divider--spacing-${spacing}`,
+        className
+    )
+
+    return <hr className={classes} style={style} />
+}
+
+export default Divider

package/src/layout/Divider/index.ts

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

package/src/layout/Grid/Grid.scss

@@ -0,0 +1,81 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Grid Component
+ *
+ * Responsive CSS Grid system
+ ******************************************************************************/
+
+.bc-grid {
+  display: grid;
+  width: 100%;
+
+  /***************************************************************************
+   * Column Variants
+   ***************************************************************************/
+
+  &--cols-1 { grid-template-columns: repeat(1, 1fr); }
+  &--cols-2 { grid-template-columns: repeat(2, 1fr); }
+  &--cols-3 { grid-template-columns: repeat(3, 1fr); }
+  &--cols-4 { grid-template-columns: repeat(4, 1fr); }
+  &--cols-6 { grid-template-columns: repeat(6, 1fr); }
+  &--cols-12 { grid-template-columns: repeat(12, 1fr); }
+
+  @include md-up {
+    &--cols-md-1 { grid-template-columns: repeat(1, 1fr); }
+    &--cols-md-2 { grid-template-columns: repeat(2, 1fr); }
+    &--cols-md-3 { grid-template-columns: repeat(3, 1fr); }
+    &--cols-md-4 { grid-template-columns: repeat(4, 1fr); }
+    &--cols-md-6 { grid-template-columns: repeat(6, 1fr); }
+    &--cols-md-12 { grid-template-columns: repeat(12, 1fr); }
+  }
+
+  @include lg-up {
+    &--cols-lg-1 { grid-template-columns: repeat(1, 1fr); }
+    &--cols-lg-2 { grid-template-columns: repeat(2, 1fr); }
+    &--cols-lg-3 { grid-template-columns: repeat(3, 1fr); }
+    &--cols-lg-4 { grid-template-columns: repeat(4, 1fr); }
+    &--cols-lg-6 { grid-template-columns: repeat(6, 1fr); }
+    &--cols-lg-12 { grid-template-columns: repeat(12, 1fr); }
+  }
+
+  /***************************************************************************
+   * Gap Variants
+   ***************************************************************************/
+
+  &--gap-none { gap: 0; }
+  &--gap-sm { gap: $space-2; }
+  &--gap-md { gap: $space-3; }
+  &--gap-lg { gap: $space-4; }
+
+  /***************************************************************************
+   * Grid Item
+   ***************************************************************************/
+
+  &__item {
+    &--span-1 { grid-column: span 1; }
+    &--span-2 { grid-column: span 2; }
+    &--span-3 { grid-column: span 3; }
+    &--span-4 { grid-column: span 4; }
+    &--span-6 { grid-column: span 6; }
+    &--span-12 { grid-column: span 12; }
+
+    @include md-up {
+      &--span-md-1 { grid-column: span 1; }
+      &--span-md-2 { grid-column: span 2; }
+      &--span-md-3 { grid-column: span 3; }
+      &--span-md-4 { grid-column: span 4; }
+      &--span-md-6 { grid-column: span 6; }
+      &--span-md-12 { grid-column: span 12; }
+    }
+
+    @include lg-up {
+      &--span-lg-1 { grid-column: span 1; }
+      &--span-lg-2 { grid-column: span 2; }
+      &--span-lg-3 { grid-column: span 3; }
+      &--span-lg-4 { grid-column: span 4; }
+      &--span-lg-6 { grid-column: span 6; }
+      &--span-lg-12 { grid-column: span 12; }
+    }
+  }
+}