@ssa-ui-kit/core 0.0.1-alpha

package/src/components/LargeTab/LargeTabBase.tsx

@@ -0,0 +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;
+  }
+`;

package/src/components/LargeTab/index.ts

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

package/src/components/LargeTab/styles.ts

@@ -0,0 +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',
+`;

package/src/components/Link/Link.tsx

@@ -0,0 +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>
+);

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

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

package/src/components/Link/LinkBase.ts

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

package/src/components/Link/index.tsx

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

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

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

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

@@ -0,0 +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();
+  });
+});

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,98 @@
+import type { Meta, StoryObj } from '@storybook/react';
+
+import Button from '@components/Button';
+import Icon from '@components/Icon';
+import mainTheme from '@themes/main';
+
+import Modal from '@components/Modal';
+import ModalContent from '@components/ModalContent';
+import ModalOpenButton from '@components/ModalOpenButton';
+import ModalDismissButton from '@components/ModalDismissButton';
+
+import Typography from '@components/Typography';
+import React from 'react';
+
+export default {
+  title: 'Components/Modal',
+  component: Modal,
+  parameters: {
+    // https://storybook.js.org/docs/react/api/doc-block-story#height
+    docs: { story: { height: '400px' } },
+  },
+} as Meta<typeof Modal>;
+
+export const Default: StoryObj<typeof Modal> = () => (
+  <Modal>
+    <ModalOpenButton>
+      <Button size="small" text="Open modal" />
+    </ModalOpenButton>
+    <ModalContent aria-label="label">
+      <div css={{ display: 'flex', justifyContent: 'flex-end' }}>
+        <ModalDismissButton>
+          <Button
+            size="small"
+            startIcon={
+              <Icon name="cross" size={12} color={mainTheme.colors.white} />
+            }
+          />
+        </ModalDismissButton>
+      </div>
+
+      <Typography variant="body1">
+        lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
+        nisl eget
+      </Typography>
+    </ModalContent>
+  </Modal>
+);
+Default.args = {};
+
+export const Custom: StoryObj<typeof Modal> = () => (
+  <Modal>
+    <ModalOpenButton>
+      <Button size="small" text="Open modal" />
+    </ModalOpenButton>
+    <ModalContent noBackground={true} aria-label="label">
+      <div>
+        <Typography variant="h3" gutter={true}>
+          Hello
+        </Typography>
+
+        <Typography variant="body1" gutter={true}>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
+          nisl eget
+        </Typography>
+
+        <ModalDismissButton>
+          <Button size="small" text="close" />
+        </ModalDismissButton>
+      </div>
+    </ModalContent>
+  </Modal>
+);
+Custom.args = {};
+
+export const Opened: StoryObj<typeof Modal> = () => (
+  <Modal isOpen>
+    <ModalOpenButton>
+      <Button size="small" text="Open modal" />
+    </ModalOpenButton>
+    <ModalContent noBackground={true} aria-label="label">
+      <div>
+        <Typography variant="h3" gutter={true}>
+          Hello
+        </Typography>
+
+        <Typography variant="body1" gutter={true}>
+          lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec auctor,
+          nisl eget
+        </Typography>
+
+        <ModalDismissButton>
+          <Button size="small" text="close" />
+        </ModalDismissButton>
+      </div>
+    </ModalContent>
+  </Modal>
+);
+Opened.args = {};

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,12 @@
+import { useState } from 'react';
+
+import { ModalContext } from './Modal.context';
+import { ModalProps } from './types';
+
+const Modal = ({ isOpen: isInitOpen, ...rest }: ModalProps) => {
+  const [isOpen, setIsOpen] = useState(isInitOpen || false);
+
+  return <ModalContext.Provider value={[isOpen, setIsOpen]} {...rest} />;
+};
+
+export default Modal;

package/src/components/Modal/index.ts

@@ -0,0 +1,2 @@
+export { default } from './Modal';
+export { ModalContext } from './Modal.context';

package/src/components/Modal/types.ts

@@ -0,0 +1,8 @@
+export type ModalContextProps = [boolean, (isOpen: boolean) => void];
+
+export interface ModalProps {
+  'aria-label'?: string;
+  noBackground?: boolean;
+  isOpen?: boolean;
+  children?: React.ReactNode;
+}

package/src/components/ModalContent/ModalContent.tsx

@@ -0,0 +1,21 @@
+import { useContext } from 'react';
+
+import ModalDialog from '@components/ModalDialog';
+import { ModalProps } from '@components/Modal/types';
+import { ModalContext } from '../Modal/Modal.context';
+
+function ModalContent({
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: ModalProps) {
+  const [isOpen] = useContext(ModalContext);
+
+  return (
+    <ModalDialog aria-label={ariaLabel} isOpen={isOpen} {...props}>
+      {isOpen ? children : null}
+    </ModalDialog>
+  );
+}
+
+export default ModalContent;

package/src/components/ModalContent/index.ts

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

package/src/components/ModalDialog/ModalDialog.tsx

@@ -0,0 +1,67 @@
+import { css, Theme, useTheme } from '@emotion/react';
+
+import { ModalDialogProps } from './types';
+
+const modalDialogWrapper = (
+  theme: Theme,
+  isOpen: ModalDialogProps['isOpen'],
+  noBackground: ModalDialogProps['noBackground'],
+) => css`
+  display: ${isOpen ? 'flex' : 'none'};
+
+  position: fixed;
+  inset: 0;
+
+  justify-content: center;
+  align-items: center;
+
+  background-color: ${noBackground ? 'transparent' : theme.colors.grey20};
+
+  z-index: 1000;
+`;
+
+const modalDialogContent = (
+  theme: Theme,
+  isOpen: ModalDialogProps['isOpen'],
+) => css`
+  display: ${isOpen ? 'flex' : 'none'};
+
+  flex-direction: column;
+  position: relative;
+
+  width: 100%;
+  max-width: 400px;
+  padding: 20px;
+
+  background-color: white;
+  box-shadow: 0 5px 15px ${theme.colors.grey20};
+  border-radius: 20px;
+`;
+
+const ModalDialog = ({
+  isOpen,
+  noBackground,
+  children,
+  'aria-label': ariaLabel,
+  ...props
+}: ModalDialogProps) => {
+  const theme = useTheme();
+
+  return (
+    <div
+      role="button"
+      tabIndex={-1}
+      css={modalDialogWrapper(theme, isOpen, noBackground)}>
+      <div
+        aria-modal="true"
+        aria-labelledby={ariaLabel}
+        role="dialog"
+        css={modalDialogContent(theme, isOpen)}
+        {...props}>
+        {children}
+      </div>
+    </div>
+  );
+};
+
+export default ModalDialog;

package/src/components/ModalDialog/index.ts

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

package/src/components/ModalDialog/types.ts

@@ -0,0 +1,6 @@
+export interface ModalDialogProps {
+  isOpen: boolean;
+  noBackground?: boolean;
+  'aria-label'?: string;
+  children?: React.ReactNode;
+}

package/src/components/ModalDismissButton/ModalDismissButton.tsx

@@ -0,0 +1,15 @@
+import { useContext, cloneElement } from 'react';
+
+import { callAll } from '@ssa-ui-kit/utils';
+
+import { ModalContext } from '../Modal/Modal.context';
+
+function ModalDismissButton({ children: child }: { children: JSX.Element }) {
+  const [, setIsOpen] = useContext(ModalContext);
+
+  return cloneElement(child, {
+    onClick: callAll(() => setIsOpen(false), child.props.onClick),
+  });
+}
+
+export default ModalDismissButton;

package/src/components/ModalDismissButton/index.ts

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

package/src/components/ModalOpenButton/ModalOpenButton.tsx

@@ -0,0 +1,15 @@
+import { useContext, cloneElement } from 'react';
+
+import { ModalContext } from '@components/Modal';
+
+import { callAll } from '@ssa-ui-kit/utils';
+
+function ModalOpenButton({ children: child }: { children: JSX.Element }) {
+  const [, setIsOpen] = useContext(ModalContext);
+
+  return cloneElement(child, {
+    onClick: callAll(() => setIsOpen(true), child.props.onClick),
+  });
+}
+
+export default ModalOpenButton;

package/src/components/ModalOpenButton/index.ts

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

package/src/components/MultipleDropdown/MultipleDropdown.context.ts

@@ -0,0 +1,20 @@
+import * as React from 'react';
+
+import { DropdownContextType } from './types';
+import { IDropdownOption } from '@components/MultipleDropdownOptions';
+
+const MultipleDropdownContext = React.createContext<
+  DropdownContextType<IDropdownOption>
+>({
+  allItems: {},
+  isMultiple: false,
+  onChange: () => {
+    /* noop */
+  },
+});
+
+export function useMultipleDropdownContext(): DropdownContextType<IDropdownOption> {
+  return React.useContext(MultipleDropdownContext);
+}
+
+export default MultipleDropdownContext;