@marigold/components 0.0.1 → 0.2.0

package/src/Heading/Heading.tsx

@@ -1,16 +1,19 @@
 import React from 'react';
-import { Box, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
 
-type HeadingProps = {
-  headingStyle?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
-};
+export type HeadingProps = {
+  as?: 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6';
+  variant?: string;
+} & ComponentProps<'h1'>;
 
-export const Heading = system<HeadingProps, 'h2'>(
-  ({ headingStyle = 'h2', children, ...props }) => {
-    return (
-      <Box as="h2" themeSection="text" variant={headingStyle} {...props}>
-        {children}
-      </Box>
-    );
-  }
+export const Heading: React.FC<HeadingProps> = ({
+  as = 'h2',
+  variant = 'h2',
+  children,
+  ...props
+}) => (
+  <Box {...props} as={as} variant={`text.${variant}`}>
+    {children}
+  </Box>
 );

package/src/Hidden/Hidden.stories.mdx

@@ -0,0 +1,39 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Hidden } from './Hidden';
+import { Text } from '../Text';
+
+<Meta
+  title="Components/Hidden"
+  argTypes={{
+    show: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      description: 'Show or hide',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  }}
+/>
+
+# Hidden
+
+export const Template = args => (
+  <div>
+    <Text>Change the "show" switch to "true"</Text>
+    <Hidden {...args}>
+      <br />
+      <Text>Hello here I am!</Text>
+    </Hidden>
+  </div>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Hidden/Hidden.test.tsx

@@ -0,0 +1,24 @@
+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

@@ -0,0 +1,16 @@
+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

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

package/src/Image/Image.stories.mdx

@@ -0,0 +1,36 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Image } from './Image';
+import image1 from '../../../images/src/type_logo.png';
+
+<Meta
+  title="Components/Image"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'there is only one variant',
+      table: {
+        defaultValue: {
+          summary: 'fullWidth',
+        },
+      },
+    },
+    alt: {
+      control: {
+        type: 'text',
+      },
+      description: 'Description text for screenreaders'
+    },
+  }}
+/>
+
+# Image
+
+export const Template = args => <Image src={image1} alt="marigold_logo" />;
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Image/Image.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Image } from './Image';
+
+const theme = {
+  images: {
+    fullWidth: {
+      alignItems: 'center',
+    },
+    logos: {
+      alignItems: 'right',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Image title="images" />
+    </ThemeProvider>
+  );
+  const img = screen.getByTitle(/images/);
+
+  expect(img).toHaveStyle(`align-items: center`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Image title="logos" variant="logos" />
+    </ThemeProvider>
+  );
+  const img = screen.getByTitle(/logos/);
+
+  expect(img).toHaveStyle(`align-items: right`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Image title="default" />
+    </ThemeProvider>
+  );
+  const img = screen.getByTitle(/default/);
+
+  expect(img instanceof HTMLImageElement).toBeTruthy();
+});
+
+test('accept alt', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Image alt="altText" title="default" />
+    </ThemeProvider>
+  );
+  const img = screen.getByTitle(/default/);
+
+  expect(img.getAttribute('alt')).toEqual('altText');
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Image className="custom-class-name" title="image" />
+    </ThemeProvider>
+  );
+  const image = screen.getByTitle(/image/);
+
+  expect(image.className).toMatch('custom-class-name');
+});

package/src/Image/Image.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
+
+export type ImageProps = {
+  variant?: string;
+  children?: never;
+} & ComponentProps<'img'>;
+
+export const Image: React.FC<ImageProps> = ({
+  variant = 'fullWidth',
+  ...props
+}) => <Box {...props} as="img" variant={`images.${variant}`} />;

package/src/Image/index.ts

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

package/src/Input/Input.stories.mdx

@@ -0,0 +1,61 @@
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
+import { Input } from './Input';
+import { Label } from '../Label';
+
+<Meta
+  title="Components/Input"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'default',
+        },
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'time',
+        'url',
+        'week',
+      ],
+      type: { required: true },
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  }}
+/>
+
+# Input
+
+export const Template = args => (
+  <Label htmlFor="input">
+    Label
+    <Input id="input" placeholder="Placeholder..." {...args} />
+  </Label>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Input/Input.test.tsx

@@ -0,0 +1,70 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+import { Input } from './Input';
+
+const theme = {
+  input: {
+    default: {
+      fontFamily: 'Inter',
+    },
+    input2: {
+      fontFamily: 'Roboto',
+    },
+  },
+};
+
+test('supports default variant and themeSection', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Input title="input" />
+    </ThemeProvider>
+  );
+  const input = screen.getByTitle('input');
+
+  expect(input).toHaveStyle(`font-family: Inter`);
+});
+
+test('accepts other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Input title="input" variant="input2" />
+    </ThemeProvider>
+  );
+  const input = screen.getByTitle('input');
+
+  expect(input).toHaveStyle(`font-family: Roboto`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Input title="input" />
+    </ThemeProvider>
+  );
+  const input = screen.getByTitle('input');
+
+  expect(input instanceof HTMLInputElement).toBeTruthy();
+});
+
+test('supports custom prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Input title="input" placeholder="placeholder" />
+    </ThemeProvider>
+  );
+  const input = screen.getByTitle('input');
+
+  expect(input).toHaveAttribute('placeholder');
+});
+
+test('accepts custom styles prop className', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Input className="custom-class-name" title="input" />
+    </ThemeProvider>
+  );
+  const input = screen.getByTitle(/input/);
+
+  expect(input.className).toMatch('custom-class-name');
+});

