@a-little-world/little-world-design-system 2.10.0

package/src/components/Loading/styles.ts

@@ -0,0 +1,95 @@
+import styled, { keyframes } from 'styled-components';
+import {
+  LoadingDimensions,
+  LoadingSizes,
+  LoadingType,
+} from '@a-little-world/little-world-design-system-core';
+import { pixelate } from '../../utils/styles';
+
+const loading = keyframes`
+    0% {
+      transform: rotate(0deg);
+    }
+    100% {
+      transform: rotate(360deg);
+    }
+`;
+
+const logoPulse = keyframes`
+    0%, 100% {
+      transform: scale(1);
+    }
+    50% {
+      transform: scale(1.03);
+    }
+`;
+
+export const LoadingContainer = styled.div<{
+  $align?: string;
+  $color?: string;
+  $inline?: boolean;
+  $size?: LoadingSizes;
+  $type?: LoadingType;
+}>`
+  display: ${({ $inline }) => ($inline ? 'inline-flex' : 'flex')};
+  align-items: center;
+  justify-content: ${({ $align }) => $align || 'center'};
+  position: relative;
+  width: ${({ $inline, $size }) =>
+    $inline
+      ? pixelate(LoadingDimensions[$size || LoadingSizes.Small])
+      : '100%'};
+  height: 100%;
+  min-height: ${({ $size }) =>
+    pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+`;
+
+export const LoadingElement = styled.div<{
+  $color?: string;
+  $size?: LoadingSizes;
+}>`
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: ${({ $size }) => pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+    height: ${({ $size }) => pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+    border: 2px solid ${({ $color }) => $color || 'currentColor'};
+    border-width: ${({ $size }) => ($size === LoadingSizes.Large ? '4px' : '2px')};
+    border-radius: 50%;
+    animation: ${loading} 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: ${({ $color }) => $color || 'currentColor'} transparent
+    transparent transparent;
+
+    &:nth-child(1) {
+        animation-delay: -0.45s;
+    }
+
+    &:nth-child(2) {
+        animation-delay: -0.3s;
+    }
+
+    &:nth-child(3) {
+        animation-delay: -0.15s;
+    }
+}
+`;
+
+export const LogoContainer = styled.div<{
+  $size?: LoadingSizes;
+}>`
+  position: relative;
+  width: ${({ $size }) =>
+    pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+  height: ${({ $size }) =>
+    pixelate(LoadingDimensions[$size || LoadingSizes.Small])};
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: ${logoPulse} 3s ease-in-out infinite;
+
+  svg {
+    width: 100%;
+    height: 100%;
+    transform-origin: center center;
+  }
+`;

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

@@ -0,0 +1,52 @@
+import React, { useState } from 'react';
+
+import Button, { ButtonAppearance } from '../Button/Button';
+import Card, { CardContent, CardFooter, CardHeader } from '../Card/Card';
+import Text from '../Text/Text';
+import Modal from './Modal';
+import ModalDocs from './ModalDocs.mdx';
+
+export default {
+  component: Modal,
+  title: 'Components/Modal',
+  parameters: {
+    docs: {
+      page: ModalDocs,
+    },
+  },
+};
+
+const Template = args => {
+  const [open, setIsOpen] = useState<string | boolean>(false);
+  return (
+    <>
+      <Button
+        appearance={ButtonAppearance.Secondary}
+        onClick={() => setIsOpen('default')}
+        style={{ marginBottom: '16px' }}
+      >
+        Open Modal
+      </Button>
+      <Button onClick={() => setIsOpen('card')}>Open Modal with Card</Button>
+      <Modal open={open} {...args} onClose={() => setIsOpen(false)}>
+        {open === 'default' ? (
+          <div>I AM A MODAL</div>
+        ) : (
+          <Card>
+            <CardHeader>New match</CardHeader>
+            <CardContent $align="flex-end" $textAlign="center" $gap="40px">
+              <Text>We've found a new match for you</Text>
+              <Text>Click accept or decline to progress</Text>
+            </CardContent>
+            <CardFooter>
+              <Button onClick={() => setIsOpen(false)}>Confirm</Button>
+            </CardFooter>
+          </Card>
+        )}
+      </Modal>
+    </>
+  );
+};
+
+export const Default = Template.bind({});
+Default.args = {};

