@buildcanada/components 0.3.3 → 0.3.5

package/dist/primitives/Button/Button.js

@@ -0,0 +1,36 @@
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faArrowRight } from "@fortawesome/free-solid-svg-icons";
+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, }) {
+    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 = (_jsxs(_Fragment, { children: [iconPosition === "left" && icon && (_jsx(FontAwesomeIcon, { className: cx("bc-btn__icon", { "bc-btn__icon--left": text || children }), icon: icon })), text && _jsx("span", { className: "bc-btn__text", children: text }), children, iconPosition !== "left" && icon && (_jsx(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) => e.preventDefault()
+                : undefined,
+            "aria-label": ariaLabel,
+            "aria-disabled": disabled,
+        };
+        return _jsx("a", { ...aProps, children: content });
+    }
+    const buttonProps = {
+        type,
+        className: classes,
+        style,
+        onClick,
+        "aria-label": ariaLabel,
+        "data-track-note": dataTrackNote,
+        disabled,
+    };
+    return _jsx("button", { ...buttonProps, children: content });
+}
+export default Button;

package/dist/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/dist/primitives/Button/index.d.ts

@@ -0,0 +1,3 @@
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./Button.js";
+export { default } from "./Button.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/Button/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Button/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,KAAK,WAAW,EAAE,KAAK,aAAa,EAAE,KAAK,UAAU,EAAE,MAAM,aAAa,CAAA;AAC3F,OAAO,EAAE,OAAO,EAAE,MAAM,aAAa,CAAA"}

package/dist/primitives/Button/index.js

@@ -0,0 +1,2 @@
+export { Button } from "./Button.js";
+export { default } from "./Button.js";

package/dist/primitives/Checkbox/Checkbox.d.ts

@@ -0,0 +1,13 @@
+export interface CheckboxProps {
+    label: string;
+    checked?: boolean;
+    defaultChecked?: boolean;
+    name?: string;
+    id?: string;
+    className?: string;
+    disabled?: boolean;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+}
+export declare const Checkbox: import("react").ForwardRefExoticComponent<CheckboxProps & import("react").RefAttributes<HTMLInputElement>>;
+export default Checkbox;
+//# sourceMappingURL=Checkbox.d.ts.map

package/dist/primitives/Checkbox/Checkbox.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.d.ts","sourceRoot":"","sources":["../../../src/primitives/Checkbox/Checkbox.tsx"],"names":[],"mappings":"AAGA,MAAM,WAAW,aAAa;IAC1B,KAAK,EAAE,MAAM,CAAA;IACb,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,cAAc,CAAC,EAAE,OAAO,CAAA;IACxB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC9D;AAED,eAAO,MAAM,QAAQ,4GA0DpB,CAAA;AAED,eAAe,QAAQ,CAAA"}

package/dist/primitives/Checkbox/Checkbox.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import { forwardRef, useId } from "react";
+export const Checkbox = forwardRef(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 (_jsxs("div", { className: classes, children: [_jsx("input", { ref: ref, type: "checkbox", id: id, name: name, checked: checked, defaultChecked: defaultChecked, disabled: disabled, className: "bc-checkbox__input", onChange: onChange }), _jsxs("label", { htmlFor: id, className: "bc-checkbox__label", children: [_jsx("span", { className: "bc-checkbox__box", children: _jsx("svg", { className: "bc-checkbox__check", viewBox: "0 0 14 14", fill: "none", xmlns: "http://www.w3.org/2000/svg", children: _jsx("path", { d: "M11.5 4L5.5 10L2.5 7", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "square", strokeLinejoin: "round" }) }) }), _jsx("span", { className: "bc-checkbox__text", children: label })] })] }));
+});
+export default Checkbox;

package/dist/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/dist/primitives/Checkbox/index.d.ts

@@ -0,0 +1,3 @@
+export { Checkbox, type CheckboxProps } from "./Checkbox.js";
+export { default } from "./Checkbox.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/Checkbox/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/Checkbox/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,QAAQ,EAAE,KAAK,aAAa,EAAE,MAAM,eAAe,CAAA;AAC5D,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAA"}

package/dist/primitives/Checkbox/index.js

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

package/dist/primitives/TextField/TextField.d.ts

@@ -0,0 +1,22 @@
+export type TextFieldType = "text" | "email" | "password" | "number" | "tel" | "url";
+export interface TextFieldProps {
+    label?: string;
+    placeholder?: string;
+    value?: string;
+    defaultValue?: string;
+    type?: TextFieldType;
+    name?: string;
+    id?: string;
+    className?: string;
+    error?: string;
+    hint?: string;
+    disabled?: boolean;
+    required?: boolean;
+    autoComplete?: string;
+    onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
+    onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
+    onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
+}
+export declare const TextField: import("react").ForwardRefExoticComponent<TextFieldProps & import("react").RefAttributes<HTMLInputElement>>;
+export default TextField;
+//# sourceMappingURL=TextField.d.ts.map

