@buildcanada/components 0.3.4 → 0.3.5

package/src/feedback/PopupForm/PopupForm.stories.tsx

@@ -0,0 +1,341 @@
+import { useState } from "react"
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { PopupForm } from "./PopupForm"
+import { Button } from "../../primitives/Button"
+import { TextField } from "../../primitives/TextField"
+import { Checkbox } from "../../primitives/Checkbox"
+
+const meta: Meta<typeof PopupForm> = {
+    title: "Components/Feedback/PopupForm",
+    component: PopupForm,
+    parameters: {
+        layout: "fullscreen",
+        docs: {
+            description: {
+                component: `
+A non-modal form panel that composes Dialog with form elements and action buttons.
+
+## Usage
+
+\`\`\`tsx
+import { PopupForm, TextField, Checkbox } from "@buildcanada/components"
+
+function MyComponent() {
+  const [open, setOpen] = useState(false)
+
+  const handleSubmit = (e: React.FormEvent) => {
+    console.log("Form submitted")
+    setOpen(false)
+  }
+
+  return (
+    <>
+      <Button text="Open Form" onClick={() => setOpen(true)} />
+      <PopupForm
+        open={open}
+        onClose={() => setOpen(false)}
+        onSubmit={handleSubmit}
+        title="Contact Us"
+        position="bottom-right"
+      >
+        <TextField label="Name" required />
+        <TextField label="Email" type="email" required />
+        <Checkbox label="Subscribe to newsletter" />
+      </PopupForm>
+    </>
+  )
+}
+\`\`\`
+
+## Key Features
+
+- **Non-blocking**: Users can still interact with the page
+- **Corner positioning**: Place in any corner of the screen
+- **Composable**: Works with TextField, Checkbox, and other form primitives
+
+## Props
+
+- **position**: Where to place the form (default: "bottom-right")
+- **offset**: Distance from screen edges (default: 16px)
+- **submitText** / **cancelText**: Button labels
+- **isSubmitting**: Shows loading state on submit button
+                `,
+            },
+        },
+    },
+    args: {
+        open: true,
+        title: "Form Title",
+        description: "",
+        position: "bottom-right",
+        offset: 16,
+        submitText: "Submit",
+        cancelText: "Cancel",
+        showCancel: true,
+        isSubmitting: false,
+        submitDisabled: false,
+        closeOnEscape: true,
+    },
+    argTypes: {
+        open: {
+            control: "boolean",
+            description: "Whether the form is open",
+        },
+        title: {
+            control: "text",
+            description: "Title displayed in the form 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 popup form on screen",
+        },
+        offset: {
+            control: { type: "number", min: 0, max: 100 },
+            description: "Distance from screen edges in pixels",
+        },
+        submitText: {
+            control: "text",
+            description: "Text for the submit button",
+        },
+        cancelText: {
+            control: "text",
+            description: "Text for the cancel button",
+        },
+        showCancel: {
+            control: "boolean",
+            description: "Whether to show the cancel button",
+        },
+        isSubmitting: {
+            control: "boolean",
+            description: "Whether the form is currently submitting",
+        },
+        submitDisabled: {
+            control: "boolean",
+            description: "Whether the submit button is disabled",
+        },
+        closeOnEscape: {
+            control: "boolean",
+            description: "Whether pressing Escape closes the form",
+        },
+    },
+    decorators: [
+        (Story) => (
+            <div style={{ minHeight: "400px" }}>
+                <PageContent />
+                <Story />
+            </div>
+        ),
+    ],
+}
+
+export default meta
+type Story = StoryObj<typeof PopupForm>
+
+// 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 form 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 form is open..."
+                    style={{ padding: "8px", width: "300px" }}
+                />
+            </p>
+        </div>
+    )
+}
+
+// Template that renders the form with args
+function PopupFormTemplate(args: React.ComponentProps<typeof PopupForm> & { children?: React.ReactNode }) {
+    return (
+        <PopupForm
+            {...args}
+            onClose={() => console.log("Form closed")}
+            onSubmit={() => console.log("Form submitted")}
+        >
+            {args.children || (
+                <>
+                    <TextField label="Name" placeholder="Your name" />
+                    <TextField label="Email" type="email" placeholder="you@example.com" />
+                </>
+            )}
+        </PopupForm>
+    )
+}
+
+export const Default: Story = {
+    render: (args) => <PopupFormTemplate {...args} />,
+}
+
+export const WithDescription: Story = {
+    args: {
+        title: "Contact Us",
+        description: "We'd love to hear from you.",
+    },
+    render: (args) => <PopupFormTemplate {...args} />,
+}
+
+export const NewsletterSignup: Story = {
+    args: {
+        title: "Subscribe",
+        description: "Get updates delivered to your inbox.",
+        submitText: "Subscribe",
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <TextField label="Email Address" type="email" placeholder="you@example.com" />
+            <Checkbox label="I agree to receive emails" />
+        </PopupFormTemplate>
+    ),
+}
+
+export const TopLeftPosition: Story = {
+    args: {
+        title: "Quick Feedback",
+        position: "top-left",
+        submitText: "Send",
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <TextField label="Your feedback" placeholder="Tell us what you think..." />
+        </PopupFormTemplate>
+    ),
+}
+
+export const CenteredPosition: Story = {
+    args: {
+        title: "Sign In",
+        position: "center",
+        submitText: "Sign In",
+        showCancel: false,
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <TextField label="Email" type="email" placeholder="you@example.com" />
+            <TextField label="Password" type="password" placeholder="Enter password" />
+            <Checkbox label="Remember me" />
+        </PopupFormTemplate>
+    ),
+}
+
+export const NoCancel: Story = {
+    args: {
+        title: "Required Action",
+        description: "Please complete this form to continue.",
+        submitText: "Continue",
+        showCancel: false,
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <Checkbox label="I accept the terms and conditions" />
+        </PopupFormTemplate>
+    ),
+}
+
+export const CustomOffset: Story = {
+    args: {
+        title: "Settings",
+        offset: 48,
+        submitText: "Save",
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <TextField label="Display Name" placeholder="Enter name" />
+            <Checkbox label="Enable notifications" />
+        </PopupFormTemplate>
+    ),
+}
+
+export const SubmittingState: Story = {
+    args: {
+        title: "Save Changes",
+        submitText: "Save",
+        isSubmitting: true,
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <TextField label="Name" defaultValue="John Doe" />
+            <TextField label="Email" type="email" defaultValue="john@example.com" />
+        </PopupFormTemplate>
+    ),
+}
+
+export const DisabledSubmit: Story = {
+    args: {
+        title: "Subscribe",
+        submitText: "Subscribe",
+        submitDisabled: true,
+    },
+    render: (args) => (
+        <PopupFormTemplate {...args}>
+            <TextField label="Email" type="email" placeholder="Enter email to enable submit" />
+        </PopupFormTemplate>
+    ),
+}
+
+export const AllPositions: Story = {
+    parameters: {
+        controls: { disable: true },
+    },
+    render: function AllPositionsDemo() {
+        const [openForm, setOpenForm] = 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={() => setOpenForm(openForm === key ? null : key)}
+                            variant={openForm === key ? "solid-auburn" : "outline-charcoal"}
+                        />
+                    ))}
+                </div>
+                {positions.map(({ key, label }) => (
+                    <PopupForm
+                        key={key}
+                        open={openForm === key}
+                        onClose={() => setOpenForm(null)}
+                        onSubmit={() => setOpenForm(null)}
+                        title={label}
+                        position={key}
+                        submitText="Submit"
+                    >
+                        <TextField label="Field" placeholder="Enter text" />
+                    </PopupForm>
+                ))}
+            </>
+        )
+    },
+}

