@veeqo/ui 0.0.4 → 0.0.6

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

@@ -1,218 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`CardHeader renders correctly 1`] = `
-.c2 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: 600;
-  font-size: 16px;
-  line-height: 20px;
-  color: #37424D;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: -0.011rem;
-  -moz-letter-spacing: -0.011rem;
-  -ms-letter-spacing: -0.011rem;
-  letter-spacing: -0.011rem;
-}
-
-.c6 {
-  box-sizing: border-box;
-  display: inline-block;
-  margin: 0;
-  padding: 0;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  line-height: 16px;
-  color: #37424d;
-  font-family: Inter,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol;
-  font-style: normal;
-  font-weight: normal;
-  font-size: 12px;
-  line-height: 16px;
-  color: #637381;
-  -webkit-text-decoration: none;
-  text-decoration: none;
-  -webkit-letter-spacing: 0;
-  -moz-letter-spacing: 0;
-  -ms-letter-spacing: 0;
-  letter-spacing: 0;
-}
-
-.c5 {
-  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;
-  gap: 4px;
-}
-
-.c5 svg {
-  width: 1.5rem;
-  height: 1.5rem;
-}
-
-.c3 {
-  position: relative;
-  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;
-  -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;
-  background-color: transparent;
-  white-space: nowrap;
-  --outline-width: 4px;
-  height: 40px;
-  padding-left: 8px;
-  padding-right: 8px;
-  border-radius: 8px;
-  font-size: 16px;
-}
-
-.c3:hover {
-  cursor: pointer;
-}
-
-.c3:disabled {
-  pointer-events: none;
-  cursor: unset !important;
-}
-
-.c3 > span {
-  position: relative;
-  top: -1px;
-}
-
-.c4 {
-  border-color: transparent;
-  box-shadow: none;
-  color: #37424D;
-}
-
-.c4:hover {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c4:active {
-  background-color: rgba(0,0,0,0.1);
-}
-
-.c4:focus-visible {
-  box-shadow: 0 0 0 var(--outline-width) #80BCE8;
-  outline: 0;
-}
-
-.c4:disabled {
-  background-color: transparent;
-  border-color: transparent;
-}
-
-.c0 {
-  padding-top: 1.5rem;
-  padding-right: 1.5rem;
-  padding-left: 1.5rem;
-  margin-bottom: 1.5rem;
-}
-
-.c0 > * + * {
-  margin-top: 0.25rem;
-}
-
-.c1 {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: end;
-  -webkit-justify-content: flex-end;
-  -ms-flex-pack: end;
-  justify-content: flex-end;
-  -webkit-align-items: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-}
-
-.c1 > *:first-child {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-<div>
-  <header
-    class="c0"
-  >
-    <div
-      class="c1"
-    >
-      <h3
-        class="c2"
-      >
-        Title
-      </h3>
-      <button
-        aria-label="Close"
-        class="c3 c4"
-      >
-        <span
-          class="c5"
-        >
-          <svg
-            fill="none"
-            height="1.5rem"
-            role="presentation"
-            viewBox="0 0 24 24"
-            xmlns="http://www.w3.org/2000/svg"
-          >
-            <path
-              clip-rule="evenodd"
-              d="M19 6.51071L17.4893 5L11.5 10.9893L5.51071 5L4 6.51071L9.98929 12.5L4 18.4893L5.51071 20L11.5 14.0107L17.4893 20L19 18.4893L13.0107 12.5L19 6.51071Z"
-              fill="currentColor"
-              fill-rule="evenodd"
-            />
-          </svg>
-        </span>
-      </button>
-    </div>
-    <span
-      class="c6"
-    >
-      Subtitle
-    </span>
-  </header>
-</div>
-`;

package/src/components/CardHeader/styled.ts

@@ -1,30 +0,0 @@
-import styled from 'styled-components';
-import { sizes } from '../../theme/modules/sizes';
-
-export const Header = styled.header`
-  padding-top: ${sizes.md};
-  padding-right: ${sizes.md};
-  padding-left: ${sizes.md};
-  margin-bottom: ${sizes.md};
-
-  & > * + * {
-    margin-top: ${sizes.xs};
-  }
-`;
-
-export const HeaderGrid = styled.div`
-  /* display: grid;
-  grid-auto-flow: column;
-  grid-template-columns: 1fr;
-  grid-auto-columns: max-content;
-  column-gap: ${sizes.base};
-  align-items: center; */
-
-  display: flex;
-  justify-content: flex-end;
-  align-items: center;
-
-  & > *:first-child {
-    flex: 1;
-  }
-`;

package/src/components/Checkbox/Checkbox.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import { Meta, Story } from '@storybook/react';
-import { Checkbox, CheckboxProps } from './Checkbox';
-
-export default {
-  title: 'Components/Forms/Checkbox',
-  component: Checkbox,
-  tags: ['autodocs'],
-  argTypes: {
-    onChange: {
-      action: 'onChange',
-    },
-  },
-} as Meta;
-
-const baseArgs = {
-  checked: false,
-  disabled: false,
-  indeterminate: false,
-  value: 'test-value',
-};
-
-const Template: Story<CheckboxProps> = (args: any) => <Checkbox {...args} />;
-
-export const Unchecked = Template.bind({});
-Unchecked.args = baseArgs;
-
-export const Checked = Template.bind({});
-Checked.args = {
-  ...baseArgs,
-  checked: true,
-};
-
-export const Indeterminate = Template.bind({});
-Indeterminate.args = {
-  ...baseArgs,
-  checked: true,
-  indeterminate: true,
-};
-
-export const Disabled = Template.bind({});
-Disabled.args = {
-  ...baseArgs,
-  checked: true,
-  disabled: true,
-};
-
-export const WithLabels = Template.bind({});
-WithLabels.args = {
-  ...baseArgs,
-  checked: true,
-  label: 'Label',
-  hint: 'This is an example hint',
-  tooltip: 'This is an example tooltip',
-  error: 'Something went wrong',
-};
-
-export const WithBadge = Template.bind({});
-WithBadge.args = {
-  ...baseArgs,
-  checked: true,
-  label: 'Checkbox with glyph',
-  // Badge: <Glyph name="info" />,
-};

package/src/components/Checkbox/Checkbox.test.tsx

@@ -1,57 +0,0 @@
-import '@testing-library/jest-dom/extend-expect';
-import React from 'react';
-import { act, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-import { Checkbox } from '.';
-
-describe('Checkbox', () => {
-  it('Renders correctly', () => {
-    const { container } = render(<Checkbox checked onChange={() => {}} />);
-    expect(container).toMatchSnapshot();
-  });
-
-  it('can be checked', () => {
-    const onChange = jest.fn();
-    render(<Checkbox checked={false} value="test-value" onChange={onChange} />);
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).not.toBeChecked();
-    act(() => {
-      userEvent.click(checkbox);
-    });
-    expect(onChange).toHaveBeenCalledWith(true, 'test-value');
-  });
-
-  it('can be unchecked', () => {
-    const onChange = jest.fn();
-    render(<Checkbox checked value="test-value" onChange={onChange} />);
-    const checkbox = screen.getByRole('checkbox');
-    expect(checkbox).toBeChecked();
-    act(() => {
-      userEvent.click(checkbox);
-    });
-    expect(onChange).toHaveBeenCalledWith(false, 'test-value');
-  });
-
-  it('supports indeterminate state', () => {
-    const baseProps = { checked: true, onChange: () => {} };
-    let checkbox;
-
-    const { rerender } = render(<Checkbox {...baseProps} indeterminate />);
-    checkbox = screen.getByRole('checkbox') as HTMLInputElement;
-    expect(checkbox.indeterminate).toEqual(true);
-
-    rerender(<Checkbox {...baseProps} indeterminate={false} />);
-    checkbox = screen.getByRole('checkbox') as HTMLInputElement;
-    expect(checkbox.indeterminate).toEqual(false);
-  });
-
-  it('can be unchecked while in indeterminate state', () => {
-    const onChange = jest.fn();
-    render(<Checkbox indeterminate value="test-value" checked onChange={onChange} />);
-    const checkbox = screen.getByRole('checkbox');
-    act(() => {
-      userEvent.click(checkbox);
-    });
-    expect(onChange).toHaveBeenLastCalledWith(false, 'test-value');
-  });
-});

package/src/components/Checkbox/Checkbox.tsx

@@ -1,62 +0,0 @@
-import React, { useCallback, useEffect, useRef } from 'react';
-import { Choice, ForwardedChoiceProps } from '../Choice';
-import { Input } from './styled';
-import { generateId } from '../../utils/generateId';
-
-export type CheckboxValue = string | number;
-
-export interface CheckboxProps extends ForwardedChoiceProps {
-  checked: boolean;
-  indeterminate?: boolean;
-  value?: CheckboxValue;
-  name?: string;
-  disabled?: boolean;
-  ariaLabel?: string;
-  onChange: (checked: boolean, value?: CheckboxValue) => void;
-}
-
-export const Checkbox = ({
-  checked,
-  indeterminate,
-  value,
-  name,
-  disabled,
-  ariaLabel,
-  onChange,
-  ...otherProps
-}: CheckboxProps) => {
-  const id = generateId('checkbox');
-  const checkboxRef = useRef<HTMLInputElement>(null);
-
-  const handleChange = useCallback(
-    (e: React.ChangeEvent<HTMLInputElement>) => {
-      onChange(e.currentTarget.checked, value);
-    },
-    [onChange, value],
-  );
-
-  useEffect(() => {
-    if (!checkboxRef.current) return;
-    if (indeterminate === true) {
-      checkboxRef.current.indeterminate = true;
-      return;
-    }
-    checkboxRef.current.indeterminate = false;
-  }, [indeterminate]);
-
-  return (
-    <Choice id={id} disabled={disabled} {...otherProps}>
-      <Input
-        ref={checkboxRef}
-        id={id}
-        type="checkbox"
-        checked={checked}
-        value={value}
-        name={name}
-        disabled={disabled}
-        aria-label={ariaLabel}
-        onChange={handleChange}
-      />
-    </Choice>
-  );
-};

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

@@ -1,129 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Checkbox Renders correctly 1`] = `
-.c1 {
-  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;
-}
-
-.c1 > * + * {
-  margin-left: 1rem;
-}
-
-.c2 {
-  -webkit-align-self: stretch;
-  -ms-flex-item-align: stretch;
-  align-self: stretch;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-align-items: flex-start;
-  -webkit-box-align: flex-start;
-  -ms-flex-align: flex-start;
-  align-items: flex-start;
-  width: 24px;
-  height: 24px;
-}
-
-.c0 {
-  box-sizing: border-box;
-}
-
-.c0:hover {
-  cursor: pointer;
-}
-
-.c3 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  background-color: transparent;
-  border: 2px solid #959FA8;
-  border-radius: 0.25rem;
-  cursor: pointer;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-transition: box-shadow 0.1s, background-color 0.1s;
-  transition: box-shadow 0.1s, background-color 0.1s;
-}
-
-.c3:checked {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>");
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  background-position: center;
-}
-
-.c3:hover {
-  border-color: #0079D1;
-}
-
-.c3:active {
-  border-color: #0079D1;
-}
-
-.c3:focus {
-  box-shadow: 0 0 0 4px #80BCE8;
-  outline: 0;
-}
-
-.c3:indeterminate {
-  background-color: #0079D1;
-  border-color: #0079D1;
-  background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>");
-  background-repeat: no-repeat;
-  background-size: 1rem;
-  background-position: center;
-}
-
-.c3:disabled {
-  box-shadow: none;
-  background-color: #DFE3E8;
-  border-color: #DFE3E8;
-  color: #637381;
-  cursor: default;
-}
-
-.c3:checked:disabled {
-  background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>");
-}
-
-.c3:indeterminate:disabled {
-  background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>");
-}
-
-<div>
-  <label
-    class="c0"
-    for="test-id"
-  >
-    <div
-      class="c1"
-    >
-      <div
-        class="c2"
-      >
-        <input
-          checked=""
-          class="c3"
-          id="test-id"
-          type="checkbox"
-          value=""
-        />
-      </div>
-    </div>
-  </label>
-</div>
-`;

package/src/components/Checkbox/styled.ts

@@ -1,67 +0,0 @@
-import styled from 'styled-components';
-
-import { theme } from '../../theme';
-
-const { colors, sizes, radius } = theme;
-
-export const Input = styled.input`
-  appearance: none;
-  width: 18px;
-  height: 18px;
-  background-color: transparent;
-  border: 2px solid ${colors.neutral.ink.lightest};
-  border-radius: ${radius.base};
-  cursor: pointer;
-  flex-shrink: 0;
-
-  transition:
-    box-shadow 0.1s,
-    background-color 0.1s;
-
-  &:checked {
-    background-color: ${colors.secondary.blue.base};
-    border-color: ${colors.secondary.blue.base};
-    background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='white' /></svg>");
-    background-repeat: no-repeat;
-    background-size: ${sizes[4]};
-    background-position: center;
-  }
-
-  &:hover {
-    border-color: ${colors.secondary.blue.base};
-  }
-
-  &:active {
-    border-color: ${colors.secondary.blue.base};
-  }
-
-  &:focus {
-    box-shadow: 0 0 0 4px ${colors.secondary.blue.light};
-    outline: 0;
-  }
-
-  &:indeterminate {
-    background-color: ${colors.secondary.blue.base};
-    border-color: ${colors.secondary.blue.base};
-    background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='white'/></svg>");
-    background-repeat: no-repeat;
-    background-size: ${sizes[4]};
-    background-position: center;
-  }
-
-  &:disabled {
-    box-shadow: none;
-    background-color: ${colors.neutral.grey.base};
-    border-color: ${colors.neutral.grey.base};
-    color: ${colors.neutral.ink.light};
-    cursor: default;
-  }
-
-  &:checked:disabled {
-    background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'><path d='M8.56846 16.3657L3.86697 11.6642L2.2998 13.2313L8.56846 19.5L22.0013 6.06716L20.4341 4.5L8.56846 16.3657Z' fill='%23637381' /></svg>");
-  }
-
-  &:indeterminate:disabled {
-    background-image: url("data:image/svg+xml;utf-8,<svg width='24' height='24' viewBox='0 0 24 24' fill='none' xmlns='http://www.w3.org/2000/svg'><rect x='5' y='11' width='14' height='3' fill='%23637381'/></svg>");
-  }
-`;