@veeqo/ui 0.0.1 → 0.0.4

package/src/components/ToggleButton/ToggleButton.test.tsx

@@ -0,0 +1,12 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import { ToggleButton } from './ToggleButton';
+
+test('Renders correctly', () => {
+  const { container } = render(
+    <ToggleButton checked onChange={() => {}}>
+      Toggle me
+    </ToggleButton>,
+  );
+  expect(container).toMatchSnapshot();
+});

package/src/components/ToggleButton/ToggleButton.tsx

@@ -0,0 +1,31 @@
+import React, { ReactNode } from 'react';
+
+import { StyledButton } from './styled';
+
+export interface ToggleButtonProps {
+  children: ReactNode;
+  checked: boolean;
+  size?: 'sm' | 'base';
+  disabled?: boolean;
+  onChange: (checked: boolean) => void;
+}
+
+export const ToggleButton = ({
+  children,
+  checked,
+  size = 'base',
+  disabled = false,
+  onChange,
+}: ToggleButtonProps) => (
+  <StyledButton
+    type="button"
+    checked={checked}
+    size={size}
+    disabled={disabled}
+    aria-pressed={checked}
+    tabIndex="0"
+    onClick={() => onChange(!checked)}
+  >
+    {children}
+  </StyledButton>
+);

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

@@ -0,0 +1,83 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Renders correctly 1`] = `
+.c0 {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
+  box-sizing: border-box;
+  display: -webkit-inline-box;
+  display: -webkit-inline-flex;
+  display: -ms-inline-flexbox;
+  display: inline-flex;
+  -webkit-align-items: center;
+  -webkit-box-align: center;
+  -ms-flex-align: center;
+  align-items: center;
+  -webkit-box-pack: center;
+  -webkit-justify-content: center;
+  -ms-flex-pack: center;
+  justify-content: center;
+  -webkit-flex-shrink: 0;
+  -ms-flex-negative: 0;
+  flex-shrink: 0;
+  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
+  font-weight: 400;
+  border: 1px solid;
+  box-shadow: 0 1px 3px rgba(55,66,77,0.15);
+  --outline-width: 4px;
+  height: 40px;
+  padding-left: 24px;
+  padding-right: 24px;
+  border-radius: 8px;
+  font-size: 16px;
+  background-color: #0079D1;
+  border-color: #0079D1;
+  color: white;
+}
+
+.c0 > * + * {
+  margin-left: 8px;
+}
+
+.c0:hover {
+  cursor: pointer;
+  background-color: #005A9C;
+}
+
+.c0:active {
+  background-color: #005A9C;
+  border-color: #005A9C;
+  box-shadow: 0 0 0 var(--outline-width) #80bce8;
+}
+
+.c0:focus {
+  box-shadow: 0 0 0 var(--outline-width) #80bce8;
+  outline: 0;
+}
+
+.c0:disabled {
+  cursor: unset;
+  box-shadow: none;
+  background-color: #dfe3e8;
+  border-color: #dfe3e8;
+  color: #637381;
+}
+
+.c0 > span {
+  position: relative;
+  top: -1px;
+}
+
+<div>
+  <button
+    aria-pressed="true"
+    class="c0"
+    tabindex="0"
+    type="button"
+  >
+    Toggle me
+  </button>
+</div>
+`;

package/src/components/ToggleButton/index.ts

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

package/src/components/ToggleButton/styled.ts

@@ -0,0 +1,92 @@
+import styled from 'styled-components';
+
+import { theme } from '../../theme';
+
+export const StyledButton = styled.button<any>`
+  user-select: none;
+  box-sizing: border-box;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-family: ${theme.fontFamily};
+  font-weight: 400;
+  border: 1px solid;
+  box-shadow: 0 1px 3px rgba(55, 66, 77, 0.15);
+
+  ${({ size, checked }) => {
+    let height = '40px';
+    let paddingLeft = '24px';
+    let paddingRight = '24px';
+    let borderRadius = '8px';
+    let fontSize = '16px';
+    let outlineWidth = '4px';
+
+    let backgroundColor = 'white';
+    let borderColor = '#CDD1D5';
+    let color = '#37424D';
+
+    if (size === 'sm') {
+      height = '32px';
+      paddingLeft = '16px';
+      paddingRight = '16px';
+      borderRadius = '4px';
+      fontSize = '14px';
+      outlineWidth = '2px';
+    }
+
+    if (checked) {
+      backgroundColor = '#0079D1';
+      borderColor = '#0079D1';
+      color = 'white';
+    }
+
+    return `
+      --outline-width: ${outlineWidth};
+
+      height: ${height};
+      padding-left: ${paddingLeft};
+      padding-right: ${paddingRight};
+      border-radius: ${borderRadius};
+      font-size: ${fontSize};
+
+      background-color: ${backgroundColor};
+      border-color: ${borderColor};
+      color: ${color};
+    `;
+  }}
+
+  & > * + * {
+    margin-left: 8px;
+  }
+
+  &:hover {
+    cursor: pointer;
+    background-color: ${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};
+  }
+
+  &:active {
+    background-color: ${({ checked }) => (checked ? '#005A9C' : '#FAFAFB')};
+    border-color: ${({ checked }) => (checked ? '#005A9C' : '#0079D1')};
+    box-shadow: 0 0 0 var(--outline-width) #80bce8;
+  }
+
+  &:focus {
+    box-shadow: 0 0 0 var(--outline-width) #80bce8;
+    outline: 0;
+  }
+
+  &:disabled {
+    cursor: unset;
+    box-shadow: none;
+    background-color: #dfe3e8;
+    border-color: #dfe3e8;
+    color: #637381;
+  }
+
+  /* TODO: - Fix typography so these hacks aren't needed */
+  & > span {
+    position: relative;
+    top: -1px;
+  }
+`;

package/src/components/Tooltip/Docs.mdx

@@ -0,0 +1,14 @@
+import { Meta, Primary, Controls, Story } from '@storybook/blocks';
+import * as TooltipStories from './Tooltip.stories';
+
+<Meta of={TooltipStories} />
+
+# Tooltip
+
+The tooltip component provides a custom tooltip which displays its' `content` (or `text`) when its children are hovered over.
+
+<Primary />
+
+## Props
+
+<Controls />

package/src/components/Tooltip/Tooltip.stories.tsx

@@ -0,0 +1,26 @@
+import React from 'react';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Tooltip } from './Tooltip';
+
+const meta = {
+  title: 'Components/UI/Tooltip',
+  component: Tooltip,
+} satisfies Meta<typeof Tooltip>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  args: {
+    content: (
+      <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div>first</div>
+        <div>second</div>
+        <div>fifth</div>
+        <div>sixs</div>
+      </div>
+    ),
+    children: 'Hover to see tooltip!',
+  },
+};

package/src/components/Tooltip/Tooltip.test.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { Tooltip } from './Tooltip';
+import '@testing-library/jest-dom';
+
+describe('Tooltip', () => {
+  test('it matches snapshot', () => {
+    const { container } = render(<Tooltip text="test-text" />);
+    expect(container).toMatchSnapshot();
+  });
+
+  test('it renders correctly', async () => {
+    render(<Tooltip text="test-text">Testing tooltip</Tooltip>);
+    userEvent.hover(screen.getByText('Testing tooltip'));
+    await screen.findByRole('tooltip');
+    expect(screen.getByText('test-text'));
+  });
+
+  test.each([undefined, ''])('it does not show up when content text is falsey', (text) => {
+    render(<Tooltip text={text}>Testing tooltip</Tooltip>);
+    userEvent.hover(screen.getByText('Testing tooltip'));
+    expect(screen.queryByRole('tooltip')).toBeNull();
+  });
+});

package/src/components/Tooltip/Tooltip.tsx

@@ -0,0 +1,95 @@
+import React, { useState, useCallback } from 'react';
+import { usePopper } from 'react-popper';
+import ReactDOM from 'react-dom';
+import { theme } from '../../theme';
+
+import { Sides, IConfig, TooltipProps, Placement } from './types';
+
+import { Container, TooltipText, Tip, Hoverable, Wrap, Triangle } from './styled';
+
+const defaultConfig: IConfig = {
+  duration: 400,
+  side: Sides.TOP,
+  triangleOffset: 8,
+  tipMinWidth: 60,
+  tipMaxWidth: 340,
+};
+
+export const Tooltip = ({
+  children,
+  text,
+  content,
+  config,
+  reversed = false,
+  className,
+  withTriangle,
+  initialShouldShow = false,
+  useReactPortal = true,
+}: TooltipProps): JSX.Element | null => {
+  const hasText = text ? text.trim().length > 0 : false;
+  const usedConfig = { ...defaultConfig, ...config };
+  const { duration, side, triangleOffset, tipMinWidth, tipMaxWidth } = usedConfig;
+
+  const classNames = {
+    container: className && `${className} ${className}-container`,
+    tip: className && `${className}-tip`,
+    wrap: className && `${className}-wrap`,
+    triangle: className && `${className}-triangle`,
+    hoverable: className && `${className}-hoverable`,
+  };
+
+  const [shouldShow, setShouldShow] = useState(initialShouldShow);
+  const [hoverableElement, setHoverableElement] = useState<HTMLDivElement | null>(null);
+  const [popperElement, setPopperElement] = useState<HTMLDivElement | null>(null);
+
+  const { styles, attributes } = usePopper(hoverableElement, popperElement, {
+    placement: `${side}-${reversed ? 'end' : 'start'}` as Placement,
+    modifiers: [
+      {
+        name: 'offset',
+        options: {
+          offset: [0, 10],
+        },
+      },
+    ],
+  });
+
+  const show = useCallback(() => setShouldShow(true), [setShouldShow]);
+  const hide = useCallback(() => setShouldShow(false), [setShouldShow]);
+
+  const tooltipStyles = {
+    ...styles.popper,
+    zIndex: theme.layers.tooltip,
+  };
+
+  const tooltipMarkup = shouldShow && hasText && (
+    <Tip
+      className={classNames.tip}
+      ref={setPopperElement}
+      duration={duration}
+      triangleOffsetSize={triangleOffset}
+      style={tooltipStyles}
+      {...attributes.popper}
+      role="tooltip"
+    >
+      <Wrap className={classNames.wrap} tipMinWidth={tipMinWidth} tipMaxWidth={tipMaxWidth}>
+        {content ?? <TooltipText>{text}</TooltipText>}
+      </Wrap>
+      {withTriangle && <Triangle id="veeqo-components-triangle" className={classNames.triangle} />}
+    </Tip>
+  );
+
+  return (
+    <Container className={classNames.container}>
+      {useReactPortal ? ReactDOM.createPortal(tooltipMarkup, document.body) : tooltipMarkup}
+      <Hoverable
+        ref={setHoverableElement}
+        className={classNames.hoverable}
+        onMouseEnter={show}
+        onMouseLeave={hide}
+      >
+        {children}
+      </Hoverable>
+    </Container>
+  );
+};

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

@@ -0,0 +1,17 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Tooltip it matches snapshot 1`] = `
+.c0 {
+  display: inline-block;
+}
+
+<div>
+  <div
+    class="c0"
+  >
+    <div
+      class="c0"
+    />
+  </div>
+</div>
+`;

