@ssa-ui-kit/core 0.0.1-alpha

package/src/components/ProgressCircle/ProgressCircle.stories.tsx

@@ -0,0 +1,96 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { HeaderTitle, GridWrapper, colors } from '@components/Badge/helpers';
+
+import ProgressCircle from './index';
+
+type Args = Parameters<typeof ProgressCircle>[0];
+
+export default {
+  title: 'Components/Progress/Circle',
+  component: ProgressCircle,
+  argTypes: {
+    infoContent: {
+      table: {
+        type: {
+          summary: 'string | element',
+        },
+      },
+      type: { name: 'string' },
+    },
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+  },
+} as Meta<typeof ProgressCircle>;
+
+export const Default = {
+  args: {
+    max: 100,
+    currentValue: 50,
+    color: 'purple',
+    infoContent: '50% done',
+    size: 180,
+  },
+};
+
+const sizes = [80, 130, 180];
+
+export const SizesAndColors: StoryObj<typeof ProgressCircle> = (args: Args) => (
+  <GridWrapper>
+    <HeaderTitle>Color</HeaderTitle>
+    <HeaderTitle>Size: 80</HeaderTitle>
+    <HeaderTitle>Size: 130</HeaderTitle>
+    <HeaderTitle>Size: 180</HeaderTitle>
+    {colors.map((color) => (
+      <React.Fragment key={color}>
+        <HeaderTitle css={{ width: 80 }}>{color}</HeaderTitle>
+        {sizes.map((size) => (
+          <ProgressCircle
+            color={color}
+            size={size}
+            key={color + size}
+            {...args}
+          />
+        ))}
+      </React.Fragment>
+    ))}
+  </GridWrapper>
+);
+
+SizesAndColors.args = {
+  max: 100,
+  currentValue: 50,
+  infoContent: '50%',
+};
+
+SizesAndColors.argTypes = {
+  color: {
+    control: false,
+  },
+  size: {
+    control: false,
+  },
+  currentValue: {
+    control: false,
+  },
+  max: {
+    control: false,
+  },
+};

package/src/components/ProgressCircle/ProgressCircle.tsx

@@ -0,0 +1,60 @@
+import { useTheme } from '@emotion/react';
+import { ColorsKeys } from '@global-types/emotion';
+import { v4 as uuidv4 } from 'uuid';
+
+import { ProgressCircleBase } from './ProgressCircleBase';
+import { ProgressCircleOuter } from './ProgressCircleOuter';
+import { ProgressCircleInner } from './ProgressCircleInner';
+import { ProgressCircleProps } from './types';
+
+const ProgressCircle = ({
+  max,
+  currentValue,
+  color = 'green',
+  size = 160,
+  infoContent,
+}: ProgressCircleProps) => {
+  const theme = useTheme();
+
+  const gradientId = `gradient-${uuidv4()}`;
+  const barStroke = size / 10 / 2;
+  const currentPercentage = (currentValue / max) * 100;
+  const fullStroke = 2 * (22 / 7) * (size / 2 - barStroke);
+  const svgOffset =
+    fullStroke -
+    (((2 * 22) / 7) * (size / 2 - barStroke) * currentPercentage) / 100;
+  const colorName = `${color}Lighter` as ColorsKeys;
+  const colorValue = theme.colors[colorName] || theme.colors[color];
+
+  return (
+    <ProgressCircleBase
+      gradientId={gradientId}
+      role="progressbar"
+      fullStroke={fullStroke}
+      svgOffset={svgOffset}
+      color={color}
+      size={size}>
+      <ProgressCircleOuter size={size}>
+        <ProgressCircleInner size={size}>{infoContent}</ProgressCircleInner>
+      </ProgressCircleOuter>
+
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        version="1.1"
+        viewBox={`0 0 ${size} ${size}`}
+        preserveAspectRatio="xMinYMin slice"
+        width="100%"
+        height="100%">
+        <defs>
+          <linearGradient id={gradientId}>
+            <stop offset="0%" stopColor={theme.colors[color]} />
+            <stop offset="100%" stopColor={colorValue} />
+          </linearGradient>
+        </defs>
+        <circle cx={size / 2} cy={size / 2} r={size / 2 - barStroke} />
+      </svg>
+    </ProgressCircleBase>
+  );
+};
+
+export default ProgressCircle;

package/src/components/ProgressCircle/ProgressCircleBase.tsx

@@ -0,0 +1,45 @@
+import styled from '@emotion/styled';
+import { ColorsKeys } from '../..';
+
+export const ProgressCircleBase = styled.div<{
+  gradientId: string;
+  fullStroke: number;
+  svgOffset: number;
+  color: string;
+  size: number;
+}>`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+
+  position: relative;
+
+  svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+
+    filter: ${({ theme, color }) =>
+      `drop-shadow(3px 5px 10px ${
+        theme.colors[`${color}Lighter40` as ColorsKeys] ||
+        theme.colors[color as ColorsKeys]
+      })`};
+  }
+
+  circle {
+    fill: none;
+
+    stroke: url(#${({ gradientId }) => gradientId});
+    stroke-width: ${({ size }) => size / 10}px;
+    stroke-linecap: round;
+    stroke-dasharray: ${({ fullStroke }) => fullStroke};
+    stroke-dashoffset: ${({ fullStroke }) => fullStroke};
+
+    animation: ${({ gradientId }) => gradientId} 1s linear forwards;
+  }
+
+  @keyframes ${({ gradientId }) => gradientId} {
+    100% {
+      stroke-dashoffset: ${(props) => props.svgOffset};
+    }
+  }
+`;

package/src/components/ProgressCircle/ProgressCircleInner.tsx

@@ -0,0 +1,16 @@
+import styled from '@emotion/styled';
+
+export const ProgressCircleInner = styled.div<{
+  size: number;
+}>`
+  width: ${({ size }) => size - (size / 10) * 2}px;
+  height: ${({ size }) => size - (size / 10) * 2}px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+
+  background: #fff;
+`;

package/src/components/ProgressCircle/ProgressCircleOuter.tsx

@@ -0,0 +1,14 @@
+import styled from '@emotion/styled';
+
+export const ProgressCircleOuter = styled.div<{
+  size: number;
+}>`
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+
+  border-radius: 50%;
+
+  padding: ${({ size }) => size / 10}px;
+
+  background: ${({ theme }) => theme.colors.greyLighter};
+`;

package/src/components/ProgressCircle/index.ts

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

package/src/components/ProgressCircle/styles.ts

@@ -0,0 +1,20 @@
+import { css, Theme } from '@emotion/react';
+
+export const inner = css`
+  width: 120px;
+  height: 120px;
+
+  display: flex;
+  align-items: center;
+  justify-content: center;
+
+  border-radius: 50%;
+
+  background: #fff;
+`;
+
+export const label = (theme: Theme) => css`
+  font-weight: 600;
+
+  color: ${theme.colors.greyDarker60};
+`;

package/src/components/ProgressCircle/types.ts

@@ -0,0 +1,7 @@
+export interface ProgressCircleProps {
+  max: number;
+  currentValue: number;
+  size?: number;
+  color?: keyof MainColors;
+  infoContent?: React.ReactNode | string;
+}

package/src/components/ProgressLegend/ProgressLegend.tsx

@@ -0,0 +1,41 @@
+import { Children, isValidElement, cloneElement } from 'react';
+
+import { ProgressLegendProps } from './types';
+
+const ProgressLegend = ({
+  children,
+  vertical = false,
+}: ProgressLegendProps) => {
+  const mapPosition = {
+    horizontal: {
+      width: '100%',
+      height: `12px`,
+    },
+    vertical: {
+      height: '100%',
+      width: `35px`,
+    },
+  };
+
+  return (
+    <div
+      style={{
+        position: 'relative',
+        fontSize: '10px',
+        fontWeight: 700,
+        ...mapPosition[vertical ? 'vertical' : 'horizontal'],
+      }}>
+      {Children.map(children, (child) => {
+        // istanbul ignore else
+        if (isValidElement(child)) {
+          return cloneElement(child, {
+            ...child.props,
+            vertical,
+          });
+        }
+      })}
+    </div>
+  );
+};
+
+export default ProgressLegend;

package/src/components/ProgressLegend/index.ts

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

package/src/components/ProgressLegend/types.ts

@@ -0,0 +1,12 @@
+interface LabelItemProps {
+  value: number;
+  position?: string;
+  vertical?: boolean;
+}
+
+export interface ProgressLegendProps {
+  vertical?: boolean;
+  children:
+    | React.ReactElement<React.PropsWithChildren<LabelItemProps>>[]
+    | React.ReactElement<React.PropsWithChildren<LabelItemProps>>;
+}

package/src/components/ProgressLegendItem/ProgressLegendItem.tsx

@@ -0,0 +1,52 @@
+import { ProgressLegendItemProps } from './types';
+
+const ProgressLegendItem = ({
+  position = 'current',
+  percentage,
+  vertical = false,
+  children,
+}: ProgressLegendItemProps) => {
+  const mapPosition = {
+    horizontal: {
+      top: 0,
+      left:
+        position === 'start'
+          ? 0
+          : position === 'current'
+          ? `${percentage}%`
+          : '100%',
+      transform:
+        position === 'current' || position === 'end'
+          ? 'translateX(-50%)'
+          : 'none',
+    },
+    vertical: {
+      width: '100%',
+      top:
+        position === 'start'
+          ? '100%'
+          : position === 'current'
+          ? `${100 - percentage}%`
+          : 0,
+      transform:
+        position === 'start'
+          ? 'translateY(-100%)'
+          : position === 'current'
+          ? 'translateY(-50%)'
+          : 'none',
+    },
+  };
+  return (
+    <div
+      style={{
+        position: 'absolute',
+        display: 'block',
+        lineHeight: 1,
+        ...mapPosition[vertical ? 'vertical' : 'horizontal'],
+      }}>
+      {children}
+    </div>
+  );
+};
+
+export default ProgressLegendItem;

package/src/components/ProgressLegendItem/index.ts

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

package/src/components/ProgressLegendItem/types.ts

@@ -0,0 +1,6 @@
+export interface ProgressLegendItemProps {
+  children: React.ReactNode | string;
+  percentage: number;
+  position?: string;
+  vertical?: boolean;
+}

package/src/components/ProgressVertical/ProgressVertical.tsx

@@ -0,0 +1,23 @@
+import { Children, isValidElement, cloneElement } from 'react';
+
+import { ProgressVerticalProps } from './types';
+
+const ProgressVertical = ({ children }: ProgressVerticalProps) => {
+  return (
+    <div
+      style={{
+        display: 'flex',
+        height: '100%',
+      }}>
+      {Children.map(children, (child) => {
+        // istanbul ignore else
+        if (isValidElement(child)) {
+          return cloneElement(child, {
+            vertical: true,
+          });
+        }
+      })}
+    </div>
+  );
+};
+export default ProgressVertical;

package/src/components/ProgressVertical/index.ts

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

package/src/components/ProgressVertical/types.ts

@@ -0,0 +1,5 @@
+export interface ProgressVerticalProps {
+  children:
+    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>
+    | React.ReactElement<React.PropsWithChildren<{ vertical?: boolean }>>[];
+}

package/src/components/Radio/Radio.spec.tsx

