@marigold/components 0.0.1 → 0.2.0

package/src/Alert/Alert.test.tsx

@@ -1,64 +1,79 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
-import { Alert } from '@marigold/components';
+import { ThemeProvider } from '@marigold/system';
+import { Alert } from './Alert';
 
 const theme = {
   alerts: {
-    info: {
+    success: {
       alignItems: 'center',
     },
-    danger: {
+    error: {
       alignItems: 'right',
     },
+    warning: {
+      alignItems: 'left',
+    },
   },
 };
 
 test('supports default variant and themeSection', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Alert title="default">Default</Alert>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const alert = screen.getByTitle(/default/);
 
   expect(alert).toHaveStyle(`align-items: center`);
 });
 
-test('accepts other variant than default', () => {
+test('accepts error variant', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Alert title="danger" variant="danger">
-        Danger
+    <ThemeProvider theme={theme}>
+      <Alert title="error" variant="error">
+        Error
       </Alert>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
-  const alert = screen.getByTitle(/danger/);
+  const alert = screen.getByTitle(/error/);
 
   expect(alert).toHaveStyle(`align-items: right`);
 });
 
+test('accepts warning variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Alert title="warning" variant="warning">
+        warning
+      </Alert>
+    </ThemeProvider>
+  );
+  const alert = screen.getByTitle(/warning/);
+
+  expect(alert).toHaveStyle(`align-items: left`);
+});
+
 test('renders correct HTML element', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Alert title="default">Default</Alert>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const alert = screen.getByTitle(/default/);
 
   expect(alert instanceof HTMLDivElement).toBeTruthy();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('accepts custom styles prop className', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Alert title="default" css={{ alignItems: 'left' }}>
-        Default
+    <ThemeProvider theme={theme}>
+      <Alert className="custom-class-name" title="alert">
+        alert
       </Alert>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
-  const alert = screen.getByTitle(/default/);
+  const alert = screen.getByTitle(/alert/);
 
-  expect(alert).toHaveStyle(`align-items: center`);
-  expect(alert).not.toHaveStyle(`align-items: left`);
+  expect(alert.className).toMatch('custom-class-name');
 });

package/src/Alert/Alert.tsx

@@ -1,27 +1,37 @@
 import React from 'react';
-import { Box, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+import { Exclamation, Check, Notification } from '@marigold/icons';
+import { Box } from '../Box';
 
-type AlertProps = {};
+const ICON_MAP = {
+  success: Check,
+  warning: Notification,
+  error: Exclamation,
+} as const;
 
-export const Alert = system<AlertProps, 'div'>(
-  ({ variant = 'info', ref, children, ...props }) => {
-    return (
+export type AlertProps = {
+  variant?: keyof typeof ICON_MAP;
+} & ComponentProps<'div'>;
+
+export const Alert: React.FC<AlertProps> = ({
+  variant = 'success',
+  children,
+  ...props
+}) => {
+  const Icon = ICON_MAP[variant];
+
+  return (
+    <Box {...props} display="flex" variant={`alerts.${variant}`}>
       <Box
-        as="div"
-        ref={ref}
-        themeSection="alerts"
-        variant={variant}
-        {...props}
-        css={{
-          display: 'flex',
-          alignItems: 'center',
-          px: 3,
-          py: 2,
-          borderRadius: 4,
-        }}
+        display="inline-block"
+        alignItems="center"
+        width="32px"
+        height="32px"
+        bg={variant}
       >
-        {children}
+        <Box as={Icon} size={12} color="#fff" bg={variant} m={10} />
       </Box>
-    );
-  }
-);
+      <Box mx="16px">{children}</Box>
+    </Box>
+  );
+};

package/src/Badge/Badge.stories.mdx

@@ -0,0 +1,57 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Badge } from './Badge';
+import { Check } from '@marigold/icons';
+
+<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
+
+export const Template = args => (
+  <Badge {...args}>
+    <Check /> Check
+  </Badge>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Badge/Badge.test.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Badge } from './Badge';
+
+const theme = {
+  badge: {
+    default: {
+      borderRadius: '8px',
+    },
+    fatBadge: {
+      borderRadius: '12px',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Badge title="badge" />
+    </ThemeProvider>
+  );
+  const badge = screen.getByTitle(/badge/);
+
+  expect(badge).toHaveStyle(`border-radius: 8px;`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Badge title="badge" />
+    </ThemeProvider>
+  );
+  const badge = screen.getByTitle(/badge/);
+
+  expect(badge instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Badge variant="fatBadge" title="badge" />
+    </ThemeProvider>
+  );
+  const badge = screen.getByTitle(/badge/);
+
+  expect(badge).toHaveStyle(`border-radius: 12px;`);
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Badge className="custom-class-name" title="badge">
+        badge
+      </Badge>
+    </ThemeProvider>
+  );
+  const badge = screen.getByTitle(/badge/);
+
+  expect(badge.className).toMatch('custom-class-name');
+});

package/src/Badge/Badge.tsx

@@ -0,0 +1,25 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
+
+export type BadgeProps = {
+  variant?: string;
+  bgColor?: string;
+  borderColor?: string;
+} & ComponentProps<'div'>;
+
+export const Badge: React.FC<BadgeProps> = ({
+  variant = 'default',
+  bgColor = 'transparent',
+  borderColor = 'transparent',
+  children,
+  ...props
+}) => (
+  <Box
+    css={{ bg: bgColor, borderColor: borderColor }}
+    variant={`badge.${variant}`}
+    {...props}
+  >
+    {children}
+  </Box>
+);

package/src/Badge/index.ts

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

package/src/Box/Box.stories.mdx

@@ -0,0 +1,334 @@
+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"
+  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
+
+## For custom components
+
+export const Template = args => <Box {...args}>Style me!</Box>;
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />