@marigold/components 0.0.1 → 0.2.0

package/src/Link/Link.stories.mdx

@@ -1,36 +1,45 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Link, Text } from '@marigold/components';
-
-<Meta title="Components/Link" />
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Link } from './Link';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Link"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'link',
+        },
+      },
+    },
+    href: {
+      control: {
+        type: 'text',
+      },
+      description: 'The URL to direct to',
+      type: {
+        required: true,
+      },
+    },
+  }}
+/>
 
 # Link
 
-## Description
-
-Element to style links.
-
-## Properties
-
-| Property             | Type                    | Default  |
-| :------------------- | :---------------------- | :------- |
-| `href`               | string                  |          |
-
-## Import
-
-```tsx
-import { Link } from '@marigold/components';
-```
+export const Template = args => (
+  <Text>
+    <Link href="https://marigold-ui.io" target="_blank">
+      Cool site
+    </Link>
+  </Text>
+);
 
-## Usage
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
 
-<Preview>
-  <Story name="Link">
-    <Text>
-      Link something nice like{' '}
-      <Link href="#!" target="_blank">
-        Marigold
-      </Link>{' '}
-      in text.
-    </Text>
-  </Story>
-</Preview>
+<ArgsTable story="Default" />

package/src/Link/Link.test.tsx

@@ -1,10 +1,10 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
-import { Link } from '@marigold/components';
+import { ThemeProvider } from '@marigold/system';
+import { Link } from './Link';
 
 const theme = {
-  link: {
+  text: {
     link: {
       fontFamily: 'Inter',
     },
@@ -14,55 +14,80 @@ const theme = {
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('uses `text.link` as default variant', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Link href="#!" title="link">
-        Link
-      </Link>
-    </MarigoldProvider>
+    <ThemeProvider theme={theme}>
+      <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(
-    <MarigoldProvider theme={theme}>
-      <Link href="#!" title="link" variant="second">
+    <ThemeProvider theme={theme}>
+      <Link href="#!" variant="second">
         Link
       </Link>
-    </MarigoldProvider>
+    </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="#!">Link</Link>
+    </ThemeProvider>
+  );
+  const link = screen.getByText(/Link/);
+
+  expect(link instanceof HTMLAnchorElement).toBeTruthy();
+});
+
+test('accepts custom className', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Link href="#!" title="link">
+    <ThemeProvider theme={theme}>
+      <Link href="#!" className="custom-class-name">
         Link
       </Link>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
+  const link = screen.getByText(/Link/);
 
-  expect(link).toContainHTML('<a href=');
+  expect(link.className).toMatch('custom-class-name');
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('accepts other routing components', () => {
+  const RouterLink = React.forwardRef<
+    HTMLSpanElement,
+    { to: string; children?: React.ReactNode }
+  >(() => <span>I am a Router Link!</span>);
+
   render(
-    <MarigoldProvider theme={theme}>
-      <Link href="#!" title="link" css={{ fontFamily: 'Roboto' }}>
+    <ThemeProvider theme={theme}>
+      <Link as={RouterLink} to="/Home">
         Link
       </Link>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
-  const link = screen.getByTitle(/link/);
 
-  expect(link).not.toHaveStyle(`font-family: Roboto`);
-  expect(link).toHaveStyle(`font-family: Inter`);
+  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,14 +1,32 @@
-import React from 'react';
-import { Box, system } from '@marigold/system';
-
-type LinkProps = {};
-
-export const Link = system<LinkProps, 'a'>(
-  ({ variant = 'link', children, ...props }) => {
-    return (
-      <Box as="a" variant={variant} themeSection="link" {...props}>
-        {children}
-      </Box>
-    );
-  }
-);
+import React, { useRef } from 'react';
+import { useLink } from '@react-aria/link';
+import { PolymorphicComponent, PolymorphicProps } from '@marigold/types';
+
+import { Text, TextOwnProps } from '../Text';
+
+export type LinkOwnProps = { disabled?: boolean } & TextOwnProps;
+export type LinkProps = PolymorphicProps<LinkOwnProps, 'a'>;
+
+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.mdx

@@ -0,0 +1,81 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Menu } from './Menu';
+import { MenuItem } from '../MenuItem';
+import { BurgerMenu } from '@marigold/icons';
+import { useState } from 'react';
+
+<Meta
+  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',
+      table: {
+        defaultValue: {
+          summary: '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',
+      type: { required: true },
+    },
+  }}
+/>
+
+# Menu
+
+export const Template = ({ onClick, ...args }) => {
+  const [showMenu, setShowMenu] = React.useState(false);
+  return (
+    <Menu
+      onClick={() => setShowMenu(!showMenu)}
+      show={showMenu}
+      label={<BurgerMenu />}
+      {...args}
+    >
+      <MenuItem href="#">Home</MenuItem>
+      <MenuItem href="#">Tickets</MenuItem>
+      <MenuItem href="#">Logout</MenuItem>
+    </Menu>
+  );
+};
+
+<Canvas>
+  <Story name="Mini menu">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Mini menu" />

package/src/Menu/Menu.test.tsx

@@ -0,0 +1,79 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Menu } from './Menu';
+import { MenuItem } from '../MenuItem';
+
+const theme = {
+  menu: {
+    default: {
+      padding: '4px',
+    },
+    custom: {
+      padding: '8px',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Menu title="menu" onClick={() => {}}>
+        <MenuItem href="#">Home</MenuItem>
+      </Menu>
+    </ThemeProvider>
+  );
+  const menu = screen.getByTitle(/menu/);
+
+  expect(menu).toHaveStyle(`padding: 4px`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Menu variant="custom" title="menu" onClick={() => {}}>
+        <MenuItem href="#">Home</MenuItem>
+      </Menu>
+    </ThemeProvider>
+  );
+  const menu = screen.getByTitle(/menu/);
+
+  expect(menu).toHaveStyle(`padding: 8px`);
+});
+
+test('supports show prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Menu show={true} title="menu" onClick={() => {}}>
+        <MenuItem href="#">Home</MenuItem>
+      </Menu>
+    </ThemeProvider>
+  );
+  const menu = screen.getByTitle(/menu/);
+
+  expect(menu).toHaveStyle(`display: block`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Menu title="menu" onClick={() => {}}>
+        <MenuItem href="#">Home</MenuItem>
+      </Menu>
+    </ThemeProvider>
+  );
+  const menu = screen.getByTitle(/menu/);
+
+  expect(menu instanceof HTMLDivElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <Menu title="menu" onClick={() => {}} className="custom-class-name">
+      <MenuItem href="#">Home</MenuItem>
+    </Menu>
+  );
+  const menu = screen.getByTitle(/menu/);
+
+  expect(menu.className).toMatch('custom-class-name');
+});

package/src/Menu/Menu.tsx

@@ -0,0 +1,41 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+
+import { Button } from '../Button';
+import { Box } from '../Box';
+
+export type MenuProps = {
+  variant?: string;
+  label?: string;
+  onClick: ComponentProps<typeof Button>['onClick'];
+  show?: boolean;
+  className?: string;
+  title?: string; // For testing
+};
+
+export const Menu: React.FC<MenuProps> = ({
+  variant = 'default',
+  label = 'Menu',
+  onClick,
+  show = false,
+  children,
+  ...props
+}) => {
+  return (
+    <Box variant={`menu.${variant}`} {...props}>
+      <Button onClick={onClick} variant="menu">
+        {label}
+      </Button>
+      {show ? (
+        <Box
+          display="block"
+          position="absolute"
+          minWidth="120px"
+          borderRadius="2px"
+        >
+          {children}
+        </Box>
+      ) : null}
+    </Box>
+  );
+};

package/src/Menu/index.ts

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

package/src/MenuItem/MenuItem.stories.mdx

@@ -0,0 +1,37 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Menu } from '../Menu';
+import { MenuItem } from './MenuItem';
+
+<Meta
+  title="Components/MenuItem"
+  parameters={{
+    actions: {
+      handles: ['click'],
+    },
+  }}
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+  }}
+/>
+
+# Menu Item
+
+export const Template = args => {
+  return <MenuItem href="#">Home</MenuItem>;
+};
+
+<Canvas>
+  <Story name="Menu Item">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Menu Item" />

