@buildcanada/components 0.3.4 → 0.3.5

package/src/layout/Stack/Stack.stories.tsx

@@ -0,0 +1,342 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Stack } from "./Stack"
+
+const meta: Meta<typeof Stack> = {
+    title: "Components/Layout/Stack",
+    component: Stack,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A flexbox layout component for arranging items in a row or column with consistent spacing.
+
+## Usage
+
+\`\`\`tsx
+import { Stack } from "@buildcanada/components"
+
+<Stack direction="vertical" spacing="md">
+  <div>Item 1</div>
+  <div>Item 2</div>
+  <div>Item 3</div>
+</Stack>
+\`\`\`
+
+## Horizontal Layout
+
+\`\`\`tsx
+<Stack direction="horizontal" spacing="lg" align="center">
+  <Button>Action 1</Button>
+  <Button>Action 2</Button>
+</Stack>
+\`\`\`
+
+## Spacing Options
+
+- **none**: 0px
+- **xs**: 4px
+- **sm**: 8px
+- **md**: 16px
+- **lg**: 24px
+- **xl**: 32px
+                `,
+            },
+        },
+    },
+    argTypes: {
+        direction: {
+            control: "radio",
+            options: ["vertical", "horizontal"],
+            description: "Stack direction (column or row)",
+        },
+        spacing: {
+            control: "select",
+            options: ["none", "xs", "sm", "md", "lg", "xl"],
+            description: "Gap between items",
+        },
+        align: {
+            control: "select",
+            options: ["start", "center", "end", "stretch"],
+            description: "Cross-axis alignment (align-items)",
+        },
+        justify: {
+            control: "select",
+            options: ["start", "center", "end", "between", "around"],
+            description: "Main-axis alignment (justify-content)",
+        },
+        wrap: {
+            description: "Whether items should wrap to next line",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Stack>
+
+const StackItem = ({ children, height }: { children: React.ReactNode; height?: string }) => (
+    <div style={{
+        padding: "16px 24px",
+        backgroundColor: "#F6ECE3",
+        border: "1px solid #272727",
+        fontFamily: "sans-serif",
+        height: height || "auto",
+    }}>
+        {children}
+    </div>
+)
+
+export const Default: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "md",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const Vertical: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "md",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const Horizontal: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const NoSpacing: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "none",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const ExtraSmallSpacing: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "xs",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const LargeSpacing: Story = {
+    args: {
+        direction: "vertical",
+        spacing: "lg",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+}
+
+export const AlignCenter: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        align: "center",
+        children: (
+            <>
+                <StackItem height="60px">Tall</StackItem>
+                <StackItem height="40px">Medium</StackItem>
+                <StackItem height="80px">Taller</StackItem>
+            </>
+        ),
+    },
+}
+
+export const AlignStart: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        align: "start",
+        children: (
+            <>
+                <StackItem height="60px">Tall</StackItem>
+                <StackItem height="40px">Medium</StackItem>
+                <StackItem height="80px">Taller</StackItem>
+            </>
+        ),
+    },
+}
+
+export const AlignEnd: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        align: "end",
+        children: (
+            <>
+                <StackItem height="60px">Tall</StackItem>
+                <StackItem height="40px">Medium</StackItem>
+                <StackItem height="80px">Taller</StackItem>
+            </>
+        ),
+    },
+}
+
+export const JustifyBetween: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        justify: "between",
+        children: (
+            <>
+                <StackItem>Left</StackItem>
+                <StackItem>Center</StackItem>
+                <StackItem>Right</StackItem>
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: "100%" }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const JustifyCenter: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        justify: "center",
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ width: "100%" }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const WithWrap: Story = {
+    args: {
+        direction: "horizontal",
+        spacing: "md",
+        wrap: true,
+        children: (
+            <>
+                <StackItem>Item 1</StackItem>
+                <StackItem>Item 2</StackItem>
+                <StackItem>Item 3</StackItem>
+                <StackItem>Item 4</StackItem>
+                <StackItem>Item 5</StackItem>
+                <StackItem>Item 6</StackItem>
+                <StackItem>Item 7</StackItem>
+                <StackItem>Item 8</StackItem>
+            </>
+        ),
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ maxWidth: "400px" }}>
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export const AllSpacings: Story = {
+    render: () => (
+        <Stack direction="vertical" spacing="lg">
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>None</p>
+                <Stack direction="horizontal" spacing="none">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Extra Small</p>
+                <Stack direction="horizontal" spacing="xs">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Small</p>
+                <Stack direction="horizontal" spacing="sm">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Medium</p>
+                <Stack direction="horizontal" spacing="md">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Large</p>
+                <Stack direction="horizontal" spacing="lg">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Extra Large</p>
+                <Stack direction="horizontal" spacing="xl">
+                    <StackItem>1</StackItem>
+                    <StackItem>2</StackItem>
+                    <StackItem>3</StackItem>
+                </Stack>
+            </div>
+        </Stack>
+    ),
+}

package/src/layout/Stack/Stack.tsx

