@veeqo/ui 0.0.4 → 0.0.7

package/src/components/Choice/Choice.tsx

@@ -1,89 +0,0 @@
-import React, { ReactNode } from 'react';
-import { Stack } from '../Stack';
-import { theme } from '../../theme';
-
-import {
-  Wrapper,
-  BorderedWrapper,
-  RootLayout,
-  InputLayout,
-  AccessoryLayout,
-  TextLayout,
-  LabelText,
-  HintText,
-  ErrorText,
-  BlockTooltip,
-} from './components/styled';
-import { HelpIcon } from '../../tempIcons/HelpIcon';
-
-export interface ForwardedChoiceProps {
-  disabled?: boolean;
-  label?: string;
-  hint?: string;
-  tooltip?: string;
-  error?: string;
-  bordered?: boolean;
-  Badge?: ReactNode;
-  Accessory?: ReactNode;
-  Footer?: ReactNode;
-}
-
-export interface ChoiceProps extends ForwardedChoiceProps {
-  id: string;
-  children: ReactNode;
-}
-
-export const Choice = ({
-  id,
-  label,
-  hint,
-  tooltip,
-  error,
-  bordered,
-  Badge,
-  Accessory,
-  Footer,
-  children,
-  disabled = false,
-}: ChoiceProps) => {
-  const contentMarkup = (
-    <RootLayout>
-      <InputLayout align={Accessory ? 'center' : 'top'}>{children}</InputLayout>
-      {Accessory && <AccessoryLayout>{Accessory}</AccessoryLayout>}
-      {label || hint || error || Badge || Footer ? (
-        <TextLayout>
-          <Stack direction="horizontal" alignY="center" spacing="sm">
-            {label && <LabelText>{label}</LabelText>}
-            {Badge}
-            {tooltip && (
-              <BlockTooltip text={tooltip}>
-                <HelpIcon
-                  name="help"
-                  width={theme.sizes.base}
-                  color={theme.colors.neutral.ink.lightest}
-                />
-              </BlockTooltip>
-            )}
-          </Stack>
-          {hint && <HintText>{hint}</HintText>}
-          {error && <ErrorText>{error}</ErrorText>}
-          {Footer}
-        </TextLayout>
-      ) : null}
-    </RootLayout>
-  );
-
-  if (bordered) {
-    return (
-      <BorderedWrapper disabled={disabled} htmlFor={id}>
-        {contentMarkup}
-      </BorderedWrapper>
-    );
-  }
-
-  return (
-    <Wrapper disabled={disabled} htmlFor={id}>
-      {contentMarkup}
-    </Wrapper>
-  );
-};

package/src/components/Choice/components/styled.ts

@@ -1,98 +0,0 @@
-import styled from 'styled-components';
-import { Tooltip } from '../../Tooltip';
-import { theme } from '../../../theme';
-
-const alignMap = {
-  top: 'flex-start',
-  center: 'center',
-};
-
-export const RootLayout = styled.div`
-  display: flex;
-  align-items: center;
-
-  & > * + * {
-    margin-left: ${theme.sizes.base};
-  }
-`;
-
-export interface InputLayoutProps {
-  align: 'top' | 'center';
-}
-
-export const InputLayout = styled.div<InputLayoutProps>`
-  align-self: stretch;
-  display: flex;
-  align-items: ${(props) => alignMap[props.align]};
-  width: 24px;
-  height: 24px;
-`;
-
-export const AccessoryLayout = styled.div`
-  align-self: center;
-  display: flex;
-  align-items: center;
-`;
-
-export const TextLayout = styled.div`
-  flex: 1;
-
-  & > * + * {
-    margin-top: ${theme.sizes.sm};
-  }
-`;
-
-export const LabelText = styled.span`
-  font-family: ${theme.text.body.fontFamily};
-  font-size: ${theme.text.body.fontSize};
-  font-weight: ${theme.text.body.fontWeight};
-  line-height: ${theme.sizes.md};
-  color: ${theme.text.body.color};
-`;
-
-export const HintText = styled.div`
-  font-family: ${theme.fontFamily};
-  font-size: ${theme.sizes[3]};
-  line-height: ${theme.sizes[4]};
-  color: ${theme.colors.neutral.ink.light};
-`;
-
-export const ErrorText = styled.div`
-  font-family: ${theme.text.error.fontFamily};
-  font-size: ${theme.text.error.fontSize};
-  font-weight: ${theme.text.error.fontWeight};
-  line-height: ${theme.text.error.lineHeight};
-  color: ${theme.text.error.color};
-`;
-
-export const Wrapper = styled.label<{ disabled: boolean }>`
-  box-sizing: border-box;
-
-  &:hover {
-    cursor: ${(props) => (props.disabled ? 'default' : 'pointer')};
-  }
-`;
-
-export const BorderedWrapper = styled(Wrapper)`
-  border: 2px solid ${theme.colors.neutral.grey.dark};
-  border-radius: ${theme.radius.md};
-  padding: ${theme.sizes.base} 0.75rem;
-
-  &:hover {
-    border-color: ${theme.colors.secondary.blue.base};
-  }
-
-  & ${LabelText} {
-    font-weight: ${theme.text.bodyBold.fontWeight};
-  }
-`;
-
-export const BlockTooltip = styled(Tooltip)`
-  /* Tooltip uses inline-block containers which add more height when
-     the child component is an inline element (e.g. Glyph or an SVG),
-     so we need to set to block to preserve the height and fix alignment. */
-  display: block;
-  &-hoverable {
-    display: block;
-  }
-`;

package/src/components/ChoiceList/ChoiceList.stories.tsx

@@ -1,23 +0,0 @@
-import type { Meta, StoryObj } from '@storybook/react';
-import { ChoiceList } from '.';
-
-const meta = {
-  title: 'Components/Forms/ChoiceList',
-  component: ChoiceList,
-  tags: ['autodocs'],
-} satisfies Meta<typeof ChoiceList>;
-
-export default meta;
-
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {
-  args: {
-    selected: ['one'],
-    options: [
-      { label: 'One', value: 'one' },
-      { label: 'Two', value: 'two', disabled: true },
-      { label: 'Three', value: 'three' },
-    ],
-  },
-};

package/src/components/ChoiceList/ChoiceList.test.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ChoiceList } from './ChoiceList';
-
-test('Renders correctly', () => {
-  const { container } = render(
-    <ChoiceList
-      selected={[1]}
-      onChange={() => {}}
-      options={[
-        {
-          value: 1,
-          label: 'Label 1',
-          hint: 'Hint 1',
-          Badge: <span>Badge 1</span>,
-          Accessory: <div>Accessory 1</div>,
-          Footer: <div>Footer 1</div>,
-        },
-        {
-          value: 2,
-          label: 'Label 2',
-          hint: 'Hint 2',
-          Badge: <span>Badge 2</span>,
-          Accessory: <div>Accessory 2</div>,
-          Footer: <div>Footer 2</div>,
-        },
-        {
-          value: 3,
-          label: 'Label 3',
-          hint: 'Hint 3',
-          Badge: <span>Badge 3</span>,
-          Accessory: <div>Accessory 3</div>,
-          Footer: <div>Footer 3</div>,
-        },
-      ]}
-    />,
-  );
-  expect(container).toMatchSnapshot();
-});

package/src/components/ChoiceList/ChoiceList.tsx

