@marigold/components 0.2.0 → 0.3.0

package/src/Divider/{Divider.stories.mdx → Divider.stories.tsx}

@@ -1,10 +1,11 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Divider } from './Divider';
 import { Text } from '../Text';
 
-<Meta
-  title="Components/Divider"
-  argTypes={{
+export default {
+  title: 'Components/Divider',
+  argTypes: {
     variant: {
       control: {
         type: 'select',
@@ -17,21 +18,13 @@ import { Text } from '../Text';
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Divider
-
-export const Template = args => (
-  <div>
+export const Basic: ComponentStory<typeof Divider> = args => (
+  <>
     <Text>Above</Text>
     <Divider {...args} />
     <Text>Below</Text>
-  </div>
+  </>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Divider/Divider.test.tsx

@@ -4,16 +4,24 @@ import { ThemeProvider } from '@marigold/system';
 import { Divider } from './Divider';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 2,
+  },
+  borders: {
+    none: 0,
+    regular: '1px solid',
+  },
   divider: {
     regular: {
-      border: 0,
-      borderBottom: '1px solid',
-      margin: '2px',
+      border: 'none',
+      borderBottom: 'regular',
+      margin: 'small',
     },
     bold: {
-      border: 0,
+      border: 'none',
       borderBottom: '2px solid',
-      margin: '2px',
+      margin: 'small',
     },
   },
 };

package/src/Divider/Divider.tsx

@@ -1,12 +1,24 @@
 import React from 'react';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface DividerThemeExtension<Value> {
+  divider?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type DividerProps = {
   className?: string;
   variant?: string;
   title?: string; // Should only be used for testing.
 };
 
+// Component
+// ---------------
 export const Divider: React.FC<DividerProps> = ({
   variant = 'regular',
   ...props

package/src/Field/{Field.stories.mdx → Field.stories.tsx}

@@ -1,20 +1,43 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Field } from './Field';
 
-<Meta
-  title="Components/Field"
-  argTypes={{
+export default {
+  title: 'Components/Field',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field variant',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field label variant',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
     htmlFor: {
       control: {
         type: 'text',
       },
-      type: { required: true },
+      defaultValue: 'id',
     },
     label: {
       control: {
         type: 'text',
       },
-      type: { required: true },
+      defaultValue: 'Label',
     },
     error: {
       control: {
@@ -74,24 +97,14 @@ import { Field } from './Field';
         'url',
         'week',
       ],
-      type: { required: true },
+      defaultValue: 'text',
       table: {
         defaultValue: {
           summary: 'text',
         },
       },
     },
-  }}
-/>
-
-# Field
-
-export const Template = args => (
-  <Field htmlFor="id" label="A label" type="text" {...args} />
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
+  },
+} as Meta;
 
-<ArgsTable story="Default" />
+export const Basic: ComponentStory<typeof Field> = args => <Field {...args} />;

package/src/Field/Field.test.tsx

@@ -4,12 +4,22 @@ import { ThemeProvider } from '@marigold/system';
 import { Field } from './Field';
 
 const theme = {
-  field: {
-    default: {
-      padding: '4px',
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  label: {
+    above: {
+      fontSize: '14px',
+    },
+  },
+  input: {
+    __default: {
+      padding: 'small',
     },
-    inputField: {
-      padding: '8px',
+    error: {
+      padding: 'medium',
     },
   },
 };
@@ -25,6 +35,46 @@ test('renders correct HTML element', () => {
   expect(field instanceof HTMLLabelElement).toBeTruthy();
 });
 
+test('supports default variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" data-testid="field" />
+    </ThemeProvider>
+  );
+  const field = screen.getByTestId(/field/);
+  expect(field).toHaveStyle(`padding: 4px`);
+});
+
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" variant="error" data-testid="field" />
+    </ThemeProvider>
+  );
+  const field = screen.getByTestId(/field/);
+  expect(field).toHaveStyle(`padding: 8px`);
+});
+
+test('supports default variantLabel', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" />
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/Name/);
+  expect(label).toHaveStyle(`font-size: 14px`);
+});
+
+test('supports other variantLabel than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" />
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/Name/);
+  expect(label).toHaveStyle(`font-size: 14px`);
+});
+
 test('supports label prop', () => {
   render(<Field htmlFor="myId" label="Name" />);
   const field = screen.getByText(/Name/);

package/src/Field/Field.tsx

@@ -6,7 +6,11 @@ import { Input } from '../Input';
 import { Label } from '../Label';
 import { ValidationMessage } from '../ValidationMessage';
 
+// Props
+// ---------------
 export type FieldProps = {
+  variant?: string;
+  labelVariant?: string;
   htmlFor: string;
   label: string;
   required?: boolean;
@@ -15,9 +19,12 @@ export type FieldProps = {
   disabled?: boolean;
 } & ComponentProps<'input'>;
 
+// Component
+// ---------------
 export const Field: React.FC<FieldProps> = ({
   type = 'text',
-  className,
+  variant = '',
+  labelVariant = 'above',
   htmlFor,
   label,
   required,
@@ -28,11 +35,7 @@ export const Field: React.FC<FieldProps> = ({
 }) => {
   return (
     <>
-      <Label
-        variant={disabled ? 'disabled' : 'above'}
-        htmlFor={htmlFor}
-        required={required}
-      >
+      <Label variant={labelVariant} htmlFor={htmlFor} required={required}>
         {label}
       </Label>
       <Input
@@ -40,8 +43,7 @@ export const Field: React.FC<FieldProps> = ({
         type={type}
         id={htmlFor}
         disabled={disabled}
-        variant={error ? 'error' : 'default'}
-        className={className}
+        variant={variant}
       />
       {error && errorMessage && (
         <ValidationMessage>

package/src/Image/Image.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Image } from './Image';
+
+export default {
+  title: 'Components/Image',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'there is only one variant',
+      table: {
+        defaultValue: {
+          summary: 'fullWidth',
+        },
+      },
+    },
+    alt: {
+      control: {
+        type: 'text',
+      },
+      description: 'Description text for screenreaders',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Image> = args => (
+  <Image
+    src="https://www.reservix.net/_Resources/Persistent/0e8f5885125940fdb2bc2d54840f497782f56584/Reservix_Logo_dtp_web_rgb_font_black_180704.png"
+    alt="marigold_logo"
+    {...args}
+  />
+);

package/src/Image/Image.test.tsx

@@ -4,7 +4,10 @@ import { ThemeProvider } from '@marigold/system';
 import { Image } from './Image';
 
 const theme = {
-  images: {
+  colors: {
+    primary: 'hotpink',
+  },
+  image: {
     fullWidth: {
       alignItems: 'center',
     },

package/src/Image/Image.tsx

@@ -2,12 +2,24 @@ import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface ImageThemeExtension<Value> {
+  image?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type ImageProps = {
   variant?: string;
   children?: never;
 } & ComponentProps<'img'>;
 
+// Component
+// ---------------
 export const Image: React.FC<ImageProps> = ({
   variant = 'fullWidth',
   ...props
-}) => <Box {...props} as="img" variant={`images.${variant}`} />;
+}) => <Box {...props} as="img" variant={`image.${variant}`} />;

package/src/Inline/Inline.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Text } from '../Text';
+import { Inline } from './Inline';
+import { Check } from '@marigold/icons';
+
+export default {
+  title: 'Components/Inline',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Inline> = args => (
+  <Inline {...args}>
+    <Check />
+    <Text>Check</Text>
+  </Inline>
+);

package/src/Inline/Inline.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Inline } from './Inline';
+import { Text } from '../Text';
+
+// Setup
+// ---------------
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 8,
+  },
+};
+
+const getLeftPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-left');
+
+test('default space is "none"', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline>
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/).parentElement!;
+  const second = screen.getByText(/second/).parentElement!;
+
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-left: 0px`);
+});
+
+test('accepts and uses spacing from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline space="small">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-left: 2px`);
+});
+
+test('supports nesting', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline space="large">
+        <Inline space="small" data-testid="leftInline">
+          <Text>first</Text>
+          <Text>second</Text>
+        </Inline>
+        <Inline space="small" data-testid="rightInline">
+          <Text>third</Text>
+          <Text>fourth</Text>
+        </Inline>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const leftInline = screen.getByTestId('leftInline');
+
+  const third = screen.getByText(/third/);
+  const fourth = screen.getByText(/fourth/);
+  const rightInline = screen.getByTestId('rightInline');
+
+  expect(getLeftPadding(leftInline.parentElement!)).toEqual('');
+  expect(rightInline.parentElement).toHaveStyle(`padding-left: 8px`);
+
+  expect(getLeftPadding(first.parentElement!)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-left: 2px`);
+
+  expect(getLeftPadding(third.parentElement!)).toEqual('');
+  expect(fourth.parentElement).toHaveStyle(`padding-left: 2px`);
+});
+
+test('renders div per default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline data-testid="inline">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+
+  const inline = screen.getByTestId('inline');
+  expect(inline instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Inline/Inline.tsx

@@ -0,0 +1,38 @@
+import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export type InlineProps = {
+  space?: ResponsiveStyleValue<string>;
+  align?: 'top' | 'center' | 'bottom';
+};
+
+const ALIGNMENT = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end',
+};
+
+export const Inline: React.FC<InlineProps> = ({
+  space = 'none',
+  align = 'center',
+  children,
+  ...props
+}) => (
+  <Box
+    display="inline-flex"
+    css={{ '> * + *': { pl: space } }}
+    alignItems={ALIGNMENT[align]}
+    {...props}
+  >
+    {Children.map(
+      flattenChildren(children) as unknown as React.ReactElement,
+      (child: React.ReactElement) => (
+        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
+      )
+    )}
+  </Box>
+);

package/src/Inline/index.ts

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

package/src/Input/{Input.stories.mdx → Input.stories.tsx}

@@ -1,10 +1,11 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Input } from './Input';
 import { Label } from '../Label';
 
-<Meta
-  title="Components/Input"
-  argTypes={{
+export default {
+  title: 'Components/Input',
+  argTypes: {
     variant: {
       control: {
         type: 'text',
@@ -12,7 +13,7 @@ import { Label } from '../Label';
       description: '?',
       table: {
         defaultValue: {
-          summary: 'default',
+          summary: '__default',
         },
       },
     },
@@ -35,27 +36,19 @@ import { Label } from '../Label';
         'url',
         'week',
       ],
-      type: { required: true },
+      defaultValue: 'text',
       table: {
         defaultValue: {
           summary: 'text',
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Input
-
-export const Template = args => (
+export const Basic: ComponentStory<typeof Input> = args => (
   <Label htmlFor="input">
     Label
     <Input id="input" placeholder="Placeholder..." {...args} />
   </Label>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Input/Input.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Input } from './Input';
 
 const theme = {
+  fonts: {
+    body: 'Inter',
+    forms: 'Roboto',
+  },
   input: {
-    default: {
-      fontFamily: 'Inter',
+    __default: {
+      fontFamily: 'body',
     },
     input2: {
-      fontFamily: 'Roboto',
+      fontFamily: 'forms',
     },
   },
 };

package/src/Input/Input.tsx

@@ -2,12 +2,24 @@ import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface InputThemeExtension<Value> {
+  input?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type InputProps = {
   variant?: string;
 } & ComponentProps<'input'>;
 
+// Component
+// ---------------
 export const Input: React.FC<InputProps> = ({
-  variant = 'default',
+  variant = '',
   type = 'text',
   ...props
 }) => <Box {...props} as="input" type={type} variant={`input.${variant}`} />;