@marigold/components 0.1.0 → 0.3.2

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,157 +0,0 @@
-import { createElement, forwardRef } from 'react';
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
-import {
-  PolymorphicPropsWithRef,
-  PolymorphicComponentWithRef,
-} from '@marigold/types';
-
-export type BoxOwnProps = {
-  className?: string;
-  variant?: string | string[];
-
-  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',
-      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
-  ) => {
-    const cn = useStyles({
-      element: as,
-      variant,
-      className,
-      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,
-      },
-    });
-    return createElement(as, { ...props, ref, className: cn }, children);
-  }
-);

package/src/Box/index.ts

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

package/src/Button/Button.stories.mdx

@@ -1,176 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Facebook } from '@marigold/icons';
-import { Button } from './Button';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Button" />
-
-# Button
-
-## Description
-
-With the Button component you can render a `button` element.
-The style variant and size of the button can be added with the variant prop and is composed like `variant.size`.
-
-## Properties
-
-| Property             | Type                                                                                                 | Default         |
-| :------------------- | :--------------------------------------------------------------------------------------------------- | :-------------- |
-| `variant` (optional) | `primary.small`, `primary.large`, `secondary.small`, `secondary.large`, `ghost.small`, `ghost.large` | `primary.large` |
-
-## Import
-
-```tsx
-import { Button } from '@marigold/components';
-```
-
-## Usage
-
-### Large
-
-<Canvas>
-  <Story name="primary.large">
-    <Button variant="primary.large">Primary</Button>
-  </Story>
-  <Story name="secondary.large">
-    <Button variant="secondary.large">Secondary</Button>
-  </Story>
-  <Story name="ghost.large">
-    <Button variant="ghost.large">Ghost</Button>
-  </Story>
-  <Story name="text.large">
-    <Button variant="text.large">Text Only</Button>
-  </Story>
-</Canvas>
-
-### Small
-
-<Canvas>
-  <Story name="primary.small">
-    <Button variant="primary.small">Primary</Button>
-  </Story>
-  <Story name="secondary.small">
-    <Button variant="secondary.small">Secondary</Button>
-  </Story>
-  <Story name="ghost.small">
-    <Button variant="ghost.small">Ghost</Button>
-  </Story>
-  <Story name="text.small">
-    <Button variant="text.small">Text Only</Button>
-  </Story>
-</Canvas>
-
-### Disabled
-
-<Canvas>
-  <Story name="primary.large.disabled">
-    <Button variant="primary.large" disabled>
-      Primary Large Disabled
-    </Button>
-  </Story>
-  <Story name="secondary.large.disabled">
-    <Button variant="secondary.large" disabled>
-      Secondary Large Disabled
-    </Button>
-  </Story>
-  <Story name="ghost.large.disabled">
-    <Button variant="ghost.large" disabled>
-      Ghost Large Disabled
-    </Button>
-  </Story>
-  <Story name="text.large.disabled">
-    <Button variant="text.large" disabled>
-      Text Only Large Disabled
-    </Button>
-  </Story>
-</Canvas>
-
-### Default with icon
-
-<Canvas>
-  <Story name="primary.large with default icon">
-    <Button variant="primary.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="primary.small with default icon">
-    <Button variant="primary.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="secondary.large with default icon">
-    <Button variant="secondary.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="secondary.small with default icon">
-    <Button variant="secondary.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="ghost.large with default icon">
-    <Button variant="ghost.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="ghost.small with default icon">
-    <Button variant="ghost.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="text.large with default icon">
-    <Button variant="text.large">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-  <Story name="text.small with default icon">
-    <Button variant="text.small">
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-</Canvas>
-
-### Large with large icon
-
-<Canvas>
-  <Story name="primary.large with large icon">
-    <Button variant="primary.large">
-      <Facebook size={48} /> Like me!
-    </Button>
-  </Story>
-</Canvas>
-
-### Small with small icon
-
-<Canvas>
-  <Story name="primary.small with small icon">
-    <Button variant="primary.small">
-      <Facebook size={20} /> Like me!
-    </Button>
-  </Story>
-</Canvas>
-
-### With color
-
-<Canvas>
-  <Story name="with color">
-    <Button variant="primary.small">
-      <Facebook fill="black" /> Like me!
-    </Button>
-  </Story>
-</Canvas>
-
-### Custom styled
-
-<Canvas>
-  <Story name="custom">
-    <Button
-      variant="primary.small"
-      className={useStyles({
-        bg: '#3b5998',
-      })}
-    >
-      <Facebook /> Like me!
-    </Button>
-  </Story>
-</Canvas>

package/src/Checkbox/Checkbox.stories.mdx

@@ -1,81 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Checkbox } from './Checkbox';
-import { useState } from 'react';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Checkbox" />
-
-# Checkbox
-
-## Description
-
-With the Checkbox component you can add a HTML `<input>` element with `type="checkbox"` to your form.
-The element uses always the themeSection with the name: `checkbox` in your given theme. The variant in your section can be added with the variant prop. The default variant is `default`.
-
-## Properties
-
-| Property              | Type      | Default   |
-| :-------------------- | :-------- | :-------- |
-| `id`                  | `string`  |           |
-| `variant` (optional)  | `string`  | `default` |
-| `label` (optional)    | `string`  |           |
-| `required` (optional) | `boolean` |           |
-
-## Import
-
-```tsx
-import { Checkbox } from '@marigold/components';
-```
-
-## Usage
-
-### Checkbox standard labeled
-
-<Canvas>
-  <Story name="CheckboxOne">
-    {() => {
-      const [isChecked, setChecked] = React.useState(false);
-      const onChange = () => {
-        setChecked(!isChecked);
-      };
-      return (
-        <Checkbox
-          id="myCheckbox"
-          name="myCheckbox"
-          onChange={onChange}
-          checked={isChecked}
-          value="Checkbox"
-          label="check if you like Marigold"
-        />
-      );
-    }}
-  </Story>
-</Canvas>
-
-### Checkbox checked, disabled and custom styled
-
-<Canvas>
-  <Story name="CheckboxTwo">
-    <>
-      <Checkbox id="checkboxOne" checked />
-      <Checkbox id="checkboxTwo" disabled />
-      <Checkbox id="checkboxThree" checked disabled />
-    </>
-  </Story>
-</Canvas>
-
-### Checkbox with required label
-
-<Canvas>
-  <Story name="CheckboxThree">
-    <div>
-      <Checkbox
-        checked
-        id="required"
-        value="required"
-        required
-        label="This label is required"
-      />
-    </div>
-  </Story>
-</Canvas>

package/src/Column/Column.stories.mdx

@@ -1,74 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Column } from './Column';
-import { useState } from 'react';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Column" />
-
-# Column
-
-## Description
-
-With the Column component you can add a column with a width in percent of the full content.
-
-## Properties
-
-| Property           | Type                                    | Default |
-| :----------------- | :-------------------------------------- | :------ |
-| `width` (optional) | `1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12` | `12`    |
-
-## Import
-
-```tsx
-import { Column } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Column">
-    <Column
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=12
-    </Column>
-    <Column
-      width={6}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=6
-    </Column>
-    <Column
-      width={3}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=3
-    </Column>
-    <Column
-      width={2}
-      className={useStyles({
-        textAlign: 'center',
-        border: '1px solid',
-        padding: 2,
-        margin: 2,
-      })}
-    >
-      width=2
-    </Column>
-  </Story>
-</Canvas>