@marigold/components 0.2.0 → 0.3.0

package/src/Provider/MarigoldProvider.test.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { useTheme } from '@marigold/system';
 import { render, screen } from '@testing-library/react';
-import { useModal } from '@react-aria/overlays';
 
 import { MarigoldProvider } from './MarigoldProvider';
 
 // Setup
 // ---------------
 const theme = {
+  colors: {
+    black: '#000',
+  },
+  fontSizes: {
+    body: 16,
+    heading: 32,
+  },
   text: {
     body: {
-      fontSize: 1,
+      fontSize: 'body',
       color: 'black',
     },
   },
@@ -64,63 +70,67 @@ test('themes can be cascaded', () => {
   `);
 });
 
-// if theres no OverlayProvider you got an error with text: Modal is not contained within a provider
-test('OverlayProvider is present and supports useModal hook', () => {
-  const ChildComponent: React.FC = ({ children }) => {
-    const { modalProps } = useModal();
-    return <div {...modalProps}>{children}</div>;
-  };
+test('OverlayProvider is added', () => {
+  const { container } = render(
+    <MarigoldProvider theme={theme}>Test</MarigoldProvider>
+  );
 
-  render(
+  expect(
+    container.querySelector(`div[data-overlay-container="true"]`)
+  ).toBeDefined();
+});
+
+test('OverlayProvider is added only once', () => {
+  const innerTheme = { colors: { primary: 'red' } };
+  const { container } = render(
     <MarigoldProvider theme={theme}>
-      <ChildComponent>Test</ChildComponent>
+      <MarigoldProvider theme={innerTheme}>Test</MarigoldProvider>
     </MarigoldProvider>
   );
 
-  const childComp = screen.getByText('Test');
-  expect(childComp).toBeDefined();
+  expect(
+    container.querySelectorAll(`div[data-overlay-container="true"]`).length
+  ).toEqual(1);
 });
 
-// test('renders global styles for body and html based on root in theme', () => {
-//   const root = render(
-//     <MarigoldProvider
-//       theme={{
-//         fonts: {
-//           body: 'Inter',
-//           html: 'Roboto',
-//         },
-//         lineHeights: {
-//           body: 1.5,
-//           html: 1,
-//         },
-//         fontWeights: {
-//           body: 500,
-//           html: 700,
-//         },
-//         root: {
-//           body: {
-//             fontFamily: 'body',
-//             lineHeight: 'body',
-//             fontWeight: 'body',
-//           },
-//           html: {
-//             fontFamily: 'html',
-//             lineHeight: 'html',
-//             fontWeight: 'html',
-//           }
-//         },
-//       }}
-//     >
-//       <h1 title="h1">Hello</h1>
-//     </MarigoldProvider>
-//   );
-
-//   const html = window.getComputedStyle(root.baseElement.parentElement!);
-//   expect(html.fontFamily).toBe('Roboto');
-//   expect(html.fontWeight).toBe('700');
-//   expect(html.lineHeight).toBe('1');
-//   const body = window.getComputedStyle(root.baseElement); 
-//   expect(body.fontFamily).toBe('Inter');
-//   expect(body.fontWeight).toBe('500');
-//   expect(body.lineHeight).toBe('1.5');
-// });
+test('applies global styles for body and html based on `theme.root`', () => {
+  const theme = {
+    fonts: {
+      body: 'Inter',
+      html: 'Roboto',
+    },
+    lineHeights: {
+      body: 2.5,
+    },
+    fontWeights: {
+      body: 500,
+      html: 700,
+    },
+    root: {
+      body: {
+        fontFamily: 'body',
+        lineHeight: 'body',
+        fontWeight: 'body',
+      },
+      html: {
+        fontFamily: 'html',
+        fontWeight: 'html',
+      },
+    },
+  };
+
+  const root = render(
+    <MarigoldProvider theme={theme}>
+      <h1>Hello</h1>
+    </MarigoldProvider>
+  );
+
+  const html = root.baseElement.parentElement;
+  expect(html).toHaveStyle(`font-family: ${theme.fonts.html}`);
+  expect(html).toHaveStyle(`font-weight: ${theme.fontWeights.html}`);
+
+  const body = root.baseElement;
+  expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
+  expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
+  expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
+});

package/src/Provider/MarigoldProvider.tsx

@@ -1,29 +1,47 @@
 import React from 'react';
 import { OverlayProvider } from '@react-aria/overlays';
-import { ThemeProvider, ThemeProviderProps } from '@marigold/system';
-// import { Global } from '@emotion/react';
-// import { css } from '@theme-ui/css';
+import {
+  Theme,
+  Global,
+  ThemeProvider,
+  ThemeProviderProps,
+  useTheme,
+  __defaultTheme,
+} from '@marigold/system';
 
-// const GlobalStyles = () => {
-//   const theme = useTheme();
-//   const styles = css({
-//     body: { variant: 'root.body' },
-//     html: { variant: 'root.html' },
-//   })(theme);
+// Theme Extension
+// ---------------
+export interface RootThemeExtension<Value> {
+  root?: {
+    body?: Value;
+    html?: Value;
+  };
+}
 
-//   return <Global styles={styles} />;
-// };
-// a merge of the ThemeProvider and the react-aria OverlayProvider
-export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
+// Props
+// ---------------
+export interface MarigoldProviderProps<T extends Theme>
+  extends ThemeProviderProps<T> {}
+
+// Provider
+// ---------------
+export function MarigoldProvider<T extends Theme>({
   theme,
   children,
-}) => {
+}: MarigoldProviderProps<T>) {
+  const outer = useTheme();
+  const isTopLevel = outer.theme === __defaultTheme;
+
   return (
     <ThemeProvider theme={theme}>
-      <OverlayProvider>
-        {/* <GlobalStyles /> */}
-        {children}
-      </OverlayProvider>
+      {isTopLevel ? (
+        <>
+          <Global />
+          <OverlayProvider>{children}</OverlayProvider>
+        </>
+      ) : (
+        children
+      )}
     </ThemeProvider>
   );
-};
+}

package/src/Provider/index.ts

@@ -1,3 +1,4 @@
 export { useTheme, ThemeProvider } from '@marigold/system';
-export * from './MarigoldProvider';
 export { SSRProvider } from '@react-aria/ssr';
+
+export * from './MarigoldProvider';

package/src/Radio/Radio.stories.mdx

@@ -28,6 +28,17 @@ import { useState } from 'react';
         },
       },
     },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Radio label variant',
+      table: {
+        defaultValue: {
+          summary: 'inline',
+        },
+      },
+    },
     label: {
       control: {
         type: 'text',

package/src/Radio/Radio.test.tsx

@@ -4,13 +4,47 @@ import { Radio } from './Radio';
 import { ThemeProvider } from '@marigold/system';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 2,
+  },
   radio: {
-    default: {
-      m: '2px',
+    __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" />);
 

package/src/Radio/Radio.tsx

@@ -8,6 +8,14 @@ import { ValidationMessage } from '../ValidationMessage';
 
 import { RadioChecked, RadioUnchecked } from './RadioIcons';
 
+// Theme Extension
+// ---------------
+export interface RadioThemeExtension<Value> {
+  radio?: {
+    [key: string]: Value;
+  };
+}
+
 // Radio Icon
 // ---------------
 type RadioIconProps = {
@@ -48,7 +56,7 @@ type RadioInputProps = {
 
 const RadioInput: React.FC<RadioInputProps> = ({
   className,
-  variant = 'default',
+  variant = '',
   error,
   ...props
 }) => (
@@ -81,6 +89,7 @@ export type RadioProps = {
   id: string;
   label?: string;
   required?: boolean;
+  labelVariant?: string;
   error?: boolean;
   errorMessage?: string;
 } & RadioInputProps;
@@ -88,6 +97,7 @@ export type RadioProps = {
 export const Radio: React.FC<RadioProps> = ({
   label,
   required,
+  labelVariant = 'inline',
   error,
   errorMessage,
   ...props
@@ -98,7 +108,8 @@ export const Radio: React.FC<RadioProps> = ({
         <Label
           htmlFor={props.id}
           required={required}
-          variant={props.disabled ? 'disabled' : 'inline'}
+          variant={labelVariant}
+          color={props.disabled ? 'disabled' : 'text'}
         >
           <Box as={RadioInput} pr="8px" error={error} {...props} />
           {label}

package/src/Radio/RadioIcons.tsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { SVG } from '@marigold/icons';
+import { SVG } from '@marigold/system';
 
 import { Box } from '../Box';
 

package/src/Select/ListBox.tsx

@@ -20,6 +20,7 @@ export const ListBox = (props: ListBoxProps) => {
   return (
     <Box
       as="ul"
+      p="none"
       css={{
         listStyle: 'none',
       }}

package/src/Select/{Select.stories.mdx → Select.stories.tsx}

@@ -1,10 +1,22 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Select } from './Select';
 import { Item } from '@marigold/components';
 
-<Meta
-  title="Components/Select"
-  argTypes={{
+export default {
+  title: 'Components/Select',
+  argTypes: {
+    label: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Select label',
+        },
+      },
+      defaultValue: 'Favorite Color',
+    },
     placeholder: {
       control: {
         type: 'text',
@@ -57,22 +69,13 @@ import { Item } from '@marigold/components';
     width: {
       control: 'number',
     },
-  }}
-/>
-
-# Select
+  },
+} as Meta;
 
-export const Template = args => (
-  <Select label="Favorite Color" htmlFor="id" {...args}>
-    {/* Storybook crashes with imported <Item> component
-      <Item>Red</Item>
-      <Item>Orange</Item>
-      <Item>Yellow</Item> */}
+export const Basic: ComponentStory<typeof Select> = args => (
+  <Select {...args}>
+    <Item>Red</Item>
+    <Item>Orange</Item>
+    <Item>Yellow</Item>
   </Select>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Select/Select.test.tsx

@@ -6,14 +6,28 @@ import { Item, MarigoldProvider, Section } from '..';
 import { Select } from './Select';
 
 const theme = {
+  colors: {
+    red: 'red',
+  },
+  fonts: {
+    body: 'Inter',
+  },
   button: {
     select: {
-      fontFamily: 'Inter',
+      fontFamily: 'body',
       errorOpened: {
         color: 'red',
       },
     },
   },
+  label: {
+    above: {
+      fontSize: '8px',
+    },
+    inline: {
+      fontSize: '14px',
+    },
+  },
 };
 
 test('supports button select variant', () => {
@@ -29,6 +43,30 @@ test('supports button select variant', () => {
   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}>

package/src/Select/Select.tsx

@@ -19,7 +19,25 @@ 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;
@@ -30,7 +48,10 @@ export type SelectProps = {
   AriaSelectProps<object> &
   SingleSelection;
 
+// Component
+// ---------------
 export const Select = ({
+  labelVariant = 'above',
   placeholder = 'Select an option',
   disabled,
   required,
@@ -75,11 +96,7 @@ export const Select = ({
     <Box position="relative" display="inline-block" width={width && width}>
       {props.label && (
         <Box>
-          <Label
-            {...labelProps}
-            htmlFor={labelProps.id}
-            variant={disabled ? 'disabled' : 'above'}
-          >
+          <Label {...labelProps} htmlFor={labelProps.id} variant={labelVariant}>
             {required ? (
               <Box as="span" display="inline-flex" alignItems="center">
                 {props.label}
@@ -122,11 +139,7 @@ export const Select = ({
           {state.selectedItem ? state.selectedItem.rendered : placeholder}
         </Box>
         {state.isOpen && !disabled ? (
-          <Box
-            as={ArrowUp}
-            size={16}
-            css={{ fill: disabled ? 'disabled' : 'text' }}
-          />
+          <Box as={ArrowUp} size={16} css={{ fill: 'text' }} />
         ) : (
           <Box
             as={ArrowDown}
@@ -141,9 +154,7 @@ export const Select = ({
           {...overlayProps}
           {...positionProps}
           css={{
-            width: width
-              ? width
-              : triggerRef.current && triggerRef.current.offsetWidth + 'px',
+            width: triggerRef.current && triggerRef.current.offsetWidth + 'px',
           }}
           ref={overlayRef as Ref<HTMLDivElement>}
           isOpen={state.isOpen}

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

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 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,23 +1,35 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 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 = 'slider',
+  variant = '',
   className,
   ...props
-}) => {
-  const classNames = useStyles({
-    variant: `form.${variant}`,
-    css: {
-      verticalAlign: 'middle',
-    },
-    className,
-  });
-
-  return <input type="range" className={classNames} {...props} />;
-};
+}) => (
+  <Box
+    as="input"
+    type="range"
+    css={{ verticalAlign: 'middle' }}
+    variant={`slider.${variant}`}
+    className={className}
+    {...props}
+  />
+);