package/dist/primitives/TextField/TextField.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextField.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextField/TextField.tsx"],"names":[],"mappings":"AAGA,MAAM,MAAM,aAAa,GAAG,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,CAAA;AAEpF,MAAM,WAAW,cAAc;IAC3B,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,WAAW,CAAC,EAAE,MAAM,CAAA;IACpB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,IAAI,CAAC,EAAE,aAAa,CAAA;IACpB,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,EAAE,CAAC,EAAE,MAAM,CAAA;IACX,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,KAAK,CAAC,EAAE,MAAM,CAAA;IACd,IAAI,CAAC,EAAE,MAAM,CAAA;IACb,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,QAAQ,CAAC,EAAE,OAAO,CAAA;IAClB,YAAY,CAAC,EAAE,MAAM,CAAA;IACrB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,WAAW,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IAC3D,MAAM,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;IACxD,OAAO,CAAC,EAAE,CAAC,CAAC,EAAE,KAAK,CAAC,UAAU,CAAC,gBAAgB,CAAC,KAAK,IAAI,CAAA;CAC5D;AAED,eAAO,MAAM,SAAS,6GA8ErB,CAAA;AAED,eAAe,SAAS,CAAA"}

package/dist/primitives/TextField/TextField.js

@@ -0,0 +1,14 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import cx from "classnames";
+import { forwardRef, useId } from "react";
+export const TextField = forwardRef(function TextField({ label, placeholder, value, defaultValue, type = "text", name, id: providedId, className, error, hint, disabled = false, required = false, autoComplete, onChange, onBlur, onFocus, }, ref) {
+    const generatedId = useId();
+    const id = providedId || generatedId;
+    const errorId = `${id}-error`;
+    const hintId = `${id}-hint`;
+    const hasError = Boolean(error);
+    const classes = cx("bc-textfield", { "bc-textfield--error": hasError }, { "bc-textfield--disabled": disabled }, className);
+    return (_jsxs("div", { className: classes, children: [label && (_jsxs("label", { htmlFor: id, className: "bc-textfield__label", children: [label, required && _jsx("span", { className: "bc-textfield__required", children: "*" })] })), _jsx("input", { ref: ref, type: type, id: id, name: name, value: value, defaultValue: defaultValue, placeholder: placeholder, disabled: disabled, required: required, autoComplete: autoComplete, className: "bc-textfield__input", "aria-invalid": hasError, "aria-describedby": [error && errorId, hint && hintId].filter(Boolean).join(" ") ||
+                    undefined, onChange: onChange, onBlur: onBlur, onFocus: onFocus }), hint && !error && (_jsx("p", { id: hintId, className: "bc-textfield__hint", children: hint })), error && (_jsx("p", { id: errorId, className: "bc-textfield__error", role: "alert", children: error }))] }));
+});
+export default TextField;

package/dist/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;
+  }
+}

package/dist/primitives/TextField/index.d.ts

@@ -0,0 +1,3 @@
+export { TextField, type TextFieldProps, type TextFieldType } from "./TextField.js";
+export { default } from "./TextField.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/primitives/TextField/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/primitives/TextField/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,cAAc,EAAE,KAAK,aAAa,EAAE,MAAM,gBAAgB,CAAA;AACnF,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAA"}

package/dist/primitives/TextField/index.js

@@ -0,0 +1,2 @@
+export { TextField } from "./TextField.js";
+export { default } from "./TextField.js";

package/dist/styles/fonts.scss

@@ -0,0 +1,27 @@
+/*******************************************************************************
+ * Build Canada Font Definitions
+ ******************************************************************************/
+
+@font-face {
+  font-family: 'Soehne Kraftig';
+  src: url('/assets/fonts/soehne-kraftig.woff2') format('woff2');
+  font-weight: 500;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Financier Text';
+  src: url('/assets/fonts/financier-text-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}
+
+@font-face {
+  font-family: 'Founders Grotesk Mono';
+  src: url('/assets/fonts/founders-grotesk-mono-regular.woff2') format('woff2');
+  font-weight: 400;
+  font-style: normal;
+  font-display: swap;
+}

package/dist/styles/main.scss

@@ -0,0 +1,36 @@
+/*******************************************************************************
+ * Build Canada Components - Main Stylesheet
+ *
+ * All @use statements must come first before any other rules
+ ******************************************************************************/
+
+@use "fonts";
+@use "tokens";
+@use "typography";
+
+// Component stylesheets (using @use to include their CSS output)
+@use "../primitives/Button/Button.scss";
+@use "../primitives/TextField/TextField.scss";
+@use "../primitives/Checkbox/Checkbox.scss";
+@use "../layout/Container/Container.scss";
+@use "../layout/Section/Section.scss";
+@use "../layout/Grid/Grid.scss";
+@use "../layout/Stack/Stack.scss";
+@use "../layout/Divider/Divider.scss";
+@use "../content/Card/Card.scss";
+@use "../content/Hero/Hero.scss";
+@use "../content/StatBlock/StatBlock.scss";
+@use "../navigation/Header/Header.scss";
+@use "../navigation/Footer/Footer.scss";
+@use "../feedback/Dialog/Dialog.scss";
+@use "../feedback/PopupForm/PopupForm.scss";
+
+/*******************************************************************************
+ * Base Styles
+ ******************************************************************************/
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}