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

package/src/components/Tabs/tests/Tabs.unit.test.js

@@ -0,0 +1,260 @@
+import { render, fireEvent, screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+
+import { Tabs } from "../Tabs";
+import { TabPanel } from "../TabPanel";
+
+const arr = [1, 2, 3, 4];
+
+const TabsExample = (props) => {
+  return (
+    <Tabs data-testid="test-id" {...props}>
+      <TabPanel id="tabpanel-1" tab="Tab 1">
+        Tab 1 content
+      </TabPanel>
+      <TabPanel id="tabpanel-2" tab="Tab 2">
+        Tab 2 content
+      </TabPanel>
+      <TabPanel id="tabpanel-3" tab="Tab 3">
+        Tab 3 content
+      </TabPanel>
+      <TabPanel id="tabpanel-4" isDisabled tab="Tab 4">
+        Tab 4 content
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+//children were required plus they helped to check defaultTabIndex
+describe("rendering Tabs", () => {
+  describe("initial state", () => {
+    it("has class tab-list", () => {
+      const { getByTestId } = render(<TabsExample />);
+      expect(getByTestId("test-id")).toBeInTheDocument();
+      expect(getByTestId("test-id")).toHaveClass("tab-list");
+    });
+    it("has role tablist", () => {
+      const { getByTestId } = render(<TabsExample />);
+      expect(getByTestId("test-id")).toBeInTheDocument();
+      expect(getByTestId("test-id").getAttribute("role")).toBe("tablist");
+    });
+    it("default activeTabIndex is set to 0", () => {
+      const { container } = render(<TabsExample />);
+      expect(
+        container.querySelector('button[tabindex="0"]'),
+      ).toBeInTheDocument();
+      expect(container.querySelector('button[tabindex="0"]').textContent).toBe(
+        "Tab 1",
+      );
+    });
+  });
+  describe("passed props", () => {
+    it("has additional class when classesTabNav is set", () => {
+      const { getByTestId } = render(
+        <TabsExample classesTabNav="test-class" />,
+      );
+      expect(getByTestId("test-id")).toHaveClass("tab-list");
+      expect(getByTestId("test-id")).toHaveClass("test-class");
+    });
+    it("has additional class tab-list--equal when hasEqualTabWidth prop is passed", () => {
+      const { getByTestId } = render(<TabsExample hasEqualTabWidth />);
+      expect(getByTestId("test-id")).toHaveClass("tab-list");
+      expect(getByTestId("test-id")).toHaveClass("tab-list--equal");
+    });
+    it("has additional class tab-list--fullwidth when isFullWidth prop is passed", () => {
+      const { getByTestId } = render(<TabsExample isFullWidth />);
+      expect(getByTestId("test-id")).toHaveClass("tab-list");
+      expect(getByTestId("test-id")).toHaveClass("tab-list--fullwidth");
+    });
+    it("renders list element with role presentation and class tab-list__hr when isFullWidth prop is passed", () => {
+      const { container } = render(<TabsExample isFullWidth />);
+      const li = container.getElementsByClassName("tab-list__hr");
+      expect(li.length).toBe(1);
+      expect(li[0]).toBeInTheDocument();
+      expect(li[0].getAttribute("role")).toBe("presentation");
+    });
+    it("activeTabIndex is set to 0, therefore text content of first TabPanel doesnt have hidden attribute", () => {
+      const { container } = render(<TabsExample />);
+      for (let i of arr) {
+        const panel = container.querySelector(`#tabpanel-${i}`);
+        expect(panel).toBeInTheDocument();
+        if (i === 1) {
+          expect(panel.getAttribute("hidden")).toBe(null);
+        } else {
+          expect(panel.getAttribute("hidden")).toBe("");
+        }
+      }
+    });
+    it("activeTabIndex is set to 0, therefore first tab button has arial-selected set to true and other buttons to false", () => {
+      const { container } = render(<TabsExample />);
+      for (let i of arr) {
+        const button = container.querySelector(
+          `button[aria-controls="tabpanel-${i}"]`,
+        );
+        expect(button).toBeInTheDocument();
+        if (i === 1) {
+          expect(button.getAttribute("aria-selected")).toBe("true");
+        } else {
+          expect(button.getAttribute("aria-selected")).toBe("false");
+        }
+      }
+    });
+  });
+  describe("checking fireEvents", () => {
+    it("click in disabled tab button doesnt cause change", () => {
+      const { container } = render(<TabsExample />);
+      const disabledButton = container.querySelector(
+        'button[aria-disabled="true"]',
+      );
+      expect(disabledButton).toBeInTheDocument();
+      fireEvent.click(disabledButton);
+      for (let i of arr) {
+        const button = container.querySelector(
+          `button[aria-controls="tabpanel-${i}"]`,
+        );
+        expect(button).toBeInTheDocument();
+        expect(button.getAttribute("aria-selected")).toBe(
+          i === 1 ? "true" : "false",
+        );
+      }
+    });
+    it("click on active tab doesnt cause change", () => {
+      const { container } = render(<TabsExample />);
+      const activeBtn = container.querySelector(
+        'button[aria-controls="tabpanel-1"]',
+      );
+      expect(activeBtn).toBeInTheDocument();
+      fireEvent.click(activeBtn);
+      for (let i of arr) {
+        if (i === 1) {
+          expect(activeBtn.getAttribute("aria-selected")).toBe("true");
+        } else {
+          const button = container.querySelector(
+            `button[aria-controls="tabpanel-${i}"]`,
+          );
+          expect(button).toBeInTheDocument();
+          expect(button.getAttribute("aria-selected")).toBe("false");
+        }
+      }
+    });
+    it("click on inactive tab cause change - clicked button is selected", () => {
+      const { container } = render(<TabsExample />);
+      const btn = container.querySelector('button[aria-controls="tabpanel-2"]');
+      expect(btn).toBeInTheDocument();
+      fireEvent.click(btn);
+      for (let i of arr) {
+        if (i === 2) {
+          expect(btn.getAttribute("aria-selected")).toBe("true");
+        } else {
+          const button = container.querySelector(
+            `button[aria-controls="tabpanel-${i}"]`,
+          );
+          expect(button).toBeInTheDocument();
+          expect(button.getAttribute("aria-selected")).toBe("false");
+        }
+      }
+    });
+    it("click on inactive tab cause change - text content that belongs to clicked tab doesn't have hidden attribute", () => {
+      const { container } = render(<TabsExample />);
+      const btn = container.querySelector('button[aria-controls="tabpanel-2"]');
+      expect(btn).toBeInTheDocument();
+      fireEvent.click(btn);
+      for (let i of arr) {
+        const panel = container.querySelector(`#tabpanel-${i}`);
+        expect(panel).toBeInTheDocument();
+        if (i === 2) {
+          expect(panel.getAttribute("hidden")).toBe(null);
+        } else {
+          expect(panel.getAttribute("hidden")).toBe("");
+        }
+      }
+    });
+  });
+  describe("keyboard navigation", () => {
+    let user;
+    let tabs;
+    let panels;
+    beforeEach(() => {
+      user = userEvent.setup();
+      render(<TabsExample />);
+      panels = screen.getAllByRole("tabpanel", { hidden: true });
+      tabs = screen.getAllByRole("tab");
+    });
+    beforeAll(() => {
+      window.document.getSelection = jest.fn();
+    });
+    it('"ArrowLeft" moves focus left and loops from first to last item', async () => {
+      expect.assertions(3);
+
+      tabs[0].focus();
+      expect(tabs[0]).toHaveFocus();
+
+      await user.keyboard("{ArrowLeft}");
+      expect(tabs[3]).toHaveFocus();
+
+      await user.keyboard("{ArrowLeft}");
+      expect(tabs[2]).toHaveFocus();
+    });
+    it('"ArrowRight" moves focus right and loops from last to first', async () => {
+      expect.assertions(3);
+
+      tabs[3].focus();
+      expect(tabs[3]).toHaveFocus();
+
+      await user.keyboard("{ArrowRight}");
+      expect(tabs[0]).toHaveFocus();
+
+      await user.keyboard("{ArrowRight}");
+      expect(tabs[1]).toHaveFocus();
+    });
+    it('"Tab" moves focus to the current active tab panel', async () => {
+      expect.assertions(2);
+
+      tabs[0].focus();
+      expect(tabs[0]).toHaveFocus();
+
+      await user.keyboard("{Tab}");
+      expect(panels[0]).toHaveFocus();
+    });
+    it('"Enter" key activates a new panel', async () => {
+      expect.assertions(5);
+
+      fireEvent.click(tabs[0]);
+      tabs[0].focus();
+      expect(panels[0]).toBeVisible();
+
+      await user.keyboard("{ArrowRight}{Enter}");
+      panels.forEach((_, i) => {
+        if (i === 1) {
+          expect(panels[i]).toBeVisible();
+        } else {
+          expect(panels[i]).not.toBeVisible();
+        }
+      });
+    });
+    it('"Spacebar" key activates a new panel', async () => {
+      expect.assertions(5);
+
+      fireEvent.click(tabs[0]);
+      tabs[0].focus();
+      expect(panels[0]).toBeVisible();
+
+      await user.keyboard("{ArrowRight} ");
+      panels.forEach((_, i) => {
+        if (i === 1) {
+          expect(panels[i]).toBeVisible();
+        } else {
+          expect(panels[i]).not.toBeVisible();
+        }
+      });
+    });
+    it("disabled tabs cannot be activated", async () => {
+      tabs[3].focus();
+      expect(tabs[3]).toHaveAttribute("aria-disabled");
+
+      await user.keyboard("{Enter} ");
+      expect(panels[0]).toBeVisible();
+      expect(panels[3]).not.toBeVisible();
+    });
+  });
+});

package/src/components/index.ts

@@ -1,7 +1,38 @@
 import "../styles/before-components.scss";
 
-import Badge from "./Badge";
+import { Alert } from "./Alert";
+import { Badge } from "./Badge";
+import {
+  Button,
+  ButtonFill,
+  ButtonGhost,
+  ButtonPrimary,
+  IconButton,
+} from "./Button";
+import { Buttons } from "./Buttons";
+import { Icon } from "./Icon";
+import { Modal, ModalBody, ModalCloseButton, ModalTitle } from "./Modal";
+import { Section } from "./Section";
+import { Tab, TabPanel, Tabs } from "./Tabs";
 
 import "../styles/after-components.scss";
 
-export { Badge };
+export {
+  Alert,
+  Badge,
+  Button,
+  ButtonFill,
+  ButtonGhost,
+  ButtonPrimary,
+  Buttons,
+  IconButton,
+  Icon,
+  Modal,
+  ModalBody,
+  ModalCloseButton,
+  ModalTitle,
+  Section,
+  Tab,
+  TabPanel,
+  Tabs,
+};

package/src/styles/base/globals.scss

@@ -1,5 +1,9 @@
-@use '../tokens/base';
-@use '../tokens/space';
+@use "../tokens/base";
+@use "../tokens/space";
+
+html {
+  font-size: base.$font-size;
+}
 
 html,
 body {
@@ -12,7 +16,7 @@ body {
 body {
   position: relative;
   background-color: base.$background;
-  font-family: #{base.$font-family}; // this is interpolated due to stylelint wrongly reporting an error
+  font-family: #{base.$font-family};
   color: base.$text-color;
 }
 
@@ -43,20 +47,20 @@ input,
 select,
 textarea,
 button,
-[type='button'],
+[type="button"],
 iframe,
-[tabindex]:not([tabindex='-1']),
-[contentEditable='true'] {
+[tabindex]:not([tabindex="-1"]),
+[contentEditable="true"] {
   @include base.focusring;
 }
 
-[tabindex='-1']:focus {
+[tabindex="-1"]:focus {
   outline: none;
 }
 
-[type='button']:not(:disabled),
-[type='reset']:not(:disabled),
-[type='submit']:not(:disabled),
+[type="button"]:not(:disabled),
+[type="reset"]:not(:disabled),
+[type="submit"]:not(:disabled),
 button:not(:disabled) {
   cursor: pointer;
 }
@@ -67,7 +71,7 @@ a {
 
 // stylelint-disable-next-line no-descending-specificity
 button,
-[role='button'] {
+[role="button"] {
   border: 0 solid transparent;
   margin: 0;
   padding: 0;
@@ -88,6 +92,7 @@ button,
 
   /* Corrects inability to style clickable `input` types in iOS */
   -webkit-appearance: none; // stylelint-disable-line property-no-vendor-prefix
+  appearance: none;
 
   /* Remove excess padding and border in Firefox 4+ */
   // stylelint-disable-next-line no-descending-specificity
@@ -106,7 +111,7 @@ table {
 }
 
 blockquote {
-  margin: 0 0 space.get('medium') 0;
+  margin: 0 0 space.get("medium") 0;
 }
 
 th {
@@ -115,7 +120,7 @@ th {
   text-align: inherit;
 }
 
-button[aria-expanded='true'] .expand-icon {
+button[aria-expanded="true"] .expand-icon {
   transform: rotate(180deg);
 }
 

package/src/styles/base/styleguide.scss

@@ -4,7 +4,7 @@
 @use '../tools/text';
 @use '../tools/generate';
 @use '../tools/layout';
-@use '../../components/Typography/styles/config' as typographyConfig;
+@use '../typography/config' as typographyConfig;
 @use 'sass:map' as sassmap;
 
 main {

package/src/styles/before-components.scss

@@ -1,4 +1,4 @@
 @use './../../node_modules/normalize.css/normalize';
 @use 'base/globals';
 @use 'base/globals-forms';
-@use '../components/Typography/styles/style';
+@use './typography/style';

package/src/styles/export/breakpoint.ts

@@ -0,0 +1,12 @@
+// Export breakpoints from SCSS tokens
+// TODO: Remove this file and use the SCSS module instead but now is best solution this one
+const breakpoints = {
+  xs: '0px',
+  sm: '480px',
+  md: '768px',
+  lg: '992px',
+  xl: '1240px',
+  xxl: '1380px',
+};
+
+export default breakpoints; 

package/src/styles/export/color.scss

@@ -1,4 +1,4 @@
-@use '../tokens/color' as color;
+@use "../tokens/color" as color;
 
 :export {
   orange: color.$orange;

package/src/styles/tokens/base.scss

@@ -1,7 +1,7 @@
-@use 'sass:color' as sasscolor;
-@use './color';
+@use "sass:color" as sasscolor;
+@use "./color";
 
-$font-family: helvneueorange, 'Helvetica Neue', helvetica, arial, sans-serif;
+$font-family: "orangeSKNeue", "Helvetica Neue", helvetica, arial, sans-serif;
 $font-size: 16px;
 $line-height: 1.25;
 
@@ -12,7 +12,9 @@ $focusring-color: color.$info;
 $focusring-width: 2px;
 $focusring-offset: 2px;
 $focus-outline: $focusring-width solid $focusring-color;
-$focus-shadow: 0 0 0 2px #fff, 0 0 0 4px $focusring-color;
+$focus-shadow:
+  0 0 0 2px #fff,
+  0 0 0 4px $focusring-color;
 
 $selection-background: sasscolor.adjust(color.$orange-dark, $alpha: -0.1);
 

package/src/styles/tokens/color.scss

@@ -1,27 +1,129 @@
-// core (brand)
-$orange: #ff7900;
-$orange-dark: #f16e00;
-$black: #000;
-$white: #fff;
+@use "sass:map";
 
-// supporting color
-$blue: #4bb4e6;
-$green: #50be87;
-$pink: #ffb4e6;
-$violet: #a885d8;
-$yellow: #ffd200;
-$yellow-lighter: #fff6b6;
-$red: #ff4d4d;
+$colors-light: (
+  background-primary: #ffffff,
+  background-secondary: #f4f4f4,
+  background-contrast: #141414,
+  background-accent: #fff6e0,
+  surface-primary: #ffffff,
+  surface-secondary: #ff7900,
+  surface-tertiary: #f16e00,
+  surface-subtle: #eeeeee,
+  surface-moderate: #dddddd,
+  surface-contrast: #ffffff,
+  surface-accent: #fff6e0,
+  fill-primary: #ffffff,
+  fill-secondary: #ff7900,
+  fill-tertiary: #f16e00,
+  fill-subtle: #eeeeee,
+  fill-moderate: #dddddd,
+  fill-disabled: #cccccc,
+  fill-contrast: #000000,
+  fill-accent1: #4bb4e6,
+  fill-accent2: #50be87,
+  fill-accent3: #ffb4e6,
+  fill-accent4: #a885d8,
+  fill-accent5: #ffd200,
+  fill-information: #4170d814,
+  fill-positive: #22872214,
+  fill-warning: #ffcc0014,
+  fill-negative: #cd3c1414,
+  border-subtle: #dddddd,
+  border-strong: #cccccc,
+  border-contrast: #000000,
+  border-accent: #f16e00,
+  border-information: #4170d8,
+  border-positive: #228722,
+  border-warning: #ffcc00,
+  border-negative: #cd3c14,
+  icon-default: #000000,
+  icon-inverse: #ffffff,
+  icon-brand: #f16e00,
+  icon-accent: #ffc48f,
+  icon-disabled: #cccccc,
+  icon-information: #4170d8,
+  icon-positive: #228722,
+  icon-warning: #ffcc00,
+  icon-negative: #cd3c14,
+  text-default: #000000,
+  text-secondary: #000000,
+  text-disabled: #cccccc,
+  text-inverse: #ffffff,
+  text-accent: #f16e00,
+);
 
-// functional
-$gray-300: #eee;
-$gray-400: #ddd;
-$gray-500: #ccc;
-$gray-600: #999;
-$gray-700: #666;
-$gray-800: #595959;
-$gray-900: #333;
-$success: #32c832;
-$danger: #cd3c14;
-$info: #527edb;
-$warning: #fc0;
+$colors-dark: (
+  background-primary: #141414,
+  background-secondary: #333333,
+  background-contrast: #ffffff,
+  background-accent: #291a10,
+  surface-primary: #141414,
+  surface-secondary: #ff7900,
+  surface-tertiary: #f16e00,
+  surface-subtle: #333333,
+  surface-moderate: #595959,
+  surface-contrast: #000000,
+  surface-accent: #291a10,
+  fill-primary: #141414,
+  fill-secondary: #ff7900,
+  fill-tertiary: #f16e00,
+  fill-subtle: #333333,
+  fill-moderate: #595959,
+  fill-disabled: #666666,
+  fill-contrast: #ffffff,
+  fill-accent1: #4bb4e6,
+  fill-accent2: #50be87,
+  fill-accent3: #ffb4e6,
+  fill-accent4: #a885d8,
+  fill-accent5: #ffd200,
+  fill-information: #4170d814,
+  fill-positive: #22872214,
+  fill-warning: #ffcc0014,
+  fill-negative: #cd3c1414,
+  border-subtle: #333333,
+  border-strong: #666666,
+  border-contrast: #ffffff,
+  border-accent: #ff7900,
+  border-information: #6699ff,
+  border-positive: #66cc66,
+  border-warning: #ffcc00,
+  border-negative: #ff4d4d,
+  icon-default: #ffffff,
+  icon-inverse: #000000,
+  icon-brand: #ff7900,
+  icon-accent: #da8436,
+  icon-disabled: #666666,
+  icon-information: #6699ff,
+  icon-positive: #66cc66,
+  icon-warning: #ffcc00,
+  icon-negative: #ff4d4d,
+  text-default: #ffffff,
+  text-secondary: #cccccc,
+  text-disabled: #666666,
+  text-inverse: #000000,
+  text-accent: #ff7900,
+);
+
+// Legacy single-value tokens (alias to light palette for backward compatibility)
+$orange: map.get($colors-light, icon-brand);
+$orange-dark: map.get($colors-light, surface-tertiary);
+$black: map.get($colors-light, icon-default);
+$white: map.get($colors-light, icon-inverse);
+$blue: map.get($colors-light, fill-accent1);
+$green: map.get($colors-light, fill-accent2);
+$pink: map.get($colors-light, fill-accent3);
+$violet: map.get($colors-light, fill-accent4);
+$yellow: map.get($colors-light, fill-accent5);
+$yellow-lighter: #fff6b6; // not in new palette, fallback
+$red: #ff4d4d; // not in new palette, fallback
+$gray-300: map.get($colors-light, surface-subtle);
+$gray-400: #ddd; // fallback
+$gray-500: map.get($colors-light, surface-moderate);
+$gray-600: #999; // fallback
+$gray-700: #666; // fallback
+$gray-800: #595959; // fallback
+$gray-900: #333; // fallback
+$success: map.get($colors-light, fill-positive);
+$danger: map.get($colors-light, fill-negative);
+$info: map.get($colors-light, fill-information);
+$warning: map.get($colors-light, fill-warning);

package/src/styles/tools/convert.scss

@@ -1,6 +1,6 @@
 @use "sass:math";
 
-@use '../tokens/base';
+@use "../tokens/base";
 
 @function to-em($size, $font-size: base.$font-size) {
   @return math.div($size, $font-size) * 1em;