package/src/feedback/PopupForm/PopupForm.tsx

@@ -0,0 +1,90 @@
+import cx from "classnames"
+
+import { Dialog, type DialogPosition } from "../Dialog/index.js"
+import { Button, type ButtonVariant } from "../../primitives/Button/index.js"
+
+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.js"

package/src/index.ts

@@ -0,0 +1,61 @@
+/*******************************************************************************
+ * @buildcanada/components
+ *
+ * Build Canada Design System Components
+ ******************************************************************************/
+
+// Primitives
+export { Button, type ButtonProps, type ButtonVariant, type ButtonSize } from "./primitives/Button/index.js"
+export { TextField, type TextFieldProps, type TextFieldType } from "./primitives/TextField/index.js"
+export { Checkbox, type CheckboxProps } from "./primitives/Checkbox/index.js"
+
+// Layout
+export { Container, type ContainerProps, type ContainerSize } from "./layout/Container/index.js"
+export { Section, type SectionProps, type SectionBackground, type SectionSpacing } from "./layout/Section/index.js"
+export { Grid, GridItem, type GridProps, type GridItemProps, type GridColumns, type GridGap } from "./layout/Grid/index.js"
+export { Stack, type StackProps, type StackDirection, type StackSpacing, type StackAlign, type StackJustify } from "./layout/Stack/index.js"
+export { Divider, type DividerProps, type DividerOrientation, type DividerVariant } from "./layout/Divider/index.js"
+
+// Content
+export {
+    Card,
+    CardImage,
+    CardIcon,
+    CardContent,
+    CardTitle,
+    CardDescription,
+    CardMeta,
+    CardStat,
+    CardAuthor,
+    type CardProps,
+    type CardVariant,
+    type CardImageProps,
+    type CardIconProps,
+    type CardContentProps,
+    type CardTitleProps,
+    type CardDescriptionProps,
+    type CardMetaProps,
+    type CardStatProps,
+    type CardAuthorProps,
+} from "./content/Card/index.js"
+export {
+    Hero,
+    HeroTitle,
+    HeroSubtitle,
+    HeroActions,
+    type HeroProps,
+    type HeroVariant,
+    type HeroBackground,
+    type HeroTitleProps,
+    type HeroSubtitleProps,
+    type HeroActionsProps,
+} from "./content/Hero/index.js"
+export { StatBlock, type StatBlockProps, type StatBlockSize, type StatBlockTrend } from "./content/StatBlock/index.js"
+
+// Navigation
+export { Header, type HeaderProps, type NavItem } from "./navigation/Header/index.js"
+export { Footer, type FooterProps, type FooterLink, type SocialLink } from "./navigation/Footer/index.js"
+
+// Feedback
+export { Dialog, type DialogProps, type DialogPosition } from "./feedback/Dialog/index.js"
+export { PopupForm, type PopupFormProps } from "./feedback/PopupForm/index.js"

