@marigold/components 0.1.0 → 0.2.0

package/src/Box/Box.tsx

@@ -1,5 +1,5 @@
-import { createElement, forwardRef } from 'react';
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
+import React, { forwardRef } from 'react';
+import { CSSObject, Element, ResponsiveStyleValue } from '@marigold/system';
 import {
   PolymorphicPropsWithRef,
   PolymorphicComponentWithRef,
@@ -8,6 +8,7 @@ import {
 export type BoxOwnProps = {
   className?: string;
   variant?: string | string[];
+  css?: CSSObject;
 
   display?: ResponsiveStyleValue<string>;
 
@@ -63,6 +64,7 @@ export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
     {
       variant,
       as = 'div',
+      css,
       children,
       className,
       display,
@@ -106,52 +108,58 @@ export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
       ...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);
-  }
+  ) => (
+    <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/Button/Button.stories.mdx

@@ -1,176 +1,64 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Facebook } from '@marigold/icons';
 import { Button } from './Button';
-import { useStyles } from '@marigold/system';
 
-<Meta title="Components/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`.
-
-## 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
+export const Template = args => (
+  <Button {...args}>
+    <Facebook /> Like me
+  </Button>
+);
 
 <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>
+  <Story name="Default">{Template.bind({})}</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>
+<ArgsTable story="Default" />

package/src/Button/Button.test.tsx

@@ -6,20 +6,22 @@ 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(
     <ThemeProvider theme={theme}>
       <Button>button</Button>
@@ -30,10 +32,21 @@ test('supports default variant and themeSection', () => {
   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(
     <ThemeProvider theme={theme}>
-      <Button variant="secondary.large">button</Button>
+      <Button variant="secondary">button</Button>
     </ThemeProvider>
   );
   const button = screen.getByText(/button/);
@@ -41,6 +54,17 @@ test('accepts other variant than default', () => {
   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(
     <ThemeProvider theme={theme}>
@@ -53,6 +77,22 @@ test('renders <button> element', () => {
   expect(button instanceof HTMLSpanElement).toBeTruthy();
 });
 
+test('accepts other button components', () => {
+  const CustomButton = React.forwardRef<
+    HTMLSpanElement,
+    { children?: React.ReactNode }
+  >(() => <span>I am a Button!</span>);
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Button as={CustomButton}>Button</Button>
+    </ThemeProvider>
+  );
+
+  const button = screen.getByText('I am a Button!');
+  expect(button).toBeTruthy();
+});
+
 test('add icon in button works as expected', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Button/Button.tsx

@@ -1,21 +1,50 @@
-import React from 'react';
-import { ComponentPropsWithRef } from '@marigold/types';
-import { Box } from '../Box';
+import React, { forwardRef, RefObject } from 'react';
+import { useButton } from '@react-aria/button';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-export type ButtonProps = {
-  variant?: string;
-} & ComponentPropsWithRef<'button'>;
+import { Box, BoxOwnProps } from '../Box';
 
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'primary.large',
-  children,
-  ...props
-}) => {
-  return (
-    <Box as="button" {...props} variant={`button.${variant}`}>
-      <Box as="span" display="inline-flex" alignItems="center">
-        {children}
-      </Box>
-    </Box>
+export type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;
+
+export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
+  forwardRef(
+    (
+      {
+        as = 'button',
+        variant = 'primary',
+        size = 'large',
+        disabled,
+        children,
+        className,
+        ...props
+      },
+      ref
+    ) => {
+      const { buttonProps } = useButton(
+        {
+          ...props,
+          elementType: typeof as === 'string' ? as : 'span',
+          isDisabled: disabled,
+        },
+        ref as RefObject<HTMLSpanElement>
+      );
+
+      return (
+        <Box
+          {...buttonProps}
+          {...props}
+          as={as}
+          variant={[`button.${variant}`, `button.${size}`]}
+          className={className}
+          ref={ref}
+        >
+          <Box as="span" display="inline-flex" alignItems="center">
+            {children}
+          </Box>
+        </Box>
+      );
+    }
   );
-};

package/src/Card/Card.stories.mdx

@@ -0,0 +1,49 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Heading } from '../Heading';
+import { Card } from './Card';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Card"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'card title',
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+      description: 'max width of the card',
+    },
+  }}
+/>
+
+# Card
+
+export const Template = args => (
+  <Card title="Card" {...args}>
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+      dignissim dapibus elit.
+    </Text>
+  </Card>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Card/Card.test.tsx

@@ -0,0 +1,66 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Card } from './Card';
+
+const theme = {
+  card: {
+    default: {
+      p: '8px',
+    },
+    custom: {
+      p: '4px',
+    },
+  },
+};
+
+test('supports default variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card>card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card).toHaveStyle(`padding: 8px`);
+});
+
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card variant="custom">card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card).toHaveStyle(`padding: 4px`);
+});
+
+test('accepts title prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card title="title">content</Card>
+    </ThemeProvider>
+  );
+  const title = screen.getByText(/title/);
+  expect(title).toBeDefined();
+});
+
+test('accepts width prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card width="320px">content</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/content/);
+  expect(card).toHaveStyle(`maxWidth: 320px`);
+});
+
+test('renders correct HTMl element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card>card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Card/Card.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import { ResponsiveStyleValue } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+
+import { Box } from '../Box';
+
+export type CardProps = {
+  title?: string;
+  width?: ResponsiveStyleValue<string>;
+  variant?: string;
+} & ComponentProps<'div'>;
+
+export const Card: React.FC<CardProps> = ({
+  variant = 'default',
+  title,
+  width,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <Box
+      {...props}
+      variant={`card.${variant}`}
+      maxWidth={width}
+      className={className}
+    >
+      {title && (
+        <Box as="h2" variant="text.h2" pb="small">
+          {title}
+        </Box>
+      )}
+      {children}
+    </Box>
+  );
+};

package/src/Card/index.ts

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