@edux-design/buttons 0.2.0 → 0.3.0

package/src/elements/IconButton.test.jsx

@@ -1,62 +0,0 @@
-import React from "react";
-import { render, screen } from "@testing-library/react";
-import { IconButton } from "./IconButton";
-
-describe("IconButton", () => {
-  it("renders an icon-only button with an accessible name", () => {
-    render(
-      <IconButton icon={<span aria-hidden="true">X</span>} aria-label="Close" />,
-    );
-
-    expect(screen.getByRole("button", { name: "Close" })).toBeInTheDocument();
-  });
-
-  it("warns in dev mode when no accessible name is provided", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    process.env.NODE_ENV = "development";
-
-    render(<IconButton icon={<span aria-hidden="true">X</span>} />);
-
-    expect(warnSpy).toHaveBeenCalledWith(
-      "[IconButton]: Provide an accessible name with aria-label or aria-labelledby.",
-    );
-
-    warnSpy.mockRestore();
-  });
-
-  it("does not warn when aria-labelledby is provided", () => {
-    const warnSpy = vi.spyOn(console, "warn").mockImplementation(() => {});
-    process.env.NODE_ENV = "development";
-
-    render(
-      <>
-        <span id="icon-label">Close</span>
-        <IconButton icon={<span aria-hidden="true">X</span>} aria-labelledby="icon-label" />
-      </>,
-    );
-
-    expect(warnSpy).not.toHaveBeenCalledWith(
-      "[IconButton]: Provide an accessible name with aria-label or aria-labelledby.",
-    );
-
-    warnSpy.mockRestore();
-  });
-
-  it.each([
-    ["small", "size-control-sm"],
-    ["medium", "size-control-md"],
-    ["large", "size-control-lg"],
-  ])("maps the %s size to the shared control token", (size, className) => {
-    render(
-      <IconButton
-        icon={<span aria-hidden="true">X</span>}
-        aria-label="Close"
-        size={size}
-      />,
-    );
-
-    expect(screen.getByRole("button", { name: "Close" })).toHaveClass(
-      className,
-    );
-  });
-});

package/src/elements/MenuButton.jsx

@@ -1,68 +0,0 @@
-import React, { forwardRef } from "react";
-import { cx } from "@edux-design/utils";
-import { Chevron } from "@edux-design/icons";
-
-/**
- * Props for the MenuButton component.
- *
- * @typedef {React.ButtonHTMLAttributes<HTMLButtonElement> & {
- *   children?: React.ReactNode,
- *   caret?: React.ReactNode,
- *   size?: "small"|"medium",
- *   className?: string,
- * }} MenuButtonProps
- */
-
-/**
- * MenuButton component.
- *
- * Provides a styled button intended for menu triggers.
- * Consumers should pass `aria-expanded`, `aria-controls`, and any
- * custom labeling they need. `aria-haspopup="menu"` is applied by default.
- *
- * @component
- * @type {React.ForwardRefExoticComponent<MenuButtonProps & React.RefAttributes<HTMLButtonElement>>}
- *
- * @example
- * ```jsx
- * <MenuButton aria-expanded={open} onClick={() => setOpen((prev) => !prev)}>
- *   Options
- * </MenuButton>
- * ```
- */
-export const MenuButton = forwardRef(function MenuButton(
-  {
-    children,
-    caret,
-    size = "medium",
-    className,
-    type = "button",
-    "aria-haspopup": ariaHasPopup = "menu",
-    ...props
-  },
-  ref,
-) {
-  const styles = cx(
-    "inline-flex items-center justify-center gap-8 rounded-lg border-2 border-border-primary-base bg-bg-base px-16 text-fg-primary-emphasis transition-all duration-300 ease-in-out outline-none focus:shadow-focus focus-visible:shadow-focus disabled:cursor-not-allowed disabled:border-border-subtle disabled:bg-bg-inactive disabled:text-fg-inactive",
-    {
-      "min-h-control-sm text-sm": size === "small",
-      "min-h-control-md text-base": size === "medium",
-    },
-    className,
-  );
-
-  return (
-    <button
-      {...props}
-      ref={ref}
-      type={type}
-      aria-haspopup={ariaHasPopup}
-      className={styles}
-    >
-      {children ? <span>{children}</span> : null}
-      <span aria-hidden="true" className="flex items-center text-current">
-        {caret ?? <Chevron />}
-      </span>
-    </button>
-  );
-});

package/src/elements/MenuButton.test.jsx

@@ -1,40 +0,0 @@
-import React from "react";
-import { fireEvent, render, screen } from "@testing-library/react";
-import { MenuButton } from "./MenuButton";
-
-describe("MenuButton", () => {
-  it("renders a semantic button trigger", () => {
-    render(<MenuButton>Options</MenuButton>);
-
-    expect(screen.getByRole("button", { name: "Options" })).toHaveAttribute(
-      "aria-haspopup",
-      "menu",
-    );
-  });
-
-  it("forwards interactive props to the native button", () => {
-    const onClick = vi.fn();
-    render(
-      <MenuButton aria-expanded={true} onClick={onClick}>
-        Options
-      </MenuButton>,
-    );
-
-    const button = screen.getByRole("button", { name: "Options" });
-    fireEvent.click(button);
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-    expect(button).toHaveAttribute("aria-expanded", "true");
-  });
-
-  it.each([
-    ["small", "min-h-control-sm"],
-    ["medium", "min-h-control-md"],
-  ])("maps the %s size to the shared control token", (size, className) => {
-    render(<MenuButton size={size}>Options</MenuButton>);
-
-    expect(screen.getByRole("button", { name: "Options" })).toHaveClass(
-      className,
-    );
-  });
-});

package/src/elements/testA11y.js

@@ -1,14 +0,0 @@
-import axe from "axe-core";
-
-export async function expectNoAxeViolations(container) {
-  const results = await axe.run(container, {
-    rules: {
-      "color-contrast": { enabled: false },
-    },
-  });
-  const message = results.violations
-    .map((violation) => `${violation.id}: ${violation.help}`)
-    .join("\n");
-
-  expect(results.violations, message).toHaveLength(0);
-}

package/src/index.js

@@ -1,6 +0,0 @@
-export { IconButton } from "./elements/IconButton";
-export { Button } from "./elements/Button";
-export { MenuButton } from "./elements/MenuButton";
-export { ButtonGroup } from "./elements/ButtonGroup";
-export { ButtonGroupItem } from "./elements/ButtonGroupItem";
-export { ButtonCounter } from "./elements/ButtonCounter";

package/src/util/MenuButtonContext.jsx

@@ -1,3 +0,0 @@
-import React, { createContext, useContext } from "react";
-
-export const MenuButtonContext = createContext();

package/tsconfig.json

@@ -1,12 +0,0 @@
-
-{
-
-    "compilerOptions": {
-        "allowJs": true,
-        "checkJs": false,            
-        "declaration": true,
-        "emitDeclarationOnly": true, 
-        "jsx": "react-jsx",
-        "outDir": "dist"
-    }
-}