@marigold/components 0.1.0 → 0.3.2

package/src/Textarea/Textarea.tsx

@@ -1,59 +1,62 @@
 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';
 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;
-  errorMessage?: string;
   required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
 } & ComponentProps<'textarea'>;
 
+// Component
+// ---------------
 export const Textarea: React.FC<TextareaProps> = ({
-  variant = 'default',
+  variant = '',
   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.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

@@ -4,12 +4,17 @@ import { ThemeProvider } from '@marigold/system';
 import { ValidationMessage } from './ValidationMessage';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
   validation: {
     error: {
-      alignItems: 'center',
+      p: 'medium',
     },
     warning: {
-      alignItems: 'right',
+      p: 'small',
     },
   },
 };
@@ -22,7 +27,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 +40,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,29 +1,40 @@
 import React from 'react';
-import { useStyles } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
+import { Box } from '../Box';
+
+// Theme Extension
+// ---------------
+export interface ValidationMessageThemeExtension<Value> {
+  validation?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type ValidationMessageProps = {
   variant?: string;
 } & ComponentProps<'span'>;
 
+// Component
+// ---------------
 export const ValidationMessage: React.FC<ValidationMessageProps> = ({
   variant = 'error',
   children,
   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/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,23 +1,26 @@
 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';
@@ -27,3 +30,5 @@ export * from './Textarea';
 export * from './Input';
 export * from './Container';
 export * from './ValidationMessage';
+
+export { Item, Section } from '@react-stately/collections';

package/src/theme.ts

@@ -1,49 +1,50 @@
-export type CSSObject = object;
+import { type CSSObject, type Theme as Scales } from '@marigold/system';
 
-export type BaseTheme = {
-  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: {
-    xxsmall: string;
-    xsmall: string;
-    small: string;
-    medium: string;
-    large: string;
-    xlarge: string;
-  };
-  fontWeights: {
-    body: number;
-    heading: number;
-    bold: number;
-  };
-  lineHeights: {
-    body: number;
-    heading: number;
-  };
-  colors: {
-    text: string;
-    background: string;
-    primary: string;
-    secondary: string;
-    disabled: string;
-    error: string;
-    warning: string;
-    info: string;
-    success: string;
-    [key: string]: string;
-  };
-  [key: string]: CSSObject;
-};
+// Provider
+// ---------------
+import { type RootThemeExtension } from './Provider';
+
+// Components
+// ---------------
+import { type AlertThemeExtension } from './Alert';
+import { type BadgeThemeExtension } from './Badge';
+import { type ButtonThemeExtension } from './Button';
+import { type CardThemeExtension } from './Card';
+import { type CheckboxThemeExtension } from './Checkbox';
+import { type DividerThemeExtension } from './Divider';
+import { type ImageThemeExtension } from './Image';
+import { type InputThemeExtension } from './Input';
+import { type LabelThemeExtension } from './Label';
+import { type LinkThemeExtension } from './Link';
+import { type MenuThemeExtension } from './Menu';
+import { type MenuItemThemeExtension } from './MenuItem';
+import { type MessageThemeExtension } from './Message';
+import { type RadioThemeExtension } from './Radio';
+import { type SelectThemeExtension } from './Select';
+import { type SliderThemeExtension } from './Slider';
+import { type TextThemeExtension } from './Text';
+import { type TextareaThemeExtension } from './Textarea';
+import { type ValidationMessageThemeExtension } from './ValidationMessage';
+
+export interface Theme
+  extends Scales,
+    RootThemeExtension<CSSObject>,
+    AlertThemeExtension<CSSObject>,
+    BadgeThemeExtension<CSSObject>,
+    ButtonThemeExtension<CSSObject>,
+    CardThemeExtension<CSSObject>,
+    CheckboxThemeExtension<CSSObject>,
+    DividerThemeExtension<CSSObject>,
+    ImageThemeExtension<CSSObject>,
+    InputThemeExtension<CSSObject>,
+    LabelThemeExtension<CSSObject>,
+    LinkThemeExtension<CSSObject>,
+    MenuThemeExtension<CSSObject>,
+    MenuItemThemeExtension<CSSObject>,
+    MessageThemeExtension<CSSObject>,
+    RadioThemeExtension<CSSObject>,
+    SelectThemeExtension<CSSObject>,
+    SliderThemeExtension<CSSObject>,
+    TextThemeExtension<CSSObject>,
+    TextareaThemeExtension<CSSObject>,
+    ValidationMessageThemeExtension<CSSObject> {}

package/dist/Box/Box.d.ts

@@ -1,46 +0,0 @@
-import { ResponsiveStyleValue } from '@marigold/system';
-import { PolymorphicPropsWithRef, PolymorphicComponentWithRef } from '@marigold/types';
-export declare type BoxOwnProps = {
-    className?: string;
-    variant?: string | string[];
-    display?: ResponsiveStyleValue<string>;
-    height?: ResponsiveStyleValue<number | string>;
-    width?: ResponsiveStyleValue<number | string>;
-    minWidth?: ResponsiveStyleValue<number | string>;
-    maxWidth?: ResponsiveStyleValue<number | string>;
-    position?: ResponsiveStyleValue<string>;
-    top?: ResponsiveStyleValue<number | string>;
-    bottom?: ResponsiveStyleValue<number | string>;
-    right?: ResponsiveStyleValue<number | string>;
-    left?: ResponsiveStyleValue<number | string>;
-    zIndex?: ResponsiveStyleValue<number | string>;
-    p?: ResponsiveStyleValue<number | string>;
-    px?: ResponsiveStyleValue<number | string>;
-    py?: ResponsiveStyleValue<number | string>;
-    pt?: ResponsiveStyleValue<number | string>;
-    pb?: ResponsiveStyleValue<number | string>;
-    pl?: ResponsiveStyleValue<number | string>;
-    pr?: ResponsiveStyleValue<number | string>;
-    m?: ResponsiveStyleValue<number | string>;
-    mx?: ResponsiveStyleValue<number | string>;
-    my?: ResponsiveStyleValue<number | string>;
-    mt?: ResponsiveStyleValue<number | string>;
-    mb?: ResponsiveStyleValue<number | string>;
-    ml?: ResponsiveStyleValue<number | string>;
-    mr?: ResponsiveStyleValue<number | string>;
-    flexDirection?: ResponsiveStyleValue<string>;
-    flexWrap?: ResponsiveStyleValue<string>;
-    flexShrink?: ResponsiveStyleValue<number | string>;
-    flexGrow?: ResponsiveStyleValue<number | string>;
-    alignItems?: ResponsiveStyleValue<string>;
-    justifyContent?: ResponsiveStyleValue<string>;
-    bg?: ResponsiveStyleValue<number | string>;
-    border?: ResponsiveStyleValue<number | string>;
-    borderRadius?: ResponsiveStyleValue<number | string>;
-    boxShadow?: ResponsiveStyleValue<number | string>;
-    opacity?: ResponsiveStyleValue<number | string>;
-    overflow?: ResponsiveStyleValue<string>;
-    transition?: ResponsiveStyleValue<number | string>;
-};
-export declare type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
-export declare const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'>;

package/dist/Box/index.d.ts

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

package/dist/Heading/Heading.d.ts

@@ -1,7 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-export declare type HeadingProps = {
-    as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-    variant?: string;
-} & ComponentProps<'h1'>;
-export declare const Heading: React.FC<HeadingProps>;

package/dist/Heading/index.d.ts

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

package/dist/Hidden/Hidden.d.ts

@@ -1,5 +0,0 @@
-import React from 'react';
-export declare type HiddenProps = {
-    show?: boolean;
-};
-export declare const Hidden: React.FC<HiddenProps>;

package/dist/Hidden/index.d.ts

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

package/src/Alert/Alert.stories.mdx

@@ -1,45 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { useStyles } from '@marigold/system';
-import { Alert } from './Alert';
-import { Text } from '../Text/';
-
-<Meta title="Components/Alert" />
-
-# Alert
-
-## Description
-
-Simple colored element to display an alert message as a reaction to an event.
-Predefined variants are info, success, danger and warning.
-
-## Properties
-
-| Property             | Type                      | Default   |
-| :------------------- | :------------------------ | :-------- |
-| `variant` (optional) | `success, error, warning` | `success` |
-
-## Import
-
-```tsx
-import { Alert } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Success">
-    <Alert>
-      <Text>Success message</Text>
-    </Alert>
-  </Story>
-  <Story name="Error">
-    <Alert variant="error">
-      <Text>Error message</Text>
-    </Alert>
-  </Story>
-  <Story name="Warning">
-    <Alert variant="warning">
-      <Text>Warning message</Text>
-    </Alert>
-  </Story>
-</Canvas>

package/src/Badge/Badge.stories.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Badge } from './Badge';
-import { Text } from '../Text';
-import { Check } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Badge" />
-
-# Badge
-
-## Description
-
-A badge tags an element with a short note and color. The content of the badge can be anything but preferably a string and/or icon.
-
-## Properties
-
-| Property                 | Type     | Default       |
-| :----------------------- | :------- | :------------ |
-| `variant` (optional)     | `string` | `default`     |
-| `borderColor` (optional) | `string` | `transparent` |
-| `bgColor` (optional)     | `string` | `inherit`     |
-
-## Import
-
-```tsx
-import { Badge } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Colored Background">
-    <Badge borderColor="black" bgColor="orange">
-      <Text>New</Text>
-    </Badge>
-  </Story>
-  <Story name="Outlined">
-    <Badge borderColor="orange" className={useStyles({ display: 'flex' })}>
-      <Check size={18} />
-      cool
-    </Badge>
-  </Story>
-</Canvas>

package/src/Box/Box.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Box } from './Box';
-import { Button } from '../Button';
-import { Label } from '../Label';
-
-<Meta title="Components/Box" />
-
-# Box-Component
-
-## Import
-
-```js
-import { Box } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="div-box">
-    <Box>I am basic box!</Box>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="button-box">
-    <Box as="button" bg="primary">
-      I am a button box!
-    </Box>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="h1-box">
-    <Box as="h1" p="3">
-      I am a blue headline!
-    </Box>
-  </Story>
-</Canvas>