@ssa-ui-kit/core 0.0.21-alpha → 0.0.22-alpha

package/src/components/AccordionGroup/types.ts

@@ -1,60 +1,60 @@
-import { SerializedStyles } from '@emotion/react';
-import { AriaAttributes } from 'react';
-
-export type AccordionSize = 'empty' | 'small' | 'medium' | 'large';
-
-export type SizeStyles = {
-  [K in AccordionSize]: SerializedStyles;
-};
-
-type AccordionGroupChildren = React.ReactElement<
-  React.PropsWithChildren<AccordionViewProps>
->;
-
-export interface AccordionGroupProps {
-  id?: string;
-  children: AccordionGroupChildren | AccordionGroupChildren[];
-  size?: AccordionSize;
-  accordionsStayOpen?: boolean;
-  className?: string;
-}
-
-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;
-  } & Record<string, any>;
-
-export interface AccordionViewProps extends AccordionProps {
-  ariaControls?: string;
-  isOpened?: boolean;
-  isHidden?: boolean;
-  title: string;
-  onClick?: () => void;
-  children?: React.ReactNode;
-  contentProps?: Record<string, any>;
-}
-
-export interface IAccordionGroupContext {
-  openedAccordions: Array<AccordionProps> | [];
-  stayOpen: boolean;
-  setOpenedAccordions: (accordions: Array<AccordionProps>) => void;
-  toggleOpenedAccordion: (accordion: AccordionProps) => void;
-  setStayOpen: (isStayOpen: boolean) => void;
-}
+import { SerializedStyles } from '@emotion/react';
+import { AriaAttributes } from 'react';
+
+export type AccordionSize = 'empty' | 'small' | 'medium' | 'large';
+
+export type SizeStyles = {
+  [K in AccordionSize]: SerializedStyles;
+};
+
+type AccordionGroupChildren = React.ReactElement<
+  React.PropsWithChildren<AccordionViewProps>
+>;
+
+export interface AccordionGroupProps {
+  id?: string;
+  children: AccordionGroupChildren | AccordionGroupChildren[];
+  size?: AccordionSize;
+  accordionsStayOpen?: boolean;
+  className?: string;
+}
+
+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;
+  } & Record<string, any>;
+
+export interface AccordionViewProps extends AccordionProps {
+  ariaControls?: string;
+  isOpened?: boolean;
+  isHidden?: boolean;
+  title: string;
+  onClick?: () => void;
+  children?: React.ReactNode;
+  contentProps?: Record<string, any>;
+}
+
+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

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

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

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

@@ -1,113 +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');
-  });
-});
+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');
+  });
+});