@veeqo/ui 0.0.1 → 0.0.4

package/src/components/ToastsLayout/ToastsLayout.tsx

@@ -0,0 +1,39 @@
+import { CSSTransition, TransitionGroup } from 'react-transition-group';
+import React, { useEffect, FC } from 'react';
+import { createPortal } from 'react-dom';
+import { ToastsLayoutPropTypes } from './types';
+import { ToastsLayoutContainer } from './components/styled';
+import { Toast } from './components/Toast';
+
+export const ToastsLayout: FC<ToastsLayoutPropTypes> = ({
+  className,
+  e2eClassName,
+  toasts,
+  minWidth = '50vw',
+  max = 3,
+  onClose,
+}) => {
+  useEffect(() => {
+    if (max && toasts.length > max) onClose(toasts[0].key);
+  }, [toasts, max, onClose]);
+
+  return createPortal(
+    <ToastsLayoutContainer direction="vertical" alignX="center" spacing={4}>
+      <TransitionGroup component={null}>
+        {[...toasts].reverse().map((toast, index) => (
+          <CSSTransition key={toast.key} timeout={500} classNames="veeqo-components-toast">
+            <Toast
+              className={className}
+              e2eClassName={e2eClassName}
+              minWidth={minWidth}
+              last={index === toasts.length - 1}
+              onClose={() => onClose(toast.key)}
+              {...toast}
+            />
+          </CSSTransition>
+        ))}
+      </TransitionGroup>
+    </ToastsLayoutContainer>,
+    document.body,
+  );
+};

package/src/components/ToastsLayout/components/Toast.tsx

@@ -0,0 +1,78 @@
+import React from 'react';
+import { colors } from '../../../theme/modules/colors';
+import { IconWrap, Toast as ToastContainer, StyledText as Text, ContentStack } from './styled';
+import { ToastType, ToastPropTypes, ClassNamesReturnPayload } from '../types';
+import { buildClassnames } from '../../../utils/buildClassnames';
+import { Button } from '../../Button';
+import { SuccessIcon } from '../../../tempIcons/SuccessIcon';
+import { InfoIcon } from '../../../tempIcons/InfoIcon';
+import { AttentionIcon } from '../../../tempIcons/AttentionIcon';
+import { MergeIcon } from '../../../tempIcons/MergeIcon';
+import { CrossIcon } from '../../../tempIcons/CrossIcon';
+
+const toastTypes: ToastType = {
+  info: {
+    accentColor: colors.brand.blue.base,
+    icon: <InfoIcon />,
+  },
+  success: {
+    accentColor: colors.secondary.green.base,
+    icon: <SuccessIcon />,
+  },
+  error: {
+    accentColor: colors.secondary.red.base,
+    icon: <AttentionIcon />,
+  },
+  merge: {
+    accentColor: colors.secondary.purple.base,
+    icon: <MergeIcon />,
+  },
+};
+
+const generateClassNames = (prefix?: string): ClassNamesReturnPayload => ({
+  container: prefix ? `${prefix}-toast-container` : undefined,
+  icon: prefix ? `${prefix}-toast-icon` : undefined,
+  closeIcon: prefix ? `${prefix}-toast-close-icon` : undefined,
+});
+
+export const Toast = ({
+  className,
+  e2eClassName,
+  type,
+  iconSlot,
+  text,
+  last,
+  minWidth,
+  cta,
+  onClose,
+}: ToastPropTypes) => {
+  const classNames = generateClassNames(className);
+  const e2eClassNames = generateClassNames(e2eClassName);
+
+  return (
+    <ToastContainer
+      className={buildClassnames([classNames?.container, e2eClassNames?.container])}
+      direction="horizontal"
+      alignY="center"
+      minWidth={minWidth}
+      last={last}
+    >
+      <IconWrap
+        color={toastTypes[type].accentColor}
+        className={buildClassnames([classNames.icon, e2eClassNames.icon])}
+      >
+        {iconSlot ?? toastTypes[type].icon}
+      </IconWrap>
+      <ContentStack direction="horizontal" alignY="center" alignX="between">
+        <Text variant="body">{text}</Text>
+        {cta}
+      </ContentStack>
+      <Button
+        variant="flat"
+        icon={<CrossIcon color="white" />}
+        onClick={onClose}
+        aria-label="Close"
+      />
+    </ToastContainer>
+  );
+};

package/src/components/ToastsLayout/components/styled.ts

