@marigold/components 0.0.2 → 0.3.0

package/src/Svg/Svg.stories.mdx

@@ -1,47 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Feedback } from '@marigold/icons';
-import { Svg } from './Svg';
-
-<Meta title="Components/Iconography/Svg" />
-
-# SVG-Component
-
-## Description
-
-With the SVG component you can render a `svg` element.
-By adding the `size` prop you can change to another size. `24` is the default size.
-The `fill` prop is the second attribute and per default `currentcolor`.
-
-## Properties
-
-| Property             | Type     | Default          |
-| :------------------- | :------- | :--------------- |
-| `variant (optional)` | `string` | `'icon'`         |
-| `size (optional)`    | `number` | `24`             |
-| `fill`               | `string` | `'currentcolor'` |
-
-## Import
-
-```tsx
-import { Svg } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="example1-svg">
-    <Svg>
-      <path d="M11.9634 17.6396C12.8179 17.6396 13.5991 17.4321 14.3071 17.0171C15.0151 16.602 15.5828 16.0344 16.01 15.3142C16.4373 14.594 16.6509 13.8127 16.6509 12.9705C16.6509 12.1282 16.4373 11.3469 16.01 10.6267C15.5828 9.90649 15.0151 9.33887 14.3071 8.92383C13.5991 8.50879 12.8179 8.30127 11.9634 8.30127C11.1089 8.30127 10.3276 8.50879 9.61963 8.92383C8.91162 9.33887 8.3501 9.90649 7.93506 10.6267C7.52002 11.3469 7.3125 12.1282 7.3125 12.9705C7.3125 13.8127 7.52002 14.594 7.93506 15.3142C8.3501 16.0344 8.91162 16.602 9.61963 17.0171C10.3276 17.4321 11.1089 17.6396 11.9634 17.6396ZM19.4341 5.48145C19.9468 5.48145 20.3862 5.66455 20.7524 6.03076C21.1187 6.39697 21.3018 6.83642 21.3018 7.34912V18.5552C21.3018 19.0679 21.1187 19.5073 20.7524 19.8735C20.3862 20.2397 19.9468 20.4229 19.4341 20.4229H4.49268C3.97998 20.4229 3.54053 20.2397 3.17432 19.8735C2.8081 19.5073 2.625 19.0679 2.625 18.5552V7.34912C2.625 6.83642 2.8081 6.39697 3.17432 6.03076C3.54053 5.66455 3.97998 5.48145 4.49268 5.48145H7.45898L9.18018 3.61377H14.7832L16.4678 5.48145H19.4341ZM11.9634 9.98584C12.7935 9.98584 13.5015 10.2788 14.0874 10.8647C14.6733 11.4507 14.9663 12.1526 14.9663 12.9705C14.9663 13.7883 14.6733 14.4902 14.0874 15.0762C13.5015 15.6621 12.7935 15.9551 11.9634 15.9551C11.1333 15.9551 10.4253 15.6621 9.83936 15.0762C9.25342 14.4902 8.96045 13.7883 8.96045 12.9705C8.96045 12.1526 9.25342 11.4507 9.83936 10.8647C10.4253 10.2788 11.1333 9.98584 11.9634 9.98584Z" />
-    </Svg>
-  </Story>
-  <Story name="example2-svg">
-    <Svg size={64}>
-      <path d="M15.2617 3H8.69638C7.33407 3 6.23438 4.09636 6.23438 5.45455V18.5455C6.23438 19.9036 7.33407 21 8.69638 21H15.2617C16.624 21 17.7237 19.9036 17.7237 18.5455V5.45455C17.7237 4.09636 16.624 3 15.2617 3V3ZM13.6204 19.3637H10.3377V18.5455H13.6204V19.3637V19.3637ZM16.2876 16.909H7.67054V5.4545H16.2876V16.909V16.909Z" />
-    </Svg>
-  </Story>
-  <Story name="example3-svg">
-    <Svg size={32} fill="orange">
-      <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
-    </Svg>
-  </Story>
-</Preview>

package/src/Svg/Svg.test.tsx

@@ -1,76 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Svg } from './Svg';
-import { useStyles } from '@marigold/system';
-
-test('supports default fill color', () => {
-  render(
-    <Svg title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('currentcolor');
-});
-
-test('supports default size', () => {
-  render(
-    <Svg title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('24');
-});
-
-test('supports size prop', () => {
-  render(
-    <Svg title="svg" size={30}>
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('width')).toEqual('30');
-});
-
-test('supports fill prop', () => {
-  render(
-    <Svg title="svg" fill="#fafafa">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg.getAttribute('fill')).toEqual('#fafafa');
-});
-
-test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ margin: '8px' });
-    return (
-      <Svg title="svg" className={classNames} {...props}>
-        <path d="M9.9 20.113V13.8415H14" />
-      </Svg>
-    );
-  };
-
-  const { getByTitle } = render(<TestComponent>text</TestComponent>);
-  const testelem = getByTitle('svg');
-  const text = getComputedStyle(testelem);
-
-  expect(text.margin).toEqual('8px');
-});
-
-test('renders <svg> element', () => {
-  render(
-    <Svg title="svg">
-      <path d="M9.9 20.113V13.8415H14" />
-    </Svg>
-  );
-  const svg = screen.getByTitle(/svg/);
-
-  expect(svg instanceof SVGElement).toBeTruthy();
-});

package/src/Svg/Svg.tsx

@@ -1,31 +0,0 @@
-import React from 'react';
-import { useStyles, system } from '@marigold/system';
-
-type SvgProps = {
-  variant?: string;
-  size?: number;
-};
-
-export const Svg = system<SvgProps, 'svg'>(
-  ({ variant = 'icon', size = 24, className = '', children, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `icon.${variant}`,
-      },
-      className
-    );
-
-    return (
-      <svg
-        className={classNames}
-        width={size}
-        height={size}
-        viewBox="0 0 24 24"
-        fill="currentcolor"
-        {...props}
-      >
-        {children}
-      </svg>
-    );
-  }
-);

package/src/Svg/index.ts

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

package/src/Text/Text.stories.mdx

@@ -1,60 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Text } from './Text';
-import { useStyles } from '@marigold/system';
-
-<Meta title="Components/Typography/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
-
-<Preview>
-  <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>
-</Preview>

package/src/Textarea/Textarea.stories.mdx

@@ -1,34 +0,0 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
-import { Textarea } from '@marigold/components';
-
-<Meta title="Components/Form/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: `form` in your given theme. The variant in your section can be added with the variant prop. The default variant is `textarea`.
-
-## Properties
-
-| Property             | Type     | Default    |
-| :------------------- | :------- | :--------- |
-| `variant` (optional) | `string` | `textarea` |
-
-## Import
-
-```tsx
-import { Textarea } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="Textarea">
-    <Textarea placeholder="Placeholder" />
-  </Story>
-  <Story name="Textarea disabled">
-    <Textarea placeholder="Placeholder disabled" disabled />
-  </Story>
-</Preview>

package/src/ValidationMessage/ValidationMessage.stories.mdx

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