@ssa-ui-kit/core 0.0.16-alpha → 0.0.17-alpha

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 */
+  },
+]);

package/src/components/Modal/Modal.spec.tsx

@@ -1,154 +1,154 @@
-import { fireEvent, screen } from '../../../customTest';
-
-import Modal from '@components/Modal';
-import ModalContent from '@components/ModalContent';
-import ModalOpenButton from '@components/ModalOpenButton';
-import ModalDismissButton from '@components/ModalDismissButton';
-
-import Button from '@components/Button';
-
-describe('Modal', () => {
-  describe('rendering', () => {
-    it('does not render children when not open', () => {
-      const { queryByTestId } = render(
-        <div data-testid="root">
-          <Modal>
-            <ModalContent aria-label="label">
-              <div data-testid="inner" />
-            </ModalContent>
-          </Modal>
-        </div>,
-      );
-      expect(queryByTestId('root')).toBeInTheDocument();
-      expect(queryByTestId('inner')).toBeNull();
-    });
-
-    it('does render children when trigger button', () => {
-      const { queryByTestId } = render(
-        <div data-testid="root">
-          <Modal>
-            <ModalOpenButton>
-              <Button size="small" text="open" />
-            </ModalOpenButton>
-            <ModalContent aria-label="label">
-              <div data-testid="inner" />
-            </ModalContent>
-          </Modal>
-        </div>,
-      );
-
-      fireEvent.click(screen.getByText(/open/i));
-
-      expect(queryByTestId('inner')).toBeInTheDocument();
-    });
-
-    it('without background', async () => {
-      const { queryByTestId, queryAllByRole } = render(
-        <div data-testid="root">
-          <Modal>
-            <ModalOpenButton>
-              <Button size="small" text="open" />
-            </ModalOpenButton>
-            <ModalContent aria-label="label" noBackground={true}>
-              <div data-testid="inner" />
-            </ModalContent>
-          </Modal>
-        </div>,
-      );
-
-      fireEvent.click(screen.getByText(/open/i));
-
-      const [, bgElement] = await queryAllByRole('button');
-
-      expect(queryByTestId('inner')).toBeInTheDocument();
-      expect(bgElement).toHaveStyleRule('background-color', 'transparent');
-    });
-
-    it('trigger button accept parallel onClick call', () => {
-      const handleClick = jest.fn();
-
-      const { queryByTestId } = render(
-        <div data-testid="root">
-          <Modal>
-            <ModalOpenButton>
-              <Button size="small" text="open" onClick={handleClick} />
-            </ModalOpenButton>
-            <ModalContent aria-label="label">
-              <div data-testid="inner" />
-            </ModalContent>
-          </Modal>
-        </div>,
-      );
-
-      fireEvent.click(screen.getByText(/open/i));
-
-      expect(handleClick).toHaveBeenCalledTimes(1);
-      expect(queryByTestId('inner')).toBeInTheDocument();
-    });
-
-    it('renders opened', () => {
-      const { queryByTestId } = render(
-        <Modal isOpen>
-          <ModalOpenButton>
-            <Button size="small" text="open" />
-          </ModalOpenButton>
-          <ModalContent aria-label="dialog-label">
-            <ModalDismissButton>
-              <Button size="small" text="close" />
-            </ModalDismissButton>
-            <div data-testid="inner" />
-          </ModalContent>
-        </Modal>,
-      );
-
-      expect(queryByTestId('inner')).toBeInTheDocument();
-    });
-  });
-
-  describe('a11y', () => {
-    it('can be labelled by another element', () => {
-      const { getByRole, getByText } = render(
-        <Modal>
-          <ModalOpenButton>
-            <Button size="small" text="open" />
-          </ModalOpenButton>
-          <ModalContent aria-label="dialog-label">
-            <div data-testid="inner" />
-          </ModalContent>
-        </Modal>,
-      );
-
-      fireEvent.click(getByText(/open/i));
-
-      const dialog = getByRole('dialog');
-
-      expect(dialog).toHaveAttribute('aria-labelledby', 'dialog-label');
-    });
-  });
-});
-
-describe('user events', () => {
-  it('closes the dialog', () => {
-    const { getByText, queryByTestId } = render(
-      <Modal>
-        <ModalOpenButton>
-          <Button size="small" text="open" />
-        </ModalOpenButton>
-        <ModalContent aria-label="dialog-label">
-          <ModalDismissButton>
-            <Button size="small" text="close" />
-          </ModalDismissButton>
-          <div data-testid="inner" />
-        </ModalContent>
-      </Modal>,
-    );
-
-    fireEvent.click(getByText('open'));
-
-    expect(queryByTestId('inner')).toBeInTheDocument();
-
-    fireEvent.click(getByText('close'));
-
-    expect(queryByTestId('inner')).toBeNull();
-  });
-});
+import { fireEvent, screen } from '../../../customTest';
+
+import Modal from '@components/Modal';
+import ModalContent from '@components/ModalContent';
+import ModalOpenButton from '@components/ModalOpenButton';
+import ModalDismissButton from '@components/ModalDismissButton';
+
+import Button from '@components/Button';
+
+describe('Modal', () => {
+  describe('rendering', () => {
+    it('does not render children when not open', () => {
+      const { queryByTestId } = render(
+        <div data-testid="root">
+          <Modal>
+            <ModalContent aria-label="label">
+              <div data-testid="inner" />
+            </ModalContent>
+          </Modal>
+        </div>,
+      );
+      expect(queryByTestId('root')).toBeInTheDocument();
+      expect(queryByTestId('inner')).toBeNull();
+    });
+
+    it('does render children when trigger button', () => {
+      const { queryByTestId } = render(
+        <div data-testid="root">
+          <Modal>
+            <ModalOpenButton>
+              <Button size="small" text="open" />
+            </ModalOpenButton>
+            <ModalContent aria-label="label">
+              <div data-testid="inner" />
+            </ModalContent>
+          </Modal>
+        </div>,
+      );
+
+      fireEvent.click(screen.getByText(/open/i));
+
+      expect(queryByTestId('inner')).toBeInTheDocument();
+    });
+
+    it('without background', async () => {
+      const { queryByTestId, queryAllByRole } = render(
+        <div data-testid="root">
+          <Modal>
+            <ModalOpenButton>
+              <Button size="small" text="open" />
+            </ModalOpenButton>
+            <ModalContent aria-label="label" noBackground={true}>
+              <div data-testid="inner" />
+            </ModalContent>
+          </Modal>
+        </div>,
+      );
+
+      fireEvent.click(screen.getByText(/open/i));
+
+      const [, bgElement] = await queryAllByRole('button');
+
+      expect(queryByTestId('inner')).toBeInTheDocument();
+      expect(bgElement).toHaveStyleRule('background-color', 'transparent');
+    });
+
+    it('trigger button accept parallel onClick call', () => {
+      const handleClick = jest.fn();
+
+      const { queryByTestId } = render(
+        <div data-testid="root">
+          <Modal>
+            <ModalOpenButton>
+              <Button size="small" text="open" onClick={handleClick} />
+            </ModalOpenButton>
+            <ModalContent aria-label="label">
+              <div data-testid="inner" />
+            </ModalContent>
+          </Modal>
+        </div>,
+      );
+
+      fireEvent.click(screen.getByText(/open/i));
+
+      expect(handleClick).toHaveBeenCalledTimes(1);
+      expect(queryByTestId('inner')).toBeInTheDocument();
+    });
+
+    it('renders opened', () => {
+      const { queryByTestId } = render(
+        <Modal isOpen>
+          <ModalOpenButton>
+            <Button size="small" text="open" />
+          </ModalOpenButton>
+          <ModalContent aria-label="dialog-label">
+            <ModalDismissButton>
+              <Button size="small" text="close" />
+            </ModalDismissButton>
+            <div data-testid="inner" />
+          </ModalContent>
+        </Modal>,
+      );
+
+      expect(queryByTestId('inner')).toBeInTheDocument();
+    });
+  });
+
+  describe('a11y', () => {
+    it('can be labelled by another element', () => {
+      const { getByRole, getByText } = render(
+        <Modal>
+          <ModalOpenButton>
+            <Button size="small" text="open" />
+          </ModalOpenButton>
+          <ModalContent aria-label="dialog-label">
+            <div data-testid="inner" />
+          </ModalContent>
+        </Modal>,
+      );
+
+      fireEvent.click(getByText(/open/i));
+
+      const dialog = getByRole('dialog');
+
+      expect(dialog).toHaveAttribute('aria-labelledby', 'dialog-label');
+    });
+  });
+});
+
+describe('user events', () => {
+  it('closes the dialog', () => {
+    const { getByText, queryByTestId } = render(
+      <Modal>
+        <ModalOpenButton>
+          <Button size="small" text="open" />
+        </ModalOpenButton>
+        <ModalContent aria-label="dialog-label">
+          <ModalDismissButton>
+            <Button size="small" text="close" />
+          </ModalDismissButton>
+          <div data-testid="inner" />
+        </ModalContent>
+      </Modal>,
+    );
+
+    fireEvent.click(getByText('open'));
+
+    expect(queryByTestId('inner')).toBeInTheDocument();
+
+    fireEvent.click(getByText('close'));
+
+    expect(queryByTestId('inner')).toBeNull();
+  });
+});