@ssa-ui-kit/core 0.0.16-alpha → 0.0.17-alpha

package/src/components/Stepper/types.ts

@@ -1,17 +1,17 @@
-export interface StepperProps {
-  activeStep?: number;
-  orientation?: 'horizontal' | 'vertical';
-  color?: string;
-  inverted?: boolean;
-  sx?: React.CSSProperties;
-  children:
-    | React.ReactElement<React.PropsWithChildren>[]
-    | React.ReactElement<React.PropsWithChildren>;
-}
-
-export interface StepperContextType {
-  activeStep: number;
-  orientation: 'horizontal' | 'vertical';
-  color: string;
-  inverted?: boolean;
-}
+export interface StepperProps {
+  activeStep?: number;
+  orientation?: 'horizontal' | 'vertical';
+  color?: string;
+  inverted?: boolean;
+  sx?: React.CSSProperties;
+  children:
+    | React.ReactElement<React.PropsWithChildren>[]
+    | React.ReactElement<React.PropsWithChildren>;
+}
+
+export interface StepperContextType {
+  activeStep: number;
+  orientation: 'horizontal' | 'vertical';
+  color: string;
+  inverted?: boolean;
+}

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

@@ -1,181 +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');
-  });
-});
+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

@@ -1,64 +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>;
+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

@@ -1,21 +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;
+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;