@veeqo/ui 0.0.1 → 0.0.4

package/src/components/SegmentedControl/index.ts

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

package/src/components/SegmentedControl/styled.ts

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

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

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

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

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

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

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

package/src/components/Select/styled.ts

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

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

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

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

@@ -0,0 +1,87 @@
+// 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>
+`;

package/src/components/SimpleTable/index.ts

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