package/src/Input/Input.tsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
+
+export type InputProps = {
+  variant?: string;
+} & ComponentProps<'input'>;
+
+export const Input: React.FC<InputProps> = ({
+  variant = 'default',
+  type = 'text',
+  ...props
+}) => <Box {...props} as="input" type={type} variant={`input.${variant}`} />;

package/src/Input/index.ts

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

package/src/Label/Label.stories.mdx

@@ -1,36 +1,52 @@
-import { Meta, Story, Preview } from '@storybook/addon-docs/blocks';
+import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
 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`.
-Specific css style prop can also be added.
-
-## Properties
-
-| Property  | Type        | Default   |
-| :-------- | :---------- | :-------- |
-| `variant` | `string`    | `'label'` |
-| `htmlFor` | `string`    |           |
-| `css`     | `css props` |           |
-
-## Import
-
-```tsx
-import { Label } from '@marigold/components';
-```
-
-## Usage
-
-<Preview>
-  <Story name="label">
-    <Label variant="label" htmlFor="labelId">
-      I am a Label!
-    </Label>
-  </Story>
-</Preview>
+<Meta
+  title="Components/Label"
+  argTypes={{
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: '?',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      type: {
+        required: true,
+      },
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Adds required Icon to label',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+  }}
+/>
+
+# Label
+
+export const Template = args => (
+  <Label htmlFor="input" {...args}>
+    Label
+  </Label>
+);
+
+<Canvas>
+  <Story name="Default">{Template.bind({})}</Story>
+</Canvas>
+
+<ArgsTable story="Default" />

package/src/Label/Label.test.tsx

@@ -1,59 +1,88 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { MarigoldProvider } from '@marigold/system';
+import { ThemeProvider } from '@marigold/system';
 import { Label } from './Label';
 
 const theme = {
-  form: {
-    label: {
+  label: {
+    above: {
       fontFamily: 'Inter Regular',
     },
+    myLabel: {
+      fontFamily: 'Oswald Regular',
+    },
   },
 };
 
 test('supports default variant and themeSection', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Label htmlFor="labelId">label</Label>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const label = screen.getByText(/label/);
 
   expect(label).toHaveStyle(`font-family: Inter Regular`);
 });
 
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" variant="myLabel">
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+
+  expect(label).toHaveStyle(`font-family: Oswald Regular`);
+});
+
 test('supports htmlFor prop', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Label htmlFor="labelId">label</Label>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const label = screen.getByText(/label/);
 
   expect(label).toHaveAttribute('for');
 });
 
+test('supports required prop', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" required>
+        label
+      </Label>
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/label/);
+  const parent = label.parentElement;
+
+  expect(parent instanceof HTMLSpanElement).toBeTruthy();
+});
+
 test('renders <label> element', () => {
   render(
-    <MarigoldProvider theme={theme}>
+    <ThemeProvider theme={theme}>
       <Label htmlFor="labelId">label</Label>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
   const label = screen.getByText(/label/);
 
   expect(label instanceof HTMLLabelElement).toBeTruthy();
 });
 
-test('variant styles cannot be overridden with CSS prop', () => {
+test('accepts custom styles prop className', () => {
   render(
-    <MarigoldProvider theme={theme}>
-      <Label htmlFor="labelId" css={{ fontFamily: 'Oswald Regular' }}>
+    <ThemeProvider theme={theme}>
+      <Label htmlFor="labelId" className="custom-class-name" title="label">
         label
       </Label>
-    </MarigoldProvider>
+    </ThemeProvider>
   );
-  const label = screen.getByText(/label/);
+  const label = screen.getByTitle(/label/);
 
-  expect(label).not.toHaveStyle(`font-family: Oswald Regular`);
-  expect(label).toHaveStyle(`font-family: Inter Regular`);
+  expect(label.className).toMatch('custom-class-name');
 });

package/src/Label/Label.tsx

@@ -1,22 +1,31 @@
 import React from 'react';
-import { system, Box } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+import { Required } from '@marigold/icons';
 
-type LabelProps = {
-  htmlFor: string;
-};
+import { Box } from '../Box';
+
+export type LabelProps = {
+  htmlFor?: string;
+  variant?: string;
+  required?: boolean;
+} & ComponentProps<'label'>;
 
-export const Label = system<LabelProps, 'label'>(
-  ({ variant = 'label', htmlFor, children, ...props }) => {
-    return (
-      <Box
-        as="label"
-        themeSection="form"
-        variant={variant}
-        htmlFor={htmlFor}
-        {...props}
-      >
+export const Label: React.FC<LabelProps> = ({
+  variant = 'above',
+  required,
+  children,
+  ...props
+}) => {
+  return required ? (
+    <Box as="span" display="inline-flex" alignItems="center">
+      <Box {...props} as="label" variant={`label.${variant}`}>
         {children}
       </Box>
-    );
-  }
-);
+      {required && <Box as={Required} size={16} css={{ color: 'red60' }} />}
+    </Box>
+  ) : (
+    <Box {...props} as="label" variant={`label.${variant}`}>
+      {children}
+    </Box>
+  );
+};