@@ -1,86 +0,0 @@
-import React, { Component, ReactNode } from 'react';
-import { Radio } from '../Radio';
-import { Checkbox } from '../Checkbox';
-
-import { Fieldset, Legend } from './styled';
-
-/* TODO: - Implement error prop */
-
-type ChoiceListOptionValue = string | number;
-
-export interface ChoiceListOption {
-  value: ChoiceListOptionValue;
-  name?: string;
-  label: string;
-  hint?: string;
-  disabled?: boolean;
-  Badge?: ReactNode;
-  Accessory?: ReactNode;
-  Footer?: ReactNode;
-}
-
-export interface ChoiceListProps {
-  options: ChoiceListOption[];
-  selected: ChoiceListOptionValue[];
-  title?: string;
-  allowMultiple?: boolean;
-  disabled?: boolean;
-  bordered?: boolean;
-  error?: string;
-  onChange: (selected: ChoiceListOptionValue[]) => void;
-}
-
-export class ChoiceList extends Component<ChoiceListProps> {
-  handleChange = (value: ChoiceListOptionValue, checked: boolean) => {
-    const { allowMultiple } = this.props;
-
-    if (allowMultiple) {
-      this.handleChangeMultiple(value, checked);
-      return;
-    }
-
-    this.handleChangeSingle(value, checked);
-  };
-
-  handleChangeSingle = (value: ChoiceListOptionValue, checked: boolean) => {
-    const { onChange } = this.props;
-
-    if (checked) {
-      onChange([value]);
-    }
-  };
-
-  handleChangeMultiple = (value: ChoiceListOptionValue, checked: boolean) => {
-    const { selected, onChange } = this.props;
-    let newSelected = [];
-
-    if (checked) {
-      newSelected = [...selected, value];
-    } else {
-      newSelected = selected.filter((selectedValue) => selectedValue !== value);
-    }
-
-    onChange(newSelected);
-  };
-
-  render() {
-    const { allowMultiple, options, selected, title, disabled, bordered } = this.props;
-
-    const InputComponent = allowMultiple ? Checkbox : Radio;
-
-    return (
-      <Fieldset disabled={disabled}>
-        {title && <Legend>{title}</Legend>}
-        {options.map((option) => (
-          <InputComponent
-            key={option.value}
-            bordered={bordered}
-            checked={selected.includes(option.value)}
-            onChange={(checked: boolean) => this.handleChange(option.value, checked)}
-            {...option}
-          />
-        ))}
-      </Fieldset>
-    );
-  }
-}

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

@@ -1,352 +0,0 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
-
-exports[`Renders correctly 1`] = `
-.c7 {
-  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;
-}
-
-.c7 > * {
-  -webkit-flex: undefined;
-  -ms-flex: undefined;
-  flex: undefined;
-}
-
-.c7 > * + * {
-  margin-left: 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;
-}
-
-.c2 > * + * {
-  margin-left: 1rem;
-}
-
-.c3 {
-  -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: center;
-  -webkit-box-align: center;
-  -ms-flex-align: center;
-  align-items: center;
-  width: 24px;
-  height: 24px;
-}
-
-.c5 {
-  -webkit-align-self: center;
-  -ms-flex-item-align: center;
-  align-self: center;
-  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;
-}
-
-.c6 {
-  -webkit-flex: 1;
-  -ms-flex: 1;
-  flex: 1;
-}
-
-.c6 > * + * {
-  margin-top: 0.5rem;
-}
-
-.c8 {
-  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: normal;
-  line-height: 1.5rem;
-  color: #37424D;
-}
-
-.c9 {
-  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;
-}
-
-.c1 {
-  box-sizing: border-box;
-}
-
-.c1:hover {
-  cursor: pointer;
-}
-
-.c4 {
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  box-sizing: border-box;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  width: 18px;
-  height: 18px;
-  margin: 3px;
-  background-color: transparent;
-  border: 2px solid #637381;
-  border-radius: 50%;
-  outline: none;
-  cursor: pointer;
-  -webkit-flex-shrink: 0;
-  -ms-flex-negative: 0;
-  flex-shrink: 0;
-  -webkit-transition: box-shadow 0.1s;
-  transition: box-shadow 0.1s;
-}
-
-.c4:checked {
-  position: relative;
-  border-color: #0079d1;
-}
-
-.c4:checked::before {
-  content: '';
-  width: 10px;
-  height: 10px;
-  position: absolute;
-  top: 2px;
-  left: 2px;
-  background-color: #0079d1;
-  border-radius: 50%;
-}
-
-.c4:hover {
-  border-color: #0079d1;
-}
-
-.c4:active {
-  border-color: #0079d1;
-}
-
-.c4:focus {
-  box-shadow: 0 0 0 4px #80bce8;
-  outline: 0;
-}
-
-.c4:disabled {
-  box-shadow: none;
-  background-color: #dfe3e8;
-  border-color: #959fa8;
-  cursor: default;
-}
-
-.c4:disabled::before {
-  background-color: #637381;
-}
-
-.c0 {
-  padding: 0;
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-flex-direction: column;
-  -ms-flex-direction: column;
-  flex-direction: column;
-  border: 0;
-}
-
-.c0 > * + * {
-  margin-top: 16px;
-}
-
-<div>
-  <fieldset
-    class="c0"
-  >
-    <label
-      class="c1"
-      for="test-id"
-    >
-      <div
-        class="c2"
-      >
-        <div
-          class="c3"
-        >
-          <input
-            checked=""
-            class="c4"
-            id="test-id"
-            type="radio"
-            value="1"
-          />
-        </div>
-        <div
-          class="c5"
-        >
-          <div>
-            Accessory 1
-          </div>
-        </div>
-        <div
-          class="c6"
-        >
-          <div
-            class="c7"
-            direction="horizontal"
-            spacing="sm"
-          >
-            <span
-              class="c8"
-            >
-              Label 1
-            </span>
-            <span>
-              Badge 1
-            </span>
-          </div>
-          <div
-            class="c9"
-          >
-            Hint 1
-          </div>
-          <div>
-            Footer 1
-          </div>
-        </div>
-      </div>
-    </label>
-    <label
-      class="c1"
-      for="test-id"
-    >
-      <div
-        class="c2"
-      >
-        <div
-          class="c3"
-        >
-          <input
-            class="c4"
-            id="test-id"
-            type="radio"
-            value="2"
-          />
-        </div>
-        <div
-          class="c5"
-        >
-          <div>
-            Accessory 2
-          </div>
-        </div>
-        <div
-          class="c6"
-        >
-          <div
-            class="c7"
-            direction="horizontal"
-            spacing="sm"
-          >
-            <span
-              class="c8"
-            >
-              Label 2
-            </span>
-            <span>
-              Badge 2
-            </span>
-          </div>
-          <div
-            class="c9"
-          >
-            Hint 2
-          </div>
-          <div>
-            Footer 2
-          </div>
-        </div>
-      </div>
-    </label>
-    <label
-      class="c1"
-      for="test-id"
-    >
-      <div
-        class="c2"
-      >
-        <div
-          class="c3"
-        >
-          <input
-            class="c4"
-            id="test-id"
-            type="radio"
-            value="3"
-          />
-        </div>
-        <div
-          class="c5"
-        >
-          <div>
-            Accessory 3
-          </div>
-        </div>
-        <div
-          class="c6"
-        >
-          <div
-            class="c7"
-            direction="horizontal"
-            spacing="sm"
-          >
-            <span
-              class="c8"
-            >
-              Label 3
-            </span>
-            <span>
-              Badge 3
-            </span>
-          </div>
-          <div
-            class="c9"
-          >
-            Hint 3
-          </div>
-          <div>
-            Footer 3
-          </div>
-        </div>
-      </div>
-    </label>
-  </fieldset>
-</div>
-`;

package/src/components/ChoiceList/styled.ts

@@ -1,23 +0,0 @@
-import styled from 'styled-components';
-import { theme } from '../../theme';
-
-export const Fieldset = styled.fieldset`
-  padding: 0;
-  display: flex;
-  flex-direction: column;
-  border: 0;
-
-  & > * + * {
-    margin-top: 16px;
-  }
-`;
-
-export const Legend = styled.legend`
-  font-family: ${theme.text.inputLabel.fontFamily};
-  font-size: ${theme.text.inputLabel.fontSize};
-  font-style: ${theme.text.inputLabel.fontStyle};
-  font-weight: ${theme.text.inputLabel.fontWeight};
-  line-height: ${theme.text.inputLabel.lineHeight};
-  text-decoration: ${theme.text.inputLabel.textDecoration};
-  color: ${theme.text.inputLabel.color};
-`;