package/src/MenuItem/MenuItem.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { MenuItem } from './MenuItem';
+
+const theme = {
+  menuItem: {
+    default: {
+      padding: '4px',
+    },
+    item: {
+      padding: '8px',
+    },
+  },
+};
+
+test('supports default variant', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <MenuItem title="menuItem">Item</MenuItem>
+    </ThemeProvider>
+  );
+  const menuItem = screen.getByTitle(/menuItem/);
+
+  expect(menuItem.parentElement).toHaveStyle(`padding: 4px`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <MenuItem title="menuItem" variant="item">
+        Item
+      </MenuItem>
+    </ThemeProvider>
+  );
+  const menuItem = screen.getByTitle(/menuItem/);
+
+  expect(menuItem.parentElement).toHaveStyle(`padding: 8px`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <MenuItem title="menuItem">Item</MenuItem>
+    </ThemeProvider>
+  );
+  const menuItem = screen.getByTitle(/menuItem/);
+
+  expect(menuItem instanceof HTMLAnchorElement).toBeTruthy();
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <MenuItem title="menuItem" className="custom-class-name">
+        Item
+      </MenuItem>
+    </ThemeProvider>
+  );
+  const menuItem = screen.getByText(/Item/).parentElement;
+
+  expect(menuItem).toHaveClass('custom-class-name');
+});

package/src/MenuItem/MenuItem.tsx

@@ -0,0 +1,23 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+import { Link } from '../Link';
+import { Box } from '../Box';
+
+export type MenuItemProps = {
+  variant?: string;
+} & ComponentProps<typeof Link>;
+
+export const MenuItem: React.FC<MenuItemProps> = ({
+  variant = 'default',
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <Box variant={`menuItem.${variant}`} className={className}>
+      <Link variant="menuItemLink" {...props}>
+        {children}
+      </Link>
+    </Box>
+  );
+};

package/src/MenuItem/index.ts

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

package/src/Message/Message.stories.mdx

@@ -0,0 +1,44 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Message } from './Message';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Message"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'select',
+      },
+      options: ['warning', 'error', 'info'],
+      description: 'Messaging in different colors and icons',
+      table: {
+        defaultValue: {
+          summary: 'info',
+        },
+      },
+    },
+    messageTitle: {
+      control: {
+        type: 'text',
+      },
+      description: 'Content',
+      type: {
+        required: true,
+      },
+    },
+  }}
+/>
+
+# Message
+
+export const Template = args => (
+  <Message messageTitle="Danger Zone!" {...args}>
+    <Text>Hello, I am a simple message.</Text>
+  </Message>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />