@marigold/components 0.2.0 → 0.3.3

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');
-});

package/src/Box/Box.tsx

@@ -1,165 +0,0 @@
-import React, { forwardRef } from 'react';
-import { CSSObject, Element, ResponsiveStyleValue } from '@marigold/system';
-import {
-  PolymorphicPropsWithRef,
-  PolymorphicComponentWithRef,
-} from '@marigold/types';
-
-export type BoxOwnProps = {
-  className?: string;
-  variant?: string | string[];
-  css?: CSSObject;
-
-  display?: ResponsiveStyleValue<string>;
-
-  height?: ResponsiveStyleValue<number | string>;
-  width?: ResponsiveStyleValue<number | string>;
-  minWidth?: ResponsiveStyleValue<number | string>;
-  maxWidth?: ResponsiveStyleValue<number | string>;
-
-  position?: ResponsiveStyleValue<string>;
-  top?: ResponsiveStyleValue<number | string>;
-  bottom?: ResponsiveStyleValue<number | string>;
-  right?: ResponsiveStyleValue<number | string>;
-  left?: ResponsiveStyleValue<number | string>;
-  zIndex?: ResponsiveStyleValue<number | string>;
-
-  p?: ResponsiveStyleValue<number | string>;
-  px?: ResponsiveStyleValue<number | string>;
-  py?: ResponsiveStyleValue<number | string>;
-  pt?: ResponsiveStyleValue<number | string>;
-  pb?: ResponsiveStyleValue<number | string>;
-  pl?: ResponsiveStyleValue<number | string>;
-  pr?: ResponsiveStyleValue<number | string>;
-
-  m?: ResponsiveStyleValue<number | string>;
-  mx?: ResponsiveStyleValue<number | string>;
-  my?: ResponsiveStyleValue<number | string>;
-  mt?: ResponsiveStyleValue<number | string>;
-  mb?: ResponsiveStyleValue<number | string>;
-  ml?: ResponsiveStyleValue<number | string>;
-  mr?: ResponsiveStyleValue<number | string>;
-
-  flexDirection?: ResponsiveStyleValue<string>;
-  flexWrap?: ResponsiveStyleValue<string>;
-  flexShrink?: ResponsiveStyleValue<number | string>;
-  flexGrow?: ResponsiveStyleValue<number | string>;
-  alignItems?: ResponsiveStyleValue<string>;
-  justifyContent?: ResponsiveStyleValue<string>;
-
-  bg?: ResponsiveStyleValue<number | string>;
-  border?: ResponsiveStyleValue<number | string>;
-  borderRadius?: ResponsiveStyleValue<number | string>;
-  boxShadow?: ResponsiveStyleValue<number | string>;
-  opacity?: ResponsiveStyleValue<number | string>;
-  overflow?: ResponsiveStyleValue<string>;
-
-  transition?: ResponsiveStyleValue<number | string>;
-};
-
-export type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
-
-export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
-  (
-    {
-      variant,
-      as = 'div',
-      css,
-      children,
-      className,
-      display,
-      height,
-      width,
-      minWidth,
-      maxWidth,
-      position,
-      top,
-      bottom,
-      right,
-      left,
-      zIndex,
-      p,
-      px,
-      py,
-      pt,
-      pb,
-      pl,
-      pr,
-      m,
-      mx,
-      my,
-      mt,
-      mb,
-      ml,
-      mr,
-      flexDirection,
-      flexWrap,
-      flexShrink,
-      flexGrow,
-      alignItems,
-      justifyContent,
-      bg,
-      border,
-      borderRadius,
-      boxShadow,
-      opacity,
-      overflow,
-      transition,
-      ...props
-    },
-    ref
-  ) => (
-    <Element
-      as={as}
-      ref={ref}
-      variant={variant}
-      css={{
-        ...{
-          display,
-          height,
-          width,
-          minWidth,
-          maxWidth,
-          position,
-          top,
-          bottom,
-          right,
-          left,
-          zIndex,
-          p,
-          px,
-          py,
-          pt,
-          pb,
-          pl,
-          pr,
-          m,
-          mx,
-          my,
-          mt,
-          mb,
-          ml,
-          mr,
-          flexDirection,
-          flexWrap,
-          flexShrink,
-          flexGrow,
-          alignItems,
-          justifyContent,
-          bg,
-          border,
-          borderRadius,
-          boxShadow,
-          opacity,
-          overflow,
-          transition,
-        },
-        ...css,
-      }}
-      className={className}
-      {...props}
-    >
-      {children}
-    </Element>
-  )
-);

package/src/Box/index.ts

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

package/src/Column/Column.stories.mdx

@@ -1,49 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Column } from './Column';
-import { Text } from '../Text';
-import { useStyles } from '@marigold/system';
-
-<Meta
-  title="Components/Column"
-  argTypes={{
-    width: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 12,
-        step: 1,
-      },
-      description: 'Absolute width in 12 grid',
-      table: {
-        defaultValue: {
-          summary: 12,
-        },
-      },
-    },
-  }}
-/>
-
-# Column
-
-export const Template = args => (
-  <Column
-    className={useStyles({
-      css: {
-        textAlign: 'center',
-        border: '1px solid red',
-        padding: 2,
-        margin: 2,
-      },
-    })}
-    width={12}
-    {...args}
-  >
-    <Text>full width</Text>
-  </Column>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />