@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Switch/Switch.spec.tsx

@@ -0,0 +1,181 @@
+import userEvent from '@testing-library/user-event';
+import theme from '@themes/main';
+
+import Switch from './index';
+import { SwitchContextProvider } from './SwitchContext';
+
+function setup(component: React.ReactNode, initialState: boolean) {
+  return {
+    user: userEvent.setup(),
+    ...render(
+      <SwitchContextProvider initialState={initialState}>
+        {component}
+      </SwitchContextProvider>,
+    ),
+  };
+}
+
+interface CheckSwitchStyleAndMarkup {
+  (
+    switchEl: HTMLElement,
+    options: {
+      isOn: boolean;
+      isDisabled?: boolean;
+    },
+  ): void;
+}
+const checkSwitchStyleAndMarkup: CheckSwitchStyleAndMarkup = (
+  switchEl,
+  { isOn, isDisabled = false },
+) => {
+  // NOTE: we cannot test :before/:hover styles because getComputedStyle()
+  // support for pseudo-classes is not implemented in the test suite yet.
+  expect(switchEl).toHaveStyle(`
+      width: 44px;
+      height: 24px;
+      background: ${
+        isDisabled
+          ? theme.colors.greyDisabled
+          : isOn
+          ? `linear-gradient(117.5deg, ${theme.colors.greenLighter}, ${theme.colors.green})`
+          : theme.colors.greyFocused
+      };
+      outline: 0;
+      border-radius: 50px;
+      position: relative;
+      cursor: ${isDisabled ? 'auto' : 'pointer'};
+    `);
+
+  expect(switchEl.firstChild).not.toBeInTheDocument();
+  expect(switchEl).toHaveAttribute('aria-checked', isOn.toString());
+  expect(switchEl).toHaveAttribute('type', 'button');
+  expect(switchEl).toHaveAttribute('aria-label', TEST_LABEL);
+
+  if (isDisabled) {
+    expect(switchEl).toBeDisabled();
+    expect(switchEl).toHaveAttribute('aria-readonly', 'true');
+  } else {
+    expect(switchEl).toBeEnabled();
+    expect(switchEl).toHaveAttribute('aria-readonly', 'false');
+  }
+};
+
+const TEST_LABEL = 'Test Switch';
+
+describe('Switch', () => {
+  it('[enabled] Renders in the "on" state', async () => {
+    const isOn = true;
+    const { user, getByRole } = setup(<Switch label={TEST_LABEL} />, isOn);
+
+    let switchEl = getByRole('switch');
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn });
+
+    await user.click(switchEl);
+
+    switchEl = getByRole('switch');
+    expect(switchEl).toHaveFocus();
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn: false });
+  });
+
+  it('[enabled] Renders in the "off" state', async () => {
+    const isOn = false;
+    const { user, getByRole } = setup(<Switch label={TEST_LABEL} />, isOn);
+
+    let switchEl = getByRole('switch');
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn });
+
+    await user.click(switchEl);
+
+    switchEl = getByRole('switch');
+    expect(switchEl).toHaveFocus();
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn: true });
+  });
+
+  it('[disabled] Renders in the "on" state', async () => {
+    const isOn = true;
+    const isDisabled = true;
+    const { user, getByRole } = setup(
+      <Switch label={TEST_LABEL} isDisabled={isDisabled} />,
+      isOn,
+    );
+
+    let switchEl = getByRole('switch');
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn, isDisabled: true });
+
+    await user.click(switchEl);
+
+    switchEl = getByRole('switch');
+    expect(switchEl).not.toHaveFocus();
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn, isDisabled: true });
+  });
+
+  it('[disabled] Renders in the "off" state', async () => {
+    const isDisabled = true;
+    const isOn = false;
+    const { user, getByRole } = setup(
+      <Switch label={TEST_LABEL} isDisabled={isDisabled} />,
+      isOn,
+    );
+
+    let switchEl = getByRole('switch');
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn, isDisabled: true });
+
+    await user.click(switchEl);
+
+    switchEl = getByRole('switch');
+    expect(switchEl).not.toHaveFocus();
+
+    checkSwitchStyleAndMarkup(switchEl, { isOn, isDisabled: true });
+  });
+
+  it('[enabled] Reacts to keyboard events when "on"', async () => {
+    const isOn = true;
+    const { user, getByRole } = setup(<Switch label={TEST_LABEL} />, isOn);
+
+    let switchEl = getByRole('switch');
+
+    await user.tab();
+
+    switchEl = getByRole('switch');
+    expect(switchEl).toHaveFocus();
+
+    await user.keyboard('[Space]');
+
+    expect(switchEl).toHaveFocus();
+  });
+
+  it('[enabled] Reacts to keyboard events when "off"', async () => {
+    const isOn = false;
+    const { user, getByRole } = setup(<Switch label={TEST_LABEL} />, isOn);
+
+    let switchEl = getByRole('switch');
+
+    await user.tab();
+
+    switchEl = getByRole('switch');
+    expect(switchEl).toHaveFocus();
+
+    await user.keyboard('[Space]');
+
+    expect(switchEl).toHaveFocus();
+  });
+
+  it('test default initial state', () => {
+    const { getByRole } = render(
+      <SwitchContextProvider>
+        <Switch label="demo" />
+      </SwitchContextProvider>,
+    );
+
+    const switchEl = getByRole('switch');
+
+    expect(switchEl).toHaveAttribute('aria-checked', 'false');
+  });
+});

package/src/components/Switch/Switch.stories.tsx

@@ -0,0 +1,64 @@
+import { Fragment } from 'react';
+import { Meta } from '@storybook/react';
+import '@storybook/types';
+
+import Switch, { SwitchContextProvider } from './index';
+import Typography from '@components/Typography';
+
+export default {
+  title: 'Components/Switch',
+  component: Switch,
+  argTypes: {
+    label: {
+      description: 'aria-label value',
+    },
+  },
+  decorators: [
+    (Story, { args }) => {
+      return (
+        <Fragment>
+          <Typography variant="h5">Checked state</Typography>
+          <SwitchContextProvider initialState={true}>
+            {Story(args)}
+          </SwitchContextProvider>
+          <Typography variant="h5" css={{ marginTop: 10 }}>
+            Unchecked state
+          </Typography>
+          <SwitchContextProvider initialState={false}>
+            {Story(args)}
+          </SwitchContextProvider>
+        </Fragment>
+      );
+    },
+  ],
+} as Meta<typeof Switch>;
+
+export const Default = {};
+
+export const Focused = {
+  title: 'Components/Switch/Focused',
+  component: (args) => (
+    <Fragment>
+      <Typography variant="h5">Checked state (focused)</Typography>
+      <SwitchContextProvider initialState={true}>
+        <Switch {...args} />
+      </SwitchContextProvider>
+      <Typography variant="h5" css={{ marginTop: 10 }}>
+        Unchecked state (focused)
+      </Typography>
+      <SwitchContextProvider initialState={false}>
+        <Switch {...args} />
+      </SwitchContextProvider>
+    </Fragment>
+  ),
+  argTypes: {
+    label: {
+      description: 'aria-label value',
+    },
+  },
+  parameters: {
+    pseudo: {
+      focus: true,
+    },
+  },
+} as Meta<typeof Switch>;

package/src/components/Switch/Switch.tsx

@@ -0,0 +1,21 @@
+import SwitchBase from './SwitchBase';
+import { useSwitchContext } from './SwitchContext';
+
+import { ISwitchProps } from './types';
+
+const Switch = ({ label, isDisabled = false }: ISwitchProps) => {
+  const { isOn, toggle } = useSwitchContext();
+
+  return (
+    <SwitchBase
+      type="button"
+      role="switch"
+      aria-readonly={isDisabled}
+      aria-checked={isOn}
+      aria-label={label}
+      disabled={isDisabled}
+      onClick={() => !isDisabled && toggle()}
+    />
+  );
+};
+export default Switch;

package/src/components/Switch/SwitchBase.tsx

@@ -0,0 +1,62 @@
+import styled from '@emotion/styled';
+import { outlineStyles } from '@styles/safari-focus-outline';
+
+const SwitchBase = styled.button`
+  width: 44px;
+  height: 24px;
+  border: 0;
+  outline: 0;
+  padding: 0;
+  border-radius: 50px;
+  position: relative;
+  background: ${({ theme }) =>
+    `linear-gradient(117.5deg, ${theme.colors.greenLighter}, ${theme.colors.green});`};
+  cursor: pointer;
+
+  &::before {
+    position: absolute;
+    content: '';
+    height: 14px;
+    width: 14px;
+    right: 5px;
+    bottom: calc(50% - 7px);
+    background-color: ${({ theme }) => theme.colors.white};
+
+    transition: 0.4s;
+
+    border-radius: 50%;
+  }
+
+  &[aria-checked='false'] {
+    background: ${({ theme }) => theme.colors.greyFocused};
+  }
+
+  &:focus {
+    box-shadow: ${({ theme }) => `-4px 4px 10px ${theme.colors.green40}`};
+    outline: 0;
+  }
+
+  &:disabled {
+    background: ${({ theme }) => theme.colors.greyDisabled};
+    cursor: auto;
+  }
+
+  &:not(:disabled):hover {
+    box-shadow: ${({ theme }) => `-4px 4px 10px ${theme.colors.green40}`};
+  }
+
+  &[aria-checked='false']:focus::after,
+  &:not(:disabled)[aria-checked='false']:hover::after {
+    ${({ theme }) => outlineStyles(theme, 'greenLighter', '50px')}
+  }
+
+  &[aria-checked='true']::before {
+    transform: translateX(0);
+  }
+
+  &[aria-checked='false']::before {
+    transform: translateX(-20px);
+  }
+`;
+
+export default SwitchBase;

package/src/components/Switch/SwitchContext.tsx

@@ -0,0 +1,38 @@
+import { createContext, useState, useCallback, useContext } from 'react';
+
+export interface ISwitchContext {
+  isOn: boolean;
+  toggle: () => void;
+}
+
+export const SwitchContext = createContext<ISwitchContext>({
+  isOn: true,
+  toggle: () => {
+    /* default no-op */
+  },
+});
+
+export const useSwitchContext = () => useContext(SwitchContext);
+
+const useSwitch = (initialState = false): [boolean, () => void] => {
+  const [isOn, setIsOn] = useState(initialState);
+  const toggle = useCallback(() => setIsOn((state) => !state), []);
+
+  return [isOn, toggle];
+};
+
+export const SwitchContextProvider = ({
+  initialState,
+  children,
+}: {
+  initialState?: boolean;
+  children: React.ReactNode;
+}) => {
+  const [isOn, toggle] = useSwitch(initialState);
+
+  return (
+    <SwitchContext.Provider value={{ isOn, toggle }}>
+      {children}
+    </SwitchContext.Provider>
+  );
+};

package/src/components/Switch/index.ts

@@ -0,0 +1,6 @@
+export { default } from './Switch';
+export {
+  SwitchContext,
+  useSwitchContext,
+  SwitchContextProvider,
+} from './SwitchContext';

package/src/components/Switch/types.ts

@@ -0,0 +1,4 @@
+export interface ISwitchProps {
+  label: string;
+  isDisabled?: boolean;
+}

package/src/components/Tab/Tab.tsx

@@ -0,0 +1,31 @@
+import { ISmallTabProps } from '@components/TabBar/types';
+
+import { TabBase } from './TabBase';
+
+const Tab = ({
+  onClick,
+  isActive,
+  text,
+  ariaControls,
+  tabId,
+}: ISmallTabProps) => {
+  return (
+    <TabBase
+      role="tab"
+      id={`${tabId}`}
+      aria-selected={isActive}
+      aria-controls={ariaControls}
+      tabIndex={0}
+      isActive={isActive}
+      title={text}
+      onClick={() => {
+        // istanbul ignore else
+        if (typeof onClick === 'function') {
+          onClick();
+        }
+      }}>
+      {text}
+    </TabBase>
+  );
+};
+export default Tab;

package/src/components/Tab/TabBase.tsx

@@ -0,0 +1,31 @@
+import styled from '@emotion/styled';
+
+import { ISmallTabProps } from '@components/TabBar/types';
+
+export const TabBase = styled.button<Pick<ISmallTabProps, 'isActive'>>`
+  height: 34px;
+  border: 0;
+  outline: 0;
+  padding: 0 14px;
+  margin: 0 1px 0 0;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.greyFocused : theme.colors.greyLighter};
+  font-size: 14px;
+  line-height: 15px;
+  cursor: pointer;
+
+  &:first-of-type {
+    border-radius: 12px 0 0 12px;
+  }
+
+  &:last-child {
+    border-radius: 0 12px 12px 0;
+    margin-right: 0;
+  }
+
+  &:focus {
+    background: ${({ isActive, theme }) =>
+      isActive ? theme.colors.greyFocused : theme.colors.greySelectedMenuItem};
+  }
+`;

package/src/components/Tab/index.ts

@@ -0,0 +1 @@
+export { default } from './Tab';