@fpkit/acss 6.2.0 → 6.3.0

package/src/components/buttons/button.scss

@@ -4,10 +4,14 @@ button {
   --btn-size-sm: 0.8125rem;
   --btn-size-md: 0.9375rem;
   --btn-size-lg: 1.125rem;
-  --btn-pill: 100rem;
+  --btn-size-xl: 1.375rem;
+  --btn-size-2xl: 1.75rem;
+  --btn-pill: 100vw;
   --btn-fs: var(--btn-size-md);
-  --btn-height: calc(var(--btn-fs) * 2.25);
-  --btn-bg: var(--color-neutral-300);
+
+  --btn-height: calc(var(--btn-fs) * 2.75);
+  --btn-bg: var(--color-primary);
+  --btn-color: var(--color-text-inverse);
   --btn-width: max-content;
 
   font-size: var(--btn-fs);
@@ -36,7 +40,7 @@ button {
   line-height: 0cap;
 
   &[type] {
-    background-color: var(--btn-bg, var(--color-neutral-300));
+    background-color: var(--btn-bg, var(--color-primary));
     --btn-border: solid var(--btn-sg);
   }
 
@@ -93,8 +97,77 @@ button {
 
   &[data-fp-btn~="pill"],
   &[data-btn~="pill"],
-  &[data-style~="pill"] {
-    border-radius: var(--btn-pill, 100rem);
+  &[data-style~="pill"],
+  &.btn-pill {
+    border-radius: var(--btn-pill, 100vw);
+  }
+
+  // Color variants — map to semantic tokens from index.css
+  &[data-color="primary"] {
+    --btn-bg: var(--color-primary);
+    --btn-color: var(--color-text-inverse);
+  }
+
+  &[data-color="secondary"] {
+    --btn-bg: var(--color-secondary);
+    --btn-color: var(--color-text-inverse);
+  }
+
+  &[data-color="danger"] {
+    --btn-bg: var(--color-error);
+    --btn-color: var(--color-text-inverse);
+  }
+
+  &[data-color="success"] {
+    --btn-bg: var(--color-success);
+    --btn-color: var(--color-text-inverse);
+  }
+
+  &[data-color="warning"] {
+    --btn-bg: var(--color-warning);
+    --btn-color: var(--color-text-inverse);
+  }
+
+  // Style variants via data-style (variant prop) — mirrors link button patterns
+  &[data-style~="outline"] {
+    --btn-bg: transparent;
+    --btn-color: currentColor;
+    --btn-border: 0.125rem solid currentColor;
+
+    &:is(:hover, :focus) {
+      background-color: color-mix(in srgb, currentColor 10%, transparent);
+      filter: none;
+      outline: 0.025rem solid currentColor;
+      outline-offset: 0;
+    }
+  }
+
+  &[data-style~="text"] {
+    --btn-bg: transparent;
+    --btn-color: currentColor;
+    --btn-border: none;
+    --btn-height: unset;
+    --btn-width: unset;
+    --btn-padding-block: 0.75rem;
+    --btn-padding-inline: 0.75rem;
+    &:is(:hover, :focus) {
+      background-color: color-mix(in srgb, var(--btn-color) 10%, transparent);
+      outline: 0.025rem solid var(--btn-color);
+      outline-offset: 0;
+      filter: none;
+    }
+  }
+
+  &[data-style~="icon"] {
+    padding: unset;
+    height: unset;
+    --btn-bg: transparent;
+    min-width: 1.5rem;
+    min-height: 1.5rem;
+    text-align: center;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
   }
 
   &[data-btn~="xs"],
@@ -118,16 +191,20 @@ button {
     --btn-fs: var(--btn-size-lg);
   }
 
-  &[data-btn~="icon"],
-  .btn-icon {
-    padding: unset;
-    height: unset;
-    --btn-bg: transparent;
-    min-width: 1.5rem;
-    min-height: 1.5rem;
-    text-align: center;
-    display: inline-flex;
-    align-items: center;
+  &[data-btn~="xl"],
+  .btn-xl {
+    --btn-fs: var(--btn-size-xl);
+  }
+
+  &[data-btn~="2xl"],
+  .btn-2xl {
+    --btn-fs: var(--btn-size-2xl);
+  }
+
+  &[data-btn~="block"],
+  .btn-block {
+    --btn-width: 100%;
+    display: flex;
     justify-content: center;
   }
 

package/src/components/buttons/button.stories.tsx

@@ -14,6 +14,27 @@ const meta = {
     children: "Click me",
     onClick: buttonClicked,
   },
+  argTypes: {
+    size: {
+      control: "select",
+      options: ["xs", "sm", "md", "lg", "xl", "2xl"],
+      description: "Size token — maps to data-btn attribute",
+    },
+    block: {
+      control: "boolean",
+      description: "Stretch button to 100% container width — composes with size and variant",
+    },
+    variant: {
+      control: "select",
+      options: ["text", "pill", "icon", "outline"],
+      description: "Style variant — maps to data-style attribute",
+    },
+    color: {
+      control: "select",
+      options: ["primary", "secondary", "danger", "success", "warning"],
+      description: "Color variant using semantic design tokens — maps to data-color attribute",
+    },
+  },
   parameters: {},
 } as Meta;
 
@@ -109,6 +130,132 @@ export const Large: Story = {
   },
 } as Story;
 
+// --- Size prop stories (typed API instead of raw data-btn) ---
+
+export const SizeXS: Story = {
+  args: { size: "xs", children: "Extra Small" },
+} as Story;
+
+export const SizeSM: Story = {
+  args: { size: "sm", children: "Small" },
+} as Story;
+
+export const SizeLG: Story = {
+  args: { size: "lg", children: "Large" },
+} as Story;
+
+export const SizeXL: Story = {
+  args: { size: "xl", children: "Extra Large" },
+} as Story;
+
+export const Size2XL: Story = {
+  args: { size: "2xl", children: "2X Large" },
+} as Story;
+
+// --- Block stories ---
+
+/**
+ * Block button — stretches to 100% container width at the default size.
+ */
+export const Block: Story = {
+  args: { block: true, children: "Block Button" },
+} as Story;
+
+/**
+ * Block button composed with size and color variants.
+ */
+export const BlockVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", flexDirection: "column", gap: "1rem", maxWidth: "32rem" }}>
+      <Button type="button" block size="sm">Block Small</Button>
+      <Button type="button" block>Block Default</Button>
+      <Button type="button" block size="lg">Block Large</Button>
+      <Button type="button" block size="xl" color="primary">Block XL Primary</Button>
+      <Button type="button" block color="danger" variant="outline">Block Danger Outline</Button>
+    </div>
+  ),
+} as Story;
+
+// --- Variant stories ---
+
+export const Outline: Story = {
+  args: { variant: "outline", children: "Outline" },
+} as Story;
+
+export const Pill: Story = {
+  args: { variant: "pill", children: "Pill" },
+} as Story;
+
+export const TextVariant: Story = {
+  args: { variant: "text", children: "Text Button" },
+} as Story;
+
+// --- Color stories ---
+
+export const Primary: Story = {
+  args: { color: "primary", children: "Primary" },
+} as Story;
+
+export const Secondary: Story = {
+  args: { color: "secondary", children: "Secondary" },
+} as Story;
+
+export const Danger: Story = {
+  args: { color: "danger", children: "Danger" },
+} as Story;
+
+export const Success: Story = {
+  args: { color: "success", children: "Success" },
+} as Story;
+
+export const Warning: Story = {
+  args: { color: "warning", children: "Warning" },
+} as Story;
+
+// --- Combination stories ---
+
+export const PrimaryOutline: Story = {
+  args: { color: "primary", variant: "outline", children: "Primary Outline" },
+} as Story;
+
+export const DangerPill: Story = {
+  args: { color: "danger", variant: "pill", children: "Danger Pill" },
+} as Story;
+
+export const SuccessOutline: Story = {
+  args: { color: "success", variant: "outline", children: "Success Outline" },
+} as Story;
+
+/**
+ * All color variants side by side.
+ */
+export const AllColors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap" }}>
+      <Button type="button" color="primary">Primary</Button>
+      <Button type="button" color="secondary">Secondary</Button>
+      <Button type="button" color="danger">Danger</Button>
+      <Button type="button" color="success">Success</Button>
+      <Button type="button" color="warning">Warning</Button>
+    </div>
+  ),
+} as Story;
+
+/**
+ * All variant styles side by side.
+ */
+export const AllVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", flexWrap: "wrap", alignItems: "center" }}>
+      <Button type="button" variant="outline">Outline</Button>
+      <Button type="button" variant="pill">Pill</Button>
+      <Button type="button" variant="text">Text</Button>
+      <Button type="button" color="primary" variant="outline">Primary Outline</Button>
+      <Button type="button" color="danger" variant="pill">Danger Pill</Button>
+    </div>
+  ),
+} as Story;
+
 export const Custom: Story = {
   args: {
     styles: {
@@ -377,6 +524,8 @@ export const Customization: Story = {
 - \`--btn-size-sm\`: 0.8125rem (13px)
 - \`--btn-size-md\`: 0.9375rem (15px)
 - \`--btn-size-lg\`: 1.125rem (18px)
+- \`--btn-size-xl\`: 1.375rem (22px)
+- \`--btn-size-2xl\`: 1.75rem (28px)
 
 ### Base Properties
 - \`--btn-padding-inline\`: Horizontal padding (logical property)

package/src/components/buttons/button.test.tsx

@@ -79,6 +79,18 @@ describe("Button", () => {
     expect(handlePointerEvents).toHaveBeenCalledTimes(1);
   });
 
+  it("applies xl size via data-btn attribute", () => {
+    render(<Button type="button" size="xl">XL</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("data-btn", "xl");
+  });
+
+  it("applies 2xl size via data-btn attribute", () => {
+    render(<Button type="button" size="2xl">2XL</Button>);
+    const button = screen.getByRole("button");
+    expect(button).toHaveAttribute("data-btn", "2xl");
+  });
+
   it("it is disabled when disabled is true", () => {
     const handleClick = jest.fn();
     render(

package/src/components/buttons/button.tsx

@@ -11,6 +11,39 @@ export type ButtonProps = Partial<React.ComponentProps<typeof UI>> &
      * Required - 'button' | 'submit' | 'reset'
      */
     type: "button" | "submit" | "reset";
+    /**
+     * Raw data-btn tokens. Merged with `size` and `block` — all three contribute
+     * whitespace-separated words to the final `data-btn` attribute value.
+     * @example <Button data-btn="pill">Pill button</Button>
+     */
+    "data-btn"?: string;
+    /**
+     * Size variant - maps to `data-btn` attribute, aligns with SCSS size tokens.
+     * Can coexist with a directly passed `data-btn` attribute (values are merged).
+     * @example <Button size="sm">Small</Button>
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl";
+    /**
+     * Style variant - maps to `data-style` attribute.
+     * - `"outline"` — transparent bg with border (mirrors link button style)
+     * - `"pill"` — fully rounded corners
+     * - `"text"` — ghost text button with subtle hover
+     * - `"icon"` — square icon-only, no padding
+     * @example <Button variant="outline">Bordered</Button>
+     */
+    variant?: "text" | "pill" | "icon" | "outline";
+    /**
+     * Color variant - maps to `data-color` attribute using semantic color tokens.
+     * @example <Button color="danger">Delete</Button>
+     */
+    color?: "primary" | "secondary" | "danger" | "success" | "warning";
+    /**
+     * Block layout — stretches the button to 100% of its container width.
+     * Composes with `size` and other `data-btn` values.
+     * @example <Button block>Full Width</Button>
+     * @example <Button size="lg" block>Large Full Width</Button>
+     */
+    block?: boolean;
   };
 
 /**
@@ -73,6 +106,10 @@ export const Button = ({
   disabled,
   isDisabled,
   classes,
+  size,
+  variant,
+  color,
+  block,
   onPointerDown,
   onPointerOver,
   onPointerLeave,
@@ -96,30 +133,37 @@ export const Button = ({
       className: classes,
       // Note: onPointerOver and onPointerLeave are intentionally NOT wrapped
       // to allow hover effects on disabled buttons for visual feedback
-    }
+    },
   );
 
+  // Merge size, block, and any explicit data-btn passed by the consumer.
+  // SCSS uses [data-btn~="value"] (whitespace word match), so "lg block" targets both.
+  const { "data-btn": dataBtnProp, ...restProps } = props;
+  const dataBtnValue =
+    [size, block ? "block" : undefined, dataBtnProp]
+      .filter(Boolean)
+      .join(" ") || undefined;
+
   /* Returning a button element with accessible disabled state */
   return (
     <UI
       as="button"
       type={type}
+      data-btn={dataBtnValue}
+      data-style={variant}
+      data-color={color}
       aria-disabled={disabledProps["aria-disabled"]}
       onPointerOver={onPointerOver}
       onPointerLeave={onPointerLeave}
       style={styles}
       className={disabledProps.className}
+      {...restProps}
       {...handlers}
-      {...props}
     >
       {children}
     </UI>
   );
 };
 
-export const IconButton = ({ icon, ...props }: ButtonProps) => {
-  return <Button {...props}>{icon}</Button>;
-};
-
 export default Button;
 Button.displayName = "Button";

package/src/components/buttons/icon-button.scss

@@ -0,0 +1,45 @@
+// Breakpoint at which the label hides (icon-only on mobile).
+// Override this variable in your own SCSS before importing to customise.
+// NOTE: CSS custom properties cannot be used in @media conditions — this must be a SCSS variable.
+$icon-label-bp: 48rem !default; // 768px
+
+// Color reset for all IconButton instances.
+// background stays transparent (set by button[data-style~="icon"]);
+// color defaults to currentColor so the icon inherits from context.
+// Override via styles={{ "--btn-color": "..." }} when a specific color is needed.
+button[data-icon-btn],
+.icon-btn {
+  --btn-color: currentColor;
+}
+
+// Layout when a visible label is present alongside the icon.
+// Higher specificity than button[data-style~="icon"] (which uses padding: unset)
+// so padding is restored without needing a consumer override.
+button[data-icon-btn~="has-label"],
+.icon-btn[data-icon-btn~="has-label"] {
+  gap: 0.375rem;
+  padding-inline: 0.75rem;
+
+  [data-icon-label] {
+    font-size: var(--btn-fs, 0.875rem);
+    line-height: 1;
+    white-space: nowrap;
+  }
+}
+
+// Hide label text visually on mobile — icon only.
+// Uses visually-hidden technique so the span stays in the accessibility tree;
+// screen readers always read it (display:none would remove it from the a11y tree).
+@media (max-width: #{$icon-label-bp}) {
+  [data-icon-label] {
+    position: absolute;
+    width: 1px;
+    height: 1px;
+    padding: 0;
+    margin: -1px;
+    overflow: hidden;
+    clip: rect(0, 0, 0, 0);
+    white-space: nowrap;
+    border: 0;
+  }
+}

package/src/components/buttons/icon-button.stories.tsx

@@ -0,0 +1,200 @@
+import type { StoryObj, Meta } from "@storybook/react-vite";
+import { within, userEvent, expect, fn } from "storybook/test";
+
+import { IconButton } from "./icon-button";
+import "./button.scss";
+import "./icon-button.scss";
+
+// Minimal inline SVG icons for stories — no external icon dependency required
+const CloseIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2}>
+    <line x1="18" y1="6" x2="6" y2="18" />
+    <line x1="6" y1="6" x2="18" y2="18" />
+  </svg>
+);
+
+const SettingsIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2}>
+    <circle cx="12" cy="12" r="3" />
+    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83-2.83l.06-.06A1.65 1.65 0 0 0 4.68 15a1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 2.83-2.83l.06.06A1.65 1.65 0 0 0 9 4.68a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 2.83l-.06.06A1.65 1.65 0 0 0 19.4 9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z" />
+  </svg>
+);
+
+const TrashIcon = () => (
+  <svg width="1em" height="1em" viewBox="0 0 24 24" aria-hidden="true" fill="none" stroke="currentColor" strokeWidth={2}>
+    <polyline points="3 6 5 6 21 6" />
+    <path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6" />
+    <path d="M10 11v6M14 11v6" />
+    <path d="M9 6V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2" />
+  </svg>
+);
+
+const iconClicked = fn();
+
+const meta = {
+  title: "FP.React Components/Buttons/IconButton",
+  component: IconButton,
+  tags: ["beta"],
+  args: {
+    type: "button",
+    icon: <CloseIcon />,
+    "aria-label": "Close",
+    onClick: iconClicked,
+  },
+} as Meta;
+
+export default meta;
+type Story = StoryObj<typeof IconButton>;
+
+/**
+ * Default icon-only button. Requires `aria-label` for screen reader accessibility.
+ */
+export const IconButtonDefault: Story = {
+  args: {
+    "aria-label": "Close",
+    icon: <CloseIcon />,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: "Close" });
+
+    await step("IconButton is rendered with aria-label", async () => {
+      expect(button).toBeInTheDocument();
+      expect(button).toHaveAttribute("aria-label", "Close");
+    });
+
+    await step("IconButton receives focus on tab", async () => {
+      await userEvent.tab();
+      expect(button).toHaveFocus();
+    });
+
+    await step("IconButton click handler fires", async () => {
+      await userEvent.click(button);
+      expect(iconClicked).toHaveBeenCalled();
+    });
+  },
+};
+
+/**
+ * Uses `aria-labelledby` instead of `aria-label` — references an existing element in the DOM.
+ * The XOR type means passing both `aria-label` and `aria-labelledby` is a TypeScript error.
+ */
+export const IconButtonLabelledBy: Story = {
+  render: () => (
+    <div>
+      <span id="icon-btn-label" style={{ marginInlineEnd: "0.5rem" }}>
+        Delete item
+      </span>
+      <IconButton
+        type="button"
+        aria-labelledby="icon-btn-label"
+        icon={<TrashIcon />}
+      />
+    </div>
+  ),
+};
+
+/**
+ * Icon + visible label. Label hides below 768px (overridable via `$icon-label-bp` SCSS variable).
+ * Resize the viewport to see the responsive behavior.
+ * NOTE: `variant="outline"` overrides the default `variant="icon"` to restore padding.
+ */
+export const IconButtonWithLabel: Story = {
+  args: {
+    "aria-label": "Settings",
+    icon: <SettingsIcon />,
+    label: "Settings",
+    variant: "outline",
+  },
+};
+
+/**
+ * All style variants — icon (default), outline, text, and pill.
+ * `icon` is the default: transparent background, currentColor icon, square touch target.
+ * Switch `variant` to restore background or border as needed.
+ */
+export const IconButtonVariants: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }}>
+      <IconButton type="button" aria-label="Icon variant (default)" icon={<SettingsIcon />} />
+      <IconButton type="button" aria-label="Outline variant" icon={<SettingsIcon />} variant="outline" />
+      <IconButton type="button" aria-label="Text variant" icon={<SettingsIcon />} variant="text" />
+      <IconButton type="button" aria-label="Pill variant" icon={<SettingsIcon />} variant="pill" />
+    </div>
+  ),
+};
+
+/**
+ * Size variants — xs through 2xl. Height and touch target scale with font size
+ * via the `--btn-height: calc(var(--btn-fs) * 2.75)` formula.
+ */
+export const IconButtonSizes: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }}>
+      <IconButton type="button" aria-label="Close (xs)" icon={<CloseIcon />} size="xs" />
+      <IconButton type="button" aria-label="Close (sm)" icon={<CloseIcon />} size="sm" />
+      <IconButton type="button" aria-label="Close (md)" icon={<CloseIcon />} size="md" />
+      <IconButton type="button" aria-label="Close (lg)" icon={<CloseIcon />} size="lg" />
+      <IconButton type="button" aria-label="Close (xl)" icon={<CloseIcon />} size="xl" />
+      <IconButton type="button" aria-label="Close (2xl)" icon={<CloseIcon />} size="2xl" />
+    </div>
+  ),
+};
+
+/**
+ * All semantic color variants. Color sets `--btn-bg` and `--btn-color` via
+ * `data-color` — icon buttons keep a transparent background by default so the
+ * icon itself inherits the color token via `currentColor`.
+ */
+export const IconButtonColors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }}>
+      <IconButton type="button" aria-label="Primary" icon={<SettingsIcon />} color="primary" />
+      <IconButton type="button" aria-label="Secondary" icon={<SettingsIcon />} color="secondary" />
+      <IconButton type="button" aria-label="Danger" icon={<TrashIcon />} color="danger" />
+      <IconButton type="button" aria-label="Success" icon={<CloseIcon />} color="success" />
+      <IconButton type="button" aria-label="Warning" icon={<CloseIcon />} color="warning" />
+    </div>
+  ),
+};
+
+/**
+ * Outline variant across all color tokens. The `outline` variant restores a border
+ * and uses `currentColor` for both border and icon — color sets the inherited value.
+ */
+export const IconButtonOutlineColors: Story = {
+  render: () => (
+    <div style={{ display: "flex", gap: "1rem", alignItems: "center", flexWrap: "wrap" }}>
+      <IconButton type="button" aria-label="Primary outline" icon={<SettingsIcon />} variant="outline" color="primary" />
+      <IconButton type="button" aria-label="Secondary outline" icon={<SettingsIcon />} variant="outline" color="secondary" />
+      <IconButton type="button" aria-label="Danger outline" icon={<TrashIcon />} variant="outline" color="danger" />
+      <IconButton type="button" aria-label="Success outline" icon={<CloseIcon />} variant="outline" color="success" />
+      <IconButton type="button" aria-label="Warning outline" icon={<CloseIcon />} variant="outline" color="warning" />
+    </div>
+  ),
+};
+
+/**
+ * Disabled state — uses the WCAG-compliant `aria-disabled` pattern.
+ * The button remains focusable but all interactions are blocked.
+ */
+export const IconButtonDisabled: Story = {
+  args: {
+    "aria-label": "Close (disabled)",
+    icon: <CloseIcon />,
+    disabled: true,
+  },
+  play: async ({ canvasElement, step }) => {
+    const canvas = within(canvasElement);
+    const button = canvas.getByRole("button", { name: "Close (disabled)" });
+
+    await step("Disabled button has aria-disabled attribute", async () => {
+      expect(button).toHaveAttribute("aria-disabled", "true");
+    });
+
+    await step("Disabled button remains focusable", async () => {
+      await userEvent.tab();
+      expect(button).toHaveFocus();
+    });
+  },
+};