@marigold/components 0.1.0 → 0.3.2

package/src/Menu/Menu.tsx

@@ -1,10 +1,17 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
 import { Button } from '../Button';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface MenuThemeExtension<Value> {
+  menu?: Value;
+}
+
+// Props
+// ---------------
 export type MenuProps = {
   variant?: string;
   label?: string;
@@ -14,30 +21,31 @@ export type MenuProps = {
   title?: string; // For testing
 };
 
+// Component
+// ---------------
 export const Menu: React.FC<MenuProps> = ({
-  variant = 'menu',
+  variant = 'default',
   label = 'Menu',
   onClick,
   show = false,
   children,
   ...props
 }) => {
-  const itemStyles = useStyles({
-    css: {
-      position: 'absolute',
-      minWidth: '120px',
-      display: 'block',
-      textAlign: 'left',
-      borderRadius: '2px',
-    },
-  });
-
   return (
-    <Box variant={`content.${variant}`} {...props}>
+    <Box variant={`menu.${variant}`} {...props}>
       <Button onClick={onClick} variant="menu">
         {label}
       </Button>
-      {show ? <div className={itemStyles}>{children}</div> : null}
+      {show ? (
+        <Box
+          display="block"
+          position="absolute"
+          minWidth="120px"
+          borderRadius="2px"
+        >
+          {children}
+        </Box>
+      ) : null}
     </Box>
   );
 };

package/src/MenuItem/MenuItem.stories.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { MenuItem } from './MenuItem';
+
+export default {
+  title: 'Components/MenuItem',
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof MenuItem> = args => (
+  <MenuItem href="#" {...args}>
+    Home
+  </MenuItem>
+);

package/src/MenuItem/MenuItem.test.tsx

@@ -4,42 +4,49 @@ import { ThemeProvider } from '@marigold/system';
 import { MenuItem } from './MenuItem';
 
 const theme = {
-  menu: {
-    menuItem: {
-      padding: '4px',
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  menuItem: {
+    default: {
+      padding: 'small',
     },
     item: {
-      padding: '8px',
+      padding: 'medium',
     },
   },
 };
 
-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 +57,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,35 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 import { Link } from '../Link';
+import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface MenuItemThemeExtension<Value> {
+  menuItem?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type MenuItemProps = {
   variant?: string;
 } & ComponentProps<typeof Link>;
 
+// Component
+// ---------------
 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.tsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Message } from './Message';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Message',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['warning', 'error', 'info'],
+      description: 'Messaging in different colors and icons',
+    },
+    messageTitle: {
+      control: {
+        type: 'text',
+      },
+      description: 'Content',
+      defaultValue: 'Danger Zone!',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Message> = args => (
+  <Message {...args}>
+    <Text>Hello, I am a simple message.</Text>
+  </Message>
+);

package/src/Message/Message.test.tsx

@@ -4,7 +4,10 @@ import { ThemeProvider } from '@marigold/system';
 import { Message } from './Message';
 
 const theme = {
-  messages: {
+  colors: {
+    primary: 'hotpink',
+  },
+  message: {
     info: {
       alignItems: 'center',
     },

package/src/Message/Message.tsx

@@ -1,15 +1,26 @@
 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';
+import { Text } from '../Text';
 
+// Theme Extension
+// ---------------
+export interface MessageThemeExtension<Value> {
+  message?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type MessageProps = {
   messageTitle: string;
   variant?: string;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Message: React.FC<MessageProps> = ({
   messageTitle,
   variant = 'info',
@@ -28,24 +39,17 @@ export const Message: React.FC<MessageProps> = ({
   return (
     <Box
       display="inline-block"
-      variant={`messages.${variant}`}
+      variant={`message.${variant}`}
       className={className}
       {...props}
     >
-      <Box display="flex" alignItems="center" variant="messages.title">
+      <Box display="flex" alignItems="center" variant="message.title">
         {icon}
-        <Heading
-          variant="h4"
-          className={useStyles({
-            css: {
-              display: 'inline',
-            },
-          })}
-        >
+        <Text as="h4" variant="headline4">
           {messageTitle}
-        </Heading>
+        </Text>
       </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,136 @@
+import React from 'react';
+import { useTheme } from '@marigold/system';
+import { render, screen } from '@testing-library/react';
+
+import { MarigoldProvider } from './MarigoldProvider';
+
+// Setup
+// ---------------
+const theme = {
+  colors: {
+    black: '#000',
+  },
+  fontSizes: {
+    body: 16,
+    heading: 32,
+  },
+  text: {
+    body: {
+      fontSize: 'body',
+      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\\"
+      }
+    }"
+  `);
+});
+
+test('OverlayProvider is added', () => {
+  const { container } = render(
+    <MarigoldProvider theme={theme}>Test</MarigoldProvider>
+  );
+
+  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}>
+      <MarigoldProvider theme={innerTheme}>Test</MarigoldProvider>
+    </MarigoldProvider>
+  );
+
+  expect(
+    container.querySelectorAll(`div[data-overlay-container="true"]`).length
+  ).toEqual(1);
+});
+
+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

@@ -0,0 +1,47 @@
+import React from 'react';
+import { OverlayProvider } from '@react-aria/overlays';
+import {
+  Theme,
+  Global,
+  ThemeProvider,
+  ThemeProviderProps,
+  useTheme,
+  __defaultTheme,
+} from '@marigold/system';
+
+// Theme Extension
+// ---------------
+export interface RootThemeExtension<Value> {
+  root?: {
+    body?: Value;
+    html?: Value;
+  };
+}
+
+// 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}>
+      {isTopLevel ? (
+        <>
+          <Global />
+          <OverlayProvider>{children}</OverlayProvider>
+        </>
+      ) : (
+        children
+      )}
+    </ThemeProvider>
+  );
+}

package/src/Provider/index.ts

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

package/src/Radio/Radio.stories.tsx

@@ -0,0 +1,78 @@
+import React, { useState } from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Radio } from './Radio';
+
+export default {
+  title: 'Components/Radio',
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Radio variant',
+      defaultValue: '__default',
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Radio label variant',
+      defaultValue: 'inline',
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Label',
+      defaultValue: 'Radio Label',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Required',
+      defaultValue: false,
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Disabled',
+      defaultValue: false,
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      defaultValue: false,
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Radio> = ({
+  onChange,
+  checked,
+  ...args
+}) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Radio
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      {...args}
+    />
+  );
+};