@veeqo/ui 0.0.3 → 0.0.6

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

@@ -1,12 +0,0 @@
-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

@@ -1,31 +0,0 @@
-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

@@ -1,83 +0,0 @@
-// 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/styled.ts

@@ -1,92 +0,0 @@
-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

@@ -1,14 +0,0 @@
-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

@@ -1,26 +0,0 @@
-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

@@ -1,25 +0,0 @@
-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

@@ -1,95 +0,0 @@
-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

@@ -1,17 +0,0 @@
-// 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/styled.ts

@@ -1,74 +0,0 @@
-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

@@ -1,44 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,36 +0,0 @@
-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

@@ -1,40 +0,0 @@
-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

@@ -1,19 +0,0 @@
-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)}
-      />
-    </>
-  );
-};