@veeqo/ui 0.0.4 → 0.0.6

package/src/components/SegmentedControl/styled.ts

@@ -1,50 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme';
-
-import { BaseContainer } from '../BaseContainer';
-
-const buttonBackgroundColor = theme.colors.neutral.grey.lightest;
-const buttonBorderColor = theme.colors.neutral.grey.dark;
-
-const activeButtonColor = theme.colors.secondary.blue.dark;
-
-export const SegmentedControlContainer = styled(BaseContainer)`
-  display: flex;
-  flex-direction: row;
-
-  > button {
-    border-radius: 0;
-    box-shadow: none;
-
-    :focus,
-    :active {
-      background-color: ${buttonBackgroundColor};
-      border-color: ${buttonBorderColor};
-      box-shadow: none;
-    }
-  }
-
-  > .veeqo-components-active-button {
-    :focus,
-    :active {
-      background-color: ${activeButtonColor};
-      border-color: ${activeButtonColor};
-    }
-  }
-
-  > button:not(:first-child) {
-    border-left: none;
-  }
-
-  > .veeqo-components-active-button + button {
-    border-left: 1px solid ${theme.colors.neutral.grey.dark};
-  }
-
-  > button:first-child {
-    border-radius: 20px 0px 0px 20px;
-  }
-
-  > button:last-child {
-    border-radius: 0px 20px 20px 0px;
-  }
-`;

package/src/components/SegmentedControl/types.ts

@@ -1,13 +0,0 @@
-type Option = {
-  key: string;
-  label: string;
-  value: string;
-  disabled?: boolean;
-};
-
-export type SegmentedControlProps = {
-  options: Option[];
-  selected: string;
-  className?: string;
-  onChange: (selectedButton: string) => void;
-};

package/src/components/Select/Select.stories.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { Select } from '.';
-
-export default {
-  title: 'Components/Forms/Select',
-  component: Select,
-  tags: ['autodocs'],
-};
-
-const baseArgs = {
-  disabled: false,
-  error: '',
-  hasError: false,
-  hint: '',
-  label: '',
-  tooltip: '',
-  options: [
-    { value: 'NONE', label: 'None (+£0.00)' },
-    { value: 'DELIVERY', label: 'Delivery confirmation (+$2.99)' },
-    { value: 'ADULT', label: 'Adult confirmation (+$3.99)' },
-  ],
-  size: 'base',
-};
-
-export const InputOnly = (args: any) => <Select {...args} />;
-
-InputOnly.args = baseArgs;
-
-export const WithLabels = (args: any) => <Select {...args} />;
-
-WithLabels.args = {
-  ...baseArgs,
-  label: 'Confirmation',
-  hint: 'How delivery of the shipment should be confirmed',
-  error: 'This option is not available',
-  tooltip: 'This is an example tooltip',
-};

