@edux-design/buttons 0.1.4 → 0.2.0

package/src/demo/ButtonGroup.stories.jsx

@@ -0,0 +1,67 @@
+import React, { useState } from "react";
+import { ButtonGroup, ButtonGroupItem } from "./../index";
+import { Warning } from "@edux-design/icons";
+
+export default {
+  title: "Components/ButtonGroup",
+  component: ButtonGroup,
+  parameters: {
+    layout: "centered",
+  },
+  argTypes: {
+    size: {
+      control: { type: "select" },
+      options: ["small", "medium", "large"],
+    },
+    isStretched: { control: "boolean" },
+  },
+};
+
+const Template = (args) => {
+  const [value, setValue] = useState(args.value ?? args.defaultValue ?? "one");
+  return (
+    <ButtonGroup
+      {...args}
+      value={value}
+      onChange={(nextValue) => {
+        setValue(nextValue);
+        args.onChange?.(nextValue);
+      }}
+    >
+      <ButtonGroupItem value="one">Label (11)</ButtonGroupItem>
+      <ButtonGroupItem value="two">Label (11)</ButtonGroupItem>
+      <ButtonGroupItem
+        value="alert"
+        endIcon={<Warning className="h-4 w-4 text-warning-600" />}
+      >
+        Label
+      </ButtonGroupItem>
+    </ButtonGroup>
+  );
+};
+
+export const Playground = Template.bind({});
+Playground.args = { defaultValue: "one" };
+
+export const WithIconCounts = () => {
+  const [value, setValue] = useState("inbox");
+
+  return (
+    <div className="w-[360px]">
+      <ButtonGroup
+        isStretched
+        value={value}
+        onChange={(next) => setValue(next)}
+      >
+        <ButtonGroupItem value="inbox">Inbox (11)</ButtonGroupItem>
+        <ButtonGroupItem value="drafts">Drafts (11)</ButtonGroupItem>
+        <ButtonGroupItem
+          value="alerts"
+          endAdornment={<Warning className="h-3.5 w-3.5 text-warning-600" />}
+        >
+          Alerts
+        </ButtonGroupItem>
+      </ButtonGroup>
+    </div>
+  );
+};

package/src/elements/Button.a11y.test.jsx

@@ -0,0 +1,60 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { Button } from "./Button";
+import { IconButton } from "./IconButton";
+import { MenuButton } from "./MenuButton";
+import { ButtonGroup } from "./ButtonGroup";
+import { ButtonGroupItem } from "./ButtonGroupItem";
+import { ButtonCounter } from "./ButtonCounter";
+import { expectNoAxeViolations } from "./testA11y";
+
+describe("buttons accessibility", () => {
+  it("Button has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <Button startIcon={<span aria-hidden="true">+</span>}>Save</Button>,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("IconButton has no detectable accessibility violations when named", async () => {
+    const { container } = render(
+      <IconButton
+        icon={<span aria-hidden="true">X</span>}
+        aria-label="Close dialog"
+      />,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("MenuButton has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <MenuButton aria-expanded={false}>Options</MenuButton>,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("ButtonGroup has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <ButtonGroup defaultValue="first">
+        <ButtonGroupItem value="first">First</ButtonGroupItem>
+        <ButtonGroupItem value="second">Second</ButtonGroupItem>
+        <ButtonGroupItem value="third" disabled>
+          Third
+        </ButtonGroupItem>
+      </ButtonGroup>,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+
+  it("ButtonCounter has no detectable accessibility violations", async () => {
+    const { container } = render(
+      <ButtonCounter defaultValue={2} aria-label="Quantity" />,
+    );
+
+    await expectNoAxeViolations(container);
+  });
+});

package/src/elements/Button.jsx

@@ -0,0 +1,127 @@
+import React, { forwardRef } from "react";
+import { cx } from "@edux-design/utils";
+
+/**
+ * Props for the Button component.
+ *
+ * Extends all native HTML `<button>` attributes, while adding
+ * design-system variants and state controls.
+ *
+ * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
+ *   children?: React.ReactNode,
+ *   startIcon?: React.ReactNode,
+ *   endIcon?: React.ReactNode,
+ *   size?: "small"|"medium"|"large",
+ *   isSecondary?: boolean,
+ *   isDanger?: boolean,
+ *   isBare?: boolean,
+ *   isStretched?: boolean,
+ *   disabled?: boolean,
+ *   className?: string
+ * }} ButtonProps
+ */
+
+/**
+ * Button component.
+ *
+ * Provides design-system styled button with support for
+ * multiple visual variants, sizing, and states.
+ *
+ * @component
+ * @type {React.ForwardRefExoticComponent<ButtonProps & React.RefAttributes<HTMLButtonElement>>}
+ *
+ * @example
+ * ```jsx
+ * <Button size="small">Save</Button>
+ * <Button isSecondary>Cancel</Button>
+ * <Button isDanger disabled>Delete</Button>
+ * ```
+ */
+export const Button = forwardRef(
+  (
+    {
+      children,
+      startIcon,
+      endIcon,
+      size = "medium",
+      isSecondary,
+      isDanger,
+      isBare,
+      isStretched,
+      disabled,
+      className,
+      ...props
+    },
+    ref
+  ) => {
+    let variant = "primary";
+    if (disabled) {
+      variant = "disabled";
+    } else if (isDanger && isBare) {
+      variant = "dangerBare";
+    } else if (isDanger) {
+      variant = "danger";
+    } else if (isSecondary) {
+      variant = "secondary";
+    } else if (isBare) {
+      variant = "bare";
+    }
+
+    // handle conflicting props - the last bool wins
+    if (process.env.NODE_ENV !== "production") {
+      const count = [isSecondary, isDanger, isBare].filter(Boolean).length;
+      const hasAllowedCombo = isDanger && isBare && count === 2;
+      if (count > 1 && !hasAllowedCombo) {
+        console.warn(
+          "[Button]: Multiple variant props passed. Using the highest priority only."
+        );
+      }
+    }
+
+    const defaults =
+      "flex justify-center items-center gap-8 focus:shadow-focus focus-visible:shadow-focus outline-none transition-all duration-300 ease-in-out cursor-pointer";
+
+    const fonts =
+      "text-bold tracking-normal hover:underline hover:underline-offset-(--underline-offset-btn) active:underline active:underline-offset-(--underline-offset-btn)";
+
+    const sizes = {
+      small: "h-control-sm py-8 px-16 rounded-lg text-sm",
+      medium: "h-control-md py-8 px-16 rounded-lg text-base",
+      large: "h-control-lg py-8 px-16 rounded-lg text-lg",
+    };
+
+    const width = isStretched ? "w-full" : "w-fit-content";
+
+    const variants = {
+      primary:
+        "border-2 border-border-primary-emphasis bg-bg-primary-base text-white hover:bg-border-focus hover:text-fg-focus hover:border-border-emphasis hover:shadow-md active:bg-border-focus active:bg-bg-focus-overlay active:text-fg-focus",
+      secondary:
+        "border-2 border-border-primary-base bg-bg-base text-fg-primary-emphasis hover:shadow-md hover:bg-bg-primary-subtle active:bg-bg-primary-subtle-90",
+      bare: "bg-bg-base text-fg-primary-emphasis hover:bg-bg-minimal active:bg-bg-minimal-5",
+      dangerBare:
+        "bg-bg-base text-fg-danger-emphasis hover:bg-bg-danger-subtle active:bg-bg-danger-subtle",
+      danger:
+        "bg-bg-danger-base border-2 border-border-danger-emphasis text-white hover:bg-bg-danger-base-5 active:bg-bg-danger-base-10",
+      disabled:
+        "border-2 border-border-subtle bg-bg-inactive text-fg-inactive hover:no-underline",
+    };
+
+    const STYLES = cx(defaults, sizes[size], width, fonts, variants[variant]);
+
+    return (
+      <button
+        role="button"
+        type="button"
+        aria-disabled={disabled}
+        disabled={disabled}
+        className={STYLES}
+        ref={ref}
+        {...props}
+      >
+        {startIcon}
+        {children ? <span>{children}</span> : null}
+        {endIcon}
+      </button>
+    );
+  }
+);

package/src/elements/Button.test.jsx

@@ -0,0 +1,120 @@
+import React from "react";
+import { render, screen } from "@testing-library/react";
+import { Button } from "./Button";
+
+describe("Button", () => {
+  it("renders children", () => {
+    render(<Button>Click me</Button>);
+    expect(screen.getByRole("button")).toHaveTextContent("Click me");
+  });
+
+  it("applies medium size by default", () => {
+    render(<Button>Default size</Button>);
+    const btn = screen.getByRole("button");
+    expect(btn).toHaveClass("h-control-md");
+  });
+
+  it("applies small size when size='small'", () => {
+    render(<Button size="small">Small</Button>);
+    expect(screen.getByRole("button")).toHaveClass("h-control-sm");
+  });
+
+  it("applies large size when size='large'", () => {
+    render(<Button size="large">Large</Button>);
+    expect(screen.getByRole("button")).toHaveClass("h-control-lg");
+  });
+
+  it("uses stretched width when isStretched=true", () => {
+    render(<Button isStretched>Stretch</Button>);
+    expect(screen.getByRole("button").className).toMatch(/w-full/);
+  });
+
+  it("applies primary variant by default", () => {
+    render(<Button>Primary</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-primary-base/);
+  });
+
+  it("applies secondary variant when isSecondary=true", () => {
+    render(<Button isSecondary>Secondary</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-base/);
+  });
+
+  it("applies bare variant when isBare=true", () => {
+    render(<Button isBare>Bare</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-base/);
+    expect(screen.getByRole("button").className).toMatch(
+      /text-fg-primary-emphasis/
+    );
+  });
+
+  it("applies danger variant when isDanger=true", () => {
+    render(<Button isDanger>Danger</Button>);
+    expect(screen.getByRole("button").className).toMatch(/bg-bg-danger-base/);
+  });
+
+  it("applies danger bare variant when isDanger and isBare", () => {
+    render(
+      <Button isDanger isBare>
+        Danger Bare
+      </Button>
+    );
+    const btn = screen.getByRole("button");
+    expect(btn.className).toMatch(/text-fg-danger-emphasis/);
+    expect(btn.className).toMatch(/bg-bg-base/);
+    expect(btn.className).not.toMatch(/bg-bg-danger-base/);
+  });
+
+  it("applies disabled variant when disabled=true", () => {
+    render(<Button disabled>Disabled</Button>);
+    const btn = screen.getByRole("button");
+    expect(btn).toBeDisabled();
+    expect(btn).toHaveAttribute("aria-disabled", "true");
+    expect(btn.className).toMatch(/bg-bg-inactive/);
+  });
+
+  it("logs a warning in dev mode if multiple variants are passed", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(
+      <Button isSecondary isDanger>
+        Conflict
+      </Button>
+    );
+
+    expect(warnSpy).toHaveBeenCalledWith(
+      "[Button]: Multiple variant props passed. Using the highest priority only."
+    );
+
+    warnSpy.mockRestore();
+  });
+
+  it("renders start and end icons when provided", () => {
+    render(
+      <Button
+        startIcon={<span data-testid="start-icon">S</span>}
+        endIcon={<span data-testid="end-icon">E</span>}
+      >
+        With icons
+      </Button>
+    );
+
+    expect(screen.getByTestId("start-icon")).toBeInTheDocument();
+    expect(screen.getByTestId("end-icon")).toBeInTheDocument();
+  });
+
+  it("does not warn for the danger bare combination", () => {
+    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
+    process.env.NODE_ENV = "development";
+
+    render(
+      <Button isDanger isBare>
+        Allowed
+      </Button>
+    );
+
+    expect(warnSpy).not.toHaveBeenCalled();
+
+    warnSpy.mockRestore();
+  });
+});