@buildcanada/components 0.3.4 → 0.3.5

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

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.stories.tsx

@@ -0,0 +1,204 @@
+import type { Meta, StoryObj } from "@storybook/react"
+import { within, userEvent, expect, fn } from "@storybook/test"
+import { useState } from "react"
+
+import { Checkbox } from "./Checkbox"
+
+const meta: Meta<typeof Checkbox> = {
+    title: "Components/Primitives/Checkbox",
+    component: Checkbox,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A styled checkbox component with label support.
+
+## Usage
+
+\`\`\`tsx
+import { Checkbox } from "@buildcanada/components"
+
+<Checkbox label="I agree to the terms" />
+\`\`\`
+
+## Controlled vs Uncontrolled
+
+Use \`defaultChecked\` for uncontrolled or \`checked\` with \`onChange\` for controlled:
+
+\`\`\`tsx
+// Uncontrolled
+<Checkbox label="Option" defaultChecked />
+
+// Controlled
+<Checkbox
+  label="Option"
+  checked={isChecked}
+  onChange={(e) => setIsChecked(e.target.checked)}
+/>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        label: { description: "The label text displayed next to the checkbox" },
+        disabled: { description: "Whether the checkbox is disabled" },
+        defaultChecked: { description: "Initial checked state (uncontrolled)" },
+        checked: { description: "Controlled checked state" },
+        onChange: { description: "Callback when checkbox state changes" },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Checkbox>
+
+export const Default: Story = {
+    args: {
+        label: "I agree to the terms and conditions",
+    },
+}
+
+export const Checked: Story = {
+    args: {
+        label: "Subscribe to newsletter",
+        defaultChecked: true,
+    },
+}
+
+export const Unchecked: Story = {
+    args: {
+        label: "Remember my preferences",
+        defaultChecked: false,
+    },
+}
+
+export const Disabled: Story = {
+    args: {
+        label: "This option is disabled",
+        disabled: true,
+    },
+}
+
+export const DisabledChecked: Story = {
+    args: {
+        label: "This option is checked and disabled",
+        defaultChecked: true,
+        disabled: true,
+    },
+}
+
+export const LongLabel: Story = {
+    args: {
+        label: "By checking this box, I confirm that I have read and understood the privacy policy, terms of service, and agree to receive communications from Build Canada.",
+    },
+}
+
+// Interactive test: Click to toggle
+export const ClickTest: Story = {
+    args: {
+        label: "Click to toggle",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /click to toggle/i })
+
+        await expect(checkbox).not.toBeChecked()
+        await userEvent.click(checkbox)
+        await expect(checkbox).toBeChecked()
+        await expect(args.onChange).toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Double click
+export const DoubleClickTest: Story = {
+    args: {
+        label: "Double click test",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /double click/i })
+
+        await expect(checkbox).not.toBeChecked()
+        await userEvent.click(checkbox)
+        await expect(checkbox).toBeChecked()
+        await userEvent.click(checkbox)
+        await expect(checkbox).not.toBeChecked()
+    },
+}
+
+// Interactive test: Disabled should not toggle
+export const DisabledClickTest: Story = {
+    args: {
+        label: "Disabled checkbox",
+        disabled: true,
+        onChange: fn(),
+    },
+    play: async ({ canvasElement, args }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /disabled checkbox/i })
+
+        await expect(checkbox).toBeDisabled()
+        await userEvent.click(checkbox)
+        await expect(args.onChange).not.toHaveBeenCalled()
+    },
+}
+
+// Interactive test: Keyboard interaction
+export const KeyboardTest: Story = {
+    args: {
+        label: "Keyboard toggle",
+        onChange: fn(),
+    },
+    play: async ({ canvasElement }) => {
+        const canvas = within(canvasElement)
+        const checkbox = canvas.getByRole("checkbox", { name: /keyboard toggle/i })
+
+        checkbox.focus()
+        await expect(checkbox).toHaveFocus()
+        await userEvent.keyboard(" ")
+        await expect(checkbox).toBeChecked()
+    },
+}
+
+export const Controlled: Story = {
+    render: function ControlledCheckbox() {
+        const [checked, setChecked] = useState(false)
+        return (
+            <div>
+                <Checkbox
+                    label={`Controlled checkbox (${checked ? "checked" : "unchecked"})`}
+                    checked={checked}
+                    onChange={(e) => setChecked(e.target.checked)}
+                />
+                <p style={{ marginTop: "16px", fontFamily: "sans-serif", fontSize: "14px" }}>
+                    The checkbox is currently: <strong>{checked ? "checked" : "unchecked"}</strong>
+                </p>
+            </div>
+        )
+    },
+}
+
+export const MultipleCheckboxes: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "12px" }}>
+            <Checkbox label="Option A" defaultChecked />
+            <Checkbox label="Option B" />
+            <Checkbox label="Option C" />
+            <Checkbox label="Option D (disabled)" disabled />
+        </div>
+    ),
+}
+
+export const FormExample: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "16px", maxWidth: "500px" }}>
+            <h3 style={{ margin: 0, fontFamily: "sans-serif" }}>Communication Preferences</h3>
+            <Checkbox label="Email updates about new features" defaultChecked />
+            <Checkbox label="Weekly newsletter" defaultChecked />
+            <Checkbox label="Partner offers and promotions" />
+            <Checkbox label="Account activity alerts" defaultChecked />
+        </div>
+    ),
+}

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

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