package/src/components/Select/Select.test.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Select } from '.';
-
-describe('Select', () => {
-  test('Renders correctly', () => {
-    const { asFragment } = render(
-      <Select
-        label="Test label"
-        hint="Test hint"
-        error="Test error"
-        options={[
-          { label: 'One', value: 'one' },
-          { label: 'Two', value: 'two' },
-          { label: 'Three', value: 'three' },
-        ]}
-        value="one"
-        onChange={() => {}}
-      />,
-    );
-    const tree = asFragment();
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('has an accessible name', () => {
-    render(
-      <Select
-        label="Test label"
-        value=""
-        onChange={() => {}}
-        options={[{ label: 'One', value: '1' }]}
-      />,
-    );
-    const select = screen.getByRole('combobox', { name: 'Test label' });
-    expect(select).toBeVisible();
-  });
-});

package/src/components/Select/Select.tsx

@@ -1,58 +0,0 @@
-import React, { ChangeEvent, useCallback } from 'react';
-
-import { SelectInput } from './styled';
-import { withLabels } from '../../hoc';
-
-type SelectOption = {
-  label: string;
-  value: string;
-  disabled?: boolean;
-};
-
-export interface SelectProps {
-  className?: string;
-  options: Array<SelectOption>;
-  value: string;
-  size?: 'sm' | 'base';
-  disabled?: boolean;
-  hasError?: boolean;
-  onChange: (value: string) => void;
-}
-
-export const Select = withLabels(
-  ({
-    className,
-    options,
-    value,
-    onChange,
-    size,
-    disabled,
-    hasError,
-    ...otherProps
-  }: SelectProps) => {
-    const handleChange = useCallback(
-      (e: ChangeEvent<HTMLSelectElement>) => {
-        onChange(e.currentTarget.value);
-      },
-      [onChange],
-    );
-
-    return (
-      <SelectInput
-        className={className}
-        sizeVariant={size}
-        value={value}
-        onChange={handleChange}
-        disabled={disabled}
-        hasError={hasError}
-        {...otherProps}
-      >
-        {options.map((option) => (
-          <option key={option.label} value={option.value} disabled={option.disabled}>
-            {option.label}
-          </option>
-        ))}
-      </SelectInput>
-    );
-  },
-);

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

@@ -1,199 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Select Renders correctly 1`] = `
-<DocumentFragment>
-  .c5 {
-  box-sizing: border-box;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: 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;
-  padding: 0 2.5rem 0 0.5rem;
-  border-radius: 4px;
-  background-color: white;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position: right 0.5em top 50%, 0 0;
-  height: 40px;
-  font-size: 14px;
-}
-
-.c5:focus {
-  border-color: #0079d1;
-  box-shadow: 0 0 0 4px #80bce8;
-  outline: 0;
-}
-
-.c5:invalid {
-  border-color: #eb5757;
-  box-shadow: 0 0 0 4px #f7bcbc;
-  outline: 0;
-}
-
-.c5:disabled {
-  box-shadow: none;
-  background-color: #f2f3f5;
-  border-color: #959fa8;
-  color: #637381;
-}
-
-.c0 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: stretch;
-  -webkit-box-align: stretch;
-  -ms-flex-align: stretch;
-  align-items: stretch;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-}
-
-.c0 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c0 > * + * {
-  margin-top: 0.5rem;
-}
-
-.c2 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  -webkit-box-pack: start;
-  -webkit-justify-content: flex-start;
-  -ms-flex-pack: start;
-  justify-content: flex-start;
-  -webkit-flex-direction: row;
-  -ms-flex-direction: row;
-  flex-direction: row;
-}
-
-.c2 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c2 > * + * {
-  margin-left: 0.5rem;
-}
-
-.c3 {
-  display: block;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  color: #37424D;
-}
-
-.c4 {
-  display: block;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 0.75rem;
-  line-height: 1rem;
-  color: #637381;
-}
-
-.c6 {
-  display: block;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 14px;
-  font-weight: 600;
-  line-height: 20px;
-  color: #EB5757;
-}
-
-.c6::before {
-  content: '';
-  position: absolute;
-  top: 0;
-  bottom: 0;
-  left: calc(0.5rem * -1);
-  width: 2px;
-  background-color: #EB5757;
-}
-
-.c1 {
-  position: relative;
-}
-
-<div
-    class="c0 c1"
-    spacing="sm"
-  >
-    <div>
-      <div
-        class="c2"
-        direction="horizontal"
-        spacing="sm"
-      >
-        <label
-          class="c3"
-          for="test-id"
-        >
-          Test label
-        </label>
-      </div>
-      <span
-        class="c4"
-      >
-        Test hint
-      </span>
-    </div>
-    <select
-      class="c5"
-      id="test-id"
-    >
-      <option
-        value="one"
-      >
-        One
-      </option>
-      <option
-        value="two"
-      >
-        Two
-      </option>
-      <option
-        value="three"
-      >
-        Three
-      </option>
-    </select>
-    <span
-      class="c6"
-    >
-      Test error
-    </span>
-  </div>
-</DocumentFragment>
-`;

package/src/components/Select/styled.ts

@@ -1,53 +0,0 @@
-import styled from 'styled-components';
-
-export const SelectInput = styled.select<any>`
-  box-sizing: border-box;
-  appearance: none;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2.5rem 0 0.5rem;
-  border-radius: 4px;
-  background-color: white;
-  border: 1px solid #959fa8;
-  color: #1b2126;
-  background-image: url("data:image/svg+xml,%3Csvg width='24' height='24' viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fillRule='evenodd' clipRule='evenodd' d='M4 6L8 10L12 6H4Z' fill='currentColor' /%3E%3C/svg%3E");
-  background-repeat: no-repeat;
-  background-position:
-    right 0.5em top 50%,
-    0 0;
-
-  ${({ sizeVariant }) => {
-    let height = '40px';
-    let fontSize = '14px';
-
-    if (sizeVariant === 'sm') {
-      height = '32px';
-      fontSize = '12px';
-    }
-
-    return `
-      height: ${height};
-      font-size: ${fontSize};
-    `;
-  }}
-
-  &:focus {
-    border-color: #0079d1;
-    box-shadow: 0 0 0 4px #80bce8;
-    outline: 0;
-  }
-
-  &:invalid {
-    border-color: #eb5757;
-    box-shadow: 0 0 0 4px #f7bcbc;
-    outline: 0;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: #f2f3f5;
-    border-color: #959fa8;
-    color: #637381;
-  }
-`;

package/src/components/SimpleTable/SimpleTable.stories.tsx

@@ -1,60 +0,0 @@
-import React from 'react';
-import type { Meta, StoryObj } from '@storybook/react';
-import { SimpleTable } from './SimpleTable';
-
-const meta = {
-  title: 'Components/Layout/SimpleTable',
-  component: SimpleTable,
-  tags: ['autodocs'],
-} satisfies Meta<typeof SimpleTable>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    children: (
-      <>
-        <SimpleTable.Header>
-          <SimpleTable.Row>
-            <SimpleTable.HeaderCell>Name</SimpleTable.HeaderCell>
-            <SimpleTable.HeaderCell>Address</SimpleTable.HeaderCell>
-          </SimpleTable.Row>
-        </SimpleTable.Header>
-        <SimpleTable.Body>
-          <SimpleTable.Row>
-            <SimpleTable.Cell>Veeqo</SimpleTable.Cell>
-            <SimpleTable.Cell>221 High St, Swansea SA1 1NW</SimpleTable.Cell>
-          </SimpleTable.Row>
-        </SimpleTable.Body>
-      </>
-    ),
-  },
-};
-
-export const Striped: Story = {
-  args: {
-    striped: true,
-    children: (
-      <>
-        <SimpleTable.Header>
-          <SimpleTable.Row>
-            <SimpleTable.HeaderCell>Name</SimpleTable.HeaderCell>
-            <SimpleTable.HeaderCell>Address</SimpleTable.HeaderCell>
-          </SimpleTable.Row>
-        </SimpleTable.Header>
-        <SimpleTable.Body>
-          <SimpleTable.Row>
-            <SimpleTable.Cell>Veeqo</SimpleTable.Cell>
-            <SimpleTable.Cell>221 High St, Swansea SA1 1NW</SimpleTable.Cell>
-          </SimpleTable.Row>
-          <SimpleTable.Row>
-            <SimpleTable.Cell>John Smith</SimpleTable.Cell>
-            <SimpleTable.Cell>27 Park Avenue, London SE36 1YP</SimpleTable.Cell>
-          </SimpleTable.Row>
-        </SimpleTable.Body>
-      </>
-    ),
-  },
-};

package/src/components/SimpleTable/SimpleTable.test.tsx

@@ -1,28 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { SimpleTable } from './SimpleTable';
-
-const { Header, Body, Row, HeaderCell, Cell } = SimpleTable;
-
-describe('SimpleTable', () => {
-  it('Renders correctly', () => {
-    const { container } = render(
-      <SimpleTable striped>
-        <Header>
-          <Row>
-            <HeaderCell>Name</HeaderCell>
-            <HeaderCell>Address</HeaderCell>
-          </Row>
-        </Header>
-        <Body>
-          <Row>
-            <Cell>Veeqo</Cell>
-            <Cell>221 High St, Swansea SA1 1NW</Cell>
-          </Row>
-        </Body>
-      </SimpleTable>,
-    );
-
-    expect(container).toMatchSnapshot();
-  });
-});

package/src/components/SimpleTable/SimpleTable.tsx

@@ -1,18 +0,0 @@
-import React from 'react';
-import { TableBody, TableCell, TableHeader, TableRow, TableHeaderCell, Table } from './styled';
-import { SimpleTableProps } from './types';
-
-/**
- * A simple table component which provides flexible, pre-styled table elements.
- */
-export const SimpleTable = ({ striped = true, className, children }: SimpleTableProps) => (
-  <Table striped={striped} className={className}>
-    {children}
-  </Table>
-);
-
-SimpleTable.Header = TableHeader;
-SimpleTable.Body = TableBody;
-SimpleTable.Row = TableRow;
-SimpleTable.HeaderCell = TableHeaderCell;
-SimpleTable.Cell = TableCell;

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

@@ -1,87 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`SimpleTable Renders correctly 1`] = `
-.c1 {
-  background-color: white;
-}
-
-.c5.c5.c5 tr:hover td {
-  background-color: #D9EBF8;
-}
-
-.c2 {
-  position: relative;
-  padding: 1.25rem 1rem;
-  text-align: left;
-  background-color: white;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 12px;
-  font-weight: normal;
-  color: #37424D;
-  line-height: 1rem;
-}
-
-.c2 > * {
-  vertical-align: middle;
-}
-
-.c3 {
-  border-bottom: 1px solid #CDD1D5;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-size: 12px;
-  font-weight: 600;
-  color: #37424D;
-}
-
-.c0 {
-  width: 100%;
-  border-spacing: 0;
-}
-
-.c0 .c4 tr:nth-child(even) td {
-  background-color: #FAFAFB;
-}
-
-<div>
-  <table
-    class="c0"
-  >
-    <thead
-      class="c1"
-    >
-      <tr
-        class=""
-      >
-        <th
-          class="c2 c3"
-        >
-          Name
-        </th>
-        <th
-          class="c2 c3"
-        >
-          Address
-        </th>
-      </tr>
-    </thead>
-    <tbody
-      class="c4 c5"
-    >
-      <tr
-        class=""
-      >
-        <td
-          class="c2"
-        >
-          Veeqo
-        </td>
-        <td
-          class="c2"
-        >
-          221 High St, Swansea SA1 1NW
-        </td>
-      </tr>
-    </tbody>
-  </table>
-</div>
-`;