@marigold/components 0.0.2 → 0.3.0

package/src/Field/Field.stories.tsx

@@ -0,0 +1,110 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Field } from './Field';
+
+export default {
+  title: 'Components/Field',
+  argTypes: {
+    variant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field variant',
+      table: {
+        defaultValue: {
+          summary: '__default',
+        },
+      },
+    },
+    labelVariant: {
+      control: {
+        type: 'text',
+      },
+      description: 'Field label variant',
+      table: {
+        defaultValue: {
+          summary: 'above',
+        },
+      },
+    },
+    htmlFor: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'id',
+    },
+    label: {
+      control: {
+        type: 'text',
+      },
+      defaultValue: 'Label',
+    },
+    error: {
+      control: {
+        type: 'boolean',
+      },
+      description: 'Error',
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    errorMessage: {
+      control: {
+        type: 'text',
+      },
+      description: 'Error Message',
+    },
+    required: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    disabled: {
+      control: {
+        type: 'boolean',
+      },
+      options: [true, false],
+      table: {
+        defaultValue: {
+          summary: false,
+        },
+      },
+    },
+    type: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'date',
+        'datetime-local',
+        'email',
+        'month',
+        'number',
+        'password',
+        'search',
+        'tel',
+        'text',
+        'time',
+        'time',
+        'url',
+        'week',
+      ],
+      defaultValue: 'text',
+      table: {
+        defaultValue: {
+          summary: 'text',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Field> = args => <Field {...args} />;

package/src/Field/Field.test.tsx

@@ -1,21 +1,30 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Field } from '@marigold/components';
-import { useStyles } from '@marigold/system';
+import { Field } from './Field';
 
 const theme = {
-  form: {
-    field: {
-      padding: '4px',
+  space: {
+    none: 0,
+    small: 4,
+    medium: 8,
+  },
+  label: {
+    above: {
+      fontSize: '14px',
+    },
+  },
+  input: {
+    __default: {
+      padding: 'small',
     },
-    inputField: {
-      padding: '8px',
+    error: {
+      padding: 'medium',
     },
   },
 };
 
-test('supports default variant and themeSection', () => {
+test('renders correct HTML element', () => {
   render(
     <ThemeProvider theme={theme}>
       <Field htmlFor="myId" label="label" />
@@ -23,29 +32,47 @@ test('supports default variant and themeSection', () => {
   );
   const field = screen.getByText(/label/);
 
-  expect(field).toHaveStyle(`padding: 4px`);
+  expect(field instanceof HTMLLabelElement).toBeTruthy();
 });
 
-test('accepts other variant than default', () => {
+test('supports default variant', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="inputField" variant="inputField" />
+      <Field htmlFor="myId" label="Name" data-testid="field" />
     </ThemeProvider>
   );
-  const inputField = screen.getByText(/inputField/);
+  const field = screen.getByTestId(/field/);
+  expect(field).toHaveStyle(`padding: 4px`);
+});
 
-  expect(inputField).toHaveStyle(`padding: 8px`);
+test('supports other variant than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" variant="error" data-testid="field" />
+    </ThemeProvider>
+  );
+  const field = screen.getByTestId(/field/);
+  expect(field).toHaveStyle(`padding: 8px`);
 });
 
-test('renders correct HTML element', () => {
+test('supports default variantLabel', () => {
   render(
     <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="label" />
+      <Field htmlFor="myId" label="Name" />
     </ThemeProvider>
   );
-  const field = screen.getByText(/label/);
+  const label = screen.getByText(/Name/);
+  expect(label).toHaveStyle(`font-size: 14px`);
+});
 
-  expect(field instanceof HTMLLabelElement).toBeTruthy();
+test('supports other variantLabel than default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Field htmlFor="myId" label="Name" />
+    </ThemeProvider>
+  );
+  const label = screen.getByText(/Name/);
+  expect(label).toHaveStyle(`font-size: 14px`);
 });
 
 test('supports label prop', () => {
@@ -56,34 +83,48 @@ test('supports label prop', () => {
 });
 
 test('supports htmlFor prop', () => {
-  render(<Field htmlFor="myId" label="Name" error="Validation error" />);
+  render(<Field htmlFor="myId" label="Name" />);
   const field = screen.getByText(/Name/);
 
   expect(field).toHaveAttribute('for');
 });
 
-test('supports error prop', () => {
-  render(<Field htmlFor="myId" label="label" error="Validation error" />);
-  const field = screen.getByText(/Validation/);
+test('supports required prop', () => {
+  render(<Field htmlFor="myId" label="label" required />);
+  const fieldLabel = screen.getByText(/label/);
 
-  expect(field).toBeDefined();
+  expect(fieldLabel.nextSibling).toBeDefined();
+  expect(fieldLabel.nextSibling instanceof SVGElement).toBeTruthy();
+});
+
+test('supports error and errorMessage prop', () => {
+  render(
+    <Field htmlFor="myId" label="label" error errorMessage="Validation error" />
+  );
+
+  const errorMessage = screen.getByText(/Validation/);
+  expect(errorMessage).toBeDefined();
+});
+
+test('supports disabled prop', () => {
+  render(<Field htmlFor="myId" label="label" disabled />);
+  const fieldLabel = screen.getByText(/label/);
+  expect(fieldLabel.nextSibling).toHaveAttribute('disabled');
 });
 
 test('accepts custom styles prop className', () => {
-  const TestComponent: React.FC = ({ children, ...props }) => {
-    const classNames = useStyles({ fontSize: '8px' });
-    return (
-      <Field htmlFor="myId" label="label" className={classNames} {...props} />
-    );
-  };
-
-  const { getByText } = render(
+  render(
     <ThemeProvider theme={theme}>
-      <TestComponent />
+      <Field
+        htmlFor="myId"
+        label="label"
+        className="custom-class-name"
+        title="field"
+        data-testid="field"
+      />
     </ThemeProvider>
   );
-  const testelem = getByText('label');
-  const field = getComputedStyle(testelem);
+  const field = screen.getByTestId(/field/);
 
-  expect(field.fontSize).toEqual('8px');
+  expect(field.className).toMatch('custom-class-name');
 });

package/src/Field/Field.tsx

@@ -1,49 +1,56 @@
 import React from 'react';
-import { Input, Label, ValidationMessage } from '@marigold/components';
-import { useStyles, system } from '@marigold/system';
-import { Exclamation, Required } from '@marigold/icons';
-import b2bTheme from '@marigold/theme-b2b';
+import { Exclamation } from '@marigold/icons';
+import { ComponentProps } from '@marigold/types';
 
-type FieldProps = {
+import { Input } from '../Input';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+// Props
+// ---------------
+export type FieldProps = {
   variant?: string;
+  labelVariant?: string;
   htmlFor: string;
   label: string;
-  error?: string;
-};
+  required?: boolean;
+  error?: boolean;
+  errorMessage?: string;
+  disabled?: boolean;
+} & ComponentProps<'input'>;
 
-export const Field = system<FieldProps, 'input'>(
-  ({
-    variant = 'field',
-    type = 'text',
-    htmlFor,
-    label,
-    error,
-    className = '',
-    ...props
-  }) => {
-    const classNames = useStyles(
-      {
-        variant: `form.${variant}`,
-      },
-      className
-    );
-
-    return (
-      <div>
-        <Label htmlFor={htmlFor} className={classNames} {...props}>
-          {label}
-          {error ? <Required size={16} fill={b2bTheme.colors.red60} /> : ''}
-        </Label>
-        <Input type={type} id={htmlFor} />
-        {error ? (
-          <ValidationMessage>
-            <Exclamation size={16} />
-            {error}
-          </ValidationMessage>
-        ) : (
-          ''
-        )}
-      </div>
-    );
-  }
-);
+// Component
+// ---------------
+export const Field: React.FC<FieldProps> = ({
+  type = 'text',
+  variant = '',
+  labelVariant = 'above',
+  htmlFor,
+  label,
+  required,
+  error,
+  errorMessage,
+  disabled,
+  ...props
+}) => {
+  return (
+    <>
+      <Label variant={labelVariant} htmlFor={htmlFor} required={required}>
+        {label}
+      </Label>
+      <Input
+        {...props}
+        type={type}
+        id={htmlFor}
+        disabled={disabled}
+        variant={variant}
+      />
+      {error && errorMessage && (
+        <ValidationMessage>
+          <Exclamation size={16} />
+          {errorMessage}
+        </ValidationMessage>
+      )}
+    </>
+  );
+};

package/src/Image/Image.stories.tsx

@@ -0,0 +1,34 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Image } from './Image';
+
+export default {
+  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',
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Image> = args => (
+  <Image
+    src="https://www.reservix.net/_Resources/Persistent/0e8f5885125940fdb2bc2d54840f497782f56584/Reservix_Logo_dtp_web_rgb_font_black_180704.png"
+    alt="marigold_logo"
+    {...args}
+  />
+);

package/src/Image/Image.test.tsx

@@ -1,11 +1,14 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
 import { ThemeProvider } from '@marigold/system';
-import { Image } from '@marigold/components';
+import { Image } from './Image';
 
 const theme = {
-  content: {
-    images: {
+  colors: {
+    primary: 'hotpink',
+  },
+  image: {
+    fullWidth: {
       alignItems: 'center',
     },
     logos: {

package/src/Image/Image.tsx

@@ -1,19 +1,25 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { ComponentProps } from '@marigold/types';
+import { Box } from '../Box';
 
-type ImageProps = {
+// Theme Extension
+// ---------------
+export interface ImageThemeExtension<Value> {
+  image?: {
+    [key: string]: Value;
+  };
+}
+
+// Props
+// ---------------
+export type ImageProps = {
   variant?: string;
-  alt?: string;
-};
+  children?: never;
+} & ComponentProps<'img'>;
 
-export const Image = system<ImageProps, 'img'>(
-  ({ variant = 'images', alt = '', className, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `content.${variant}`,
-      },
-      className
-    );
-    return <img className={classNames} alt={alt} {...props} />;
-  }
-);
+// Component
+// ---------------
+export const Image: React.FC<ImageProps> = ({
+  variant = 'fullWidth',
+  ...props
+}) => <Box {...props} as="img" variant={`image.${variant}`} />;

package/src/Inline/Inline.stories.tsx

@@ -0,0 +1,39 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Text } from '../Text';
+import { Inline } from './Inline';
+import { Check } from '@marigold/icons';
+
+export default {
+  title: 'Components/Inline',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Inline> = args => (
+  <Inline {...args}>
+    <Check />
+    <Text>Check</Text>
+  </Inline>
+);

package/src/Inline/Inline.test.tsx

@@ -0,0 +1,99 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { ThemeProvider } from '@marigold/system';
+
+import { Inline } from './Inline';
+import { Text } from '../Text';
+
+// Setup
+// ---------------
+const theme = {
+  space: {
+    none: 0,
+    small: 2,
+    medium: 4,
+    large: 8,
+  },
+};
+
+const getLeftPadding = (element: HTMLElement) =>
+  getComputedStyle(element).getPropertyValue('padding-left');
+
+test('default space is "none"', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline>
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/).parentElement!;
+  const second = screen.getByText(/second/).parentElement!;
+
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second).toHaveStyle(`padding-left: 0px`);
+});
+
+test('accepts and uses spacing from theme', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline space="small">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+
+  expect(getLeftPadding(first)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-left: 2px`);
+});
+
+test('supports nesting', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline space="large">
+        <Inline space="small" data-testid="leftInline">
+          <Text>first</Text>
+          <Text>second</Text>
+        </Inline>
+        <Inline space="small" data-testid="rightInline">
+          <Text>third</Text>
+          <Text>fourth</Text>
+        </Inline>
+      </Inline>
+    </ThemeProvider>
+  );
+  const first = screen.getByText(/first/);
+  const second = screen.getByText(/second/);
+  const leftInline = screen.getByTestId('leftInline');
+
+  const third = screen.getByText(/third/);
+  const fourth = screen.getByText(/fourth/);
+  const rightInline = screen.getByTestId('rightInline');
+
+  expect(getLeftPadding(leftInline.parentElement!)).toEqual('');
+  expect(rightInline.parentElement).toHaveStyle(`padding-left: 8px`);
+
+  expect(getLeftPadding(first.parentElement!)).toEqual('');
+  expect(second.parentElement).toHaveStyle(`padding-left: 2px`);
+
+  expect(getLeftPadding(third.parentElement!)).toEqual('');
+  expect(fourth.parentElement).toHaveStyle(`padding-left: 2px`);
+});
+
+test('renders div per default', () => {
+  render(
+    <ThemeProvider theme={theme}>
+      <Inline data-testid="inline">
+        <Text>first</Text>
+        <Text>second</Text>
+      </Inline>
+    </ThemeProvider>
+  );
+
+  const inline = screen.getByTestId('inline');
+  expect(inline instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Inline/Inline.tsx

@@ -0,0 +1,38 @@
+import React, { Children } from 'react';
+import flattenChildren from 'react-keyed-flatten-children';
+
+import { ResponsiveStyleValue } from '@marigold/system';
+
+import { Box } from '../Box';
+
+export type InlineProps = {
+  space?: ResponsiveStyleValue<string>;
+  align?: 'top' | 'center' | 'bottom';
+};
+
+const ALIGNMENT = {
+  top: 'flex-start',
+  center: 'center',
+  bottom: 'flex-end',
+};
+
+export const Inline: React.FC<InlineProps> = ({
+  space = 'none',
+  align = 'center',
+  children,
+  ...props
+}) => (
+  <Box
+    display="inline-flex"
+    css={{ '> * + *': { pl: space } }}
+    alignItems={ALIGNMENT[align]}
+    {...props}
+  >
+    {Children.map(
+      flattenChildren(children) as unknown as React.ReactElement,
+      (child: React.ReactElement) => (
+        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
+      )
+    )}
+  </Box>
+);

package/src/Inline/index.ts

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