@ssa-ui-kit/core 0.0.1-alpha

package/src/components/Radio/Radio.stories.tsx

@@ -0,0 +1,52 @@
+import { Fragment } from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Typography from '@components/Typography';
+
+import Radio from './Radio';
+
+type Args = Parameters<typeof Radio>[0];
+
+export default {
+  title: 'Components/Radio Buttons/Radio',
+  component: Radio,
+  args: {
+    text: 'label',
+  },
+  argTypes: {
+    className: {
+      control: {
+        disable: true,
+      },
+    },
+    initialState: {
+      control: {
+        disable: true,
+      },
+    },
+    control: {
+      control: {
+        disable: true,
+      },
+    },
+  },
+  parameters: {
+    docs: {
+      source: {
+        type: 'code',
+      },
+    },
+  },
+} as Meta<typeof Radio>;
+
+export const Default: StoryObj<typeof Radio> = (args: Args) => (
+  <Fragment>
+    <Typography variant="h5">Standalone Radio</Typography>
+    <Radio {...args} />
+    <Typography variant="h5" css={{ marginTop: 10 }}>
+      Checked Radio
+    </Typography>
+    <Radio {...args} isChecked />
+  </Fragment>
+);
+Default.storyName = 'Radio';

package/src/components/Radio/Radio.tsx

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

package/src/components/Radio/RadioBase.tsx

