@veeqo/ui 0.0.1 → 0.0.4

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

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

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

package/src/components/CardHeader/styled.ts

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

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

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

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

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

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

package/src/components/Checkbox/styled.ts

@@ -0,0 +1,67 @@
+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>");
+  }
+`;