@marigold/components 0.3.3 → 0.4.0

package/src/Select/Select.test.tsx

@@ -1,349 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { Item, MarigoldProvider, Section } from '..';
-import { Select } from './Select';
-
-const theme = {
-  colors: {
-    red: 'red',
-  },
-  fonts: {
-    body: 'Inter',
-  },
-  button: {
-    select: {
-      fontFamily: 'body',
-      errorOpened: {
-        color: 'red',
-      },
-    },
-  },
-  label: {
-    above: {
-      fontSize: '8px',
-    },
-    inline: {
-      fontSize: '14px',
-    },
-  },
-};
-
-test('supports button select variant', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const select = screen.getByTestId('selectId');
-  expect(select).toBeDefined();
-  expect(select).toHaveStyle(`font-family: Inter`);
-});
-
-test('supports default labelVariant', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const label = screen.getAllByText('MyLabel');
-  expect(label[0]).toHaveStyle(`font-size: 8px`);
-});
-
-test('supports other labelVariant than default', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId" labelVariant="inline">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const label = screen.getAllByText('MyLabel');
-  expect(label[0]).toHaveStyle(`font-size: 14px`);
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select
-        label="MyLabel"
-        className="custom-class-name"
-        data-testid="selectId"
-      >
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const select = screen.getByTestId('selectId');
-  expect(select.className).toMatch('custom-class-name');
-});
-
-test('supports label with htmlFor prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const selectLabel = screen.getAllByText(/MyLabel/);
-  expect(selectLabel[0]).toHaveAttribute('for');
-});
-
-test('supports disabled prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId" disabled>
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const select = screen.getByTestId('selectId');
-  expect(select).toHaveAttribute('disabled');
-  fireEvent.click(select);
-  expect(select).toHaveAttribute('aria-expanded', 'false');
-});
-
-test('supports placeholder prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" placeholder="placeholder" data-testid="selectId">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveTextContent(/placeholder/);
-});
-
-test('supports required prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" required data-testid="selectId">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const selectLabel = screen.getAllByText(/MyLabel/);
-  expect(selectLabel[0]).toContainHTML('path d="M10.8 3.84003');
-});
-
-test('supports error and errorMessage prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" error errorMessage="error" data-testid="selectId">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const validationMessage = screen.getAllByText(/error/);
-  expect(validationMessage).toBeDefined();
-});
-
-test('supports width prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" width="120px" data-testid="selectId">
-        <Item>1</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const select = screen.getByTestId('selectId');
-
-  expect(select.parentElement).toHaveStyle(`width: 120px`);
-});
-
-test('option list opens when element is clicked', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>Red</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveAttribute('aria-expanded', 'false');
-
-  fireEvent.click(button);
-
-  // more than one item found because of the HiddenSelect component
-  const items = screen.getByRole('listbox');
-  expect(items).toBeVisible();
-  expect(button).toHaveAttribute('aria-expanded', 'true');
-});
-
-test('option list opens when element is clicked and theres an error', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" error errorMessage="error" data-testid="selectId">
-        <Item>Red</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveAttribute('aria-expanded', 'false');
-
-  fireEvent.click(button);
-
-  const items = screen.getByRole('listbox');
-  expect(items).toBeVisible();
-  expect(button).toHaveAttribute('aria-expanded', 'true');
-  expect(button).toHaveStyle(`color: red`);
-});
-
-test('supports click and select an option', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>Red</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveAttribute('aria-expanded', 'false');
-
-  fireEvent.click(button);
-  expect(button).toHaveAttribute('aria-expanded', 'true');
-  const items = screen.getAllByText(/Red/);
-  expect(items[1]).toBeVisible();
-  expect(items[1]).toHaveAttribute('aria-selected', 'false');
-
-  fireEvent.click(items[1]);
-  expect(button).toHaveTextContent('Red');
-
-  fireEvent.click(button);
-
-  // after selecting one item there are three elements with item text
-  const newItems = screen.getAllByText(/Red/);
-  expect(newItems[2]).toHaveAttribute('aria-selected', 'true');
-});
-
-test('popup closes after an option is selected', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>Red</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveAttribute('aria-expanded', 'false');
-
-  fireEvent.click(button);
-  expect(button).toHaveAttribute('aria-expanded', 'true');
-  const items = screen.getAllByText(/Red/);
-  expect(items[1]).toBeVisible();
-
-  fireEvent.click(items[1]);
-  expect(button).toHaveTextContent('Red');
-  expect(items[1]).not.toBeVisible();
-});
-
-test('dismiss popup by clicking escape', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>Red</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const selectButton = screen.getByTestId('selectId');
-  fireEvent.click(selectButton);
-  expect(selectButton).toHaveAttribute('aria-expanded', 'true');
-  userEvent.type(selectButton, '{esc}');
-  expect(selectButton).toHaveAttribute('aria-expanded', 'false');
-});
-
-test('allow users to dismiss the popup with hidden dismiss button', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId">
-        <Item>Red</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const selectButton = screen.getByTestId('selectId');
-  fireEvent.click(selectButton);
-
-  const dismissButton = screen.getByLabelText(/Dismiss/);
-  expect(dismissButton).toBeDefined();
-
-  fireEvent.click(dismissButton);
-  expect(selectButton).toHaveAttribute('aria-expanded', 'false');
-});
-
-test('supports default selectedKey prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId" defaultSelectedKey="Red">
-        <Item key="Red">Red</Item>
-        <Item key="Orange">Orange</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveTextContent('Red');
-});
-
-test('supports change default selectedKey', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId" defaultSelectedKey="Red">
-        <Item key="Red">Red</Item>
-        <Item key="Orange">Orange</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  expect(button).toHaveTextContent('Red');
-
-  fireEvent.click(button);
-  const items = screen.getAllByText(/Red/);
-  fireEvent.click(items[1]);
-
-  expect(button).toHaveTextContent('Red');
-});
-
-test('supports disabled item prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="MyLabel" data-testid="selectId" disabledKeys={['Red']}>
-        <Item key="Red">Red</Item>
-        <Item key="Orange">Orange</Item>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  fireEvent.click(button);
-  const redItem = screen.getAllByText(/Red/);
-  fireEvent.click(redItem[1]);
-  expect(button).toHaveTextContent('Select an option');
-
-  const orangeItem = screen.getAllByText(/Orange/);
-  fireEvent.click(orangeItem[1]);
-  expect(button).toHaveTextContent('Orange');
-});
-
-test('supports section with items', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <Select label="Section" data-testid="selectId">
-        <Section title="Color">
-          <Item>Red</Item>
-        </Section>
-      </Select>
-    </MarigoldProvider>
-  );
-  const button = screen.getByTestId('selectId');
-  fireEvent.click(button);
-
-  const items = screen.getAllByText(/Red/);
-  expect(items[1]).toBeVisible();
-  const sections = screen.getAllByText(/Color/);
-  expect(sections[0]).toBeVisible();
-});

