@orangesk/orange-design-system 2.0.0-alpha.0 → 2.0.0-alpha.2

package/src/components/Button/IconButton.tsx

@@ -0,0 +1,67 @@
+import React from "react";
+import cx from "classnames";
+
+import { Icon } from "../Icon";
+import { Button, ButtonSize } from "./Button";
+
+export type IconPosition = "left" | "right";
+
+export interface IconButtonProps
+  extends Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, "type" | "ref"> {
+  /** Name of the icon */
+  iconName: string;
+  /** Position of the icon */
+  iconPosition?: IconPosition;
+  /** Class of the icon */
+  iconClassName?: string;
+  /** Button size. Also affects icon size */
+  size?: ButtonSize;
+  /** Use square button. Children are rendered as visually hidden */
+  isSquare?: boolean;
+  children?: React.ReactNode;
+}
+
+const IconButton = React.forwardRef<HTMLButtonElement, IconButtonProps>(
+  (
+    {
+      iconName,
+      iconPosition = "left",
+      iconClassName,
+      children,
+      size,
+      isSquare,
+      ...other
+    },
+    ref,
+  ) => {
+    const IconComponent = ({ className, ...props }: { className?: string }) => (
+      <Icon
+        name={iconName}
+        size={size ?? "medium"}
+        className={cx(iconClassName, className)}
+        {...props}
+      />
+    );
+
+    if (isSquare) {
+      return (
+        <Button size={size} isSquare {...other} ref={ref}>
+          <IconComponent />
+          <span className="visually-hidden">{children}</span>
+        </Button>
+      );
+    }
+
+    return (
+      <Button ref={ref} size={size} {...other}>
+        {iconPosition === "left" && <IconComponent className="btn__icon-left" />}
+        {children}
+        {iconPosition === "right" && <IconComponent className="btn__icon-right" />}
+      </Button>
+    );
+  },
+);
+
+IconButton.displayName = "IconButton";
+
+export { IconButton };

package/src/components/Button/index.tsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+import { Button, ButtonProps } from "./Button";
+import { IconButton } from "./IconButton";
+
+import "./styles/style.scss";
+
+export const ButtonPrimary = (props: ButtonProps) => (
+  <Button type="primary" {...props} />
+);
+ButtonPrimary.displayName = "ButtonPrimary";
+
+export const ButtonFill = (props: ButtonProps) => (
+  <Button type="fill" {...props} />
+);
+ButtonFill.displayName = "ButtonFill";
+
+export const ButtonGhost = (props: ButtonProps) => (
+  <Button type="ghost" {...props} />
+);
+ButtonGhost.displayName = "ButtonGhost";
+
+export { IconButton, Button };

package/src/components/Button/styles/config.scss

@@ -0,0 +1,136 @@
+@use "../../../styles/tokens/space";
+@use "../../../styles/tools/convert";
+
+$base: (
+  default: (
+    border: 2px solid transparent,
+    font-size: convert.to-rem(18px),
+    font-weight: bold,
+    line-height: 1.111111,
+    transition-duration: 200ms,
+    transition-timing-function: ease-in-out,
+    transition-property: (
+      border-color,
+      background-color,
+      color,
+      outline-color,
+    ),
+    border-radius: convert.to-rem(5px),
+  ),
+  active: (
+    transition-property: none,
+  ),
+  focus: (
+    outline: 2px solid var(--color-border-contrast),
+    outline-offset: 2px,
+  ),
+);
+
+$sizes: (
+  default: (
+    min-height: convert.to-rem(40px),
+    padding: convert.to-rem(6px) convert.to-rem(15px),
+  ),
+  small: (
+    min-height: convert.to-rem(30px),
+    padding: convert.to-rem(2px) convert.to-rem(10px),
+  ),
+  large: (
+    min-height: convert.to-rem(50px),
+    padding: convert.to-rem(2px) convert.to-rem(20px),
+  ),
+);
+
+$variants: (
+  "default": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+      border-color: var(--color-border-contrast),
+    ),
+    hover: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-contrast),
+      border-color: transparent,
+    ),
+    active: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-tertiary),
+      border-color: transparent,
+    ),
+    disabled: (
+      color: var(--color-text-disabled),
+      background-color: transparent,
+      border-color: var(--color-fill-disabled),
+    ),
+  ),
+  "primary": (
+    default: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-tertiary),
+      border-color: transparent,
+    ),
+    hover: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-contrast),
+      border-color: transparent,
+    ),
+    active: (
+      color: var(--color-fill-contrast),
+      background-color: transparent,
+      border-color: var(--color-border-contrast),
+    ),
+    disabled: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-disabled),
+      border-color: var(--color-fill-disabled),
+    ),
+  ),
+  "fill": (
+    default: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-contrast),
+      border-color: transparent,
+    ),
+    hover: (
+      color: var(--color-text-default),
+      background-color: transparent,
+      border-color: var(--color-border-contrast),
+    ),
+    active: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-tertiary),
+      border-color: transparent,
+    ),
+    disabled: (
+      color: var(--color-text-inverse),
+      background-color: var(--color-fill-disabled),
+      border-color: var(--color-fill-disabled),
+    ),
+  ),
+  "ghost": (
+    default: (
+      color: var(--color-text-default),
+      background-color: transparent,
+      border-color: transparent,
+    ),
+    hover: (
+      color: var(--color-text-default),
+      background-color: transparent,
+      border-color: var(--color-border-contrast),
+    ),
+    active: (
+      color: var(--color-fill-tertiary),
+      background-color: transparent,
+      border-color: var(--color-border-contrast),
+    ),
+    disabled: (
+      color: var(--color-text-disabled),
+      background-color: transparent,
+      border-color: transparent,
+    ),
+  ),
+);
+
+$icon-offset-from-edge: -0.25em;
+$icon-offset-from-text: 0.5em;

package/src/components/Button/styles/mixins.scss

@@ -0,0 +1,155 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tokens/base";
+@use "../../../styles/tokens/space";
+@use "../../../styles/tokens/color";
+@use "../../../styles/tools/convert";
+@use "../../../styles/tools/generate";
+@use "../../../styles/tools/map";
+@use "./config";
+
+/// Applies base button styles used for every button-base
+/// @param {map} $states - Map of button states
+@mixin base($states: config.$base) {
+  @include generate.css-map($states, "default");
+
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  text-align: center;
+  text-decoration: none;
+  vertical-align: baseline;
+  cursor: pointer;
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map($states, "hover");
+    }
+  }
+
+  &:focus-visible {
+    @include generate.css-map($states, "focus");
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map($states, "active");
+
+    z-index: 2;
+  }
+
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map($states, "disabled");
+
+    cursor: not-allowed;
+  }
+}
+
+// Layout rules. Adds space between adjacent buttons and applies vertical spacing after a button.
+@mixin layout {
+  margin-bottom: space.get();
+
+  &:not(:last-of-type) {
+    margin-right: space.get("small");
+  }
+}
+
+/// Styles our button appropriately
+/// @param {map} $states - Map of button states
+@mixin style($name, $config: config.$styles) {
+  $states: sass-map.get($config, $name);
+
+  @include generate.css-map($states, "default");
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map($states, "hover");
+
+      z-index: 2;
+    }
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map($states, "active");
+
+    z-index: 2;
+  }
+
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map($states, "disabled");
+  }
+}
+
+@mixin size($name, $config: config.$sizes) {
+  @include generate.css-map($config, $name);
+}
+
+@mixin square-base {
+  display: inline-flex;
+  flex: 0 0 auto;
+  flex-flow: row;
+  justify-content: center;
+  align-items: center;
+  padding: 0;
+  line-height: 0;
+}
+
+@mixin square-size($name, $config: config.$sizes) {
+  $size: sass-map.get(sass-map.get($config, $name), "min-height");
+
+  width: $size;
+  height: $size;
+}
+
+@mixin icon($position) {
+  backface-visibility: hidden;
+
+  @if ($position == "left") {
+    margin-left: config.$icon-offset-from-edge;
+    margin-right: config.$icon-offset-from-text;
+  }
+
+  @if ($position == "right") {
+    margin-left: config.$icon-offset-from-text;
+    margin-right: config.$icon-offset-from-edge;
+  }
+}
+
+// Fixes issue when a large icon in large button increases its height
+@mixin large-button-large-icon-size-fix() {
+  margin-top: convert.to-rem(-3px);
+  margin-bottom: convert.to-rem(-3px);
+}
+
+@mixin color($type, $dark: false) {
+  $type-config: sass-map.get(config.$variants, $type);
+
+  @include generate.css-map($type-config, "default");
+
+  @media (hover: hover) {
+    &:hover {
+      @include generate.css-map($type-config, "hover");
+      z-index: 2;
+    }
+  }
+
+  &:focus-visible {
+    outline: 2px solid var(--color-border-contrast);
+    outline-offset: 2px;
+    z-index: 2;
+  }
+
+  &:active,
+  &.is-active {
+    @include generate.css-map($type-config, "active");
+    z-index: 2;
+  }
+
+  &[aria-disabled="true"],
+  &[disabled] {
+    @include generate.css-map($type-config, "disabled");
+    cursor: not-allowed;
+  }
+}

package/src/components/Button/styles/style.scss

