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

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,229 @@
+@use "sass:map" as sass-map;
+@use "../../../styles/tokens/color";
+@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 sass-map.get(color.$colors-light, "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),
+  ),
+);
+
+$colors-light: (
+  "default": (
+    default: (
+      color: sass-map.get(color.$colors-light, text-default),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-light, border-contrast),
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-contrast),
+      border-color: transparent,
+    ),
+    active: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-tertiary),
+      border-color: transparent,
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-light, text-disabled),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-light, fill-disabled),
+    ),
+  ),
+  "primary": (
+    default: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-tertiary),
+      border-color: transparent,
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-contrast),
+      border-color: transparent,
+    ),
+    active: (
+      color: sass-map.get(color.$colors-light, fill-contrast),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-light, border-contrast),
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-disabled),
+      border-color: sass-map.get(color.$colors-light, fill-disabled),
+    ),
+  ),
+  "fill": (
+    default: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-contrast),
+      border-color: transparent,
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-light, text-default),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-light, border-contrast),
+    ),
+    active: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-tertiary),
+      border-color: transparent,
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-light, text-inverse),
+      background-color: sass-map.get(color.$colors-light, fill-disabled),
+      border-color: sass-map.get(color.$colors-light, fill-disabled),
+    ),
+  ),
+  "ghost": (
+    default: (
+      color: sass-map.get(color.$colors-light, text-default),
+      background-color: transparent,
+      border-color: transparent,
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-light, text-default),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-light, border-contrast),
+    ),
+    active: (
+      color: sass-map.get(color.$colors-light, fill-tertiary),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-light, border-contrast),
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-light, text-disabled),
+      background-color: transparent,
+      border-color: transparent,
+    ),
+  ),
+);
+
+$colors-dark: (
+  "default": (
+    default: (
+      color: sass-map.get(color.$colors-dark, text-default),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-dark, border-contrast),
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-contrast),
+      border-color: transparent,
+    ),
+    active: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-tertiary),
+      border-color: transparent,
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-dark, text-disabled),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-dark, fill-disabled),
+    ),
+  ),
+  "primary": (
+    default: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-tertiary),
+      border-color: transparent,
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-contrast),
+      border-color: transparent,
+    ),
+    active: (
+      color: sass-map.get(color.$colors-dark, fill-contrast),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-dark, border-contrast),
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-disabled),
+      border-color: sass-map.get(color.$colors-dark, fill-disabled),
+    ),
+  ),
+  "fill": (
+    default: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-contrast),
+      border-color: transparent,
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-dark, text-default),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-dark, border-contrast),
+    ),
+    active: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-tertiary),
+      border-color: transparent,
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-dark, text-inverse),
+      background-color: sass-map.get(color.$colors-dark, fill-disabled),
+      border-color: sass-map.get(color.$colors-dark, fill-disabled),
+    ),
+  ),
+  "ghost": (
+    default: (
+      color: sass-map.get(color.$colors-dark, text-default),
+      background-color: transparent,
+      border-color: transparent,
+    ),
+    hover: (
+      color: sass-map.get(color.$colors-dark, text-default),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-dark, border-contrast),
+    ),
+    active: (
+      color: sass-map.get(color.$colors-dark, fill-tertiary),
+      background-color: transparent,
+      border-color: sass-map.get(color.$colors-dark, border-contrast),
+    ),
+    disabled: (
+      color: sass-map.get(color.$colors-dark, 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,164 @@
+@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: if(
+    $dark,
+    sass-map.get(config.$colors-dark, $type),
+    sass-map.get(config.$colors-light, $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
+      if(
+        $dark,
+        sass-map.get(color.$colors-dark, "border-contrast"),
+        sass-map.get(color.$colors-light, "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,66 @@
+@use "../../../styles/tools/generate";
+@use "../../../styles/tokens/color";
+@use "./config";
+@use "./mixins";
+
+.btn {
+  @include mixins.base;
+  @include mixins.layout;
+}
+
+// button sizes
+@each $name, $props in config.$sizes {
+  .btn#{generate.variant-name($name)} {
+    @include mixins.size($name);
+  }
+}
+
+// Button types with light and dark variants
+@each $variant, $props in config.$colors-light {
+  .btn#{generate.variant-name($variant)} {
+    @include mixins.color($variant, false);
+  }
+
+  .btn#{generate.variant-name($variant)}.btn--dark,
+  .btn#{generate.variant-name($variant)}.btn--inverse {
+    @include mixins.color($variant, true);
+  }
+}
+
+// Support for legacy inverse styles (for backward compatibility)
+.bg-black .btn:not(.btn--inverse) {
+  &.btn--default {
+    @include mixins.color("default", true);
+  }
+  &.btn--primary {
+    @include mixins.color("primary", true);
+  }
+  &.btn--fill {
+    @include mixins.color("fill", true);
+  }
+  &.btn--ghost {
+    @include mixins.color("ghost", true);
+  }
+}
+
+.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,114 @@
+/**
+ * @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 btn--inverse class when inversed", () => {
+      const { getByText } = render(<Button isInverse>Button</Button>);
+      expect(getByText("Button")).toHaveClass("btn--inverse");
+    });
+
+    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();
+    });
+  });
+});