@buildcanada/components 0.1.0

package/src/content/Hero/Hero.tsx

@@ -0,0 +1,63 @@
+import cx from "classnames"
+
+export type HeroVariant = "home" | "page" | "centered"
+export type HeroBackground = "white" | "linen" | "charcoal"
+
+export interface HeroProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    variant?: HeroVariant
+    background?: HeroBackground
+}
+
+export function Hero({
+    children,
+    className,
+    style,
+    variant = "page",
+    background = "linen",
+}: HeroProps) {
+    const classes = cx(
+        "bc-hero",
+        `bc-hero--${variant}`,
+        `bc-hero--bg-${background}`,
+        className
+    )
+
+    return (
+        <div className={classes} style={style}>
+            <div className="bc-hero__inner">{children}</div>
+        </div>
+    )
+}
+
+export interface HeroTitleProps {
+    children: React.ReactNode
+    className?: string
+    as?: "h1" | "h2"
+}
+
+export function HeroTitle({ children, className, as: Component = "h1" }: HeroTitleProps) {
+    return <Component className={cx("bc-hero__title", className)}>{children}</Component>
+}
+
+export interface HeroSubtitleProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function HeroSubtitle({ children, className }: HeroSubtitleProps) {
+    return <p className={cx("bc-hero__subtitle", className)}>{children}</p>
+}
+
+export interface HeroActionsProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function HeroActions({ children, className }: HeroActionsProps) {
+    return <div className={cx("bc-hero__actions", className)}>{children}</div>
+}
+
+export default Hero

package/src/content/Hero/index.ts

@@ -0,0 +1,13 @@
+export {
+    Hero,
+    HeroTitle,
+    HeroSubtitle,
+    HeroActions,
+    type HeroProps,
+    type HeroVariant,
+    type HeroBackground,
+    type HeroTitleProps,
+    type HeroSubtitleProps,
+    type HeroActionsProps,
+} from "./Hero"
+export { default } from "./Hero"

package/src/content/StatBlock/StatBlock.scss

@@ -0,0 +1,83 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * StatBlock Component
+ *
+ * Large formatted number with label, used for data display (canadaspends.com)
+ ******************************************************************************/
+
+.bc-stat-block {
+  display: flex;
+  flex-direction: column;
+  gap: calc($space-1 / 2);
+
+  /***************************************************************************
+   * Size Variants
+   ***************************************************************************/
+
+  &--sm {
+    .bc-stat-block__value {
+      @include h2;
+    }
+
+    .bc-stat-block__label {
+      @include label-sm;
+    }
+  }
+
+  &--md {
+    .bc-stat-block__value {
+      @include display-2;
+    }
+
+    .bc-stat-block__label {
+      @include label;
+    }
+  }
+
+  &--lg {
+    .bc-stat-block__value {
+      @include display-1;
+    }
+
+    .bc-stat-block__label {
+      @include h4;
+    }
+  }
+
+  /***************************************************************************
+   * Elements
+   ***************************************************************************/
+
+  &__value {
+    color: $charcoal;
+    font-variant-numeric: tabular-nums;
+  }
+
+  &__label {
+    color: $text-secondary;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+  }
+
+  &__description {
+    @include body-3;
+    color: $text-muted;
+    margin-top: calc($space-1 / 2);
+  }
+
+  &__change {
+    @include mono-sm;
+    color: $text-secondary;
+    margin-top: calc($space-1 / 2);
+
+    &--up {
+      color: $emerald-600;
+    }
+
+    &--down {
+      color: $auburn;
+    }
+  }
+}

package/src/content/StatBlock/StatBlock.tsx

@@ -0,0 +1,52 @@
+import cx from "classnames"
+
+export type StatBlockSize = "sm" | "md" | "lg"
+export type StatBlockTrend = "up" | "down" | "neutral"
+
+export interface StatBlockProps {
+    value: string | number
+    label: string
+    description?: string
+    change?: string
+    trend?: StatBlockTrend
+    size?: StatBlockSize
+    className?: string
+    style?: React.CSSProperties
+}
+
+export function StatBlock({
+    value,
+    label,
+    description,
+    change,
+    trend,
+    size = "md",
+    className,
+    style,
+}: StatBlockProps) {
+    const classes = cx("bc-stat-block", `bc-stat-block--${size}`, className)
+
+    return (
+        <div className={classes} style={style}>
+            <span className="bc-stat-block__value">{value}</span>
+            <span className="bc-stat-block__label">{label}</span>
+            {description && (
+                <span className="bc-stat-block__description">{description}</span>
+            )}
+            {change && (
+                <span
+                    className={cx("bc-stat-block__change", {
+                        "bc-stat-block__change--up": trend === "up",
+                        "bc-stat-block__change--down": trend === "down",
+                    })}
+                >
+                    {trend === "up" && "↑ "}
+                    {trend === "down" && "↓ "}
+                    {change}
+                </span>
+            )}
+        </div>
+    )
+}
+
+export default StatBlock

package/src/content/StatBlock/index.ts

@@ -0,0 +1,2 @@
+export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./StatBlock"
+export { default } from "./StatBlock"

package/src/index.ts

@@ -0,0 +1,57 @@
+/*******************************************************************************
+ * @buildcanada/components
+ *
+ * Build Canada Design System Components
+ ******************************************************************************/
+
+// Primitives
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./primitives/Button"
+export { TextField, type TextFieldProps, type TextFieldType } from "./primitives/TextField"
+export { Checkbox, type CheckboxProps } from "./primitives/Checkbox"
+
+// Layout
+export { Container, type ContainerProps, type ContainerSize } from "./layout/Container"
+export { Section, type SectionProps, type SectionBackground, type SectionSpacing } from "./layout/Section"
+export { Grid, GridItem, type GridProps, type GridItemProps, type GridColumns, type GridGap } from "./layout/Grid"
+export { Stack, type StackProps, type StackDirection, type StackSpacing, type StackAlign, type StackJustify } from "./layout/Stack"
+export { Divider, type DividerProps, type DividerOrientation, type DividerVariant } from "./layout/Divider"
+
+// Content
+export {
+    Card,
+    CardImage,
+    CardIcon,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardMeta,
+    CardStat,
+    CardAuthor,
+    type CardProps,
+    type CardVariant,
+    type CardImageProps,
+    type CardIconProps,
+    type CardContentProps,
+    type CardTitleProps,
+    type CardDescriptionProps,
+    type CardMetaProps,
+    type CardStatProps,
+    type CardAuthorProps,
+} from "./content/Card"
+export {
+    Hero,
+    HeroTitle,
+    HeroSubtitle,
+    HeroActions,
+    type HeroProps,
+    type HeroVariant,
+    type HeroBackground,
+    type HeroTitleProps,
+    type HeroSubtitleProps,
+    type HeroActionsProps,
+} from "./content/Hero"
+export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./content/StatBlock"
+
+// Navigation
+export { Header, type HeaderProps, type NavItem } from "./navigation/Header"
+export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./navigation/Footer"

package/src/layout/Container/Container.scss

@@ -0,0 +1,40 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Container Component
+ *
+ * Max-width container with responsive padding
+ ******************************************************************************/
+
+.bc-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $space-3;
+  padding-right: $space-3;
+
+  @include md-up {
+    padding-left: $space-5;
+    padding-right: $space-5;
+  }
+
+  &--sm {
+    max-width: 640px;
+  }
+
+  &--md {
+    max-width: 768px;
+  }
+
+  &--lg {
+    max-width: 1024px;
+  }
+
+  &--xl {
+    max-width: 1280px;
+  }
+
+  &--full {
+    max-width: none;
+  }
+}

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"
+export { default } from "./Container"

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.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"
+export { default } from "./Divider"

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; }
+    }
+  }
+}

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"
+export { default } from "./Grid"