package/src/components/Modal/Modal.test.tsx

@@ -0,0 +1,98 @@
+// @ts-nocheck
+import React from 'react';
+import { render, renderWithUser, screen } from '../../testUtils';
+import Modal, { BACKDROP_LABEL } from './Modal';
+
+const CHILDREN_TEST_ID = 'children';
+const PARENT_TEST_ID = 'parent';
+
+test('Modal renders null when not open or active', () => {
+  const onCloseMock = jest.fn();
+  render(
+    <Modal open={false} onClose={onCloseMock}>
+      <div data-testid={CHILDREN_TEST_ID} />
+    </Modal>,
+  );
+
+  const backdrop = screen.queryByLabelText(BACKDROP_LABEL);
+  const children = screen.queryByTestId(CHILDREN_TEST_ID);
+  expect(children).not.toBeInTheDocument();
+  expect(backdrop).not.toBeInTheDocument();
+});
+
+test('Modal renders correctly when open', () => {
+  const onCloseMock = jest.fn();
+  render(
+    <Modal open onClose={onCloseMock}>
+      <div data-testid={CHILDREN_TEST_ID} />
+    </Modal>,
+  );
+
+  const backdrop = screen.getByLabelText(BACKDROP_LABEL);
+  const children = screen.getByTestId(CHILDREN_TEST_ID);
+  const closeBtn = screen.getByRole('button');
+  expect(children).toBeInTheDocument();
+  expect(closeBtn).toBeInTheDocument();
+  expect(backdrop).toBeInTheDocument();
+});
+
+test('Modal is correctly appended to parent element if provided', () => {
+  const onCloseMock = jest.fn();
+  const parentEl = document.createElement('div');
+  parentEl.setAttribute('data-testid', PARENT_TEST_ID);
+  document.body.appendChild(parentEl);
+  render(
+    <Modal open onClose={onCloseMock} parent={parentEl}>
+      <div data-testid={CHILDREN_TEST_ID} />
+    </Modal>,
+  );
+
+  const backdrop = screen.getByLabelText(BACKDROP_LABEL);
+  const closeBtn = screen.getByRole('button');
+  const parent = screen.getByTestId(PARENT_TEST_ID);
+
+  expect(parent).toBeInTheDocument();
+  expect(closeBtn).toBeInTheDocument();
+  // content gets appended to div
+
+  expect(parent.firstChild?.firstChild).toEqual(backdrop);
+});
+
+test('Modal can be closed by clicking on close button', async () => {
+  const onCloseMock = jest.fn();
+  const { user } = renderWithUser(
+    <Modal open onClose={onCloseMock}>
+      <div data-testid={CHILDREN_TEST_ID} />
+    </Modal>,
+  );
+
+  const closeBtn = screen.getByRole('button');
+  await user.click(closeBtn);
+  expect(onCloseMock).toHaveBeenCalled();
+});
+
+test('Modal can be closed by clicking on backdrop', async () => {
+  const onCloseMock = jest.fn();
+  const { user } = renderWithUser(
+    <Modal open onClose={onCloseMock}>
+      <div data-testid={CHILDREN_TEST_ID} />
+    </Modal>,
+  );
+
+  const backdrop = screen.getByLabelText(BACKDROP_LABEL);
+  await user.click(backdrop);
+  expect(onCloseMock).toHaveBeenCalled();
+});
+
+test('Modal cannot be closed by clicking on backdrop when locked', async () => {
+  const onCloseMock = jest.fn();
+  const { user } = renderWithUser(
+    <Modal locked open onClose={onCloseMock}>
+      <div data-testid={CHILDREN_TEST_ID} />
+    </Modal>,
+  );
+
+  const backdrop = screen.getByLabelText(BACKDROP_LABEL);
+  await user.click(backdrop);
+  expect(onCloseMock).not.toHaveBeenCalled();
+});

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,115 @@
+import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { createPortal } from 'react-dom';
+
+import { ButtonVariations } from '../Button/Button';
+import { CloseIcon } from '../Icon';
+import { BackdropContainer, CloseButton } from './styles';
+
+export const BACKDROP_LABEL = 'dialog backdrop';
+const ROOT_LABEL = '#root';
+const CLOSE_BUTTON_LABEL = 'dialog close button';
+
+type BaseModalProps = {
+  children: any;
+  className?: string;
+  createInPortal?: boolean;
+  open: boolean;
+  parent?: any;
+};
+
+type UnlockedModalProps = BaseModalProps & {
+  locked?: false;
+  onClose: () => void;
+};
+
+type LockedModalProps = BaseModalProps & {
+  locked: true;
+  onClose?: () => void;
+};
+
+type ModalProps = UnlockedModalProps | LockedModalProps;
+
+const Modal = ({
+  children,
+  createInPortal = true,
+  open,
+  onClose,
+  locked,
+  parent,
+  className,
+}: ModalProps) => {
+  const [active, setActive] = useState(false);
+
+  const backdrop = useRef<HTMLDialogElement>(null);
+  const el = useMemo(() => document.createElement('div'), []);
+
+  useEffect(() => {
+    const target = parent?.appendChild ? parent : document.body;
+    target.appendChild(el);
+
+    return () => {
+      target.removeChild(el);
+    };
+  }, [el, parent, className]);
+
+  useEffect(() => {
+    const { current } = backdrop;
+    const transitionEnd = () => setActive(open);
+    const keyHandler = (e: KeyboardEvent) =>
+      !locked && e.key === 'Escape' && onClose();
+    const clickHandler = (e: Event) =>
+      !locked && e.target === current && onClose();
+
+    let openTimeout: number;
+
+    if (current) {
+      current.addEventListener('transitionend', transitionEnd);
+      current.addEventListener('click', clickHandler);
+      window.addEventListener('keyup', keyHandler);
+    }
+
+    if (open) {
+      openTimeout = window.setTimeout(() => {
+        (document?.activeElement as HTMLElement).blur();
+        setActive(open);
+        document.body.style.overflow = 'hidden';
+        document.querySelector(ROOT_LABEL)?.setAttribute('inert', 'true');
+        current?.focus();
+      }, 10);
+    }
+
+    return () => {
+      if (current) {
+        current.removeEventListener('transitionend', transitionEnd);
+        current.removeEventListener('click', clickHandler);
+      }
+
+      clearTimeout(openTimeout);
+      document.querySelector(ROOT_LABEL)?.removeAttribute('inert');
+      document.body.style.overflow = 'unset';
+
+      window.removeEventListener('keyup', keyHandler);
+    };
+  }, [open, locked, onClose]);
+
+  const Backdrop = (
+    <BackdropContainer
+      aria-modal={true}
+      aria-label={BACKDROP_LABEL}
+      ref={backdrop}
+      $active={active && open}
+    >
+      {!locked && (
+        <CloseButton variation={ButtonVariations.Icon} onClick={onClose}>
+          <CloseIcon label={CLOSE_BUTTON_LABEL} height="24" width="24" />
+        </CloseButton>
+      )}
+      {children}
+    </BackdropContainer>
+  );
+
+  if (open) return createInPortal ? createPortal(Backdrop, el) : Backdrop;
+  return null;
+};
+
+export default Modal;

