@onewelcome/react-lib-components 0.1.1-alpha → 0.1.4-alpha

package/src/Tabs/Tab.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+
+export interface Props {
+  title: string;
+  children?: React.ReactNode;
+  selected?: boolean;
+  focussed?: boolean;
+  buttonRef?: React.RefObject<HTMLButtonElement>;
+  panelRef?: React.RefObject<HTMLDivElement>;
+  onTabButtonClick?: () => void;
+}
+
+export const Tab = (args: Props) => {
+  return (
+    <div {...args}>{`A <Tab /> component should only be used inside the <Tabs /> component.`}</div>
+  );
+};

package/src/Tabs/TabButton.module.scss

@@ -0,0 +1,36 @@
+.tabbutton {
+  border: 0;
+  border-radius: 0;
+  font-size: var(--font-size);
+  line-height: 1.5;
+  margin: 0;
+  padding: 0.25rem 0 1rem 0;
+  min-height: 2.5rem;
+  cursor: pointer;
+  font-family: var(--font-family);
+  background-color: transparent;
+  white-space: nowrap;
+  position: relative;
+  font-weight: bold;
+  color: transparent;
+
+  &.focussed:not(:focus-visible) {
+    outline: none;
+  }
+
+  span {
+    color: var(--tab-text-color);
+    font-weight: normal;
+    position: absolute;
+    left: 0;
+  }
+
+  &.selected {
+    color: var(--tab-text-color);
+
+    span {
+      color: transparent;
+      visibility: hidden;
+    }
+  }
+}

package/src/Tabs/TabButton.test.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Props, TabButton } from './TabButton';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {};
+
+const createTabButton = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TabButton {...parameters} data-testid="tabbutton">
+      tab content
+    </TabButton>
+  );
+  const tabButton = queries.getByTestId('tabbutton');
+
+  return {
+    ...queries,
+    tabButton,
+  };
+};
+
+describe('Tab should render', () => {
+  it('renders without crashing', () => {
+    const { tabButton } = createTabButton();
+
+    expect(tabButton).toBeTruthy();
+  });
+
+  it('should be selected when prop selected is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      selected: true,
+    }));
+
+    expect(tabButton).toHaveAttribute('aria-selected', 'true');
+    expect(tabButton).toHaveAttribute('tabIndex', '0');
+  });
+
+  it('should be focussed when prop focussed is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      focussed: true,
+    }));
+
+    expect(tabButton).toHaveClass('focussed');
+  });
+
+  it('should set accessibility attributes when prop tabPanelId is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      tabPanelId: 'fakeId',
+    }));
+
+    expect(tabButton).toHaveAttribute('aria-controls', 'fakeId');
+  });
+
+  it('should set id attribute when prop tabId is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      tabId: 'fakeId',
+    }));
+
+    expect(tabButton).toHaveAttribute('id', 'fakeId');
+  });
+
+  it('should set class when prop className is passed', () => {
+    const { tabButton } = createTabButton((defaultParams) => ({
+      ...defaultParams,
+      className: 'customclass',
+    }));
+
+    expect(tabButton).toHaveClass('customclass');
+  });
+});

package/src/Tabs/TabButton.tsx

@@ -0,0 +1,58 @@
+import React, { ComponentPropsWithRef, useEffect } from 'react';
+import classes from './TabButton.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'button'> {
+  children?: string;
+  selected?: boolean;
+  focussed?: boolean;
+  tabId?: string;
+  tabPanelId?: string;
+  onTabButtonClick?: () => void;
+}
+
+export const TabButton = React.forwardRef<HTMLButtonElement, Props>(
+  (
+    {
+      children,
+      selected = false,
+      focussed = false,
+      tabId,
+      tabPanelId,
+      className,
+      onTabButtonClick,
+      ...rest
+    }: Props,
+    ref
+  ) => {
+    useEffect(() => {
+      if (focussed && ref) {
+        (ref as React.MutableRefObject<HTMLButtonElement>).current.focus();
+      }
+    }, [focussed]);
+
+    const classNames = [classes['tabbutton']];
+
+    selected && classNames.push(classes['selected']);
+    focussed && !selected && classNames.push(classes['focussed']);
+    className && classNames.push(className);
+
+    return (
+      <button
+        {...rest}
+        aria-selected={selected}
+        key={tabId}
+        className={classNames.join(' ')}
+        ref={ref}
+        role="tab"
+        tabIndex={selected ? 0 : -1}
+        type="button"
+        aria-controls={tabPanelId}
+        id={tabId}
+        onClick={onTabButtonClick}
+      >
+        <span aria-hidden="true">{children}</span>
+        {children}
+      </button>
+    );
+  }
+);

package/src/Tabs/TabPanel.module.scss

@@ -0,0 +1,7 @@
+.tabpanel {
+  display: none;
+
+  &.selected {
+    display: block;
+  }
+}

package/src/Tabs/TabPanel.test.tsx

@@ -0,0 +1,76 @@
+import React from 'react';
+import { TabPanel, Props } from './TabPanel';
+import { render } from '@testing-library/react';
+
+const defaultParams: Props = {
+  tabId: 'fakeTabId',
+  tabPanelId: 'fakeTabPanelId',
+  children: [],
+};
+
+const createTabPanel = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(
+    <TabPanel {...parameters} data-testid="tabpanel">
+      tabpanel content
+    </TabPanel>
+  );
+  const tabpanel = queries.getByTestId('tabpanel');
+
+  return {
+    ...queries,
+    tabpanel,
+  };
+};
+
+describe('TabPanel should render', () => {
+  it('renders without crashing', () => {
+    const { tabpanel } = createTabPanel();
+
+    expect(tabpanel).toBeTruthy();
+
+    expect(tabpanel).toHaveAttribute('aria-hidden', 'true');
+    expect(tabpanel).toHaveAttribute('hidden');
+  });
+
+  it('should be visible when prop selected is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      selected: true,
+    }));
+
+    expect(tabpanel).toHaveClass('selected');
+    expect(tabpanel).toHaveAttribute('aria-hidden', 'false');
+    expect(tabpanel).not.toHaveAttribute('hidden');
+  });
+
+  it('should set id when prop tabPanelId is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      tabPanelId: 'fakeId',
+    }));
+
+    expect(tabpanel).toHaveAttribute('id', 'fakeId');
+  });
+
+  it('should set accessibility attributes when prop tabId is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      tabId: 'fakeId',
+    }));
+
+    expect(tabpanel).toHaveAttribute('aria-labelledby', 'fakeId');
+  });
+
+  it('should set class when prop className is passed', () => {
+    const { tabpanel } = createTabPanel((defaultParams) => ({
+      ...defaultParams,
+      className: 'customclass',
+    }));
+
+    expect(tabpanel).toHaveClass('customclass');
+  });
+});

package/src/Tabs/TabPanel.tsx

@@ -0,0 +1,27 @@
+import React, { ComponentPropsWithRef } from 'react';
+import classes from './TabPanel.module.scss';
+
+export interface Props extends ComponentPropsWithRef<'div'> {
+  children: React.ReactNode;
+  tabId: string;
+  tabPanelId: string;
+  selected?: boolean;
+}
+
+export const TabPanel = React.forwardRef<HTMLDivElement, Props>(
+  ({ children, tabId, tabPanelId, selected = false, className, ...rest }: Props, ref) => (
+    <div
+      {...rest}
+      ref={ref}
+      aria-labelledby={tabId}
+      className={`${classes['tabpanel']} ${selected ? classes['selected'] : ''} ${className ?? ''}`}
+      id={tabPanelId}
+      role="tabpanel"
+      tabIndex={0}
+      hidden={!selected || undefined}
+      aria-hidden={!selected}
+    >
+      {children}
+    </div>
+  )
+);

package/src/Tabs/Tabs.module.scss

@@ -0,0 +1,41 @@
+$focus-width: 5px;
+
+.tabs {
+  background-color: var(--tabs-background-color);
+  padding: 1rem 1.25rem;
+  border-radius: 0.5rem;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.tablist {
+  display: flex;
+  flex-wrap: nowrap;
+  overflow-x: auto;
+  gap: 2rem;
+  position: relative;
+  margin: -$focus-width;
+  padding: $focus-width;
+  z-index: 0;
+}
+
+.indicator {
+  position: absolute;
+  height: 2px;
+  background-color: var(--color-primary);
+  transition-property: left, width;
+  transition-duration: 0.2s;
+  transition-timing-function: ease-in-out;
+}
+
+.tabdivider {
+  border-bottom-style: var(--tablist-border-style);
+  border-bottom-width: var(--tablist-border-width);
+  border-bottom-color: var(--tablist-border-color);
+  width: calc(100% - ($focus-width * 2));
+  position: absolute;
+  bottom: $focus-width;
+  left: $focus-width;
+  z-index: -1;
+}

package/src/Tabs/Tabs.test.tsx

@@ -0,0 +1,268 @@
+import React from 'react';
+import { Tabs, Props } from './Tabs';
+import { render } from '@testing-library/react';
+import { TabButton as Tab } from './TabButton';
+import userEvent from '@testing-library/user-event';
+
+const defaultParams: Props = {
+  'aria-label': 'Entertainment',
+  children: [
+    <Tab title="Tab1">Tabpanel1 content</Tab>,
+    <Tab title="Tab2">Tabpanel2 content</Tab>,
+    <Tab title="Tab3">Tabpanel3 content</Tab>,
+  ],
+};
+
+const createTabs = (params?: (defaultParams: Props) => Props) => {
+  let parameters: Props = defaultParams;
+  if (params) {
+    parameters = params(defaultParams);
+  }
+  const queries = render(<Tabs {...parameters} data-testid="tabs"></Tabs>);
+  const tabs = queries.getByTestId('tabs');
+
+  return {
+    ...queries,
+    tabs,
+  };
+};
+
+describe('Tabs should render', () => {
+  it('renders without crashing', () => {
+    const { tabs } = createTabs();
+
+    expect(tabs).toBeDefined();
+  });
+
+  it('renders with properties passed', () => {
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+      className: 'testclass',
+    }));
+
+    expect(tabs).toHaveClass('testclass');
+  });
+
+  it('switches to tab and tabpanel when selected property is changed', () => {
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+      selected: 2,
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    const tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    const tab1 = tabButtons[0] as HTMLButtonElement;
+    const tab3 = tabButtons[2] as HTMLButtonElement;
+
+    const tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    const tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).not.toHaveClass('selected');
+    expect(tab3).toHaveClass('selected');
+
+    expect(tabpanel1).not.toHaveClass('selected');
+    expect(tabpanel3).toHaveClass('selected');
+  });
+
+  it('switches to tab and tabpanel when tab is clicked', () => {
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    let tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    let tab1 = tabButtons[0] as HTMLButtonElement;
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('selected');
+
+    expect(tabpanel1).toHaveClass('selected');
+    expect(tabpanel3).not.toHaveClass('selected');
+
+    userEvent.click(tab3);
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).not.toHaveClass('selected');
+    expect(tab3).toHaveClass('selected');
+
+    expect(tabpanel1).not.toHaveClass('selected');
+    expect(tabpanel3).toHaveClass('selected');
+  });
+
+  it('triggers the onTabChange when switching tabs', () => {
+    const onTabChangeHandler = jest.fn();
+
+    const { tabs } = createTabs((defaultParams) => ({
+      ...defaultParams,
+      onTabChange: onTabChangeHandler,
+    }));
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    userEvent.click(tab3);
+
+    expect(onTabChangeHandler).toHaveBeenCalled();
+  });
+});
+
+describe('Tabs should not render other children then tab components', () => {
+  it('renders no tabs', () => {
+    const queries = render(
+      <Tabs data-testid="tabs">
+        <div>wrong component 1</div>
+        <div>wrong component 2</div>
+      </Tabs>
+    );
+
+    const tabs = queries.getByTestId('tabs');
+
+    expect(tabs).toBeDefined();
+    expect(tabs).toBeEmptyDOMElement;
+  });
+});
+
+describe('Tabs should comply with accessibility rules', () => {
+  it('traverse through tabs with keyboard', async () => {
+    const { tabs } = createTabs();
+
+    const tablist = tabs.firstChild as HTMLDivElement;
+    const tabpanels = tabs.lastChild as HTMLDivElement;
+    let tabButtons = tablist.querySelectorAll('.tabbutton');
+
+    let tab1 = tabButtons[0] as HTMLButtonElement;
+    let tab3 = tabButtons[2] as HTMLButtonElement;
+
+    let tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    let tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    tab1.focus();
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab1).not.toHaveClass('focussed');
+    expect(tab3).not.toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+    expect(tabpanel1).toHaveClass('selected');
+    expect(tabpanel3).not.toHaveClass('selected');
+
+    userEvent.keyboard('[ArrowLeft]');
+    userEvent.keyboard('[Space]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveClass('selected');
+    expect(tab1).not.toHaveClass('selected');
+    expect(tab1).not.toHaveClass('focussed');
+    expect(tabpanel3).toHaveClass('selected');
+    expect(tabpanel1).not.toHaveClass('selected');
+
+    userEvent.keyboard('[ArrowRight]');
+    userEvent.keyboard('[Enter]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+    tabpanel1 = tabpanels.firstChild as HTMLDivElement;
+    tabpanel3 = tabpanels.lastChild as HTMLDivElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+    expect(tabpanel1).toHaveClass('selected');
+    expect(tabpanel3).not.toHaveClass('selected');
+
+    userEvent.keyboard('[End]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab3).toHaveFocus();
+    expect(tab3).toHaveClass('focussed');
+    expect(tab1).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[Home]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+
+    // should have no effect
+    userEvent.keyboard('a');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[ArrowRight]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+    expect(tab1).not.toHaveClass('focussed');
+    expect(tab3).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[ArrowLeft]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    expect(tab1).toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+    expect(tab3).not.toHaveClass('focussed');
+
+    userEvent.keyboard('[ArrowLeft]');
+
+    tabButtons = tablist.querySelectorAll('.tabbutton');
+    tab1 = tabButtons[0] as HTMLButtonElement;
+    tab3 = tabButtons[2] as HTMLButtonElement;
+
+    tab3.blur();
+
+    expect(tab1).not.toHaveFocus();
+    expect(tab3).not.toHaveFocus();
+    expect(tab1).toHaveClass('selected');
+  });
+});