@marigold/components 0.2.0 → 0.3.0

package/src/ActionGroup/ActionGroup.stories.mdx

@@ -1,62 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { ActionGroup } from './ActionGroup';
-import { Button } from '../Button';
-
-<Meta
-  title="Components/ActionGroup"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['default'],
-      description: 'ActionGroup style',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-    space: {
-      control: {
-        type: 'text',
-      },
-      description: 'space between the children',
-      table: {
-        defaultValue: {
-          summary: 'none',
-        },
-      },
-    },
-    verticalAlignment: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'alignment vertical',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  }}
-/>
-
-# ActionGroup
-
-export const Template = args => (
-  <ActionGroup {...args}>
-    <Button variant="text" size="small">
-      Cancel
-    </Button>
-    <Button variant="primary" size="small">
-      Confirm
-    </Button>
-  </ActionGroup>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Alert/Alert.stories.mdx

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

package/src/Badge/Badge.stories.mdx

@@ -1,57 +0,0 @@
-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/Box/Box.stories.mdx

@@ -1,334 +0,0 @@
-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" />

package/src/Box/Box.test.tsx

@@ -1,133 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-
-import { ThemeProvider } from '@marigold/system';
-import { Box } from './Box';
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    primary: 'hotpink',
-    black: '#000',
-    white: '#FFF',
-    blue: '#2980b9',
-  },
-  space: [0, 2, 4, 8],
-  sizes: [0, 8, 16, 32],
-  borders: ['none', '1px solid black'],
-  radii: [0, 2, 4],
-  opacities: [0, 0.5, 1],
-  transitions: ['none', '1s opacity'],
-  shadows: ['none', '3px 3px 5px 6px #ccc', 'inset 0 0 10px #000000'],
-  variant: {
-    color: 'primary',
-    p: 2,
-  },
-};
-
-// Tests
-// ---------------
-test('renders a <div> by default', () => {
-  render(<Box>box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('changes rendered element via as prop', () => {
-  render(<Box as="span">box</Box>);
-  const box = screen.getByText(/box/);
-
-  expect(box instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('passes down HTML attributes', () => {
-  render(
-    <Box className="my-custom-class" id="box-id" disabled>
-      box
-    </Box>
-  );
-  const box = screen.getByText(/box/);
-
-  expect(box.getAttribute('id')).toEqual('box-id');
-  expect(box.getAttribute('disabled')).toMatch('');
-  expect(box.getAttribute('class')).toMatch('my-custom-class');
-});
-
-test('forwards ref', () => {
-  const ref = React.createRef<HTMLButtonElement>();
-  render(
-    <Box as="button" ref={ref}>
-      button
-    </Box>
-  );
-
-  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
-});
-
-test.each([
-  [{ display: 'flex' }, 'display: flex'],
-  [{ height: 1 }, 'height: 8px'],
-  [{ width: 2 }, 'width: 16px'],
-  [{ minWidth: 1 }, 'min-width: 8px'],
-  [{ maxWidth: 3 }, 'max-width: 32px'],
-  [{ position: 'absolute' }, 'position: absolute'],
-  [{ top: 0 }, 'top: 0px'],
-  [{ bottom: 1 }, 'bottom: 2px'],
-  [{ right: 3 }, 'right: 8px'],
-  [{ left: 2 }, 'left: 4px'],
-  [{ zIndex: 1000 }, 'z-index: 1000'],
-  [{ p: 1 }, 'padding: 2px'],
-  [{ px: 1 }, 'padding-left: 2px', 'padding-right: 2px'],
-  [{ py: 2 }, 'padding-top: 4px', 'padding-bottom: 4px'],
-  [{ pt: 1 }, 'padding-top: 2px'],
-  [{ pb: 1 }, 'padding-bottom: 2px'],
-  [{ pl: 1 }, 'padding-left: 2px'],
-  [{ pr: 1 }, 'padding-right: 2px'],
-  [{ m: 1 }, 'margin: 2px'],
-  [{ mx: 1 }, 'margin-left: 2px', 'margin-right: 2px'],
-  [{ my: 2 }, 'margin-top: 4px', 'margin-bottom: 4px'],
-  [{ mt: 1 }, 'margin-top: 2px'],
-  [{ mb: 1 }, 'margin-bottom: 2px'],
-  [{ ml: 1 }, 'margin-left: 2px'],
-  [{ mr: 1 }, 'margin-right: 2px'],
-  [{ flexDirection: 'column' }, 'flex-direction: column'],
-  [{ flexWrap: 'wrap' }, 'flex-wrap: wrap'],
-  [{ flexShrink: 5 }, 'flex-shrink: 5'],
-  [{ flexGrow: 1 }, 'flex-grow: 1'],
-  [{ alignItems: 'baseline' }, 'align-items: baseline'],
-  [{ justifyContent: 'space-between' }, 'justify-content: space-between'],
-  [{ bg: 'primary' }, 'background-color: hotpink'],
-  [{ border: 1 }, 'border: 1px solid black'],
-  [{ borderRadius: 2 }, 'border-radius: 4px'],
-  [{ boxShadow: 1 }, 'box-shadow: 3px 3px 5px 6px #ccc'],
-  [{ opacity: 1 }, 'opacity: 0.5'],
-  [{ overflow: 'hidden' }, 'overflow: hidden'],
-  [{ transition: 1 }, 'transition: 1s opacity'],
-])('test style prop %o', (...args) => {
-  const props = args.shift();
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Box {...props}>What's in the box!</Box>
-    </ThemeProvider>
-  );
-
-  const box = screen.getByText(`What's in the box!`);
-  args.forEach((style: any) => {
-    expect(box).toHaveStyle(style);
-  });
-});
-
-test('support variants', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box variant="variant">What's in the box!</Box>
-    </ThemeProvider>
-  );
-
-  const box = screen.getByText(`What's in the box!`);
-  expect(box).toHaveStyle('color: hotpink');
-  expect(box).toHaveStyle('padding: 4px');
-});