@marigold/components 0.1.0 → 0.3.2

package/src/Stack/Stack.stories.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Stack } from './Stack';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Stack',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    align: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      description: 'HTML element style',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Stack> = args => (
+  <Stack {...args}>
+    <Text as="h2" variant="headline2">
+      Heading
+    </Text>
+    <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>
+);

package/src/Stack/Stack.test.tsx

@@ -1,110 +1,138 @@
 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,
+  },
+};
+
+const getTopPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-top');
+
+test('default space is "none"', () => {
   render(
-    <Stack title="stack">
-      <Text>stack</Text>
-    </Stack>
+    <ThemeProvider theme={theme}>
+      <Stack>
+        <Text>first</Text>
+        <Text>second</Text>
+        <Text>third</Text>
+      </Stack>
+    </ThemeProvider>
   );
-  const stack = screen.getByTitle(/stack/);
+  const first = screen.getByText(/first/).parentElement!;
+  const second = screen.getByText(/second/).parentElement!;
+  const third = screen.getByText(/third/).parentElement!;
 
-  expect(stack).toHaveStyle(`padding: 0px`);
+  expect(getTopPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-top: 0px`);
+  expect(third).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>
+        <Text>third</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/);
+  const third = screen.getByText(/third/);
 
-  expect(stack).toHaveStyle(`align-items: flex-start`);
+  expect(getTopPadding(first)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+  expect(third.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(getTopPadding(upperStack.parentElement!)).toEqual('');
+  expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
 
-  expect(stack instanceof HTMLDivElement).toBeTruthy();
+  expect(getTopPadding(first.parentElement!)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
+
+  expect(getTopPadding(third.parentElement!)).toEqual('');
+  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.tsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Text } from './Text';
+
+export default {
+  title: 'Components/Text',
+  argTypes: {
+    as: {
+      control: {
+        type: 'select',
+      },
+      options: ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
+      description: 'Set HTML element',
+      table: {
+        defaultValue: {
+          summary: 'span',
+        },
+      },
+    },
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'body',
+        'headline1',
+        'headline2',
+        'headline3',
+        'headline4',
+        'headline5',
+        'headline6',
+      ],
+      description: 'CHoose between body and different headlines',
+      table: {
+        defaultValue: {
+          summary: 'body',
+        },
+      },
+    },
+    color: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text color',
+      table: {
+        defaultValue: {
+          summary: 'inherit',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Text> = 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>
+);

package/src/Text/Text.test.tsx

@@ -15,7 +15,7 @@ const theme = {
     body: {
       fontFamily: 'Oswald Regular',
     },
-    heading: {
+    headline1: {
       fontFamily: 'Inter',
     },
   },
@@ -35,7 +35,7 @@ test('uses `text.body` as default variant', () => {
 test('allows to change variants via `variant` prop (with "text" prefix)', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Text variant="heading">text</Text>
+      <Text variant="headline1">text</Text>
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);

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,
@@ -7,6 +7,16 @@ import {
 
 import { Box, BoxOwnProps } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface TextThemeExtension<Value> {
+  text?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type TextOwnProps = {
   align?: ResponsiveStyleValue<string>;
   color?: ResponsiveStyleValue<string>;
@@ -17,6 +27,8 @@ export type TextOwnProps = {
 
 export type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;
 
+// Component
+// ---------------
 export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
   forwardRef(
     (
@@ -33,17 +45,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>
+    )
   );

package/src/Textarea/Textarea.stories.tsx

@@ -0,0 +1,64 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Textarea } from '.';
+
+export default {
+  title: 'Components/Textarea',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Label text',
+      defaultValue: 'Textarea Label',
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      description: 'Bind to label',
+      defaultValue: 'textareaId',
+    },
+    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,
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Textarea> = args => (
+  <Textarea placeholder="Placeholder..." {...args} />
+);

package/src/Textarea/Textarea.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Textarea } from '../Textarea';
 
 const theme = {
+  fonts: {
+    body: 'Inter Regular',
+    fancy: 'Roboto',
+  },
   textarea: {
-    default: {
-      fontFamily: 'Inter Regular',
+    __default: {
+      fontFamily: 'body',
     },
     textarea2: {
-      fontFamily: 'Roboto',
+      fontFamily: 'fancy',
     },
   },
 };
@@ -58,14 +62,13 @@ test('supports label prop', () => {
   expect(textarea instanceof HTMLLabelElement).toBeTruthy();
 });
 
-test('supports errorMessage prop', () => {
+test('supports error and errorMessage prop', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Textarea errorMessage="error" title="textarea" />
+      <Textarea error errorMessage="error" label="label" title="textarea" />
     </ThemeProvider>
   );
   const textarea = screen.getByText(/error/);
-
   expect(textarea).toBeDefined();
 });
 
@@ -75,9 +78,9 @@ test('supports required prop', () => {
       <Textarea label="test" htmlFor="myId" required title="textarea" />
     </ThemeProvider>
   );
-  const textarea = screen.getByText(/test/).lastChild;
+  const label = screen.getByText(/test/);
 
-  expect(textarea instanceof SVGElement).toBeTruthy();
+  expect(label.nextSibling instanceof SVGElement).toBeTruthy();
 });
 
 test('accepts custom styles prop className', () => {