@veeqo/ui 0.0.1 → 0.0.4

package/src/components/Choice/Choice.tsx

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

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

@@ -0,0 +1 @@
+export * from './Choice';

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

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

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

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

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

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

package/src/components/ChoiceList/styled.ts

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