@@ -0,0 +1,46 @@
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/color";
+@use "./config";
+@use "./mixins";
+
+@layer components {
+  .btn {
+    @include mixins.base;
+    @include mixins.layout;
+  }
+
+  // button sizes
+  @each $name, $props in config.$sizes {
+    .btn#{generate.variant-name($name)} {
+      @include mixins.size($name);
+    }
+  }
+
+  @each $variant, $props in config.$variants {
+    .btn#{generate.variant-name($variant)} {
+      @include mixins.color($variant, false);
+    }
+  }
+
+  .btn--square {
+    @include mixins.square-base;
+
+    @each $name, $props in config.$sizes {
+      &.btn#{generate.variant-name($name)} {
+        @include mixins.square-size($name);
+      }
+    }
+  }
+
+  .btn__icon-left {
+    @include mixins.icon("left");
+  }
+
+  .btn__icon-right {
+    @include mixins.icon("right");
+  }
+
+  .btn--large .icon--large {
+    @include mixins.large-button-large-icon-size-fix();
+  }
+}

package/src/components/Button/tests/Button.conformance.test.js

@@ -0,0 +1,37 @@
+import React from "react";
+import { render } from "@testing-library/react";
+import { axe } from "jest-axe";
+
+import { Button, IconButton } from "..";
+
+const example = (
+  <>
+    <Button>Button 1</Button>
+    <Button href="#">Anchor</Button>
+    <form>
+      <Button htmlType="submit">Submit button</Button>
+    </form>
+    <form>
+      <Button htmlType="submit" isDisabled>
+        Disabled submit button
+      </Button>
+    </form>
+    <Button isDisabled>Disabled</Button>
+    <IconButton iconName="accessibility">Icon button</IconButton>
+    <IconButton iconName="accessibility" isSquare>
+      Square icon button
+    </IconButton>
+  </>
+);
+
+it("is valid html", () => {
+  const { container } = render(example);
+  expect(container).toHTMLValidate({
+    rules: { "attribute-boolean-style": "off" },
+  });
+});
+
+it("is accessible", async () => {
+  const { container } = render(example);
+  expect(await axe(container)).toHaveNoViolations();
+});

package/src/components/Button/tests/Button.test.js

