@marigold/components 0.0.1 → 0.2.0

package/src/Message/Message.test.tsx

@@ -0,0 +1,87 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Message } from './Message';
+
+const theme = {
+  messages: {
+    info: {
+      alignItems: 'center',
+    },
+    warning: {
+      alignItems: 'right',
+    },
+    error: {
+      alignItems: 'left',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Message data-testid="messages" messageTitle="Default">
+        Default
+      </Message>
+    </ThemeProvider>
+  );
+  const message = screen.getByTestId(/messages/);
+
+  expect(message).toHaveStyle(`align-items: center`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Message data-testid="messages" messageTitle="info" variant="warning">
+        Danger
+      </Message>
+    </ThemeProvider>
+  );
+  const message = screen.getByTestId(/messages/);
+
+  expect(message).toHaveStyle(`align-items: right`);
+});
+
+test('accepts other third variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Message data-testid="messages" messageTitle="error" variant="error">
+        error
+      </Message>
+    </ThemeProvider>
+  );
+  const message = screen.getByTestId(/messages/);
+
+  expect(message).toHaveStyle(`align-items: left`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Message data-testid="messages" messageTitle="messages">
+        Default
+      </Message>
+    </ThemeProvider>
+  );
+  const message = screen.getByTestId(/messages/);
+
+  expect(message instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Message
+        className="custom-class-name"
+        data-testid="message"
+        messageTitle="message"
+      >
+        message
+      </Message>
+    </ThemeProvider>
+  );
+  const message = screen.getByTestId(/message/);
+
+  expect(message.className).toMatch('custom-class-name');
+});

package/src/Message/Message.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import { Exclamation, Info, Notification } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
+import { Heading } from '../Heading';
+
+export type MessageProps = {
+  messageTitle: string;
+  variant?: string;
+} & ComponentProps<'div'>;
+
+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={`messages.${variant}`}
+      className={className}
+      {...props}
+    >
+      <Box display="flex" alignItems="center" variant="messages.title">
+        {icon}
+        <Heading as="h4" variant="h4">
+          {messageTitle}
+        </Heading>
+      </Box>
+      <Box css={{ color: 'black' }}>{children}</Box>
+    </Box>
+  );
+};

package/src/Message/index.ts

@@ -0,0 +1 @@
+export * from './Message';

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,89 +1,86 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Label, Radio } from '@marigold/components';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Radio } from './Radio';
 import { useState } from 'react';
 
-<Meta title="Components/Form/Radio" />
+<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',
+    },
+  }}
+/>
 
-# Radio Button
+# Radio
 
-## Description
+export const Template = ({ onChange, checked, ...args }) => {
+  const [isChecked, setChecked] = useState(false);
+  return (
+    <Radio
+      onChange={() => setChecked(!isChecked)}
+      checked={isChecked}
+      label="Radio Label"
+      {...args}
+    />
+  );
+};
 
-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`.
-Specific css style prop can also be added.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Properties
-
-| Property  | Type        | Default   |
-| :-------- | :---------- | :-------- |
-| `variant` | `string`    | `'radio'` |
-| `css`     | `css props` |           |
-
-## Import
-
-```tsx
-import { Radio } from '@marigold/components';
-```
-
-## Usage
-
-### Radio standard labeled
-
-<Preview>
-  <Story name="RadioOne">
-    {() => {
-      const [state, setState] = React.useState('Mastercard');
-      const onChange = changeEvent => {
-        setState(changeEvent.currentTarget.value);
-      };
-      return (
-        <div>
-          <Label htmlFor="mc">
-            <Radio
-              id="mc"
-              name="payment"
-              onChange={onChange}
-              checked={state === 'Mastercard'}
-              value="Mastercard"
-            />
-            Mastercard
-          </Label>
-          <br />
-          <Label htmlFor="vi">
-            <Radio
-              id="vi"
-              name="payment"
-              onChange={onChange}
-              checked={state === 'Visa'}
-              value="Visa"
-            />
-            Visa
-          </Label>
-          <br />
-          <Label htmlFor="ae">
-            <Radio
-              id="ae"
-              name="payment"
-              onChange={onChange}
-              checked={state === 'AmericanExpress'}
-              value="AmericanExpress"
-            />
-            American Express
-          </Label>
-        </div>
-      );
-    }}
-  </Story>
-</Preview>
-
-### Radio checked and disabled
-
-<Preview>
-  <Story name="RadioTwo">
-    <div>
-      <Radio checked />
-      <Radio disabled />
-      <Radio checked disabled />
-    </div>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

package/src/Radio/Radio.test.tsx

@@ -1,44 +1,85 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { Label, Radio } from '@marigold/components';
+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 radioLabel = screen.getByText(/Test/);
+  expect(radioLabel).toBeDefined();
+});
+
+test('supports required prop and renders required icon', () => {
+  render(<Radio label="Test" id="test" required title="radio" />);
+
+  const label = screen.getByText(/Test/);
+  expect(label.nextSibling).toContainHTML('path d="M10.8');
+});
 
 test('supports default type', () => {
-  render(<Radio title="radio" />);
-  const radio = screen.getByTitle(/radio/);
+  render(<Radio id="radio" title="radio" />);
 
+  const radio = screen.getByTitle(/radio/);
   expect(radio.getAttribute('type')).toEqual('radio');
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
-  render(<Radio title="radio" css={{ color: 'blue' }} />);
-  const radio = screen.getByTitle(/radio/);
+test('renders <input> element', () => {
+  render(<Radio id="radio" title="radio" />);
 
-  expect(radio).not.toHaveStyle('color: blue');
+  const radio = screen.getByTitle(/radio/);
+  expect(radio instanceof HTMLInputElement).toBeTruthy();
 });
 
-test('renders <input> element', () => {
-  render(<Radio title="radio" />);
+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');
+});
 
-  expect(radio instanceof HTMLInputElement).toBeTruthy();
+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('renders <SVG> CircleUnchecked element', () => {
+test('supports checked radio', () => {
   render(
-    <Label htmlFor="radio">
-      <Radio id="radio" /> Test
-    </Label>
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" onChange={() => {}} checked />
+    </ThemeProvider>
   );
-  const radio = screen.getByText(/Test/);
-  expect(radio).toContainHTML('path d="M5.62507');
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toBeDefined();
 });
 
-test('renders <SVG> CircleChecked element', () => {
+test('supports checked and disabled radio', () => {
   render(
-    <Label htmlFor="radio">
-      <Radio id="radio" checked /> Test
-    </Label>
+    <ThemeProvider theme={theme}>
+      <Radio id="test" title="radio" onChange={() => {}} checked disabled />
+    </ThemeProvider>
   );
-  const radio = screen.getByText(/Test/);
-  expect(radio).toContainHTML('path d="M12');
+
+  const radio = screen.getByTitle(/radio/);
+  expect(radio).toBeDefined();
+  expect(radio).toHaveAttribute('disabled');
 });