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

package/src/components/Tabs/Tabs.static.js

@@ -1,164 +0,0 @@
-// ---------------------------------------------------
-// Tabs
-// module for handling tabs
-
-import { RovingTabindex } from '../../utils/keyboard';
-
-export const defaultConfig = {
-  tabSelector: '[role="tab"]',
-};
-
-export const configDocs = {
-  tabSelector: 'Tab element selector',
-};
-
-export default class Tabs {
-  constructor(element, config) {
-    this.element = element;
-    this.config = { ...defaultConfig, ...config };
-
-    this.tabs = [];
-    this.tabPanels = [];
-    this.activeTabIndex = null;
-
-    this.rovingTabindex = null;
-
-    this.handleClick = this.handleClick.bind(this);
-    this.handleTabFocus = this.handleTabFocus.bind(this);
-
-    this.element.ODS_Tabs = this;
-
-    this.init();
-
-    return this;
-  }
-
-  static getInstance(el) {
-    return el && el.ODS_Tabs ? el.ODS_Tabs : null;
-  }
-
-  init() {
-    this.tabs = Array.from(
-      this.element.querySelectorAll(this.config.tabSelector)
-    );
-
-    this.tabs.map((tab, index) => {
-      this.tabPanels.push(
-        document.getElementById(tab.getAttribute('aria-controls'))
-      );
-      tab.addEventListener('click', this.handleClick);
-      tab.addEventListener('focus', this.handleTabFocus);
-
-      if (this.isSelected(tab)) {
-        this.activeTabIndex = index;
-      }
-
-      return tab;
-    });
-
-    if (!this.rovingTabindex) {
-      this.rovingTabindex = new RovingTabindex(this.tabs, {
-        direction: 'any',
-      });
-    } else {
-      this.rovingTabindex.update(this.tabs);
-    }
-  }
-
-  destroy() {
-    this.tabs.map(tab => {
-      tab.removeEventListener('click', this.handleClick);
-      tab.removeEventListener('focus', this.onFocus);
-      return tab;
-    });
-
-    this.tabs = [];
-    this.tabPanels = [];
-    this.rovingTabindex.destroy();
-    this.element.ODS_Tabs = null;
-  }
-
-  update() {
-    this.destroy();
-    this.init();
-  }
-
-  isActive = el => !el.hasAttribute('hidden');
-
-  isSelected = el => el.getAttribute('aria-selected') === 'true';
-
-  handleClick(e) {
-    const clickedTab = e.currentTarget;
-
-    if (e.currentTarget.hasAttribute('aria-disabled')) {
-      e.preventDefault();
-      return;
-    }
-
-    this.tabs.map((tab, i) => {
-      if (tab === clickedTab) {
-        this.activeTabIndex = i;
-        return this.toggleTab(tab, 'on');
-      }
-      return this.toggleTab(tab, 'off');
-    });
-
-    this.tabPanels.map(tabPanel => {
-      if (
-        tabPanel.getAttribute('id') === clickedTab.getAttribute('aria-controls')
-      ) {
-        return this.toggleTabPanel(tabPanel, 'on');
-      }
-      return this.toggleTabPanel(tabPanel, 'off');
-    });
-  }
-
-  toggleTab(el, state) {
-    const isActive = this.isSelected(el);
-
-    if (state === 'on' && !isActive) {
-      el.setAttribute('aria-selected', 'true');
-      el.setAttribute('tabindex', '0');
-    }
-
-    if (state === 'off' && isActive) {
-      el.setAttribute('aria-selected', 'false');
-      el.setAttribute('tabindex', '-1');
-    }
-  }
-
-  toggleTabPanel(el, state) {
-    const isActive = this.isActive(el);
-
-    if (state === 'on' && !isActive) {
-      el.removeAttribute('hidden');
-    }
-
-    if (state === 'off' && isActive) {
-      el.setAttribute('hidden', '');
-    }
-  }
-
-  activateNthTab(index) {
-    this.tabs.map((tab, i) => {
-      if (i === index) {
-        this.activeTabIndex = i;
-        return this.toggleTab(tab, 'on');
-      }
-      return this.toggleTab(tab, 'off');
-    });
-
-    this.tabPanels.map((tabPanel, i) => {
-      if (i === index) {
-        return this.toggleTabPanel(tabPanel, 'on');
-      }
-      return this.toggleTabPanel(tabPanel, 'off');
-    });
-  }
-
-  handleTabFocus() {
-    if (!this.rovingTabindex.isActive) {
-      this.rovingTabindex.init();
-    }
-  }
-}

package/src/components/Tabs/index.js

@@ -1,5 +0,0 @@
-import './styles/style.scss';
-
-export { default } from './Tabs';
-export { default as TabPanel } from './TabPanel';
-export { default as Tab } from './Tab';

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

@@ -1,78 +0,0 @@
-@use '../../../styles/tokens/color';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tools/convert';
-
-$outline-width: convert.to-rem(2px);
-$negative-outline-width: $outline-width * -1;
-
-$tablist-spacing: (
-  margin: $negative-outline-width $negative-outline-width (space.get() + $negative-outline-width) $negative-outline-width,
-  padding: $outline-width,
-);
-
-$tab: (
-  'default': (
-    default: (
-      color: color.$black,
-      box-shadow: inset 0 -2px 0 0 color.$black,
-    ),
-    active: (
-      color: color.$orange,
-      box-shadow: (
-        inset -2px 0 0 0 color.$black,
-        inset 0 2px 0 0 color.$black,
-        inset 2px 0 0 0 color.$black,
-      ),
-    ),
-    hover: (
-      color: color.$orange,
-    ),
-    disabled: (
-      color: color.$gray-500,
-    )
-  ),
-  'inverse': (
-    default: (
-      color: color.$white,
-      box-shadow: inset 0 -2px 0 0 color.$white,
-    ),
-    active: (
-      color: color.$orange,
-      box-shadow: (
-        inset -2px 0 0 0 color.$white,
-        inset 0 2px 0 0 color.$white,
-        inset 2px 0 0 0 color.$white,
-      ),
-    ),
-    hover: (
-      color: color.$orange,
-    ),
-    disabled: (
-      color: color.$gray-600,
-    )
-  ),
-);
-
-$tab-light: (
-  default: (
-    box-shadow: none !important,
-  ),
-  active: (
-    box-shadow: inset 0 -4px 0 0 color.$orange !important,
-  ),
-  hover: (
-    box-shadow: none !important,
-  ),
-  disabled: (
-    box-shadow: none !important,
-  )
-);
-
-$tab-sizes: (
-  default: (
-    padding: space.get('small') space.get(),
-  ),
-  large: (
-    padding: space.get('small') space.get(),
-  ),
-);

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

@@ -1,107 +0,0 @@
-@use './config';
-@use '../../../styles/tokens/base';
-@use '../../../styles/tokens/space';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
-
-@mixin list-base($spacing: config.$tablist-spacing) {
-  position: relative;
-  display: flex;
-  overflow-x: auto;
-  overflow-y: visible;
-  margin-bottom: space.get();
-  align-items: stretch;
-
-  @include generate.css-map($spacing);
-}
-
-@mixin list-equal {
-  flex-grow: 1;
-}
-
-@mixin list-item {
-  display: flex;
-  flex-flow: column;
-  max-width: 66.66666%;
-}
-
-@mixin tab {
-  flex: 1 1 auto;
-  display: flex;
-  flex-flow: column;
-  height: initial;
-  position: relative;
-  font-weight: 600;
-  background: transparent;
-  border-width: 0;
-  text-align: left;
-
-  &:focus {
-    z-index: 1;
-  }
-
-  @include base.focusring-flush;
-}
-
-@mixin color-variant($variant, $config: config.$tab) {
-  @include generate.css-map($config, $variant, 'default');
-
-  &[aria-selected='true'] {
-    @include generate.css-map($config, $variant, 'active');
-  }
-
-  &:hover {
-    @include generate.css-map(config.$tab, $variant, 'hover');
-  }
-
-  &[aria-disabled='true'] {
-    @include generate.css-map(config.$tab, $variant, 'disabled');
-  }
-}
-
-@mixin inverse-variant {
-  @include generate.css-map(config.$tab-light, 'default');  
-}
-
-@mixin tab-light {
-  @include generate.css-map(config.$tab-light, 'default');
-
-  &:hover {
-    @include generate.css-map(config.$tab-light, 'hover');
-  }
-
-  &[aria-selected='true'] {
-    @include generate.css-map(config.$tab-light, 'active');
-  }
-  
-  &[aria-disabled='true'] {
-    @include generate.css-map(config.$tab-light, 'disabled');
-  }
-}
-
-@mixin tab-centered {
-  align-items: center;
-}
-
-@mixin tab-size($size, $config: config.$tab-sizes) {
-  @include generate.css-map($config, $size);
-}
-
-@mixin underline {
-  flex: 1 1 auto;
-  max-width: none;
-  box-shadow: inset 0 -2px 0 0 color.$black;
-}
-
-@mixin underline-inverse {
-  box-shadow: inset 0 -2px 0 0 color.$white;
-}
-
-@mixin underline-light {
-  box-shadow: inset 0 -1px 0 0 color.$gray-500;
-}
-
-@mixin list-equal-item {
-  flex-grow: 1;
-  flex-basis: 0;
-}

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

@@ -1,64 +0,0 @@
-@use './config';
-@use './mixins';
-@use '../../../styles/tokens/color';
-@use '../../../styles/tools/generate';
-@use '../../../styles/tokens/breakpoint';
-@use '../../Typography/styles/mixins' as typography;
-
-.tab-list {
-  $this: &;
-
-  @include typography.list-unstyled;
-  @include mixins.list-base;
-
-  &--equal {
-    @include mixins.list-equal;
-  }
-  
-  &__item {
-    @include mixins.list-item;
-
-    #{$this}--equal & {
-      @include mixins.list-equal-item;
-    }
-
-    #{$this}--light &{
-      @include mixins.underline-light;
-    }
-  }
-
-  &__tab {
-    @include mixins.tab;
-    @include mixins.color-variant('default');
-
-    @each $size, $props in config.$tab-sizes {
-      &#{generate.variant-name($size)} {
-        @include mixins.tab-size($size);
-      }
-    }
-    #{$this}--light &{
-      @include mixins.tab-light;
-    }
-
-    #{$this}--light#{$this}--equal & {
-      @include mixins.tab-centered;
-    }
-
-    .bg-black &,
-    #{$this}--inverse & {
-      @include mixins.color-variant('inverse');
-    }
-  }
-
-  &__hr {
-    @include mixins.underline;
-
-    #{$this}--light & {
-      @include mixins.underline-light;
-    }
-
-    #{$this}--inverse & {
-      @include mixins.underline-inverse;
-    }
-  }
-}

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

