@marigold/components 0.1.0 → 0.2.0

package/src/Stack/Stack.stories.mdx

@@ -1,105 +1,51 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Button } from '../Button';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Heading } from '../Heading';
 import { Stack } from './Stack';
 import { Text } from '../Text';
-import { Box } from '../Box';
-import { useStyles } from '@marigold/system';
 
-<Meta title="Components/Stack" />
+<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
 
-## Description
-
-Layout component to stack elements. This component uses the spaces from the given theme.
-
-## Properties
-
-| Property | Type                                           | Default |
-| :------- | :--------------------------------------------- | :------ |
-| `space`  | `ResponsiveStyleValue<number `&#124;` string>` | `0`     |
-| `align`  | `left, right, center`                          | `left`  |
-
-## Import
-
-```tsx
-import { Stack } from '@marigold/components';
-```
-
-## Usage
-
-### Spacing
+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="Example 1">
-    <Stack space={4} className={useStyles({ bg: '#f3f3f3' })}>
-      <Heading>Header</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>
-      <Text>
-        Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus.
-        Vestibulum malesuada ante eu velit malesuada, nec ultricies sapien
-        finibus. Aenean rutrum in sem a ullamcorper. Integer ut euismod urna.
-        Interdum et malesuada fames ac ante ipsum primis in faucibus.
-      </Text>
-    </Stack>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-### Alignment
-
-<Canvas>
-  <Story name="Example 2">
-    <Stack space={2}>
-      <Text
-        className={useStyles({ width: '100px', border: '1px solid', p: 2 })}
-      >
-        Left
-      </Text>
-    </Stack>
-    <Stack space={2} align="center">
-      <Text
-        className={useStyles({ width: '100px', border: '1px solid', p: 2 })}
-      >
-        Center
-      </Text>
-    </Stack>
-    <Stack space={2} align="right">
-      <Text
-        className={useStyles({ width: '100px', border: '1px solid', p: 2 })}
-      >
-        Right
-      </Text>
-    </Stack>
-  </Story>
-</Canvas>
-
-### Nested
-
-<Canvas>
-  <Story name="Example 3">
-    <Stack space={6}>
-      <Stack>
-        <Heading>Stack Content #1</Heading>
-        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-        <Text>
-          Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel
-          metus.
-        </Text>
-      </Stack>
-      <Stack>
-        <Heading>Stack Content #2</Heading>
-        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-        <Text>
-          Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel
-          metus.
-        </Text>
-      </Stack>
-    </Stack>
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Stack/Stack.test.tsx

@@ -1,110 +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';
 
-test('supports default space prop', () => {
+// Setup
+// ---------------
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 8,
+  },
+};
+
+test('default space is "none"', () => {
   render(
-    <Stack title="stack">
-      <Text>stack</Text>
-    </Stack>
+    <ThemeProvider theme={theme}>
+      <Stack>
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
   );
-  const stack = screen.getByTitle(/stack/);
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
 
-  expect(stack).toHaveStyle(`padding: 0px`);
+  expect(first).toHaveStyle(`padding-top: 0px`);
+  expect(second).toHaveStyle(`padding-top: 0px`);
 });
 
