@marigold/components 0.0.1 → 0.2.0

package/src/Textarea/Textarea.test.tsx

@@ -1,11 +1,11 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
-import { Textarea } from '@marigold/components';
+import { ThemeProvider } from '@marigold/system';
+import { Textarea } from '../Textarea';
 
 const theme = {
-  form: {
-    textarea: {
+  textarea: {
+    default: {
       fontFamily: 'Inter Regular',
     },
     textarea2: {
@@ -16,9 +16,9 @@ const theme = {
 
 test('supports default variant and themeSection', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Textarea title="textarea" />
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const textarea = screen.getByTitle(/textarea/);
 
@@ -27,9 +27,9 @@ test('supports default variant and themeSection', () => {
 
 test('accepts other variant than default', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Textarea variant="textarea2" title="textarea" />
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const textarea = screen.getByTitle(/textarea/);
 
@@ -38,23 +38,54 @@ test('accepts other variant than default', () => {
 
 test('renders correct HTML element', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Textarea title="textarea" />
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const textarea = screen.getByTitle(/textarea/);
 
   expect(textarea instanceof HTMLTextAreaElement).toBeTruthy();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('supports label prop', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Textarea title="textarea" css={{ fontFamily: 'Oswald Regular' }} />
-    </MarigoldProvider>
+    <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}>
+      <Textarea className="custom-class-name" title="textarea" />
+    </ThemeProvider>
   );
   const textarea = screen.getByTitle(/textarea/);
 
-  expect(textarea).not.toHaveStyle(`font-family: Oswald Regular`);
-  expect(textarea).toHaveStyle(`font-family: Inter Regular`);
+  expect(textarea.className).toMatch('custom-class-name');
 });

package/src/Textarea/Textarea.tsx

@@ -1,18 +1,50 @@
 import React from 'react';
-import { Box, 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';
 
-export const Textarea = system<TextareaProps, 'textarea'>(
-  ({ variant = 'textarea', ref, ...props }) => {
-    return (
-      <Box
-        as="textarea"
-        themeSection="form"
-        variant={variant}
-        ref={ref}
-        {...props}
-      />
-    );
-  }
+export type TextareaProps = {
+  variant?: string;
+  label?: string;
+  htmlFor?: string;
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+} & ComponentProps<'textarea'>;
+
+export const Textarea: React.FC<TextareaProps> = ({
+  variant = 'default',
+  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.mdx

@@ -0,0 +1,36 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { ValidationMessage } from './ValidationMessage';
+import { Exclamation } from '@marigold/icons';
+
+<Meta
+  title="Components/ValidationMessage"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'error',
+        },
+      },
+    },
+  }}
+/>
+
+# ValidationMessage
+
+
+export const Template = args => (
+  <ValidationMessage {...args}>
+    <Exclamation />
+    Validation message
+  </ValidationMessage>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/ValidationMessage/ValidationMessage.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { ValidationMessage } from './ValidationMessage';
+
+const theme = {
+  validation: {
+    error: {
+      p: '8px',
+    },
+    warning: {
+      p: '4px',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <ValidationMessage title="error">error</ValidationMessage>
+    </ThemeProvider>
+  );
+  const validation = screen.getByTitle(/error/);
+
+  expect(validation).toHaveStyle(`padding: 8px`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <ValidationMessage title="warning" variant="warning">
+        warning
+      </ValidationMessage>
+    </ThemeProvider>
+  );
+  const validation = screen.getByTitle(/warning/);
+
+  expect(validation).toHaveStyle(`padding: 4px`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <ValidationMessage title="error">error</ValidationMessage>
+    </ThemeProvider>
+  );
+  const validation = screen.getByTitle(/error/);
+
+  expect(validation instanceof HTMLSpanElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <ValidationMessage className="custom-class-name" title="validation">
+        validation
+      </ValidationMessage>
+    </ThemeProvider>
+  );
+  const validation = screen.getByTitle(/validation/);
+
+  expect(validation.className).toMatch('custom-class-name');
+});

package/src/ValidationMessage/ValidationMessage.tsx

@@ -0,0 +1,28 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+
+import { Box } from '../Box';
+
+export type ValidationMessageProps = {
+  variant?: string;
+} & ComponentProps<'span'>;
+
+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/ValidationMessage/index.ts

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

package/src/index.ts

@@ -1,16 +1,34 @@
-export { Box, BoxProps, MarigoldProvider } from '@marigold/system';
 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 './Image';
 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 './TextInput';
-export * from './Alert';
+export * from './Input';
+export * from './Container';
+export * from './ValidationMessage';
+
+export { Item, Section } from '@react-stately/collections';

package/src/theme.ts

@@ -1,13 +1,29 @@
 export type CSSObject = object;
 
 export type BaseTheme = {
-  breakpoints: number[];
-  space: number[];
+  breakpoints: string[];
+  space: {
+    none: number;
+    xxsmall: number;
+    xsmall: number;
+    small: number;
+    medium: number;
+    large: number;
+    xlarge: number;
+    xxlarge: number;
+  };
   fonts: {
     body: string;
     heading: string;
   };
-  fontSizes: string[];
+  fontSizes: {
+    xxsmall: string;
+    xsmall: string;
+    small: string;
+    medium: string;
+    large: string;
+    xlarge: string;
+  };
   fontWeights: {
     body: number;
     heading: number;
@@ -22,7 +38,11 @@ export type BaseTheme = {
     background: string;
     primary: string;
     secondary: string;
-    muted: string;
+    disabled: string;
+    error: string;
+    warning: string;
+    info: string;
+    success: string;
     [key: string]: string;
   };
   [key: string]: CSSObject;

package/dist/Svg/Svg.d.ts

@@ -1,5 +0,0 @@
-declare type SvgProps = {
-    size?: number;
-};
-export declare const Svg: import("@marigold/system").SystemComponent<SvgProps, "svg">;
-export {};

package/dist/Svg/index.d.ts

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

package/dist/TextInput/TextInput.d.ts

@@ -1,3 +0,0 @@
-declare type TextInputProps = {};
-export declare const TextInput: import("@marigold/system").SystemComponent<TextInputProps, "input">;
-export {};

package/dist/TextInput/index.d.ts

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

package/src/Svg/Svg.stories.mdx

@@ -1,47 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Feedback } from '@marigold/icons';
-import { Svg } from './Svg';
-
-<Meta title="Components/Iconography/Svg" />
-
-# SVG-Component
-
-## Description
-
-With the SVG component you can render a `svg` element.
-By adding the `size` prop you can change to another size. `24` is the default size.
-The `fill` prop is the second attribute and per default `currentcolor`.
-Specific css style prop can also be added.
-
-## Properties
-
-| Property | Type     | Default          |
-| :------- | :------- | :--------------- |
-| `size`   | `number` | `24`             |
-| `fill`   | `string` | `'currentcolor'` |
-
-## Import
-
-```tsx
-import { Svg } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="example1-svg">
-    <Svg>
-      <path d="M11.9634 17.6396C12.8179 17.6396 13.5991 17.4321 14.3071 17.0171C15.0151 16.602 15.5828 16.0344 16.01 15.3142C16.4373 14.594 16.6509 13.8127 16.6509 12.9705C16.6509 12.1282 16.4373 11.3469 16.01 10.6267C15.5828 9.90649 15.0151 9.33887 14.3071 8.92383C13.5991 8.50879 12.8179 8.30127 11.9634 8.30127C11.1089 8.30127 10.3276 8.50879 9.61963 8.92383C8.91162 9.33887 8.3501 9.90649 7.93506 10.6267C7.52002 11.3469 7.3125 12.1282 7.3125 12.9705C7.3125 13.8127 7.52002 14.594 7.93506 15.3142C8.3501 16.0344 8.91162 16.602 9.61963 17.0171C10.3276 17.4321 11.1089 17.6396 11.9634 17.6396ZM19.4341 5.48145C19.9468 5.48145 20.3862 5.66455 20.7524 6.03076C21.1187 6.39697 21.3018 6.83642 21.3018 7.34912V18.5552C21.3018 19.0679 21.1187 19.5073 20.7524 19.8735C20.3862 20.2397 19.9468 20.4229 19.4341 20.4229H4.49268C3.97998 20.4229 3.54053 20.2397 3.17432 19.8735C2.8081 19.5073 2.625 19.0679 2.625 18.5552V7.34912C2.625 6.83642 2.8081 6.39697 3.17432 6.03076C3.54053 5.66455 3.97998 5.48145 4.49268 5.48145H7.45898L9.18018 3.61377H14.7832L16.4678 5.48145H19.4341ZM11.9634 9.98584C12.7935 9.98584 13.5015 10.2788 14.0874 10.8647C14.6733 11.4507 14.9663 12.1526 14.9663 12.9705C14.9663 13.7883 14.6733 14.4902 14.0874 15.0762C13.5015 15.6621 12.7935 15.9551 11.9634 15.9551C11.1333 15.9551 10.4253 15.6621 9.83936 15.0762C9.25342 14.4902 8.96045 13.7883 8.96045 12.9705C8.96045 12.1526 9.25342 11.4507 9.83936 10.8647C10.4253 10.2788 11.1333 9.98584 11.9634 9.98584Z" />
-    </Svg>
-  </Story>
-  <Story name="example2-svg">
-    <Svg size={64}>
-      <path d="M15.2617 3H8.69638C7.33407 3 6.23438 4.09636 6.23438 5.45455V18.5455C6.23438 19.9036 7.33407 21 8.69638 21H15.2617C16.624 21 17.7237 19.9036 17.7237 18.5455V5.45455C17.7237 4.09636 16.624 3 15.2617 3V3ZM13.6204 19.3637H10.3377V18.5455H13.6204V19.3637V19.3637ZM16.2876 16.909H7.67054V5.4545H16.2876V16.909V16.909Z" />
-    </Svg>
-  </Story>
-  <Story name="example3-svg">
-    <Svg size={32} fill="orange">
-      <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
-    </Svg>
-  </Story>
-</Preview>

package/src/Svg/Svg.test.tsx

@@ -1,58 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Svg } from './Svg';
-
-test('supports default fill color', () => {
-  render(
-    <Svg title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('currentcolor');
-});
-
-test('supports default size', () => {
-  render(
-    <Svg title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('24');
-});
-
-test('supports size prop', () => {
-  render(
-    <Svg title="svg" size={30}>
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('30');
-});
-
-test('supports fill prop', () => {
-  render(
-    <Svg title="svg" fill="#fafafa">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('#fafafa');
-});
-
-test('renders <svg> element', () => {
-  render(
-    <Svg title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg instanceof SVGElement).toBeTruthy();
-});

package/src/Svg/Svg.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { Box, system } from '@marigold/system';
-
-type SvgProps = {
-  size?: number;
-};
-
-export const Svg = system<SvgProps, 'svg'>(
-  ({ size = 24, fill = 'currentcolor', children, ...props }) => {
-    return (
-      <Box
-        as="svg"
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        fill={fill}
-        themeSection="icon"
-        variant="icon"
-        {...props}
-      >
-        {children}
-      </Box>
-    );
-  }
-);

package/src/Svg/index.ts

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

package/src/TextInput/TextInput.stories.mdx

@@ -1,37 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { TextInput, Label } from '@marigold/components';
-
-<Meta title="Components/Form/TextInput" />
-
-# TextInput
-
-## Description
-
-Form input field for different types of text.
-
-## Import
-
-```tsx
-import { TextInput } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="TextInput">
-    <div>
-      <Label htmlFor="input">
-        Label
-        <TextInput id="input" placeholder="Placeholder" />
-      </Label>
-      <Label htmlFor="input2">
-        Label
-        <TextInput id="input2" placeholder="Disabled" disabled />
-      </Label>
-      <Label htmlFor="input3">
-        Label
-        <TextInput id="input2" placeholder="0" type="number" />
-      </Label>
-    </div>
-  </Story>
-</Preview>

package/src/TextInput/TextInput.test.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
-import { TextInput } from '@marigold/components';
-
-const theme = {
-  form: {
-    input: {
-      fontFamily: 'Inter',
-    },
-    input2: {
-      fontFamily: 'Roboto',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <TextInput title="input" />
-    </MarigoldProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).toHaveStyle(`font-family: Inter`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <TextInput title="input" variant="input2" />
-    </MarigoldProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).toHaveStyle(`font-family: Roboto`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <TextInput title="input" />
-    </MarigoldProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input instanceof HTMLInputElement).toBeTruthy();
-});
-
-test('supports custom prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <TextInput title="input" placeholder="placeholder" />
-    </MarigoldProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).toHaveAttribute('placeholder');
-});
-
-test('variant styles cannot be overridden with CSS prop', () => {
-  render(
-    <MarigoldProvider theme={theme}>
-      <TextInput title="input" css={{ fontFamily: 'Oswald Regular' }} />
-    </MarigoldProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).not.toHaveStyle(`font-family: Oswald Regular`);
-  expect(input).toHaveStyle(`font-family: Inter`);
-});

package/src/TextInput/TextInput.tsx

@@ -1,21 +0,0 @@
-import React from 'react';
-import { Box, system } from '@marigold/system';
-
-type TextInputProps = {};
-
-export const TextInput = system<TextInputProps, 'input'>(
-  ({ variant = 'input', type = 'text', children, ...props }) => {
-    return (
-      <Box
-        as="input"
-        type={type}
-        themeSection="form"
-        variant={variant}
-        {...props}
-        css={{
-          border: 0,
-        }}
-      />
-    );
-  }
-);

package/src/TextInput/index.ts

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