@marigold/components 0.2.0 → 0.3.3

package/src/Columns/Columns.stories.mdx

@@ -1,65 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Column, Columns, Text } from '@marigold/components';
-
-<Meta
-  title="Components/Columns"
-  argTypes={{
-    space: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 96,
-        step: 2,
-      },
-      description: 'Absolute space value',
-      table: {
-        defaultValue: {
-          summary: 0,
-        },
-      },
-    },
-    horizontalAlign: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'right', 'center'],
-      description: 'where to place',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
-    },
-    verticalAlign: {
-      control: {
-        type: 'select',
-      },
-      options: ['top', 'bottom', 'center'],
-      description: 'where to place',
-      table: {
-        defaultValue: {
-          summary: 'top',
-        },
-      },
-    },
-  }}
-/>
-
-# Columns
-
-export const Template = args => (
-  <Columns {...args}>
-    <Column width={6}>
-      <Text>First column</Text>
-    </Column>
-    <Column width={6}>
-      <Text>Second column</Text>
-    </Column>
-  </Columns>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Container/Container.stories.mdx

@@ -1,19 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Container } from './Container';
-import { Text } from '../Text';
-
-<Meta title="Components/Container" />
-
-# Container
-
-export const Template = args => (
-  <Container {...args}>
-    <Text>Container with width=100%</Text>
-  </Container>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Divider/Divider.stories.mdx

@@ -1,37 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Divider } from './Divider';
-import { Text } from '../Text';
-
-<Meta
-  title="Components/Divider"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['regular', 'bold'],
-      description: 'Thick or thin line',
-      table: {
-        defaultValue: {
-          summary: 'regular',
-        },
-      },
-    },
-  }}
-/>
-
-# Divider
-
-export const Template = args => (
-  <div>
-    <Text>Above</Text>
-    <Divider {...args} />
-    <Text>Below</Text>
-  </div>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Heading/Heading.stories.mdx

@@ -1,39 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Heading } from './Heading';
-import { Text } from '../Text';
-
-<Meta
-  title="Components/Heading"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      description: 'HTML element style',
-      table: {
-        defaultValue: {
-          summary: 'h2',
-        },
-      },
-    },
-  }}
-/>
-
-# Heading
-
-export const Template = args => (
-  <div>
-    <Heading {...args}>Heading</Heading>
-    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-          dignissim dapibus elit, vel egestas felis pharetra non. Cras
-          malesuada, massa nec ultricies efficitur, lectus ante consequat magna,
-          a porttitor massa ex ut quam.</Text>
-  </div>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Heading/Heading.test.tsx

@@ -1,77 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Heading } from './Heading';
-
-const theme = {
-  text: {
-    h2: {
-      fontFamily: 'Inter',
-    },
-    h3: {
-      fontFamily: 'Roboto',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Heading title="default">Default</Heading>
-    </ThemeProvider>
-  );
-  const heading = screen.getByTitle(/default/);
-
-  expect(heading).toHaveStyle(`font-family: Inter`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Heading title="default" variant="h3">
-        Default
-      </Heading>
-    </ThemeProvider>
-  );
-  const heading = screen.getByTitle(/default/);
-
-  expect(heading).toHaveStyle(`font-family: Roboto`);
-});
-
-test('supports default as prop', () => {
-  render(<Heading title="default">Default</Heading>);
-  const heading = screen.getByTitle(/default/);
-
-  expect(heading.tagName).toEqual('H2');
-});
-
-test('accepts other as prop than default', () => {
-  render(
-    <Heading as="h3" title="default" variant="h3">
-      Default
-    </Heading>
-  );
-  const heading = screen.getByTitle(/default/);
-
-  expect(heading.tagName).toEqual('H3');
-});
-
-test('renders correct HTML element', () => {
-  render(<Heading title="default">Default</Heading>);
-  const heading = screen.getByTitle(/default/);
-
-  expect(heading instanceof HTMLHeadingElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Heading className="custom-class-name" title="heading">
-        Default
-      </Heading>
-    </ThemeProvider>
-  );
-  const heading = screen.getByTitle(/heading/);
-
-  expect(heading.className).toMatch('custom-class-name');
-});

package/src/Heading/Heading.tsx

@@ -1,19 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-import { Box } from '../Box';
-
-export type HeadingProps = {
-  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-  variant?: string;
-} & ComponentProps<'h1'>;
-
-export const Heading: React.FC<HeadingProps> = ({
-  as = 'h2',
-  variant = 'h2',
-  children,
-  ...props
-}) => (
-  <Box {...props} as={as} variant={`text.${variant}`}>
-    {children}
-  </Box>
-);

package/src/Heading/index.ts

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

package/src/Hidden/Hidden.stories.mdx

@@ -1,39 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Hidden } from './Hidden';
-import { Text } from '../Text';
-
-<Meta
-  title="Components/Hidden"
-  argTypes={{
-    show: {
-      control: {
-        type: 'boolean',
-      },
-      options: [true, false],
-      description: 'Show or hide',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  }}
-/>
-
-# Hidden
-
-export const Template = args => (
-  <div>
-    <Text>Change the "show" switch to "true"</Text>
-    <Hidden {...args}>
-      <br />
-      <Text>Hello here I am!</Text>
-    </Hidden>
-  </div>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Hidden/Hidden.test.tsx

@@ -1,24 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Hidden } from './Hidden';
-
-test('text is not visible, show prop = false', () => {
-  render(<Hidden>Default</Hidden>);
-  const hidden = screen.getByText('Default');
-
-  expect(hidden).not.toBeVisible();
-});
-
-test('support show prop = true', () => {
-  render(<Hidden show={true}>Default</Hidden>);
-  const hidden = screen.getByText('Default');
-
-  expect(hidden).toBeVisible();
-});
-
-test('renders correct HTML element', () => {
-  render(<Hidden>Default</Hidden>);
-  const hidden = screen.getByText('Default');
-
-  expect(hidden instanceof HTMLSpanElement).toBeTruthy();
-});

package/src/Hidden/Hidden.tsx

@@ -1,16 +0,0 @@
-import React from 'react';
-import { Box } from '../Box';
-
-export type HiddenProps = {
-  show?: boolean;
-};
-
-export const Hidden: React.FC<HiddenProps> = ({
-  show = false,
-  children,
-  ...props
-}) => (
-  <Box {...props} as="span" display={show ? 'display' : 'none'}>
-    {children}
-  </Box>
-);

package/src/Hidden/index.ts

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

package/src/Image/Image.stories.mdx

@@ -1,36 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Image } from './Image';
-import image1 from '../../../images/src/type_logo.png';
-
-<Meta
-  title="Components/Image"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'there is only one variant',
-      table: {
-        defaultValue: {
-          summary: 'fullWidth',
-        },
-      },
-    },
-    alt: {
-      control: {
-        type: 'text',
-      },
-      description: 'Description text for screenreaders'
-    },
-  }}
-/>
-
-# Image
-
-export const Template = args => <Image src={image1} alt="marigold_logo" />;
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Link/Link.stories.mdx

@@ -1,45 +0,0 @@
-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
-
-export const Template = args => (
-  <Text>
-    <Link href="https://marigold-ui.io" target="_blank">
-      Cool site
-    </Link>
-  </Text>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/MenuItem/MenuItem.stories.mdx

@@ -1,37 +0,0 @@
-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/Message/Message.stories.mdx

@@ -1,44 +0,0 @@
-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" />

package/src/Radio/RadioIcons.tsx

@@ -1,39 +0,0 @@
-import React from 'react';
-import { SVG } from '@marigold/icons';
-
-import { Box } from '../Box';
-
-export const RadioChecked = ({ disabled = false, ...props }) => (
-  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
-    <Box
-      as="circle"
-      cx="8"
-      cy="16"
-      r="7.5"
-      variant={disabled ? 'radio.checked.disabled' : 'radio.checked'}
-    />
-    <Box as="circle" cx="8" cy="16" r="3" variant="radio.checked.circle" />
-  </SVG>
-);
-
-export const RadioUnchecked = ({
-  disabled = false,
-  error = false,
-  ...props
-}) => (
-  <SVG width="16" height="32" viewBox="0 0 16 32" fill="none" {...props}>
-    <Box
-      as="circle"
-      cx="8"
-      cy="16"
-      r="7.5"
-      variant={
-        disabled
-          ? 'radio.unchecked.disabled'
-          : error
-          ? 'radio.unchecked.error'
-          : 'radio.unchecked'
-      }
-    />
-  </SVG>
-);

package/src/Slider/Slider.stories.mdx

@@ -1,31 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Slider } from './Slider';
-
-<Meta
-  title="Components/Slider"
-  argTypes={{
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Style',
-      table: {
-        defaultValue: {
-          summary: 'slider',
-        },
-      },
-    },
-  }}
-/>
-
-# Slider
-
-export const Template = args => (
-  <Slider name="vol" min="0" max="50" {...args} />
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

package/src/Stack/Stack.stories.mdx

@@ -1,51 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Heading } from '../Heading';
-import { Stack } from './Stack';
-import { Text } from '../Text';
-
-<Meta
-  title="Components/Stack"
-  argTypes={{
-    space: {
-      control: {
-        type: 'text',
-      },
-      description: 'Responsive Style Value',
-      table: {
-        defaultValue: {
-          summary: '0',
-        },
-      },
-    },
-    align: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'right', 'center'],
-      description: 'HTML element style',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
-    },
-  }}
-/>
-
-# Stack
-
-export const Template = args => (
-  <Stack {...args}>
-    <Heading>Heading</Heading>
-    <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-          dignissim dapibus elit, vel egestas felis pharetra non. Cras
-          malesuada, massa nec ultricies efficitur, lectus ante consequat magna,
-          a porttitor massa ex ut quam.</Text>
-  </Stack>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />