@marigold/components 0.0.3 → 0.3.1

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,44 +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 ALIGNMENT = {
+  left: 'flex-start',
+  center: 'center',
+  right: 'flex-end',
 };
 
 export const Stack: React.FC<StackProps> = ({
-  space = 0,
+  space = 'none',
   align = 'left',
   children,
   ...props
-}) => {
-  let stackItems = flattenChildren(children);
-  let display = 'flex';
-  let flexDirection = 'column';
-  let alignItems = align === 'right' ? 'flex-end' : 'center';
-  if (align === 'left') {
-    display = 'block';
-    flexDirection = 'row';
-    alignItems = 'flex-start';
-  }
-
-  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

@@ -1,20 +1,27 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
 import { Text } from './Text';
-import { ThemeProvider, useStyles } from '@marigold/system';
 
 const theme = {
+  colors: {
+    primary: 'hotpink',
+    black: '#000',
+    white: '#FFF',
+    blue: '#2980b9',
+  },
   text: {
     body: {
       fontFamily: 'Oswald Regular',
     },
-    heading: {
+    headline1: {
       fontFamily: 'Inter',
     },
   },
 };
 
-test('accepts default variant', () => {
+test('uses `text.body` as default variant', () => {
   render(
     <ThemeProvider theme={theme}>
       <Text>text</Text>
@@ -25,70 +32,68 @@ test('accepts default variant', () => {
   expect(text).toHaveStyle(`font-family: Oswald Regular`);
 });
 
-test('accepts default <span>', () => {
+test('allows to change variants via `variant` prop (with "text" prefix)', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Text>text</Text>
+      <Text variant="headline1">text</Text>
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
-  expect(text instanceof HTMLSpanElement).toBeTruthy();
+  expect(text).toHaveStyle(`font-family: Inter`);
 });
 
-test('accepts as <p>', () => {
+test('renders a <span> element by default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Text as="p">text</Text>
+      <Text>text</Text>
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
-  expect(text instanceof HTMLParagraphElement).toBeTruthy();
+  expect(text instanceof HTMLSpanElement).toBeTruthy();
 });
 
-test('variant works', () => {
+test('allows to control the rendered element via the `as` prop', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Text variant="body">text</Text>
+      <Text as="p">text</Text>
     </ThemeProvider>
   );
   const text = screen.getByText(/text/);
 
-  expect(text).toHaveStyle(`font-family: Oswald Regular`);
+  expect(text instanceof HTMLParagraphElement).toBeTruthy();
 });
 
-test('accepts other variant than default', () => {
+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 variant="heading" textColor="#000">
-        text
-      </Text>
+      <Text {...props}>This is the Text!</Text>
     </ThemeProvider>
   );
-  const text = screen.getByText(/text/);
 
-  expect(text).toHaveStyle(`color: rgb(0,0,0)`);
-  expect(text).toHaveStyle(`font-family: Inter`);
+  const box = screen.getByText('This is the Text!');
+  args.forEach((style: any) => {
+    expect(box).toHaveStyle(style);
+  });
 });
 
-test('accepts custom styles prop className', () => {
-  const TestTextComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ css: { fontSize: '8px' } });
-    return (
-      <Text className={classNames} {...props}>
-        {children}
-      </Text>
-    );
-  };
-
-  const { getByText } = render(
-    <ThemeProvider theme={theme}>
-      <TestTextComponent>text</TestTextComponent>
-    </ThemeProvider>
+test('forwards ref', () => {
+  const ref = React.createRef<HTMLButtonElement>();
+  render(
+    <Text as="button" ref={ref}>
+      button
+    </Text>
   );
-  const testelem = getByText('text');
-  const text = getComputedStyle(testelem);
 
-  expect(text.fontSize).toEqual('8px');
+  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
 });

package/src/Text/Text.tsx

@@ -1,35 +1,60 @@
-import React from 'react';
-import { useStyles } from '@marigold/system';
-import { ComponentPropsWithRef } from '@marigold/types';
-import { Box, BoxProps } from '../Box';
+import React, { forwardRef } from 'react';
+import { ResponsiveStyleValue } from '@marigold/system';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-export type TextProps = {
-  className?: string;
-  as?: 'p' | 'span' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  variant?: string;
-  textColor?: string;
-} & ComponentPropsWithRef<'span'> &
-  BoxProps;
+import { Box, BoxOwnProps } from '../Box';
 
-export const Text: React.FC<TextProps> = ({
-  as = 'span',
-  variant = 'body',
-  textColor = 'inherit',
-  className,
-  children,
-  ...props
-}) => {
-  const classNames = useStyles({
-    variant: `text.${variant}`,
-    css: {
-      color: textColor,
-    },
-    className,
-  });
+// Theme Extension
+// ---------------
+export interface TextThemeExtension<Value> {
+  text?: {
+    [key: string]: Value;
+  };
+}
 
-  return (
-    <Box as={as} className={classNames} {...props}>
-      {children}
-    </Box>
+// Props
+// ---------------
+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'>;
+
+// Component
+// ---------------
+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.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} />
+);