package/src/layout/Container/Container.scss

@@ -0,0 +1,40 @@
+@use "../../styles/tokens" as *;
+
+/*******************************************************************************
+ * Container Component
+ *
+ * Max-width container with responsive padding
+ ******************************************************************************/
+
+.bc-container {
+  width: 100%;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: $space-3;
+  padding-right: $space-3;
+
+  @include md-up {
+    padding-left: $space-5;
+    padding-right: $space-5;
+  }
+
+  &--sm {
+    max-width: 640px;
+  }
+
+  &--md {
+    max-width: 768px;
+  }
+
+  &--lg {
+    max-width: 1024px;
+  }
+
+  &--xl {
+    max-width: 1280px;
+  }
+
+  &--full {
+    max-width: none;
+  }
+}

package/src/layout/Container/Container.stories.tsx

@@ -0,0 +1,153 @@
+import type { Meta, StoryObj } from "@storybook/react"
+
+import { Container } from "./Container"
+
+const meta: Meta<typeof Container> = {
+    title: "Components/Layout/Container",
+    component: Container,
+    parameters: {
+        docs: {
+            description: {
+                component: `
+A centered container component with configurable max-width breakpoints.
+
+## Usage
+
+\`\`\`tsx
+import { Container } from "@buildcanada/components"
+
+<Container size="lg">
+  <p>Content is centered with max-width</p>
+</Container>
+\`\`\`
+
+## Sizes
+
+- **sm**: 640px max-width
+- **md**: 768px max-width
+- **lg**: 1024px max-width (default)
+- **xl**: 1280px max-width
+- **full**: No max-width
+
+## Semantic HTML
+
+Use the \`as\` prop for semantic HTML elements:
+
+\`\`\`tsx
+<Container as="main" size="lg">
+  <article>Page content</article>
+</Container>
+\`\`\`
+                `,
+            },
+        },
+    },
+    argTypes: {
+        size: {
+            control: "select",
+            options: ["sm", "md", "lg", "xl", "full"],
+            description: "Maximum width of the container",
+        },
+        as: {
+            control: "select",
+            options: ["div", "main", "article", "section"],
+            description: "HTML element to render as",
+        },
+    },
+}
+
+export default meta
+type Story = StoryObj<typeof Container>
+
+const PlaceholderContent = () => (
+    <div style={{
+        padding: "24px",
+        backgroundColor: "#F6ECE3",
+        border: "1px dashed #272727",
+        textAlign: "center",
+        fontFamily: "sans-serif"
+    }}>
+        Container Content
+    </div>
+)
+
+export const Default: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "lg",
+    },
+}
+
+export const Small: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "sm",
+    },
+}
+
+export const Medium: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "md",
+    },
+}
+
+export const Large: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "lg",
+    },
+}
+
+export const ExtraLarge: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "xl",
+    },
+}
+
+export const FullWidth: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "full",
+    },
+}
+
+export const AsMain: Story = {
+    args: {
+        children: <PlaceholderContent />,
+        size: "lg",
+        as: "main",
+    },
+}
+
+export const AllSizes: Story = {
+    render: () => (
+        <div style={{ display: "flex", flexDirection: "column", gap: "24px" }}>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Small (640px)</p>
+                <Container size="sm">
+                    <PlaceholderContent />
+                </Container>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Medium (768px)</p>
+                <Container size="md">
+                    <PlaceholderContent />
+                </Container>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Large (1024px)</p>
+                <Container size="lg">
+                    <PlaceholderContent />
+                </Container>
+            </div>
+            <div>
+                <p style={{ fontFamily: "sans-serif", marginBottom: "8px" }}>Extra Large (1280px)</p>
+                <Container size="xl">
+                    <PlaceholderContent />
+                </Container>
+            </div>
+        </div>
+    ),
+}