@marigold/components 0.1.0 → 0.2.0

package/src/MenuItem/MenuItem.test.tsx

@@ -4,8 +4,8 @@ import { ThemeProvider } from '@marigold/system';
 import { MenuItem } from './MenuItem';
 
 const theme = {
-  menu: {
-    menuItem: {
+  menuItem: {
+    default: {
       padding: '4px',
     },
     item: {
@@ -14,32 +14,34 @@ const theme = {
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports default variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <MenuItem title="menuItem" />
+      <MenuItem title="menuItem">Item</MenuItem>
     </ThemeProvider>
   );
   const menuItem = screen.getByTitle(/menuItem/);
 
-  expect(menuItem).toHaveStyle(`padding: 4px`);
+  expect(menuItem.parentElement).toHaveStyle(`padding: 4px`);
 });
 
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <MenuItem title="menuItem" variant="item" />
+      <MenuItem title="menuItem" variant="item">
+        Item
+      </MenuItem>
     </ThemeProvider>
   );
   const menuItem = screen.getByTitle(/menuItem/);
 
-  expect(menuItem).toHaveStyle(`padding: 8px`);
+  expect(menuItem.parentElement).toHaveStyle(`padding: 8px`);
 });
 
 test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
-      <MenuItem title="menuItem" />
+      <MenuItem title="menuItem">Item</MenuItem>
     </ThemeProvider>
   );
   const menuItem = screen.getByTitle(/menuItem/);
@@ -50,10 +52,12 @@ test('renders correct HTML element', () => {
 test('accepts custom styles prop className', () => {
   render(
     <ThemeProvider theme={theme}>
-      <MenuItem className="custom-class-name" title="menuItem" />
+      <MenuItem title="menuItem" className="custom-class-name">
+        Item
+      </MenuItem>
     </ThemeProvider>
   );
-  const menuItem = screen.getByTitle(/menuItem/);
+  const menuItem = screen.getByText(/Item/).parentElement;
 
-  expect(menuItem.className).toMatch('custom-class-name');
+  expect(menuItem).toHaveClass('custom-class-name');
 });

package/src/MenuItem/MenuItem.tsx

@@ -1,26 +1,23 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 import { Link } from '../Link';
+import { Box } from '../Box';
 
 export type MenuItemProps = {
   variant?: string;
 } & ComponentProps<typeof Link>;
 
 export const MenuItem: React.FC<MenuItemProps> = ({
-  variant = 'menuItem',
+  variant = 'default',
   className,
   children,
   ...props
 }) => {
-  const classNames = useStyles({
-    variant: `menu.${variant}`,
-    className,
-  });
-
   return (
-    <Link {...props} variant="menu" className={classNames}>
-      {children}
-    </Link>
+    <Box variant={`menuItem.${variant}`} className={className}>
+      <Link variant="menuItemLink" {...props}>
+        {children}
+      </Link>
+    </Box>
   );
 };

package/src/Message/Message.stories.mdx

@@ -1,44 +1,44 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Message } from './Message';
 import { Text } from '../Text';
 
-<Meta title="Components/Message" />
+<Meta
+  title="Components/Message"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['warning', 'error', 'info'],
+      description: 'Messaging in different colors and icons',
+      table: {
+        defaultValue: {
+          summary: 'info',
+        },
+      },
+    },
+    messageTitle: {
+      control: {
+        type: 'text',
+      },
+      description: 'Content',
+      type: {
+        required: true,
+      },
+    },
+  }}
+/>
 
 # Message
 
-## Description
-
-Simple component to display a message with a title and icon based on a `div` element and styled with a theme.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `messageTitle`       | `string` |         |
-| `variant` (optional) | `string` | `info`  |
-
-## Import
-
-```tsx
-import { Message } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Message messageTitle="Danger Zone!" {...args}>
+    <Text>Hello, I am a simple message.</Text>
+  </Message>
+);
 
 <Canvas>
-  <Story name="Message">
-    <Message variant="warning" messageTitle="Danger Zone!">
-      <Text>Hello, I am a simple warning message.</Text>
-    </Message>
-    <br />
-    <br />
-    <Message variant="error" messageTitle="Wrong here.">
-      <Text>Hello, I am a simple error message.</Text>
-    </Message>
-    <br />
-    <br />
-    <Message messageTitle="There is an update available.">
-      <Text>Hello, I am a simple info message.</Text>
-    </Message>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Message/Message.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
 import { Exclamation, Info, Notification } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
 import { Heading } from '../Heading';
@@ -34,18 +33,11 @@ export const Message: React.FC<MessageProps> = ({
     >
       <Box display="flex" alignItems="center" variant="messages.title">
         {icon}
-        <Heading
-          variant="h4"
-          className={useStyles({
-            css: {
-              display: 'inline',
-            },
-          })}
-        >
+        <Heading as="h4" variant="h4">
           {messageTitle}
         </Heading>
       </Box>
-      <Box className={useStyles({ css: { color: 'black' } })}>{children}</Box>
+      <Box css={{ color: 'black' }}>{children}</Box>
     </Box>
   );
 };

package/src/Provider/MarigoldProvider.test.tsx

@@ -0,0 +1,126 @@
+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 = {
+  text: {
+    body: {
+      fontSize: 1,
+      color: 'black',
+    },
+  },
+};
+
+test('themes can be cascaded', () => {
+  const outerTheme = {
+    colors: {
+      primary: 'coral',
+    },
+  };
+
+  const innerTheme = {
+    colors: {
+      primary: 'gainsboro',
+    },
+  };
+
+  const Theme = ({ testId }: { testId: string }) => {
+    const { theme } = useTheme();
+    return <div data-testid={testId}>{JSON.stringify(theme, null, 2)}</div>;
+  };
+
+  render(
+    <MarigoldProvider theme={outerTheme}>
+      <>
+        <Theme testId="outer" />
+        <MarigoldProvider theme={innerTheme}>
+          <Theme testId="inner" />
+        </MarigoldProvider>
+      </>
+    </MarigoldProvider>
+  );
+
+  const outer = screen.getByTestId('outer');
+  const inner = screen.getByTestId('inner');
+
+  expect(outer.innerHTML).toMatchInlineSnapshot(`
+    "{
+      \\"colors\\": {
+        \\"primary\\": \\"coral\\"
+      }
+    }"
+  `);
+  expect(inner.innerHTML).toMatchInlineSnapshot(`
+    "{
+      \\"colors\\": {
+        \\"primary\\": \\"gainsboro\\"
+      }
+    }"
+  `);
+});
+
+// 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>;
+  };
+
+  render(
+    <MarigoldProvider theme={theme}>
+      <ChildComponent>Test</ChildComponent>
+    </MarigoldProvider>
+  );
+
+  const childComp = screen.getByText('Test');
+  expect(childComp).toBeDefined();
+});
+
+// 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');
+// });

package/src/Provider/MarigoldProvider.tsx

@@ -0,0 +1,29 @@
+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';
+
+// const GlobalStyles = () => {
+//   const theme = useTheme();
+//   const styles = css({
+//     body: { variant: 'root.body' },
+//     html: { variant: 'root.html' },
+//   })(theme);
+
+//   return <Global styles={styles} />;
+// };
+// a merge of the ThemeProvider and the react-aria OverlayProvider
+export const MarigoldProvider: React.FC<ThemeProviderProps> = ({
+  theme,
+  children,
+}) => {
+  return (
+    <ThemeProvider theme={theme}>
+      <OverlayProvider>
+        {/* <GlobalStyles /> */}
+        {children}
+      </OverlayProvider>
+    </ThemeProvider>
+  );
+};

package/src/Provider/index.ts

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

package/src/Radio/Radio.stories.mdx

@@ -1,100 +1,86 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { useState } from 'react';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Radio } from './Radio';
+import { useState } from 'react';
 
-<Meta title="Components/Radio" />
-
-# Radio Button
-
-## Description
-
-With the Radio Button component you can add a HTML `<input>` element with `type="radio"` to your form.
-The element uses always the themeSection with the name: `form` in your given theme. The variant in your section can be added with the variant prop. The default variant is `radio`.
-
-## Properties
-
-| Property              | Type      | Default |
-| :-------------------- | :-------- | :------ |
-| `id`                  | `string`  |         |
-| `variant` (optional)  | `string`  | `radio` |
-| `label` (optional)    | `string`  |         |
-| `required` (optional) | `boolean` |         |
-
-## Import
-
-```tsx
-import { Radio } from '@marigold/components';
-```
-
-## Usage
-
-### Radio standard labeled
+<Meta
+  title="Components/Radio"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    id: {
+      control: {
+        type: 'text',
+      },
+      type: { required: true },
+      description: 'Unique ID',
+    },
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Radio variant',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Label',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Require',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+  }}
+/>
 
-<Canvas>
-  <Story name="RadioOne">
-    {() => {
-      const [state, setState] = React.useState('Mastercard');
-      const onChange = changeEvent => {
-        setState(changeEvent.currentTarget.value);
-      };
-      return (
-        <div>
-          <Radio
-            id="mc"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'Mastercard'}
-            value="Mastercard"
-            label="Mastercard"
-          />
-          <br />
-          <Radio
-            id="vi"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'Visa'}
-            value="Visa"
-            label="Visa"
-          />
-          <br />
-          <Radio
-            id="ae"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'AmericanExpress'}
-            value="AmericanExpress"
-            label="AmericanExpress"
-          />
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
+# Radio
 
-### Radio checked and disabled
+export const Template = ({ onChange, checked, ...args }) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Radio
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      label="Radio Label"
+      {...args}
+    />
+  );
+};
 
 <Canvas>
-  <Story name="RadioTwo">
-    <div>
-      <Radio id="radio" checked />
-      <Radio id="radio" disabled />
-      <Radio id="radio" checked disabled />
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-### Radio with required label
-
-<Canvas>
-  <Story name="RadioThree">
-    <div>
-      <Radio
-        checked
-        id="required"
-        value="required"
-        required
-        label="This label is required"
-      />
-    </div>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Radio/Radio.test.tsx

@@ -1,43 +1,85 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { Radio } from './Radio';
+import { ThemeProvider } from '@marigold/system';
+
+const theme = {
+  radio: {
+    default: {
+      m: '2px',
+    },
+  },
+};
 
 test('supports label prop', () => {
   render(<Radio label="Test" id="test" title="radio" />);
-  const radio = screen.getByText(/Test/);
 
-  expect(radio).toBeDefined();
+  const radioLabel = screen.getByText(/Test/);
+  expect(radioLabel).toBeDefined();
 });
 
-test('supports required prop an renders required icon', () => {
+test('supports required prop and renders required icon', () => {
   render(<Radio label="Test" id="test" required title="radio" />);
-  const radio = screen.getByText(/Test/);
 
-  expect(radio).toContainHTML('path d="M10.8');
+  const label = screen.getByText(/Test/);
+  expect(label.nextSibling).toContainHTML('path d="M10.8');
 });
 
 test('supports default type', () => {
   render(<Radio id="radio" title="radio" />);
-  const radio = screen.getByTitle(/radio/);
 
+  const radio = screen.getByTitle(/radio/);
   expect(radio.getAttribute('type')).toEqual('radio');
 });
 
 test('renders <input> element', () => {
   render(<Radio id="radio" title="radio" />);
-  const radio = screen.getByTitle(/radio/);
 
+  const radio = screen.getByTitle(/radio/);
   expect(radio instanceof HTMLInputElement).toBeTruthy();
 });
 
-test('renders <SVG> CircleUnchecked element', () => {
-  render(<Radio id="radio" label="Test" />);
-  const radio = screen.getByText(/Test/);
-  expect(radio).toContainHTML('path d="M5.62507');
+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');
 });
 
-test('renders <SVG> CircleChecked element', () => {
-  render(<Radio id="radio" checked onChange={() => {}} label="Test" />);
-  const radio = screen.getByText(/Test/);
-  expect(radio).toContainHTML('path d="M12');
+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" onChange={() => {}} checked />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toBeDefined();
+});
+
+test('supports checked and disabled radio', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" onChange={() => {}} checked disabled />
+    </ThemeProvider>
+  );
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toBeDefined();
+  expect(radio).toHaveAttribute('disabled');
 });