package/src/components/Modal/ModalDocs.mdx

@@ -0,0 +1,21 @@
+import { ArgTypes, Meta } from '@storybook/addon-docs/blocks';
+import { CustomThemeProvider } from '../../theme';
+
+import Status from '../../utils/status';
+import Modal from './Modal';
+
+<Meta title="Components/Modal" />
+
+<CustomThemeProvider>
+  # Modal
+
+  <Status React="Prototype" Figma="https://www.figma.com/" />
+
+  This is a Modal that should be used when an application requires a required action from the user or to communicate information to the user.
+
+  ## Default
+
+  By default, the Modal is closed
+
+  <ArgTypes of={Modal} />
+</CustomThemeProvider>

package/src/components/Modal/styles.tsx

@@ -0,0 +1,67 @@
+import styled, { css } from 'styled-components';
+
+import Button from '../Button/Button';
+
+export const BackdropContainer = styled.dialog<{ $active: boolean }>`
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  width: unset;
+  height: unset;
+  margin: 0;
+  padding: ${({ theme }) => theme.spacing.small};
+  border: none;
+  background-color: rgba(51, 51, 51, 0.3);
+  backdrop-filter: blur(8px);
+  opacity: 0;
+  transition: all 100ms cubic-bezier(0.4, 0, 0.2, 1);
+  transition-delay: 200ms;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1000;
+  overflow: auto;
+  overscroll-behavior: contain;
+
+  > div {
+    transform: translateY(100px);
+    transition: all 200ms cubic-bezier(0.4, 0, 0.2, 1);
+    opacity: 0;
+  }
+
+  ${({ $active }) =>
+    $active &&
+    css`
+      transition-duration: 250ms;
+      transition-delay: 0ms;
+      opacity: 1;
+
+      > div {
+        transform: translateY(0);
+        opacity: 1;
+        transition-delay: 150ms;
+        transition-duration: 350ms;
+      }
+    `}
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    padding: ${({ theme }) => theme.spacing.large};
+  }
+`;
+
+export const CloseButton = styled(Button)`
+  position: absolute;
+  top: ${({ theme }) => theme.spacing.xsmall};
+  right: ${({ theme }) => theme.spacing.xsmall};
+  z-index: 2;
+  padding: 7px;
+  background: ${({ theme }) => theme.color.surface.secondary};
+  border-radius: ${({ theme }) => theme.radius.full};
+
+  @media (min-width: ${({ theme }) => theme.breakpoints.medium}) {
+    top: ${({ theme }) => theme.spacing.medium};
+    right: ${({ theme }) => theme.spacing.medium};
+  }
+`;

