@ssa-ui-kit/core 0.0.11-alpha → 0.0.13-alpha

package/src/components/Typography/Typography.tsx

@@ -1,52 +1,52 @@
-import { forwardRef } from 'react';
-import { css } from '@emotion/react';
-
-import { TypographyProps } from './types';
-import * as style from './styles';
-
-const variantsMapping = {
-  h1: 'h1',
-  h2: 'h2',
-  h3: 'h3',
-  h4: 'h4',
-  h5: 'h5',
-  h6: 'h6',
-  subtitle: 'h6',
-  body1: 'p',
-  body2: 'p',
-  body3: 'p',
-  caption: 'span',
-};
-
-const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(
-  {
-    children,
-    weight = 'regular',
-    variant = 'body1',
-    gutter = false,
-    color = 'rgba(43, 45, 49, 1)',
-    as,
-    ...props
-  },
-  ref,
-) {
-  const Component = as || variantsMapping[variant];
-
-  return (
-    <Component
-      ref={ref}
-      css={[
-        style[variant],
-        style[weight],
-        css`
-          color: ${color};
-        `,
-        gutter && style.gutter,
-      ]}
-      {...props}>
-      {children}
-    </Component>
-  );
-});
-
-export default Typography;
+import { forwardRef } from 'react';
+import { css } from '@emotion/react';
+
+import { TypographyProps } from './types';
+import * as style from './styles';
+
+const variantsMapping = {
+  h1: 'h1',
+  h2: 'h2',
+  h3: 'h3',
+  h4: 'h4',
+  h5: 'h5',
+  h6: 'h6',
+  subtitle: 'h6',
+  body1: 'p',
+  body2: 'p',
+  body3: 'p',
+  caption: 'span',
+};
+
+const Typography = forwardRef<HTMLElement, TypographyProps>(function Typography(
+  {
+    children,
+    weight = 'regular',
+    variant = 'body1',
+    gutter = false,
+    color = 'rgba(43, 45, 49, 1)',
+    as,
+    ...props
+  },
+  ref,
+) {
+  const Component = as || variantsMapping[variant];
+
+  return (
+    <Component
+      ref={ref}
+      css={[
+        style[variant],
+        style[weight],
+        css`
+          color: ${color};
+        `,
+        gutter && style.gutter,
+      ]}
+      {...props}>
+      {children}
+    </Component>
+  );
+});
+
+export default Typography;

package/src/components/Typography/index.ts

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

package/src/components/Typography/styles.ts

@@ -1,85 +1,85 @@
-import { css, Theme } from '@emotion/react';
-
-export const h1 = css`
-  font-size: 2.488rem; //39px
-  line-height: 3.375rem;
-`;
-export const h2 = (theme: Theme) => css`
-  font-size: 1.188rem; // 19px
-  line-height: 1.375rem; //26.23px;
-
-  ${theme.mediaQueries.md} {
-    font-size: 1.719rem; //27px
-  }
-  ${theme.mediaQueries.lg} {
-    font-size: 2.074rem; //33px
-    line-height: 2.813rem; // 45px
-  }
-`;
-export const h3 = (theme: Theme) => css`
-  font-size: 1.438rem; // 23px
-  line-height: 1.625rem;
-
-  ${theme.mediaQueries.lg} {
-    font-size: 1.728rem; //27px
-  }
-`;
-export const h4 = css`
-  font-size: 1.44rem; // 23px
-  line-height: 1.625rem;
-`;
-export const h5 = (theme: Theme) => css`
-  font-size: 1rem; //16px
-  line-height: 1.5rem;
-
-  ${theme.mediaQueries.md} {
-    font-size: 1.2rem; //19px
-  }
-`;
-export const h6 = css`
-  font-size: 1rem; // 16px
-  line-height: 1.375rem;
-`;
-export const subtitle = css`
-  font-size: 0.833rem; // 13.2px
-  line-height: 0.938rem;
-`;
-export const body1 = css`
-  font-size: 0.694rem; //11px
-  line-height: 0.938rem;
-`;
-export const body2 = css`
-  font-size: 0.579rem; //9px
-  line-height: 0.938rem;
-`;
-export const body3 = css`
-  font-size: 0.5rem; //8px
-  line-height: 0.938rem;
-`;
-export const caption = css`
-  display: block;
-  font-size: 0.481rem; //7.6px
-  line-height: 0.75rem;
-`;
-
-// font-weight variants
-export const lighter = css`
-  font-style: normal;
-  font-weight: 400;
-`;
-export const regular = css`
-  font-style: normal;
-  font-weight: 500;
-`;
-export const medium = css`
-  font-style: normal;
-  font-weight: 600;
-`;
-export const bold = css`
-  font-style: normal;
-  font-weight: 700;
-`;
-
-export const gutter = css`
-  margin-block-end: 1rem;
-`;
+import { css, Theme } from '@emotion/react';
+
+export const h1 = css`
+  font-size: 2.488rem; //39px
+  line-height: 3.375rem;
+`;
+export const h2 = (theme: Theme) => css`
+  font-size: 1.188rem; // 19px
+  line-height: 1.375rem; //26.23px;
+
+  ${theme.mediaQueries.md} {
+    font-size: 1.719rem; //27px
+  }
+  ${theme.mediaQueries.lg} {
+    font-size: 2.074rem; //33px
+    line-height: 2.813rem; // 45px
+  }
+`;
+export const h3 = (theme: Theme) => css`
+  font-size: 1.438rem; // 23px
+  line-height: 1.625rem;
+
+  ${theme.mediaQueries.lg} {
+    font-size: 1.728rem; //27px
+  }
+`;
+export const h4 = css`
+  font-size: 1.44rem; // 23px
+  line-height: 1.625rem;
+`;
+export const h5 = (theme: Theme) => css`
+  font-size: 1rem; //16px
+  line-height: 1.5rem;
+
+  ${theme.mediaQueries.md} {
+    font-size: 1.2rem; //19px
+  }
+`;
+export const h6 = css`
+  font-size: 1rem; // 16px
+  line-height: 1.375rem;
+`;
+export const subtitle = css`
+  font-size: 0.833rem; // 13.2px
+  line-height: 0.938rem;
+`;
+export const body1 = css`
+  font-size: 0.694rem; //11px
+  line-height: 0.938rem;
+`;
+export const body2 = css`
+  font-size: 0.579rem; //9px
+  line-height: 0.938rem;
+`;
+export const body3 = css`
+  font-size: 0.5rem; //8px
+  line-height: 0.938rem;
+`;
+export const caption = css`
+  display: block;
+  font-size: 0.481rem; //7.6px
+  line-height: 0.75rem;
+`;
+
+// font-weight variants
+export const lighter = css`
+  font-style: normal;
+  font-weight: 400;
+`;
+export const regular = css`
+  font-style: normal;
+  font-weight: 500;
+`;
+export const medium = css`
+  font-style: normal;
+  font-weight: 600;
+`;
+export const bold = css`
+  font-style: normal;
+  font-weight: 700;
+`;
+
+export const gutter = css`
+  margin-block-end: 1rem;
+`;

package/src/components/Typography/types.ts

@@ -1,22 +1,22 @@
-export interface TypographyProps {
-  variant?:
-    | 'h1'
-    | 'h2'
-    | 'h3'
-    | 'h4'
-    | 'h5'
-    | 'h6'
-    | 'subtitle'
-    | 'body1'
-    | 'body2'
-    | 'body3'
-    | 'caption';
-  weight?: 'lighter' | 'regular' | 'medium' | 'bold';
-  gutter?: boolean;
-  color?: string;
-  children: React.ReactNode;
-  as?: React.ElementType;
-  className?: string;
-  ref?: React.Ref<HTMLElement>;
-  id?: string;
-}
+export interface TypographyProps {
+  variant?:
+    | 'h1'
+    | 'h2'
+    | 'h3'
+    | 'h4'
+    | 'h5'
+    | 'h6'
+    | 'subtitle'
+    | 'body1'
+    | 'body2'
+    | 'body3'
+    | 'caption';
+  weight?: 'lighter' | 'regular' | 'medium' | 'bold';
+  gutter?: boolean;
+  color?: string;
+  children: React.ReactNode;
+  as?: React.ElementType;
+  className?: string;
+  ref?: React.Ref<HTMLElement>;
+  id?: string;
+}

