@marigold/components 0.0.2 → 0.3.0

package/src/Menu/Menu.tsx

@@ -1,45 +1,51 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
-import { Button } from '@marigold/components';
+import { ComponentProps } from '@marigold/types';
 
-type MenuProps = {
+import { Button } from '../Button';
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface MenuThemeExtension<Value> {
+  menu?: Value;
+}
+
+// Props
+// ---------------
+export type MenuProps = {
   variant?: string;
   label?: string;
-  onClick: () => void;
+  onClick: ComponentProps<typeof Button>['onClick'];
   show?: boolean;
+  className?: string;
+  title?: string; // For testing
 };
 
-export const Menu = system<MenuProps, 'div'>(
-  ({
-    variant = 'menu',
-    label = 'Menu',
-    onClick,
-    show = false,
-    className,
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles(
-      {
-        variant: `content.${variant}`,
-      },
-      className
-    );
-    const itemStyles = useStyles({
-      position: 'absolute',
-      minWidth: '120px',
-      display: 'block',
-      textAlign: 'left',
-      borderRadius: '2px',
-    });
-
-    return (
-      <div className={classNames} {...props}>
-        <Button onClick={onClick} variant="menu">
-          {label}
-        </Button>
-        {show ? <div className={itemStyles}>{children}</div> : null}
-      </div>
-    );
-  }
-);
+// Component
+// ---------------
+export const Menu: React.FC<MenuProps> = ({
+  variant = 'default',
+  label = 'Menu',
+  onClick,
+  show = false,
+  children,
+  ...props
+}) => {
+  return (
+    <Box variant={`menu.${variant}`} {...props}>
+      <Button onClick={onClick} variant="menu">
+        {label}
+      </Button>
+      {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

@@ -1,45 +1,52 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { MenuItem } from '@marigold/components';
+import { MenuItem } from './MenuItem';
 
 const theme = {
-  content: {
-    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,24 +1,35 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
-import { Link } from '@marigold/components';
+import { ComponentProps } from '@marigold/types';
+import { Link } from '../Link';
+import { Box } from '../Box';
 
-type MenuItemProps = {
-  variant?: string;
-};
+// Theme Extension
+// ---------------
+export interface MenuItemThemeExtension<Value> {
+  menuItem?: {
+    [key: string]: Value;
+  };
+}
 
-export const MenuItem = system<MenuItemProps, 'a'>(
-  ({ variant = 'menuItem', className, children, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `content.${variant}`,
-      },
-      className
-    );
+// Props
+// ---------------
+export type MenuItemProps = {
+  variant?: string;
+} & ComponentProps<typeof Link>;
 
-    return (
-      <Link variant="menu" className={classNames} {...props}>
+// Component
+// ---------------
+export const MenuItem: React.FC<MenuItemProps> = ({
+  variant = 'default',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <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

@@ -1,10 +1,13 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Message } from '@marigold/components';
+import { Message } from './Message';
 
 const theme = {
-  messages: {
+  colors: {
+    primary: 'hotpink',
+  },
+  message: {
     info: {
       alignItems: 'center',
     },

package/src/Message/Message.tsx

@@ -1,47 +1,55 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
-import { Heading } from '@marigold/components';
 import { Exclamation, Info, Notification } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
+import { Text } from '../Text';
 
-type MessageProps = {
+// Theme Extension
+// ---------------
+export interface MessageThemeExtension<Value> {
+  message?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
+export type MessageProps = {
   messageTitle: string;
   variant?: string;
-};
-
-export const Message = system<MessageProps, 'div'>(
-  ({ messageTitle, variant = 'info', className, children, ...props }) => {
-    const classNames = useStyles(
-      {
-        element: ['p'],
-        variant: `messages.${variant}`,
-        display: 'inline-block',
-      },
-      className
-    );
-
-    var icon = <Info className={useStyles({ verticalAlign: '-5px' })} />;
+} & ComponentProps<'div'>;
 
-    if (variant === 'warning') {
-      icon = <Notification className={useStyles({ verticalAlign: '-5px ' })} />;
-    } else if (variant === 'error') {
-      icon = <Exclamation className={useStyles({ verticalAlign: '-5px ' })} />;
-    }
-
-    return (
-      <div className={classNames} {...props}>
-        <div className={useStyles({ marginBottom: '8px', marginRight: '4px' })}>
-          {icon}
-          <Heading
-            variant="h4"
-            className={useStyles({
-              display: 'inline',
-            })}
-          >
-            {messageTitle}
-          </Heading>
-        </div>
-        <div className={useStyles({ color: 'black' })}>{children}</div>
-      </div>
-    );
+// Component
+// ---------------
+export const Message: React.FC<MessageProps> = ({
+  messageTitle,
+  variant = 'info',
+  className,
+  children,
+  ...props
+}) => {
+  var icon = <Info />;
+  if (variant === 'warning') {
+    icon = <Notification />;
+  }
+  if (variant === 'error') {
+    icon = <Exclamation />;
   }
-);
+
+  return (
+    <Box
+      display="inline-block"
+      variant={`message.${variant}`}
+      className={className}
+      {...props}
+    >
+      <Box display="flex" alignItems="center" variant="message.title">
+        {icon}
+        <Text as="h4" variant="headline4">
+          {messageTitle}
+        </Text>
+      </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';