@marigold/components 0.3.2 → 0.5.0

package/src/Input/Input.test.tsx

@@ -1,74 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Input } from './Input';
-
-const theme = {
-  fonts: {
-    body: 'Inter',
-    forms: 'Roboto',
-  },
-  input: {
-    __default: {
-      fontFamily: 'body',
-    },
-    input2: {
-      fontFamily: 'forms',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Input title="input" />
-    </ThemeProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).toHaveStyle(`font-family: Inter`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Input title="input" variant="input2" />
-    </ThemeProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).toHaveStyle(`font-family: Roboto`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Input title="input" />
-    </ThemeProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input instanceof HTMLInputElement).toBeTruthy();
-});
-
-test('supports custom prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Input title="input" placeholder="placeholder" />
-    </ThemeProvider>
-  );
-  const input = screen.getByTitle('input');
-
-  expect(input).toHaveAttribute('placeholder');
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Input className="custom-class-name" title="input" />
-    </ThemeProvider>
-  );
-  const input = screen.getByTitle(/input/);
-
-  expect(input.className).toMatch('custom-class-name');
-});

package/src/Input/Input.tsx

@@ -1,25 +0,0 @@
-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 = '',
-  type = 'text',
-  ...props
-}) => <Box {...props} as="input" type={type} variant={`input.${variant}`} />;

package/src/Input/index.ts

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

package/src/Label/Label.stories.tsx

@@ -1,41 +0,0 @@
-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

@@ -1,109 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Label } from './Label';
-
-const theme = {
-  fonts: {
-    body: 'Inter Regular',
-    label: 'Oswald',
-  },
-  label: {
-    above: {
-      fontFamily: 'body',
-    },
-    myLabel: {
-      fontFamily: 'label',
-    },
-  },
-  colors: {
-    text: 'black',
-    disabled: 'gray',
-  },
-};
-
-test('supports default variant and styles', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId">label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  expect(label).toHaveStyle(`font-family: Inter Regular`);
-  expect(label).toHaveStyle(`color: black`);
-});
-
-test('supports other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId" variant="myLabel">
-        label
-      </Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  expect(label).toHaveStyle(`font-family: Oswald`);
-});
-
-test('supports htmlFor prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId">label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  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}>
-      <Label htmlFor="labelId">label</Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/label/);
-
-  expect(label instanceof HTMLLabelElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Label htmlFor="labelId" className="custom-class-name" title="label">
-        label
-      </Label>
-    </ThemeProvider>
-  );
-  const label = screen.getByTitle(/label/);
-
-  expect(label.className).toMatch('custom-class-name');
-});

package/src/Label/Label.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-
-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>
-  );
-};
-
-// 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/Label/index.ts

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

package/src/Link/Link.stories.tsx

@@ -1,35 +0,0 @@
-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,97 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Link } from './Link';
-
-const theme = {
-  fonts: {
-    link: 'Inter',
-    body: 'Oswald',
-  },
-  text: {
-    link: {
-      fontFamily: 'link',
-    },
-    second: {
-      fontFamily: 'body',
-    },
-  },
-};
-
-test('uses `text.link` as default variant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Link href="#!">Link</Link>
-    </ThemeProvider>
-  );
-  const link = screen.getByText(/Link/);
-
-  expect(link).toHaveStyle(`font-family: Inter`);
-});
-
-test('allows to change variants via `variant` prop (with "text" prefix)', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Link href="#!" variant="second">
-        Link
-      </Link>
-    </ThemeProvider>
-  );
-  const link = screen.getByText(/Link/);
-
-  expect(link).toHaveStyle(`font-family: Oswald`);
-});
-
-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(
-    <ThemeProvider theme={theme}>
-      <Link href="#!" className="custom-class-name">
-        Link
-      </Link>
-    </ThemeProvider>
-  );
-  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,43 +0,0 @@
-import React, { useRef } from 'react';
-import { useLink } from '@react-aria/link';
-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',
-  children,
-  disabled,
-  ...props
-}: LinkProps) => {
-  const ref = useRef<any>();
-  const { linkProps } = useLink(
-    {
-      // 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,
-    },
-    ref
-  );
-
-  return (
-    <Text {...props} {...linkProps} as={as} variant={variant} ref={ref}>
-      {children}
-    </Text>
-  );
-}) as PolymorphicComponent<LinkOwnProps, 'a'>;

package/src/Link/index.ts

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

package/src/Menu/Menu.stories.tsx

@@ -1,62 +0,0 @@
-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,84 +0,0 @@
-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 = {
-  space: {
-    none: 0,
-    small: 4,
-    medium: 8,
-  },
-  menu: {
-    default: {
-      padding: 'small',
-    },
-    custom: {
-      padding: 'medium',
-    },
-  },
-};
-
-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

@@ -1,51 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-
-import { Button } from '../Button';
-import { Box } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface MenuThemeExtension<Value> {
-  menu?: Value;
-}
-
-// Props
-// ---------------
-export type MenuProps = {
-  variant?: string;
-  label?: string;
-  onClick: ComponentProps<typeof Button>['onClick'];
-  show?: boolean;
-  className?: string;
-  title?: string; // For testing
-};
-
-// Component
-// ---------------
-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

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