@marigold/components 0.3.2 → 0.5.0

package/src/Stack/Stack.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Stack } from './Stack';
-import { Text } from '../Text';
-
-export default {
-  title: 'Components/Stack',
-  argTypes: {
-    space: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'none',
-        'xxsmall',
-        'xsmall',
-        'small',
-        'medium',
-        'large',
-        'xlarge',
-        'xxlarge',
-      ],
-      description: 'Responsive Style Value',
-      table: {
-        defaultValue: {
-          summary: 'none',
-        },
-      },
-    },
-    align: {
-      control: {
-        type: 'select',
-      },
-      options: ['left', 'right', 'center'],
-      description: 'HTML element style',
-      table: {
-        defaultValue: {
-          summary: 'left',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Stack> = args => (
-  <Stack {...args}>
-    <Text as="h2" variant="headline2">
-      Heading
-    </Text>
-    <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>
-  </Stack>
-);

package/src/Stack/Stack.test.tsx

@@ -1,138 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-
-import { Stack } from './Stack';
-import { Text } from '../Text';
-
-// Setup
-// ---------------
-const theme = {
-  space: {
-    none: 0,
-    small: 2,
-    medium: 4,
-    large: 8,
-  },
-};
-
-const getTopPadding = (element: HTMLElement) =>
-  getComputedStyle(element).getPropertyValue('padding-top');
-
-test('default space is "none"', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack>
-        <Text>first</Text>
-        <Text>second</Text>
-        <Text>third</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-  const first = screen.getByText(/first/).parentElement!;
-  const second = screen.getByText(/second/).parentElement!;
-  const third = screen.getByText(/third/).parentElement!;
-
-  expect(getTopPadding(first)).toEqual('');
-  expect(second).toHaveStyle(`padding-top: 0px`);
-  expect(third).toHaveStyle(`padding-top: 0px`);
-});
-
-test('accepts and uses spacing from theme', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack space="small">
-        <Text>first</Text>
-        <Text>second</Text>
-        <Text>third</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-  const first = screen.getByText(/first/);
-  const second = screen.getByText(/second/);
-  const third = screen.getByText(/third/);
-
-  expect(getTopPadding(first)).toEqual('');
-  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
-  expect(third.parentElement).toHaveStyle(`padding-top: 2px`);
-});
-
-test('aligns children left by default', () => {
-  render(
-    <Stack data-testid="stack">
-      <Text>first</Text>
-    </Stack>
-  );
-  const stack = screen.getByTestId('stack');
-
-  expect(stack).toHaveStyle(`align-items: flex-start`);
-});
-
-test('allows to aligns children to the center', () => {
-  render(
-    <Stack align="center" data-testid="stack">
-      <Text>first</Text>
-    </Stack>
-  );
-  const stack = screen.getByTestId('stack');
-
-  expect(stack).toHaveStyle(`align-items: center`);
-});
-
-test('allows to aligns children to the right', () => {
-  render(
-    <Stack align="right" data-testid="stack">
-      <Text>first</Text>
-    </Stack>
-  );
-  const stack = screen.getByTestId('stack');
-
-  expect(stack).toHaveStyle(`align-items: flex-end`);
-});
-
-test('supports nesting', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack space="large">
-        <Stack space="small" data-testid="upperStack">
-          <Text>first</Text>
-          <Text>second</Text>
-        </Stack>
-        <Stack space="small" data-testid="lowerStack">
-          <Text>third</Text>
-          <Text>fourth</Text>
-        </Stack>
-      </Stack>
-    </ThemeProvider>
-  );
-  const first = screen.getByText(/first/);
-  const second = screen.getByText(/second/);
-  const upperStack = screen.getByTestId('upperStack');
-
-  const third = screen.getByText(/third/);
-  const fourth = screen.getByText(/fourth/);
-  const lowerStack = screen.getByTestId('lowerStack');
-
-  expect(getTopPadding(upperStack.parentElement!)).toEqual('');
-  expect(lowerStack.parentElement).toHaveStyle(`padding-top: 8px`);
-
-  expect(getTopPadding(first.parentElement!)).toEqual('');
-  expect(second.parentElement).toHaveStyle(`padding-top: 2px`);
-
-  expect(getTopPadding(third.parentElement!)).toEqual('');
-  expect(fourth.parentElement).toHaveStyle(`padding-top: 2px`);
-});
-
-test('renders as div per default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Stack data-testid="stack">
-        <Text>first</Text>
-        <Text>second</Text>
-      </Stack>
-    </ThemeProvider>
-  );
-
-  const stack = screen.getByTestId('stack');
-  expect(stack instanceof HTMLDivElement).toBeTruthy();
-});

package/src/Stack/Stack.tsx

@@ -1,39 +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 StackProps = {
-  space?: ResponsiveStyleValue<string>;
-  align?: 'left' | 'right' | 'center';
-};
-
-const ALIGNMENT = {
-  left: 'flex-start',
-  center: 'center',
-  right: 'flex-end',
-};
-
-export const Stack: React.FC<StackProps> = ({
-  space = 'none',
-  align = 'left',
-  children,
-  ...props
-}) => (
-  <Box
-    {...props}
-    display="flex"
-    flexDirection="column"
-    alignItems={ALIGNMENT[align]}
-    css={{ '> * + *': { pt: space } }}
-  >
-    {Children.map(
-      flattenChildren(children) as unknown as React.ReactElement,
-      (child: React.ReactElement) => (
-        <Box>{React.cloneElement(child, {}, child.props.children)}</Box>
-      )
-    )}
-  </Box>
-);

package/src/Stack/index.ts

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

package/src/Text/Text.stories.tsx

@@ -1,61 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Text } from './Text';
-
-export default {
-  title: 'Components/Text',
-  argTypes: {
-    as: {
-      control: {
-        type: 'select',
-      },
-      options: ['span', 'p', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6'],
-      description: 'Set HTML element',
-      table: {
-        defaultValue: {
-          summary: 'span',
-        },
-      },
-    },
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: [
-        'body',
-        'headline1',
-        'headline2',
-        'headline3',
-        'headline4',
-        'headline5',
-        'headline6',
-      ],
-      description: 'CHoose between body and different headlines',
-      table: {
-        defaultValue: {
-          summary: 'body',
-        },
-      },
-    },
-    color: {
-      control: {
-        type: 'text',
-      },
-      description: 'Text color',
-      table: {
-        defaultValue: {
-          summary: 'inherit',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Text> = args => (
-  <Text {...args}>
-    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>
-);

package/src/Text/Text.test.tsx

@@ -1,99 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-
-import { Text } from './Text';
-
-const theme = {
-  colors: {
-    primary: 'hotpink',
-    black: '#000',
-    white: '#FFF',
-    blue: '#2980b9',
-  },
-  text: {
-    body: {
-      fontFamily: 'Oswald Regular',
-    },
-    headline1: {
-      fontFamily: 'Inter',
-    },
-  },
-};
-
-test('uses `text.body` as default variant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Text>text</Text>
-    </ThemeProvider>
-  );
-  const text = screen.getByText(/text/);
-
-  expect(text).toHaveStyle(`font-family: Oswald Regular`);
-});
-
-test('allows to change variants via `variant` prop (with "text" prefix)', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Text variant="headline1">text</Text>
-    </ThemeProvider>
-  );
-  const text = screen.getByText(/text/);
-
-  expect(text).toHaveStyle(`font-family: Inter`);
-});
-
-test('renders a <span> element by default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Text>text</Text>
-    </ThemeProvider>
-  );
-  const text = screen.getByText(/text/);
-
-  expect(text instanceof HTMLSpanElement).toBeTruthy();
-});
-
-test('allows to control the rendered element via the `as` prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Text as="p">text</Text>
-    </ThemeProvider>
-  );
-  const text = screen.getByText(/text/);
-
-  expect(text instanceof HTMLParagraphElement).toBeTruthy();
-});
-
-test.each([
-  [{ color: 'primary' }, 'color: hotpink'],
-  [{ color: 'blue' }, 'color: #2980b9'],
-  [{ align: 'center' }, 'text-align: center'],
-  [{ cursor: 'pointer' }, 'cursor: pointer'],
-  [{ outline: 'dashed red' }, 'outline: dashed red'],
-  [{ userSelect: 'none' }, 'user-select: none'],
-])('test style prop %o', (...args) => {
-  const props = args.shift();
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Text {...props}>This is the Text!</Text>
-    </ThemeProvider>
-  );
-
-  const box = screen.getByText('This is the Text!');
-  args.forEach((style: any) => {
-    expect(box).toHaveStyle(style);
-  });
-});
-
-test('forwards ref', () => {
-  const ref = React.createRef<HTMLButtonElement>();
-  render(
-    <Text as="button" ref={ref}>
-      button
-    </Text>
-  );
-
-  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
-});

package/src/Text/Text.tsx

@@ -1,60 +0,0 @@
-import React, { forwardRef } from 'react';
-import { ResponsiveStyleValue } from '@marigold/system';
-import {
-  PolymorphicComponentWithRef,
-  PolymorphicPropsWithRef,
-} from '@marigold/types';
-
-import { Box, BoxOwnProps } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface TextThemeExtension<Value> {
-  text?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type TextOwnProps = {
-  align?: ResponsiveStyleValue<string>;
-  color?: ResponsiveStyleValue<string>;
-  cursor?: ResponsiveStyleValue<string>;
-  outline?: ResponsiveStyleValue<string>;
-  userSelect?: ResponsiveStyleValue<string>;
-} & BoxOwnProps;
-
-export type TextProps = PolymorphicPropsWithRef<TextOwnProps, 'span'>;
-
-// Component
-// ---------------
-export const Text: PolymorphicComponentWithRef<TextOwnProps, 'span'> =
-  forwardRef(
-    (
-      {
-        as = 'span',
-        variant = 'body',
-        children,
-        className,
-        align,
-        color,
-        cursor,
-        outline,
-        userSelect,
-        ...props
-      },
-      ref
-    ) => (
-      <Box
-        {...props}
-        as={as}
-        variant={`text.${variant}`}
-        css={{ textAlign: align, color, cursor, outline, userSelect }}
-        className={className}
-        ref={ref}
-      >
-        {children}
-      </Box>
-    )
-  );

package/src/Text/index.ts

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

package/src/Textarea/Textarea.stories.tsx

@@ -1,64 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Textarea } from '.';
-
-export default {
-  title: 'Components/Textarea',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: '__default',
-        },
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Label text',
-      defaultValue: 'Textarea Label',
-    },
-    htmlFor: {
-      control: {
-        type: 'text',
-      },
-      description: 'Bind to label',
-      defaultValue: 'textareaId',
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Error',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-      description: 'Error Message',
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Textarea> = args => (
-  <Textarea placeholder="Placeholder..." {...args} />
-);

package/src/Textarea/Textarea.test.tsx

@@ -1,95 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Textarea } from '../Textarea';
-
-const theme = {
-  fonts: {
-    body: 'Inter Regular',
-    fancy: 'Roboto',
-  },
-  textarea: {
-    __default: {
-      fontFamily: 'body',
-    },
-    textarea2: {
-      fontFamily: 'fancy',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea title="textarea" />
-    </ThemeProvider>
-  );
-  const textarea = screen.getByTitle(/textarea/);
-
-  expect(textarea).toHaveStyle(`font-family: Inter Regular`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea variant="textarea2" title="textarea" />
-    </ThemeProvider>
-  );
-  const textarea = screen.getByTitle(/textarea/);
-
-  expect(textarea).toHaveStyle(`font-family: Roboto`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea title="textarea" />
-    </ThemeProvider>
-  );
-  const textarea = screen.getByTitle(/textarea/);
-
-  expect(textarea instanceof HTMLTextAreaElement).toBeTruthy();
-});
-
-test('supports label prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea label="test" htmlFor="myId" title="textarea" />
-    </ThemeProvider>
-  );
-  const textarea = screen.getByText(/test/);
-
-  expect(textarea instanceof HTMLLabelElement).toBeTruthy();
-});
-
-test('supports error and errorMessage prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea error errorMessage="error" label="label" title="textarea" />
-    </ThemeProvider>
-  );
-  const textarea = screen.getByText(/error/);
-  expect(textarea).toBeDefined();
-});
-
-test('supports required prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea label="test" htmlFor="myId" required title="textarea" />
-    </ThemeProvider>
-  );
-  const label = screen.getByText(/test/);
-
-  expect(label.nextSibling instanceof SVGElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Textarea className="custom-class-name" title="textarea" />
-    </ThemeProvider>
-  );
-  const textarea = screen.getByTitle(/textarea/);
-
-  expect(textarea.className).toMatch('custom-class-name');
-});

package/src/Textarea/Textarea.tsx

@@ -1,62 +0,0 @@
-import React from 'react';
-import { Exclamation } from '@marigold/icons';
-import { ComponentProps } from '@marigold/types';
-
-import { ValidationMessage } from '../ValidationMessage';
-import { Label } from '../Label';
-import { Box } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface TextareaThemeExtension<Value> {
-  textarea?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type TextareaProps = {
-  variant?: string;
-  label?: string;
-  htmlFor?: string;
-  required?: boolean;
-  error?: boolean;
-  errorMessage?: string;
-} & ComponentProps<'textarea'>;
-
-// Component
-// ---------------
-export const Textarea: React.FC<TextareaProps> = ({
-  variant = '',
-  htmlFor = 'textarea',
-  label,
-  error,
-  errorMessage,
-  required,
-  className = '',
-  children,
-  ...props
-}) => (
-  <Box>
-    {label && (
-      <Label htmlFor={htmlFor} required={required}>
-        {label}
-      </Label>
-    )}
-    <Box
-      as="textarea"
-      {...props}
-      display="block"
-      variant={`textarea.${variant}`}
-      css={{ outlineColor: error && 'error' }}
-      className={className}
-    />
-    {error && errorMessage && (
-      <ValidationMessage>
-        <Exclamation size={16} />
-        {errorMessage}
-      </ValidationMessage>
-    )}
-  </Box>
-);

package/src/Textarea/index.ts

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