@marigold/components 0.0.1 → 0.2.0

package/src/Box/Box.test.tsx

@@ -0,0 +1,133 @@
+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

@@ -0,0 +1,165 @@
+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

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

package/src/Button/Button.stories.mdx

@@ -1,140 +1,64 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Facebook } from '@marigold/icons';
-import { Button } from '@marigold/components';
-
-<Meta title="Components/Form/Button" />
+import { Button } from './Button';
+
+<Meta
+  title="Components/Button"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary', 'ghost', 'text', 'menu', 'select'],
+      description: 'What the button looks like',
+      table: {
+        defaultValue: {
+          summary: 'primary',
+        },
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['large', 'small'],
+      description: 'How big the button is rendered',
+      table: {
+        defaultValue: {
+          summary: 'large',
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      description: 'Disable the button',
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  }}
+/>
 
 # 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`.
-Custom CSS styles can be added with the CSS prop.
-
-## 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
-
-<Preview>
-  <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>
-</Preview>
-
-### Small
-
-<Preview>
-  <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>
-</Preview>
-
-### Disabled
-
-<Preview>
-  <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>
-</Preview>
-
-### Default with icon
-
-<Preview>
-  <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>
-</Preview>
-
-### Large with large icon
-
-<Preview>
-  <Story name="primary.large with large icon">
-    <Button variant="primary.large">
-      <Facebook size={48} /> Like me!
-    </Button>
-  </Story>
-</Preview>
-
-### Small with small icon
-
-<Preview>
-  <Story name="primary.small with small icon">
-    <Button variant="primary.small">
-      <Facebook size={20} /> Like me!
-    </Button>
-  </Story>
-</Preview>
+export const Template = args => (
+  <Button {...args}>
+    <Facebook /> Like me
+  </Button>
+);
 
-### With color
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-<Preview>
-  <Story name="with color">
-    <Button variant="primary.small">
-      <Facebook fill="black" /> Like me!
-    </Button>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

package/src/Button/Button.test.tsx

@@ -1,51 +1,75 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
+import { ThemeProvider } from '@marigold/system';
 import { Button } from './Button';
 import { Facebook } from '@marigold/icons';
 
 const theme = {
   button: {
+    large: {
+      p: '16px',
+    },
+    small: {
+      p: '16px',
+    },
     primary: {
-      large: {
-        fontFamily: 'Inter',
-      },
+      fontFamily: 'Inter',
     },
     secondary: {
-      large: {
-        fontFamily: 'Arial',
-      },
+      fontFamily: 'Arial',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports default variant', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>button</Button>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const button = screen.getByText(/button/);
 
   expect(button.parentElement).toHaveStyle(`font-family: Inter`);
 });
 
+test('supports default size', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button>button</Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/button/);
+
+  expect(button.parentElement).toHaveStyle(`padding: 16px`);
+});
+
 test('accepts other variant than default', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Button variant="secondary.large">button</Button>
-    </MarigoldProvider>
+    <ThemeProvider theme={theme}>
+      <Button variant="secondary">button</Button>
+    </ThemeProvider>
   );
   const button = screen.getByText(/button/);
 
   expect(button.parentElement).toHaveStyle(`font-family: Arial`);
 });
 
+test('accepts other size than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button size="small">button</Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/button/);
+
+  expect(button.parentElement).toHaveStyle(`padding: 16px`);
+});
+
 test('renders <button> element', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>button</Button>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const button = screen.getByText(/button/);
 
@@ -53,25 +77,30 @@ test('renders <button> element', () => {
   expect(button instanceof HTMLSpanElement).toBeTruthy();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('accepts other button components', () => {
+  const CustomButton = React.forwardRef<
+    HTMLSpanElement,
+    { children?: React.ReactNode }
+  >(() => <span>I am a Button!</span>);
+
   render(
-    <MarigoldProvider theme={theme}>
-      <Button css={{ fontFamily: 'Arial' }}>button</Button>
-    </MarigoldProvider>
+    <ThemeProvider theme={theme}>
+      <Button as={CustomButton}>Button</Button>
+    </ThemeProvider>
   );
-  const button = screen.getByText(/button/);
 
-  expect(button.parentElement).not.toHaveStyle('font-family: Arial');
+  const button = screen.getByText('I am a Button!');
+  expect(button).toBeTruthy();
 });
 
 test('add icon in button works as expected', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Button>
         <Facebook fill="red" size={30} title="facebook" />
         iconbutton
       </Button>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const button = screen.getByText(/iconbutton/);
   const icon = screen.getByTitle(/facebook/);
@@ -82,3 +111,16 @@ test('add icon in button works as expected', () => {
   expect(icon.getAttribute('fill')).toEqual('red');
   expect(icon.getAttribute('width')).toEqual('30');
 });
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button className="custom-class-name" title="button">
+        click
+      </Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByTitle(/button/);
+
+  expect(button.className).toMatch('custom-class-name');
+});