package/src/components/Wrapper/Wrapper.spec.tsx

@@ -1,15 +1,15 @@
-import Wrapper from './Wrapper';
-
-describe('Style', () => {
-  it('outlineStyles', () => {
-    const { getByText } = render(
-      <Wrapper alignItems="baseline" direction="row">
-        element
-      </Wrapper>,
-    );
-    const el = getByText('element');
-
-    expect(el).toHaveStyleRule('align-items', `baseline`);
-    expect(el).toHaveStyleRule('flex-direction', `row`);
-  });
-});
+import Wrapper from './Wrapper';
+
+describe('Style', () => {
+  it('outlineStyles', () => {
+    const { getByText } = render(
+      <Wrapper alignItems="baseline" direction="row">
+        element
+      </Wrapper>,
+    );
+    const el = getByText('element');
+
+    expect(el).toHaveStyleRule('align-items', `baseline`);
+    expect(el).toHaveStyleRule('flex-direction', `row`);
+  });
+});

package/src/components/Wrapper/Wrapper.tsx

@@ -1,19 +1,19 @@
-import styled from '@emotion/styled';
-import { CommonProps } from '@global-types/emotion';
-
-const Wrapper = styled.div<
-  {
-    avatarSize?: number;
-    direction?: string;
-    alignItems?: string;
-  } & CommonProps
->`
-  display: flex;
-  align-items: ${({ alignItems }) => (alignItems ? alignItems : 'center')};
-
-  width: 100%;
-
-  flex-direction: ${({ direction }) => (direction ? direction : 'row')};
-`;
-
-export default Wrapper;
+import styled from '@emotion/styled';
+import { CommonProps } from '@global-types/emotion';
+
+const Wrapper = styled.div<
+  {
+    avatarSize?: number;
+    direction?: string;
+    alignItems?: string;
+  } & CommonProps
+>`
+  display: flex;
+  align-items: ${({ alignItems }) => (alignItems ? alignItems : 'center')};
+
+  width: 100%;
+
+  flex-direction: ${({ direction }) => (direction ? direction : 'row')};
+`;
+
+export default Wrapper;

package/src/components/Wrapper/index.ts

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

package/src/consts.ts

@@ -1,18 +1,18 @@
-export const SCREEN_SIZES = {
-  390: {
-    width: 390,
-    height: 844,
-  },
-  900: {
-    width: 900,
-    height: 1200,
-  },
-  1440: {
-    width: 1440,
-    height: 900,
-  },
-  1920: {
-    width: 1920,
-    height: 1080,
-  },
-};
+export const SCREEN_SIZES = {
+  390: {
+    width: 390,
+    height: 844,
+  },
+  900: {
+    width: 900,
+    height: 1200,
+  },
+  1440: {
+    width: 1440,
+    height: 900,
+  },
+  1920: {
+    width: 1920,
+    height: 1080,
+  },
+};

package/src/index.ts

@@ -1,94 +1,94 @@
-import './injectGlobal';
-export * from './types/global';
-
-import './types/global.d';
-import './types/emotion.d';
-
-export * from './types/emotion';
-export { default as mainTheme } from './themes/main';
-
-export * as globalStyles from './styles/global';
-export * as styleUtils from './styles/safari-focus-outline';
-
-export * from './components/AccordionGroup';
-export { default as Avatar } from './components/Avatar';
-export { default as Badge } from './components/Badge';
-export { default as Button } from './components/Button';
-export { default as Card } from './components/Card';
-export { default as CardBase } from './components/Card/CardBase';
-export { default as CardContent } from './components/CardContent';
-export { default as CardHeader } from './components/CardHeader';
-export { default as ColorPicker } from './components/ColorPicker';
-export { default as Checkbox } from './components/Checkbox';
-export * from './components/Checkbox';
-export { default as FormCheckbox } from './components/FormCheckbox';
-export * from './components/FormCheckbox';
-export { default as Dropdown } from './components/Dropdown';
-export { default as DropdownArrow } from './components/DropdownArrow';
-export { default as DropdownBase } from './components/DropdownBase';
-export { default as DropdownOption } from './components/DropdownOption';
-export { default as DropdownOptions } from './components/DropdownOptions';
-export { default as DropdownToggle } from './components/DropdownToggle';
-export type { IDropdownOption } from './components/DropdownOptions';
-export { default as Icon } from './components/Icon';
-export * from './components/Icon';
-export * from './components/Icon/types';
-export { default as Input } from './components/Input';
-export { default as Label } from './components/Label';
-export { default as Modal } from './components/Modal';
-export { default as ModalDismissButton } from './components/ModalDismissButton';
-export { default as ModalContent } from './components/ModalContent';
-export { default as ModalOpenButton } from './components/ModalOpenButton';
-export { default as ModalDialog } from './components/ModalDialog';
-export * from './components/Modal';
-export * from './components/Popover';
-export { default as MultipleDropdown } from './components/MultipleDropdown';
-export { default as MultipleDropdownNotification } from './components/MultipleDropdownNotification';
-export { default as MultipleDropdownOptions } from './components/MultipleDropdownOptions';
-export { default as Progress } from './components/Progress';
-export { default as ProgressBar } from './components/ProgressBar';
-export { default as ProgressCircle } from './components/ProgressCircle';
-export { default as ProgressLegend } from './components/ProgressLegend';
-export { default as ProgressLegendItem } from './components/ProgressLegendItem';
-export { default as ProgressVertical } from './components/ProgressVertical';
-export { default as Stepper } from './components/Stepper';
-export { default as Step } from './components/Step';
-export { default as StepConnector } from './components/StepConnector';
-export { default as StepLabel } from './components/StepLabel';
-export { default as Switch } from './components/Switch';
-export * from './components/Switch';
-export { default as Table } from './components/Table';
-export { default as TableHead } from './components/TableHead';
-export { default as TableRow } from './components/TableRow';
-export { default as TableCell } from './components/TableCell';
-export { default as TableBody } from './components/TableBody';
-export { default as Tooltip } from './components/Tooltip';
-export { default as TooltipTrigger } from './components/TooltipTrigger';
-export { default as TooltipContent } from './components/TooltipContent';
-export * from './components/Tooltip';
-export { default as TabBar } from './components/TabBar';
-export { default as Tab } from './components/Tab';
-export { default as LargeTab } from './components/LargeTab';
-export * from './components/TabBar';
-export { default as Tag } from './components/Tag';
-export * from './components/Tag';
-export { default as Textarea } from './components/Textarea';
-export * from './components/Textarea';
-export { default as TextField } from './components/TextField';
-export * from './components/TextField';
-export { default as Typography } from './components/Typography';
-export * from './components/Typography';
-export { default as Wrapper } from './components/Wrapper';
-export * from './components/Wrapper';
-export { default as Radio } from './components/Radio';
-export { default as RadioGroup } from './components/RadioGroup';
-export { default as FormRadioGroup } from './components/FormRadioGroup';
-export { default as ResponsiveImage } from './components/ResponsiveImage';
-export * from './components/ResponsiveImage';
-export { default as Form } from './components/Form';
-export { default as FormGroup } from './components/FormGroup';
-export { default as FormAction } from './components/FormAction';
-export { default as FormHelperText } from './components/FormHelperText';
-export { default as Indicator } from './components/Indicator';
-export * from './components/ButtonGroup';
-export { default as Link } from './components/Link';
+import './injectGlobal';
+export * from './types/global';
+
+import './types/global.d';
+import './types/emotion.d';
+
+export * from './types/emotion';
+export { default as mainTheme } from './themes/main';
+
+export * as globalStyles from './styles/global';
+export * as styleUtils from './styles/safari-focus-outline';
+
+export * from './components/AccordionGroup';
+export { default as Avatar } from './components/Avatar';
+export { default as Badge } from './components/Badge';
+export { default as Button } from './components/Button';
+export { default as Card } from './components/Card';
+export { default as CardBase } from './components/Card/CardBase';
+export { default as CardContent } from './components/CardContent';
+export { default as CardHeader } from './components/CardHeader';
+export { default as ColorPicker } from './components/ColorPicker';
+export { default as Checkbox } from './components/Checkbox';
+export * from './components/Checkbox';
+export { default as FormCheckbox } from './components/FormCheckbox';
+export * from './components/FormCheckbox';
+export { default as Dropdown } from './components/Dropdown';
+export { default as DropdownArrow } from './components/DropdownArrow';
+export { default as DropdownBase } from './components/DropdownBase';
+export { default as DropdownOption } from './components/DropdownOption';
+export { default as DropdownOptions } from './components/DropdownOptions';
+export { default as DropdownToggle } from './components/DropdownToggle';
+export type { IDropdownOption } from './components/DropdownOptions';
+export { default as Icon } from './components/Icon';
+export * from './components/Icon';
+export * from './components/Icon/types';
+export { default as Input } from './components/Input';
+export { default as Label } from './components/Label';
+export { default as Modal } from './components/Modal';
+export { default as ModalDismissButton } from './components/ModalDismissButton';
+export { default as ModalContent } from './components/ModalContent';
+export { default as ModalOpenButton } from './components/ModalOpenButton';
+export { default as ModalDialog } from './components/ModalDialog';
+export * from './components/Modal';
+export * from './components/Popover';
+export { default as MultipleDropdown } from './components/MultipleDropdown';
+export { default as MultipleDropdownNotification } from './components/MultipleDropdownNotification';
+export { default as MultipleDropdownOptions } from './components/MultipleDropdownOptions';
+export { default as Progress } from './components/Progress';
+export { default as ProgressBar } from './components/ProgressBar';
+export { default as ProgressCircle } from './components/ProgressCircle';
+export { default as ProgressLegend } from './components/ProgressLegend';
+export { default as ProgressLegendItem } from './components/ProgressLegendItem';
+export { default as ProgressVertical } from './components/ProgressVertical';
+export { default as Stepper } from './components/Stepper';
+export { default as Step } from './components/Step';
+export { default as StepConnector } from './components/StepConnector';
+export { default as StepLabel } from './components/StepLabel';
+export { default as Switch } from './components/Switch';
+export * from './components/Switch';
+export { default as Table } from './components/Table';
+export { default as TableHead } from './components/TableHead';
+export { default as TableRow } from './components/TableRow';
+export { default as TableCell } from './components/TableCell';
+export { default as TableBody } from './components/TableBody';
+export { default as Tooltip } from './components/Tooltip';
+export { default as TooltipTrigger } from './components/TooltipTrigger';
+export { default as TooltipContent } from './components/TooltipContent';
+export * from './components/Tooltip';
+export { default as TabBar } from './components/TabBar';
+export { default as Tab } from './components/Tab';
+export { default as LargeTab } from './components/LargeTab';
+export * from './components/TabBar';
+export { default as Tag } from './components/Tag';
+export * from './components/Tag';
+export { default as Textarea } from './components/Textarea';
+export * from './components/Textarea';
+export { default as TextField } from './components/TextField';
+export * from './components/TextField';
+export { default as Typography } from './components/Typography';
+export * from './components/Typography';
+export { default as Wrapper } from './components/Wrapper';
+export * from './components/Wrapper';
+export { default as Radio } from './components/Radio';
+export { default as RadioGroup } from './components/RadioGroup';
+export { default as FormRadioGroup } from './components/FormRadioGroup';
+export { default as ResponsiveImage } from './components/ResponsiveImage';
+export * from './components/ResponsiveImage';
+export { default as Form } from './components/Form';
+export { default as FormGroup } from './components/FormGroup';
+export { default as FormAction } from './components/FormAction';
+export { default as FormHelperText } from './components/FormHelperText';
+export { default as Indicator } from './components/Indicator';
+export * from './components/ButtonGroup';
+export { default as Link } from './components/Link';