@@ -1,90 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import Tab from '../Tab';
-
-describe('rendering Tab', () => {
-  describe('initial state', () => {
-    it('list element has class tab-list__item', () => {
-      const { container } = render(<Tab />);
-      expect(container.querySelector('li')).toBeInTheDocument();
-      expect(container.querySelector('li')).toHaveClass('tab-list__item');
-    });
-    it('list element has role presentation', () => {
-      const { container } = render(<Tab />);
-      expect(container.querySelector('li')).toBeInTheDocument();
-      expect(container.querySelector('li').getAttribute('role')).toBe(
-        'presentation'
-      );
-    });
-    it('button element has class tab-list__tab', () => {
-      const { container } = render(<Tab />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button')).toHaveClass('tab-list__tab');
-    });
-    it('button element has role tab', () => {
-      const { container } = render(<Tab />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button').getAttribute('role')).toBe(
-        'tab'
-      );
-    });
-    it('button element has type button', () => {
-      const { container } = render(<Tab />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button').getAttribute('type')).toBe(
-        'button'
-      );
-    });
-    it('button attribute tabIndex is set to -1', () => {
-      const { container } = render(<Tab />);
-      expect(container.querySelector('button')).toBeInTheDocument();
-      expect(container.querySelector('button').getAttribute('tabIndex')).toBe(
-        '-1'
-      );
-    });
-  });
-  describe('passed props', () => {
-    it('passes other props', () => {
-      const { getByTestId } = render(<Tab data-testid="test-id" />);
-      expect(getByTestId('test-id')).toBeInTheDocument();
-    });
-    it('renders children', () => {
-      const { getByText } = render(<Tab>test</Tab>);
-      expect(getByText('test')).toBeInTheDocument();
-    });
-    it('has additional class when className is set', () => {
-      const { container } = render(<Tab className="test-class" />);
-      expect(container.querySelector('button')).toHaveClass('tab-list__tab');
-      expect(container.querySelector('button')).toHaveClass('test-class');
-    });
-    it("button has aria-selected attribute set to 'true' when isActive is passed", () => {
-      const { container } = render(<Tab isActive />);
-      expect(
-        container.querySelector('button').getAttribute('aria-selected')
-      ).toBe('true');
-    });
-    it("button has tabIndex attribute set to '0' when isActive is passed", () => {
-      const { container } = render(<Tab isActive />);
-      expect(container.querySelector('button').getAttribute('tabIndex')).toBe(
-        '0'
-      );
-    });
-    it('button has aria-controls attribute set to controls prop value', () => {
-      const { container } = render(<Tab controls="test" />);
-      expect(
-        container.querySelector('button').getAttribute('aria-controls')
-      ).toBe('test');
-    });
-    it("button has aria-disabled attribute set to 'true' when isDisables is passed", () => {
-      const { container } = render(<Tab isDisabled />);
-      expect(
-        container.querySelector('button').getAttribute('aria-disabled')
-      ).toBe('true');
-    });
-  });
-});

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

@@ -1,58 +0,0 @@
-/**
- * @jest-environment jsdom
- */
-
-import React from 'react';
-import { render } from '@testing-library/react';
-
-import TabPanel from '../TabPanel';
-
-describe('rendering TabPanel', () => {
-  describe('initial state', () => {
-    it('has generated id', () => {
-      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
-      const pattern = /id-\d+/;
-      expect(
-        pattern.test(getByTestId('test-id').getAttribute('id'))
-      ).toBeTruthy();
-    });
-    it('has role set to tabpanel', () => {
-      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
-      expect(getByTestId('test-id').getAttribute('role')).toBe('tabpanel');
-    });
-    it("has tabIndex set to '0'", () => {
-      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
-      expect(getByTestId('test-id').getAttribute('tabIndex')).toBe('0');
-    });
-    it('has hidden attribute set to true', () => {
-      const { getByTestId } = render(<TabPanel data-testid="test-id" />);
-      expect(getByTestId('test-id').hidden).toBe(true);
-    });
-  });
-  describe('passed props', () => {
-    it('renders children', () => {
-      const { getByTestId } = render(
-        <TabPanel data-testid="test-id">test</TabPanel>
-      );
-      expect(getByTestId('test-id').textContent).toBe('test');
-    });
-    it('has class when className is set', () => {
-      const { getByTestId } = render(
-        <TabPanel data-testid="test-id" className="test-class" />
-      );
-      expect(getByTestId('test-id')).toHaveClass('test-class');
-    });
-    it('has id set to id prop when this prop is passsed', () => {
-      const { getByTestId } = render(
-        <TabPanel data-testid="test-id" id="id-test" />
-      );
-      expect(getByTestId('test-id').getAttribute('id')).toBe('id-test');
-    });
-    it('has hidden attribute set to false when isActive prop is passed', () => {
-      const { getByTestId } = render(
-        <TabPanel data-testid="test-id" isActive />
-      );
-      expect(getByTestId('test-id').hidden).toBe(false);
-    });
-  });
-});