@ssa-ui-kit/core 0.0.1-alpha

package/src/components/AccordionGroup/AccordionTitle.tsx

@@ -0,0 +1,39 @@
+import { Fragment } from 'react';
+import CardHeaderBase from '@components/CardHeader/CardHeaderBase';
+import { AccordionProps } from './types';
+import { useTheme } from '@emotion/react';
+import Icon from '@components/Icon';
+import { createTitleStyles } from './styles';
+
+const CardHeaderBaseButton = CardHeaderBase.withComponent('button');
+
+export const AccordionTitle: AccordionProps['renderTitle'] = ({
+  title,
+  size = 'empty',
+  id,
+  isOpened,
+  ariaControls,
+  onClick,
+}) => {
+  const theme = useTheme();
+  const styles = createTitleStyles(theme, isOpened);
+  return (
+    <CardHeaderBaseButton
+      type="button"
+      data-testid="accordion-title"
+      css={styles[size]}
+      id={`${id}`}
+      aria-expanded={isOpened}
+      aria-controls={ariaControls}
+      onClick={() => {
+        if (typeof onClick === 'function') {
+          onClick();
+        }
+      }}>
+      <Fragment>
+        {title}
+        {isOpened ? <Icon name="carrot-down" /> : <Icon name="carrot-up" />}
+      </Fragment>
+    </CardHeaderBaseButton>
+  );
+};

package/src/components/AccordionGroup/index.ts

@@ -0,0 +1,8 @@
+export { AccordionGroup } from './AccordionGroup';
+export { AccordionContent } from './AccordionContent';
+export {
+  AccordionGroupContext,
+  AccordionGroupContextProvider,
+} from './AccordionContext';
+export { AccordionTitle } from './AccordionTitle';
+export { Accordion } from './Accordion';

package/src/components/AccordionGroup/stories/AccordionGroup.stories.tsx

@@ -0,0 +1,107 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { AccordionGroup } from '../index';
+import { AccordionGroupDecorator } from './helpers';
+import { css, useTheme } from '@emotion/react';
+import { AccordionTemplate } from './helpers';
+
+type Args = StoryObj<typeof AccordionGroup>;
+
+export default {
+  title: 'Components/AccordionGroup',
+  component: AccordionGroup,
+  parameters: {
+    docs: {
+      description: {
+        component:
+          'An AccordionGroup is a container that allows users to toggle the visibility of related content on a page',
+      },
+    },
+  },
+  decorators: [AccordionGroupDecorator],
+  argTypes: {},
+} as Meta<typeof AccordionGroup>;
+
+const StoryTemplate: Args = {
+  render: ({ ...args }) => <AccordionTemplate {...(args as any)} />,
+};
+
+export const Large = {
+  ...StoryTemplate,
+  args: {
+    size: 'large',
+  },
+};
+
+export const Medium = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="medium"
+      css={css`
+        width: 340px;
+        border-radius: 5px;
+        border: 1px solid ${theme.colors.greyDropdownMain};
+      `}
+    />
+  );
+};
+
+export const Small = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="small"
+      css={css`
+        width: 240px;
+        border-radius: 0;
+        background: linear-gradient(
+          108deg,
+          ${theme.colors.greyDarker} 0%,
+          ${theme.colors.greyDark} 100%
+        );
+      `}
+    />
+  );
+};
+
+export const LargeWithOnlySingleOpened = {
+  ...StoryTemplate,
+  args: {
+    size: 'large',
+    accordionsStayOpen: false,
+  },
+};
+
+export const MediumWithOnlySingleOpened = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="medium"
+      accordionsStayOpen={false}
+      css={css`
+        width: 340px;
+        border-radius: 5px;
+        border: 1px solid ${theme.colors.greyDropdownMain};
+      `}
+    />
+  );
+};
+
+export const SmallWithOnlySingleOpened = () => {
+  const theme = useTheme();
+  return (
+    <AccordionTemplate
+      size="small"
+      accordionsStayOpen={false}
+      css={css`
+        width: 240px;
+        border-radius: 0;
+        background: linear-gradient(
+          108deg,
+          ${theme.colors.greyDarker} 0%,
+          ${theme.colors.greyDark} 100%
+        );
+      `}
+    />
+  );
+};

package/src/components/AccordionGroup/stories/helpers.tsx

@@ -0,0 +1,86 @@
+import React from 'react';
+import { DecoratorFunction } from '@storybook/types';
+import { AccordionGroupContextProvider } from '../AccordionContext';
+import Typography from '@components/Typography';
+import {
+  Accordion,
+  AccordionTitle,
+  AccordionGroup,
+  AccordionContent,
+} from '@components/AccordionGroup';
+import { AccordionGroupProps } from '../types';
+
+type Args = Parameters<typeof AccordionGroup>[0];
+
+export const AccordionGroupDecorator: DecoratorFunction<
+  {
+    component: typeof AccordionGroup;
+    storyResult: React.ReactElement;
+    canvasElement: unknown;
+  },
+  Args
+> = (Story, { args }) => {
+  return (
+    <AccordionGroupContextProvider>
+      <Story {...args} />
+    </AccordionGroupContextProvider>
+  );
+};
+
+export const AccordionTemplate = (
+  args: Pick<AccordionGroupProps, 'size' | 'accordionsStayOpen'>,
+) => (
+  <AccordionGroup {...args}>
+    <Accordion
+      id="first"
+      title="Basic"
+      ariaControls="first-panel"
+      renderContent={(props) => (
+        <AccordionContent {...props}>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </AccordionContent>
+      )}
+      renderTitle={AccordionTitle}
+    />
+    <Accordion
+      id="second"
+      title="Advanced"
+      isOpened
+      ariaControls="second-panel"
+      renderContent={(props) => (
+        <AccordionContent {...props}>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </AccordionContent>
+      )}
+      renderTitle={AccordionTitle}
+    />
+    <Accordion
+      id="third"
+      title="Indicator"
+      ariaControls="third-panel"
+      renderContent={(props) => (
+        <AccordionContent {...props}>
+          <Typography>
+            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris
+            eleifend, dui in commodo porttitor, neque metus lobortis sem, at
+            suscipit arcu ligula non enim.
+          </Typography>
+        </AccordionContent>
+      )}
+      renderTitle={AccordionTitle}
+    />
+  </AccordionGroup>
+);

package/src/components/AccordionGroup/styles.ts

@@ -0,0 +1,120 @@
+import { css, Theme } from '@emotion/react';
+
+export const wrapperStyles = {
+  empty: css``,
+  small: css`
+    background: none;
+    border-radius: 0;
+    box-shadow: none;
+  `,
+  medium: css`
+    border-radius: 0;
+    box-shadow: none;
+  `,
+  large: css`
+    margin-bottom: 25px;
+    min-height: 70px;
+    border-radius: 20px;
+    padding: 0;
+    &:last-child: {
+      margin-bottom: 0;
+    }
+  `,
+};
+
+export const baseTitleStyles = css`
+  user-select: none;
+  align-items: center;
+  cursor: pointer;
+  border: none;
+`;
+
+export const createTitleStyles = (theme: Theme, isActive?: boolean) => ({
+  empty: css`
+    ${baseTitleStyles}
+  `,
+  small: css`
+    ${baseTitleStyles}
+    color: ${theme.colors.white80};
+    margin-bottom: 0;
+    height: 20px;
+    font-size: 16px;
+    font-weight: 500;
+    & svg {
+      width: 16px;
+      height: 16px;
+      & path {
+        stroke: ${theme.colors.greyArrowSidebar};
+        stroke-width: 1.6px;
+      }
+    }
+  `,
+  medium: css`
+    ${baseTitleStyles}
+    color: ${theme.colors.greyDropdownText};
+    margin-bottom: 0;
+    height: 40px;
+    font-weight: 500;
+    font-size: 14px;
+    padding: 11px 22px 9px 17px;
+    border: 1px solid ${theme.colors.greyDropdownMain};
+    border-radius: 5px;
+    & svg {
+      width: 16px;
+      height: 8px;
+      & path {
+        stroke: ${theme.colors.greyDropdownText};
+        stroke-width: 1.2px;
+      }
+    }
+  `,
+  large: css`
+    ${baseTitleStyles}
+    margin-bottom: 0;
+    height: 70px;
+    font-weight: 700;
+    font-size: 20px;
+    padding: 23px 22px 23px 30px;
+    background: ${isActive ? theme.colors.greyLighter : 'none'};
+    border-top-left-radius: 20px;
+    border-top-right-radius: 20px;
+    & svg {
+      width: 20px;
+      height: 10px;
+      & path {
+        stroke: ${theme.colors.greyDarker};
+        stroke-width: 1.2px;
+      }
+    }
+  `,
+});
+
+export const createBaseContentStyles = (isActive?: boolean) => css`
+  flex-direction: column;
+  align-self: flex-start;
+  height: ${isActive ? 'auto' : 0};
+  max-height: ${isActive ? 'initial' : 0};
+  overflow: ${isActive ? 'visible' : 'hidden'};
+`;
+
+export const createContentStyles = (theme: Theme, isActive?: boolean) => ({
+  empty: css`
+    ${createBaseContentStyles(isActive)};
+  `,
+  small: css`
+    ${createBaseContentStyles(isActive)};
+    color: ${theme.colors.white80};
+    & p {
+      color: ${theme.colors.white80};
+      margin: 15px 0;
+    }
+  `,
+  medium: css`
+    ${createBaseContentStyles(isActive)};
+    padding: ${isActive ? '18px 8px 23px 8px' : 0};
+  `,
+  large: css`
+    ${createBaseContentStyles(isActive)};
+    padding: ${isActive ? '19px 30px 23px 30px' : 0};
+  `,
+});

package/src/components/AccordionGroup/types.ts

@@ -0,0 +1,54 @@
+import { SerializedStyles } from '@emotion/react';
+import { AriaAttributes } from 'react';
+
+export type AccordionSize = 'empty' | 'small' | 'medium' | 'large';
+
+export type SizeStyles = {
+  [K in AccordionSize]: SerializedStyles;
+};
+
+export interface AccordionGroupProps {
+  id?: string;
+  children: React.ReactElement<React.PropsWithChildren<AccordionViewProps>>[];
+  size?: AccordionSize;
+  accordionsStayOpen?: boolean;
+}
+
+export interface AccordionProps {
+  id: number | string;
+  size?: AccordionSize;
+  renderTitle: (
+    data: RenderContentProps & {
+      title: string;
+      ariaControls?: string;
+      onClick?: () => void;
+    },
+  ) => React.ReactNode;
+  renderContent: (accordion: RenderContentProps) => React.ReactNode;
+  as?: React.ElementType;
+  className?: string;
+}
+
+export type RenderContentProps = Pick<AccordionProps, 'id' | 'size'> &
+  Pick<AriaAttributes, 'aria-labelledby'> & {
+    isOpened?: boolean;
+    as?: React.ElementType;
+    className?: string;
+  };
+
+export interface AccordionViewProps extends AccordionProps {
+  ariaControls?: string;
+  isOpened?: boolean;
+  isHidden?: boolean;
+  title: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+}
+
+export interface IAccordionGroupContext {
+  openedAccordions: Array<AccordionProps> | [];
+  stayOpen: boolean;
+  setOpenedAccordions: (accordions: Array<AccordionProps>) => void;
+  toggleOpenedAccordion: (accordion: AccordionProps) => void;
+  setStayOpen: (isStayOpen: boolean) => void;
+}

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,15 @@
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const Avatar = styled.div<{ size: number; image: string } & CommonProps>`
+  border-radius: 100px;
+
+  overflow: hidden;
+
+  width: ${({ size }) => size}px;
+  height: ${({ size }) => size}px;
+
+  background: ${({ image }) => `url(${image})`} center no-repeat;
+`;
+
+export default Avatar;

package/src/components/Avatar/index.ts

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

package/src/components/Badge/Badge.spec.tsx

@@ -0,0 +1,113 @@
+import { screen } from '../../../customTest';
+import Badge from '@components/Badge';
+import theme from '@themes/main';
+import React from 'react';
+
+describe('Badge', () => {
+  it('Render purple if no color set', () => {
+    render(<Badge size="small">small</Badge>);
+
+    const badge = screen.getByText(/small/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.purple);
+  });
+
+  it('Render small size', () => {
+    render(
+      <Badge color="purple" size="small">
+        small
+      </Badge>,
+    );
+
+    const badge = screen.getByText(/small/i);
+
+    expect(badge).toHaveStyle('height: 18px');
+  });
+
+  it('Render medium size', () => {
+    render(<Badge color="purple">medium</Badge>);
+
+    const badge = screen.getByText(/medium/i);
+
+    expect(badge).toHaveStyle('height: 24px');
+  });
+
+  it('Render large size', () => {
+    render(
+      <Badge color="purple" size="large">
+        large
+      </Badge>,
+    );
+
+    const badge = screen.getByText(/large/i);
+
+    expect(badge).toHaveStyle('height: 32px');
+  });
+
+  it('Render with color pink', () => {
+    render(<Badge color="pink">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.pink);
+  });
+
+  it('Render with color yellow', () => {
+    render(<Badge color="yellow">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.yellow);
+  });
+
+  it('Render with color green', () => {
+    render(<Badge color="green">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.green);
+  });
+
+  it('Render with color turquoise', () => {
+    render(<Badge color="turquoise">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.turquoise);
+  });
+
+  it('Render with color purple', () => {
+    render(<Badge color="purple">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.purple);
+  });
+
+  it('Render with color blueLight', () => {
+    render(<Badge color="blueLight">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.blueLight);
+  });
+
+  it('Render with color blue', () => {
+    render(<Badge color="blue">Badge</Badge>);
+
+    const badge = screen.getByText(/badge/i);
+
+    expect(badge).toHaveStyleRule('background-color', theme.colors.blue);
+  });
+
+  it('Renders with ref', () => {
+    const ref = React.createRef<HTMLDivElement>();
+    render(
+      <Badge ref={ref} color="blue">
+        Badge
+      </Badge>,
+    );
+
+    expect(ref.current?.textContent).toBe('Badge');
+  });
+});

package/src/components/Badge/Badge.stories.tsx

@@ -0,0 +1,156 @@
+import React from 'react';
+import type { Meta } from '@storybook/react';
+import { useTheme } from '@emotion/react';
+import { HeaderTitle, GridWrapper, colors, sizes, icons } from './helpers';
+
+import Badge from './index';
+import Icon from '@components/Icon';
+
+export default {
+  title: 'Components/Badge',
+  component: Badge,
+  parameters: {
+    docs: {
+      description: {
+        component: 'Badge is for informing users about the status of an item.',
+      },
+    },
+  },
+  argTypes: {
+    color: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: [
+        'pink',
+        'yellow',
+        'yellowWarm',
+        'green',
+        'turquoise',
+        'purple',
+        'blueLight',
+        'blue',
+      ],
+      control: {
+        type: 'select',
+      },
+    },
+    size: {
+      table: {
+        type: {
+          summary: 'string',
+        },
+      },
+      options: ['small', 'medium', 'large'],
+      control: {
+        type: 'inline-radio',
+      },
+    },
+    children: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {
+          summary: 'string | element',
+        },
+      },
+    },
+  },
+  args: {
+    size: 'medium',
+    children: 'badge',
+  },
+} as Meta<typeof Badge>;
+
+export const Default = {};
+
+export const AllStates = () => (
+  <GridWrapper>
+    <HeaderTitle>Color</HeaderTitle>
+    <HeaderTitle>Small</HeaderTitle>
+    <HeaderTitle>Medium</HeaderTitle>
+    <HeaderTitle>Large</HeaderTitle>
+    {colors.map((color) => (
+      <React.Fragment key={color}>
+        <HeaderTitle css={{ width: 80 }}>{color}</HeaderTitle>
+        {sizes.map((size) => {
+          return (
+            <Badge color={color} size={size} key={color + size}>
+              badge
+            </Badge>
+          );
+        })}
+      </React.Fragment>
+    ))}
+  </GridWrapper>
+);
+
+AllStates.args = {
+  name: 'All States',
+};
+
+AllStates.argTypes = {
+  color: {
+    control: false,
+  },
+  size: {
+    control: false,
+  },
+  children: {
+    control: false,
+  },
+};
+
+export const WithIcon = () => {
+  const theme = useTheme();
+  return (
+    <React.Fragment>
+      {icons.map((iconItem, index) => (
+        <GridWrapper key={index} css={{ marginBottom: '20px' }}>
+          <HeaderTitle css={{ width: 80 }}>{iconItem.icon}</HeaderTitle>
+          <Badge
+            color={iconItem.color}
+            size="small"
+            css={{
+              display: 'flex',
+              height: 'auto',
+              padding: '5px',
+              borderRadius: '6px',
+              boxShadow: '-4px 12px 14px 0px #DAE1E1',
+
+              [`${theme.mediaQueries.md}`]: {
+                padding: '11px',
+                borderRadius: '12px',
+
+                [`> svg`]: {
+                  width: '20px',
+                  height: '20px',
+                },
+              },
+            }}>
+            <Icon name={iconItem.icon} color={theme.colors.white} size={14} />
+          </Badge>
+        </GridWrapper>
+      ))}
+    </React.Fragment>
+  );
+};
+
+WithIcon.args = {
+  name: 'With Icon',
+};
+
+WithIcon.argTypes = {
+  color: {
+    control: false,
+  },
+  size: {
+    control: false,
+  },
+  children: {
+    control: false,
+  },
+};