@marigold/components 0.0.1 → 0.2.0

package/src/Slider/Slider.tsx

@@ -1,21 +1,23 @@
 import React from 'react';
-import { Box, system } from '@marigold/system';
+import { useStyles } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
 
-type SliderProps = {};
+export type SliderProps = {
+  variant?: string;
+} & ComponentProps<'input'>;
 
-export const Slider = system<SliderProps, 'input'>(
-  ({ variant = 'slider', ...props }) => {
-    return (
-      <Box
-        as="input"
-        type="range"
-        themeSection="form"
-        variant={variant}
-        {...props}
-        css={{
-          verticalAlign: 'middle',
-        }}
-      />
-    );
-  }
-);
+export const Slider: React.FC<SliderProps> = ({
+  variant = 'slider',
+  className,
+  ...props
+}) => {
+  const classNames = useStyles({
+    variant: `form.${variant}`,
+    css: {
+      verticalAlign: 'middle',
+    },
+    className,
+  });
+
+  return <input type="range" className={classNames} {...props} />;
+};

package/src/Stack/Stack.stories.mdx

@@ -0,0 +1,51 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Heading } from '../Heading';
+import { Stack } from './Stack';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Stack"
+  argTypes={{
+    space: {
+      control: {
+        type: 'text',
+      },
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: '0',
+        },
+      },
+    },
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      description: 'HTML element style',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+  }}
+/>
+
+# Stack
+
+export const Template = args => (
+  <Stack {...args}>
+    <Heading>Heading</Heading>
+    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+          dignissim dapibus elit, vel egestas felis pharetra non. Cras
+          malesuada, massa nec ultricies efficitur, lectus ante consequat magna,
+          a porttitor massa ex ut quam.</Text>
+  </Stack>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Stack/Stack.test.tsx

@@ -0,0 +1,129 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Stack } from './Stack';
+import { Text } from '../Text';
+
+// Setup
+// ---------------
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 8,
+  },
+};
+
+test('default space is "none"', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack>
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+
+  expect(first).toHaveStyle(`padding-top: 0px`);
+  expect(second).toHaveStyle(`padding-top: 0px`);
+});
+
+test('accepts and uses spacing from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack space="small">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+
+  expect(first.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+});
+
+test('aligns children left by default', () => {
+  render(
+    <Stack data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
+
+  expect(stack).toHaveStyle(`align-items: flex-start`);
+});
+
+test('allows to aligns children to the center', () => {
+  render(
+    <Stack align="center" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
+
+  expect(stack).toHaveStyle(`align-items: center`);
+});
+
+test('allows to aligns children to the right', () => {
+  render(
+    <Stack align="right" data-testid="stack">
+      <Text>first</Text>
+    </Stack>
+  );
+  const stack = screen.getByTestId('stack');
+
+  expect(stack).toHaveStyle(`align-items: flex-end`);
+});
+
+test('supports nesting', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack space="large">
+        <Stack space="small" data-testid="upperStack">
+          <Text>first</Text>
+          <Text>second</Text>
+        </Stack>
+        <Stack space="small" data-testid="lowerStack">
+          <Text>third</Text>
+          <Text>fourth</Text>
+        </Stack>
+      </Stack>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const upperStack = screen.getByTestId('upperStack');
+
+  const third = screen.getByText(/third/);
+  const fourth = screen.getByText(/fourth/);
+  const lowerStack = screen.getByTestId('lowerStack');
+
+  expect(upperStack.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
+
+  expect(first.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+
+  expect(third.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(fourth.parentElement).toHaveStyle(`padding-top: 2px`);
+});
+
+test('renders as div per default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Stack data-testid="stack">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
+  );
+
+  const stack = screen.getByTestId('stack');
+  expect(stack instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Stack/Stack.tsx

@@ -0,0 +1,39 @@
+import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export type StackProps = {
+  space?: ResponsiveStyleValue<string>;
+  align?: 'left' | 'right' | 'center';
+};
+
+const ALIGNMENT = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
+};
+
+export const Stack: React.FC<StackProps> = ({
+  space = 'none',
+  align = 'left',
+  children,
+  ...props
+}) => (
+  <Box
+    {...props}
+    display="flex"
+    flexDirection="column"
+    alignItems={ALIGNMENT[align]}
+    css={{ '> * + *': { pt: space } }}
+  >
+    {Children.map(
+      flattenChildren(children) as unknown as React.ReactElement,
+      (child: React.ReactElement) => (
+        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
+      )
+    )}
+  </Box>
+);

package/src/Stack/index.ts

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

package/src/Text/Text.stories.mdx

@@ -1,54 +1,60 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Text } from './Text';
 
-<Meta title="Components/Typography/Text" />
+<Meta
+  title="Components/Text"
+  argTypes={{
+    as: {
+      control: {
+        type: 'select',
+      },
+      options: ['span', 'p'],
+      description: 'Set inline',
+      table: {
+        defaultValue: {
+          summary: 'span',
+        },
+      },
+    },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['body', 'heading'],
+      description: 'Doesnt matter',
+      table: {
+        defaultValue: {
+          summary: 'body',
+        },
+      },
+    },
+    color: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text color',
+      table: {
+        defaultValue: {
+          summary: 'inherit',
+        },
+      },
+    },
+  }}
+/>
 
 # Text
 
-## Description
+export const Template = args => (
+  <Text {...args}>
+    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+    dignissim dapibus elit, vel egestas felis pharetra non. Cras malesuada,
+    massa nec ultricies efficitur, lectus ante consequat magna, a porttitor
+    massa ex ut quam.
+  </Text>
+);
 
-With the Text component you can easily add different body text HTML elements. As a default, a `span` element is rendered.
-By adding the `as` prop you can alternatively render a `p` element.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Properties
-
-| Property  | Type              | Default |
-| :-------- | :---------------- | :------ |
-| `variant` | `body`, `heading` | `body`  |
-
-## Import
-
-```tsx
-import { Text } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="body">
-    <Text css={{ color: 'text' }}>
-      SPAN: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
-      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
-      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
-      dolor sit amet.
-    </Text>
-  </Story>
-  <Story name="heading">
-    <Text variant="heading" css={{ color: 'text' }}>
-      P: Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam
-      nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed
-      diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum.
-      Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor
-      sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed
-      diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam
-      erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea
-      rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum
-      dolor sit amet.
-    </Text>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

package/src/Text/Text.test.tsx

@@ -1,9 +1,16 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
+import { ThemeProvider } from '@marigold/system';
+
 import { Text } from './Text';
 
 const theme = {
+  colors: {
+    primary: 'hotpink',
+    black: '#000',
+    white: '#FFF',
+    blue: '#2980b9',
+  },
   text: {
     body: {
       fontFamily: 'Oswald Regular',
@@ -14,46 +21,79 @@ const theme = {
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('uses `text.body` as default variant', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Text>text</Text>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
   expect(text).toHaveStyle(`font-family: Oswald Regular`);
 });
 
-test('accepts other variant than default', () => {
+test('allows to change variants via `variant` prop (with "text" prefix)', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Text variant="heading">text</Text>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
   expect(text).toHaveStyle(`font-family: Inter`);
 });
 
-test('renders <span> element by default', () => {
+test('renders a <span> element by default', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Text>text</Text>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
   expect(text instanceof HTMLSpanElement).toBeTruthy();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('allows to control the rendered element via the `as` prop', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Text css={{ fontFamily: 'Arial' }}>text</Text>
-    </MarigoldProvider>
+    <ThemeProvider theme={theme}>
+      <Text as="p">text</Text>
+    </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
-  expect(text).not.toHaveStyle(`font-family: Arial`);
+  expect(text instanceof HTMLParagraphElement).toBeTruthy();
+});
+
+test.each([
+  [{ color: 'primary' }, 'color: hotpink'],
+  [{ color: 'blue' }, 'color: #2980b9'],
+  [{ align: 'center' }, 'text-align: center'],
+  [{ cursor: 'pointer' }, 'cursor: pointer'],
+  [{ outline: 'dashed red' }, 'outline: dashed red'],
+  [{ userSelect: 'none' }, 'user-select: none'],
+])('test style prop %o', (...args) => {
+  const props = args.shift();
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Text {...props}>This is the Text!</Text>
+    </ThemeProvider>
+  );
+
+  const box = screen.getByText('This is the Text!');
+  args.forEach((style: any) => {
+    expect(box).toHaveStyle(style);
+  });
+});
+
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLButtonElement>();
+  render(
+    <Text as="button" ref={ref}>
+      button
+    </Text>
+  );
+
+  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
 });

package/src/Text/Text.tsx

@@ -1,14 +1,48 @@
-import React from 'react';
-import { Box, system } from '@marigold/system';
+import React, { forwardRef } from 'react';
+import { ResponsiveStyleValue } from '@marigold/system';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-type TextProps = {};
+import { Box, BoxOwnProps } from '../Box';
 
-export const Text = system<TextProps, 'span'>(
-  ({ as = 'span', variant = 'body', children, ...props }) => {
-    return (
-      <Box {...props} as={as} themeSection="text" variant={variant}>
+export type TextOwnProps = {
+  align?: ResponsiveStyleValue<string>;
+  color?: ResponsiveStyleValue<string>;
+  cursor?: ResponsiveStyleValue<string>;
+  outline?: ResponsiveStyleValue<string>;
+  userSelect?: ResponsiveStyleValue<string>;
+} & BoxOwnProps;
+
+export type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;
+
+export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
+  forwardRef(
+    (
+      {
+        as = 'span',
+        variant = 'body',
+        children,
+        className,
+        align,
+        color,
+        cursor,
+        outline,
+        userSelect,
+        ...props
+      },
+      ref
+    ) => (
+      <Box
+        {...props}
+        as={as}
+        variant={`text.${variant}`}
+        css={{ textAlign: align, color, cursor, outline, userSelect }}
+        className={className}
+        ref={ref}
+      >
         {children}
       </Box>
-    );
-  }
-);
+    )
+  );

package/src/Textarea/Textarea.stories.mdx

@@ -1,27 +1,74 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Textarea } from '@marigold/components';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Textarea } from '../Textarea';
 
-<Meta title="Components/Form/Textarea" />
+<Meta
+  title="Components/Textarea"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text above',
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      description: 'Bind to label',
+      table: {
+        defaultValue: {
+          summary: 'textarea',
+        },
+      },
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  }}
+/>
 
 # Textarea
 
-## Description
+export const Template = args => (
+  <Textarea placeholder="Placeholder..." label="Textarea Label" {...args} />
+);
 
-Form textarea field for larger text input.
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-## Import
-
-```tsx
-import { Textarea } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Textarea">
-    <Textarea placeholder="Placeholder" />
-  </Story>
-  <Story name="Textarea disabled">
-    <Textarea placeholder="Placeholder disabled" disabled />
-  </Story>
-</Preview>
+<ArgsTable story="Default" />