@marigold/components 0.0.2 → 0.3.0

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({ 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,34 +1,60 @@
-import { useStyles, system } from '@marigold/system';
-import React from 'react';
+import React, { forwardRef } from 'react';
+import { ResponsiveStyleValue } from '@marigold/system';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-type TextProps = {
-  as?: 'p' | 'span';
-  variant?: 'body' | 'heading';
-  textColor?: string;
-};
+import { Box, BoxOwnProps } from '../Box';
 
-export const Text = system<TextProps, 'span'>(
-  ({
-    as = 'span',
-    variant = 'body',
-    textColor = 'inherit',
-    className,
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles(
+// Theme Extension
+// ---------------
+export interface TextThemeExtension<Value> {
+  text?: {
+    [key: string]: Value;
+  };
+}
+
+// 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(
+    (
       {
-        variant: `text.${variant}`,
-        color: textColor,
+        as = 'span',
+        variant = 'body',
+        children,
+        className,
+        align,
+        color,
+        cursor,
+        outline,
+        userSelect,
+        ...props
       },
-      className
-    );
-    const Cmp = as;
-
-    return (
-      <Cmp className={classNames} {...props}>
+      ref
+    ) => (
+      <Box
+        {...props}
+        as={as}
+        variant={`text.${variant}`}
+        css={{ textAlign: align, color, cursor, outline, userSelect }}
+        className={className}
+        ref={ref}
+      >
         {children}
-      </Cmp>
-    );
-  }
-);
+      </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

@@ -1,15 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Textarea } from '@marigold/components';
+import { Textarea } from '../Textarea';
 
 const theme = {
-  form: {
-    textarea: {
-      fontFamily: 'Inter Regular',
+  fonts: {
+    body: 'Inter Regular',
+    fancy: 'Roboto',
+  },
+  textarea: {
+    __default: {
+      fontFamily: 'body',
     },
     textarea2: {
-      fontFamily: 'Roboto',
+      fontFamily: 'fancy',
     },
   },
 };
@@ -47,6 +51,38 @@ test('renders correct HTML element', () => {
   expect(textarea instanceof HTMLTextAreaElement).toBeTruthy();
 });
 
+test('supports label prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Textarea label="test" htmlFor="myId" title="textarea" />
+    </ThemeProvider>
+  );
+  const textarea = screen.getByText(/test/);
+
+  expect(textarea instanceof HTMLLabelElement).toBeTruthy();
+});
+
+test('supports error and errorMessage prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Textarea error errorMessage="error" label="label" title="textarea" />
+    </ThemeProvider>
+  );
+  const textarea = screen.getByText(/error/);
+  expect(textarea).toBeDefined();
+});
+
+test('supports required prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Textarea label="test" htmlFor="myId" required title="textarea" />
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/test/);
+
+  expect(label.nextSibling instanceof SVGElement).toBeTruthy();
+});
+
 test('accepts custom styles prop className', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Textarea/Textarea.tsx

@@ -1,22 +1,62 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { Exclamation } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
 
-type TextareaProps = {
+import { ValidationMessage } from '../ValidationMessage';
+import { Label } from '../Label';
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface TextareaThemeExtension<Value> {
+  textarea?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
+export type TextareaProps = {
   variant?: string;
-};
+  label?: string;
+  htmlFor?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+} & ComponentProps<'textarea'>;
 
-export const Textarea = system<TextareaProps, 'textarea'>(
-  ({ variant = 'textarea', children, className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `form.${variant}`,
-      },
-      className
-    );
-    return (
-      <textarea className={classNames} {...props}>
-        {children}
-      </textarea>
-    );
-  }
+// Component
+// ---------------
+export const Textarea: React.FC<TextareaProps> = ({
+  variant = '',
+  htmlFor = 'textarea',
+  label,
+  error,
+  errorMessage,
+  required,
+  className = '',
+  children,
+  ...props
+}) => (
+  <Box>
+    {label && (
+      <Label htmlFor={htmlFor} required={required}>
+        {label}
+      </Label>
+    )}
+    <Box
+      as="textarea"
+      {...props}
+      display="block"
+      variant={`textarea.${variant}`}
+      css={{ outlineColor: error && 'error' }}
+      className={className}
+    />
+    {error && errorMessage && (
+      <ValidationMessage>
+        <Exclamation size={16} />
+        {errorMessage}
+      </ValidationMessage>
+    )}
+  </Box>
 );

package/src/ValidationMessage/ValidationMessage.stories.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { ValidationMessage } from './ValidationMessage';
+import { Exclamation } from '@marigold/icons';
+
+export default {
+  title: 'Components/ValidationMessage',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'error',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof ValidationMessage> = args => (
+  <ValidationMessage {...args}>
+    <Exclamation />
+    Validation message
+  </ValidationMessage>
+);

package/src/ValidationMessage/ValidationMessage.test.tsx

@@ -1,15 +1,20 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { ValidationMessage } from '@marigold/components';
+import { ValidationMessage } from './ValidationMessage';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
   validation: {
-    negative: {
-      alignItems: 'center',
+    error: {
+      p: 'medium',
     },
-    danger: {
-      alignItems: 'right',
+    warning: {
+      p: 'small',
     },
   },
 };
@@ -17,34 +22,34 @@ const theme = {
 test('supports default variant and themeSection', () => {
   render(
     <ThemeProvider theme={theme}>
-      <ValidationMessage title="negative">negative</ValidationMessage>
+      <ValidationMessage title="error">error</ValidationMessage>
     </ThemeProvider>
   );
-  const validation = screen.getByTitle(/negative/);
+  const validation = screen.getByTitle(/error/);
 
-  expect(validation).toHaveStyle(`align-items: center`);
+  expect(validation).toHaveStyle(`padding: 8px`);
 });
 
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <ValidationMessage title="danger" variant="danger">
-        Danger
+      <ValidationMessage title="warning" variant="warning">
+        warning
       </ValidationMessage>
     </ThemeProvider>
   );
-  const validation = screen.getByTitle(/danger/);
+  const validation = screen.getByTitle(/warning/);
 
-  expect(validation).toHaveStyle(`align-items: right`);
+  expect(validation).toHaveStyle(`padding: 4px`);
 });
 
 test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
-      <ValidationMessage title="negative">negative</ValidationMessage>
+      <ValidationMessage title="error">error</ValidationMessage>
     </ThemeProvider>
   );
-  const validation = screen.getByTitle(/negative/);
+  const validation = screen.getByTitle(/error/);
 
   expect(validation instanceof HTMLSpanElement).toBeTruthy();
 });

