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

package/src/components/Radio/Radio.tsx

@@ -1,56 +1,56 @@
-import { useId, useState } from 'react';
-import { useTheme } from '@emotion/react';
-
-import Icon from '@components/Icon';
-
-import { RadioBase } from './RadioBase';
-import { IRadioProps } from './types';
-
-const Radio = ({
-  id,
-  name = '',
-  value,
-  isChecked,
-  isDisabled,
-  isRequired,
-  onChange,
-  text,
-  className,
-}: IRadioProps) => {
-  const theme = useTheme();
-
-  const autoGenId = useId();
-  const [isHovered, setIsHovered] = useState(false);
-  const radioId = id || autoGenId;
-
-  return (
-    <RadioBase
-      htmlFor={radioId}
-      className={className}
-      onMouseEnter={() => setIsHovered(true)}
-      onMouseLeave={() => setIsHovered(false)}>
-      <input
-        id={radioId}
-        type="radio"
-        value={value}
-        checked={isChecked}
-        onChange={() => typeof onChange === 'function' && onChange(value)}
-        disabled={isDisabled}
-        required={isRequired}
-        name={name}
-      />
-      <Icon
-        name={isChecked ? 'radio-on' : 'circle'}
-        size={20}
-        color={
-          theme.colors[
-            isDisabled ? 'greyFocused40' : isHovered ? 'green60' : 'green'
-          ]
-        }
-      />
-      {text ? <span data-testid={id}>{text}</span> : null}
-    </RadioBase>
-  );
-};
-
-export default Radio;
+import { useId, useState } from 'react';
+import { useTheme } from '@emotion/react';
+
+import Icon from '@components/Icon';
+
+import { RadioBase } from './RadioBase';
+import { IRadioProps } from './types';
+
+const Radio = ({
+  id,
+  name = '',
+  value,
+  isChecked,
+  isDisabled,
+  isRequired,
+  onChange,
+  text,
+  className,
+}: IRadioProps) => {
+  const theme = useTheme();
+
+  const autoGenId = useId();
+  const [isHovered, setIsHovered] = useState(false);
+  const radioId = id || autoGenId;
+
+  return (
+    <RadioBase
+      htmlFor={radioId}
+      className={className}
+      onMouseEnter={() => setIsHovered(true)}
+      onMouseLeave={() => setIsHovered(false)}>
+      <input
+        id={radioId}
+        type="radio"
+        value={value}
+        checked={isChecked}
+        onChange={() => typeof onChange === 'function' && onChange(value)}
+        disabled={isDisabled}
+        required={isRequired}
+        name={name}
+      />
+      <Icon
+        name={isChecked ? 'radio-on' : 'circle'}
+        size={20}
+        color={
+          theme.colors[
+            isDisabled ? 'greyFocused40' : isHovered ? 'green60' : 'green'
+          ]
+        }
+      />
+      {text ? <span data-testid={id}>{text}</span> : null}
+    </RadioBase>
+  );
+};
+
+export default Radio;

package/src/components/Radio/RadioBase.tsx

@@ -1,36 +1,36 @@
-import styled from '@emotion/styled';
-import Label from '@components/Label';
-
-export const RadioBase = styled(Label)`
-  display: inline-flex;
-  flex-grow: 0;
-  align-items: center;
-  cursor: pointer;
-
-  &:has(input:disabled) {
-    cursor: default;
-  }
-
-  input:focus + svg {
-    filter: drop-shadow(
-      ${({ theme }) => `-4px 4px 10px ${theme.colors.green40}`}
-    );
-  }
-
-  input {
-    border: 0;
-    clip: rect(0 0 0 0);
-    height: 1px;
-    margin: -1px;
-    overflow: hidden;
-    padding: 0;
-    position: absolute;
-    width: 1px;
-  }
-
-  span {
-    margin-left: 10px;
-    font-size: 14px;
-    font-weight: 100;
-  }
-`;
+import styled from '@emotion/styled';
+import Label from '@components/Label';
+
+export const RadioBase = styled(Label)`
+  display: inline-flex;
+  flex-grow: 0;
+  align-items: center;
+  cursor: pointer;
+
+  &:has(input:disabled) {
+    cursor: default;
+  }
+
+  input:focus + svg {
+    filter: drop-shadow(
+      ${({ theme }) => `-4px 4px 10px ${theme.colors.green40}`}
+    );
+  }
+
+  input {
+    border: 0;
+    clip: rect(0 0 0 0);
+    height: 1px;
+    margin: -1px;
+    overflow: hidden;
+    padding: 0;
+    position: absolute;
+    width: 1px;
+  }
+
+  span {
+    margin-left: 10px;
+    font-size: 14px;
+    font-weight: 100;
+  }
+`;

package/src/components/Radio/index.ts

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

package/src/components/Radio/types.ts

@@ -1,11 +1,11 @@
-export interface IRadioProps {
-  id?: string;
-  value: string;
-  name?: string;
-  isChecked?: boolean;
-  isDisabled?: boolean;
-  isRequired?: boolean;
-  onChange?: (value: string) => void;
-  text?: string;
-  className?: string;
-}
+export interface IRadioProps {
+  id?: string;
+  value: string;
+  name?: string;
+  isChecked?: boolean;
+  isDisabled?: boolean;
+  isRequired?: boolean;
+  onChange?: (value: string) => void;
+  text?: string;
+  className?: string;
+}

package/src/components/RadioGroup/RadioGroup.spec.tsx

@@ -1,116 +1,116 @@
-import { within } from '@testing-library/dom';
-import userEvent from '@testing-library/user-event';
-
-import RadioGroup from './RadioGroup';
-import Radio from '@components/Radio';
-
-interface RadioType {
-  value: string;
-  text: string;
-}
-
-describe('RadioGroup', () => {
-  const radios: Record<string, RadioType> = {
-    radio1: { value: 'apple', text: 'Apple' },
-    radio2: { value: 'orange', text: 'Orange' },
-    radio3: { value: 'banana', text: 'Banana' },
-  };
-
-  it('Renders and reacts to clicks', async () => {
-    const onChange = jest.fn();
-    const user = userEvent.setup();
-
-    const { getByRole } = render(
-      <RadioGroup name="fruit" onChange={onChange}>
-        <Radio id="radio1" value="apple" text="Apple" />
-        <Radio id="radio2" value="orange" text="Orange" />
-        <Radio id="radio3" value="banana" text="Banana" />
-      </RadioGroup>,
-    );
-
-    const radioGroupEl = getByRole('radiogroup');
-    const radioEls = within(radioGroupEl).queryAllByRole('radio');
-    expect(radioEls.length).toBe(3);
-
-    for (const radioEl of radioEls) {
-      const id = radioEl.id;
-      const radioProps = radios[id];
-
-      expect(radioEl).not.toHaveAttribute('checked');
-      expect(radioEl).toHaveAttribute('name', 'fruit');
-      expect(radioEl).toHaveAttribute('value', radioProps.value);
-      expect(radioEl).not.toHaveAttribute('disabled');
-      expect(radioEl).not.toHaveAttribute('required');
-    }
-
-    for (const radioEl of radioEls) {
-      await user.click(radioEl);
-      const value = (radioEl as HTMLInputElement).value;
-      expect(onChange).toHaveBeenCalledWith(value);
-
-      const el = document.querySelector(
-        `input[value="${value}"]`,
-      ) as HTMLInputElement;
-      expect(el?.checked).toBe(true);
-      expect(document.querySelectorAll('input:checked').length).toBe(1);
-    }
-  });
-
-  it('Renders with the initial state', () => {
-    const onChange = jest.fn();
-
-    const { getAllByRole } = render(
-      <RadioGroup name="fruit" onChange={onChange} initialState="orange">
-        <Radio id="radio1" value="apple" text="Apple" />
-        <Radio id="radio2" value="orange" text="Orange" />
-        <Radio id="radio3" value="banana" text="Banana" />
-      </RadioGroup>,
-    );
-
-    const el = getAllByRole('radio')[1] as HTMLInputElement;
-    expect(el?.checked).toBe(true);
-    expect(document.querySelectorAll('input:checked').length).toBe(1);
-  });
-
-  it('Renders with custom styles', () => {
-    const onChange = jest.fn();
-
-    const { getByRole } = render(
-      <RadioGroup
-        name="fruit"
-        onChange={onChange}
-        initialState="orange"
-        css={{ backgroundColor: 'blue' }}>
-        <Radio id="radio1" value="apple" text="Apple" />
-        <Radio id="radio2" value="orange" text="Orange" />
-        <Radio id="radio3" value="banana" text="Banana" />
-      </RadioGroup>,
-    );
-
-    const radioGroupEl = getByRole('radiogroup');
-    expect(radioGroupEl).toHaveStyleRule('background-color', 'blue');
-  });
-
-  it('Renders with the "required" attribute', () => {
-    const onChange = jest.fn();
-
-    const { getAllByRole } = render(
-      <RadioGroup
-        name="fruit"
-        onChange={onChange}
-        initialState="orange"
-        isRequired={true}>
-        <Radio id="radio1" value="apple" text="Apple" />
-        <Radio id="radio2" value="orange" text="Orange" />
-        <Radio id="radio3" value="banana" text="Banana" />
-      </RadioGroup>,
-    );
-
-    const radioEls = getAllByRole('radio');
-    expect(radioEls.length).toBe(3);
-
-    for (const radioEl of radioEls) {
-      expect(radioEl).toBeRequired();
-    }
-  });
-});
+import { within } from '@testing-library/dom';
+import userEvent from '@testing-library/user-event';
+
+import RadioGroup from './RadioGroup';
+import Radio from '@components/Radio';
+
+interface RadioType {
+  value: string;
+  text: string;
+}
+
+describe('RadioGroup', () => {
+  const radios: Record<string, RadioType> = {
+    radio1: { value: 'apple', text: 'Apple' },
+    radio2: { value: 'orange', text: 'Orange' },
+    radio3: { value: 'banana', text: 'Banana' },
+  };
+
+  it('Renders and reacts to clicks', async () => {
+    const onChange = jest.fn();
+    const user = userEvent.setup();
+
+    const { getByRole } = render(
+      <RadioGroup name="fruit" onChange={onChange}>
+        <Radio id="radio1" value="apple" text="Apple" />
+        <Radio id="radio2" value="orange" text="Orange" />
+        <Radio id="radio3" value="banana" text="Banana" />
+      </RadioGroup>,
+    );
+
+    const radioGroupEl = getByRole('radiogroup');
+    const radioEls = within(radioGroupEl).queryAllByRole('radio');
+    expect(radioEls.length).toBe(3);
+
+    for (const radioEl of radioEls) {
+      const id = radioEl.id;
+      const radioProps = radios[id];
+
+      expect(radioEl).not.toHaveAttribute('checked');
+      expect(radioEl).toHaveAttribute('name', 'fruit');
+      expect(radioEl).toHaveAttribute('value', radioProps.value);
+      expect(radioEl).not.toHaveAttribute('disabled');
+      expect(radioEl).not.toHaveAttribute('required');
+    }
+
+    for (const radioEl of radioEls) {
+      await user.click(radioEl);
+      const value = (radioEl as HTMLInputElement).value;
+      expect(onChange).toHaveBeenCalledWith(value);
+
+      const el = document.querySelector(
+        `input[value="${value}"]`,
+      ) as HTMLInputElement;
+      expect(el?.checked).toBe(true);
+      expect(document.querySelectorAll('input:checked').length).toBe(1);
+    }
+  });
+
+  it('Renders with the initial state', () => {
+    const onChange = jest.fn();
+
+    const { getAllByRole } = render(
+      <RadioGroup name="fruit" onChange={onChange} initialState="orange">
+        <Radio id="radio1" value="apple" text="Apple" />
+        <Radio id="radio2" value="orange" text="Orange" />
+        <Radio id="radio3" value="banana" text="Banana" />
+      </RadioGroup>,
+    );
+
+    const el = getAllByRole('radio')[1] as HTMLInputElement;
+    expect(el?.checked).toBe(true);
+    expect(document.querySelectorAll('input:checked').length).toBe(1);
+  });
+
+  it('Renders with custom styles', () => {
+    const onChange = jest.fn();
+
+    const { getByRole } = render(
+      <RadioGroup
+        name="fruit"
+        onChange={onChange}
+        initialState="orange"
+        css={{ backgroundColor: 'blue' }}>
+        <Radio id="radio1" value="apple" text="Apple" />
+        <Radio id="radio2" value="orange" text="Orange" />
+        <Radio id="radio3" value="banana" text="Banana" />
+      </RadioGroup>,
+    );
+
+    const radioGroupEl = getByRole('radiogroup');
+    expect(radioGroupEl).toHaveStyleRule('background-color', 'blue');
+  });
+
+  it('Renders with the "required" attribute', () => {
+    const onChange = jest.fn();
+
+    const { getAllByRole } = render(
+      <RadioGroup
+        name="fruit"
+        onChange={onChange}
+        initialState="orange"
+        isRequired={true}>
+        <Radio id="radio1" value="apple" text="Apple" />
+        <Radio id="radio2" value="orange" text="Orange" />
+        <Radio id="radio3" value="banana" text="Banana" />
+      </RadioGroup>,
+    );
+
+    const radioEls = getAllByRole('radio');
+    expect(radioEls.length).toBe(3);
+
+    for (const radioEl of radioEls) {
+      expect(radioEl).toBeRequired();
+    }
+  });
+});

package/src/components/RadioGroup/RadioGroup.stories.tsx

@@ -1,84 +1,84 @@
-import { Fragment } from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-
-import Typography from '@components/Typography';
-import Radio from '@components/Radio';
-
-import RadioGroup from './RadioGroup';
-
-type Args = Parameters<typeof RadioGroup>[0];
-
-export default {
-  title: 'Components/Radio Buttons',
-  component: RadioGroup,
-  argTypes: {
-    className: {
-      control: {
-        disable: true,
-      },
-    },
-    initialState: {
-      control: {
-        disable: true,
-      },
-    },
-    control: {
-      control: {
-        disable: true,
-      },
-    },
-  },
-  parameters: {
-    docs: {
-      source: {
-        type: 'code',
-      },
-    },
-  },
-  args: {
-    onChange() {
-      /* no-op */
-    },
-  },
-} as Meta<typeof RadioGroup>;
-
-export const HorizontalRadioGroupStories: StoryObj<typeof RadioGroup> = (
-  args: Args,
-) => (
-  <Fragment>
-    <Typography variant="h4">Horizontal Radio Group</Typography>
-    <RadioGroup {...args} css={{ marginTop: '10px' }}>
-      <Radio id="radio1" value="apple" text="Apple" />
-      <Radio id="radio2" value="orange" text="Orange" />
-      <Radio id="radio3" value="banana" text="Banana" isDisabled={true} />
-    </RadioGroup>
-  </Fragment>
-);
-HorizontalRadioGroupStories.args = {
-  name: 'fruit',
-};
-HorizontalRadioGroupStories.storyName = 'Horizontal Radio Group';
-
-export const VerticalRadioGroupStories: StoryObj<typeof RadioGroup> = (
-  args: Args,
-) => (
-  <Fragment>
-    <Typography variant="h4">Vertical Radio Group</Typography>
-    <RadioGroup
-      {...args}
-      css={{
-        marginTop: '10px',
-        [`> label`]: {
-          display: 'flex',
-        },
-      }}>
-      <Radio id="radio21" value="apricot" text="Apricot" />
-      <Radio id="radio22" value="avocado" text="Avocado" />
-      <Radio id="radio23" value="cherry" text="Cherry" isDisabled={true} />
-    </RadioGroup>
-  </Fragment>
-);
-VerticalRadioGroupStories.args = {
-  name: 'fruit',
-};
-VerticalRadioGroupStories.storyName = 'Vertical Radio Group';
+import { Fragment } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Typography from '@components/Typography';
+import Radio from '@components/Radio';
+
+import RadioGroup from './RadioGroup';
+
+type Args = Parameters<typeof RadioGroup>[0];
+
+export default {
+  title: 'Components/Radio Buttons',
+  component: RadioGroup,
+  argTypes: {
+    className: {
+      control: {
+        disable: true,
+      },
+    },
+    initialState: {
+      control: {
+        disable: true,
+      },
+    },
+    control: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+  args: {
+    onChange() {
+      /* no-op */
+    },
+  },
+} as Meta<typeof RadioGroup>;
+
+export const HorizontalRadioGroupStories: StoryObj<typeof RadioGroup> = (
+  args: Args,
+) => (
+  <Fragment>
+    <Typography variant="h4">Horizontal Radio Group</Typography>
+    <RadioGroup {...args} css={{ marginTop: '10px' }}>
+      <Radio id="radio1" value="apple" text="Apple" />
+      <Radio id="radio2" value="orange" text="Orange" />
+      <Radio id="radio3" value="banana" text="Banana" isDisabled={true} />
+    </RadioGroup>
+  </Fragment>
+);
+HorizontalRadioGroupStories.args = {
+  name: 'fruit',
+};
+HorizontalRadioGroupStories.storyName = 'Horizontal Radio Group';
+
+export const VerticalRadioGroupStories: StoryObj<typeof RadioGroup> = (
+  args: Args,
+) => (
+  <Fragment>
+    <Typography variant="h4">Vertical Radio Group</Typography>
+    <RadioGroup
+      {...args}
+      css={{
+        marginTop: '10px',
+        [`> label`]: {
+          display: 'flex',
+        },
+      }}>
+      <Radio id="radio21" value="apricot" text="Apricot" />
+      <Radio id="radio22" value="avocado" text="Avocado" />
+      <Radio id="radio23" value="cherry" text="Cherry" isDisabled={true} />
+    </RadioGroup>
+  </Fragment>
+);
+VerticalRadioGroupStories.args = {
+  name: 'fruit',
+};
+VerticalRadioGroupStories.storyName = 'Vertical Radio Group';