@marigold/components 0.3.0 → 0.4.0

package/src/Checkbox/Checkbox.stories.tsx

@@ -1,78 +0,0 @@
-import React, { useState } from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-
-import { Checkbox } from './Checkbox';
-
-export default {
-  title: 'Components/Checkbox',
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Checkbox variant',
-      defaultValue: '__default',
-    },
-    labelVariant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Checkbox label variant',
-      defaultValue: 'inline',
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Label',
-      defaultValue: 'Checkbox Label',
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Required',
-      defaultValue: false,
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Disabled',
-      defaultValue: false,
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Error',
-      defaultValue: false,
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-      description: 'Error Message',
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Checkbox> = ({
-  onChange,
-  checked,
-  ...args
-}) => {
-  const [isChecked, setChecked] = useState(false);
-  return (
-    <Checkbox
-      onChange={() => setChecked(!isChecked)}
-      checked={isChecked}
-      {...args}
-    />
-  );
-};

package/src/Checkbox/Checkbox.test.tsx

@@ -1,166 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Checkbox } from './Checkbox';
-import { ThemeProvider } from '@marigold/system';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 2,
-  },
-  colors: {
-    disabled: 'gray',
-  },
-  checkbox: {
-    __default: {
-      m: 'small',
-    },
-  },
-  label: {
-    inline: {
-      fontSize: '14px',
-    },
-    above: {
-      fontSize: '8px',
-    },
-  },
-};
-
-test('supports default labelVariant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox id="test" title="checkbox" label="label" />
-    </ThemeProvider>
-  );
-
-  const label = screen.getByText(/label/);
-  expect(label).toHaveStyle(`font-size: 14px`);
-});
-
-test('supports other labelVariant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox id="test" title="checkbox" label="label" labelVariant="above" />
-    </ThemeProvider>
-  );
-
-  const label = screen.getByText(/label/);
-  expect(label).toHaveStyle(`font-size: 8px`);
-});
-
-test('supports label prop', () => {
-  render(<Checkbox label="Test" id="test" title="checkbox" />);
-
-  const checkboxLabel = screen.getByText(/Test/);
-  expect(checkboxLabel).toBeDefined();
-});
-
-test('supports required prop and renders required icon', () => {
-  render(<Checkbox label="Test" id="test" required title="checkbox" />);
-
-  const label = screen.getByText(/Test/);
-  expect(label.nextSibling).toContainHTML('path d="M10.8');
-});
-
-test('supports default type', () => {
-  render(<Checkbox id="checkbox" title="checkbox" label="Test" />);
-
-  const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox.getAttribute('type')).toEqual('checkbox');
-});
-
-test('renders <input> element', () => {
-  render(<Checkbox id="checkbox" title="checkbox" label="Test" />);
-
-  const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox instanceof HTMLInputElement).toBeTruthy();
-});
-
-test('supports disabled prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox id="test" title="checkbox" label="label" disabled />
-    </ThemeProvider>
-  );
-
-  const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox).toHaveAttribute('disabled');
-  const label = screen.getByText(/label/);
-  expect(label).toHaveStyle(`color: gray`);
-});
-
-test('supports error and errorMessage prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox
-        id="test"
-        title="checkbox"
-        label="test"
-        error
-        errorMessage="error"
-      />
-    </ThemeProvider>
-  );
-
-  const errorMessage = screen.getByText(/error/);
-  expect(errorMessage).toBeDefined();
-});
-
-test('supports checked checkbox', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox
-        id="test"
-        title="checkbox"
-        label="Test"
-        onChange={() => {}}
-        checked
-      />
-    </ThemeProvider>
-  );
-
-  const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox).toHaveAttribute('checked');
-});
-
-test('supports checked and disabled checkbox', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox
-        id="test"
-        title="checkbox"
-        label="Test"
-        onChange={() => {}}
-        checked
-        disabled
-      />
-    </ThemeProvider>
-  );
-
-  const checkbox = screen.getByTitle(/checkbox/);
-  expect(checkbox).toHaveAttribute('checked');
-  expect(checkbox).toHaveAttribute('disabled');
-});
-
-test('correctly handles interaction', () => {
-  const click = jest.fn();
-  const change = jest.fn();
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Checkbox
-        id="test"
-        title="checkbox"
-        label="Test"
-        onClick={click}
-        onChange={change}
-      />
-    </ThemeProvider>
-  );
-
-  const checkbox = screen.getByTitle(/checkbox/);
-  fireEvent.click(checkbox);
-
-  expect(click).toHaveBeenCalledTimes(1);
-  expect(change).toHaveBeenCalledTimes(1);
-});

