@evo-web/react 0.0.1 → 0.0.3

package/src/evo-button/button.tsx

@@ -1,138 +0,0 @@
-import type { KeyboardEvent } from "react";
-import React from "react";
-import classNames from "classnames";
-import type {
-  AnchorButtonProps,
-  NativeButtonProps,
-  Priority,
-  Size,
-  Split,
-} from "./types";
-import "@ebay/skin/button";
-
-export function EvoButton(props: AnchorButtonProps): React.JSX.Element;
-export function EvoButton(props: NativeButtonProps): React.JSX.Element;
-export function EvoButton(
-  props: AnchorButtonProps | NativeButtonProps,
-): React.JSX.Element {
-  const {
-    priority = "secondary",
-    variant = "standard",
-    size,
-    bodyState,
-    split,
-    transparent = false,
-    fluid = false,
-    disabled,
-    partiallyDisabled,
-    children,
-    onKeyDown,
-    onEscape,
-    truncate = false,
-    href,
-    className: extraClasses,
-    borderless,
-    fixedHeight,
-    ...rest
-  } = props;
-  const classPrefix = href ? "fake-btn" : "btn";
-  const priorityStyles: { [key in Priority]: string } = {
-    primary: `${classPrefix}--primary`,
-    secondary: `${classPrefix}--secondary`,
-    tertiary: `${classPrefix}--tertiary`,
-    none: "",
-  };
-  const sizeStyles: { [key in Size]: string } = {
-    large: `${classPrefix}--large`,
-    small: `${classPrefix}--small`,
-  };
-  const splitStyles: { [key in Split]: string } = {
-    start: `${classPrefix}--split-start`,
-    end: `${classPrefix}--split-end`,
-  };
-  const isDestructive = variant === "destructive";
-  const isForm = variant === "form";
-  const className = classNames(
-    classPrefix,
-    extraClasses,
-    priorityStyles[isForm || borderless ? "none" : priority],
-    size && sizeStyles[size],
-    split && splitStyles[split],
-    isDestructive && `${classPrefix}--destructive`,
-    isForm && `${classPrefix}--form`,
-    transparent && `${classPrefix}--transparent`,
-    fluid && `${classPrefix}--fluid`,
-    truncate && `${classPrefix}--truncated`,
-    borderless && `${classPrefix}--borderless`,
-    fixedHeight &&
-      (size && sizeStyles[size]
-        ? `${sizeStyles[size]}-fixed-height`
-        : `${classPrefix}--fixed-height`),
-  );
-
-  const bodyContent = (() => {
-    switch (bodyState) {
-      case "loading":
-        return (
-          <span className="btn__cell">
-            {/* TODO: Replace with <EvoProgressSpinner /> when available */}
-            <span>Loading...</span>
-          </span>
-        );
-      case "expand":
-        return (
-          <span className="btn__cell">
-            <span className="btn__text">{children}</span>
-            {/* TODO: Replace with <EvoIconChevronDown16 /> when available */}
-            <span>▼</span>
-          </span>
-        );
-      default:
-        return children;
-    }
-  })();
-
-  const ariaLive = bodyState === "loading" ? "polite" : undefined;
-
-  const keyDownHandler = (
-    event: KeyboardEvent<HTMLButtonElement | HTMLAnchorElement>,
-  ) => {
-    onKeyDown?.(
-      event as KeyboardEvent<HTMLButtonElement> &
-        KeyboardEvent<HTMLAnchorElement>,
-    );
-    if (event.key === "Escape" && !disabled && onEscape) {
-      onEscape(
-        event as KeyboardEvent<HTMLButtonElement> &
-          KeyboardEvent<HTMLAnchorElement>,
-      );
-    }
-  };
-
-  if (href) {
-    return (
-      <a
-        {...(rest as React.ComponentProps<"a">)}
-        className={className}
-        href={disabled ? undefined : href}
-        onKeyDown={keyDownHandler}
-        aria-live={ariaLive}
-      >
-        {bodyContent}
-      </a>
-    );
-  }
-
-  return (
-    <button
-      {...(rest as React.ComponentProps<"button">)}
-      disabled={disabled}
-      aria-disabled={partiallyDisabled ? "true" : undefined}
-      aria-live={ariaLive}
-      className={className}
-      onKeyDown={keyDownHandler}
-    >
-      {bodyContent}
-    </button>
-  );
-}

package/src/evo-button/index.ts

@@ -1,10 +0,0 @@
-export { EvoButton } from "./button";
-export { EvoButtonCell } from "./button-cell";
-export type {
-  EvoButtonProps,
-  Size,
-  Priority,
-  Variant,
-  BodyState,
-  Split,
-} from "./types";

package/src/evo-button/test/__snapshots__/test.server.tsx.snap

@@ -1,83 +0,0 @@
-// Vitest Snapshot v1, https://vitest.dev/guide/snapshot.html
-
-exports[`EvoButton SSR > should render button with bodyState=expand 1`] = `"<button class="btn btn--secondary"><span class="btn__cell"><span class="btn__text">Button</span><span>▼</span></span></button>"`;
-
-exports[`EvoButton SSR > should render button with bodyState=loading 1`] = `"<button aria-live="polite" class="btn btn--secondary"><span class="btn__cell"><span>Loading...</span></span></button>"`;
-
-exports[`EvoButton SSR > should render button with borderless=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with borderless=true 1`] = `"<button class="btn btn--borderless">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with disabled=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with disabled=true 1`] = `"<button disabled="" class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with fixedHeight=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with fixedHeight=true 1`] = `"<button class="btn btn--secondary btn--fixed-height">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with fluid=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with fluid=true 1`] = `"<button class="btn btn--secondary btn--fluid">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with partiallyDisabled=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with partiallyDisabled=true 1`] = `"<button aria-disabled="true" class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with priority=none 1`] = `"<button class="btn">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with priority=primary 1`] = `"<button class="btn btn--primary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with priority=secondary 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with priority=tertiary 1`] = `"<button class="btn btn--tertiary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with size=large 1`] = `"<button class="btn btn--secondary btn--large">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with size=small 1`] = `"<button class="btn btn--secondary btn--small">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with split=end 1`] = `"<button class="btn btn--primary btn--split-end">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with split=start 1`] = `"<button class="btn btn--primary btn--split-start">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with transparent=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with transparent=true 1`] = `"<button class="btn btn--secondary btn--transparent">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with truncate=false 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with truncate=true 1`] = `"<button class="btn btn--secondary btn--truncated">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with variant=destructive 1`] = `"<button class="btn btn--secondary btn--destructive">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with variant=form 1`] = `"<button class="btn btn--form">Button</button>"`;
-
-exports[`EvoButton SSR > should render button with variant=standard 1`] = `"<button class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render combined: primary large fluid 1`] = `"<button class="btn btn--primary btn--large btn--fluid">Combined</button>"`;
-
-exports[`EvoButton SSR > should render defaults 1`] = `"<button class="btn btn--secondary">Default Button</button>"`;
-
-exports[`EvoButton SSR > should render destructive primary large 1`] = `"<button class="btn btn--primary btn--large btn--destructive">Delete</button>"`;
-
-exports[`EvoButton SSR > should render disabled link without href 1`] = `"<a class="fake-btn fake-btn--secondary">Disabled Link</a>"`;
-
-exports[`EvoButton SSR > should render fake version (anchor) 1`] = `"<a aria-label="fake button" class="fake-btn fake-btn--primary fake-btn--large" href="https://ebay.com">Link Button</a>"`;
-
-exports[`EvoButton SSR > should render form variant with expand 1`] = `"<button class="btn btn--form"><span class="btn__cell"><span class="btn__text">Form Expand</span><span>▼</span></span></button>"`;
-
-exports[`EvoButton SSR > should render large fixed-height button 1`] = `"<button class="btn btn--secondary btn--large btn--large-fixed-height">Large Fixed Height</button>"`;
-
-exports[`EvoButton SSR > should render large truncated button 1`] = `"<button class="btn btn--secondary btn--large btn--truncated">Large Truncated</button>"`;
-
-exports[`EvoButton SSR > should render with ButtonCell 1`] = `"<button class="btn btn--secondary"><span class="btn__cell" style="justify-content:space-between"><span>Left</span><span>Right</span></span></button>"`;
-
-exports[`EvoButton SSR > should render with aria-label 1`] = `"<button aria-label="Submit form" class="btn btn--secondary">Submit</button>"`;
-
-exports[`EvoButton SSR > should render with custom className 1`] = `"<button class="btn custom-class btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render with data attributes 1`] = `"<button data-testid="button" class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render with id override 1`] = `"<button id="test" class="btn btn--secondary">Button</button>"`;
-
-exports[`EvoButton SSR > should render with type override 1`] = `"<button type="submit" class="btn btn--secondary">Submit</button>"`;

package/src/evo-button/test/test.browser.tsx

@@ -1,298 +0,0 @@
-import React from "react";
-import { describe, it, expect, beforeEach, afterEach, vi } from "vitest";
-import { render } from "vitest-browser-react";
-import { userEvent } from "vitest/browser";
-import { EvoButton } from "../button";
-import { EvoButtonCell } from "../button-cell";
-
-describe("evo-button", () => {
-  let user: ReturnType<typeof userEvent.setup>;
-
-  beforeEach(() => {
-    user = userEvent.setup();
-  });
-
-  afterEach(() => {
-    user.cleanup();
-  });
-
-  describe("given button is enabled", () => {
-    it("emits click event when clicked", async () => {
-      const onClick = vi.fn();
-      const screen = await render(
-        <EvoButton onClick={onClick}>Click Me</EvoButton>,
-      );
-
-      await user.click(screen.getByRole("button"));
-
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-
-    it("emits escape event when escape key is pressed", async () => {
-      const onEscape = vi.fn();
-      const screen = await render(
-        <EvoButton onEscape={onEscape}>Button</EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await user.click(button);
-      await user.keyboard("{Escape}");
-
-      expect(onEscape).toHaveBeenCalledTimes(1);
-    });
-
-    it("emits both onKeyDown and onEscape on escape key", async () => {
-      const onKeyDown = vi.fn();
-      const onEscape = vi.fn();
-      const screen = await render(
-        <EvoButton onKeyDown={onKeyDown} onEscape={onEscape}>
-          Button
-        </EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await user.click(button);
-      await user.keyboard("{Escape}");
-
-      expect(onKeyDown).toHaveBeenCalledTimes(1);
-      expect(onEscape).toHaveBeenCalledTimes(1);
-    });
-
-    it("emits focus event when focused", async () => {
-      const onFocus = vi.fn();
-      const screen = await render(
-        <EvoButton onFocus={onFocus}>Button</EvoButton>,
-      );
-
-      await user.click(screen.getByRole("button"));
-
-      expect(onFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it("emits blur event when blurred", async () => {
-      const onBlur = vi.fn();
-      const screen = await render(
-        <EvoButton onBlur={onBlur}>Button</EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await user.click(button);
-      await user.tab();
-
-      expect(onBlur).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("given button is disabled", () => {
-    it("does not emit click event when clicked", async () => {
-      const onClick = vi.fn();
-      const screen = await render(
-        <EvoButton onClick={onClick} disabled>
-          Button
-        </EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await expect.element(button).toBeDisabled();
-      expect(onClick).not.toHaveBeenCalled();
-    });
-
-    it("does not emit escape event when escape key is pressed", async () => {
-      const onEscape = vi.fn();
-      const screen = await render(
-        <EvoButton onEscape={onEscape} disabled>
-          Button
-        </EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await expect.element(button).toBeDisabled();
-      expect(onEscape).not.toHaveBeenCalled();
-    });
-  });
-
-  describe("ref forwarding", () => {
-    it("forwards ref to button element", async () => {
-      const ref = React.createRef<HTMLButtonElement>();
-      await render(<EvoButton ref={ref}>Button</EvoButton>);
-
-      expect(ref.current).toBeInstanceOf(HTMLButtonElement);
-      expect(ref.current?.tagName).toBe("BUTTON");
-    });
-
-    it("forwards ref to anchor element when href is provided", async () => {
-      const ref = React.createRef<HTMLAnchorElement>();
-      await render(
-        <EvoButton href="https://ebay.com" ref={ref}>
-          Link
-        </EvoButton>,
-      );
-
-      expect(ref.current).toBeInstanceOf(HTMLAnchorElement);
-      expect(ref.current?.tagName).toBe("A");
-    });
-  });
-
-  describe("anchor element behavior", () => {
-    it("renders as link when href is provided", async () => {
-      const screen = await render(
-        <EvoButton
-          href="https://ebay.com"
-          priority="primary"
-          onClick={(e) => e.preventDefault()}
-        >
-          Link Button
-        </EvoButton>,
-      );
-
-      const link = screen.getByRole("link");
-      await expect.element(link).toHaveAttribute("href", "https://ebay.com");
-    });
-
-    it("does not render href when disabled", async () => {
-      const screen = await render(
-        <EvoButton href="https://ebay.com" disabled>
-          Disabled Link
-        </EvoButton>,
-      );
-
-      const link = screen.getByText("Disabled Link");
-      await expect.element(link).not.toHaveAttribute("href");
-    });
-
-    it("emits escape event on anchor element", async () => {
-      const onEscape = vi.fn();
-      const screen = await render(
-        <EvoButton
-          href="https://ebay.com"
-          onEscape={onEscape}
-          onClick={(e) => e.preventDefault()}
-        >
-          Link
-        </EvoButton>,
-      );
-
-      const link = screen.getByRole("link");
-      await user.click(link);
-      await user.keyboard("{Escape}");
-
-      expect(onEscape).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("body states", () => {
-    it("renders loading state with aria-live", async () => {
-      const screen = await render(
-        <EvoButton bodyState="loading">Submit</EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      expect(button).toHaveAttribute("aria-live", "polite");
-    });
-
-    it("renders expand state with correct structure", async () => {
-      const screen = await render(
-        <EvoButton bodyState="expand">Options</EvoButton>,
-      );
-
-      const text = screen.getByText("Options");
-      await expect.element(text).toBeInTheDocument();
-    });
-
-    it("maintains interactivity in loading state", async () => {
-      const onClick = vi.fn();
-      const screen = await render(
-        <EvoButton bodyState="loading" onClick={onClick}>
-          Submit
-        </EvoButton>,
-      );
-
-      await user.click(screen.getByRole("button"));
-
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("partially disabled state", () => {
-    it("renders with aria-disabled but remains clickable", async () => {
-      const onClick = vi.fn();
-      const screen = await render(
-        <EvoButton partiallyDisabled onClick={onClick}>
-          Partially Disabled
-        </EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await expect.element(button).toHaveAttribute("aria-disabled", "true");
-
-      await button.click({ force: true });
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("keyboard navigation", () => {
-    it("can be focused via keyboard", async () => {
-      const onFocus = vi.fn();
-      await render(<EvoButton onFocus={onFocus}>Button</EvoButton>);
-
-      await user.tab();
-
-      expect(onFocus).toHaveBeenCalledTimes(1);
-    });
-
-    it("emits onKeyDown for all keys", async () => {
-      const onKeyDown = vi.fn();
-      const screen = await render(
-        <EvoButton onKeyDown={onKeyDown}>Button</EvoButton>,
-      );
-
-      const button = screen.getByRole("button");
-      await user.click(button);
-      await user.keyboard("{Enter}");
-
-      expect(onKeyDown).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("button cell", () => {
-    it("renders custom layout with ButtonCell", async () => {
-      const onClick = vi.fn();
-      const screen = await render(
-        <EvoButton onClick={onClick}>
-          <EvoButtonCell style={{ justifyContent: "space-between" }}>
-            <span>Left</span>
-            <span>Right</span>
-          </EvoButtonCell>
-        </EvoButton>,
-      );
-
-      await expect.element(screen.getByText("Left")).toBeInTheDocument();
-      await expect.element(screen.getByText("Right")).toBeInTheDocument();
-
-      await user.click(screen.getByRole("button"));
-      expect(onClick).toHaveBeenCalledTimes(1);
-    });
-  });
-
-  describe("accessibility", () => {
-    it("has correct role for button", async () => {
-      const screen = await render(<EvoButton>Button</EvoButton>);
-      await expect.element(screen.getByRole("button")).toBeInTheDocument();
-    });
-
-    it("has correct role for link", async () => {
-      const screen = await render(
-        <EvoButton href="https://ebay.com">Link</EvoButton>,
-      );
-      await expect.element(screen.getByRole("link")).toBeInTheDocument();
-    });
-
-    it("supports aria-label", async () => {
-      const screen = await render(
-        <EvoButton aria-label="Submit form">Submit</EvoButton>,
-      );
-      const button = screen.getByRole("button", { name: "Submit form" });
-      await expect.element(button).toBeInTheDocument();
-    });
-  });
-});