package/src/components/MultiCheckbox/MultiCheckbox.stories.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+
+import MultiCheckbox from './MultiCheckbox';
+
+export default {
+  component: MultiCheckbox,
+  title: 'Components/MultiCheckbox',
+};
+
+export const Default = args => <MultiCheckbox {...args} />;
+
+Default.args = {
+  id: 'multi selector id',
+  onSelection: () => null,
+  heading: 'Select your favourite veg',
+  preSelected: ['carrots', 'Potato'],
+  options: [
+    { label: 'Carrots', value: 'carrots' },
+    { label: 'Beets', value: 'Beets' },
+    { label: 'Broccoli', value: 'Broccoli' },
+    { label: 'Potato', value: 'Potato' },
+    { label: 'Longer sentence to test', value: 'longer' },
+  ],
+};

package/src/components/MultiCheckbox/MultiCheckbox.tsx

@@ -0,0 +1,73 @@
+import { CheckedState } from '@radix-ui/react-checkbox';
+import React, { useState } from 'react';
+import { useTheme } from 'styled-components';
+
+import { CheckboxButton } from '../Checkbox/Checkbox';
+import InputError from '../InputError/InputError';
+import Label from '../Label/Label';
+import { MultiCheckboxWrapper } from './styles';
+
+type MultiCheckboxProps = {
+  heading?: string;
+  options: { label: string; value: string }[];
+  onSelection: (selected: string[]) => void;
+  preSelected?: string[];
+  error?: string;
+  name: string;
+  readOnly?: boolean;
+};
+
+const MultiCheckbox: React.FC<MultiCheckboxProps> = ({
+  error,
+  heading,
+  preSelected,
+  onSelection,
+  options,
+  name,
+  readOnly,
+}) => {
+  const theme = useTheme();
+  const [selected, setSelected] = useState(preSelected || []);
+
+  const onSelect = ({
+    state,
+    value,
+  }: {
+    value: string;
+    state: CheckedState;
+  }) => {
+    const oldValues = selected || [];
+    const newValues = state
+      ? [...oldValues, value]
+      : oldValues.filter(el => el !== value);
+
+    setSelected(newValues);
+    onSelection(newValues);
+  };
+
+  return (
+    <div>
+      {heading && <Label bold>{heading}</Label>}
+      <MultiCheckboxWrapper>
+        {options.map(({ value, label }) => (
+          <CheckboxButton
+            key={label}
+            error={error}
+            label={label}
+            name={name}
+            checked={selected.includes(value)}
+            onCheckedChange={state => onSelect({ value, state })}
+            color={theme.color.surface.selected}
+            value={value}
+            readOnly={readOnly}
+          />
+        ))}
+      </MultiCheckboxWrapper>
+      <InputError visible={Boolean(error)} textAlign="left">
+        {error}
+      </InputError>
+    </div>
+  );
+};
+
+export default MultiCheckbox;

