@buildcanada/components 0.1.0

package/src/primitives/Button/Button.scss

@@ -0,0 +1,218 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Button Component
+ *
+ * Design notes:
+ * - Square corners (border-radius: 0) per brand motif "Huge Square Buttons"
+ * - Uppercase text with letter-spacing
+ * - Three sizes: sm (36px), md (44px), lg (56px)
+ ******************************************************************************/
+
+.bc-btn {
+  @include button-text-md;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: $space-1;
+  border: 2px solid transparent;
+  border-radius: $radius-none;
+  cursor: pointer;
+  text-decoration: none;
+  transition: all $transition-fast;
+  white-space: nowrap;
+
+  &:focus-visible {
+    outline: 2px solid $auburn;
+    outline-offset: 2px;
+  }
+
+  /***************************************************************************
+   * Size Variants
+   ***************************************************************************/
+
+  &--sm {
+    @include button-text-sm;
+    padding: $space-1 $space-2;
+    min-height: 36px;
+  }
+
+  &--md {
+    @include button-text-md;
+    padding: calc($space-1 + 4px) $space-3;
+    min-height: 44px;
+  }
+
+  &--lg {
+    @include button-text-lg;
+    padding: $space-2 $space-4;
+    min-height: 56px;
+  }
+
+  /***************************************************************************
+   * Solid Variants
+   ***************************************************************************/
+
+  &--solid-auburn {
+    background-color: $auburn;
+    border-color: $auburn;
+    color: $white;
+
+    &:hover:not(:disabled) {
+      background-color: $auburn-600;
+      border-color: $auburn-600;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $auburn-700;
+      border-color: $auburn-700;
+    }
+  }
+
+  &--solid-charcoal {
+    background-color: $charcoal;
+    border-color: $charcoal;
+    color: $white;
+
+    &:hover:not(:disabled) {
+      background-color: $gray-700;
+      border-color: $gray-700;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $gray-600;
+      border-color: $gray-600;
+    }
+  }
+
+  &--solid-linen {
+    background-color: $linen;
+    border-color: $linen;
+    color: $charcoal;
+
+    &:hover:not(:disabled) {
+      background-color: darken($linen, 5%);
+      border-color: darken($linen, 5%);
+    }
+
+    &:active:not(:disabled) {
+      background-color: darken($linen, 8%);
+      border-color: darken($linen, 8%);
+    }
+  }
+
+  /***************************************************************************
+   * Outline Variants
+   ***************************************************************************/
+
+  &--outline-auburn {
+    background-color: transparent;
+    border-color: $auburn;
+    color: $auburn;
+
+    &:hover:not(:disabled) {
+      background-color: $auburn;
+      color: $white;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $auburn-600;
+      border-color: $auburn-600;
+      color: $white;
+    }
+  }
+
+  &--outline-charcoal {
+    background-color: transparent;
+    border-color: $charcoal;
+    color: $charcoal;
+
+    &:hover:not(:disabled) {
+      background-color: $charcoal;
+      color: $white;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $gray-700;
+      border-color: $gray-700;
+      color: $white;
+    }
+  }
+
+  &--outline-white {
+    background-color: transparent;
+    border-color: $white;
+    color: $white;
+
+    &:hover:not(:disabled) {
+      background-color: $white;
+      color: $charcoal;
+    }
+
+    &:active:not(:disabled) {
+      background-color: $gray-100;
+      border-color: $gray-100;
+      color: $charcoal;
+    }
+  }
+
+  /***************************************************************************
+   * State Modifiers
+   ***************************************************************************/
+
+  &:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  &--icon-only {
+    padding: $space-1;
+
+    &.bc-btn--sm {
+      padding: calc($space-1 - 2px);
+      min-width: 36px;
+    }
+
+    &.bc-btn--md {
+      padding: calc($space-1 + 2px);
+      min-width: 44px;
+    }
+
+    &.bc-btn--lg {
+      padding: $space-2;
+      min-width: 56px;
+    }
+  }
+
+  &--full-width {
+    width: 100%;
+  }
+
+  /***************************************************************************
+   * Icon Styles
+   ***************************************************************************/
+
+  &__icon {
+    font-size: 0.875em;
+    transition: transform $transition-fast;
+
+    &--left {
+      margin-right: $space-1;
+    }
+
+    &--right {
+      margin-left: $space-1;
+    }
+  }
+
+  // Animated arrow on hover (buildcanada.com style)
+  &:hover:not(:disabled) &__icon--right {
+    transform: translateX(4px);
+  }
+
+  &__text {
+    // Ensure text is vertically centered
+    line-height: 1;
+  }
+}

package/src/primitives/Button/Button.tsx

