@marigold/components 0.1.0 → 0.2.0

package/src/Alert/Alert.stories.mdx

@@ -1,45 +1,35 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { useStyles } from '@marigold/system';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Alert } from './Alert';
-import { Text } from '../Text/';
-
-<Meta title="Components/Alert" />
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Alert"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['success', 'warning', 'error'],
+      description: 'Alerting in different colors and icons',
+      table: {
+        defaultValue: {
+          summary: 'success',
+        },
+      },
+    },
+  }}
+/>
 
 # Alert
 
-## Description
-
-Simple colored element to display an alert message as a reaction to an event.
-Predefined variants are info, success, danger and warning.
-
-## Properties
-
-| Property             | Type                      | Default   |
-| :------------------- | :------------------------ | :-------- |
-| `variant` (optional) | `success, error, warning` | `success` |
-
-## Import
-
-```tsx
-import { Alert } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Alert {...args}>
+    <Text>Alert</Text>
+  </Alert>
+);
 
 <Canvas>
-  <Story name="Success">
-    <Alert>
-      <Text>Success message</Text>
-    </Alert>
-  </Story>
-  <Story name="Error">
-    <Alert variant="error">
-      <Text>Error message</Text>
-    </Alert>
-  </Story>
-  <Story name="Warning">
-    <Alert variant="warning">
-      <Text>Warning message</Text>
-    </Alert>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Alert/Alert.test.tsx

@@ -5,7 +5,7 @@ import { Alert } from './Alert';
 
 const theme = {
   alerts: {
-    info: {
+    success: {
       alignItems: 'center',
     },
     error: {

package/src/Alert/Alert.tsx

@@ -1,57 +1,35 @@
 import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Exclamation, Check, Notification } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
 import { Box } from '../Box';
 
+const ICON_MAP = {
+  success: Check,
+  warning: Notification,
+  error: Exclamation,
+} as const;
+
 export type AlertProps = {
-  variant?: string;
+  variant?: keyof typeof ICON_MAP;
 } & ComponentProps<'div'>;
 
 export const Alert: React.FC<AlertProps> = ({
   variant = 'success',
   children,
-  className,
   ...props
 }) => {
-  const classNames = useStyles({
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    variant: `alerts.${variant}`,
-    className,
-  });
-
-  var bgColor = 'success';
-  if (variant === 'warning') {
-    bgColor = 'warning';
-  } else if (variant === 'error') {
-    bgColor = 'error';
-  }
-  const iconClassName = useStyles({ css: { bg: bgColor, m: '10px' } });
-
-  var icon = <Check size={12} color="#ffffff" className={iconClassName} />;
-  if (variant === 'warning') {
-    icon = <Notification size={12} color="#ffffff" className={iconClassName} />;
-  } else if (variant === 'error') {
-    icon = <Exclamation size={12} color="#ffffff" className={iconClassName} />;
-  }
+  const Icon = ICON_MAP[variant];
 
   return (
-    <Box {...props} className={classNames}>
+    <Box {...props} display="flex" variant={`alerts.${variant}`}>
       <Box
         display="inline-block"
         alignItems="center"
         width="32px"
         height="32px"
-        className={useStyles({
-          css: {
-            bg: bgColor,
-          },
-        })}
+        bg={variant}
       >
-        {icon}
+        <Box as={Icon} size={12} color="#fff" bg={variant} m={10} />
       </Box>
       <Box mx="16px">{children}</Box>
     </Box>

package/src/Badge/Badge.stories.mdx

@@ -1,43 +1,57 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Badge } from './Badge';
-import { Text } from '../Text';
 import { Check } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
 
-<Meta title="Components/Badge" />
+<Meta
+  title="Components/Badge"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['default'],
+      description: 'Badge style',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    bgColor: {
+      control: {
+        type: 'text',
+      },
+      description: 'background',
+      table: {
+        defaultValue: {
+          summary: 'inherit',
+        },
+      },
+    },
+    borderColor: {
+      control: {
+        type: 'text',
+      },
+      description: 'Outline color',
+      table: {
+        defaultValue: {
+          summary: 'transparent',
+        },
+      },
+    },
+  }}
+/>
 
 # Badge
 
-## Description
-
-A badge tags an element with a short note and color. The content of the badge can be anything but preferably a string and/or icon.
-
-## Properties
-
-| Property                 | Type     | Default       |
-| :----------------------- | :------- | :------------ |
-| `variant` (optional)     | `string` | `default`     |
-| `borderColor` (optional) | `string` | `transparent` |
-| `bgColor` (optional)     | `string` | `inherit`     |
-
-## Import
-
-```tsx
-import { Badge } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <Badge {...args}>
+    <Check /> Check
+  </Badge>
+);
 
 <Canvas>
