@marigold/components 0.3.3 → 0.4.0

package/src/Field/Field.stories.tsx

@@ -1,110 +0,0 @@
-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,130 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Field } from './Field';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 4,
-    medium: 8,
-  },
-  label: {
-    above: {
-      fontSize: '14px',
-    },
-  },
-  input: {
-    __default: {
-      padding: 'small',
-    },
-    error: {
-      padding: 'medium',
-    },
-  },
-};
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="label" />
-    </ThemeProvider>
-  );
-  const field = screen.getByText(/label/);
-
-  expect(field instanceof HTMLLabelElement).toBeTruthy();
-});
-
-test('supports default variant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="Name" data-testid="field" />
-    </ThemeProvider>
-  );
-  const field = screen.getByTestId(/field/);
-  expect(field).toHaveStyle(`padding: 4px`);
-});
-
-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('supports default variantLabel', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Field htmlFor="myId" label="Name" />
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/Name/);
-  expect(label).toHaveStyle(`font-size: 14px`);
-});
-
-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', () => {
-  render(<Field htmlFor="myId" label="Name" />);
-  const field = screen.getByText(/Name/);
-
-  expect(field).toBeDefined();
-});
-
-test('supports htmlFor prop', () => {
-  render(<Field htmlFor="myId" label="Name" />);
-  const field = screen.getByText(/Name/);
-
-  expect(field).toHaveAttribute('for');
-});
-
-test('supports required prop', () => {
-  render(<Field htmlFor="myId" label="label" required />);
-  const fieldLabel = screen.getByText(/label/);
-
-  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', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Field
-        htmlFor="myId"
-        label="label"
-        className="custom-class-name"
-        title="field"
-        data-testid="field"
-      />
-    </ThemeProvider>
-  );
-  const field = screen.getByTestId(/field/);
-
-  expect(field.className).toMatch('custom-class-name');
-});

package/src/Field/Field.tsx

@@ -1,56 +0,0 @@
-import React from 'react';
-import { Exclamation } from '@marigold/icons';
-import { ComponentProps } from '@marigold/types';
-
-import { Input } from '../Input';
-import { Label } from '../Label';
-import { ValidationMessage } from '../ValidationMessage';
-
-// Props
-// ---------------
-export type FieldProps = {
-  variant?: string;
-  labelVariant?: string;
-  htmlFor: string;
-  label: string;
-  required?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-  disabled?: boolean;
-} & ComponentProps<'input'>;
-
-// 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/Field/index.ts

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

package/src/Image/Image.stories.tsx

@@ -1,34 +0,0 @@
-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,73 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Image } from './Image';
-
-const theme = {
-  colors: {
-    primary: 'hotpink',
-  },
-  image: {
-    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

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

package/src/Image/index.ts

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

package/src/Inline/Inline.stories.tsx

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

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

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

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

package/src/Input/Input.stories.tsx

@@ -1,54 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Input } from './Input';
-import { Label } from '../Label';
-
-export default {
-  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',
-      ],
-      defaultValue: 'text',
-      table: {
-        defaultValue: {
-          summary: 'text',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Input> = args => (
-  <Label htmlFor="input">
-    Label
-    <Input id="input" placeholder="Placeholder..." {...args} />
-  </Label>
-);