@ssa-ui-kit/core 0.0.11-alpha → 0.0.13-alpha

package/src/components/CardHeader/CardHeader.tsx

@@ -1,26 +1,26 @@
-import { CommonProps } from '@global-types/emotion';
-import CardHeaderBase from './CardHeaderBase';
-
-export interface CardProps extends CommonProps {
-  children: React.ReactNode;
-  icon?: React.ReactNode;
-  transparent?: boolean;
-}
-
-const CardHeader = ({ children, icon, transparent, ...props }: CardProps) => (
-  <CardHeaderBase transparent={transparent} hasIcon={!!icon} {...props}>
-    {icon ? (
-      <span
-        style={{
-          position: 'absolute',
-          left: '-30px',
-          top: '-30px',
-        }}>
-        {icon}
-      </span>
-    ) : null}
-    {children}
-  </CardHeaderBase>
-);
-
-export default CardHeader;
+import { CommonProps } from '@global-types/emotion';
+import CardHeaderBase from './CardHeaderBase';
+
+export interface CardProps extends CommonProps {
+  children: React.ReactNode;
+  icon?: React.ReactNode;
+  transparent?: boolean;
+}
+
+const CardHeader = ({ children, icon, transparent, ...props }: CardProps) => (
+  <CardHeaderBase transparent={transparent} hasIcon={!!icon} {...props}>
+    {icon ? (
+      <span
+        style={{
+          position: 'absolute',
+          left: '-30px',
+          top: '-30px',
+        }}>
+        {icon}
+      </span>
+    ) : null}
+    {children}
+  </CardHeaderBase>
+);
+
+export default CardHeader;

package/src/components/CardHeader/CardHeaderBase.tsx

@@ -1,21 +1,21 @@
-import styled from '@emotion/styled';
-
-const CardHeaderBase = styled.div<{ transparent?: boolean; hasIcon?: boolean }>`
-  position: relative;
-
-  display: flex;
-  justify-content: space-between;
-
-  width: 100%;
-  margin-bottom: 20px;
-
-  background: ${(props) => (props.transparent ? 'transparent' : 'initial')};
-
-  padding-left: ${(props) => (props.hasIcon ? '30px' : null)};
-
-  ${({ theme }) => theme.mediaQueries.md} {
-    padding-left: ${(props) => (props.hasIcon ? '40px' : null)};
-  }
-`;
-
-export default CardHeaderBase;
+import styled from '@emotion/styled';
+
+const CardHeaderBase = styled.div<{ transparent?: boolean; hasIcon?: boolean }>`
+  position: relative;
+
+  display: flex;
+  justify-content: space-between;
+
+  width: 100%;
+  margin-bottom: 20px;
+
+  background: ${(props) => (props.transparent ? 'transparent' : 'initial')};
+
+  padding-left: ${(props) => (props.hasIcon ? '30px' : null)};
+
+  ${({ theme }) => theme.mediaQueries.md} {
+    padding-left: ${(props) => (props.hasIcon ? '40px' : null)};
+  }
+`;
+
+export default CardHeaderBase;

package/src/components/CardHeader/index.ts

@@ -1 +1 @@
-export { default } from './CardHeader';
+export { default } from './CardHeader';

package/src/components/Checkbox/Checkbox.spec.tsx

@@ -1,193 +1,193 @@
-import userEvent from '@testing-library/user-event';
-import { ThemeProvider } from '@emotion/react';
-import colors from '@themes/main';
-import { useForm } from 'react-hook-form';
-
-import Checkbox from '@components/Checkbox';
-import FormCheckbox from '@components/FormCheckbox';
-
-import { ICheckboxProps } from './types';
-import { getByRole } from '@testing-library/dom';
-
-const checkLabel = () => {
-  const labelEl = document.getElementsByTagName('label')[0];
-  expect(labelEl).toBeInTheDocument();
-  expect(labelEl).toHaveAttribute('for');
-
-  return labelEl;
-};
-
-const checkIcon = (labelEl: HTMLLabelElement, isChecked: boolean) => {
-  const icons = labelEl.getElementsByTagName('svg');
-
-  if (isChecked) {
-    expect(icons.length).toEqual(1);
-    expect(icons[0]).toBeInTheDocument();
-  } else {
-    expect(icons.length).toEqual(0);
-  }
-};
-
-const checkToggle = async (
-  container: HTMLElement,
-  mockOnChange: () => void,
-  labelEl: HTMLLabelElement,
-  isChecked: boolean,
-) => {
-  checkIcon(labelEl, isChecked);
-  const checkboxEl: HTMLInputElement = getByRole(container, 'checkbox', {
-    checked: isChecked,
-  });
-  expect(checkboxEl.id).toEqual(labelEl.getAttribute('for'));
-
-  const newIsChecked = !isChecked;
-
-  await userEvent.click(labelEl);
-
-  expect(checkboxEl.checked).toBe(newIsChecked);
-  expect(mockOnChange).toBeCalledWith(newIsChecked);
-
-  checkIcon(labelEl, newIsChecked);
-};
-
-function setup(props: Omit<ICheckboxProps, 'onChange'> = {}) {
-  const mockOnChange = jest.fn();
-  return {
-    user: userEvent.setup(),
-    mockOnChange,
-    ...render(<Checkbox onChange={mockOnChange} {...props} />),
-  };
-}
-
-describe('Checkbox', () => {
-  it('Renders without text', async () => {
-    const { mockOnChange, container } = setup();
-
-    const labelEl = checkLabel();
-    await checkToggle(container, mockOnChange, labelEl, false);
-  });
-
-  it('Renders with text', async () => {
-    const text = 'some text';
-
-    const { container, mockOnChange } = setup({ text });
-
-    const labelEl = checkLabel();
-    expect(labelEl).toHaveTextContent(text);
-    await checkToggle(container, mockOnChange, labelEl, false);
-    expect(labelEl).toHaveTextContent(text);
-  });
-
-  it('Renders with custom id', () => {
-    const checkboxId = 'my-checkbox';
-    const { getByRole } = setup({ id: checkboxId });
-    const checkboxEl = getByRole('checkbox', { checked: false });
-
-    const labelEl = document.getElementsByTagName('label')[0];
-    expect(labelEl).toBeInTheDocument();
-    expect(checkboxEl.id).toEqual(checkboxId);
-    expect(checkboxEl.id).toEqual(labelEl.getAttribute('for'));
-  });
-
-  it('Renders in the disabled state', async () => {
-    const { getByRole, user, mockOnChange } = setup({ isDisabled: true });
-
-    const checkboxEl = getByRole('checkbox', { checked: false });
-
-    await user.click(checkboxEl);
-    expect(mockOnChange).not.toBeCalled();
-  });
-
-  it('Renders with the initial state passed in props', async () => {
-    const isChecked = true;
-    const { container, mockOnChange } = setup({ initialState: isChecked });
-
-    const labelEl = checkLabel();
-    await checkToggle(container, mockOnChange, labelEl, isChecked);
-  });
-
-  it('Renders with the external state passed in props', async () => {
-    const isChecked = true;
-    const { container, mockOnChange } = setup({ externalState: isChecked });
-
-    const labelEl = checkLabel();
-    await checkToggle(container, mockOnChange, labelEl, isChecked);
-  });
-
-  it('Renders in the indeterminate state', () => {
-    const { getByRole, rerender, mockOnChange } = setup({
-      isIndeterminate: true,
-    });
-
-    let checkboxEl = getByRole('checkbox');
-    expect(checkboxEl).not.toBeChecked();
-    expect(checkboxEl).toHaveProperty('indeterminate', true);
-
-    rerender(
-      <ThemeProvider theme={colors}>
-        <Checkbox onChange={mockOnChange} isIndeterminate={false} />
-      </ThemeProvider>,
-    );
-
-    checkboxEl = getByRole('checkbox');
-    expect(checkboxEl).not.toBeChecked();
-    expect(checkboxEl).toHaveProperty('indeterminate', false);
-  });
-
-  it('Renders with the "name" attribute', () => {
-    const name = 'nice-checkbox';
-    const { getByRole } = setup({ name });
-    const checkboxEl = getByRole('checkbox');
-    expect(checkboxEl).toHaveAttribute('name', name);
-  });
-
-  it('Renders with the "required" attribute', () => {
-    const { getByRole } = setup({ isRequired: true });
-    const checkboxEl = getByRole('checkbox');
-    expect(checkboxEl).toHaveAttribute('required', name);
-  });
-
-  describe('FormCheckbox', () => {
-    type TestFormValues = {
-      consent: boolean;
-    };
-
-    const TestForm = ({
-      onFormSubmit,
-    }: {
-      onFormSubmit: (data: TestFormValues) => void;
-    }) => {
-      const { control, handleSubmit } = useForm<TestFormValues>();
-      const onSubmit = handleSubmit((data) => onFormSubmit(data));
-
-      return (
-        <form onSubmit={onSubmit}>
-          <FormCheckbox
-            control={control}
-            name="consent"
-            text="Give your consent"
-          />
-          <input type="submit" />
-        </form>
-      );
-    };
-
-    it('Renders and is connected to the form', async () => {
-      const user = userEvent.setup();
-      const onMockFormSubmit = jest.fn();
-
-      const { getByLabelText } = render(
-        <TestForm onFormSubmit={onMockFormSubmit} />,
-      );
-
-      const checkboxEl = getByLabelText('Give your consent');
-      expect(checkboxEl).toHaveProperty('checked', false);
-      const submitEl = document.querySelector('input[type="submit"]');
-
-      await user.click(checkboxEl);
-      await user.click(submitEl as HTMLInputElement);
-
-      expect(onMockFormSubmit).toBeCalledWith({ consent: true });
-    });
-  });
-});
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from '@emotion/react';
+import colors from '@themes/main';
+import { useForm } from 'react-hook-form';
+
+import Checkbox from '@components/Checkbox';
+import FormCheckbox from '@components/FormCheckbox';
+
+import { ICheckboxProps } from './types';
+import { getByRole } from '@testing-library/dom';
+
+const checkLabel = () => {
+  const labelEl = document.getElementsByTagName('label')[0];
+  expect(labelEl).toBeInTheDocument();
+  expect(labelEl).toHaveAttribute('for');
+
+  return labelEl;
+};
+
+const checkIcon = (labelEl: HTMLLabelElement, isChecked: boolean) => {
+  const icons = labelEl.getElementsByTagName('svg');
+
+  if (isChecked) {
+    expect(icons.length).toEqual(1);
+    expect(icons[0]).toBeInTheDocument();
+  } else {
+    expect(icons.length).toEqual(0);
+  }
+};
+
+const checkToggle = async (
+  container: HTMLElement,
+  mockOnChange: () => void,
+  labelEl: HTMLLabelElement,
+  isChecked: boolean,
+) => {
+  checkIcon(labelEl, isChecked);
+  const checkboxEl: HTMLInputElement = getByRole(container, 'checkbox', {
+    checked: isChecked,
+  });
+  expect(checkboxEl.id).toEqual(labelEl.getAttribute('for'));
+
+  const newIsChecked = !isChecked;
+
+  await userEvent.click(labelEl);
+
+  expect(checkboxEl.checked).toBe(newIsChecked);
+  expect(mockOnChange).toBeCalledWith(newIsChecked);
+
+  checkIcon(labelEl, newIsChecked);
+};
+
+function setup(props: Omit<ICheckboxProps, 'onChange'> = {}) {
+  const mockOnChange = jest.fn();
+  return {
+    user: userEvent.setup(),
+    mockOnChange,
+    ...render(<Checkbox onChange={mockOnChange} {...props} />),
+  };
+}
+
+describe('Checkbox', () => {
+  it('Renders without text', async () => {
+    const { mockOnChange, container } = setup();
+
+    const labelEl = checkLabel();
+    await checkToggle(container, mockOnChange, labelEl, false);
+  });
+
+  it('Renders with text', async () => {
+    const text = 'some text';
+
+    const { container, mockOnChange } = setup({ text });
+
+    const labelEl = checkLabel();
+    expect(labelEl).toHaveTextContent(text);
+    await checkToggle(container, mockOnChange, labelEl, false);
+    expect(labelEl).toHaveTextContent(text);
+  });
+
+  it('Renders with custom id', () => {
+    const checkboxId = 'my-checkbox';
+    const { getByRole } = setup({ id: checkboxId });
+    const checkboxEl = getByRole('checkbox', { checked: false });
+
+    const labelEl = document.getElementsByTagName('label')[0];
+    expect(labelEl).toBeInTheDocument();
+    expect(checkboxEl.id).toEqual(checkboxId);
+    expect(checkboxEl.id).toEqual(labelEl.getAttribute('for'));
+  });
+
+  it('Renders in the disabled state', async () => {
+    const { getByRole, user, mockOnChange } = setup({ isDisabled: true });
+
+    const checkboxEl = getByRole('checkbox', { checked: false });
+
+    await user.click(checkboxEl);
+    expect(mockOnChange).not.toBeCalled();
+  });
+
+  it('Renders with the initial state passed in props', async () => {
+    const isChecked = true;
+    const { container, mockOnChange } = setup({ initialState: isChecked });
+
+    const labelEl = checkLabel();
+    await checkToggle(container, mockOnChange, labelEl, isChecked);
+  });
+
+  it('Renders with the external state passed in props', async () => {
+    const isChecked = true;
+    const { container, mockOnChange } = setup({ externalState: isChecked });
+
+    const labelEl = checkLabel();
+    await checkToggle(container, mockOnChange, labelEl, isChecked);
+  });
+
+  it('Renders in the indeterminate state', () => {
+    const { getByRole, rerender, mockOnChange } = setup({
+      isIndeterminate: true,
+    });
+
+    let checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).not.toBeChecked();
+    expect(checkboxEl).toHaveProperty('indeterminate', true);
+
+    rerender(
+      <ThemeProvider theme={colors}>
+        <Checkbox onChange={mockOnChange} isIndeterminate={false} />
+      </ThemeProvider>,
+    );
+
+    checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).not.toBeChecked();
+    expect(checkboxEl).toHaveProperty('indeterminate', false);
+  });
+
+  it('Renders with the "name" attribute', () => {
+    const name = 'nice-checkbox';
+    const { getByRole } = setup({ name });
+    const checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).toHaveAttribute('name', name);
+  });
+
+  it('Renders with the "required" attribute', () => {
+    const { getByRole } = setup({ isRequired: true });
+    const checkboxEl = getByRole('checkbox');
+    expect(checkboxEl).toHaveAttribute('required', name);
+  });
+
+  describe('FormCheckbox', () => {
+    type TestFormValues = {
+      consent: boolean;
+    };
+
+    const TestForm = ({
+      onFormSubmit,
+    }: {
+      onFormSubmit: (data: TestFormValues) => void;
+    }) => {
+      const { control, handleSubmit } = useForm<TestFormValues>();
+      const onSubmit = handleSubmit((data) => onFormSubmit(data));
+
+      return (
+        <form onSubmit={onSubmit}>
+          <FormCheckbox
+            control={control}
+            name="consent"
+            text="Give your consent"
+          />
+          <input type="submit" />
+        </form>
+      );
+    };
+
+    it('Renders and is connected to the form', async () => {
+      const user = userEvent.setup();
+      const onMockFormSubmit = jest.fn();
+
+      const { getByLabelText } = render(
+        <TestForm onFormSubmit={onMockFormSubmit} />,
+      );
+
+      const checkboxEl = getByLabelText('Give your consent');
+      expect(checkboxEl).toHaveProperty('checked', false);
+      const submitEl = document.querySelector('input[type="submit"]');
+
+      await user.click(checkboxEl);
+      await user.click(submitEl as HTMLInputElement);
+
+      expect(onMockFormSubmit).toBeCalledWith({ consent: true });
+    });
+  });
+});

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,93 +1,93 @@
-import { Fragment } from 'react';
-import type { Meta } from '@storybook/react';
-import Typography from '@components/Typography';
-import Checkbox, { ICheckboxProps } from './index';
-
-export default {
-  title: 'Components/Checkbox',
-  component: Checkbox,
-  parameters: {
-    docs: {
-      description: {
-        component: 'UI component that triggers an action or event.',
-      },
-    },
-  },
-  argTypes: {
-    id: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-  args: {
-    text: 'label',
-  },
-} as Meta<typeof Checkbox>;
-
-export const Default = {};
-
-const checkboxPropsVariants: Array<ICheckboxProps & { caption?: string }> = [
-  {
-    id: 'checked',
-    caption: 'Checked by default',
-    initialState: true,
-    onChange() {
-      /* no-op */
-    },
-  },
-  {
-    id: 'checked-disabled',
-    initialState: true,
-    isDisabled: true,
-    onChange() {
-      /* no-op */
-    },
-  },
-  {
-    id: 'not-checked',
-    caption: 'Un-checked by default',
-    onChange() {
-      /* no-op */
-    },
-  },
-  {
-    id: 'not-checked-disabled',
-    isDisabled: true,
-    onChange() {
-      /* no-op */
-    },
-  },
-  {
-    id: 'undetermined',
-    caption: 'Undetermined',
-    isIndeterminate: true,
-    onChange() {
-      /* no-op */
-    },
-  },
-  {
-    id: 'undetermined-disabled',
-    isIndeterminate: true,
-    isDisabled: true,
-    onChange() {
-      /* no-op */
-    },
-  },
-];
-
-export const AllStates = () => (
-  <Fragment>
-    {checkboxPropsVariants.map(({ id, caption, ...props }) => (
-      <Fragment key={id}>
-        {caption ? <Typography variant="h6">{caption}</Typography> : null}
-        <div style={{ display: 'flex' }}>
-          <span style={{ marginRight: '20px' }}>
-            <Checkbox text="label" {...props} id={id} />
-          </span>{' '}
-          <Checkbox {...props} id={`${id}-no-text`} />
-        </div>
-      </Fragment>
-    ))}
-  </Fragment>
-);
+import { Fragment } from 'react';
+import type { Meta } from '@storybook/react';
+import Typography from '@components/Typography';
+import Checkbox, { ICheckboxProps } from './index';
+
+export default {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  parameters: {
+    docs: {
+      description: {
+        component: 'UI component that triggers an action or event.',
+      },
+    },
+  },
+  argTypes: {
+    id: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  args: {
+    text: 'label',
+  },
+} as Meta<typeof Checkbox>;
+
+export const Default = {};
+
+const checkboxPropsVariants: Array<ICheckboxProps & { caption?: string }> = [
+  {
+    id: 'checked',
+    caption: 'Checked by default',
+    initialState: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'checked-disabled',
+    initialState: true,
+    isDisabled: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'not-checked',
+    caption: 'Un-checked by default',
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'not-checked-disabled',
+    isDisabled: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'undetermined',
+    caption: 'Undetermined',
+    isIndeterminate: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+  {
+    id: 'undetermined-disabled',
+    isIndeterminate: true,
+    isDisabled: true,
+    onChange() {
+      /* no-op */
+    },
+  },
+];
+
+export const AllStates = () => (
+  <Fragment>
+    {checkboxPropsVariants.map(({ id, caption, ...props }) => (
+      <Fragment key={id}>
+        {caption ? <Typography variant="h6">{caption}</Typography> : null}
+        <div style={{ display: 'flex' }}>
+          <span style={{ marginRight: '20px' }}>
+            <Checkbox text="label" {...props} id={id} />
+          </span>{' '}
+          <Checkbox {...props} id={`${id}-no-text`} />
+        </div>
+      </Fragment>
+    ))}
+  </Fragment>
+);