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

package/src/components/Label/Label.spec.tsx

@@ -1,57 +1,57 @@
-import userEvent from '@testing-library/user-event';
-import styled from '@emotion/styled';
-import { screen } from '../../../customTest';
-
-import Label from '@components/Label';
-
-describe('Label', () => {
-  it('Render input with label and helper text', () => {
-    const name = 'field';
-    const label = 'Label';
-
-    render(<Label htmlFor={`formElement-${name}`}>{label}</Label>);
-
-    const labelEl = screen.getByText(/label/i);
-
-    expect(labelEl).toHaveAttribute('for', 'formElement-field');
-    expect(labelEl).toBeInTheDocument();
-  });
-
-  it('Renders with custom styles', () => {
-    const label = 'Label';
-    const CustomLabel = styled(Label)`
-      background-color: blue;
-    `;
-    render(<CustomLabel htmlFor="elementId">{label}</CustomLabel>);
-
-    const labelEl = screen.getByText(/label/i);
-
-    expect(labelEl).toHaveAttribute('for', 'elementId');
-    expect(labelEl).toHaveStyleRule('background-color', 'blue');
-  });
-
-  it('Reacts to mouse events (enter, leave)', async () => {
-    const user = userEvent.setup();
-    const mockOnMouseEnter = jest.fn();
-    const mockOnMouseLeave = jest.fn();
-
-    const { getByText } = render(
-      <Label
-        htmlFor="formElement"
-        onMouseEnter={mockOnMouseEnter}
-        onMouseLeave={mockOnMouseLeave}>
-        Label
-      </Label>,
-    );
-
-    const labelEl = getByText(/label/i);
-
-    await user.hover(labelEl);
-    expect(mockOnMouseEnter).toHaveBeenCalledTimes(1);
-    expect(mockOnMouseLeave).not.toHaveBeenCalled();
-
-    await user.unhover(labelEl);
-    expect(mockOnMouseLeave).toHaveBeenCalledTimes(1);
-    expect(mockOnMouseEnter).toHaveBeenCalledTimes(1);
-  });
-});
+import userEvent from '@testing-library/user-event';
+import styled from '@emotion/styled';
+import { screen } from '../../../customTest';
+
+import Label from '@components/Label';
+
+describe('Label', () => {
+  it('Render input with label and helper text', () => {
+    const name = 'field';
+    const label = 'Label';
+
+    render(<Label htmlFor={`formElement-${name}`}>{label}</Label>);
+
+    const labelEl = screen.getByText(/label/i);
+
+    expect(labelEl).toHaveAttribute('for', 'formElement-field');
+    expect(labelEl).toBeInTheDocument();
+  });
+
+  it('Renders with custom styles', () => {
+    const label = 'Label';
+    const CustomLabel = styled(Label)`
+      background-color: blue;
+    `;
+    render(<CustomLabel htmlFor="elementId">{label}</CustomLabel>);
+
+    const labelEl = screen.getByText(/label/i);
+
+    expect(labelEl).toHaveAttribute('for', 'elementId');
+    expect(labelEl).toHaveStyleRule('background-color', 'blue');
+  });
+
+  it('Reacts to mouse events (enter, leave)', async () => {
+    const user = userEvent.setup();
+    const mockOnMouseEnter = jest.fn();
+    const mockOnMouseLeave = jest.fn();
+
+    const { getByText } = render(
+      <Label
+        htmlFor="formElement"
+        onMouseEnter={mockOnMouseEnter}
+        onMouseLeave={mockOnMouseLeave}>
+        Label
+      </Label>,
+    );
+
+    const labelEl = getByText(/label/i);
+
+    await user.hover(labelEl);
+    expect(mockOnMouseEnter).toHaveBeenCalledTimes(1);
+    expect(mockOnMouseLeave).not.toHaveBeenCalled();
+
+    await user.unhover(labelEl);
+    expect(mockOnMouseLeave).toHaveBeenCalledTimes(1);
+    expect(mockOnMouseEnter).toHaveBeenCalledTimes(1);
+  });
+});

package/src/components/Label/Label.tsx

@@ -1,20 +1,20 @@
-import { LabelProps } from './types';
-import { LabelBase } from './LabelBase';
-
-const Label = ({
-  children,
-  htmlFor,
-  className,
-  onMouseEnter,
-  onMouseLeave,
-}: LabelProps) => (
-  <LabelBase
-    htmlFor={htmlFor}
-    className={className}
-    onMouseEnter={onMouseEnter}
-    onMouseLeave={onMouseLeave}>
-    {children}
-  </LabelBase>
-);
-
-export default Label;
+import { LabelProps } from './types';
+import { LabelBase } from './LabelBase';
+
+const Label = ({
+  children,
+  htmlFor,
+  className,
+  onMouseEnter,
+  onMouseLeave,
+}: LabelProps) => (
+  <LabelBase
+    htmlFor={htmlFor}
+    className={className}
+    onMouseEnter={onMouseEnter}
+    onMouseLeave={onMouseLeave}>
+    {children}
+  </LabelBase>
+);
+
+export default Label;

package/src/components/Label/LabelBase.tsx

@@ -1,14 +1,14 @@
-import styled from '@emotion/styled';
-
-export const LabelBase = styled.label`
-  display: inline-block;
-
-  flex: 1;
-  font-weight: 500;
-  font-size: 1rem;
-  line-height: 22px;
-
-  color: ${({ theme }) => theme.colors.greyDarker};
-
-  margin: 0 0 6px 4px;
-`;
+import styled from '@emotion/styled';
+
+export const LabelBase = styled.label`
+  display: inline-block;
+
+  flex: 1;
+  font-weight: 500;
+  font-size: 1rem;
+  line-height: 22px;
+
+  color: ${({ theme }) => theme.colors.greyDarker};
+
+  margin: 0 0 6px 4px;
+`;

package/src/components/Label/index.ts

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

package/src/components/Label/types.ts

@@ -1,9 +1,9 @@
-import { MouseEventHandler } from 'react';
-import { CommonProps } from '@global-types/emotion';
-
-export interface LabelProps extends CommonProps {
-  htmlFor?: string;
-  children: React.ReactNode;
-  onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
-  onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
-}
+import { MouseEventHandler } from 'react';
+import { CommonProps } from '@global-types/emotion';
+
+export interface LabelProps extends CommonProps {
+  htmlFor?: string;
+  children: React.ReactNode;
+  onMouseEnter?: MouseEventHandler<HTMLLabelElement>;
+  onMouseLeave?: MouseEventHandler<HTMLLabelElement>;
+}

package/src/components/LargeTab/LargeTab.tsx

@@ -1,38 +1,38 @@
-import { useTheme } from '@emotion/react';
-
-import { ILargeTabProps } from '@components/TabBar/types';
-
-import { LargeTabBase } from './LargeTabBase';
-
-import { topTextStyle, bottomTextStyle } from './styles';
-
-const LargeTab = ({
-  topText,
-  bottomText,
-  isActive,
-  onClick,
-  ariaControls,
-  tabId,
-}: ILargeTabProps) => {
-  const theme = useTheme();
-  return (
-    <LargeTabBase
-      role="tab"
-      id={`${tabId}`}
-      aria-selected={isActive}
-      aria-controls={ariaControls}
-      tabIndex={0}
-      isActive={isActive}
-      title={`${topText}-${bottomText}`}
-      onClick={() => {
-        // istanbul ignore else
-        if (typeof onClick === 'function') {
-          onClick();
-        }
-      }}>
-      <p css={topTextStyle(theme)}>{topText}</p>
-      <p css={bottomTextStyle(theme)}>{bottomText}</p>
-    </LargeTabBase>
-  );
-};
-export default LargeTab;
+import { useTheme } from '@emotion/react';
+
+import { ILargeTabProps } from '@components/TabBar/types';
+
+import { LargeTabBase } from './LargeTabBase';
+
+import { topTextStyle, bottomTextStyle } from './styles';
+
+const LargeTab = ({
+  topText,
+  bottomText,
+  isActive,
+  onClick,
+  ariaControls,
+  tabId,
+}: ILargeTabProps) => {
+  const theme = useTheme();
+  return (
+    <LargeTabBase
+      role="tab"
+      id={`${tabId}`}
+      aria-selected={isActive}
+      aria-controls={ariaControls}
+      tabIndex={0}
+      isActive={isActive}
+      title={`${topText}-${bottomText}`}
+      onClick={() => {
+        // istanbul ignore else
+        if (typeof onClick === 'function') {
+          onClick();
+        }
+      }}>
+      <p css={topTextStyle(theme)}>{topText}</p>
+      <p css={bottomTextStyle(theme)}>{bottomText}</p>
+    </LargeTabBase>
+  );
+};
+export default LargeTab;

package/src/components/LargeTab/LargeTabBase.tsx

@@ -1,39 +1,39 @@
-import styled from '@emotion/styled';
-import { ILargeTabProps } from '@components/TabBar/types';
-
-export const LargeTabBase = styled.button<Pick<ILargeTabProps, 'isActive'>>`
-  width: 100px;
-  max-width: 100px;
-  height: 60px;
-  border: 0;
-  border-radius: 12px;
-  outline: 0;
-  margin: 0 12px 0 0;
-  padding: 0;
-  color: ${({ theme }) => theme.colors.greyDarker};
-  background: ${({ isActive, theme }) =>
-    isActive ? theme.colors.greyFocused : theme.colors.greyLighter};
-  box-shadow: ${({ isActive, theme }) =>
-    isActive ? `0px 10px 40px ${theme.colors.greyShadow24}` : null};
-  cursor: pointer;
-
-  &:last-child {
-    margin-right: 0;
-  }
-
-  &:focus {
-    background: ${({ isActive, theme }) =>
-      isActive ? theme.colors.greyFocused : theme.colors.greySelectedMenuItem};
-  }
-
-  p {
-    letter-spacing: 0.1px;
-    overflow: hidden;
-    white-space: nowrap;
-    text-overflow: ellipsis;
-  }
-
-  @media (max-width: 900px) {
-    max-width: 70px;
-  }
-`;
+import styled from '@emotion/styled';
+import { ILargeTabProps } from '@components/TabBar/types';
+
+export const LargeTabBase = styled.button<Pick<ILargeTabProps, 'isActive'>>`
+  width: 100px;
+  max-width: 100px;
+  height: 60px;
+  border: 0;
+  border-radius: 12px;
+  outline: 0;
+  margin: 0 12px 0 0;
+  padding: 0;
+  color: ${({ theme }) => theme.colors.greyDarker};
+  background: ${({ isActive, theme }) =>
+    isActive ? theme.colors.greyFocused : theme.colors.greyLighter};
+  box-shadow: ${({ isActive, theme }) =>
+    isActive ? `0px 10px 40px ${theme.colors.greyShadow24}` : null};
+  cursor: pointer;
+
+  &:last-child {
+    margin-right: 0;
+  }
+
+  &:focus {
+    background: ${({ isActive, theme }) =>
+      isActive ? theme.colors.greyFocused : theme.colors.greySelectedMenuItem};
+  }
+
+  p {
+    letter-spacing: 0.1px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+  }
+
+  @media (max-width: 900px) {
+    max-width: 70px;
+  }
+`;

package/src/components/LargeTab/index.ts

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

package/src/components/LargeTab/styles.ts

@@ -1,17 +1,17 @@
-import { css, Theme } from '@emotion/react';
-
-export const topTextStyle = (theme: Theme) => css`
-  fontSize: '15.5px',
-  lineHeight: '22px',
-  fontWeight: 300,
-  color: ${theme.colors.greyDarker60},
-  margin: 0,
-`;
-
-export const bottomTextStyle = (theme: Theme) => css`
-  fontSize: '14px',
-  fontWeight: 500,
-  lineHeight: '18px',
-  color: ${theme.colors.greyDarker},
-  margin: '3px 0 0 0',
-`;
+import { css, Theme } from '@emotion/react';
+
+export const topTextStyle = (theme: Theme) => css`
+  fontSize: '15.5px',
+  lineHeight: '22px',
+  fontWeight: 300,
+  color: ${theme.colors.greyDarker60},
+  margin: 0,
+`;
+
+export const bottomTextStyle = (theme: Theme) => css`
+  fontSize: '14px',
+  fontWeight: 500,
+  lineHeight: '18px',
+  color: ${theme.colors.greyDarker},
+  margin: '3px 0 0 0',
+`;

package/src/components/Link/Link.tsx

@@ -1,10 +1,10 @@
-import Typography from '@components/Typography';
-
-import { LinkProps } from './Link.types';
-import { LinkBase } from './LinkBase';
-
-export const Link = ({ children, href, ...props }: LinkProps) => (
-  <LinkBase href={href} {...props}>
-    <Typography variant="subtitle">{children}</Typography>
-  </LinkBase>
-);
+import Typography from '@components/Typography';
+
+import { LinkProps } from './Link.types';
+import { LinkBase } from './LinkBase';
+
+export const Link = ({ children, href, ...props }: LinkProps) => (
+  <LinkBase href={href} {...props}>
+    <Typography variant="subtitle">{children}</Typography>
+  </LinkBase>
+);

package/src/components/Link/Link.types.ts

@@ -1,4 +1,4 @@
-export interface LinkProps {
-  href: string;
-  children: React.ReactNode;
-}
+export interface LinkProps {
+  href: string;
+  children: React.ReactNode;
+}

package/src/components/Link/LinkBase.ts

@@ -1,5 +1,5 @@
-import styled from '@emotion/styled';
-
-export const LinkBase = styled.a`
-  display: inline-block;
-`;
+import styled from '@emotion/styled';
+
+export const LinkBase = styled.a`
+  display: inline-block;
+`;

package/src/components/Link/index.tsx

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

package/src/components/Modal/Modal.context.tsx

@@ -1,9 +1,9 @@
-import { createContext } from 'react';
-import { ModalContextProps } from './types';
-
-export const ModalContext = createContext<ModalContextProps>([
-  false,
-  () => {
-    /* noop */
-  },
-]);
+import { createContext } from 'react';
+import { ModalContextProps } from './types';
+
+export const ModalContext = createContext<ModalContextProps>([
+  false,
+  () => {
+    /* noop */
+  },
+]);