@@ -0,0 +1,234 @@
+import { within } from '@testing-library/dom';
+
+import Radio from './Radio';
+
+describe('Radio', () => {
+  it('Renders in the checked state', async () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = true;
+    const text = 'Apple';
+
+    const { getByText } = render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+        text={text}
+      />,
+    );
+
+    const labelEl = getByText(text).closest(
+      'label',
+    ) as never as HTMLLabelElement;
+    const radioEl = within(labelEl).getByRole('radio');
+
+    expect(radioEl).toHaveAttribute('checked');
+    expect(radioEl).toHaveAttribute('id', idAttr);
+    expect(radioEl).toHaveAttribute('name', nameAttr);
+    expect(radioEl).toHaveAttribute('value', valueAttr);
+    expect(radioEl).not.toHaveAttribute('disabled');
+    expect(radioEl).not.toHaveAttribute('required');
+
+    await within(labelEl).findByTitle('Radio on');
+  });
+  it('Renders with default values', () => {
+    const valueAttr = 'apple';
+    const isChecked = true;
+    const text = 'Apple';
+
+    const { getByText } = render(
+      <Radio value={valueAttr} isChecked={isChecked} text={text} />,
+    );
+
+    const labelEl = getByText(text).closest(
+      'label',
+    ) as never as HTMLLabelElement;
+    const radioEl = within(labelEl).getByRole('radio');
+
+    expect(radioEl).toHaveAttribute('checked');
+    expect(radioEl).toHaveAttribute('id');
+    expect(radioEl).toHaveAttribute('name');
+    expect(radioEl).toHaveAttribute('value', valueAttr);
+    expect(radioEl).not.toHaveAttribute('disabled');
+    expect(radioEl).not.toHaveAttribute('required');
+
+    within(labelEl).getByTitle('Radio on');
+  });
+
+  it('Renders in the un-checked state', async () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = false;
+    const text = 'Apple';
+
+    const { getByText } = render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+        text={text}
+      />,
+    );
+
+    const labelEl = getByText(text).closest(
+      'label',
+    ) as never as HTMLLabelElement;
+    const radioEl = within(labelEl).getByRole('radio');
+
+    expect(radioEl).not.toHaveAttribute('checked');
+    expect(radioEl).toHaveAttribute('id', idAttr);
+    expect(radioEl).toHaveAttribute('name', nameAttr);
+    expect(radioEl).toHaveAttribute('value', valueAttr);
+    expect(radioEl).not.toHaveAttribute('disabled');
+    expect(radioEl).not.toHaveAttribute('required');
+
+    await within(labelEl).findByTitle('Circle');
+  });
+
+  it('Renders in the disabled checked state', async () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = true;
+    const isDisabled = true;
+    const text = 'Apple';
+
+    const { getByText } = render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+        isDisabled={isDisabled}
+        text={text}
+      />,
+    );
+
+    const labelEl = getByText(text).closest(
+      'label',
+    ) as never as HTMLLabelElement;
+    const radioEl = within(labelEl).getByRole('radio');
+
+    expect(radioEl).toHaveAttribute('checked');
+    expect(radioEl).toHaveAttribute('id', idAttr);
+    expect(radioEl).toHaveAttribute('name', nameAttr);
+    expect(radioEl).toHaveAttribute('value', valueAttr);
+    expect(radioEl).toHaveAttribute('disabled');
+    expect(radioEl).not.toHaveAttribute('required');
+
+    await within(labelEl).findByTitle('Radio on');
+  });
+
+  it('Renders in the disabled un-checked state', async () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = false;
+    const isDisabled = true;
+    const text = 'Apple';
+
+    const { getByText } = render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+        isDisabled={isDisabled}
+        text={text}
+      />,
+    );
+
+    const labelEl = getByText(text).closest(
+      'label',
+    ) as never as HTMLLabelElement;
+    const radioEl = within(labelEl).getByRole('radio');
+
+    expect(radioEl).not.toHaveAttribute('checked');
+    expect(radioEl).toHaveAttribute('id', idAttr);
+    expect(radioEl).toHaveAttribute('name', nameAttr);
+    expect(radioEl).toHaveAttribute('value', valueAttr);
+    expect(radioEl).toHaveAttribute('disabled');
+    expect(radioEl).not.toHaveAttribute('required');
+
+    await within(labelEl).findByTitle('Circle');
+  });
+
+  it('Renders without text', () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = true;
+
+    const { queryByTestId } = render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+      />,
+    );
+
+    const textEl = queryByTestId(idAttr);
+    expect(textEl).not.toBeInTheDocument();
+  });
+
+  it('Renders with the "required" attribute', async () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = false;
+    const isRequired = true;
+    const text = 'Apple';
+
+    const { getByText } = render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+        isRequired={isRequired}
+        text={text}
+      />,
+    );
+
+    const labelEl = getByText(text).closest(
+      'label',
+    ) as never as HTMLLabelElement;
+    const radioEl = within(labelEl).getByRole('radio');
+
+    expect(radioEl).not.toHaveAttribute('checked');
+    expect(radioEl).toHaveAttribute('id', idAttr);
+    expect(radioEl).toHaveAttribute('name', nameAttr);
+    expect(radioEl).toHaveAttribute('value', valueAttr);
+    expect(radioEl).not.toHaveAttribute('disabled');
+    expect(radioEl).toHaveAttribute('required');
+
+    await within(labelEl).findByTitle('Circle');
+  });
+
+  it('Renders with custom styles', () => {
+    const idAttr = 'apple-radio';
+    const nameAttr = 'fruit';
+    const valueAttr = 'apple';
+    const isChecked = false;
+
+    render(
+      <Radio
+        id={idAttr}
+        name={nameAttr}
+        value={valueAttr}
+        isChecked={isChecked}
+        css={{ backgroundColor: 'blue' }}
+      />,
+    );
+
+    const labelEl = document.getElementsByTagName('label')[0];
+    expect(labelEl).toBeInTheDocument();
+    expect(labelEl).toHaveStyleRule('background-color', 'blue');
+  });
+});