@marigold/components 0.0.2 → 0.3.0

package/src/Heading/Heading.test.tsx

@@ -1,63 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Heading } from '@marigold/components';
-
-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('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Heading title="default">Default</Heading>
-    </ThemeProvider>
-  );
-  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,22 +0,0 @@
-import React from 'react';
-import { useStyles, system } from '@marigold/system';
-
-type HeadingProps = {
-  variant?: string;
-};
-
-export const Heading = system<HeadingProps, 'h2'>(
-  ({ variant = 'h2', children, className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `text.${variant}`,
-      },
-      className
-    );
-    return (
-      <h2 className={classNames} {...props}>
-        {children}
-      </h2>
-    );
-  }
-);

package/src/Heading/index.ts

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

package/src/Hidden/Hidden.stories.mdx

@@ -1,64 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Button, Hidden, Text } from '@marigold/components';
-import { useState } from 'react';
-
-<Meta title="Components/Layout/Hidden" />
-
-# Hidden
-
-## Description
-
-With the Hidden component you can hide elements or components. E.g. to hide some text in specific cases, for groups or platforms.
-The element uses always the themeSection with the name: `layout` in your given theme. The variant in your section can be added with the variant prop. The default variant is `hidden`.
-
-## Properties
-
-| Property             | Type      | Default  |
-| :------------------- | :-------- | :------- |
-| `variant` (optional) | `string`  | `hidden` |
-| `show` (optional)    | `boolean` | `false`  |
-
-## Import
-
-```tsx
-import { Hidden } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="HiddenText">
-    <div>
-      <Text>Hello, I am visible</Text>
-      <Hidden>
-        <Text>Hello, I am invisible</Text>
-      </Hidden>
-    </div>
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="HiddenButton">
-    {() => {
-      const [state, setState] = React.useState({
-        showButton: false,
-      });
-      const handleToggleClick = () => {
-        setState(prevState => ({
-          showButton: !prevState.showButton,
-        }));
-      };
-      return (
-        <div>
-          <Button variant="primary.small" onClick={handleToggleClick}>
-            {state.showButton ? 'Hide Text' : 'Show Text'}
-          </Button>
-          <Hidden show={state.showButton}>
-            <br />
-            <Text>Hello, now I am visible</Text>
-          </Hidden>
-        </div>
-      );
-    }}
-  </Story>
-</Preview>

package/src/Hidden/Hidden.test.tsx

@@ -1,87 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Hidden } from '@marigold/components';
-
-const theme = {
-  layout: {
-    hidden: {
-      alignItems: 'center',
-    },
-    invisible: {
-      alignItems: 'right',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Hidden title="hidden">Default</Hidden>
-    </ThemeProvider>
-  );
-  const hidden = screen.getByTitle(/hidden/);
-
-  expect(hidden).toHaveStyle(`align-items: center`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Hidden title="invisible" variant="invisible">
-        Invisible
-      </Hidden>
-    </ThemeProvider>
-  );
-  const hidden = screen.getByTitle(/invisible/);
-
-  expect(hidden).toHaveStyle(`align-items: right`);
-});
-
-test('text is not visible, show prop = false', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Hidden title="hidden">Hidden</Hidden>
-    </ThemeProvider>
-  );
-  const hidden = screen.getByTitle(/hidden/);
-
-  expect(hidden).not.toBeVisible();
-});
-
-test('support show prop = true', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Hidden title="hidden" show={true}>
-        Default
-      </Hidden>
-    </ThemeProvider>
-  );
-  const hidden = screen.getByTitle(/hidden/);
-
-  expect(hidden).toBeVisible();
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Hidden title="hidden">Default</Hidden>
-    </ThemeProvider>
-  );
-  const hidden = screen.getByTitle(/hidden/);
-
-  expect(hidden instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Hidden className="custom-class-name" title="hidden">
-        text
-      </Hidden>
-    </ThemeProvider>
-  );
-  const hidden = screen.getByTitle(/hidden/);
-
-  expect(hidden.className).toMatch('custom-class-name');
-});

package/src/Hidden/Hidden.tsx

@@ -1,25 +0,0 @@
-import React from 'react';
-import { useStyles, system } from '@marigold/system';
-
-type HiddenProps = {
-  variant?: string;
-  show?: boolean;
-};
-
-export const Hidden = system<HiddenProps, 'span'>(
-  ({ variant = 'hidden', show = false, className, children, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `layout.${variant}`,
-        display: show ? 'display' : 'none',
-      },
-      className
-    );
-
-    return (
-      <span className={classNames} {...props}>
-        {children}
-      </span>
-    );
-  }
-);

package/src/Hidden/index.ts

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

package/src/Image/Image.stories.mdx

@@ -1,40 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Image } from '@marigold/components';
-import image1 from '../../../images/src/type_logo.png';
-import image2 from '../../../images/src/Marigold_Logo_Hotelstyle.png';
-
-<Meta title="Components/Content/Image" />
-
-# Image
-
-## Description
-
-With the Image component you can render an `img` element.
-The themeSection is `content` and the variant can be added with the variant prop which is `images` per default.
-
-## Properties
-
-| Property             | Type     | Default  |
-| :------------------- | :------- | :------- |
-| `variant` (optional) | `string` | `images` |
-| `alt` (optional)     | `string` | ``       |
-
-## Import
-
-```tsx
-import { Image } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="firstImage">
-    <Image src={image1} alt="marigold_logo" />
-  </Story>
-</Preview>
-
-<Preview>
-  <Story name="secondImage">
-    <Image src={image2} width="500" height="300" />
-  </Story>
-</Preview>