package/src/components/MultiCheckbox/styles.tsx

@@ -0,0 +1,10 @@
+import styled from 'styled-components';
+
+export const MultiCheckboxWrapper = styled.div`
+  width: 100%;
+  display: flex;
+  align-items: center;
+  flex-wrap: wrap;
+  gap: ${({ theme }) => theme.spacing.xxsmall};
+  margin-bottom: ${({ theme }) => theme.spacing.xxsmall};
+`;

package/src/components/MultiDropdown/MultiDropdown.stories.tsx

@@ -0,0 +1,105 @@
+import React from 'react';
+
+import MultiDropdown from './MultiDropdown';
+
+export default {
+  component: MultiDropdown,
+  title: 'Components/MultiDropdown',
+};
+
+const DEFAULT_ARGS = {
+  addMoreLabel: 'Add more',
+  onValueChange: () => null,
+  firstDropdown: {
+    ariaLabel: 'language skill',
+    options: [
+      { value: 'german', label: 'German' },
+      { value: 'french', label: 'French' },
+      { value: 'english', label: 'English' },
+    ],
+    placeholder: 'Select a language...',
+    label: 'Language Selector',
+    dataField: 'lang_skill',
+    errors: [],
+    values: [],
+  },
+  secondDropdown: {
+    ariaLabel: 'language level',
+    options: [
+      { value: 'A1', label: 'A1' },
+      { value: 'A2', label: 'A2' },
+      { value: 'B1', label: 'B1' },
+      {
+        label: 'B2 = (fluent & spontaneous conversations, current events',
+        value: 'B2',
+      },
+    ],
+    placeholder: 'Select a level...',
+    label: 'Level Selector',
+    dataField: 'lang_level',
+    errors: [],
+    values: [],
+  },
+};
+
+export const Default = args => <MultiDropdown {...args} />;
+
+Default.args = DEFAULT_ARGS;
+
+export const WithValues = args => <MultiDropdown {...args} />;
+WithValues.args = {
+  ...DEFAULT_ARGS,
+  firstDropdown: {
+    ...DEFAULT_ARGS.firstDropdown,
+    values: ['german', 'french'],
+  },
+  secondDropdown: {
+    ...DEFAULT_ARGS.secondDropdown,
+    values: ['A1', 'A2'],
+  },
+};
+
+export const LockedValue = () => (
+  <MultiDropdown
+    {...{
+      ...DEFAULT_ARGS,
+      firstDropdown: {
+        ...DEFAULT_ARGS.firstDropdown,
+        values: ['german', 'french'],
+      },
+      secondDropdown: {
+        ...DEFAULT_ARGS.secondDropdown,
+        lockedValue: 'B1',
+        values: ['A1', 'A2'],
+      },
+    }}
+  />
+);
+
+export const AllLocked = args => <MultiDropdown {...args} />;
+AllLocked.args = {
+  ...DEFAULT_ARGS,
+  firstDropdown: {
+    ...DEFAULT_ARGS.firstDropdown,
+    values: ['german', 'french'],
+  },
+  secondDropdown: {
+    ...DEFAULT_ARGS.secondDropdown,
+    values: ['A1', 'A2'],
+  },
+  locked: true,
+};
+
+export const RestrictedOptions = args => <MultiDropdown {...args} />;
+RestrictedOptions.args = {
+  ...DEFAULT_ARGS,
+  restrictions: { german: ['B1', 'B2'], french: ['B1'] },
+  firstDropdown: {
+    ...DEFAULT_ARGS.firstDropdown,
+    values: ['german', 'french'],
+  },
+  secondDropdown: {
+    ...DEFAULT_ARGS.secondDropdown,
+    values: ['A1', 'A2'],
+  },
+};