@@ -0,0 +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;
+  }
+`;

package/src/components/Radio/index.ts

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

package/src/components/Radio/types.ts

@@ -0,0 +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;
+}

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

@@ -0,0 +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();
+    }
+  });
+});

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

@@ -0,0 +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';

package/src/components/RadioGroup/RadioGroup.tsx

@@ -0,0 +1,49 @@
+import { Children, isValidElement, cloneElement, useState } from 'react';
+
+import Radio from '@components/Radio';
+
+import { RadioGroupBase } from './RadioGroupBase';
+import { IRadioGroupProps } from './types';
+
+const RadioGroup = ({
+  name,
+  isRequired,
+  initialState,
+  onChange,
+  children,
+  className,
+}: IRadioGroupProps) => {
+  const [activeValue, setActiveValue] = useState(initialState);
+
+  const onRadioValueChange = (value: string) => {
+    setActiveValue(value);
+    onChange(value);
+  };
+
+  return (
+    <RadioGroupBase
+      role="radiogroup"
+      aria-required={isRequired}
+      className={className}>
+      {Children.map(children, (child) => {
+        /* istanbul ignore else*/
+        if (isValidElement(child) && child.type === Radio) {
+          const { id, value, isDisabled, text } = child.props;
+
+          return cloneElement(child, {
+            key: id,
+            name,
+            value,
+            isChecked: activeValue === value,
+            isDisabled,
+            isRequired,
+            text,
+            onChange: onRadioValueChange,
+          });
+        }
+      })}
+    </RadioGroupBase>
+  );
+};
+
+export default RadioGroup;

package/src/components/RadioGroup/RadioGroupBase.tsx

@@ -0,0 +1,3 @@
+import styled from '@emotion/styled';
+
+export const RadioGroupBase = styled.div``;

package/src/components/RadioGroup/index.ts

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

package/src/components/RadioGroup/types.ts

@@ -0,0 +1,10 @@
+import { IRadioProps } from '@components/Radio/types';
+
+export interface IRadioGroupProps {
+  name: string;
+  isRequired?: boolean;
+  initialState?: string;
+  className?: string;
+  onChange: (value: string) => void;
+  children: React.ReactElement<IRadioProps>[];
+}

package/src/components/ResponsiveImage/ResponsiveImage.spec.tsx

@@ -0,0 +1,43 @@
+import ResponsiveImage from './index';
+
+describe('ResponsiveImage', () => {
+  it('Renders with the required props', () => {
+    render(
+      <ResponsiveImage
+        srcSet="/img/steps/steps_64.png 64w, /img/steps/steps_48.png 48w"
+        sizes="(min-width: 1440px) 64px, 48px"
+        src="/img/steps/steps_48.png"
+        alt="Steps"
+      />,
+    );
+
+    const imageEl = document.getElementsByTagName('img')[0];
+    expect(imageEl).toBeInTheDocument();
+
+    expect(imageEl).toHaveAttribute(
+      'srcSet',
+      '/img/steps/steps_64.png 64w, /img/steps/steps_48.png 48w',
+    );
+    expect(imageEl).toHaveAttribute('sizes', '(min-width: 1440px) 64px, 48px');
+    expect(imageEl).toHaveAttribute('src', '/img/steps/steps_48.png');
+    expect(imageEl).toHaveAttribute('alt', 'Steps');
+  });
+
+  it('Renders with custom styles ', () => {
+    render(
+      <ResponsiveImage
+        srcSet="/img/steps/steps_64.png 64w, /img/steps/steps_48.png 48w"
+        sizes="(min-width: 1440px) 64px, 48px"
+        src="/img/steps/steps_48.png"
+        alt="Steps"
+        css={{
+          marginLeft: '10px',
+        }}
+      />,
+    );
+
+    const imageEl = document.getElementsByTagName('img')[0];
+    expect(imageEl).toBeInTheDocument();
+    expect(imageEl).toHaveStyle(`margin-left: 10px`);
+  });
+});

package/src/components/ResponsiveImage/ResponsiveImage.stories.tsx

@@ -0,0 +1,33 @@
+import { css } from '@emotion/react';
+import type { Meta, StoryObj } from '@storybook/react';
+import Typography from '@components/Typography';
+import ResponsiveImage from './index';
+
+export default {
+  title: 'Utility/ResponsiveImage',
+  component: ResponsiveImage,
+} as Meta<typeof ResponsiveImage>;
+
+export const Default: StoryObj<typeof ResponsiveImage> = () => {
+  return (
+    <div className="lostpixel-ignore">
+      <Typography variant="h6" gutter>
+        A simple wrapper over the{' '}
+        <span
+          css={(theme) => css`
+            font-family: monospace;
+            color: ${theme.colors.greyDarker60};
+          `}>{`<img />`}</span>{' '}
+        tag
+      </Typography>
+      <ResponsiveImage
+        srcSet="https://placehold.co/64x64 64w, https://placehold.co/48x48 48w"
+        sizes="(min-width: 1440px) 64px, 48px"
+        src="https://placehold.co/48x48"
+        alt="Steps"
+      />
+    </div>
+  );
+};
+
+Default.storyName = 'ResponsiveImage';

package/src/components/ResponsiveImage/ResponsiveImage.tsx

@@ -0,0 +1,14 @@
+import { IResponsiveImageProps } from './types';
+
+/**
+ * A simple wrapper over the `<img />` tag.
+ *
+ * Don't forget to adjust Device Pixel Ratio in DevTools
+ * when testing srcSet, and use Hard Reload to force the
+ * browser to load an image of another resolution.
+ * */
+const ResponsiveImage = ({ src, alt, ...props }: IResponsiveImageProps) => {
+  return <img src={src} alt={alt} {...props} />;
+};
+
+export default ResponsiveImage;

package/src/components/ResponsiveImage/index.tsx

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

package/src/components/ResponsiveImage/types.ts

@@ -0,0 +1,7 @@
+export interface IResponsiveImageProps {
+  src: string;
+  srcSet: string;
+  sizes: string;
+  alt: string;
+  className?: string;
+}

package/src/components/Step/Step.context.ts

@@ -0,0 +1,21 @@
+import * as React from 'react';
+
+export interface StepContextType {
+  index: number;
+  active: boolean;
+  completed: boolean;
+  disabled: boolean;
+}
+
+const StepContext = React.createContext<StepContextType>({
+  index: 0,
+  active: false,
+  completed: false,
+  disabled: false,
+});
+
+export function useStepContext(): StepContextType {
+  return React.useContext(StepContext);
+}
+
+export default StepContext;

package/src/components/Step/Step.tsx

@@ -0,0 +1,58 @@
+import { useMemo } from 'react';
+import { css } from '@emotion/react';
+
+import { useStepperContext } from '@components/Stepper';
+import StepConnector from '@components/StepConnector';
+
+import StepContext from './Step.context';
+
+const Step = ({
+  index = 0,
+  children,
+  Connector = StepConnector,
+}: {
+  index?: number;
+  children?: React.ReactElement<React.PropsWithChildren>;
+  Connector?: React.FC<{ completed: boolean; active: boolean }>;
+}) => {
+  const { activeStep, orientation, inverted } = useStepperContext();
+
+  let [active, completed, disabled] = [false, false, false];
+
+  if (activeStep === index) {
+    active = activeStep === index;
+  } else if (activeStep > index) {
+    completed = true;
+  } else if (activeStep < index) {
+    disabled = true;
+  }
+
+  const contextValue = useMemo(
+    () => ({ index, active, completed, disabled }),
+    [index, active, completed, disabled],
+  );
+
+  return (
+    <StepContext.Provider value={contextValue}>
+      {!inverted && orientation === 'vertical' && index !== 0 ? (
+        <Connector active={active} completed={completed} />
+      ) : null}
+
+      <div
+        css={css`
+          flex: 1 1 0%;
+          position: relative;
+        `}>
+        {orientation === 'horizontal' && index !== 0 ? (
+          <Connector active={active} completed={completed} />
+        ) : null}
+        {children}
+      </div>
+      {inverted && orientation === 'vertical' && index !== 0 && (
+        <Connector active={active} completed={completed} />
+      )}
+    </StepContext.Provider>
+  );
+};
+
+export default Step;

package/src/components/Step/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Step';
+export { default as StepContext, useStepContext } from './Step.context';

package/src/components/StepConnector/StepConnector.tsx

@@ -0,0 +1,34 @@
+import { css, useTheme } from '@emotion/react';
+
+import { useStepperContext } from '@components/Stepper';
+import { useStepContext } from '@components/Step';
+
+import {
+  StepConnectorLineVertical,
+  StepConnectorWrapper,
+  StepConnectorLine,
+} from './style';
+
+const StepConnector = () => {
+  const theme = useTheme();
+  const { orientation, color, inverted } = useStepperContext();
+  const { active, completed } = useStepContext();
+
+  const selectedColor = active || completed ? color : theme.colors.grey;
+
+  return orientation === 'vertical' ? (
+    <div
+      css={css`
+        flex: 1 1 auto;
+        margin-left: calc(12px - 1px);
+      `}>
+      <span css={StepConnectorLineVertical(selectedColor)}></span>
+    </div>
+  ) : (
+    <div css={StepConnectorWrapper(inverted)}>
+      <span css={StepConnectorLine(selectedColor)}></span>
+    </div>
+  );
+};
+
+export default StepConnector;

package/src/components/StepConnector/index.ts

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

package/src/components/StepConnector/style.ts

@@ -0,0 +1,24 @@
+import { css } from '@emotion/react';
+
+export const StepConnectorWrapper = (inverted?: boolean) => css`
+  position: absolute;
+  top: 10px;
+
+  left: calc(${inverted ? '50%' : '-50%'} + 16px);
+  right: calc(${inverted ? '-50%' : '50%'} + 16px);
+`;
+
+export const StepConnectorLineVertical = (color?: string) => css`
+  display: block;
+  border-color: ${color};
+  border-left-style: solid;
+  border-left-width: 2px;
+  min-height: 20px;
+`;
+
+export const StepConnectorLine = (color?: string) => css`
+  display: block;
+  border-color: ${color};
+  border-top-width: 2px;
+  border-top-style: solid;
+`;