@@ -0,0 +1,120 @@
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { IconDefinition, faArrowRight } from "@fortawesome/free-solid-svg-icons"
+
+export type ButtonVariant =
+    | "solid-auburn"
+    | "solid-charcoal"
+    | "solid-linen"
+    | "outline-auburn"
+    | "outline-charcoal"
+    | "outline-white"
+
+export type ButtonSize = "sm" | "md" | "lg"
+
+type ButtonCommonProps = {
+    children?: React.ReactNode
+    text?: string
+    className?: string
+    style?: React.CSSProperties
+    variant?: ButtonVariant
+    size?: ButtonSize
+    icon?: IconDefinition | null
+    iconPosition?: "left" | "right"
+    fullWidth?: boolean
+    disabled?: boolean
+    ariaLabel?: string
+    dataTrackNote?: string
+}
+
+type WithHrefProps = {
+    href: string
+    onClick?: never
+    type?: never
+}
+
+type WithOnClickProps = {
+    onClick?: () => void
+    href?: never
+    type?: "button" | "submit"
+}
+
+export type ButtonProps =
+    | (ButtonCommonProps & WithHrefProps)
+    | (ButtonCommonProps & WithOnClickProps)
+
+export function Button({
+    variant = "solid-auburn",
+    size = "md",
+    className,
+    style,
+    href,
+    onClick,
+    text,
+    children,
+    ariaLabel,
+    type = "button",
+    icon = faArrowRight,
+    iconPosition = "right",
+    fullWidth = false,
+    dataTrackNote,
+    disabled,
+}: ButtonProps) {
+    const classes = cx(
+        "bc-btn",
+        `bc-btn--${variant}`,
+        `bc-btn--${size}`,
+        className,
+        {
+            "bc-btn--icon-only": icon && !text && !children,
+            "bc-btn--full-width": fullWidth,
+        }
+    )
+
+    const content = (
+        <>
+            {iconPosition === "left" && icon && (
+                <FontAwesomeIcon
+                    className={cx("bc-btn__icon", { "bc-btn__icon--left": text || children })}
+                    icon={icon}
+                />
+            )}
+            {text && <span className="bc-btn__text">{text}</span>}
+            {children}
+            {iconPosition !== "left" && icon && (
+                <FontAwesomeIcon
+                    className={cx("bc-btn__icon", { "bc-btn__icon--right": text || children })}
+                    icon={icon}
+                />
+            )}
+        </>
+    )
+
+    if (href) {
+        const aProps = {
+            href: disabled ? undefined : href,
+            className: classes,
+            style,
+            "data-track-note": dataTrackNote,
+            onClick: disabled
+                ? (e: React.MouseEvent) => e.preventDefault()
+                : undefined,
+            "aria-label": ariaLabel,
+            "aria-disabled": disabled,
+        }
+        return <a {...aProps}>{content}</a>
+    }
+
+    const buttonProps = {
+        type,
+        className: classes,
+        style,
+        onClick,
+        "aria-label": ariaLabel,
+        "data-track-note": dataTrackNote,
+        disabled,
+    }
+    return <button {...buttonProps}>{content}</button>
+}
+
+export default Button

package/src/primitives/Button/index.ts

@@ -0,0 +1,2 @@
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button"
+export { default } from "./Button"

package/src/primitives/Checkbox/Checkbox.scss

@@ -0,0 +1,114 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * Checkbox Component
+ ******************************************************************************/
+
+.bc-checkbox {
+  display: inline-flex;
+
+  /***************************************************************************
+   * Hidden native input
+   ***************************************************************************/
+
+  &__input {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+
+  /***************************************************************************
+   * Label wrapper
+   ***************************************************************************/
+
+  &__label {
+    display: inline-flex;
+    align-items: center;
+    gap: $space-1;
+    cursor: pointer;
+    user-select: none;
+  }
+
+  /***************************************************************************
+   * Custom checkbox box
+   ***************************************************************************/
+
+  &__box {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    width: 20px;
+    height: 20px;
+    border: 2px solid $border-default;
+    border-radius: $radius-none;
+    background-color: $white;
+    transition: all $transition-fast;
+    flex-shrink: 0;
+  }
+
+  &__check {
+    width: 14px;
+    height: 14px;
+    color: $white;
+    opacity: 0;
+    transform: scale(0.8);
+    transition: all $transition-fast;
+  }
+
+  &__text {
+    @include body-2;
+    color: $text-primary;
+  }
+
+  /***************************************************************************
+   * States
+   ***************************************************************************/
+
+  // Hover
+  &__label:hover &__box {
+    border-color: $gray-400;
+  }
+
+  // Focus
+  &__input:focus-visible + &__label &__box {
+    outline: 2px solid $auburn;
+    outline-offset: 2px;
+  }
+
+  // Checked
+  &__input:checked + &__label &__box {
+    background-color: $auburn;
+    border-color: $auburn;
+  }
+
+  &__input:checked + &__label &__check {
+    opacity: 1;
+    transform: scale(1);
+  }
+
+  // Disabled
+  &--disabled &__label {
+    cursor: not-allowed;
+  }
+
+  &--disabled &__box {
+    background-color: $gray-100;
+    border-color: $gray-300;
+  }
+
+  &--disabled &__text {
+    color: $text-muted;
+  }
+
+  &--disabled &__input:checked + &__label &__box {
+    background-color: $gray-400;
+    border-color: $gray-400;
+  }
+}

package/src/primitives/Checkbox/Checkbox.tsx

@@ -0,0 +1,75 @@
+import cx from "classnames"
+import { forwardRef, useId } from "react"
+
+export interface CheckboxProps {
+    label: string
+    checked?: boolean
+    defaultChecked?: boolean
+    name?: string
+    id?: string
+    className?: string
+    disabled?: boolean
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void
+}
+
+export const Checkbox = forwardRef<HTMLInputElement, CheckboxProps>(
+    function Checkbox(
+        {
+            label,
+            checked,
+            defaultChecked,
+            name,
+            id: providedId,
+            className,
+            disabled = false,
+            onChange,
+        },
+        ref
+    ) {
+        const generatedId = useId()
+        const id = providedId || generatedId
+
+        const classes = cx(
+            "bc-checkbox",
+            { "bc-checkbox--disabled": disabled },
+            className
+        )
+
+        return (
+            <div className={classes}>
+                <input
+                    ref={ref}
+                    type="checkbox"
+                    id={id}
+                    name={name}
+                    checked={checked}
+                    defaultChecked={defaultChecked}
+                    disabled={disabled}
+                    className="bc-checkbox__input"
+                    onChange={onChange}
+                />
+                <label htmlFor={id} className="bc-checkbox__label">
+                    <span className="bc-checkbox__box">
+                        <svg
+                            className="bc-checkbox__check"
+                            viewBox="0 0 14 14"
+                            fill="none"
+                            xmlns="http://www.w3.org/2000/svg"
+                        >
+                            <path
+                                d="M11.5 4L5.5 10L2.5 7"
+                                stroke="currentColor"
+                                strokeWidth="2"
+                                strokeLinecap="square"
+                                strokeLinejoin="round"
+                            />
+                        </svg>
+                    </span>
+                    <span className="bc-checkbox__text">{label}</span>
+                </label>
+            </div>
+        )
+    }
+)
+
+export default Checkbox

package/src/primitives/Checkbox/index.ts

@@ -0,0 +1,2 @@
+export { Checkbox, type CheckboxProps } from "./Checkbox"
+export { default } from "./Checkbox"

package/src/primitives/TextField/TextField.scss

@@ -0,0 +1,93 @@
+@use "../../styles/tokens" as *;
+@use "../../styles/typography" as *;
+
+/*******************************************************************************
+ * TextField Component
+ ******************************************************************************/
+
+.bc-textfield {
+  display: flex;
+  flex-direction: column;
+  gap: calc($space-1 / 2);
+
+  /***************************************************************************
+   * Label
+   ***************************************************************************/
+
+  &__label {
+    @include label;
+    color: $text-primary;
+  }
+
+  &__required {
+    color: $auburn;
+    margin-left: 2px;
+  }
+
+  /***************************************************************************
+   * Input
+   ***************************************************************************/
+
+  &__input {
+    @include body-2;
+    width: 100%;
+    padding: calc($space-1 + 4px) $space-2;
+    border: 2px solid $border-default;
+    border-radius: $radius-none;
+    background-color: $white;
+    color: $text-primary;
+    transition: border-color $transition-fast, box-shadow $transition-fast;
+
+    &::placeholder {
+      color: $text-muted;
+    }
+
+    &:hover:not(:disabled) {
+      border-color: $gray-400;
+    }
+
+    &:focus {
+      outline: none;
+      border-color: $auburn;
+      box-shadow: 0 0 0 3px rgba($auburn, 0.1);
+    }
+
+    &:disabled {
+      background-color: $gray-100;
+      color: $text-muted;
+      cursor: not-allowed;
+    }
+  }
+
+  /***************************************************************************
+   * Hint & Error
+   ***************************************************************************/
+
+  &__hint {
+    @include body-3;
+    color: $text-secondary;
+    margin: 0;
+  }
+
+  &__error {
+    @include body-3;
+    color: $auburn;
+    margin: 0;
+  }
+
+  /***************************************************************************
+   * States
+   ***************************************************************************/
+
+  &--error &__input {
+    border-color: $auburn;
+
+    &:focus {
+      box-shadow: 0 0 0 3px rgba($auburn, 0.15);
+    }
+  }
+
+  &--disabled &__label {
+    color: $text-muted;
+  }
+}