@marigold/components 0.0.3 → 0.3.1

package/src/Columns/Columns.stories.mdx

@@ -1,247 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Column, Columns, Divider, Text } from '@marigold/components';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Columns" />
-
-# Columns
-
-## Description
-
-With the Columns component you can add a bundle of column components by adding props to create a layout.
-
-## Properties
-
-| Property                     | Type                  | Default |
-| :--------------------------- | :-------------------- | :------ |
-| `space` (optional)           | `number`              | `0`     |
-| `horizontalAlign` (optional) | `left, right, center` | `left`  |
-| `verticalAlign` (optional)   | `top, bottom, center` | `top`   |
-
-## Import
-
-```tsx
-import { Columns } from '@marigold/components';
-```
-
-## Usage
-
-### Spacing
-
-<Canvas>
-  <Story name="Spacing">
-    <Columns space={24} className={useStyles({ bg: '#f3f3f3' })}>
-      <Column width={4}>
-        <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>
-      </Column>
-      <Column width={4}>
-        <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>
-      </Column>
-      <Column width={4}>
-        <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>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-
-### Width
-
-<Canvas>
-  <Story name="Width">
-    <Columns space={24} className={useStyles({ bg: '#f3f3f3' })}>
-      <Column
-        width={12}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=12</Text>
-      </Column>
-      <Column
-        width={6}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=6</Text>
-      </Column>
-      <Column
-        width={6}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=6</Text>
-      </Column>
-      <Column
-        width={4}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=4</Text>
-      </Column>
-      <Column
-        width={4}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=4</Text>
-      </Column>
-      <Column
-        width={4}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=4</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-      <Column
-        width={3}
-        className={useStyles({
-          border: '1px solid',
-          borderRadius: '4px',
-          padding: '4px',
-        })}
-      >
-        <Text>width=3</Text>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-
-### Horizontal Alignment
-
-<Canvas>
-  <Story name="horizantalAlign">
-    <Columns
-      space={24}
-      horizontalAlign="left"
-      className={useStyles({ bg: '#f3f3f3' })}
-    >
-      <Column width={1}>
-        <Text>left</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      space={24}
-      horizontalAlign="center"
-      className={useStyles({ bg: '#f3f3f3' })}
-    >
-      <Column width={1}>
-        <Text>center</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      space={24}
-      horizontalAlign="right"
-      className={useStyles({ bg: '#f3f3f3' })}
-    >
-      <Column width={1}>
-        <Text>right</Text>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>
-
-### Vertical Alignment
-
-<Canvas>
-  <Story name="verticalAlign">
-    <Columns
-      verticalAlign="top"
-      className={useStyles({
-        bg: '#f3f3f3',
-        height: '80px',
-      })}
-    >
-      <Column width={1}>
-        <Text>top</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      verticalAlign="center"
-      className={useStyles({
-        bg: '#f3f3f3',
-        height: '80px',
-      })}
-    >
-      <Column width={1}>
-        <Text>center</Text>
-      </Column>
-    </Columns>
-    <Divider />
-    <Columns
-      verticalAlign="bottom"
-      className={useStyles({
-        bg: '#f3f3f3',
-        height: '80px',
-      })}
-    >
-      <Column width={1}>
-        <Text>bottom</Text>
-      </Column>
-    </Columns>
-  </Story>
-</Canvas>

package/src/Container/Container.stories.mdx

@@ -1,36 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Container } from './Container';
-import { Text } from '../Text';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Container" />
-
-# Container
-
-## Description
-
-Primitive layout component to embed other elements.
-
-## Import
-
-```tsx
-import { Container } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Example 1">
-    <Container className={useStyles({ bg: 'gray' })}>
-      <Text>Example #1</Text>
-    </Container>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Example 2">
-    <Container className={useStyles({ bg: 'green', padding: 4, margin: 1 })}>
-      <Text>Example #2</Text>
-    </Container>
-  </Story>
-</Canvas>

package/src/Dialog/Dialog.stories.mdx

@@ -1,64 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { useStyles } from '@marigold/system';
-import { Dialog } from './Dialog';
-import { Heading } from '../Heading/';
-import { Text } from '../Text/';
-import { Button } from '../Button/';
-
-<Meta title="Components/Dialog" />
-
-# Dialog
-
-## Description
-
-Element to display a Dialog as a reaction to an event. The user style or fill the body of the dialog with content.
-
-## Properties
-
-| Property  | Type       | Default |
-| :-------- | :--------- | :------ |
-| `onClick` | `function` |         |
-
-## Import
-
-```tsx
-import { Dialog } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="basic">
-    <Dialog
-      title="Title"
-      className={useStyles({
-        background: '#f3f3f3',
-      })}
-    >
-      <Heading as="h4" variant="h4">
-        Dialog Title
-      </Heading>
-      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-      <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-    </Dialog>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="button">
-    <Dialog
-      title="Title"
-      className={useStyles({
-        border: '1px solid',
-      })}
-    >
-      <Heading as="h4" variant="h4">
-        Marigold
-      </Heading>
-      <Text>Do you love the marigold design system?</Text>
-      <br />
-      <Button variant="secondary.small">Agree</Button>
-    </Dialog>
-  </Story>
-</Canvas>

package/src/Divider/Divider.stories.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Divider } from './Divider';
-import { Text } from '../Text';
-
-<Meta title="Components/Divider" />
-
-# Divider
-
-## Description
-
-A divider is a layout or list element to group content or separate elements.
-The themeSection is `divider` and the variant can be added with the variant prop which is `regular` per default.
-
-## Properties
-
-| Property             | Type     | Default   |
-| :------------------- | :------- | :-------- |
-| `variant` (optional) | `string` | `regular` |
-
-## Import
-
-```tsx
-import { Divider } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Divider/regular">
-    <div>
-      <Text>Some text</Text>
-      <Divider />
-      <Text>Some other text to show regular divider</Text>
-    </div>
-  </Story>
-  <Story name="Divider/bold">
-    <div>
-      <Text>Some text</Text>
-      <Divider variant="bold" />
-      <Text>Some other text to show strong divider</Text>
-    </div>
-  </Story>
-</Canvas>

package/src/Field/Field.stories.mdx

@@ -1,57 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Field } from './Field';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Field" />
-
-# Field
-
-## Description
-
-With the Field component you can add a HTML `<label>` and `<input>` element to your form.
-The element uses always the themeSection with the name: `field` in your given theme. The variant in your section can be added with the variant prop.
-The default variant is `default`.
-
-## Properties
-
-| Property             | Type                                                                                       | Default   |
-| :------------------- | :----------------------------------------------------------------------------------------- | :-------- |
-| `variant` (optional) | `string`                                                                                   | `default` |
-| `htmlFor`            | `string`                                                                                   |           |
-| `label`              | `string`                                                                                   |           |
-| `error` (optional)   | `string`                                                                                   |           |
-| `type`               | `date, datetime-local, email, month, number, password, search, tel, text, time, url, week` | `text`    |
-
-## Import
-
-```tsx
-import { Field } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Field1">
-    <div>
-      <Field label="Firstname" htmlFor="myId" />
-      <br />
-      <Field label="Name" htmlFor="myId" error="Validation message" />
-    </div>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <Story name="Field2">
-    <div>
-      <Field
-        label="Pick your date"
-        type="date"
-        htmlFor="myId"
-        error="ERROR!"
-        className={useStyles({ color: '#dd4142' })}
-      />
-      <br />
-      <Field label="Choose the week" type="week" htmlFor="myId" />
-    </div>
-  </Story>
-</Canvas>

package/src/Heading/Heading.stories.mdx

@@ -1,91 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Heading } from './Heading';
-import { Text } from '../Text';
-
-<Meta title="Components/Heading" />
-
-# Heading
-
-## Description
-
-Use the Heading component for headings of texts. Predefined variants are `h1`, `h2`, `h3`, `h4`, `h5` and `h6`.
-
-## Properties
-
-| Property  | Type                               | Default |
-| :-------- | :--------------------------------- | :------ |
-| `as`      | `h1`, `h2`, `h3`, `h4`, `h5`, `h6` | `h2`    |
-| `variant` | `string`                           | `h2`    |
-
-## Import
-
-```tsx
-import { Heading } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="Headings">
-    <div>
-      <Heading as="h2" variant="h1">
-        H1 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading>H2 amazing heading</Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h3" variant="h3">
-        H3 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h4" variant="h4">
-        H4 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h5" variant="h5">
-        H5 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-      <Heading as="h6" variant="h6">
-        H6 amazing heading
-      </Heading>
-      <Text as="p" variant="heading">
-        Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy
-        eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam
-        voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet
-        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit
-        amet.
-      </Text>
-    </div>
-  </Story>
-</Canvas>

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';