@marigold/components 0.1.0 → 0.3.2

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

@@ -0,0 +1,54 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Input } from './Input';
+import { Label } from '../Label';
+
+export default {
+  title: 'Components/Input',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'time',
+        'url',
+        'week',
+      ],
+      defaultValue: 'text',
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Input> = args => (
+  <Label htmlFor="input">
+    Label
+    <Input id="input" placeholder="Placeholder..." {...args} />
+  </Label>
+);

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}`} />;

package/src/Label/Label.stories.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Label } from './Label';
+
+export default {
+  title: 'Components/Label',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'input',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Adds required Icon to label',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Label> = args => (
+  <Label {...args}>Label</Label>
+);

package/src/Label/Label.test.tsx

@@ -4,17 +4,25 @@ import { ThemeProvider } from '@marigold/system';
 import { Label } from './Label';
 
 const theme = {
+  fonts: {
+    body: 'Inter Regular',
+    label: 'Oswald',
+  },
   label: {
-    default: {
-      fontFamily: 'Inter Regular',
+    above: {
+      fontFamily: 'body',
     },
     myLabel: {
-      fontFamily: 'Oswald Regular',
+      fontFamily: 'label',
     },
   },
+  colors: {
+    text: 'black',
+    disabled: 'gray',
+  },
 };
 
-test('supports default variant and themeSection', () => {
+test('supports default variant and styles', () => {
   render(
     <ThemeProvider theme={theme}>
       <Label htmlFor="labelId">label</Label>
@@ -23,6 +31,7 @@ test('supports default variant and themeSection', () => {
   const label = screen.getByText(/label/);
 
   expect(label).toHaveStyle(`font-family: Inter Regular`);
+  expect(label).toHaveStyle(`color: black`);
 });
 
 test('supports other variant than default', () => {
@@ -35,7 +44,7 @@ test('supports other variant than default', () => {
   );
   const label = screen.getByText(/label/);
 
-  expect(label).toHaveStyle(`font-family: Oswald Regular`);
+  expect(label).toHaveStyle(`font-family: Oswald`);
 });
 
 test('supports htmlFor prop', () => {
@@ -49,6 +58,32 @@ test('supports htmlFor prop', () => {
   expect(label).toHaveAttribute('for');
 });
 
+test('supports required prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" required>
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  const parent = label.parentElement;
+
+  expect(parent instanceof HTMLSpanElement).toBeTruthy();
+});
+
+test('supports color prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" color="disabled">
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  expect(label).toHaveStyle(`color: gray`);
+});
+
 test('renders <label> element', () => {
   render(
     <ThemeProvider theme={theme}>

package/src/Label/Label.tsx

@@ -1,18 +1,64 @@
 import React from 'react';
+
 import { ComponentProps } from '@marigold/types';
+import { Required } from '@marigold/icons';
+import { ResponsiveStyleValue } from '@marigold/system';
+
 import { Box } from '../Box';
 
-export type LabelProps = {
-  htmlFor: string;
+// Theme Extension
+// ---------------
+export interface LabelThemeExtension<Value> {
+  label?: {
+    [key: string]: Value;
+  };
+}
+
+// LabelBase
+// ---------------
+export type LabelBaseProps = {
+  htmlFor?: string;
   variant?: string;
+  required?: boolean;
+  color?: ResponsiveStyleValue<string>;
 } & ComponentProps<'label'>;
 
+export const LabelBase: React.FC<LabelProps> = ({
+  variant = 'above',
+  required,
+  color = 'text',
+  children,
+  ...props
+}) => {
+  return (
+    <Box
+      {...props}
+      as="label"
+      __baseCSS={{ color: color }}
+      variant={`label.${variant}`}
+    >
+      {children}
+    </Box>
+  );
+};
+
+// Label
+// ---------------
+export type LabelProps = {
+  required?: boolean;
+} & LabelBaseProps;
+
 export const Label: React.FC<LabelProps> = ({
-  variant = 'default',
+  required,
   children,
   ...props
-}) => (
-  <Box {...props} as="label" variant={`label.${variant}`}>
-    {children}
-  </Box>
-);
+}) => {
+  return required ? (
+    <Box as="span" display="inline-flex" alignItems="center">
+      <LabelBase {...props}>{children}</LabelBase>
+      {required && <Box as={Required} size={16} css={{ color: 'error' }} />}
+    </Box>
+  ) : (
+    <LabelBase {...props}>{children}</LabelBase>
+  );
+};

package/src/Link/Link.stories.tsx

@@ -0,0 +1,35 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Link } from './Link';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Link',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'link',
+        },
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+      description: 'The URL to direct to',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Link> = args => (
+  <Text>
+    <Link href="https://marigold-ui.io" target="_blank" {...args}>
+      Marigold Docs
+    </Link>
+  </Text>
+);

package/src/Link/Link.test.tsx

@@ -4,12 +4,16 @@ import { ThemeProvider } from '@marigold/system';
 import { Link } from './Link';
 
 const theme = {
+  fonts: {
+    link: 'Inter',
+    body: 'Oswald',
+  },
   text: {
     link: {
-      fontFamily: 'Inter',
+      fontFamily: 'link',
     },
     second: {
-      fontFamily: 'Oswald',
+      fontFamily: 'body',
     },
   },
 };

package/src/Link/Link.tsx

@@ -4,9 +4,19 @@ import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
 
 import { Text, TextOwnProps } from '../Text';
 
+// Theme Extension
+// ---------------
+export interface LinkThemeExtension<Value> {
+  link?: Value;
+}
+
+// Props
+// ---------------
 export type LinkOwnProps = { disabled?: boolean } & TextOwnProps;
 export type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;
 
+// Component
+// ---------------
 export const Link = (({
   as = 'a',
   variant = 'link',
@@ -17,7 +27,8 @@ export const Link = (({
   const ref = useRef<any>();
   const { linkProps } = useLink(
     {
-      ...props,
+      // We typecast here because the element could very well be a `span`
+      ...(props as PolymorphicProps<LinkOwnProps, any>),
       elementType: typeof as === 'string' ? as : 'span',
       isDisabled: disabled,
     },

package/src/Menu/Menu.stories.tsx

@@ -0,0 +1,62 @@
+import React, { useState } from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Menu } from './Menu';
+import { MenuItem } from '../MenuItem';
+
+export default {
+  title: 'Components/Menu',
+  parameters: {
+    actions: {
+      handles: ['click'],
+    },
+  },
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      description: 'Menu label on hover',
+      defaultValue: 'Menu',
+    },
+    show: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      description: 'Show what',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    onClick: {
+      control: {
+        type: 'text',
+      },
+      description: 'Function to show menu or toggle something',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Menu> = ({ onClick, ...args }) => {
+  const [showMenu, setShowMenu] = useState(false);
+  return (
+    <Menu onClick={() => setShowMenu(!showMenu)} show={showMenu} {...args}>
+      <MenuItem href="#">Home</MenuItem>
+      <MenuItem href="#">Tickets</MenuItem>
+      <MenuItem href="#">Logout</MenuItem>
+    </Menu>
+  );
+};

package/src/Menu/Menu.test.tsx

@@ -5,12 +5,17 @@ import { Menu } from './Menu';
 import { MenuItem } from '../MenuItem';
 
 const theme = {
-  content: {
-    menu: {
-      padding: '4px',
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  menu: {
+    default: {
+      padding: 'small',
     },
-    options: {
-      padding: '8px',
+    custom: {
+      padding: 'medium',
     },
   },
 };
@@ -31,7 +36,7 @@ test('supports default variant and themeSection', () => {
 test('accepts other variant than default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Menu variant="options" title="menu" onClick={() => {}}>
+      <Menu variant="custom" title="menu" onClick={() => {}}>
         <MenuItem href="#">Home</MenuItem>
       </Menu>
     </ThemeProvider>