@marigold/components 0.2.0 → 0.3.0

package/src/ActionGroup/ActionGroup.test.tsx

@@ -5,36 +5,32 @@ import { ActionGroup } from './ActionGroup';
 import { Button } from '../Button';
 
 const theme = {
-  actionGroup: {
-    default: {
-      p: '8px',
-    },
-    custom: {
-      p: '12px',
-    },
+  space: {
+    none: 0,
+    small: 2,
   },
 };
 
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <ActionGroup title="actionGroup" />
-    </ThemeProvider>
-  );
-  const actionGroup = screen.getByTitle(/actionGroup/);
+const getLeftPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-left');
 
-  expect(actionGroup).toHaveStyle(`padding: 8px;`);
-});
+const getTopPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-top');
 
-test('supports other variant than default', () => {
+test('default space is "none"', () => {
   render(
     <ThemeProvider theme={theme}>
-      <ActionGroup variant="custom" title="actionGroup" />
+      <ActionGroup title="actionGroup">
+        <Button title="Button1">Button1</Button>
+        <Button title="Button2">Button2</Button>
+      </ActionGroup>
     </ThemeProvider>
   );
-  const actionGroup = screen.getByTitle(/actionGroup/);
+  const first = screen.getByTitle(/Button1/).parentElement!;
+  const second = screen.getByTitle(/Button2/).parentElement!;
 
-  expect(actionGroup).toHaveStyle(`padding: 12px;`);
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-left: 0px`);
 });
 
 test('supports space prop', () => {
@@ -46,38 +42,42 @@ test('supports space prop', () => {
       </ActionGroup>
     </ThemeProvider>
   );
-  const button1 = screen.getByTitle(/Button1/);
-  const button2 = screen.getByTitle(/Button2/);
+  const first = screen.getByTitle(/Button1/).parentElement!;
+  const second = screen.getByTitle(/Button2/).parentElement;
 
-  expect(button1.parentElement instanceof HTMLSpanElement).toBeTruthy();
-  expect(button1.parentElement).toHaveStyle(`margin-right: 8px;`);
-  expect(button2.parentElement).not.toHaveStyle(`margin-right: 8px;`);
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-left: 8px`);
 });
 
-test('supports verticalAlignment prop', () => {
+test('accepts and uses spacing from theme', () => {
   render(
     <ThemeProvider theme={theme}>
-      <ActionGroup title="actionGroup" space="8px" verticalAlignment>
+      <ActionGroup title="actionGroup" space="small">
         <Button title="Button1">Button1</Button>
         <Button title="Button2">Button2</Button>
       </ActionGroup>
     </ThemeProvider>
   );
-  const button1 = screen.getByTitle(/Button1/);
-  const button2 = screen.getByTitle(/Button2/);
+  const first = screen.getByTitle(/Button1/).parentElement!;
+  const second = screen.getByTitle(/Button2/).parentElement;
 
-  expect(button1.parentElement instanceof HTMLDivElement).toBeTruthy();
-  expect(button1.parentElement).toHaveStyle(`margin-bottom: 8px;`);
-  expect(button2.parentElement).not.toHaveStyle(`margin-bottom: 8px;`);
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-left: 2px`);
 });
 
-test('renders correct HTML element', () => {
+test('supports verticalAlignment prop', () => {
   render(
     <ThemeProvider theme={theme}>
-      <ActionGroup title="actionGroup" />
+      <ActionGroup title="actionGroup" space="small" verticalAlignment>
+        <Button title="Button1">Button1</Button>
+        <Button title="Button2">Button2</Button>
+      </ActionGroup>
     </ThemeProvider>
   );
-  const actionGroup = screen.getByTitle(/actionGroup/);
 
-  expect(actionGroup instanceof HTMLDivElement).toBeTruthy();
+  const button1 = screen.getByText(/Button1/);
+  const button2 = screen.getByText(/Button2/);
+
+  expect(getTopPadding(button1.parentElement!)).toEqual('');
+  expect(button2.parentElement).toHaveStyle(`padding-top: 2px`);
 });

package/src/ActionGroup/ActionGroup.tsx

@@ -1,43 +1,32 @@
-import React, { Children } from 'react';
-import flattenChildren from 'react-keyed-flatten-children';
+import React from 'react';
 
 import { ResponsiveStyleValue } from '@marigold/system';
 import { ComponentProps } from '@marigold/types';
 
-import { Box } from '../Box';
+import { Inline } from '../Inline';
+import { Stack } from '../Stack';
 
+// Props
+// ---------------
 export type ActionGroupProps = {
-  variant?: string;
-  space?: ResponsiveStyleValue<number | string>;
+  space?: ResponsiveStyleValue<string>;
   verticalAlignment?: boolean;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const ActionGroup: React.FC<ActionGroupProps> = ({
-  variant = 'default',
   space = 'none',
   verticalAlignment = false,
   children,
-  className,
   ...props
-}) => {
-  const childStyle = verticalAlignment
-    ? { marginBottom: space }
-    : { marginRight: space };
-  return (
-    <Box variant={`actionGroup.${variant}`} className={className} {...props}>
-      {Children.map(
-        flattenChildren(children),
-        (child, i) =>
-          child !== null &&
-          child !== undefined && (
-            <Box
-              as={verticalAlignment ? 'div' : 'span'}
-              css={i < Children.count(children) - 1 ? childStyle : undefined}
-            >
-              {child}
-            </Box>
-          )
-      )}
-    </Box>
+}) =>
+  verticalAlignment ? (
+    <Stack space={space} {...props}>
+      {children}
+    </Stack>
+  ) : (
+    <Inline space={space} {...props}>
+      {children}
+    </Inline>
   );
-};

package/src/Alert/Alert.stories.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Alert } from './Alert';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Alert',
+  argTypes: {
+    variant: {
+      description: 'usage types',
+      control: {
+        type: 'select',
+      },
+      options: ['success', 'warning', 'error'],
+      defaultValue: 'success',
+    },
+    children: {
+      description: 'text to display',
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'Put some text here!',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Alert> = ({ children, ...args }) => (
+  <Alert {...args}>
+    <Text>{children}</Text>
+  </Alert>
+);

package/src/Alert/Alert.test.tsx

@@ -4,7 +4,10 @@ import { ThemeProvider } from '@marigold/system';
 import { Alert } from './Alert';
 
 const theme = {
-  alerts: {
+  colors: {
+    primary: '#000',
+  },
+  alert: {
     success: {
       alignItems: 'center',
     },

package/src/Alert/Alert.tsx

@@ -1,6 +1,7 @@
 import React from 'react';
-import { ComponentProps } from '@marigold/types';
 import { Exclamation, Check, Notification } from '@marigold/icons';
+import { type ComponentProps } from '@marigold/types';
+
 import { Box } from '../Box';
 
 const ICON_MAP = {
@@ -9,10 +10,24 @@ const ICON_MAP = {
   error: Exclamation,
 } as const;
 
+export type AlertVariants = keyof typeof ICON_MAP;
+
+// Theme Extension
+// ---------------
+export interface AlertThemeExtension<Value> {
+  alert?: {
+    [key in AlertVariants]?: Value;
+  };
+}
+
+// Props
+// ---------------
 export type AlertProps = {
-  variant?: keyof typeof ICON_MAP;
+  variant?: AlertVariants;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Alert: React.FC<AlertProps> = ({
   variant = 'success',
   children,
@@ -21,7 +36,7 @@ export const Alert: React.FC<AlertProps> = ({
   const Icon = ICON_MAP[variant];
 
   return (
-    <Box {...props} display="flex" variant={`alerts.${variant}`}>
+    <Box {...props} display="flex" variant={`alert.${variant}`}>
       <Box
         display="inline-block"
         alignItems="center"

package/src/Badge/Badge.stories.tsx

@@ -0,0 +1,38 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Badge } from './Badge';
+import { Check } from '@marigold/icons';
+
+export default {
+  title: 'Components/Badge',
+  argTypes: {
+    variant: {
+      description: 'badge variant',
+      control: {
+        type: 'text',
+      },
+      defaultValue: '',
+    },
+    bgColor: {
+      description: 'background color',
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'primary',
+    },
+    borderColor: {
+      description: 'outline color',
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'transparent',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Badge> = args => (
+  <Badge {...args}>
+    <Check /> Check
+  </Badge>
+);

package/src/Badge/Badge.test.tsx

@@ -4,8 +4,12 @@ import { ThemeProvider } from '@marigold/system';
 import { Badge } from './Badge';
 
 const theme = {
+  radii: {
+    none: 0,
+    larger: 8,
+  },
   badge: {
-    default: {
+    __default: {
       borderRadius: '8px',
     },
     fatBadge: {

package/src/Badge/Badge.tsx

@@ -2,14 +2,26 @@ import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface BadgeThemeExtension<Value> {
+  badge?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type BadgeProps = {
   variant?: string;
   bgColor?: string;
   borderColor?: string;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Badge: React.FC<BadgeProps> = ({
-  variant = 'default',
+  variant = '',
   bgColor = 'transparent',
   borderColor = 'transparent',
   children,

package/src/Box.ts

@@ -0,0 +1,2 @@
+export { Box } from '@marigold/system';
+export type { BoxProps, BoxOwnProps, StyleProps } from '@marigold/system';

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

@@ -1,15 +1,16 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Facebook } from '@marigold/icons';
 import { Button } from './Button';
 
-<Meta
-  title="Components/Button"
-  parameters={{
+export default {
+  title: 'Components/Button',
+  parameters: {
     actions: {
       handles: ['click'],
     },
-  }}
-  argTypes={{
+  },
+  argTypes: {
     variant: {
       control: {
         type: 'select',
@@ -46,19 +47,11 @@ import { Button } from './Button';
         },
       },
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Button
-
-export const Template = args => (
+export const Basic: ComponentStory<typeof Button> = args => (
   <Button {...args}>
     <Facebook /> Like me
   </Button>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Button/Button.test.tsx

@@ -5,18 +5,27 @@ import { Button } from './Button';
 import { Facebook } from '@marigold/icons';
 
 const theme = {
+  fonts: {
+    body: 'Arial',
+    fancy: 'Inter',
+  },
+  space: {
+    none: 0,
+    small: 2,
+    large: 16,
+  },
   button: {
     large: {
-      p: '16px',
+      p: 'large',
     },
     small: {
-      p: '16px',
+      p: 'large',
     },
     primary: {
-      fontFamily: 'Inter',
+      fontFamily: 'fancy',
     },
     secondary: {
-      fontFamily: 'Arial',
+      fontFamily: 'body',
     },
   },
 };
@@ -29,7 +38,7 @@ test('supports default variant', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`font-family: Inter`);
+  expect(button).toHaveStyle(`font-family: Inter`);
 });
 
 test('supports default size', () => {
@@ -40,7 +49,7 @@ test('supports default size', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`padding: 16px`);
+  expect(button).toHaveStyle(`padding: 16px`);
 });
 
 test('accepts other variant than default', () => {
@@ -51,7 +60,7 @@ test('accepts other variant than default', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`font-family: Arial`);
+  expect(button).toHaveStyle(`font-family: Arial`);
 });
 
 test('accepts other size than default', () => {
@@ -62,7 +71,7 @@ test('accepts other size than default', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`padding: 16px`);
+  expect(button).toHaveStyle(`padding: 16px`);
 });
 
 test('renders <button> element', () => {
@@ -73,8 +82,7 @@ test('renders <button> element', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement instanceof HTMLButtonElement).toBeTruthy();
-  expect(button instanceof HTMLSpanElement).toBeTruthy();
+  expect(button instanceof HTMLButtonElement).toBeTruthy();
 });
 
 test('accepts other button components', () => {
@@ -105,13 +113,28 @@ test('add icon in button works as expected', () => {
   const button = screen.getByText(/iconbutton/);
   const icon = screen.getByTitle(/facebook/);
 
-  expect(button instanceof HTMLSpanElement).toBeTruthy();
+  expect(button instanceof HTMLButtonElement).toBeTruthy();
   expect(button).toHaveStyle('display: inline-flex');
   expect(button.firstChild instanceof SVGElement).toBeTruthy();
   expect(icon.getAttribute('fill')).toEqual('red');
   expect(icon.getAttribute('width')).toEqual('30');
 });
 
+test('add space to button works as expected', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button title="iconbutton" space="small">
+        <Facebook fill="red" size={30} title="facebook" />
+        iconbutton
+      </Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByTitle(/iconbutton/);
+
+  const style = window.getComputedStyle(button);
+  expect(style.columnGap).toBe(`2px`);
+});
+
 test('accepts custom styles prop className', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Button/Button.tsx

@@ -7,8 +7,20 @@ import {
 
 import { Box, BoxOwnProps } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface ButtonThemeExtension<Value> {
+  button?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;
 
+// Component
+// ---------------
 export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
   forwardRef(
     (
@@ -16,6 +28,7 @@ export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
         as = 'button',
         variant = 'primary',
         size = 'large',
+        space = 'none',
         disabled,
         children,
         className,
@@ -37,13 +50,14 @@ export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
           {...buttonProps}
           {...props}
           as={as}
+          display="inline-flex"
+          alignItems="center"
           variant={[`button.${variant}`, `button.${size}`]}
           className={className}
           ref={ref}
+          css={{ columnGap: space }}
         >
-          <Box as="span" display="inline-flex" alignItems="center">
-            {children}
-          </Box>
+          {children}
         </Box>
       );
     }

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

@@ -1,18 +1,18 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Heading } from '../Heading';
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
 import { Card } from './Card';
 import { Text } from '../Text';
 
-<Meta
-  title="Components/Card"
-  argTypes={{
+export default {
+  title: 'Components/Card',
+  argTypes: {
     variant: {
       control: {
         type: 'text',
       },
       table: {
         defaultValue: {
-          summary: 'default',
+          summary: '__default',
         },
       },
     },
@@ -28,12 +28,10 @@ import { Text } from '../Text';
       },
       description: 'max width of the card',
     },
-  }}
-/>
+  },
+} as Meta;
 
-# Card
-
-export const Template = args => (
+export const Basic: ComponentStory<typeof Card> = args => (
   <Card title="Card" {...args}>
     <Text>
       Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
@@ -41,9 +39,3 @@ export const Template = args => (
     </Text>
   </Card>
 );
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Card/Card.test.tsx

@@ -5,12 +5,17 @@ import { ThemeProvider } from '@marigold/system';
 import { Card } from './Card';
 
 const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
   card: {
-    default: {
-      p: '8px',
+    __default: {
+      p: 'medium',
     },
     custom: {
-      p: '4px',
+      p: 'small',
     },
   },
 };

package/src/Card/Card.tsx

@@ -4,14 +4,26 @@ import { ComponentProps } from '@marigold/types';
 
 import { Box } from '../Box';
 
+// Theme Extension
+// ---------------
+export interface CardThemeExtension<Value> {
+  card?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
 export type CardProps = {
   title?: string;
   width?: ResponsiveStyleValue<string>;
   variant?: string;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Card: React.FC<CardProps> = ({
-  variant = 'default',
+  variant = '',
   title,
   width,
   className,

package/src/Checkbox/Checkbox.stories.mdx

@@ -28,6 +28,17 @@ import { useState } from 'react';
         },
       },
     },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Checkbox label variant',
+      table: {
+        defaultValue: {
+          summary: 'inline',
+        },
+      },
+    },
     label: {
       control: {
         type: 'text',