@marigold/components 0.3.3 → 0.4.0

package/src/Radio/Radio.test.tsx

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

package/src/Radio/Radio.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-import { Exclamation } from '@marigold/icons';
-import { useFocusRing } from '@react-aria/focus';
-import { VisuallyHidden } from '@react-aria/visually-hidden';
-
-import { RadioIcon, RadioIconProps } from './RadioIcon';
-import { Box } from '../Box';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
-
-// Theme Extension
-// ---------------
-export interface RadioThemeExtension<Value> {
-  radio?: {
-    [key: string]: Value;
-  };
-}
-
-// Radio Input
-// ---------------
-type RadioInputProps = RadioIconProps & ComponentProps<'input'>;
-
-const RadioInput: React.FC<RadioInputProps> = ({ error, ...props }) => {
-  const { focusProps } = useFocusRing();
-
-  return (
-    <Box pr="xsmall">
-      <VisuallyHidden>
-        <input
-          type="radio"
-          disabled={props.disabled}
-          {...focusProps}
-          {...props}
-        />
-      </VisuallyHidden>
-      <RadioIcon
-        variant={props.variant}
-        disabled={props.disabled}
-        checked={props.checked}
-        error={error}
-      />
-    </Box>
-  );
-};
-
-// Radio
-// ---------------
-export type RadioProps = {
-  id: string;
-  label: string;
-  required?: boolean;
-  labelVariant?: string;
-  error?: boolean;
-  errorMessage?: string;
-} & RadioInputProps;
-
-export const Radio: React.FC<RadioProps> = ({
-  label,
-  required,
-  labelVariant = 'inline',
-  error,
-  errorMessage,
-  ...props
-}) => (
-  <>
-    <Box
-      as={Label}
-      htmlFor={props.id}
-      required={required}
-      variant={`label.${labelVariant}`}
-      css={
-        props.disabled
-          ? { color: 'disabled', ':hover': { cursor: 'not-allowed' } }
-          : { color: 'text', ':hover': { cursor: 'pointer' } }
-      }
-    >
-      <Box as={RadioInput} error={error} {...props} />
-      {label}
-    </Box>
-    {error && errorMessage && (
-      <ValidationMessage>
-        <Exclamation size={16} />
-        {errorMessage}
-      </ValidationMessage>
-    )}
-  </>
-);

package/src/Radio/RadioIcon.tsx

@@ -1,49 +0,0 @@
-import React from 'react';
-import { conditional, State, SVG } from '@marigold/system';
-
-import { Box } from '../Box';
-
-// Radio Icon
-// ---------------
-export type RadioIconProps = {
-  variant?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  children?: never;
-};
-
-export const RadioIcon: React.FC<RadioIconProps> = ({
-  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
-        variant={conditional(`radio.${variant}`, conditionalStates)}
-        as="circle"
-        cx="8"
-        cy="16"
-        r="7.5"
-      />
-      {checked && <circle fill="white" cx="8" cy="16" r="3" />}
-    </SVG>
-  );
-};

package/src/Radio/index.ts

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

package/src/Select/ListBox.tsx

@@ -1,40 +0,0 @@
-import React, { useRef } from 'react';
-import { useListBox } from '@react-aria/listbox';
-import type { AriaListBoxOptions } from '@react-aria/listbox';
-import type { ListState } from '@react-stately/list';
-
-import { Box } from '../Box';
-import { Option } from './Option';
-import { ListBoxSection } from './ListBoxSection';
-
-interface ListBoxProps extends AriaListBoxOptions<unknown> {
-  state: ListState<unknown>;
-  error?: boolean;
-}
-
-export const ListBox = (props: ListBoxProps) => {
-  const ref = useRef<HTMLUListElement>(null);
-  const { state, error } = props;
-  const { listBoxProps } = useListBox(props, state, ref);
-
-  return (
-    <Box
-      as="ul"
-      p="none"
-      css={{
-        listStyle: 'none',
-      }}
-      {...listBoxProps}
-      variant={error ? 'select.listbox.error' : 'select.listbox'}
-      ref={ref}
-    >
-      {[...state.collection].map(item =>
-        item.type === 'section' ? (
-          <ListBoxSection key={item.key} section={item} state={state} />
-        ) : (
-          <Option key={item.key} item={item} state={state} />
-        )
-      )}
-    </Box>
-  );
-};

package/src/Select/ListBoxSection.tsx