@@ -0,0 +1,119 @@
+/**
+ * @jest-environment jsdom
+ */
+
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { Button } from "../";
+
+describe("rendering", () => {
+  describe("initial state", () => {
+    let button;
+
+    beforeEach(() => {
+      const { getByRole } = render(<Button />);
+      button = getByRole("button");
+    });
+
+    it("has default tag", () => {
+      expect(button).toBeInTheDocument();
+    });
+
+    it("has default className btn", () => {
+      expect(button).toHaveClass("btn");
+    });
+  });
+
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(<Button>Button</Button>);
+      expect(getByText("Button")).toBeInTheDocument();
+    });
+
+    it("renders children as node", () => {
+      const { getByTestId } = render(
+        <Button>
+          <span data-testid="child">Children</span>
+        </Button>,
+      );
+      expect(getByTestId("child")).toBeInTheDocument();
+    });
+
+    it("has html type when defined", () => {
+      const { getByText } = render(<Button htmlType="button">Button</Button>);
+      expect(getByText("Button").type).toBe("button");
+    });
+
+    it("renders as <a> when href defined", () => {
+      const { getByText } = render(<Button href="/">Button</Button>);
+      expect(getByText("Button").tagName).toBe("A");
+    });
+
+    it("removes html type attribute when href and htmlType defined", () => {
+      const { getByText } = render(
+        <Button href="/" htmlType="button">
+          Button
+        </Button>,
+      );
+      expect(getByText("Button").type).toBeFalsy();
+    });
+
+    it("has aria-disabled when disabled", () => {
+      const { getByText } = render(<Button isDisabled>Button</Button>);
+      expect(getByText("Button").getAttribute("aria-disabled")).toBe("true");
+    });
+
+    it("has is-active class when active", () => {
+      const { getByText } = render(<Button isActive>Button</Button>);
+      expect(getByText("Button")).toHaveClass("is-active");
+    });
+
+    it("has is-dark class when colorScheme is dark", () => {
+      const { getByText } = render(<Button colorScheme="dark">Button</Button>);
+      expect(getByText("Button")).toHaveClass("is-dark");
+    });
+
+    it("has is-light class when colorScheme is light", () => {
+      const { getByText } = render(<Button colorScheme="light">Button</Button>);
+      expect(getByText("Button")).toHaveClass("is-light");
+    });
+
+    it("has btn--square class when squared", () => {
+      const { getByText } = render(<Button isSquare>Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--square");
+    });
+
+    it("has btn--small class when small", () => {
+      const { getByText } = render(<Button size="small">Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--small");
+    });
+
+    it("has btn--large class when large", () => {
+      const { getByText } = render(<Button size="large">Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--large");
+    });
+
+    it("has btn--primary class when primary", () => {
+      const { getByText } = render(<Button type="primary">Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--primary");
+    });
+
+    it("has btn--fill class when fill", () => {
+      const { getByText } = render(<Button type="fill">Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--fill");
+    });
+
+    it("has btn--ghost class when ghost", () => {
+      const { getByText } = render(<Button type="ghost">Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--ghost");
+    });
+
+    it("passes other props", () => {
+      const { getByTestId } = render(
+        <Button data-testid="test">Button</Button>,
+      );
+      expect(getByTestId("test")).toBeInTheDocument();
+    });
+  });
+});

package/src/components/Button/tests/IconButton.unit.test.js

@@ -0,0 +1,107 @@
+import React from "react";
+import { render } from "@testing-library/react";
+
+import { IconButton } from "../IconButton";
+
+//iconName prop is required
+describe("rendering IconButton", () => {
+  describe("initial state", () => {
+    it("renders button with class btn", () => {
+      const { getByTestId } = render(
+        <IconButton data-testid="test-id" iconName="test-name" />,
+      );
+      expect(getByTestId("test-id").tagName).toBe("BUTTON");
+      expect(getByTestId("test-id")).toHaveClass("btn");
+    });
+    it("renders icon with class btn__icon-left", () => {
+      const { container } = render(<IconButton iconName="test-name" />);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).toHaveClass("btn__icon-left");
+    });
+    it("renders icon with class icon--medium", () => {
+      const { container } = render(<IconButton iconName="test-name" />);
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).toHaveClass("icon--medium");
+    });
+  });
+  describe("passed props", () => {
+    it("renders children", () => {
+      const { getByText } = render(
+        <IconButton iconName="test-name">test</IconButton>,
+      );
+      expect(getByText("test")).toBeInTheDocument();
+    });
+    it("icon has class btn__icon-right when iconPosition is set to right", () => {
+      const { container } = render(
+        <IconButton iconName="test-name" iconPosition="right" />,
+      );
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).toHaveClass("btn__icon-right");
+    });
+    it("use element inside svg has /sprite.svg#test-name xlinkhref when name is set to test-name", () => {
+      const { container } = render(<IconButton iconName="test-name" />);
+      expect(container.querySelector("svg").children.length).toBe(1);
+      expect(container.querySelector("svg").children[0].tagName).toBe("use");
+      expect(
+        container.querySelector("svg").children[0].getAttribute("xlink:href"),
+      ).toBe("/sprite.svg#test-name");
+    });
+    ["small", "large"].map((size) => {
+      it(`icon has class icon--${size} when size is set to ${size}`, () => {
+        const { container } = render(
+          <IconButton iconName="test-name" size={size} />,
+        );
+        expect(container.querySelector("svg")).toBeInTheDocument();
+        expect(container.querySelector("svg")).toHaveClass(`icon--${size}`);
+      });
+      it(`button has class btn--${size} when size is set to ${size}`, () => {
+        const { container } = render(
+          <IconButton iconName="test-name" size={size} />,
+        );
+        expect(container.querySelector("button")).toBeInTheDocument();
+        expect(container.querySelector("button")).toHaveClass(`btn--${size}`);
+      });
+    });
+    it("icon has additional class when iconClassName is set", () => {
+      const { container } = render(
+        <IconButton iconName="test-name" iconClassName="test-class" />,
+      );
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).toHaveClass("btn__icon-left");
+      expect(container.querySelector("svg")).toHaveClass("test-class");
+    });
+    it(`button has class btn--square when isSquare is set`, () => {
+      const { container } = render(
+        <IconButton iconName="test-name" isSquare />,
+      );
+      expect(container.querySelector("button")).toBeInTheDocument();
+      expect(container.querySelector("button")).toHaveClass(`btn--square`);
+    });
+    it("icon doesnt have class btn__icon-left or btn__icon-right when isSquare prop is passed", () => {
+      const { container } = render(
+        <IconButton iconName="test-name" isSquare />,
+      );
+      expect(container.querySelector("svg")).toBeInTheDocument();
+      expect(container.querySelector("svg")).not.toHaveClass("btn__icon-left");
+      expect(container.querySelector("svg")).not.toHaveClass("btn__icon-right");
+    });
+    it("renders children inside span when isSquare prop is passed", () => {
+      const { container } = render(
+        <IconButton iconName="test-name" isSquare>
+          test
+        </IconButton>,
+      );
+      expect(container.querySelector("span")).toBeInTheDocument();
+      expect(container.querySelector("span").textContent).toBe("test");
+    });
+    it("renders span with class visually-hidden when isSquare prop is passed", () => {
+      const { container } = render(
+        <IconButton iconName="test-name" isSquare>
+          test
+        </IconButton>,
+      );
+      expect(container.querySelector("span")).toBeInTheDocument();
+      expect(container.querySelector("span")).toHaveClass("visually-hidden");
+    });
+  });
+});