@marigold/components 0.0.3 → 0.3.1

package/src/Hidden/Hidden.stories.mdx

@@ -1,64 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Button } from '../Button';
-import { Hidden } from './Hidden';
-import { Text } from '../Text';
-import { useState } from 'react';
-
-<Meta title="Components/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.
-
-## Properties
-
-| Property          | Type      | Default |
-| :---------------- | :-------- | :------ |
-| `show` (optional) | `boolean` | `false` |
-
-## Import
-
-```tsx
-import { Hidden } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="HiddenText">
-    <div>
-      <Text>Hello, I am visible</Text>
-      <Hidden>
-        <Text>Hello, I am invisible</Text>
-      </Hidden>
-    </div>
-  </Story>
-</Canvas>
-
-<Canvas>
-  <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>
-</Canvas>

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

package/src/Input/Input.stories.mdx

@@ -1,45 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Input } from './Input';
-import { Label } from '../Label';
-
-<Meta title="Components/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: `input` 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` |
-
-## Import
-
-```tsx
-import { Input } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <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>
-</Canvas>

package/src/Label/Label.stories.mdx

@@ -1,34 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Label } from './Label';
-
-<Meta title="Components/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: `label` 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` |           |
-
-## Import
-
-```tsx
-import { Label } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="label">
-    <Label variant="label" htmlFor="labelId">
-      I am a Label!
-    </Label>
-  </Story>
-</Canvas>

package/src/Link/Link.stories.mdx

@@ -1,38 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Link } from './Link';
-import { Text } from '../Text';
-
-<Meta title="Components/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
-
-<Canvas>
-  <Story name="Link">
-    <Text>
-      Link something nice like{' '}
-      <Link href="#!" target="_blank">
-        Marigold
-      </Link>{' '}
-      in text.
-    </Text>
-  </Story>
-</Canvas>

package/src/Menu/Menu.stories.mdx

@@ -1,49 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Divider } from '../Divider';
-import { Menu } from './Menu';
-import { MenuItem } from '../MenuItem';
-import { BurgerMenu } from '@marigold/icons';
-
-<Meta title="Components/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
-
-<Canvas>
-  <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>
-</Canvas>

package/src/MenuItem/MenuItem.stories.mdx

@@ -1,32 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { MenuItem } from './MenuItem';
-
-<Meta title="Components/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: `menu` 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
-
-<Canvas>
-  <Story name="MenuItem">
-    <MenuItem href="#">Menu Item</MenuItem>
-  </Story>
-</Canvas>

package/src/Message/Message.stories.mdx

@@ -1,44 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Message } from './Message';
-import { Text } from '../Text';
-
-<Meta title="Components/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
-
-<Canvas>
-  <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>
-</Canvas>

package/src/Radio/Radio.stories.mdx

@@ -1,100 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { useState } from 'react';
-import { Radio } from './Radio';
-
-<Meta title="Components/Radio" />
-
-# Radio Button
-
-## Description
-
-With the Radio Button component you can add a HTML `<input>` element with `type="radio"` 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 `radio`.
-
-## Properties
-
-| Property              | Type      | Default |
-| :-------------------- | :-------- | :------ |
-| `id`                  | `string`  |         |
-| `variant` (optional)  | `string`  | `radio` |
-| `label` (optional)    | `string`  |         |
-| `required` (optional) | `boolean` |         |
-
-## Import
-
-```tsx
-import { Radio } from '@marigold/components';
-```
-
-## Usage
-
-### Radio standard labeled
-
-<Canvas>
-  <Story name="RadioOne">
-    {() => {
-      const [state, setState] = React.useState('Mastercard');
-      const onChange = changeEvent => {
-        setState(changeEvent.currentTarget.value);
-      };
-      return (
-        <div>
-          <Radio
-            id="mc"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'Mastercard'}
-            value="Mastercard"
-            label="Mastercard"
-          />
-          <br />
-          <Radio
-            id="vi"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'Visa'}
-            value="Visa"
-            label="Visa"
-          />
-          <br />
-          <Radio
-            id="ae"
-            name="payment"
-            onChange={onChange}
-            checked={state === 'AmericanExpress'}
-            value="AmericanExpress"
-            label="AmericanExpress"
-          />
-        </div>
-      );
-    }}
-  </Story>
-</Canvas>
-
-### Radio checked and disabled
-
-<Canvas>
-  <Story name="RadioTwo">
-    <div>
-      <Radio id="radio" checked />
-      <Radio id="radio" disabled />
-      <Radio id="radio" checked disabled />
-    </div>
-  </Story>
-</Canvas>
-
-### Radio with required label
-
-<Canvas>
-  <Story name="RadioThree">
-    <div>
-      <Radio
-        checked
-        id="required"
-        value="required"
-        required
-        label="This label is required"
-      />
-    </div>
-  </Story>
-</Canvas>

package/src/Select/Select.stories.mdx

@@ -1,44 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Label } from '../Label';
-import { Select } from './Select';
-
-<Meta title="Components/Select" />
-
-# Select
-
-## Description
-
-Dropdown for selecting a value among different options.
-
-## Import
-
-```tsx
-import { Select } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <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>
-</Canvas>

package/src/Slider/Slider.stories.mdx

@@ -1,58 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Label } from '../Label';
-import { Slider } from './Slider';
-
-<Meta title="Components/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
-
-<Canvas>
-  <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>
-</Canvas>
-
-### Slider with steps
-
-<Canvas>
-  <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>
-</Canvas>