@@ -0,0 +1,76 @@
+import styled from 'styled-components';
+
+import { Stack } from '../../Stack';
+import { BaseContainer } from '../../BaseContainer';
+import { Text } from '../../Text';
+import { theme } from '../../../theme';
+import { sizes } from '../../../theme/modules/sizes';
+
+export const ToastsLayoutContainer = styled(Stack)`
+  position: fixed;
+  bottom: 24px;
+  width: 100%;
+  pointer-events: none;
+`;
+
+export const Toast = styled(Stack)<{
+  minWidth: number | string;
+  last: boolean;
+}>`
+  background-color: ${theme.colors.neutral.ink.dark};
+  padding: 12px 24px 12px 12px;
+  box-shadow: ${theme.shadows.lg};
+  border-radius: ${theme.radius.md};
+  pointer-events: auto;
+  z-index: 40;
+  min-width: ${({ minWidth }) => minWidth};
+  max-width: 80vw;
+
+  &.veeqo-components-toast-enter {
+    transform: translateY(12px);
+    opacity: 0;
+  }
+
+  &.veeqo-components-toast-enter-active {
+    transform: translateY(0);
+    opacity: 1;
+    transition: 500ms ease;
+  }
+
+  &.veeqo-components-toast-exit {
+    transform: ${({ last }) => (last ? 'translateY(0)' : 'translateX(0)')};
+    opacity: 1;
+  }
+
+  &.veeqo-components-toast-exit-active {
+    transform: ${({ last }) => (last ? 'translateY(12px)' : 'translateX(12px)')};
+    opacity: 0;
+    transition: 500ms ease;
+  }
+`;
+
+export const IconWrap = styled(BaseContainer)<{ color: string }>`
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: center;
+  height: 40px;
+  width: 40px;
+  border-radius: ${theme.radius.md};
+  background-color: ${({ color }) => color};
+  color: #fff;
+
+  svg {
+    width: ${sizes.md};
+    height: ${sizes.md};
+  }
+`;
+
+export const ContentStack = styled(Stack)`
+  flex-grow: 1;
+`;
+
+export const StyledText = styled(Text)`
+  color: white;
+  font-size: 16px;
+`;

package/src/components/ToastsLayout/index.ts

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

package/src/components/ToastsLayout/types.ts

@@ -0,0 +1,41 @@
+import { ReactNode } from 'react';
+
+export enum ToastTypes {
+  info = 'info',
+  error = 'error',
+  success = 'success',
+  merge = 'merge',
+}
+
+export type ToastType = Record<ToastTypes, { accentColor: string; icon: Omit<ReactNode, string> }>;
+
+export type ToastPropTypes = Omit<Notification, 'key'> & {
+  className?: string;
+  e2eClassName?: string;
+  last: boolean;
+  minWidth: number | string;
+  onClose: () => void;
+};
+
+export type ToastsLayoutPropTypes = {
+  className?: string;
+  e2eClassName?: string;
+  toasts: Notification[];
+  minWidth?: number | string;
+  max?: number | null;
+  onClose: (key: string) => void;
+};
+
+export type ClassNamesReturnPayload = {
+  container?: string;
+  icon?: string;
+  closeIcon?: string;
+};
+
+export type Notification = {
+  key: string;
+  type: keyof typeof ToastTypes;
+  iconSlot?: Omit<ReactNode, string>;
+  text: string;
+  cta?: React.ReactNode;
+};

package/src/components/Toggle/Toggle.stories.tsx

@@ -0,0 +1,41 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { Toggle } from '.';
+
+const meta = {
+  title: 'Components/Common/Toggle',
+  component: Toggle,
+  tags: ['autodocs'],
+} satisfies Meta<typeof Toggle>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const argTypes = {
+  disabled: {
+    control: {
+      type: 'boolean',
+    },
+  },
+  switched: {
+    control: {
+      type: 'boolean',
+    },
+  },
+};
+
+export const Default: Story = { argTypes };
+
+export const Disabled: Story = {
+  argTypes,
+  args: {
+    disabled: true,
+  },
+};
+
+export const Switched: Story = {
+  argTypes,
+  args: {
+    switched: true,
+  },
+};

package/src/components/Toggle/Toggle.test.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import '@testing-library/jest-dom';
+import { theme } from '../../theme';
+import { Toggle } from './Toggle';
+
+describe('Toggle', () => {
+  it('renders correctly', () => {
+    const { container } = render(<Toggle switched />);
+    expect(container).toMatchSnapshot();
+  });
+
+  it('toggles when clicked', () => {
+    const mockOnClick = jest.fn();
+    render(<Toggle onClick={mockOnClick} />);
+
+    userEvent.click(screen.getByRole('switch'));
+
+    expect(mockOnClick).toBeCalled();
+  });
+
+  it('can be focused and toggled with keyboard interactions', () => {
+    const mockOnClick = jest.fn();
+    render(<Toggle onClick={mockOnClick} />);
+
+    const checkbox = screen.getByRole('checkbox');
+    userEvent.tab();
+    expect(checkbox).toHaveFocus();
+    expect(screen.getByRole('checkbox')).toHaveStyle({
+      'box-shadow': `0 0 0 4px ${theme.colors.brand.blue.light}`,
+    });
+
+    userEvent.keyboard('{space}');
+    expect(checkbox).toHaveFocus();
+    expect(screen.getByRole('checkbox')).toHaveStyle({
+      'box-shadow': `0 0 0 4px ${theme.colors.brand.blue.light}`,
+    });
+    expect(mockOnClick).toBeCalled();
+  });
+
+  describe('when disabled', () => {
+    it('renders correctly', () => {
+      const { container } = render(<Toggle switched disabled />);
+      expect(container).toMatchSnapshot();
+    });
+
+    it('does not toggle when clicked', () => {
+      const mockOnClick = jest.fn();
+      render(<Toggle onClick={mockOnClick} disabled />);
+
+      userEvent.click(screen.getByRole('switch'));
+
+      expect(mockOnClick).not.toBeCalled();
+    });
+  });
+});

package/src/components/Toggle/Toggle.tsx

@@ -0,0 +1,31 @@
+import React, { FC } from 'react';
+
+import { ToggleProps } from './types';
+import { Input, Slider, Switch, Wrapper } from './styled';
+
+/**
+ * A toggle switch component, use-cases should wrap with a label or
+ */
+export const Toggle: FC<ToggleProps> = ({
+  className,
+  name,
+  switched,
+  small,
+  onClick,
+  disabled,
+  ariaLabel,
+}: ToggleProps) => (
+  <Wrapper className={className} disabled={disabled}>
+    <Switch small={small} disabled={disabled} role="switch">
+      <Input
+        type="checkbox"
+        name={name}
+        aria-label={ariaLabel}
+        checked={switched}
+        onClick={disabled ? undefined : onClick}
+        disabled={disabled}
+      />
+      <Slider switched={switched} disabled={disabled} />
+    </Switch>
+  </Wrapper>
+);

package/src/components/Toggle/__snapshots__/Toggle.test.tsx.snap

@@ -0,0 +1,219 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Toggle renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c6 {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 18px;
+  background-color: #cdd1d5;
+  -webkit-transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.c6:after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  background-color: white;
+  -webkit-transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.c4:focus-visible + .c5 {
+  box-shadow: 0 0 0 4px #93C6E8;
+}
+
+.c4:checked + .c5 {
+  background-color: #0079d1;
+}
+
+.c4:disabled + .c5 {
+  background-color: #DFE3E8;
+}
+
+.c4:checked:disabled + .c5 {
+  background-color: #80BCE8;
+}
+
+.c2 {
+  display: inline-block;
+  position: relative;
+  cursor: pointer;
+  height: 36px;
+  width: 72px;
+}
+
+.c2 input {
+  position: absolute;
+  opacity: 0;
+}
+
+.c2 .c5:after {
+  height: 28px;
+  width: 28px;
+  left: 4px;
+  bottom: 4px;
+}
+
+.c2 .c3:checked + .c5:after,
+.c2 .c3:checked + .c5 svg {
+  -webkit-transform: translateX(36px);
+  -ms-transform: translateX(36px);
+  -webkit-transform: translateX(36px);
+  -ms-transform: translateX(36px);
+  transform: translateX(36px);
+}
+
+.c1 {
+  cursor: pointer;
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div>
+  <div
+    class="c0 c1"
+  >
+    <label
+      class="c2"
+      role="switch"
+    >
+      <input
+        checked=""
+        class="c3 c4"
+        type="checkbox"
+      />
+      <span
+        class="c5 c6"
+      />
+    </label>
+  </div>
+</div>
+`;
+
+exports[`Toggle when disabled renders correctly 1`] = `
+.c0 {
+  box-sizing: border-box;
+  position: relative;
+  margin: 0;
+  padding: 0;
+}
+
+.c6 {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 18px;
+  background-color: #cdd1d5;
+  -webkit-transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.c6:after {
+  content: '';
+  position: absolute;
+  border-radius: 50%;
+  background-color: #D9EBF8;
+  -webkit-transition: 0.3s;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+}
+
+.c4:focus-visible + .c5 {
+  box-shadow: 0 0 0 4px #93C6E8;
+}
+
+.c4:checked + .c5 {
+  background-color: #0079d1;
+}
+
+.c4:disabled + .c5 {
+  background-color: #DFE3E8;
+}
+
+.c4:checked:disabled + .c5 {
+  background-color: #80BCE8;
+}
+
+.c2 {
+  display: inline-block;
+  position: relative;
+  cursor: default;
+  height: 36px;
+  width: 72px;
+}
+
+.c2 input {
+  position: absolute;
+  opacity: 0;
+}
+
+.c2 .c5:after {
+  height: 28px;
+  width: 28px;
+  left: 4px;
+  bottom: 4px;
+}
+
+.c2 .c3:checked + .c5:after,
+.c2 .c3:checked + .c5 svg {
+  -webkit-transform: translateX(36px);
+  -ms-transform: translateX(36px);
+  -webkit-transform: translateX(36px);
+  -ms-transform: translateX(36px);
+  transform: translateX(36px);
+}
+
+.c1 {
+  cursor: not-allowed;
+  display: inline-block;
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+}
+
+<div>
+  <div
+    class="c0 c1"
+    disabled=""
+  >
+    <label
+      class="c2"
+      disabled=""
+      role="switch"
+    >
+      <input
+        checked=""
+        class="c3 c4"
+        disabled=""
+        type="checkbox"
+      />
+      <span
+        class="c5 c6"
+        disabled=""
+      />
+    </label>
+  </div>
+</div>
+`;

package/src/components/Toggle/index.ts

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

package/src/components/Toggle/styled.ts

@@ -0,0 +1,84 @@
+import styled from 'styled-components';
+
+import { ToggleProps } from './types';
+import { BaseContainer } from '../BaseContainer';
+import { theme } from '../../theme';
+
+const Slider = styled.span<{ switched?: boolean; disabled?: boolean }>`
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  border-radius: 18px;
+  background-color: #cdd1d5;
+  -webkit-transition: 0.3s;
+  transition: 0.3s;
+
+  &:after {
+    content: '';
+    position: absolute;
+    border-radius: 50%;
+    background-color: ${({ disabled, switched }) =>
+      disabled && switched ? theme.colors.secondary.blue.lightest : 'white'};
+    -webkit-transition: 0.3s;
+    transition: 0.3s;
+  }
+`;
+
+const Input = styled.input`
+  &:focus-visible + ${Slider} {
+    box-shadow: 0 0 0 4px ${theme.colors.brand.blue.light};
+  }
+
+  &:checked + ${Slider} {
+    background-color: #0079d1;
+  }
+
+  &:disabled + ${Slider} {
+    background-color: ${theme.colors.neutral.grey.base};
+  }
+
+  &:checked:disabled + ${Slider} {
+    background-color: ${theme.colors.secondary.blue.light};
+  }
+`;
+
+const Switch = styled.label<ToggleProps>`
+  display: inline-block;
+  position: relative;
+  cursor: ${({ disabled }) => (disabled ? 'default' : 'pointer')};
+  height: ${({ small }) => (small ? '28px' : '36px')};
+  width: ${({ small }) => (small ? '56px' : '72px')};
+
+  input {
+    position: absolute;
+    opacity: 0;
+  }
+
+  // configure size and animation
+  ${Slider}:after {
+    height: ${({ small }) => (small ? '22px' : '28px')};
+    width: ${({ small }) => (small ? '22px' : '28px')};
+    left: ${({ small }) => (small ? '3px' : '4px')};
+    bottom: ${({ small }) => (small ? '3px' : '4px')};
+  }
+
+  ${Input}:checked + ${Slider} {
+    &:after,
+    svg {
+      -webkit-transform: translateX(${({ small }) => (small ? '28px' : '36px')});
+      -ms-transform: translateX(${({ small }) => (small ? '28px' : '36px')});
+      transform: translateX(${({ small }) => (small ? '28px' : '36px')});
+    }
+  }
+`;
+
+const Wrapper = styled(BaseContainer)<{ disabled?: boolean }>`
+  cursor: ${({ disabled }) => (disabled ? 'not-allowed' : 'pointer')};
+  display: inline-block;
+  user-select: none;
+`;
+
+export { Switch, Slider, Input, Wrapper };

package/src/components/Toggle/types.ts

@@ -0,0 +1,10 @@
+import { EventHandlerProps } from '../types';
+
+export interface ToggleProps extends EventHandlerProps {
+  switched?: boolean;
+  name?: string;
+  small?: boolean;
+  className?: string;
+  disabled?: boolean;
+  ariaLabel?: string;
+}

package/src/components/ToggleButton/ToggleButton.stories.tsx

@@ -0,0 +1,19 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { ToggleButton } from './ToggleButton';
+
+const meta = {
+  title: 'Components/Forms/ToggleButton',
+  component: ToggleButton,
+  tags: ['autodocs'],
+} satisfies Meta<typeof ToggleButton>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    checked: true,
+    children: 'Toggle button',
+  },
+};