package/src/components/Tooltip/index.ts

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

package/src/components/Tooltip/styled.ts

@@ -0,0 +1,74 @@
+import styled from 'styled-components';
+
+import { Text } from '../Text';
+
+import { theme } from '../../theme';
+
+import { TriangleProps, TipProps, WrapProps } from './types';
+
+const Container = styled.div`
+  display: inline-block;
+`;
+
+const Hoverable = styled(Container)``;
+
+const TooltipText = styled(Text)`
+  color: ${theme.colors.neutral.grey.lightest};
+  white-space: pre-line;
+  overflow-wrap: break-word;
+  display: inline;
+`;
+
+const Triangle = styled.div`
+  background-color: #333;
+  height: 16px;
+  width: 16px;
+  position: absolute;
+  transform: rotate(45deg);
+  z-index: 12;
+`;
+
+const Tip = styled.div<TipProps & TriangleProps>`
+  transition: ${({ duration }) => `opacity ${duration}ms`};
+
+  &.tip-enter {
+    opacity: 0;
+  }
+
+  &.tip-enter-active {
+    opacity: 1;
+  }
+
+  &[data-popper-placement^='top-start'] > #veeqo-components-triangle {
+    left: 8px;
+    bottom: 0px;
+  }
+  &[data-popper-placement^='top-end'] > #veeqo-components-triangle {
+    right: 8px;
+    bottom: 0px;
+  }
+
+  &[data-popper-placement^='bottom-start'] > #veeqo-components-triangle {
+    left: 8px;
+    top: -4px;
+  }
+  &[data-popper-placement^='bottom-end'] > #veeqo-components-triangle {
+    right: 8px;
+    top: -4px;
+  }
+`;
+
+const Wrap = styled(Container)<WrapProps>`
+  font-size: 14px;
+  overflow: hidden;
+  padding: 16px 20px;
+  border-radius: 4px;
+  box-shadow: 0 6px 1em -0.5em rgba(0, 0, 0, 0.35);
+  background: #333;
+  color: #fff;
+  z-index: 10;
+  min-width: ${({ tipMinWidth }) => tipMinWidth}px;
+  max-width: ${({ tipMaxWidth }) => tipMaxWidth}px;
+`;
+
+export { Container, TooltipText, Tip, Hoverable, Wrap, Triangle };

package/src/components/Tooltip/types.ts

@@ -0,0 +1,44 @@
+import { ReactNode } from 'react';
+
+export interface IConfig {
+  duration: number;
+  side: Sides.TOP | Sides.BOTTOM;
+  triangleOffset: number;
+  tipMinWidth: number;
+  tipMaxWidth: number;
+  tipOffset?: number;
+}
+
+export interface TooltipProps {
+  children?: any;
+  text?: string;
+  content?: ReactNode;
+  config?: IConfig;
+  reversed?: boolean;
+  additionalOffset?: number;
+  className?: string;
+  withTriangle?: boolean;
+  unmountOnExit?: boolean;
+  initialShouldShow?: boolean;
+  useReactPortal?: boolean;
+}
+
+export enum Position {
+  end = 'end',
+  start = 'start',
+}
+
+export enum Sides {
+  BOTTOM = 'bottom',
+  TOP = 'top',
+}
+
+export interface TriangleProps {
+  triangleOffsetSize: number;
+}
+
+export type TipProps = Pick<IConfig, 'duration'>;
+
+export type WrapProps = Pick<IConfig, 'tipMinWidth' | 'tipMaxWidth'>;
+
+export type Placement = 'top-start' | 'bottom-start' | 'top-end' | 'bottom-end';

package/src/components/VideoModal/VideoModal.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { VideoModal } from './VideoModal';
+
+const meta = {
+  title: 'Components/UI/VideoModal',
+  component: VideoModal,
+  tags: ['autodocs'],
+} satisfies Meta<typeof VideoModal>;
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+  render: () => {
+    const [shouldShow, setShouldShow] = React.useState(false);
+
+    return (
+      <>
+        <button onClick={() => setShouldShow(true)}>Click to show the video</button>
+        <VideoModal
+          id={'watch_demonstration'}
+          youtubeVideoId={'dQw4w9WgXcQ'}
+          showVideoModal={shouldShow}
+          handleCloseClick={() => setShouldShow(false)}
+        />
+      </>
+    );
+  },
+  args: {
+    id: 'watch_demonstration',
+    youtubeVideoId: 'Fb8C_i4o1yo',
+    showVideoModal: false,
+  },
+};

package/src/components/VideoModal/VideoModal.test.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import '@testing-library/jest-dom';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { VideoModal } from './index';
+import { VideoModalDemo } from './VideoModalDemo';
+
+jest.mock('react-scrolllock-configurable', () => ({
+  __esModule: true,
+  default: ({ children }: any) => <div>{children}</div>,
+}));
+
+describe('Video Modal', () => {
+  test('it renders correctly', () => {
+    render(
+      <VideoModal
+        id="watch_demonstration"
+        youtubeVideoId="Fb8C_i4o1yo"
+        showVideoModal
+        handleCloseClick={() => {}}
+      />,
+    );
+
+    expect(screen.getByTestId('video-modal_popup-content')).toMatchSnapshot();
+  });
+
+  test('it responds to open & close actions', () => {
+    render(<VideoModalDemo />);
+    const popupContent = screen.getByTestId('video-modal_popup-content');
+
+    userEvent.click(screen.getByRole('button'));
+    expect(popupContent).toBeVisible();
+    userEvent.click(screen.getByTestId('video-modal--close')!);
+    expect(popupContent).not.toBeVisible();
+  });
+});

package/src/components/VideoModal/VideoModal.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import { Popup } from './components/Popup';
+import { VideoModalProps } from './types';
+import { PopupContent, VideoWrapper, ButtonSC } from './styled';
+import { useClickOutside } from '../../hooks';
+import { CrossIcon } from '../../tempIcons/CrossIcon';
+
+export const VideoModal = ({
+  id,
+  youtubeVideoId,
+  showVideoModal,
+  handleCloseClick,
+}: VideoModalProps) => {
+  const ref = useClickOutside(showVideoModal, handleCloseClick);
+
+  return (
+    <Popup shouldShow={showVideoModal} className={`${id}-video`}>
+      <PopupContent
+        data-testid="video-modal_popup-content"
+        className={`video-modal--${showVideoModal ? 'visible' : 'hidden'}`}
+      >
+        <VideoWrapper ref={ref}>
+          <iframe
+            title={`${id}-video`}
+            src={`https://www.youtube.com/embed/${youtubeVideoId}`}
+            frameBorder="0"
+            allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
+            allowFullScreen
+          />
+          <ButtonSC
+            variant="flat"
+            onClick={handleCloseClick}
+            data-testid="video-modal--close"
+            icon={<CrossIcon color="white" />}
+          />
+        </VideoWrapper>
+      </PopupContent>
+    </Popup>
+  );
+};

package/src/components/VideoModal/VideoModalDemo.tsx

@@ -0,0 +1,19 @@
+import React, { useState } from 'react';
+import { Button } from '../Button';
+import { VideoModal } from './VideoModal';
+
+export const VideoModalDemo = () => {
+  const [shouldShow, setShouldShow] = useState(false);
+
+  return (
+    <>
+      <Button onClick={() => setShouldShow(true)}>Click to show the video</Button>
+      <VideoModal
+        id="watch_demonstration"
+        youtubeVideoId="Fb8C_i4o1yo"
+        showVideoModal={shouldShow}
+        handleCloseClick={() => setShouldShow(false)}
+      />
+    </>
+  );
+};