@@ -0,0 +1,48 @@
+import cx from "classnames"
+
+export type StackDirection = "vertical" | "horizontal"
+export type StackSpacing = "none" | "xs" | "sm" | "md" | "lg" | "xl"
+export type StackAlign = "start" | "center" | "end" | "stretch"
+export type StackJustify = "start" | "center" | "end" | "between" | "around"
+
+export interface StackProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    direction?: StackDirection
+    spacing?: StackSpacing
+    align?: StackAlign
+    justify?: StackJustify
+    wrap?: boolean
+    as?: "div" | "ul" | "ol" | "nav"
+}
+
+export function Stack({
+    children,
+    className,
+    style,
+    direction = "vertical",
+    spacing = "md",
+    align = "stretch",
+    justify = "start",
+    wrap = false,
+    as: Component = "div",
+}: StackProps) {
+    const classes = cx(
+        "bc-stack",
+        `bc-stack--${direction}`,
+        `bc-stack--spacing-${spacing}`,
+        `bc-stack--align-${align}`,
+        `bc-stack--justify-${justify}`,
+        { "bc-stack--wrap": wrap },
+        className
+    )
+
+    return (
+        <Component className={classes} style={style}>
+            {children}
+        </Component>
+    )
+}
+
+export default Stack

package/src/layout/Stack/index.ts

@@ -0,0 +1,9 @@
+export {
+    Stack,
+    type StackProps,
+    type StackDirection,
+    type StackSpacing,
+    type StackAlign,
+    type StackJustify,
+} from "./Stack.js"
+export { default } from "./Stack.js"

package/src/navigation/Footer/Footer.scss

@@ -0,0 +1,233 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Footer Component
+ ******************************************************************************/
+
+.bc-footer {
+  background-color: $charcoal;
+  color: $white;
+  padding: $space-8 0;
+
+  /***************************************************************************
+   * Inner Container
+   ***************************************************************************/
+
+  &__inner {
+    max-width: 1280px;
+    margin: 0 auto;
+    padding: 0 $space-3;
+
+    @include md-up {
+      padding: 0 $space-5;
+    }
+  }
+
+  /***************************************************************************
+   * Main Section
+   ***************************************************************************/
+
+  &__main {
+    display: grid;
+    gap: $space-6;
+
+    @include md-up {
+      grid-template-columns: auto 1fr auto;
+      align-items: start;
+    }
+  }
+
+  /***************************************************************************
+   * Logo
+   ***************************************************************************/
+
+  &__logo {
+    img {
+      height: 32px;
+      width: auto;
+      filter: brightness(0) invert(1);
+    }
+  }
+
+  /***************************************************************************
+   * Navigation
+   ***************************************************************************/
+
+  &__nav {
+    @include md-up {
+      justify-self: center;
+    }
+  }
+
+  &__nav-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-1 $space-3;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  &__nav-link {
+    @include label;
+    color: rgba($white, 0.8);
+    text-decoration: none;
+    transition: color $transition-fast;
+
+    &:hover {
+      color: $white;
+    }
+  }
+
+  /***************************************************************************
+   * Newsletter
+   ***************************************************************************/
+
+  &__newsletter {
+    @include md-up {
+      text-align: right;
+      max-width: 320px;
+    }
+  }
+
+  &__newsletter-heading {
+    @include h4;
+    color: $white;
+    margin: 0 0 calc($space-1 / 2);
+  }
+
+  &__newsletter-description {
+    @include body-3;
+    color: rgba($white, 0.7);
+    margin: 0 0 $space-2;
+  }
+
+  &__newsletter-form {
+    display: flex;
+    gap: calc($space-1 / 2);
+  }
+
+  &__newsletter-input {
+    @include body-3;
+    flex: 1;
+    min-width: 0;
+    padding: $space-1 $space-2;
+    border: none;
+    border-radius: $radius-none;
+    background-color: rgba($white, 0.1);
+    color: $white;
+
+    &::placeholder {
+      color: rgba($white, 0.5);
+    }
+
+    &:focus {
+      outline: 2px solid $auburn;
+      outline-offset: -2px;
+    }
+  }
+
+  &__newsletter-button {
+    @include button-text-sm;
+    padding: $space-1 $space-2;
+    background-color: $auburn;
+    color: $white;
+    border: none;
+    border-radius: $radius-none;
+    cursor: pointer;
+    transition: background-color $transition-fast;
+
+    &:hover {
+      background-color: $auburn-600;
+    }
+  }
+
+  /***************************************************************************
+   * Bottom Section
+   ***************************************************************************/
+
+  &__bottom {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: space-between;
+    gap: $space-2;
+    margin-top: $space-6;
+    padding-top: $space-4;
+    border-top: 1px solid rgba($white, 0.1);
+  }
+
+  /***************************************************************************
+   * Social Links
+   ***************************************************************************/
+
+  &__social {
+    display: flex;
+    gap: $space-2;
+  }
+
+  &__social-link {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    color: rgba($white, 0.7);
+    transition: color $transition-fast;
+
+    &:hover {
+      color: $white;
+    }
+
+    svg {
+      width: 20px;
+      height: 20px;
+    }
+  }
+
+  /***************************************************************************
+   * Copyright
+   ***************************************************************************/
+
+  &__copyright {
+    @include body-3;
+    color: rgba($white, 0.5);
+    margin: 0;
+  }
+
+  /***************************************************************************
+   * Quote
+   ***************************************************************************/
+
+  &__quote {
+    margin-top: $space-6;
+    padding-top: $space-4;
+    border-top: 1px solid rgba($white, 0.1);
+    text-align: center;
+  }
+
+  &__quote-text {
+    @include body-1;
+    font-style: italic;
+    color: rgba($white, 0.8);
+    margin: 0 0 $space-1;
+    max-width: 640px;
+    margin-left: auto;
+    margin-right: auto;
+
+    &::before {
+      content: '"';
+    }
+
+    &::after {
+      content: '"';
+    }
+  }
+
+  &__quote-attribution {
+    @include micro;
+    color: rgba($white, 0.5);
+    font-style: normal;
+  }
+}