@marigold/components 0.0.3 → 0.3.1

package/src/ActionGroup/ActionGroup.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+
+import { Inline } from '../Inline';
+import { Stack } from '../Stack';
+
+// Props
+// ---------------
+export type ActionGroupProps = {
+  space?: ResponsiveStyleValue<string>;
+  verticalAlignment?: boolean;
+} & ComponentProps<'div'>;
+
+// Component
+// ---------------
+export const ActionGroup: React.FC<ActionGroupProps> = ({
+  space = 'none',
+  verticalAlignment = false,
+  children,
+  ...props
+}) =>
+  verticalAlignment ? (
+    <Stack space={space} {...props}>
+      {children}
+    </Stack>
+  ) : (
+    <Inline space={space} {...props}>
+      {children}
+    </Inline>
+  );

package/src/ActionGroup/index.ts

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

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,8 +4,11 @@ import { ThemeProvider } from '@marigold/system';
 import { Alert } from './Alert';
 
 const theme = {
-  alerts: {
-    info: {
+  colors: {
+    primary: '#000',
+  },
+  alert: {
+    success: {
       alignItems: 'center',
     },
     error: {

package/src/Alert/Alert.tsx

@@ -1,57 +1,50 @@
 import React from 'react';
-import { ComponentProps } from '@marigold/types';
 import { Exclamation, Check, Notification } from '@marigold/icons';
-import { useStyles } from '@marigold/system';
+import { type ComponentProps } from '@marigold/types';
+
 import { Box } from '../Box';
 
+const ICON_MAP = {
+  success: Check,
+  warning: Notification,
+  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?: string;
+  variant?: AlertVariants;
 } & ComponentProps<'div'>;
 
+// Component
+// ---------------
 export const Alert: React.FC<AlertProps> = ({
   variant = 'success',
   children,
-  className,
   ...props
 }) => {
-  const classNames = useStyles({
-    css: {
-      display: 'flex',
-      alignItems: 'center',
-    },
-    variant: `alerts.${variant}`,
-    className,
-  });
-
-  var bgColor = 'success';
-  if (variant === 'warning') {
-    bgColor = 'warning';
-  } else if (variant === 'error') {
-    bgColor = 'error';
-  }
-  const iconClassName = useStyles({ css: { bg: bgColor, m: '10px' } });
-
-  var icon = <Check size={12} color="#ffffff" className={iconClassName} />;
-  if (variant === 'warning') {
-    icon = <Notification size={12} color="#ffffff" className={iconClassName} />;
-  } else if (variant === 'error') {
-    icon = <Exclamation size={12} color="#ffffff" className={iconClassName} />;
-  }
+  const Icon = ICON_MAP[variant];
 
   return (
-    <Box {...props} className={classNames}>
+    <Box {...props} display="flex" variant={`alert.${variant}`}>
       <Box
         display="inline-block"
         alignItems="center"
         width="32px"
         height="32px"
-        className={useStyles({
-          css: {
-            bg: bgColor,
-          },
-        })}
+        bg={variant}
       >
-        {icon}
+        <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 { ThemeProvider } from '@marigold/system';
 import { Badge } from './Badge';
 
 const theme = {
+  radii: {
+    none: 0,
+    larger: 8,
+  },
   badge: {
-    default: {
+    __default: {
       borderRadius: '8px',
     },
     fatBadge: {
@@ -48,22 +52,14 @@ test('supports other variant than default', () => {
 });
 
 test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ css: { 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,23 +1,34 @@
 import React from 'react';
 import { ComponentProps } from '@marigold/types';
 import { Box } from '../Box';
-import { useStyles } from '@marigold/system';
 
+// 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,
   ...props
 }) => (
   <Box
-    className={useStyles({ css: { bg: bgColor, borderColor: borderColor } })}
+    css={{ bg: bgColor, borderColor: borderColor }}
     variant={`badge.${variant}`}
     {...props}
   >

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,21 +1,64 @@
-import React from 'react';
-import { ComponentPropsWithRef } from '@marigold/types';
-import { Box } from '../Box';
+import React, { forwardRef, RefObject } from 'react';
+import { useButton } from '@react-aria/button';
+import {
+  PolymorphicComponentWithRef,
+  PolymorphicPropsWithRef,
+} from '@marigold/types';
 
-export type ButtonProps = {
-  variant?: string;
-} & ComponentPropsWithRef<'button'>;
+import { Box, BoxOwnProps } from '../Box';
 
-export const Button: React.FC<ButtonProps> = ({
-  variant = 'primary.large',
-  children,
-  ...props
-}) => {
-  return (
-    <Box as="button" {...props} variant={`button.${variant}`}>
-      <Box as="span" display="inline-flex" alignItems="center">
-        {children}
-      </Box>
-    </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(
+    (
+      {
+        as = 'button',
+        variant = 'primary',
+        size = 'large',
+        space = 'none',
+        disabled,
+        children,
+        className,
+        ...props
+      },
+      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}
+        </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>
+);

package/src/Card/Card.test.tsx

@@ -0,0 +1,71 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Card } from './Card';
+
+const theme = {
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  card: {
+    __default: {
+      p: 'medium',
+    },
+    custom: {
+      p: 'small',
+    },
+  },
+};
+
+test('supports default variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card>card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card).toHaveStyle(`padding: 8px`);
+});
+
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card variant="custom">card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card).toHaveStyle(`padding: 4px`);
+});
+
+test('accepts title prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card title="title">content</Card>
+    </ThemeProvider>
+  );
+  const title = screen.getByText(/title/);
+  expect(title).toBeDefined();
+});
+
+test('accepts width prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card width="320px">content</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/content/);
+  expect(card).toHaveStyle(`maxWidth: 320px`);
+});
+
+test('renders correct HTMl element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Card>card</Card>
+    </ThemeProvider>
+  );
+  const card = screen.getByText(/card/);
+  expect(card instanceof HTMLDivElement).toBeTruthy();
+});