@marigold/components 0.0.2 → 0.3.0

package/src/Alert/Alert.test.tsx

@@ -1,16 +1,22 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useStyles, ThemeProvider } from '@marigold/system';
-import { Alert } from '@marigold/components';
+import { ThemeProvider } from '@marigold/system';
+import { Alert } from './Alert';
 
 const theme = {
-  alerts: {
-    info: {
+  colors: {
+    primary: '#000',
+  },
+  alert: {
+    success: {
       alignItems: 'center',
     },
-    danger: {
+    error: {
       alignItems: 'right',
     },
+    warning: {
+      alignItems: 'left',
+    },
   },
 };
 
@@ -25,19 +31,32 @@ test('supports default variant and themeSection', () => {
   expect(alert).toHaveStyle(`align-items: center`);
 });
 
-test('accepts other variant than default', () => {
+test('accepts error variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Alert title="danger" variant="danger">
-        Danger
+      <Alert title="error" variant="error">
+        Error
       </Alert>
     </ThemeProvider>
   );
-  const alert = screen.getByTitle(/danger/);
+  const alert = screen.getByTitle(/error/);
 
   expect(alert).toHaveStyle(`align-items: right`);
 });
 
+test('accepts warning variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Alert title="warning" variant="warning">
+        warning
+      </Alert>
+    </ThemeProvider>
+  );
+  const alert = screen.getByTitle(/warning/);
+
+  expect(alert).toHaveStyle(`align-items: left`);
+});
+
 test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
@@ -50,22 +69,14 @@ test('renders correct HTML element', () => {
 });
 
 test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ fontSize: '8px' });
-    return (
-      <Alert className={classNames} {...props}>
-        {children}
-      </Alert>
-    );
-  };
-
-  const { getByText } = render(
+  render(
     <ThemeProvider theme={theme}>
-      <TestComponent>text</TestComponent>
+      <Alert className="custom-class-name" title="alert">
+        alert
+      </Alert>
     </ThemeProvider>
   );
-  const testelem = getByText('text');
-  const text = getComputedStyle(testelem);
+  const alert = screen.getByTitle(/alert/);
 
-  expect(text.fontSize).toEqual('8px');
+  expect(alert.className).toMatch('custom-class-name');
 });

package/src/Alert/Alert.tsx

@@ -1,28 +1,52 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { Exclamation, Check, Notification } from '@marigold/icons';
+import { type ComponentProps } from '@marigold/types';
 
-type AlertProps = {
-  variant?: string;
-};
+import { Box } from '../Box';
+
+const ICON_MAP = {
+  success: Check,
+  warning: Notification,
+  error: Exclamation,
+} as const;
+
+export type AlertVariants = keyof typeof ICON_MAP;
 
-export const Alert = system<AlertProps, 'div'>(
-  ({ variant = 'info', className, children, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `alerts.${variant}`,
-        display: 'flex',
-        alignItems: 'center',
-        px: 3,
-        py: 2,
-        borderRadius: 4,
-      },
-      className
-    );
+// Theme Extension
+// ---------------
+export interface AlertThemeExtension<Value> {
+  alert?: {
+    [key in AlertVariants]?: Value;
+  };
+}
 
-    return (
-      <div className={classNames} {...props}>
-        {children}
-      </div>
-    );
-  }
-);
+// Props
+// ---------------
+export type AlertProps = {
+  variant?: AlertVariants;
+} & ComponentProps<'div'>;
+
+// Component
+// ---------------
+export const Alert: React.FC<AlertProps> = ({
+  variant = 'success',
+  children,
+  ...props
+}) => {
+  const Icon = ICON_MAP[variant];
+
+  return (
+    <Box {...props} display="flex" variant={`alert.${variant}`}>
+      <Box
+        display="inline-block"
+        alignItems="center"
+        width="32px"
+        height="32px"
+        bg={variant}
+      >
+        <Box as={Icon} size={12} color="#fff" bg={variant} m={10} />
+      </Box>
+      <Box mx="16px">{children}</Box>
+    </Box>
+  );
+};

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

@@ -1,11 +1,15 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { useStyles, ThemeProvider } from '@marigold/system';
-import { Badge } from '@marigold/components';
+import { ThemeProvider } from '@marigold/system';
+import { Badge } from './Badge';
 
 const theme = {
-  content: {
-    badge: {
+  radii: {
+    none: 0,
+    larger: 8,
+  },
+  badge: {
+    __default: {
       borderRadius: '8px',
     },
     fatBadge: {
@@ -36,28 +40,6 @@ test('renders correct HTML element', () => {
   expect(badge instanceof HTMLDivElement).toBeTruthy();
 });
 
-test('supports custom borderColor prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Badge title="badge" borderColor="#000" />
-    </ThemeProvider>
-  );
-  const badge = screen.getByTitle(/badge/);
-
-  expect(badge).toHaveStyle(`border: 1px solid #000`);
-});
-
-test('supports custom backgroundColor prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Badge title="badge" backgroundColor="#1ee" />
-    </ThemeProvider>
-  );
-  const badge = screen.getByTitle(/badge/);
-
-  expect(badge).toHaveStyle(`background: #1ee`);
-});
-
 test('supports other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
@@ -70,22 +52,14 @@ test('supports other variant than default', () => {
 });
 
 test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ fontSize: '8px' });
-    return (
-      <Badge className={classNames} {...props}>
-        {children}
-      </Badge>
-    );
-  };
-
-  const { getByText } = render(
+  render(
     <ThemeProvider theme={theme}>
-      <TestComponent>text</TestComponent>
+      <Badge className="custom-class-name" title="badge">
+        badge
+      </Badge>
     </ThemeProvider>
   );
-  const testelem = getByText('text');
-  const text = getComputedStyle(testelem);
+  const badge = screen.getByTitle(/badge/);
 
-  expect(text.fontSize).toEqual('8px');
+  expect(badge.className).toMatch('custom-class-name');
 });

package/src/Badge/Badge.tsx

@@ -1,34 +1,37 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
 
-type BadgeProps = {
+// Theme Extension
+// ---------------
+export interface BadgeThemeExtension<Value> {
+  badge?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
+export type BadgeProps = {
   variant?: string;
+  bgColor?: string;
   borderColor?: string;
-  backgroundColor?: string;
-};
-
-export const Badge = system<BadgeProps, 'div'>(
-  ({
-    variant = 'badge',
-    borderColor = 'inherit',
-    backgroundColor = 'inherit',
-    className,
-    children,
-    ...props
-  }) => {
-    const classNames = useStyles(
-      {
-        variant: `content.${variant}`,
-        border: '1px solid ' + borderColor,
-        bg: backgroundColor,
-      },
-      className
-    );
+} & ComponentProps<'div'>;
 
-    return (
-      <div className={classNames} {...props}>
-        {children}
-      </div>
-    );
-  }
+// Component
+// ---------------
+export const Badge: React.FC<BadgeProps> = ({
+  variant = '',
+  bgColor = 'transparent',
+  borderColor = 'transparent',
+  children,
+  ...props
+}) => (
+  <Box
+    css={{ bg: bgColor, borderColor: borderColor }}
+    variant={`badge.${variant}`}
+    {...props}
+  >
+    {children}
+  </Box>
 );

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.tsx

@@ -0,0 +1,57 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Facebook } from '@marigold/icons';
+import { Button } from './Button';
+
+export default {
+  title: 'Components/Button',
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['primary', 'secondary', 'ghost', 'text', 'menu', 'select'],
+      description: 'What the button looks like',
+      table: {
+        defaultValue: {
+          summary: 'primary',
+        },
+      },
+    },
+    size: {
+      control: {
+        type: 'select',
+      },
+      options: ['large', 'small'],
+      description: 'How big the button is rendered',
+      table: {
+        defaultValue: {
+          summary: 'large',
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      description: 'Disable the button',
+      table: {
+        defaultValue: {
+          summary: 'false',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Button> = args => (
+  <Button {...args}>
+    <Facebook /> Like me
+  </Button>
+);

package/src/Button/Button.test.tsx

@@ -5,21 +5,43 @@ 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: 'large',
+    },
+    small: {
+      p: 'large',
+    },
     primary: {
-      large: {
-        fontFamily: 'Inter',
-      },
+      fontFamily: 'fancy',
     },
     secondary: {
-      large: {
-        fontFamily: 'Arial',
-      },
+      fontFamily: 'body',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports default variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button>button</Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/button/);
+
+  expect(button).toHaveStyle(`font-family: Inter`);
+});
+
+test('supports default size', () => {
   render(
     <ThemeProvider theme={theme}>
       <Button>button</Button>
@@ -27,18 +49,29 @@ test('supports default variant and themeSection', () => {
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`font-family: Inter`);
+  expect(button).toHaveStyle(`padding: 16px`);
 });
 
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Button variant="secondary.large">button</Button>
+      <Button variant="secondary">button</Button>
     </ThemeProvider>
   );
   const button = screen.getByText(/button/);
 
-  expect(button.parentElement).toHaveStyle(`font-family: Arial`);
+  expect(button).toHaveStyle(`font-family: Arial`);
+});
+
+test('accepts other size than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Button size="small">button</Button>
+    </ThemeProvider>
+  );
+  const button = screen.getByText(/button/);
+
+  expect(button).toHaveStyle(`padding: 16px`);
 });
 
 test('renders <button> element', () => {
@@ -49,8 +82,23 @@ 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', () => {
+  const CustomButton = React.forwardRef<
+    HTMLSpanElement,
+    { children?: React.ReactNode }
+  >(() => <span>I am a Button!</span>);
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Button as={CustomButton}>Button</Button>
+    </ThemeProvider>
+  );
+
+  const button = screen.getByText('I am a Button!');
+  expect(button).toBeTruthy();
 });
 
 test('add icon in button works as expected', () => {
@@ -65,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

@@ -1,29 +1,64 @@
-import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import React, { forwardRef, RefObject } from 'react';
+import { useButton } from '@react-aria/button';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-type ButtonProps = {
-  variant?: string;
-};
+import { Box, BoxOwnProps } from '../Box';
 
-export const Button = system<ButtonProps, 'button'>(
-  ({ variant = 'primary.large', className, children, ...props }) => {
-    const classNames = useStyles(
+// 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(
+    (
       {
-        variant: `button.${variant}`,
+        as = 'button',
+        variant = 'primary',
+        size = 'large',
+        space = 'none',
+        disabled,
+        children,
+        className,
+        ...props
       },
-      className
-    );
-    return (
-      <button className={classNames} {...props}>
-        <span
-          className={useStyles({
-            display: 'inline-flex',
-            alignItems: 'center',
-          })}
+      ref
+    ) => {
+      const { buttonProps } = useButton(
+        {
+          ...props,
+          elementType: typeof as === 'string' ? as : 'span',
+          isDisabled: disabled,
+        },
+        ref as RefObject<HTMLSpanElement>
+      );
+
+      return (
+        <Box
+          {...buttonProps}
+          {...props}
+          as={as}
+          display="inline-flex"
+          alignItems="center"
+          variant={[`button.${variant}`, `button.${size}`]}
+          className={className}
+          ref={ref}
+          css={{ columnGap: space }}
         >
           {children}
-        </span>
-      </button>
-    );
-  }
-);
+        </Box>
+      );
+    }
+  );

package/src/Card/Card.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Card } from './Card';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Card',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    title: {
+      control: {
+        type: 'text',
+      },
+      description: 'card title',
+    },
+    width: {
+      control: {
+        type: 'text',
+      },
+      description: 'max width of the card',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Card> = args => (
+  <Card title="Card" {...args}>
+    <Text>
+      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
+      dignissim dapibus elit.
+    </Text>
+  </Card>
+);