-test('supports custom space prop', () => {
+test('accepts and uses spacing from theme', () => {
   render(
-    <Stack space={2} title="stack">
-      <Text>stack</Text>
-    </Stack>
+    <ThemeProvider theme={theme}>
+      <Stack space="small">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
   );
-  const stack = screen.getByTitle(/stack/);
-
-  expect(stack).toHaveStyle(`padding: 8px`);
-});
-
-test('supports default prop align: left', () => {
-  render(<Stack title="stack">stack</Stack>);
-  const stack = screen.getByText(/stack/);
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
 
-  expect(stack).toHaveStyle(`align-items: flex-start`);
+  expect(first.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
 });
 
-test('supports custom prop align: center', () => {
+test('aligns children left by default', () => {
   render(
-    <Stack align="center" title="stack">
-      stack
+    <Stack data-testid="stack">
+      <Text>first</Text>
     </Stack>
   );
-  const stack = screen.getByText(/stack/);
+  const stack = screen.getByTestId('stack');
 
-  expect(stack).toHaveStyle(`align-items: center`);
+  expect(stack).toHaveStyle(`align-items: flex-start`);
 });
 
-test('supports custom prop align: right', () => {
+test('allows to aligns children to the center', () => {
   render(
-    <Stack align="right" title="stack">
-      stack
+    <Stack align="center" data-testid="stack">
+      <Text>first</Text>
     </Stack>
   );
-  const stack = screen.getByText(/stack/);
+  const stack = screen.getByTestId('stack');
 
-  expect(stack).toHaveStyle(`align-items: flex-end`);
+  expect(stack).toHaveStyle(`align-items: center`);
 });
 
-test('supports two children', () => {
+test('allows to aligns children to the right', () => {
   render(
-    <Stack title="stack">
-      <Text>stackText</Text>
-      <Text>secondStackText</Text>
+    <Stack align="right" data-testid="stack">
+      <Text>first</Text>
     </Stack>
   );
-  const stack = screen.getByTitle(/stack/);
-  const stackText = screen.getByText(/stackText/);
-  const secondStackText = screen.getByText(/secondStackText/);
+  const stack = screen.getByTestId('stack');
 
-  expect(stack).toBeDefined();
-  expect(stackText).toBeDefined();
-  expect(secondStackText).toBeDefined();
+  expect(stack).toHaveStyle(`align-items: flex-end`);
 });
 
-test('supports nested children', () => {
+test('supports nesting', () => {
   render(
-    <Stack title="stack">
-      <Stack title="nested">
-        <Text>text</Text>
+    <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>
-    </Stack>
+    </ThemeProvider>
   );
-  const stack = screen.getByTitle(/stack/);
-  const nested = screen.getByTitle(/nested/);
-  const text = screen.getByText(/text/);
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const upperStack = screen.getByTestId('upperStack');
 
-  expect(stack).toBeDefined();
-  expect(nested).toBeDefined();
-  expect(text).toBeDefined();
-});
+  const third = screen.getByText(/third/);
+  const fourth = screen.getByText(/fourth/);
+  const lowerStack = screen.getByTestId('lowerStack');
 
-test('renders correct HTML element', () => {
-  render(
-    <Stack title="stack">
-      <Text>sdf</Text>
-    </Stack>
-  );
-  const stack = screen.getByTitle(/stack/);
+  expect(upperStack.parentElement).toHaveStyle(`padding-top: 0px`);
+  expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
 
-  expect(stack instanceof HTMLDivElement).toBeTruthy();
+  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('accepts custom styles prop className', () => {
+test('renders as div per default', () => {
   render(
-    <Stack className="custom-class-name" title="stack">
-      <Text>text</Text>
-    </Stack>
+    <ThemeProvider theme={theme}>
+      <Stack data-testid="stack">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Stack>
+    </ThemeProvider>
   );
-  const stack = screen.getByTitle(/stack/);
 
-  expect(stack.className).toMatch('custom-class-name');
+  const stack = screen.getByTestId('stack');
+  expect(stack instanceof HTMLDivElement).toBeTruthy();
 });

package/src/Stack/Stack.tsx

@@ -1,55 +1,39 @@
 import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
 import { ResponsiveStyleValue } from '@marigold/system';
+
 import { Box } from '../Box';
-import flattenChildren from 'react-keyed-flatten-children';
 
 export type StackProps = {
-  className?: string;
-  space?: ResponsiveStyleValue<number | string>;
+  space?: ResponsiveStyleValue<string>;
   align?: 'left' | 'right' | 'center';
-  title?: string; // For Testing
 };
 
-const ALIGN_STYLES = {
-  left: {
-    display: 'block',
-    flexDirection: 'row',
-    alignItems: 'flex-start',
-  },
-  center: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'center',
-  },
-  right: {
-    display: 'flex',
-    flexDirection: 'column',
-    alignItems: 'flex-end',
-  },
+const ALIGNMENT = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
 };
 
 export const Stack: React.FC<StackProps> = ({
-  space = 0,
+  space = 'none',
   align = 'left',
   children,
   ...props
-}) => {
-  const stackItems = flattenChildren(children);
-  const { display, flexDirection, alignItems } = ALIGN_STYLES[align];
-
-  return (
-    <Box p={space} display={display} flexDirection={flexDirection} {...props}>
-      {Children.map(stackItems, (child, index) => (
-        <Box
-          display={display}
-          flexDirection={flexDirection}
-          alignItems={alignItems}
-          pt={space}
-          mt={index === 0 ? -space! : 0}
-        >
-          {child}
-        </Box>
-      ))}
-    </Box>
-  );
-};
+}) => (
+  <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/Text/Text.stories.mdx

@@ -1,60 +1,60 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Text } from './Text';
-import { useStyles } from '@marigold/system';
 
-<Meta title="Components/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
-
-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.
-
-## Properties
-
-| Property             | Type              | Default   |
-| :------------------- | :---------------- | :-------- |
-| `as` (optional)      | `span`, `p`       | `span`    |
-| `variant` (optional) | `body`, `heading` | `body`    |
-| `color` (optional)   | string            | `inherit` |
-
-## Import
-
-```tsx
-import { Text } from '@marigold/components';
-```
-
-## Usage
+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>
+);
 
 <Canvas>
-  <Story name="body">
-    <Text className={useStyles({ bg: '#f3f3f3' })}>
-      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 as="p" variant="heading">
-      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>
-  <Story name="with text color">
-    <Text color="hotpink">Hello pinkie ;)</Text>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/Text/Text.tsx

@@ -1,5 +1,5 @@
 import React, { forwardRef } from 'react';
-import { ResponsiveStyleValue, useStyles } from '@marigold/system';
+import { ResponsiveStyleValue } from '@marigold/system';
 import {
   PolymorphicComponentWithRef,
   PolymorphicPropsWithRef,
@@ -33,17 +33,16 @@ export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
         ...props
       },
       ref
-    ) => {
-      const cn = useStyles({
-        className,
-        variant: `text.${variant}`,
-        css: { textAlign: align, color, cursor, outline, userSelect },
-      });
-
-      return (
-        <Box {...props} as={as} className={cn} ref={ref}>
-          {children}
-        </Box>
-      );
-    }
+    ) => (
+      <Box
+        {...props}
+        as={as}
+        variant={`text.${variant}`}
+        css={{ textAlign: align, color, cursor, outline, userSelect }}
+        className={className}
+        ref={ref}
+      >
+        {children}
+      </Box>
+    )
   );