@marigold/components 0.2.0 → 0.3.0

package/src/Box/Box.tsx

@@ -1,165 +0,0 @@
-import React, { forwardRef } from 'react';
-import { CSSObject, Element, ResponsiveStyleValue } from '@marigold/system';
-import {
-  PolymorphicPropsWithRef,
-  PolymorphicComponentWithRef,
-} from '@marigold/types';
-
-export type BoxOwnProps = {
-  className?: string;
-  variant?: string | string[];
-  css?: CSSObject;
-
-  display?: ResponsiveStyleValue<string>;
-
-  height?: ResponsiveStyleValue<number | string>;
-  width?: ResponsiveStyleValue<number | string>;
-  minWidth?: ResponsiveStyleValue<number | string>;
-  maxWidth?: ResponsiveStyleValue<number | string>;
-
-  position?: ResponsiveStyleValue<string>;
-  top?: ResponsiveStyleValue<number | string>;
-  bottom?: ResponsiveStyleValue<number | string>;
-  right?: ResponsiveStyleValue<number | string>;
-  left?: ResponsiveStyleValue<number | string>;
-  zIndex?: ResponsiveStyleValue<number | string>;
-
-  p?: ResponsiveStyleValue<number | string>;
-  px?: ResponsiveStyleValue<number | string>;
-  py?: ResponsiveStyleValue<number | string>;
-  pt?: ResponsiveStyleValue<number | string>;
-  pb?: ResponsiveStyleValue<number | string>;
-  pl?: ResponsiveStyleValue<number | string>;
-  pr?: ResponsiveStyleValue<number | string>;
-
-  m?: ResponsiveStyleValue<number | string>;
-  mx?: ResponsiveStyleValue<number | string>;
-  my?: ResponsiveStyleValue<number | string>;
-  mt?: ResponsiveStyleValue<number | string>;
-  mb?: ResponsiveStyleValue<number | string>;
-  ml?: ResponsiveStyleValue<number | string>;
-  mr?: ResponsiveStyleValue<number | string>;
-
-  flexDirection?: ResponsiveStyleValue<string>;
-  flexWrap?: ResponsiveStyleValue<string>;
-  flexShrink?: ResponsiveStyleValue<number | string>;
-  flexGrow?: ResponsiveStyleValue<number | string>;
-  alignItems?: ResponsiveStyleValue<string>;
-  justifyContent?: ResponsiveStyleValue<string>;
-
-  bg?: ResponsiveStyleValue<number | string>;
-  border?: ResponsiveStyleValue<number | string>;
-  borderRadius?: ResponsiveStyleValue<number | string>;
-  boxShadow?: ResponsiveStyleValue<number | string>;
-  opacity?: ResponsiveStyleValue<number | string>;
-  overflow?: ResponsiveStyleValue<string>;
-
-  transition?: ResponsiveStyleValue<number | string>;
-};
-
-export type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
-
-export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
-  (
-    {
-      variant,
-      as = 'div',
-      css,
-      children,
-      className,
-      display,
-      height,
-      width,
-      minWidth,
-      maxWidth,
-      position,
-      top,
-      bottom,
-      right,
-      left,
-      zIndex,
-      p,
-      px,
-      py,
-      pt,
-      pb,
-      pl,
-      pr,
-      m,
-      mx,
-      my,
-      mt,
-      mb,
-      ml,
-      mr,
-      flexDirection,
-      flexWrap,
-      flexShrink,
-      flexGrow,
-      alignItems,
-      justifyContent,
-      bg,
-      border,
-      borderRadius,
-      boxShadow,
-      opacity,
-      overflow,
-      transition,
-      ...props
-    },
-    ref
-  ) => (
-    <Element
-      as={as}
-      ref={ref}
-      variant={variant}
-      css={{
-        ...{
-          display,
-          height,
-          width,
-          minWidth,
-          maxWidth,
-          position,
-          top,
-          bottom,
-          right,
-          left,
-          zIndex,
-          p,
-          px,
-          py,
-          pt,
-          pb,
-          pl,
-          pr,
-          m,
-          mx,
-          my,
-          mt,
-          mb,
-          ml,
-          mr,
-          flexDirection,
-          flexWrap,
-          flexShrink,
-          flexGrow,
-          alignItems,
-          justifyContent,
-          bg,
-          border,
-          borderRadius,
-          boxShadow,
-          opacity,
-          overflow,
-          transition,
-        },
-        ...css,
-      }}
-      className={className}
-      {...props}
-    >
-      {children}
-    </Element>
-  )
-);

package/src/Box/index.ts

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

package/src/Column/Column.stories.mdx

@@ -1,49 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Column } from './Column';
-import { Text } from '../Text';
-import { useStyles } from '@marigold/system';
-
-<Meta
-  title="Components/Column"
-  argTypes={{
-    width: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 12,
-        step: 1,
-      },
-      description: 'Absolute width in 12 grid',
-      table: {
-        defaultValue: {
-          summary: 12,
-        },
-      },
-    },
-  }}
-/>
-
-# Column
-
-export const Template = args => (
-  <Column
-    className={useStyles({
-      css: {
-        textAlign: 'center',
-        border: '1px solid red',
-        padding: 2,
-        margin: 2,
-      },
-    })}
-    width={12}
-    {...args}
-  >
-    <Text>full width</Text>
-  </Column>
-);
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />

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/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" />