-  <Story name="Colored Background">
-    <Badge borderColor="black" bgColor="orange">
-      <Text>New</Text>
-    </Badge>
-  </Story>
-  <Story name="Outlined">
-    <Badge borderColor="orange" className={useStyles({ display: 'flex' })}>
-      <Check size={18} />
-      cool
-    </Badge>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Badge/Badge.test.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useStyles, ThemeProvider } from '@marigold/system';
+import { ThemeProvider } from '@marigold/system';
 import { Badge } from './Badge';
 
 const theme = {
@@ -48,22 +48,14 @@ test('supports other variant than default', () => {
 });
 
 test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ css: { fontSize: '8px' } });
-    return (
-      <Badge className={classNames} {...props}>
-        {children}
-      </Badge>
-    );
-  };
-
-  const { getByText } = render(
+  render(
     <ThemeProvider theme={theme}>
-      <TestComponent>text</TestComponent>
+      <Badge className="custom-class-name" title="badge">
+        badge
+      </Badge>
     </ThemeProvider>
   );
-  const testelem = getByText('text');
-  const text = getComputedStyle(testelem);
+  const badge = screen.getByTitle(/badge/);
 
-  expect(text.fontSize).toEqual('8px');
+  expect(badge.className).toMatch('custom-class-name');
 });

package/src/Badge/Badge.tsx

@@ -1,7 +1,6 @@
 import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
-import { useStyles } from '@marigold/system';
 
 export type BadgeProps = {
   variant?: string;
@@ -17,7 +16,7 @@ export const Badge: React.FC<BadgeProps> = ({
   ...props
 }) => (
   <Box
-    className={useStyles({ css: { bg: bgColor, borderColor: borderColor } })}
+    css={{ bg: bgColor, borderColor: borderColor }}
     variant={`badge.${variant}`}
     {...props}
   >

package/src/Box/Box.stories.mdx

@@ -1,38 +1,334 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Box } from './Box';
 import { Button } from '../Button';
 import { Label } from '../Label';
 
-<Meta title="Components/Box" />
+<Meta
+  title="Components/Box"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    display: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'General',
+      },
+    },
+    height: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Width',
+      },
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Width',
+      },
+    },
+    minWidth: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Width',
+      },
+    },
+    maxWidth: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Width',
+      },
+    },
+    position: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Position',
+      },
+    },
+    top: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Position',
+      },
+    },
+    bottom: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Position',
+      },
+    },
+    right: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Position',
+      },
+    },
+    left: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Position',
+      },
+    },
+    zIndex: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Position',
+      },
+    },
+    p: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    px: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    py: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    pt: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    pb: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    pl: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    pr: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Padding',
+      },
+    },
+    m: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    mx: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    my: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    mt: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    mb: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    ml: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    mr: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Margin',
+      },
+    },
+    flexDirection: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Flex',
+      },
+    },
+    flexWrap: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Flex',
+      },
+    },
+    flexShrink: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Flex',
+      },
+    },
+    flexGrow: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Flex',
+      },
+    },
+    alignItems: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Flex',
+      },
+    },
+    justifyContent: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Flex',
+      },
+    },
+    bg: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+    border: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+    borderRadius: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+    boxShadow: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+    opacity: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+    overflow: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+    transition: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Other',
+      },
+    },
+  }}
+/>
 
 # Box-Component
 
-## Import
+## For custom components
 
-```js
-import { Box } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="div-box">
-    <Box>I am basic box!</Box>
-  </Story>
-</Canvas>
+export const Template = args => <Box {...args}>Style me!</Box>;
 
 <Canvas>
-  <Story name="button-box">
-    <Box as="button" bg="primary">
-      I am a button box!
-    </Box>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-<Canvas>
-  <Story name="h1-box">
-    <Box as="h1" p="3">
-      I am a blue headline!
-    </Box>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />