@marigold/components 0.2.0 → 0.3.3

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 → Radio.stories.tsx}

@@ -1,60 +1,57 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React, { useState } from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
 import { Radio } from './Radio';
-import { useState } from 'react';
 
-<Meta
-  title="Components/Radio"
-  parameters={{
+export default {
+  title: 'Components/Radio',
+  parameters: {
     actions: {
       handles: ['click'],
     },
-  }}
-  argTypes={{
-    id: {
+  },
+  argTypes: {
+    variant: {
       control: {
         type: 'text',
       },
-      type: { required: true },
-      description: 'Unique ID',
+      description: 'Radio variant',
+      defaultValue: '__default',
     },
-    variant: {
+    labelVariant: {
       control: {
         type: 'text',
       },
-      description: 'Radio variant',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
+      description: 'Radio label variant',
+      defaultValue: 'inline',
     },
     label: {
       control: {
         type: 'text',
       },
       description: 'Label',
+      defaultValue: 'Radio Label',
     },
     required: {
       control: {
         type: 'boolean',
       },
-      description: 'Require',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
+      description: 'Required',
+      defaultValue: false,
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
       },
+      description: 'Disabled',
+      defaultValue: false,
     },
     error: {
       control: {
         type: 'boolean',
       },
       description: 'Error',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
+      defaultValue: false,
     },
     errorMessage: {
       control: {
@@ -62,25 +59,20 @@ import { useState } from 'react';
       },
       description: 'Error Message',
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Radio
-
-export const Template = ({ onChange, checked, ...args }) => {
+export const Basic: ComponentStory<typeof Radio> = ({
+  onChange,
+  checked,
+  ...args
+}) => {
   const [isChecked, setChecked] = useState(false);
   return (
     <Radio
       onChange={() => setChecked(!isChecked)}
       checked={isChecked}
-      label="Radio Label"
       {...args}
     />
   );
 };
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Radio/Radio.test.tsx

@@ -1,16 +1,53 @@
 import React from 'react';
-import { render, screen } from '@testing-library/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: '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" />);
 
@@ -26,14 +63,14 @@ test('supports required prop and renders required icon', () => {
 });
 
 test('supports default type', () => {
-  render(<Radio id="radio" title="radio" />);
+  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" />);
+  render(<Radio id="radio" title="radio" label="test" />);
 
   const radio = screen.getByTitle(/radio/);
   expect(radio instanceof HTMLInputElement).toBeTruthy();
@@ -48,6 +85,8 @@ test('supports disabled prop', () => {
 
   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', () => {
@@ -64,22 +103,52 @@ test('supports error and errorMessage prop', () => {
 test('supports checked radio', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" onChange={() => {}} checked />
+      <Radio id="test" title="radio" label="test" onChange={() => {}} checked />
     </ThemeProvider>
   );
 
   const radio = screen.getByTitle(/radio/);
-  expect(radio).toBeDefined();
+  expect(radio).toHaveAttribute('checked');
 });
 
 test('supports checked and disabled radio', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Radio id="test" title="radio" onChange={() => {}} checked disabled />
+      <Radio
+        id="test"
+        title="radio"
+        label="test"
+        onChange={() => {}}
+        checked
+        disabled
+      />
     </ThemeProvider>
   );
 
   const radio = screen.getByTitle(/radio/);
-  expect(radio).toBeDefined();
+  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,86 +1,56 @@
 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';
 
-import { RadioChecked, RadioUnchecked } from './RadioIcons';
+// Theme Extension
+// ---------------
+export interface RadioThemeExtension<Value> {
+  radio?: {
+    [key: string]: Value;
+  };
+}
 
-// Radio Icon
+// Radio Input
 // ---------------
-type RadioIconProps = {
-  variant?: string;
-  checked?: boolean;
-  disabled?: boolean;
-  error?: boolean;
-  children?: never;
-};
+type RadioInputProps = RadioIconProps & ComponentProps<'input'>;
+
+const RadioInput: React.FC<RadioInputProps> = ({ error, ...props }) => {
+  const { focusProps } = useFocusRing();
 
-const RadioIcon: React.FC<RadioIconProps> = ({
-  variant,
-  checked,
-  disabled,
-  error,
-}) => {
-  if (checked) {
-    return (
-      <Box as={RadioChecked} variant={`radio.${variant}`} disabled={disabled} />
-    );
-  }
   return (
-    <Box
-      as={RadioUnchecked}
-      variant={`radio.${variant}`}
-      disabled={disabled}
-      error={error}
-    />
+    <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 Input
-// ---------------
-type RadioInputProps = {
-  variant?: string;
-  error?: boolean;
-} & ComponentProps<'input'>;
-
-const RadioInput: React.FC<RadioInputProps> = ({
-  className,
-  variant = 'default',
-  error,
-  ...props
-}) => (
-  <Box display="inline-block" className={className}>
-    <Box
-      as="input"
-      type="radio"
-      css={{
-        position: 'absolute',
-        opacity: 0,
-        zIndex: -1,
-        width: 1,
-        height: 1,
-        overflow: 'hidden',
-      }}
-      {...props}
-    />
-    <RadioIcon
-      checked={props.checked}
-      variant={variant}
-      disabled={props.disabled}
-      error={error}
-    />
-  </Box>
-);
-
 // Radio
 // ---------------
 export type RadioProps = {
   id: string;
-  label?: string;
+  label: string;
   required?: boolean;
+  labelVariant?: string;
   error?: boolean;
   errorMessage?: string;
 } & RadioInputProps;
@@ -88,30 +58,31 @@ export type RadioProps = {
 export const Radio: React.FC<RadioProps> = ({
   label,
   required,
+  labelVariant = 'inline',
   error,
   errorMessage,
   ...props
-}) => {
-  if (label) {
-    return (
-      <>
-        <Label
-          htmlFor={props.id}
-          required={required}
-          variant={props.disabled ? 'disabled' : 'inline'}
-        >
-          <Box as={RadioInput} pr="8px" error={error} {...props} />
-          {label}
-        </Label>
-        {error && errorMessage && (
-          <ValidationMessage>
-            <Exclamation size={16} />
-            {errorMessage}
-          </ValidationMessage>
-        )}
-      </>
-    );
-  }
-
-  return <RadioInput {...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>
+    )}
+  </>
+);