@marigold/components 0.1.0 → 0.2.0

package/src/Textarea/Textarea.stories.mdx

@@ -1,65 +1,74 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { Textarea } from '../Textarea';
 
-<Meta title="Components/Textarea" />
+<Meta
+  title="Components/Textarea"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Text above',
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      description: 'Bind to label',
+      table: {
+        defaultValue: {
+          summary: 'textarea',
+        },
+      },
+    },
+    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,
+        },
+      },
+    },
+  }}
+/>
 
 # Textarea
 
-## Description
-
-With the Textarea component you can add a HTML `<textarea>` element for larger text input to your form.
-The element uses always the themeSection with the name: `textarea` in your given theme. The variant in your section can be added with the variant prop. The default variant is `default`.
-If you use the label prop you have to add htmlFor. Optionally you can pass an errorMessage or the required prop.
-
-## Properties
-
-| Property                  | Type      | Default    |
-| :------------------------ | :-------- | :--------- |
-| `variant` (optional)      | `string`  | `default`  |
-| `label` (optional)        | `string`  |            |
-| `htmlFor` (optional)      | `string`  | `textarea` |
-| `errorMessage` (optional) | `string`  |            |
-| `required` (optional)     | `boolean` |            |
-
-## Import
-
-```tsx
-import { Textarea } from '@marigold/components';
-```
-
-## Usage
-
-### basic & disabled
+export const Template = args => (
+  <Textarea placeholder="Placeholder..." label="Textarea Label" {...args} />
+);
 
 <Canvas>
-  <Story name="Textarea">
-    <Textarea placeholder="Placeholder" />
-  </Story>
-  <Story name="Textarea disabled">
-    <Textarea placeholder="Placeholder disabled" disabled />
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
 
-### labeled & required
-
-<Canvas>
-  <Story name="Textarea label">
-    <Textarea label="Labeled" htmlFor="label" />
-  </Story>
-  <Story name="Textarea required">
-    <Textarea label="Required" htmlFor="required" required />
-  </Story>
-</Canvas>
-
-### with error
-
-<Canvas>
-  <Story name="Textarea error">
-    <Textarea
-      label="Required with error"
-      htmlFor="error"
-      required
-      errorMessage="Oh no, we have an error!"
-    />
-  </Story>
-</Canvas>
+<ArgsTable story="Default" />

package/src/Textarea/Textarea.test.tsx

@@ -58,14 +58,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 +74,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', () => {

package/src/Textarea/Textarea.tsx

@@ -1,6 +1,5 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
-import { Exclamation, Required } from '@marigold/icons';
+import { Exclamation } from '@marigold/icons';
 import { ComponentProps } from '@marigold/types';
 
 import { ValidationMessage } from '../ValidationMessage';
@@ -11,49 +10,41 @@ export type TextareaProps = {
   variant?: string;
   label?: string;
   htmlFor?: string;
-  errorMessage?: string;
   required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
 } & ComponentProps<'textarea'>;
 
 export const Textarea: React.FC<TextareaProps> = ({
   variant = 'default',
   htmlFor = 'textarea',
   label,
+  error,
   errorMessage,
-  required = false,
+  required,
   className = '',
   children,
   ...props
-}) => {
-  const errorClassName = useStyles({ css: { color: 'error' } });
-  const textareaClassNames = useStyles({
-    css: { outlineColor: errorMessage && 'error' },
-    className,
-  });
-
-  return (
-    <Box>
-      {label && (
-        <Label htmlFor={htmlFor}>
-          {label}
-          {(errorMessage || required) && (
-            <Required size={16} className={errorClassName} />
-          )}
-        </Label>
-      )}
-      <Box
-        as="textarea"
-        {...props}
-        display="block"
-        variant={`textarea.${variant}`}
-        className={textareaClassNames}
-      />
-      {errorMessage && (
-        <ValidationMessage>
-          <Exclamation size={16} />
-          {errorMessage}
-        </ValidationMessage>
-      )}
-    </Box>
-  );
-};
+}) => (
+  <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

@@ -1,36 +1,36 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 import { ValidationMessage } from './ValidationMessage';
 import { Exclamation } from '@marigold/icons';
 
-<Meta title="Components/ValidationMessage" />
+<Meta
+  title="Components/ValidationMessage"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'error',
+        },
+      },
+    },
+  }}
+/>
 
 # ValidationMessage
 
-## Description
 
-Simple colored element to display a validation message as a reaction to an event.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `error` |
-
-## Import
-
-```tsx
-import { ValidationMessage } from '@marigold/components';
-```
-
-## Usage
+export const Template = args => (
+  <ValidationMessage {...args}>
+    <Exclamation />
+    Validation message
+  </ValidationMessage>
+);
 
 <Canvas>
-  <Story name="ValidationMessage">
-    <div>
-      <ValidationMessage>
-        <Exclamation />
-        Validation message
-      </ValidationMessage>
-    </div>
-  </Story>
+  <Story name="Default">{Template.bind({})}</Story>
 </Canvas>
+
+<ArgsTable story="Default" />

package/src/ValidationMessage/ValidationMessage.test.tsx

@@ -6,10 +6,10 @@ import { ValidationMessage } from './ValidationMessage';
 const theme = {
   validation: {
     error: {
-      alignItems: 'center',
+      p: '8px',
     },
     warning: {
-      alignItems: 'right',
+      p: '4px',
     },
   },
 };
@@ -22,7 +22,7 @@ test('supports default variant and themeSection', () => {
   );
   const validation = screen.getByTitle(/error/);
 
-  expect(validation).toHaveStyle(`align-items: center`);
+  expect(validation).toHaveStyle(`padding: 8px`);
 });
 
 test('accepts other variant than default', () => {
@@ -35,7 +35,7 @@ test('accepts other variant than default', () => {
   );
   const validation = screen.getByTitle(/warning/);
 
-  expect(validation).toHaveStyle(`align-items: right`);
+  expect(validation).toHaveStyle(`padding: 4px`);
 });
 
 test('renders correct HTML element', () => {

package/src/ValidationMessage/ValidationMessage.tsx

@@ -1,7 +1,8 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
+import { Box } from '../Box';
+
 export type ValidationMessageProps = {
   variant?: string;
 } & ComponentProps<'span'>;
@@ -12,18 +13,16 @@ export const ValidationMessage: React.FC<ValidationMessageProps> = ({
   className,
   ...props
 }) => {
-  const classNames = useStyles({
-    variant: `validation.${variant}`,
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    className,
-  });
-
   return (
-    <span className={classNames} {...props}>
+    <Box
+      as="span"
+      display="flex"
+      alignItems="center"
+      variant={`validation.${variant}`}
+      className={className}
+      {...props}
+    >
       {children}
-    </span>
+    </Box>
   );
 };

package/src/index.ts

@@ -1,9 +1,11 @@
 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';
@@ -18,6 +20,7 @@ export * from './Link';
 export * from './Menu';
 export * from './MenuItem';
 export * from './Message';
+export * from './Provider';
 export * from './Radio';
 export * from './Slider';
 export * from './Select';
@@ -27,3 +30,5 @@ export * from './Textarea';
 export * from './Input';
 export * from './Container';
 export * from './ValidationMessage';
+
+export { Item, Section } from '@react-stately/collections';