@buildcanada/components 0.1.0 → 0.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@buildcanada/components",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Build Canada design system components",
   "type": "module",
   "main": "src/index.ts",

package/src/feedback/Dialog/Dialog.scss

@@ -0,0 +1,158 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Dialog Component
+ *
+ * A non-modal floating panel that doesn't block interaction with the UI.
+ * Sizes to its contents and can be positioned in corners.
+ ******************************************************************************/
+
+.bc-dialog {
+    position: fixed;
+    z-index: $z-popover;
+    background: $white;
+    border: 1px solid $border-default;
+    box-shadow: $shadow-lg;
+    max-width: calc(100vw - var(--bc-dialog-offset, 16px) * 2);
+    max-height: calc(100dvh - var(--bc-dialog-offset, 16px) * 2);
+
+    // Animation
+    animation: bc-dialog-enter $transition-base;
+}
+
+@keyframes bc-dialog-enter {
+    from {
+        opacity: 0;
+        transform: scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: scale(1);
+    }
+}
+
+/*******************************************************************************
+ * Dialog Positions
+ ******************************************************************************/
+
+.bc-dialog--top-left {
+    top: var(--bc-dialog-offset, 16px);
+    left: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--top-right {
+    top: var(--bc-dialog-offset, 16px);
+    right: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--bottom-left {
+    bottom: var(--bc-dialog-offset, 16px);
+    left: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--bottom-right {
+    bottom: var(--bc-dialog-offset, 16px);
+    right: var(--bc-dialog-offset, 16px);
+}
+
+.bc-dialog--center {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    animation: bc-dialog-enter-center $transition-base;
+}
+
+@keyframes bc-dialog-enter-center {
+    from {
+        opacity: 0;
+        transform: translate(-50%, -50%) scale(0.95);
+    }
+    to {
+        opacity: 1;
+        transform: translate(-50%, -50%) scale(1);
+    }
+}
+
+/*******************************************************************************
+ * Dialog Container
+ ******************************************************************************/
+
+.bc-dialog__container {
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+
+/*******************************************************************************
+ * Dialog Header
+ ******************************************************************************/
+
+.bc-dialog__header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    gap: $space-2;
+    padding: $space-2 $space-2 0 $space-3;
+    flex-shrink: 0;
+}
+
+.bc-dialog__title {
+    font-family: "Soehne Kraftig", "Helvetica Neue", Helvetica, Arial, sans-serif;
+    font-size: 1.125rem;
+    font-weight: 500;
+    line-height: 1.4;
+    color: $charcoal;
+    margin: 0;
+}
+
+.bc-dialog__close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 32px;
+    height: 32px;
+    padding: 0;
+    border: none;
+    background: transparent;
+    color: $gray-600;
+    cursor: pointer;
+    transition: background-color $transition-fast, color $transition-fast;
+    flex-shrink: 0;
+
+    &:hover {
+        background-color: $gray-100;
+        color: $charcoal;
+    }
+
+    &:focus-visible {
+        outline: 2px solid $auburn;
+        outline-offset: 2px;
+    }
+
+    svg {
+        width: 16px;
+        height: 16px;
+    }
+}
+
+/*******************************************************************************
+ * Dialog Description
+ ******************************************************************************/
+
+.bc-dialog__description {
+    font-family: "Financier Text Regular", Georgia, "Times New Roman", serif;
+    font-size: 0.875rem;
+    line-height: 1.5;
+    color: $gray-600;
+    margin: 0;
+    padding: $space-1 $space-3 0;
+}
+
+/*******************************************************************************
+ * Dialog Content
+ ******************************************************************************/
+
+.bc-dialog__content {
+    overflow-y: auto;
+    padding: $space-3;
+}

package/src/feedback/Dialog/Dialog.tsx

@@ -0,0 +1,120 @@
+import { useEffect, useRef, useCallback } from "react"
+import cx from "classnames"
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"
+import { faXmark } from "@fortawesome/free-solid-svg-icons"
+
+export type DialogPosition =
+    | "top-left"
+    | "top-right"
+    | "bottom-left"
+    | "bottom-right"
+    | "center"
+
+export interface DialogProps {
+    open: boolean
+    onClose: () => void
+    children: React.ReactNode
+    title?: string
+    description?: string
+    position?: DialogPosition
+    className?: string
+    closeOnEscape?: boolean
+    showCloseButton?: boolean
+    ariaLabelledBy?: string
+    ariaDescribedBy?: string
+    offset?: number
+}
+
+export function Dialog({
+    open,
+    onClose,
+    children,
+    title,
+    description,
+    position = "bottom-right",
+    className,
+    closeOnEscape = true,
+    showCloseButton = true,
+    ariaLabelledBy,
+    ariaDescribedBy,
+    offset = 16,
+}: DialogProps) {
+    const dialogRef = useRef<HTMLDivElement>(null)
+
+    const handleClose = useCallback(() => {
+        onClose()
+    }, [onClose])
+
+    // Handle escape key
+    useEffect(() => {
+        if (!closeOnEscape || !open) return
+
+        const handleKeyDown = (e: KeyboardEvent) => {
+            if (e.key === "Escape") {
+                handleClose()
+            }
+        }
+
+        document.addEventListener("keydown", handleKeyDown)
+        return () => document.removeEventListener("keydown", handleKeyDown)
+    }, [closeOnEscape, open, handleClose])
+
+    if (!open) return null
+
+    const classes = cx(
+        "bc-dialog",
+        `bc-dialog--${position}`,
+        className
+    )
+
+    const titleId = ariaLabelledBy || (title ? "bc-dialog-title" : undefined)
+    const descriptionId = ariaDescribedBy || (description ? "bc-dialog-description" : undefined)
+
+    const style = {
+        "--bc-dialog-offset": `${offset}px`,
+    } as React.CSSProperties
+
+    return (
+        <div
+            ref={dialogRef}
+            className={classes}
+            style={style}
+            role="dialog"
+            aria-modal="false"
+            aria-labelledby={titleId}
+            aria-describedby={descriptionId}
+        >
+            <div className="bc-dialog__container">
+                {(title || showCloseButton) && (
+                    <header className="bc-dialog__header">
+                        {title && (
+                            <h2 id={titleId} className="bc-dialog__title">
+                                {title}
+                            </h2>
+                        )}
+                        {showCloseButton && (
+                            <button
+                                type="button"
+                                className="bc-dialog__close"
+                                onClick={handleClose}
+                                aria-label="Close dialog"
+                            >
+                                <FontAwesomeIcon icon={faXmark} />
+                            </button>
+                        )}
+                    </header>
+                )}
+                {description && (
+                    <p id={descriptionId} className="bc-dialog__description">
+                        {description}
+                    </p>
+                )}
+                <div className="bc-dialog__content">
+                    {children}
+                </div>
+            </div>
+        </div>
+    )
+}
+
+export default Dialog

package/src/feedback/Dialog/index.ts

@@ -0,0 +1 @@
+export { Dialog, type DialogProps, type DialogPosition } from "./Dialog"

package/src/feedback/PopupForm/PopupForm.scss

@@ -0,0 +1,34 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * PopupForm Component
+ ******************************************************************************/
+
+.bc-popup-form {
+    display: flex;
+    flex-direction: column;
+    gap: $space-3;
+}
+
+/*******************************************************************************
+ * PopupForm Fields
+ ******************************************************************************/
+
+.bc-popup-form__fields {
+    display: flex;
+    flex-direction: column;
+    gap: $space-3;
+}
+
+/*******************************************************************************
+ * PopupForm Actions
+ ******************************************************************************/
+
+.bc-popup-form__actions {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    gap: $space-2;
+    padding-top: $space-2;
+    border-top: 1px solid $border-muted;
+}

package/src/feedback/PopupForm/PopupForm.tsx

@@ -0,0 +1,90 @@
+import cx from "classnames"
+
+import { Dialog, type DialogPosition } from "../Dialog"
+import { Button, type ButtonVariant } from "../../primitives/Button"
+
+export interface PopupFormProps {
+    open: boolean
+    onClose: () => void
+    onSubmit: (e: React.FormEvent<HTMLFormElement>) => void
+    children: React.ReactNode
+    title?: string
+    description?: string
+    position?: DialogPosition
+    offset?: number
+    className?: string
+    submitText?: string
+    submitVariant?: ButtonVariant
+    cancelText?: string
+    cancelVariant?: ButtonVariant
+    showCancel?: boolean
+    isSubmitting?: boolean
+    submitDisabled?: boolean
+    closeOnEscape?: boolean
+}
+
+export function PopupForm({
+    open,
+    onClose,
+    onSubmit,
+    children,
+    title,
+    description,
+    position = "bottom-right",
+    offset,
+    className,
+    submitText = "Submit",
+    submitVariant = "solid-auburn",
+    cancelText = "Cancel",
+    cancelVariant = "outline-charcoal",
+    showCancel = true,
+    isSubmitting = false,
+    submitDisabled = false,
+    closeOnEscape = true,
+}: PopupFormProps) {
+    const handleSubmit = (e: React.FormEvent<HTMLFormElement>) => {
+        e.preventDefault()
+        onSubmit(e)
+    }
+
+    const classes = cx("bc-popup-form", className)
+
+    return (
+        <Dialog
+            open={open}
+            onClose={onClose}
+            title={title}
+            description={description}
+            position={position}
+            offset={offset}
+            closeOnEscape={closeOnEscape}
+        >
+            <form onSubmit={handleSubmit} className={classes}>
+                <div className="bc-popup-form__fields">
+                    {children}
+                </div>
+                <div className="bc-popup-form__actions">
+                    {showCancel && (
+                        <Button
+                            type="button"
+                            text={cancelText}
+                            variant={cancelVariant}
+                            onClick={onClose}
+                            disabled={isSubmitting}
+                            icon={null}
+                        />
+                    )}
+                    <Button
+                        type="submit"
+                        text={isSubmitting ? "Submitting..." : submitText}
+                        variant={submitVariant}
+                        disabled={submitDisabled || isSubmitting}
+                        icon={null}
+                    />
+                </div>
+            </form>
+        </Dialog>
+    )
+}
+
+export default PopupForm

package/src/feedback/PopupForm/index.ts

@@ -0,0 +1 @@
+export { PopupForm, type PopupFormProps } from "./PopupForm"

package/src/index.ts

@@ -55,3 +55,7 @@ export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend
 // Navigation
 export { Header, type HeaderProps, type NavItem } from "./navigation/Header"
 export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./navigation/Footer"
+
+// Feedback
+export { Dialog, type DialogProps, type DialogPosition } from "./feedback/Dialog"
+export { PopupForm, type PopupFormProps } from "./feedback/PopupForm"

package/src/styles/main.scss

@@ -22,6 +22,8 @@
 @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