@marigold/components 0.0.3 → 0.3.1

package/src/Stack/Stack.stories.mdx

@@ -1,105 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Button } from '../Button';
-import { Heading } from '../Heading';
-import { Stack } from './Stack';
-import { Text } from '../Text';
-import { Box } from '../Box';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Stack" />
-
-# Stack
-
-## Description
-
-Layout component to stack elements. This component uses the spaces from the given theme.
-
-## Properties
-
-| Property | Type                                           | Default |
-| :------- | :--------------------------------------------- | :------ |
-| `space`  | `ResponsiveStyleValue<number `&#124;` string>` | `0`     |
-| `align`  | `left, right, center`                          | `left`  |
-
-## Import
-
-```tsx
-import { Stack } from '@marigold/components';
-```
-
-## Usage
-
-### Spacing
-
-<Canvas>
-  <Story name="Example 1">
-    <Stack space={4} className={useStyles({ bg: '#f3f3f3' })}>
-      <Heading>Header</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>
-      <Text>
-        Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel metus.
-        Vestibulum malesuada ante eu velit malesuada, nec ultricies sapien
-        finibus. Aenean rutrum in sem a ullamcorper. Integer ut euismod urna.
-        Interdum et malesuada fames ac ante ipsum primis in faucibus.
-      </Text>
-    </Stack>
-  </Story>
-</Canvas>
-
-### Alignment
-
-<Canvas>
-  <Story name="Example 2">
-    <Stack space={2}>
-      <Text
-        className={useStyles({ width: '100px', border: '1px solid', p: 2 })}
-      >
-        Left
-      </Text>
-    </Stack>
-    <Stack space={2} align="center">
-      <Text
-        className={useStyles({ width: '100px', border: '1px solid', p: 2 })}
-      >
-        Center
-      </Text>
-    </Stack>
-    <Stack space={2} align="right">
-      <Text
-        className={useStyles({ width: '100px', border: '1px solid', p: 2 })}
-      >
-        Right
-      </Text>
-    </Stack>
-  </Story>
-</Canvas>
-
-### Nested
-
-<Canvas>
-  <Story name="Example 3">
-    <Stack space={6}>
-      <Stack>
-        <Heading>Stack Content #1</Heading>
-        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-        <Text>
-          Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel
-          metus.
-        </Text>
-      </Stack>
-      <Stack>
-        <Heading>Stack Content #2</Heading>
-        <Text>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</Text>
-        <Text>
-          Phasellus ipsum tortor, aliquet dapibus fermentum in, mollis vel
-          metus.
-        </Text>
-      </Stack>
-    </Stack>
-  </Story>
-</Canvas>

package/src/Text/Text.stories.mdx

@@ -1,60 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Text } from './Text';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Text" />
-
-# Text
-
-## Description
-
-With the Text component you can easily add different body text HTML elements. As a default, a `span` element is rendered.
-By adding the `as` prop you can alternatively render a `p` element.
-
-## Properties
-
-| Property               | Type              | Default   |
-| :--------------------- | :---------------- | :-------- |
-| `as` (optional)        | `span`, `p`       | `span`    |
-| `variant` (optional)   | `body`, `heading` | `body`    |
-| `textColor` (optional) | string            | `inherit` |
-
-## Import
-
-```tsx
-import { Text } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="body">
-    <Text className={useStyles({ bg: '#f3f3f3' })}>
-      SPAN: 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. 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>
-  </Story>
-  <Story name="heading">
-    <Text as="p" variant="heading">
-      P: 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. 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>
-  </Story>
-  <Story name="with textColor">
-    <Text textColor="hotpink">Hello pinkie ;)</Text>
-  </Story>
-</Canvas>

package/src/Textarea/Textarea.stories.mdx

@@ -1,65 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { Textarea } from '../Textarea';
-
-<Meta title="Components/Textarea" />
-
-# Textarea
-
-## Description
-
-With the Textarea component you can add a HTML `<textarea>` element for larger text input to your form.
-The element uses always the themeSection with the name: `textarea` in your given theme. The variant in your section can be added with the variant prop. The default variant is `default`.
-If you use the label prop you have to add htmlFor. Optionally you can pass an errorMessage or the required prop.
-
-## Properties
-
-| Property                  | Type      | Default    |
-| :------------------------ | :-------- | :--------- |
-| `variant` (optional)      | `string`  | `default`  |
-| `label` (optional)        | `string`  |            |
-| `htmlFor` (optional)      | `string`  | `textarea` |
-| `errorMessage` (optional) | `string`  |            |
-| `required` (optional)     | `boolean` |            |
-
-## Import
-
-```tsx
-import { Textarea } from '@marigold/components';
-```
-
-## Usage
-
-### basic & disabled
-
-<Canvas>
-  <Story name="Textarea">
-    <Textarea placeholder="Placeholder" />
-  </Story>
-  <Story name="Textarea disabled">
-    <Textarea placeholder="Placeholder disabled" disabled />
-  </Story>
-</Canvas>
-
-### labeled & required
-
-<Canvas>
-  <Story name="Textarea label">
-    <Textarea label="Labeled" htmlFor="label" />
-  </Story>
-  <Story name="Textarea required">
-    <Textarea label="Required" htmlFor="required" required />
-  </Story>
-</Canvas>
-
-### with error
-
-<Canvas>
-  <Story name="Textarea error">
-    <Textarea
-      label="Required with error"
-      htmlFor="error"
-      required
-      errorMessage="Oh no, we have an error!"
-    />
-  </Story>
-</Canvas>

package/src/ValidationMessage/ValidationMessage.stories.mdx

@@ -1,36 +0,0 @@
-import { Meta, Story, Canvas } from '@storybook/addon-docs/blocks';
-import { ValidationMessage } from './ValidationMessage';
-import { Exclamation } from '@marigold/icons';
-
-<Meta title="Components/ValidationMessage" />
-
-# ValidationMessage
-
-## Description
-
-Simple colored element to display a validation message as a reaction to an event.
-
-## Properties
-
-| Property             | Type     | Default    |
-| :------------------- | :------- | :--------- |
-| `variant` (optional) | `string` | `error` |
-
-## Import
-
-```tsx
-import { ValidationMessage } from '@marigold/components';
-```
-
-## Usage
-
-<Canvas>
-  <Story name="ValidationMessage">
-    <div>
-      <ValidationMessage>
-        <Exclamation />
-        Validation message
-      </ValidationMessage>
-    </div>
-  </Story>
-</Canvas>