@marigold/components 0.3.0 → 0.4.0

package/src/MenuItem/MenuItem.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { MenuItem } from './MenuItem';
-
-export default {
-  title: 'Components/MenuItem',
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof MenuItem> = args => (
-  <MenuItem href="#" {...args}>
-    Home
-  </MenuItem>
-);

package/src/MenuItem/MenuItem.test.tsx

@@ -1,68 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { MenuItem } from './MenuItem';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 4,
-    medium: 8,
-  },
-  menuItem: {
-    default: {
-      padding: 'small',
-    },
-    item: {
-      padding: 'medium',
-    },
-  },
-};
-
-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

@@ -1,35 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-import { Link } from '../Link';
-import { Box } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface MenuItemThemeExtension<Value> {
-  menuItem?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type MenuItemProps = {
-  variant?: string;
-} & ComponentProps<typeof Link>;
-
-// Component
-// ---------------
-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

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

package/src/Message/Message.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Message } from './Message';
-import { Text } from '../Text';
-
-export default {
-  title: 'Components/Message',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['warning', 'error', 'info'],
-      description: 'Messaging in different colors and icons',
-    },
-    messageTitle: {
-      control: {
-        type: 'text',
-      },
-      description: 'Content',
-      defaultValue: 'Danger Zone!',
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Message> = args => (
-  <Message {...args}>
-    <Text>Hello, I am a simple message.</Text>
-  </Message>
-);

package/src/Message/Message.test.tsx

@@ -1,90 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Message } from './Message';
-
-const theme = {
-  colors: {
-    primary: 'hotpink',
-  },
-  message: {
-    info: {
-      alignItems: 'center',
-    },
-    warning: {
-      alignItems: 'right',
-    },
-    error: {
-      alignItems: 'left',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Message data-testid="messages" messageTitle="Default">
-        Default
-      </Message>
-    </ThemeProvider>
-  );
-  const message = screen.getByTestId(/messages/);
-
-  expect(message).toHaveStyle(`align-items: center`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Message data-testid="messages" messageTitle="info" variant="warning">
-        Danger
-      </Message>
-    </ThemeProvider>
-  );
-  const message = screen.getByTestId(/messages/);
-
-  expect(message).toHaveStyle(`align-items: right`);
-});
-
-test('accepts other third variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Message data-testid="messages" messageTitle="error" variant="error">
-        error
-      </Message>
-    </ThemeProvider>
-  );
-  const message = screen.getByTestId(/messages/);
-
-  expect(message).toHaveStyle(`align-items: left`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Message data-testid="messages" messageTitle="messages">
-        Default
-      </Message>
-    </ThemeProvider>
-  );
-  const message = screen.getByTestId(/messages/);
-
-  expect(message instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Message
-        className="custom-class-name"
-        data-testid="message"
-        messageTitle="message"
-      >
-        message
-      </Message>
-    </ThemeProvider>
-  );
-  const message = screen.getByTestId(/message/);
-
-  expect(message.className).toMatch('custom-class-name');
-});

package/src/Message/Message.tsx

@@ -1,55 +0,0 @@
-import React from 'react';
-import { Exclamation, Info, Notification } from '@marigold/icons';
-import { ComponentProps } from '@marigold/types';
-import { Box } from '../Box';
-import { Text } from '../Text';
-
-// Theme Extension
-// ---------------
-export interface MessageThemeExtension<Value> {
-  message?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type MessageProps = {
-  messageTitle: string;
-  variant?: string;
-} & ComponentProps<'div'>;
-
-// Component
-// ---------------
-export const Message: React.FC<MessageProps> = ({
-  messageTitle,
-  variant = 'info',
-  className,
-  children,
-  ...props
-}) => {
-  var icon = <Info />;
-  if (variant === 'warning') {
-    icon = <Notification />;
-  }
-  if (variant === 'error') {
-    icon = <Exclamation />;
-  }
-
-  return (
-    <Box
-      display="inline-block"
-      variant={`message.${variant}`}
-      className={className}
-      {...props}
-    >
-      <Box display="flex" alignItems="center" variant="message.title">
-        {icon}
-        <Text as="h4" variant="headline4">
-          {messageTitle}
-        </Text>
-      </Box>
-      <Box css={{ color: 'black' }}>{children}</Box>
-    </Box>
-  );
-};

package/src/Message/index.ts

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

package/src/Provider/MarigoldProvider.test.tsx

@@ -1,136 +0,0 @@
-import React from 'react';
-import { useTheme } from '@marigold/system';
-import { render, screen } from '@testing-library/react';
-
-import { MarigoldProvider } from './MarigoldProvider';
-
-// Setup
-// ---------------
-const theme = {
-  colors: {
-    black: '#000',
-  },
-  fontSizes: {
-    body: 16,
-    heading: 32,
-  },
-  text: {
-    body: {
-      fontSize: 'body',
-      color: 'black',
-    },
-  },
-};
-
-test('themes can be cascaded', () => {
-  const outerTheme = {
-    colors: {
-      primary: 'coral',
-    },
-  };
-
-  const innerTheme = {
-    colors: {
-      primary: 'gainsboro',
-    },
-  };
-
-  const Theme = ({ testId }: { testId: string }) => {
-    const { theme } = useTheme();
-    return <div data-testid={testId}>{JSON.stringify(theme, null, 2)}</div>;
-  };
-
-  render(
-    <MarigoldProvider theme={outerTheme}>
-      <>
-        <Theme testId="outer" />
-        <MarigoldProvider theme={innerTheme}>
-          <Theme testId="inner" />
-        </MarigoldProvider>
-      </>
-    </MarigoldProvider>
-  );
-
-  const outer = screen.getByTestId('outer');
-  const inner = screen.getByTestId('inner');
-
-  expect(outer.innerHTML).toMatchInlineSnapshot(`
-    "{
-      \\"colors\\": {
-        \\"primary\\": \\"coral\\"
-      }
-    }"
-  `);
-  expect(inner.innerHTML).toMatchInlineSnapshot(`
-    "{
-      \\"colors\\": {
-        \\"primary\\": \\"gainsboro\\"
-      }
-    }"
-  `);
-});
-
-test('OverlayProvider is added', () => {
-  const { container } = render(
-    <MarigoldProvider theme={theme}>Test</MarigoldProvider>
-  );
-
-  expect(
-    container.querySelector(`div[data-overlay-container="true"]`)
-  ).toBeDefined();
-});
-
-test('OverlayProvider is added only once', () => {
-  const innerTheme = { colors: { primary: 'red' } };
-  const { container } = render(
-    <MarigoldProvider theme={theme}>
-      <MarigoldProvider theme={innerTheme}>Test</MarigoldProvider>
-    </MarigoldProvider>
-  );
-
-  expect(
-    container.querySelectorAll(`div[data-overlay-container="true"]`).length
-  ).toEqual(1);
-});
-
-test('applies global styles for body and html based on `theme.root`', () => {
-  const theme = {
-    fonts: {
-      body: 'Inter',
-      html: 'Roboto',
-    },
-    lineHeights: {
-      body: 2.5,
-    },
-    fontWeights: {
-      body: 500,
-      html: 700,
-    },
-    root: {
-      body: {
-        fontFamily: 'body',
-        lineHeight: 'body',
-        fontWeight: 'body',
-      },
-      html: {
-        fontFamily: 'html',
-        fontWeight: 'html',
-      },
-    },
-  };
-
-  const root = render(
-    <MarigoldProvider theme={theme}>
-      <h1>Hello</h1>
-    </MarigoldProvider>
-  );
-
-  const html = root.baseElement.parentElement;
-  expect(html).toHaveStyle(`font-family: ${theme.fonts.html}`);
-  expect(html).toHaveStyle(`font-weight: ${theme.fontWeights.html}`);
-
-  const body = root.baseElement;
-  expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
-  expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
-  expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
-});

package/src/Provider/MarigoldProvider.tsx

@@ -1,47 +0,0 @@
-import React from 'react';
-import { OverlayProvider } from '@react-aria/overlays';
-import {
-  Theme,
-  Global,
-  ThemeProvider,
-  ThemeProviderProps,
-  useTheme,
-  __defaultTheme,
-} from '@marigold/system';
-
-// Theme Extension
-// ---------------
-export interface RootThemeExtension<Value> {
-  root?: {
-    body?: Value;
-    html?: Value;
-  };
-}
-
-// Props
-// ---------------
-export interface MarigoldProviderProps<T extends Theme>
-  extends ThemeProviderProps<T> {}
-
-// Provider
-// ---------------
-export function MarigoldProvider<T extends Theme>({
-  theme,
-  children,
-}: MarigoldProviderProps<T>) {
-  const outer = useTheme();
-  const isTopLevel = outer.theme === __defaultTheme;
-
-  return (
-    <ThemeProvider theme={theme}>
-      {isTopLevel ? (
-        <>
-          <Global />
-          <OverlayProvider>{children}</OverlayProvider>
-        </>
-      ) : (
-        children
-      )}
-    </ThemeProvider>
-  );
-}

package/src/Provider/index.ts

@@ -1,4 +0,0 @@
-export { useTheme, ThemeProvider } from '@marigold/system';
-export { SSRProvider } from '@react-aria/ssr';
-
-export * from './MarigoldProvider';

package/src/Radio/Radio.stories.mdx

@@ -1,97 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Radio } from './Radio';
-import { useState } from 'react';
-
-<Meta
-  title="Components/Radio"
-  parameters={{
-    actions: {
-      handles: ['click'],
-    },
-  }}
-  argTypes={{
-    id: {
-      control: {
-        type: 'text',
-      },
-      type: { required: true },
-      description: 'Unique ID',
-    },
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Radio variant',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-    labelVariant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Radio label variant',
-      table: {
-        defaultValue: {
-          summary: 'inline',
-        },
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Label',
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Require',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Error',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-      description: 'Error Message',
-    },
-  }}
-/>
-
-# Radio
-
-export const Template = ({ onChange, checked, ...args }) => {
-  const [isChecked, setChecked] = useState(false);
-  return (
-    <Radio
-      onChange={() => setChecked(!isChecked)}
-      checked={isChecked}
-      label="Radio Label"
-      {...args}
-    />
-  );
-};
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />