@marigold/components 0.0.2 → 0.3.0

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

@@ -1,15 +1,19 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Input } from '@marigold/components';
+import { Input } from './Input';
 
 const theme = {
-  form: {
-    input: {
-      fontFamily: 'Inter',
+  fonts: {
+    body: 'Inter',
+    forms: 'Roboto',
+  },
+  input: {
+    __default: {
+      fontFamily: 'body',
     },
     input2: {
-      fontFamily: 'Roboto',
+      fontFamily: 'forms',
     },
   },
 };

package/src/Input/Input.tsx

@@ -1,20 +1,25 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
 
-type InputProps = {
-  variant?: string;
-};
+// Theme Extension
+// ---------------
+export interface InputThemeExtension<Value> {
+  input?: {
+    [key: string]: Value;
+  };
+}
 
-export const Input = system<InputProps, 'input'>(
-  ({ variant = 'input', type = 'text', className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `form.${variant}`,
-        border: 0,
-      },
-      className
-    );
+// Props
+// ---------------
+export type InputProps = {
+  variant?: string;
+} & ComponentProps<'input'>;
 
-    return <input type={type} className={classNames} {...props} />;
-  }
-);
+// Component
+// ---------------
+export const Input: React.FC<InputProps> = ({
+  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 = {
-  form: {
-    label: {
-      fontFamily: 'Inter Regular',
+  fonts: {
+    body: 'Inter Regular',
+    label: 'Oswald',
+  },
+  label: {
+    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,23 +1,64 @@
 import React from 'react';
-import { system, useStyles } from '@marigold/system';
 
-type TextProps = {
-  htmlFor: string;
+import { ComponentProps } from '@marigold/types';
+import { Required } from '@marigold/icons';
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// 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>
+  );
 };
 
-export const Label = system<TextProps, 'label'>(
-  ({ variant = 'label', htmlFor, children, className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `form.${variant}`,
-      },
-      className
-    );
-    return (
-      <label htmlFor={htmlFor} className={classNames} {...props}>
-        {children}
-      </label>
-    );
-  }
-);
+// Label
+// ---------------
+export type LabelProps = {
+  required?: boolean;
+} & LabelBaseProps;
+
+export const Label: React.FC<LabelProps> = ({
+  required,
+  children,
+  ...props
+}) => {
+  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

@@ -1,67 +1,97 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Link } from '@marigold/components';
+import { Link } from './Link';
 
 const theme = {
-  link: {
-    normal: {
-      fontFamily: 'Inter',
+  fonts: {
+    link: 'Inter',
+    body: 'Oswald',
+  },
+  text: {
+    link: {
+      fontFamily: 'link',
     },
     second: {
-      fontFamily: 'Oswald',
+      fontFamily: 'body',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('uses `text.link` as default variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" title="link">
-        Link
-      </Link>
+      <Link href="#!">Link</Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link).toHaveStyle(`font-family: Inter`);
 });
 
-test('accepts other variant than default', () => {
+test('allows to change variants via `variant` prop (with "text" prefix)', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" title="link" variant="second">
+      <Link href="#!" variant="second">
         Link
       </Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link).toHaveStyle(`font-family: Oswald`);
 });
 
-test('renders correct HTML element', () => {
+test('renders a <a> element by default', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" title="link">
-        Link
-      </Link>
+      <Link href="#!">Link</Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link instanceof HTMLAnchorElement).toBeTruthy();
 });
 
-test('accepts custom styles prop className', () => {
+test('accepts custom className', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Link href="#!" className="custom-class-name" title="link">
-        link
+      <Link href="#!" className="custom-class-name">
+        Link
       </Link>
     </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
   expect(link.className).toMatch('custom-class-name');
 });
+
+test('accepts other routing components', () => {
+  const RouterLink = React.forwardRef<
+    HTMLSpanElement,
+    { to: string; children?: React.ReactNode }
+  >(() => <span>I am a Router Link!</span>);
+
+  render(
+    <ThemeProvider theme={theme}>
+      <Link as={RouterLink} to="/Home">
+        Link
+      </Link>
+    </ThemeProvider>
+  );
+
+  const link = screen.getByText('I am a Router Link!');
+  expect(link).toBeTruthy();
+});
+
+test('a link can be disabled via aria attributes', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Link href="#!" disabled={true}>
+        Link
+      </Link>
+    </ThemeProvider>
+  );
+  const link = screen.getByText(/Link/);
+  expect(link.getAttribute('aria-disabled')).toEqual('true');
+});

package/src/Link/Link.tsx

@@ -1,22 +1,42 @@
-import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import React, { useRef } from 'react';
+import { useLink } from '@react-aria/link';
+import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
 
-type LinkProps = {
-  variant?: string;
-};
+import { Text, TextOwnProps } from '../Text';
 
-export const Link = system<LinkProps, 'a'>(
-  ({ variant = 'normal', children, className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `link.${variant}`,
-      },
-      className
-    );
-    return (
-      <a className={classNames} {...props}>
-        {children}
-      </a>
-    );
-  }
-);
+// 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',
+  children,
+  disabled,
+  ...props
+}: LinkProps) => {
+  const ref = useRef<any>();
+  const { linkProps } = useLink(
+    {
+      ...props,
+      elementType: typeof as === 'string' ? as : 'span',
+      isDisabled: disabled,
+    },
+    ref
+  );
+
+  return (
+    <Text {...props} {...linkProps} as={as} variant={variant} ref={ref}>
+      {children}
+    </Text>
+  );
+}) as PolymorphicComponent<LinkOwnProps, 'a'>;

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

@@ -1,15 +1,21 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Menu, MenuItem } from '@marigold/components';
+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',
     },
   },
 };
@@ -30,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>