package/src/ValidationMessage/ValidationMessage.tsx

@@ -1,25 +1,40 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
 
-type ValidationMessageProps = {
-  variant?: string;
-};
+import { Box } from '../Box';
 
-export const ValidationMessage = system<ValidationMessageProps, 'span'>(
-  ({ variant = 'negative', children, className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `validation.${variant}`,
-        display: 'flex',
-        alignItems: 'center',
-      },
-      className
-    );
+// Theme Extension
+// ---------------
+export interface ValidationMessageThemeExtension<Value> {
+  validation?: {
+    [key: string]: Value;
+  };
+}
 
-    return (
-      <span className={classNames} {...props}>
-        {children}
-      </span>
-    );
-  }
-);
+// Props
+// ---------------
+export type ValidationMessageProps = {
+  variant?: string;
+} & ComponentProps<'span'>;
+
+// Component
+// ---------------
+export const ValidationMessage: React.FC<ValidationMessageProps> = ({
+  variant = 'error',
+  children,
+  className,
+  ...props
+}) => {
+  return (
+    <Box
+      as="span"
+      display="flex"
+      alignItems="center"
+      variant={`validation.${variant}`}
+      className={className}
+      {...props}
+    >
+      {children}
+    </Box>
+  );
+};

package/src/VisuallyHidden/VisuallyHidden.stories.tsx

@@ -0,0 +1,19 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { VisuallyHidden } from './VisuallyHidden';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Hidden',
+} as Meta;
+
+export const Basic: ComponentStory<typeof VisuallyHidden> = ({
+  children,
+  ...args
+}) => (
+  <>
+    <Text>The Text below is visually hidden</Text>
+    <VisuallyHidden {...args}>Invisible!</VisuallyHidden>
+  </>
+);

package/src/VisuallyHidden/VisuallyHidden.test.tsx

@@ -0,0 +1,10 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { VisuallyHidden } from './VisuallyHidden';
+
+test('is visually hidden', () => {
+  render(<VisuallyHidden>Default</VisuallyHidden>);
+  const hidden = screen.getByText('Default');
+
+  expect(hidden).toHaveStyle(`overflow: hidden`);
+});

package/src/VisuallyHidden/VisuallyHidden.tsx

@@ -0,0 +1 @@
+export { VisuallyHidden } from '@react-aria/visually-hidden';

package/src/VisuallyHidden/index.ts

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

package/src/index.ts

@@ -1,26 +1,34 @@
 export * from './theme';
 
+export * from './ActionGroup';
 export * from './Alert';
 export * from './Badge';
+export * from './Box';
 export * from './Button';
+export * from './Card';
 export * from './Checkbox';
 export * from './Column';
+export * from './Columns';
+export * from './Dialog';
 export * from './Divider';
 export * from './Field';
-export * from './Heading';
-export * from './Hidden';
+export * from './VisuallyHidden';
 export * from './Image';
+export * from './Inline';
 export * from './Label';
 export * from './Link';
 export * from './Menu';
 export * from './MenuItem';
 export * from './Message';
+export * from './Provider';
 export * from './Radio';
 export * from './Slider';
 export * from './Select';
-export * from './Svg';
+export * from './Stack';
 export * from './Text';
 export * from './Textarea';
 export * from './Input';
 export * from './Container';
 export * from './ValidationMessage';
+
+export { Item, Section } from '@react-stately/collections';