package/src/Select/Select.tsx

@@ -1,174 +0,0 @@
-import React, { Ref, RefObject, useRef } from 'react';
-import { useSelectState } from '@react-stately/select';
-import { useButton } from '@react-aria/button';
-import { mergeProps } from '@react-aria/utils';
-import { useFocusRing } from '@react-aria/focus';
-import { HiddenSelect, useSelect } from '@react-aria/select';
-import type { AriaSelectProps } from '@react-types/select';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import { useOverlayTrigger, useOverlayPosition } from '@react-aria/overlays';
-import { SingleSelection } from '@react-types/shared';
-
-import { ComponentProps } from '@marigold/types';
-import { ArrowDown, ArrowUp, Exclamation, Required } from '@marigold/icons';
-import { ResponsiveStyleValue } from '@marigold/system';
-
-import { Box } from '../Box';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
-import { ListBox } from './ListBox';
-import { Popover } from './Popover';
-
-// Theme Extension
-// ---------------
-export interface SelectThemeExtension<Value> {
-  select?: {
-    __default: Value;
-    disabled?: Value;
-    listbox?: {
-      __default: Value;
-      error?: Value;
-    };
-    section?: Value;
-    option?: Value;
-  };
-}
-
-// Props
-// ---------------
-export type SelectProps = {
-  labelVariant?: string;
-  placeholder?: string;
-  disabled?: boolean;
-  required?: boolean;
-  width?: ResponsiveStyleValue<number | string>;
-  error?: boolean;
-  errorMessage?: string;
-} & ComponentProps<'select'> &
-  AriaSelectProps<object> &
-  SingleSelection;
-
-// Component
-// ---------------
-export const Select = ({
-  labelVariant = 'above',
-  placeholder = 'Select an option',
-  disabled,
-  required,
-  error,
-  errorMessage,
-  width,
-  className,
-  ...props
-}: SelectProps) => {
-  const state = useSelectState(props);
-  const overlayTriggerState = useOverlayTriggerState({});
-  const triggerRef = useRef<HTMLElement>() as RefObject<HTMLElement>;
-  const overlayRef = useRef<HTMLDivElement>();
-
-  // Get props for the overlay
-  const { overlayProps } = useOverlayTrigger(
-    { type: 'listbox' },
-    overlayTriggerState,
-    triggerRef
-  );
-  // Get popover positioning props relative to the trigger
-  const { overlayProps: positionProps } = useOverlayPosition({
-    targetRef: triggerRef,
-    overlayRef: overlayRef as RefObject<HTMLElement>,
-    placement: 'bottom',
-    shouldFlip: false,
-    isOpen: state.isOpen,
-    onClose: state.close,
-  });
-  // Get props for child elements from useSelect
-  const { labelProps, triggerProps, valueProps, menuProps } = useSelect(
-    props,
-    state,
-    triggerRef
-  );
-  // Get props for the button based on the trigger props from useSelect
-  const { buttonProps } = useButton(triggerProps, triggerRef);
-
-  const { focusProps } = useFocusRing();
-
-  return (
-    <Box position="relative" display="inline-block" width={width && width}>
-      {props.label && (
-        <Box>
-          <Label {...labelProps} htmlFor={labelProps.id} variant={labelVariant}>
-            {required ? (
-              <Box as="span" display="inline-flex" alignItems="center">
-                {props.label}
-                <Box as={Required} size={16} css={{ color: 'error' }} />
-              </Box>
-            ) : (
-              props.label
-            )}
-          </Label>
-        </Box>
-      )}
-      <HiddenSelect
-        state={state}
-        triggerRef={triggerRef}
-        label={props.label}
-        name={props.name}
-        isDisabled={disabled}
-      />
-      <Box
-        as="button"
-        {...mergeProps(buttonProps, focusProps)}
-        ref={triggerRef as RefObject<HTMLButtonElement>}
-        variant={
-          error && state.isOpen && !disabled
-            ? 'button.select.errorOpened'
-            : error
-            ? 'button.select.error'
-            : state.isOpen && !disabled
-            ? 'button.select.open'
-            : 'button.select'
-        }
-        disabled={disabled}
-        className={className}
-      >
-        <Box
-          as="span"
-          {...valueProps}
-          variant={disabled ? 'select.disabled' : 'select'}
-        >
-          {state.selectedItem ? state.selectedItem.rendered : placeholder}
-        </Box>
-        {state.isOpen && !disabled ? (
-          <Box as={ArrowUp} size={16} css={{ fill: 'text' }} />
-        ) : (
-          <Box
-            as={ArrowDown}
-            size={16}
-            css={{ fill: disabled ? 'disabled' : 'text' }}
-          />
-        )}
-      </Box>
-      {state.isOpen && !disabled && (
-        <Box
-          as={Popover}
-          {...overlayProps}
-          {...positionProps}
-          css={{
-            width: triggerRef.current && triggerRef.current.offsetWidth + 'px',
-          }}
-          ref={overlayRef as Ref<HTMLDivElement>}
-          isOpen={state.isOpen}
-          onClose={state.close}
-        >
-          <ListBox error={error} {...menuProps} state={state} />
-        </Box>
-      )}
-      {error && errorMessage && (
-        <Box as="span" display="inline-flex" alignItems="center">
-          <Box as={Exclamation} size={16} css={{ color: 'error' }} />
-          <ValidationMessage>{errorMessage}</ValidationMessage>
-        </Box>
-      )}
-    </Box>
-  );
-};

package/src/Select/index.ts

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

package/src/Slider/Slider.stories.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Slider } from './Slider';
-
-export default {
-  title: 'Components/Slider',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Style',
-      table: {
-        defaultValue: {
-          summary: '__default',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Slider> = args => (
-  <Slider name="vol" min="0" max="50" {...args} />
-);

package/src/Slider/Slider.test.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Slider } from './Slider';
-
-const theme = {
-  fonts: {
-    regular: 'Oswald Regular',
-    body: 'Inter',
-  },
-  slider: {
-    __default: {
-      fontFamily: 'regular',
-    },
-    special: {
-      fontFamily: 'body',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Slider title="slider" />
-    </ThemeProvider>
-  );
-  const slider = screen.getByTitle(/slider/);
-
-  expect(slider).toHaveStyle(`font-family: Oswald Regular`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Slider variant="special" title="slider" />
-    </ThemeProvider>
-  );
-  const slider = screen.getByTitle(/slider/);
-
-  expect(slider).toHaveStyle(`font-family: Inter`);
-});
-
-test('renders <input> element by default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Slider title="slider" />
-    </ThemeProvider>
-  );
-  const slider = screen.getByTitle(/slider/);
-
-  expect(slider instanceof HTMLInputElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Slider className="custom-class-name" title="slider" />
-    </ThemeProvider>
-  );
-  const slider = screen.getByTitle(/slider/);
-
-  expect(slider.className).toMatch('custom-class-name');
-});

package/src/Slider/Slider.tsx

@@ -1,35 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-
-import { Box } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface SliderThemeExtension<Value> {
-  slider?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type SliderProps = {
-  variant?: string;
-} & ComponentProps<'input'>;
-
-// Component
-// ---------------
-export const Slider: React.FC<SliderProps> = ({
-  variant = '',
-  className,
-  ...props
-}) => (
-  <Box
-    as="input"
-    type="range"
-    css={{ verticalAlign: 'middle' }}
-    variant={`slider.${variant}`}
-    className={className}
-    {...props}
-  />
-);

package/src/Slider/index.ts

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