@marigold/components 0.0.2 → 0.3.0

package/src/Select/Select.tsx

@@ -1,28 +1,174 @@
-import React from 'react';
-import { system, useStyles } from '@marigold/system';
-import { ArrowDown } from '@marigold/icons';
-
-type SelectProps = {};
-
-export const Select = system<SelectProps, 'select'>(
-  ({ variant = 'select', className, ref, ...props }) => {
-    const selectStyles = useStyles(
-      {
-        variant: `form.${variant}`,
-      },
-      className
-    );
-    const iconStyles = useStyles({
-      alignSelf: 'center',
-      pointerEvents: 'none',
-      ml: '-28px',
-    });
-
-    return (
-      <div className={useStyles({ display: 'flex' })}>
-        <select ref={ref} {...props} className={selectStyles} />
-        <ArrowDown className={iconStyles} />
-      </div>
-    );
-  }
-);
+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/Slider/Slider.stories.tsx

@@ -0,0 +1,24 @@
+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,15 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Slider } from '@marigold/components';
+import { Slider } from './Slider';
 
 const theme = {
-  form: {
-    slider: {
-      fontFamily: 'Oswald Regular',
+  fonts: {
+    regular: 'Oswald Regular',
+    body: 'Inter',
+  },
+  slider: {
+    __default: {
+      fontFamily: 'regular',
     },
-    range: {
-      fontFamily: 'Inter',
+    special: {
+      fontFamily: 'body',
     },
   },
 };
@@ -28,7 +32,7 @@ test('supports default variant and themeSection', () => {
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Slider variant="range" title="slider" />
+      <Slider variant="special" title="slider" />
     </ThemeProvider>
   );
   const slider = screen.getByTitle(/slider/);

package/src/Slider/Slider.tsx

@@ -1,20 +1,35 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
 
-type SliderProps = {
-  variant?: string;
-};
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface SliderThemeExtension<Value> {
+  slider?: {
+    [key: string]: Value;
+  };
+}
 
-export const Slider = system<SliderProps, 'input'>(
-  ({ variant = 'slider', className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `form.${variant}`,
-        verticalAlign: 'middle',
-      },
-      className
-    );
+// Props
+// ---------------
+export type SliderProps = {
+  variant?: string;
+} & ComponentProps<'input'>;
 
-    return <input type="range" className={classNames} {...props} />;
-  }
+// 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/Stack/Stack.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Stack } from './Stack';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Stack',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      description: 'HTML element style',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Stack> = args => (
+  <Stack {...args}>
+    <Text as="h2" variant="headline2">
+      Heading
+    </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, lectus ante consequat magna, a porttitor
+      massa ex ut quam.
+    </Text>
+  </Stack>
+);

package/src/Stack/Stack.test.tsx

@@ -0,0 +1,138 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Stack } from './Stack';
+import { Text } from '../Text';
+
+// Setup
+// ---------------
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 8,
+  },
+};
+
+const getTopPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-top');
+
+test('default space is "none"', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack>
+        <Text>first</Text>
+        <Text>second</Text>
+        <Text>third</Text>
+      </Stack>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/).parentElement!;
+  const second = screen.getByText(/second/).parentElement!;
+  const third = screen.getByText(/third/).parentElement!;
+
+  expect(getTopPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-top: 0px`);
+  expect(third).toHaveStyle(`padding-top: 0px`);
+});
+
+test('accepts and uses spacing from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack space="small">
+        <Text>first</Text>
+        <Text>second</Text>
+        <Text>third</Text>
+      </Stack>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const third = screen.getByText(/third/);
+
+  expect(getTopPadding(first)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+  expect(third.parentElement).toHaveStyle(`padding-top: 2px`);
+});
+
+test('aligns children left by default', () => {
+  render(
+    <Stack data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
+
+  expect(stack).toHaveStyle(`align-items: flex-start`);
+});
+
+test('allows to aligns children to the center', () => {
+  render(
+    <Stack align="center" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
+
+  expect(stack).toHaveStyle(`align-items: center`);
+});
+
+test('allows to aligns children to the right', () => {
+  render(
+    <Stack align="right" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
+
+  expect(stack).toHaveStyle(`align-items: flex-end`);
+});
+
+test('supports nesting', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack space="large">
+        <Stack space="small" data-testid="upperStack">
+          <Text>first</Text>
+          <Text>second</Text>
+        </Stack>
+        <Stack space="small" data-testid="lowerStack">
+          <Text>third</Text>
+          <Text>fourth</Text>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const upperStack = screen.getByTestId('upperStack');
+
+  const third = screen.getByText(/third/);
+  const fourth = screen.getByText(/fourth/);
+  const lowerStack = screen.getByTestId('lowerStack');
+
+  expect(getTopPadding(upperStack.parentElement!)).toEqual('');
+  expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
+
+  expect(getTopPadding(first.parentElement!)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+
+  expect(getTopPadding(third.parentElement!)).toEqual('');
+  expect(fourth.parentElement).toHaveStyle(`padding-top: 2px`);
+});
+
+test('renders as div per default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack data-testid="stack">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
+  );
+
+  const stack = screen.getByTestId('stack');
+  expect(stack instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Stack/Stack.tsx

@@ -0,0 +1,39 @@
+import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export type StackProps = {
+  space?: ResponsiveStyleValue<string>;
+  align?: 'left' | 'right' | 'center';
+};
+
+const ALIGNMENT = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+export const Stack: React.FC<StackProps> = ({
+  space = 'none',
+  align = 'left',
+  children,
+  ...props
+}) => (
+  <Box
+    {...props}
+    display="flex"
+    flexDirection="column"
+    alignItems={ALIGNMENT[align]}
+    css={{ '> * + *': { pt: space } }}
+  >
+    {Children.map(
+      flattenChildren(children) as unknown as React.ReactElement,
+      (child: React.ReactElement) => (
+        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
+      )
+    )}
+  </Box>
+);

package/src/Stack/index.ts

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

package/src/Text/Text.stories.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Text } from './Text';
+
+export default {
+  title: 'Components/Text',
+  argTypes: {
+    as: {
+      control: {
+        type: 'select',
+      },
+      options: ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'Set HTML element',
+      table: {
+        defaultValue: {
+          summary: 'span',
+        },
+      },
+    },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'body',
+        'headline1',
+        'headline2',
+        'headline3',
+        'headline4',
+        'headline5',
+        'headline6',
+      ],
+      description: 'CHoose between body and different headlines',
+      table: {
+        defaultValue: {
+          summary: 'body',
+        },
+      },
+    },
+    color: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text color',
+      table: {
+        defaultValue: {
+          summary: 'inherit',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Text> = args => (
+  <Text {...args}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+    dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
+    massa nec ultricies efficitur, lectus ante consequat magna, a porttitor
+    massa ex ut quam.
+  </Text>
+);