@buildcanada/components 0.1.0

package/package.json

@@ -0,0 +1,67 @@
+{
+  "name": "@buildcanada/components",
+  "version": "0.1.0",
+  "description": "Build Canada design system components",
+  "type": "module",
+  "main": "src/index.ts",
+  "types": "src/index.ts",
+  "exports": {
+    ".": {
+      "types": "./src/index.ts",
+      "import": "./src/index.ts"
+    },
+    "./styles.css": "./src/styles/main.scss",
+    "./src/styles/main.scss": "./src/styles/main.scss",
+    "./src/*": "./src/*"
+  },
+  "files": [
+    "src",
+    "!src/**/*.test.ts",
+    "!src/**/*.test.tsx",
+    "!src/**/*.stories.tsx"
+  ],
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/BuildCanada/bcds.git",
+    "directory": "packages/components"
+  },
+  "bugs": {
+    "url": "https://github.com/BuildCanada/bcds/issues"
+  },
+  "homepage": "https://github.com/BuildCanada/bcds#readme",
+  "publishConfig": {
+    "access": "public"
+  },
+  "scripts": {
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run",
+    "test:watch": "vitest"
+  },
+  "keywords": [
+    "components",
+    "design-system",
+    "react",
+    "build-canada"
+  ],
+  "author": "Build Canada",
+  "license": "MIT",
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.7.2",
+    "@fortawesome/free-solid-svg-icons": "^6.7.2",
+    "@fortawesome/react-fontawesome": "^0.2.2",
+    "classnames": "^2.5.1"
+  },
+  "devDependencies": {
+    "@testing-library/dom": "^10.4.1",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/react": "^16.3.0",
+    "eslint": "^9.37.0",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "happy-dom": "^20.1.0",
+    "vitest": "^4.0.15"
+  }
+}

package/src/content/Card/Card.scss

@@ -0,0 +1,281 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Card Component
+ ******************************************************************************/
+
+.bc-card {
+  display: flex;
+  flex-direction: column;
+  background-color: $white;
+  border: 1px solid $border-muted;
+  border-radius: $radius-none;
+  overflow: hidden;
+  text-decoration: none;
+  color: inherit;
+  transition: box-shadow $transition-fast, transform $transition-fast;
+
+  /***************************************************************************
+   * Variant: Default Card
+   ***************************************************************************/
+
+  &--default {
+    .bc-card__content {
+      padding: $space-3;
+    }
+
+    .bc-card__title {
+      @include h3;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-2;
+      color: $text-secondary;
+      margin: 0;
+    }
+
+    .bc-card__meta {
+      @include micro;
+      color: $text-muted;
+      margin-top: $space-2;
+    }
+  }
+
+  // Interactive cards (when rendered as a or button)
+  &--interactive {
+    cursor: pointer;
+
+    &:hover {
+      box-shadow: $shadow-md;
+      transform: translateY(-2px);
+    }
+
+    &:focus-visible {
+      outline: 2px solid $auburn;
+      outline-offset: 2px;
+    }
+  }
+
+  // Button-specific styles
+  &--button {
+    border: 1px solid $border-muted;
+    text-align: left;
+    width: 100%;
+  }
+
+  /***************************************************************************
+   * Variant: Project Card
+   ***************************************************************************/
+
+  &--project {
+    .bc-card__image {
+      aspect-ratio: 16 / 9;
+    }
+
+    .bc-card__content {
+      padding: $space-3;
+    }
+
+    .bc-card__title {
+      @include h3;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-3;
+      color: $text-secondary;
+      margin: 0;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Memo Card
+   ***************************************************************************/
+
+  &--memo {
+    .bc-card__content {
+      padding: $space-3;
+    }
+
+    .bc-card__title {
+      @include h3;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-2;
+      color: $text-secondary;
+      margin: 0 0 $space-2;
+      display: -webkit-box;
+      -webkit-line-clamp: 3;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Feature Card
+   ***************************************************************************/
+
+  &--feature {
+    text-align: center;
+    padding: $space-4;
+
+    .bc-card__icon {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 64px;
+      height: 64px;
+      margin: 0 auto $space-2;
+      background-color: $linen;
+      border-radius: $radius-none;
+      color: $auburn;
+      font-size: 1.5rem;
+    }
+
+    .bc-card__title {
+      @include h4;
+      margin: 0 0 $space-1;
+    }
+
+    .bc-card__description {
+      @include body-3;
+      color: $text-secondary;
+      margin: 0;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Stat Card
+   ***************************************************************************/
+
+  &--stat {
+    padding: $space-3;
+    background-color: $linen;
+    border: none;
+
+    .bc-card__stat {
+      display: flex;
+      flex-direction: column;
+      gap: calc($space-1 / 2);
+    }
+
+    .bc-card__stat-value {
+      @include display-2;
+      color: $charcoal;
+    }
+
+    .bc-card__stat-label {
+      @include label;
+      color: $text-secondary;
+    }
+
+    .bc-card__stat-change {
+      @include mono-sm;
+      color: $text-secondary;
+
+      &--up {
+        color: $emerald-600;
+      }
+
+      &--down {
+        color: $auburn;
+      }
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Profile Card
+   ***************************************************************************/
+
+  &--profile {
+    text-align: center;
+    padding: $space-4;
+
+    .bc-card__image {
+      width: 120px;
+      height: 120px;
+      margin: 0 auto $space-2;
+      border-radius: $radius-full;
+      overflow: hidden;
+
+      img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+      }
+    }
+
+    .bc-card__title {
+      @include h4;
+      margin: 0 0 calc($space-1 / 2);
+    }
+
+    .bc-card__description {
+      @include body-3;
+      color: $text-secondary;
+      margin: 0;
+    }
+
+    .bc-card__meta {
+      display: flex;
+      justify-content: center;
+      gap: $space-1;
+      margin-top: $space-2;
+    }
+  }
+
+  /***************************************************************************
+   * Subcomponents
+   ***************************************************************************/
+
+  &__image {
+    width: 100%;
+    overflow: hidden;
+
+    img {
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
+  }
+
+  &__content {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__author {
+    display: flex;
+    align-items: center;
+    gap: $space-1;
+    margin-top: auto;
+    padding-top: $space-2;
+  }
+
+  &__author-avatar {
+    width: 40px;
+    height: 40px;
+    border-radius: $radius-full;
+    object-fit: cover;
+  }
+
+  &__author-info {
+    display: flex;
+    flex-direction: column;
+  }
+
+  &__author-name {
+    @include label-sm;
+    color: $text-primary;
+  }
+
+  &__author-role {
+    @include body-3;
+    color: $text-secondary;
+  }
+}

package/src/content/Card/Card.tsx

@@ -0,0 +1,170 @@
+import cx from "classnames"
+
+export type CardVariant = "default" | "project" | "memo" | "feature" | "stat" | "profile"
+
+export interface CardProps {
+    children: React.ReactNode
+    className?: string
+    style?: React.CSSProperties
+    variant?: CardVariant
+    href?: string
+    onClick?: () => void
+}
+
+export function Card({
+    children,
+    className,
+    style,
+    variant = "default",
+    href,
+    onClick,
+}: CardProps) {
+    const isInteractive = Boolean(href || onClick)
+    const isButton = Boolean(onClick)
+
+    const classes = cx(
+        "bc-card",
+        `bc-card--${variant}`,
+        {
+            "bc-card--interactive": isInteractive,
+            "bc-card--button": isButton,
+        },
+        className
+    )
+
+    if (href) {
+        return (
+            <a href={href} className={classes} style={style}>
+                {children}
+            </a>
+        )
+    }
+
+    if (onClick) {
+        return (
+            <button type="button" className={classes} style={style} onClick={onClick}>
+                {children}
+            </button>
+        )
+    }
+
+    return (
+        <div className={classes} style={style}>
+            {children}
+        </div>
+    )
+}
+
+/*******************************************************************************
+ * Card Subcomponents
+ ******************************************************************************/
+
+export interface CardImageProps {
+    src: string
+    alt: string
+    className?: string
+}
+
+export function CardImage({ src, alt, className }: CardImageProps) {
+    return (
+        <div className={cx("bc-card__image", className)}>
+            <img src={src} alt={alt} />
+        </div>
+    )
+}
+
+export interface CardIconProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardIcon({ children, className }: CardIconProps) {
+    return <div className={cx("bc-card__icon", className)}>{children}</div>
+}
+
+export interface CardContentProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardContent({ children, className }: CardContentProps) {
+    return <div className={cx("bc-card__content", className)}>{children}</div>
+}
+
+export interface CardTitleProps {
+    children: React.ReactNode
+    className?: string
+    as?: "h2" | "h3" | "h4" | "h5" | "h6"
+}
+
+export function CardTitle({ children, className, as: Component = "h3" }: CardTitleProps) {
+    return <Component className={cx("bc-card__title", className)}>{children}</Component>
+}
+
+export interface CardDescriptionProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardDescription({ children, className }: CardDescriptionProps) {
+    return <p className={cx("bc-card__description", className)}>{children}</p>
+}
+
+export interface CardMetaProps {
+    children: React.ReactNode
+    className?: string
+}
+
+export function CardMeta({ children, className }: CardMetaProps) {
+    return <div className={cx("bc-card__meta", className)}>{children}</div>
+}
+
+export interface CardStatProps {
+    value: string | number
+    label: string
+    change?: string
+    changeDirection?: "up" | "down" | "neutral"
+    className?: string
+}
+
+export function CardStat({ value, label, change, changeDirection, className }: CardStatProps) {
+    return (
+        <div className={cx("bc-card__stat", className)}>
+            <span className="bc-card__stat-value">{value}</span>
+            <span className="bc-card__stat-label">{label}</span>
+            {change && (
+                <span
+                    className={cx("bc-card__stat-change", {
+                        "bc-card__stat-change--up": changeDirection === "up",
+                        "bc-card__stat-change--down": changeDirection === "down",
+                    })}
+                >
+                    {change}
+                </span>
+            )}
+        </div>
+    )
+}
+
+export interface CardAuthorProps {
+    name: string
+    role?: string
+    avatar?: string
+    className?: string
+}
+
+export function CardAuthor({ name, role, avatar, className }: CardAuthorProps) {
+    return (
+        <div className={cx("bc-card__author", className)}>
+            {avatar && (
+                <img src={avatar} alt={name} className="bc-card__author-avatar" />
+            )}
+            <div className="bc-card__author-info">
+                <span className="bc-card__author-name">{name}</span>
+                {role && <span className="bc-card__author-role">{role}</span>}
+            </div>
+        </div>
+    )
+}
+
+export default Card

package/src/content/Card/index.ts

@@ -0,0 +1,22 @@
+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 "./Card"
+export { default } from "./Card"

package/src/content/Hero/Hero.scss

@@ -0,0 +1,150 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Hero Component
+ ******************************************************************************/
+
+.bc-hero {
+  width: 100%;
+  padding: $space-8 0;
+
+  @include md-up {
+    padding: $space-10 0;
+  }
+
+  /***************************************************************************
+   * 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;
+
+    .bc-hero__subtitle {
+      color: rgba($white, 0.8);
+    }
+  }
+
+  /***************************************************************************
+   * Inner Container
+   ***************************************************************************/
+
+  &__inner {
+    max-width: 1024px;
+    margin: 0 auto;
+    padding: 0 $space-3;
+
+    @include md-up {
+      padding: 0 $space-5;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Home (large, centered)
+   ***************************************************************************/
+
+  &--home {
+    padding: $space-10 0;
+
+    @include md-up {
+      padding: $space-16 0;
+    }
+
+    .bc-hero__inner {
+      text-align: center;
+      max-width: 900px;
+    }
+
+    .bc-hero__title {
+      @include display-1;
+      margin: 0 0 $space-3;
+    }
+
+    .bc-hero__subtitle {
+      @include body-lg;
+      max-width: 640px;
+      margin: 0 auto $space-4;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Page (standard page header)
+   ***************************************************************************/
+
+  &--page {
+    padding: $space-6 0;
+
+    @include md-up {
+      padding: $space-8 0;
+    }
+
+    .bc-hero__title {
+      @include display-2;
+      margin: 0 0 $space-2;
+    }
+
+    .bc-hero__subtitle {
+      @include body-1;
+      color: $text-secondary;
+      margin: 0;
+      max-width: 640px;
+    }
+  }
+
+  /***************************************************************************
+   * Variant: Centered
+   ***************************************************************************/
+
+  &--centered {
+    .bc-hero__inner {
+      text-align: center;
+    }
+
+    .bc-hero__title {
+      @include display-2;
+      margin: 0 0 $space-2;
+    }
+
+    .bc-hero__subtitle {
+      @include body-1;
+      color: $text-secondary;
+      margin: 0 auto;
+      max-width: 640px;
+    }
+  }
+
+  /***************************************************************************
+   * Subcomponents
+   ***************************************************************************/
+
+  &__title {
+    color: inherit;
+  }
+
+  &__subtitle {
+    color: $text-secondary;
+  }
+
+  &__actions {
+    display: flex;
+    flex-wrap: wrap;
+    gap: $space-2;
+    margin-top: $space-4;
+
+    .bc-hero--home &,
+    .bc-hero--centered & {
+      justify-content: center;
+    }
+  }
+}