@buildcanada/components 0.3.4 → 0.3.5

package/src/feedback/Dialog/Dialog.stories.tsx

@@ -0,0 +1,286 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Dialog, type DialogPosition } from "./Dialog"
+import { Button } from "../../primitives/Button"
+
+const meta: Meta<typeof Dialog> = {
+    title: "Components/Feedback/Dialog",
+    component: Dialog,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: `
+A non-modal floating panel that doesn't block interaction with the rest of the UI.
+
+## Usage
+
+\`\`\`tsx
+import { Dialog } from "@buildcanada/components"
+
+function MyComponent() {
+  const [open, setOpen] = useState(false)
+
+  return (
+    <>
+      <Button text="Open Dialog" onClick={() => setOpen(true)} />
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        title="Dialog Title"
+        position="bottom-right"
+      >
+        <p>Dialog content goes here.</p>
+      </Dialog>
+    </>
+  )
+}
+\`\`\`
+
+## Key Features
+
+- **Non-modal**: Does not block interaction with the rest of the UI
+- **Content-sized**: Automatically sizes to fit its contents
+- **Corner positioning**: Place in any corner or center of the screen
+- **No rounded corners**: Sharp edges for a clean, modern look
+
+## Positions
+
+- \`top-left\`
+- \`top-right\`
+- \`bottom-left\`
+- \`bottom-right\` (default)
+- \`center\`
+
+## Offset
+
+Use the \`offset\` prop to control distance from screen edges (default: 16px).
+                `,
+            },
+        },
+    },
+    args: {
+        open: true,
+        title: "Dialog Title",
+        description: "",
+        position: "bottom-right",
+        offset: 16,
+        closeOnEscape: true,
+        showCloseButton: true,
+    },
+    argTypes: {
+        open: {
+            control: "boolean",
+            description: "Whether the dialog is open",
+        },
+        title: {
+            control: "text",
+            description: "Title displayed in the dialog header",
+        },
+        description: {
+            control: "text",
+            description: "Optional description below the title",
+        },
+        position: {
+            control: "select",
+            options: ["top-left", "top-right", "bottom-left", "bottom-right", "center"],
+            description: "Position of the dialog on screen",
+        },
+        offset: {
+            control: { type: "number", min: 0, max: 100 },
+            description: "Distance from screen edges in pixels",
+        },
+        closeOnEscape: {
+            control: "boolean",
+            description: "Whether pressing Escape closes the dialog",
+        },
+        showCloseButton: {
+            control: "boolean",
+            description: "Whether to show the close button",
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ minHeight: "400px" }}>
+                <PageContent />
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export default meta
+type Story = StoryObj<typeof Dialog>
+
+// Page content to demonstrate non-blocking behavior
+function PageContent() {
+    return (
+        <div style={{ padding: "24px", fontFamily: "sans-serif" }}>
+            <h1>Page Content</h1>
+            <p>This content remains interactive when the dialog is open.</p>
+            <p>
+                <button onClick={() => console.log("Button clicked!")} style={{ padding: "8px 16px" }}>
+                    Clickable Button
+                </button>
+            </p>
+            <p>
+                <input
+                    type="text"
+                    placeholder="Type here while dialog is open..."
+                    style={{ padding: "8px", width: "300px" }}
+                />
+            </p>
+        </div>
+    )
+}
+
+// Simple template that renders the dialog with args
+function DialogTemplate(args: React.ComponentProps<typeof Dialog>) {
+    return (
+        <Dialog
+            {...args}
+            onClose={() => console.log("Dialog closed")}
+        >
+            <p style={{ fontFamily: "sans-serif", margin: 0, maxWidth: "280px" }}>
+                This dialog doesn't block interaction with the page behind it.
+            </p>
+        </Dialog>
+    )
+}
+
+export const Default: Story = {
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const TopLeft: Story = {
+    args: {
+        position: "top-left",
+        title: "Top Left",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const TopRight: Story = {
+    args: {
+        position: "top-right",
+        title: "Top Right",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const BottomLeft: Story = {
+    args: {
+        position: "bottom-left",
+        title: "Bottom Left",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const BottomRight: Story = {
+    args: {
+        position: "bottom-right",
+        title: "Bottom Right",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const Centered: Story = {
+    args: {
+        position: "center",
+        title: "Centered",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const WithDescription: Story = {
+    args: {
+        title: "Notifications",
+        description: "You have 3 unread messages.",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const CustomOffset: Story = {
+    args: {
+        title: "Custom Offset",
+        offset: 48,
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const NoCloseButton: Story = {
+    args: {
+        title: "No Close Button",
+        showCloseButton: false,
+        description: "Press Escape to close.",
+    },
+    render: (args) => <DialogTemplate {...args} />,
+}
+
+export const WideContent: Story = {
+    args: {
+        title: "Wide Content",
+    },
+    render: (args) => (
+        <Dialog {...args} onClose={() => console.log("Dialog closed")}>
+            <div style={{ fontFamily: "sans-serif", width: "400px" }}>
+                <p>This dialog has wider content and will size accordingly.</p>
+                <p>The dialog always sizes to fit its contents.</p>
+            </div>
+        </Dialog>
+    ),
+}
+
+export const AllPositions: Story = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: function AllPositionsDemo() {
+        const [openDialog, setOpenDialog] = useState<string | null>(null)
+
+        const positions = [
+            { key: "top-left", label: "Top Left" },
+            { key: "top-right", label: "Top Right" },
+            { key: "bottom-left", label: "Bottom Left" },
+            { key: "bottom-right", label: "Bottom Right" },
+            { key: "center", label: "Center" },
+        ] as const
+
+        return (
+            <>
+                <div style={{
+                    position: "fixed",
+                    top: "24px",
+                    right: "24px",
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: "8px",
+                    zIndex: 1
+                }}>
+                    {positions.map(({ key, label }) => (
+                        <Button
+                            key={key}
+                            text={label}
+                            onClick={() => setOpenDialog(openDialog === key ? null : key)}
+                            variant={openDialog === key ? "solid-auburn" : "outline-charcoal"}
+                        />
+                    ))}
+                </div>
+                {positions.map(({ key, label }) => (
+                    <Dialog
+                        key={key}
+                        open={openDialog === key}
+                        onClose={() => setOpenDialog(null)}
+                        title={label}
+                        position={key}
+                    >
+                        <p style={{ fontFamily: "sans-serif", margin: 0 }}>
+                            Positioned: {label}
+                        </p>
+                    </Dialog>
+                ))}
+            </>
+        )
+    },
+}

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.js"

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