package/src/Checkbox/Checkbox.tsx

@@ -1,101 +0,0 @@
-import React from 'react';
-import { useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-import { useCheckbox } from '@react-aria/checkbox';
-import { useToggleState } from '@react-stately/toggle';
-import { ToggleProps } from '@react-types/checkbox';
-
-import { ComponentProps } from '@marigold/types';
-import { Exclamation } from '@marigold/icons';
-
-import { CheckboxIcon, CheckboxIconProps } from './CheckboxIcons';
-import { Box } from '../Box';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
-
-// Theme Extension
-// ---------------
-export interface CheckboxThemeExtension<Value> {
-  checkbox?: {
-    [key: string]: Value;
-  };
-}
-
-// Checkbox Input
-// ---------------
-type CheckboxInputProps = CheckboxIconProps &
-  ToggleProps &
-  ComponentProps<'input'>;
-
-const CheckboxInput: React.FC<CheckboxInputProps> = ({ error, ...props }) => {
-  const state = useToggleState(props);
-  const ref = React.useRef<HTMLInputElement>(null);
-  const { inputProps } = useCheckbox(props, state, ref);
-  const { focusProps } = useFocusRing();
-
-  return (
-    <Box pr="xsmall">
-      <VisuallyHidden>
-        <Box
-          as="input"
-          type="checkbox"
-          disabled={props.disabled}
-          {...inputProps}
-          {...focusProps}
-          ref={ref}
-          {...props}
-        />
-      </VisuallyHidden>
-      <CheckboxIcon
-        checked={props.checked}
-        variant={props.variant}
-        disabled={props.disabled}
-        error={error}
-      />
-    </Box>
-  );
-};
-
-// Checkbox
-// ---------------
-export type CheckboxProps = {
-  id: string;
-  label: string;
-  required?: boolean;
-  labelVariant?: string;
-  error?: boolean;
-  errorMessage?: string;
-} & CheckboxInputProps;
-
-export const Checkbox: React.FC<CheckboxProps> = ({
-  label,
-  required,
-  labelVariant = 'inline',
-  error,
-  errorMessage,
-  ...props
-}) => {
-  return (
-    <>
-      <Box
-        as={Label}
-        __baseCSS={{
-          ':hover': { cursor: props.disabled ? 'not-allowed' : 'pointer' },
-        }}
-        htmlFor={props.id}
-        required={required}
-        variant={`label.${labelVariant}`}
-        color={props.disabled ? 'disabled' : 'text'}
-      >
-        <Box as={CheckboxInput} error={error} {...props} />
-        {label}
-      </Box>
-      {error && errorMessage && (
-        <ValidationMessage>
-          <Exclamation size={16} />
-          {errorMessage}
-        </ValidationMessage>
-      )}
-    </>
-  );
-};

package/src/Checkbox/CheckboxIcons.tsx

@@ -1,59 +0,0 @@
-import React from 'react';
-import { conditional, State, SVG } from '@marigold/system';
-
-import { Box } from '../Box';
-
-// Checkbox Icon
-// ---------------
-export type CheckboxIconProps = {
-  variant?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  children?: never;
-};
-
-export const CheckboxIcon: React.FC<CheckboxIconProps> = ({
-  variant = '',
-  checked = false,
-  disabled = false,
-  error = false,
-}) => {
-  const conditionalStates: State = disabled
-    ? {
-        disabled: disabled,
-      }
-    : {
-        checked: checked,
-        error: error,
-      };
-
-  return (
-    <SVG
-      width="16"
-      height="32"
-      viewBox="0 0 16 32"
-      fill="none"
-      aria-hidden="true"
-    >
-      <Box
-        as="rect"
-        x="0.5"
-        y="8.5"
-        width="15px"
-        height="15px"
-        rx="1.5"
-        variant={conditional(`checkbox.${variant}`, conditionalStates)}
-      />
-      {checked && (
-        <Box
-          __baseCSS={{ fill: 'gray00' }}
-          as="path"
-          fillRule="evenodd"
-          clipRule="evenodd"
-          d="M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z"
-        />
-      )}
-    </SVG>
-  );
-};

package/src/Checkbox/index.ts

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

package/src/Column/Column.stories.tsx

@@ -1,33 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-
-import { Column } from './Column';
-import { Box } from '../Box';
-
-export default {
-  title: 'Components/Column',
-  argTypes: {
-    width: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 12,
-        step: 1,
-      },
-      description: 'Absolute width in 12 grid',
-      table: {
-        defaultValue: {
-          summary: 12,
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Column> = args => (
-  <Column width={12} {...args}>
-    <Box p="small" border="1px solid gray" borderRadius="4px">
-      width=12
-    </Box>
-  </Column>
-);

package/src/Column/Column.test.tsx

@@ -1,32 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Column } from './Column';
-
-test('supports width prop', () => {
-  render(<Column width={6}>column</Column>);
-  const column = screen.getByText('column');
-
-  expect(column).toHaveStyle(`width: 50%`);
-});
-
-test('renders correct HTML element', () => {
-  render(<Column>column</Column>);
-  const column = screen.getByText('column');
-
-  expect(column instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(<Column className="custom-class-name">column</Column>);
-  const column = screen.getByText('column');
-
-  expect(column.className).toMatch('custom-class-name');
-});
-
-test('accepts responsive values', () => {
-  render(<Column width={[12, 6]}>column</Column>);
-  const column = screen.getByText('column');
-
-  // Note: as of November 2021 jest-dom does not support media queries...
-  expect(column).toHaveStyle('width: 100%');
-});

package/src/Column/Column.tsx

@@ -1,27 +0,0 @@
-import React from 'react';
-import { Box } from '../Box';
-
-type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-
-export type ColumnProps = {
-  className?: string;
-  width?: WidthValues | WidthValues[];
-};
-
-const transform = (width: WidthValues | WidthValues[]) => {
-  if (Array.isArray(width)) {
-    return width.map(v => `${(v / 12) * 100}%`);
-  }
-
-  return `${(width / 12) * 100}%`;
-};
-
-export const Column: React.FC<ColumnProps> = ({
-  width = 12,
-  children,
-  ...props
-}) => (
-  <Box {...props} width={transform(width)}>
-    {children}
-  </Box>
-);

package/src/Column/index.ts

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

package/src/Columns/Columns.stories.tsx

@@ -1,75 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Column, Columns, Text } from '@marigold/components';
-
-export default {
-  title: 'Components/Columns',
-  argTypes: {
-    space: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'none',
-        'xxsmall',
-        'xsmall',
-        'small',
-        'medium',
-        'large',
-        'xlarge',
-        'xxlarge',
-      ],
-      description: 'Responsive Style Value',
-      table: {
-        defaultValue: {
-          summary: 'none',
-        },
-      },
-    },
-    horizontalAlign: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'right', 'center'],
-      description: 'where to place',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
-    },
-    verticalAlign: {
-      control: {
-        type: 'select',
-      },
-      options: ['top', 'bottom', 'center'],
-      description: 'where to place',
-      table: {
-        defaultValue: {
-          summary: 'top',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Columns> = args => (
-  <Columns {...args}>
-    <Column width={6}>
-      <Text>First column</Text>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-        massa nec ultricies efficitur.
-      </Text>
-    </Column>
-    <Column width={6}>
-      <Text>Second column</Text>
-      <Text>
-        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-        dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
-        massa nec ultricies efficitur.
-      </Text>
-    </Column>
-  </Columns>
-);

package/src/Columns/Columns.test.tsx

@@ -1,113 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Column, Columns, MarigoldProvider } from '@marigold/components';
-
-const theme = {
-  space: {
-    none: 0,
-    large: 24,
-  },
-};
-
-test('supports default space prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Columns data-testid="column">
-        <Column>column</Column>
-      </Columns>
-    </MarigoldProvider>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`margin: 0px`);
-});
-
-test('supports custom space prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Columns space="large" data-testid="column">
-        <Column>column</Column>
-      </Columns>
-    </MarigoldProvider>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`margin: -12px`);
-});
-
-test('supports default horizontalAlign prop: left', () => {
-  render(
-    <Columns data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`justify-content: flex-start`);
-});
-
-test('supports custom horizontalAlign prop: center', () => {
-  render(
-    <Columns horizontalAlign="center" data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`justify-content: center`);
-});
-
-test('supports custom horizontalAlign prop: right', () => {
-  render(
-    <Columns horizontalAlign="right" data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`justify-content: flex-end`);
-});
-
-test('supports default verticalAlign prop: top', () => {
-  render(
-    <Columns data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`align-items: flex-start`);
-});
-
-test('supports custom verticalAlign prop: center', () => {
-  render(
-    <Columns verticalAlign="center" data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`align-items: center`);
-});
-
-test('supports custom verticalAlign prop: bottom', () => {
-  render(
-    <Columns verticalAlign="bottom" data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column).toHaveStyle(`align-items: flex-end`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <Columns data-testid="column">
-      <Column>column</Column>
-    </Columns>
-  );
-  const column = screen.getByTestId(/column/);
-
-  expect(column instanceof HTMLDivElement).toBeTruthy();
-});