package/src/Input/Input.stories.mdx

@@ -1,44 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Input, Label } from '@marigold/components';
-
-<Meta title="Components/Form/Input" />
-
-# Input
-
-## Description
-
-With the Input component you can add a HTML `<input>` field for different types of text to your form.
-The element uses always the themeSection with the name: `form` in your given theme. The variant in your section can be added with the variant prop. The default variant is `input`.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `input` |
-
-## Import
-
-```tsx
-import { Input } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Input">
-    <div>
-      <Label htmlFor="input">
-        Label
-        <Input id="input" placeholder="Placeholder" />
-      </Label>
-      <Label htmlFor="input2">
-        Label
-        <Input id="input2" placeholder="Disabled" disabled />
-      </Label>
-      <Label htmlFor="input3">
-        Label
-        <Input id="input2" type="submit" />
-      </Label>
-    </div>
-  </Story>
-</Preview>

package/src/Label/Label.stories.mdx

@@ -1,34 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Label } from './Label';
-
-<Meta title="Components/Form/Label" />
-
-# Label-Component
-
-## Description
-
-With the Label component you can add a HTML `<Label>` element to your form.
-The element uses always the themeSection with the name: `form` in your given theme. The variant in your section can be added with the variant prop. The default variant is `label`.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `label` |
-| `htmlFor`            | `string` |         |
-
-## Import
-
-```tsx
-import { Label } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="label">
-    <Label variant="label" htmlFor="labelId">
-      I am a Label!
-    </Label>
-  </Story>
-</Preview>

package/src/Link/Link.stories.mdx

@@ -1,37 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Link, Text } from '@marigold/components';
-
-<Meta title="Components/Typography/Link" />
-
-# Link
-
-## Description
-
-Element to style links.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `variant` (optional) | `string` | `link`  |
-| `href`               | `string` |         |
-
-## Import
-
-```tsx
-import { Link } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Link">
-    <Text>
-      Link something nice like{' '}
-      <Link href="#!" target="_blank">
-        Marigold
-      </Link>{' '}
-      in text.
-    </Text>
-  </Story>
-</Preview>

package/src/Menu/Menu.stories.mdx

@@ -1,47 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Menu, MenuItem, Divider } from '@marigold/components';
-import { BurgerMenu } from '@marigold/icons';
-
-<Meta title="Components/Content/Menu" />
-
-# Menu
-
-## Description
-
-With the Menu component you can add a Menu Button with Text or Icon as Label and as children some MenuItem components.
-The element uses always the themeSection with the name: `content` in your given theme. The variant in your section can be added with the variant prop. The default variant is `menu`.
-
-## Properties
-
-| Property             | Type       | Default |
-| :------------------- | :--------- | :------ |
-| `variant` (optional) | `string`   | `menu`  |
-| `label` (optional)   | `string`   | `Menu`  |
-| `onClick`            | `function` |         |
-| `show` (optional)    | `boolean`  | `false` |
-
-## Import
-
-```tsx
-import { Menu } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="menu">
-    {() => {
-      const [showMenu, setShowMenu] = React.useState(false);
-      const toggle = () => {
-        setShowMenu(!showMenu);
-      };
-      return (
-        <Menu onClick={toggle} show={showMenu} label={<BurgerMenu />}>
-          <MenuItem href="#">Home</MenuItem>
-          <MenuItem href="#">Tickets</MenuItem>
-          <MenuItem href="#">Kundenkonto</MenuItem>
-        </Menu>
-      );
-    }}
-  </Story>
-</Preview>

package/src/MenuItem/MenuItem.stories.mdx

@@ -1,32 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { MenuItem } from '@marigold/components';
-
-<Meta title="Components/Content/Menu/MenuItem" />
-
-# Menu
-
-## Description
-
-With the MenuItem component you can add a MenuItem which renders a link component to a Menu component.
-The element uses always the themeSection with the name: `content` in your given theme. The variant in your section can be added with the variant prop. The default variant is `menuItem`.
-The Link component in the MenuItem uses the variant `menu`.
-
-## Properties
-
-| Property             | Type     | Default    |
-| :------------------- | :------- | :--------- |
-| `variant` (optional) | `string` | `menuItem` |
-
-## Import
-
-```tsx
-import { MenuItem } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="MenuItem">
-    <MenuItem href="#">Menu Item</MenuItem>
-  </Story>
-</Preview>

package/src/Message/Message.stories.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Message, Text } from '@marigold/components';
-
-<Meta title="Components/Content/Message" />
-
-# Message
-
-## Description
-
-Simple component to display a message with a title and icon based on a `div` element and styled with a theme.
-
-## Properties
-
-| Property             | Type     | Default |
-| :------------------- | :------- | :------ |
-| `messageTitle`       | `string` |         |
-| `variant` (optional) | `string` | `info`  |
-
-## Import
-
-```tsx
-import { Message } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Message">
-    <Message variant="warning" messageTitle="Danger Zone!">
-      <Text>Hello, I am a simple warning message.</Text>
-    </Message>
-    <br />
-    <br />
-    <Message variant="error" messageTitle="Wrong here.">
-      <Text>Hello, I am a simple error message.</Text>
-    </Message>
-    <br />
-    <br />
-    <Message messageTitle="There is an update available.">
-      <Text>Hello, I am a simple info message.</Text>
-    </Message>
-  </Story>
-</Preview>

package/src/Select/Select.stories.mdx

@@ -1,43 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Label, Select } from '@marigold/components';
-
-<Meta title="Components/Form/Select" />
-
-# Select
-
-## Description
-
-Dropdown for selecting a value among different options.
-
-## Import
-
-```tsx
-import { Select } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Select">
-    <Label htmlFor="select">
-      Dropdown
-      <Select id="select">
-        <option selected>Choose here</option>
-        <option>Hi</option>
-        <option>Hey</option>
-        <option>Blubb</option>
-      </Select>
-    </Label>
-  </Story>
-  <Story name="Select disabled">
-    <Label htmlFor="select2">
-      Dropdown disabled
-      <Select disabled>
-        <option selected>Can't choose here</option>
-        <option>Hi</option>
-        <option>Hey</option>
-        <option>Blubb</option>
-      </Select>
-    </Label>
-  </Story>
-</Preview>

package/src/Slider/Slider.stories.mdx

@@ -1,57 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Label, Slider } from '@marigold/components';
-
-<Meta title="Components/Form/Slider" />
-
-# Slider
-
-## Description
-
-With the Slider component you can add a HTML `<input>` element with `type="range"` to your form.
-The element uses always the themeSection with the name: `form` in your given theme. The variant in your section can be added with the variant prop. The default variant is `slider`.
-
-## Properties
-
-| Property             | Type     | Default  |
-| :------------------- | :------- | :------- |
-| `variant` (optional) | `string` | `slider` |
-
-## Import
-
-```tsx
-import { Slider } from '@marigold/components';
-```
-
-## Usage
-
-### Slider with default range and fix value
-
-<Preview>
-  <Story name="SliderOne">
-    <div>
-      <Label htmlFor="vol">
-        Volume:
-        <br />
-        <Slider id="vol" name="vol" min="0" max="50" />
-        <br />
-        <Slider id="vol" name="vol" min="0" max="50" value="25" />
-      </Label>
-    </div>
-  </Story>
-</Preview>
-
-### Slider with steps
-
-<Preview>
-  <Story name="SliderTwo">
-    <div>
-      <Label htmlFor="vol">
-        Volume:
-        <br />
-        <Slider id="vol" name="vol" min="0" max="100" step="10"></Slider>
-        <br />
-        <Slider id="vol" name="vol" min="20" max="80" step="5"></Slider>
-      </Label>
-    </div>
-  </Story>
-</Preview>