@@ -1,40 +0,0 @@
-import React from 'react';
-import { useListBoxSection } from '@react-aria/listbox';
-import type { ListState } from '@react-stately/list';
-import type { Node } from '@react-types/shared';
-
-import { Box } from '../Box';
-import { Option } from './Option';
-
-interface SectionProps {
-  section: Node<unknown>;
-  state: ListState<unknown>;
-}
-
-export const ListBoxSection = ({ section, state }: SectionProps) => {
-  const { itemProps, headingProps, groupProps } = useListBoxSection({
-    heading: section.rendered,
-    'aria-label': section['aria-label'],
-  });
-
-  return (
-    <Box
-      as="li"
-      {...itemProps}
-      css={{
-        cursor: 'not-allowed',
-      }}
-    >
-      {section.rendered && (
-        <Box as="span" {...headingProps} variant={'select.section'}>
-          {section.rendered}
-        </Box>
-      )}
-      <Box as="ul" {...groupProps}>
-        {[...section.childNodes].map(node => (
-          <Option key={node.key} item={node} state={state} />
-        ))}
-      </Box>
-    </Box>
-  );
-};

package/src/Select/Option.tsx

@@ -1,48 +0,0 @@
-import React, { useEffect, useRef, useState } from 'react';
-import type { ListState } from '@react-stately/list';
-import type { Node } from '@react-types/shared';
-import { useOption } from '@react-aria/listbox';
-
-import { Box } from '../Box';
-
-interface OptionProps {
-  item: Node<unknown>;
-  state: ListState<unknown>;
-}
-
-export const Option = ({ item, state }: OptionProps) => {
-  const ref = useRef<HTMLLIElement>(null);
-  const [disabled, setDisabled] = useState(false);
-  const { optionProps, isSelected } = useOption(
-    {
-      key: item.key,
-    },
-    state,
-    ref
-  );
-
-  useEffect(() => {
-    for (const key of state.disabledKeys.values()) {
-      if (key === item.key) {
-        setDisabled(true);
-      }
-    }
-  }, [state.disabledKeys, item.key]);
-
-  return (
-    <Box
-      as="li"
-      {...optionProps}
-      ref={ref}
-      variant={
-        isSelected
-          ? 'select.option.selected'
-          : disabled
-          ? 'select.option.disabled'
-          : 'select.option'
-      }
-    >
-      {item.rendered}
-    </Box>
-  );
-};

package/src/Select/Popover.tsx

@@ -1,50 +0,0 @@
-import React, { forwardRef, RefObject } from 'react';
-import { FocusScope } from '@react-aria/focus';
-import {
-  DismissButton,
-  OverlayContainer,
-  useModal,
-  useOverlay,
-} from '@react-aria/overlays';
-import { mergeProps } from '@react-aria/utils';
-
-import { Box } from '../Box';
-
-interface PopoverProps {
-  isOpen?: boolean;
-  onClose?: () => void;
-  ref?: React.Ref<HTMLDivElement>;
-  className?: string;
-}
-
-export const Popover: React.FC<PopoverProps> = forwardRef(
-  ({ children, className, isOpen, onClose, ...otherProps }, ref) => {
-    // Handle events that should cause the popup to close,
-    const { overlayProps } = useOverlay(
-      {
-        isOpen,
-        onClose,
-        shouldCloseOnBlur: true,
-        isDismissable: true,
-      },
-      ref as RefObject<HTMLElement>
-    );
-    // Hide content outside the modal from screen readers.
-    const { modalProps } = useModal();
-
-    return (
-      <OverlayContainer>
-        <FocusScope restoreFocus>
-          <Box
-            {...mergeProps(overlayProps, otherProps, modalProps)}
-            className={className}
-            ref={ref}
-          >
-            {children}
-            <DismissButton onDismiss={onClose} />
-          </Box>
-        </FocusScope>
-      </OverlayContainer>
-    );
-  }
-);

package/src/Select/Select.stories.tsx

@@ -1,81 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Select } from './Select';
-import { Item } from '@marigold/components';
-
-export default {
-  title: 'Components/Select',
-  argTypes: {
-    label: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'Select label',
-        },
-      },
-      defaultValue: 'Favorite Color',
-    },
-    placeholder: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'Select an option',
-        },
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      options: [true, false],
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      options: [true, false],
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Error',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-      description: 'Error Message',
-    },
-    width: {
-      control: 'number',
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Select> = args => (
-  <Select {...args}>
-    <Item>Red</Item>
-    <Item>Orange</Item>
-    <Item>Yellow</Item>
-  </Select>
-);