@marigold/components 0.3.0 → 0.4.0

package/src/Badge/Badge.test.tsx

@@ -1,65 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Badge } from './Badge';
-
-const theme = {
-  radii: {
-    none: 0,
-    larger: 8,
-  },
-  badge: {
-    __default: {
-      borderRadius: '8px',
-    },
-    fatBadge: {
-      borderRadius: '12px',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Badge title="badge" />
-    </ThemeProvider>
-  );
-  const badge = screen.getByTitle(/badge/);
-
-  expect(badge).toHaveStyle(`border-radius: 8px;`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Badge title="badge" />
-    </ThemeProvider>
-  );
-  const badge = screen.getByTitle(/badge/);
-
-  expect(badge instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('supports other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Badge variant="fatBadge" title="badge" />
-    </ThemeProvider>
-  );
-  const badge = screen.getByTitle(/badge/);
-
-  expect(badge).toHaveStyle(`border-radius: 12px;`);
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Badge className="custom-class-name" title="badge">
-        badge
-      </Badge>
-    </ThemeProvider>
-  );
-  const badge = screen.getByTitle(/badge/);
-
-  expect(badge.className).toMatch('custom-class-name');
-});

package/src/Badge/Badge.tsx

@@ -1,37 +0,0 @@
-import React from 'react';
-import { ComponentProps } from '@marigold/types';
-import { Box } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface BadgeThemeExtension<Value> {
-  badge?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type BadgeProps = {
-  variant?: string;
-  bgColor?: string;
-  borderColor?: string;
-} & ComponentProps<'div'>;
-
-// Component
-// ---------------
-export const Badge: React.FC<BadgeProps> = ({
-  variant = '',
-  bgColor = 'transparent',
-  borderColor = 'transparent',
-  children,
-  ...props
-}) => (
-  <Box
-    css={{ bg: bgColor, borderColor: borderColor }}
-    variant={`badge.${variant}`}
-    {...props}
-  >
-    {children}
-  </Box>
-);

package/src/Badge/index.ts

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

package/src/Box.ts

@@ -1,2 +0,0 @@
-export { Box } from '@marigold/system';
-export type { BoxProps, BoxOwnProps, StyleProps } from '@marigold/system';

package/src/Button/Button.stories.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Facebook } from '@marigold/icons';
-import { Button } from './Button';
-
-export default {
-  title: 'Components/Button',
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['primary', 'secondary', 'ghost', 'text', 'menu', 'select'],
-      description: 'What the button looks like',
-      table: {
-        defaultValue: {
-          summary: 'primary',
-        },
-      },
-    },
-    size: {
-      control: {
-        type: 'select',
-      },
-      options: ['large', 'small'],
-      description: 'How big the button is rendered',
-      table: {
-        defaultValue: {
-          summary: 'large',
-        },
-      },
-    },
-    disabled: {
-      control: {
-        type: 'boolean',
-      },
-      options: [true, false],
-      description: 'Disable the button',
-      table: {
-        defaultValue: {
-          summary: 'false',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Button> = args => (
-  <Button {...args}>
-    <Facebook /> Like me
-  </Button>
-);

package/src/Button/Button.test.tsx

@@ -1,149 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Button } from './Button';
-import { Facebook } from '@marigold/icons';
-
-const theme = {
-  fonts: {
-    body: 'Arial',
-    fancy: 'Inter',
-  },
-  space: {
-    none: 0,
-    small: 2,
-    large: 16,
-  },
-  button: {
-    large: {
-      p: 'large',
-    },
-    small: {
-      p: 'large',
-    },
-    primary: {
-      fontFamily: 'fancy',
-    },
-    secondary: {
-      fontFamily: 'body',
-    },
-  },
-};
-
-test('supports default variant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button>button</Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/button/);
-
-  expect(button).toHaveStyle(`font-family: Inter`);
-});
-
-test('supports default size', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button>button</Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/button/);
-
-  expect(button).toHaveStyle(`padding: 16px`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button variant="secondary">button</Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/button/);
-
-  expect(button).toHaveStyle(`font-family: Arial`);
-});
-
-test('accepts other size than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button size="small">button</Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/button/);
-
-  expect(button).toHaveStyle(`padding: 16px`);
-});
-
-test('renders <button> element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button>button</Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/button/);
-
-  expect(button instanceof HTMLButtonElement).toBeTruthy();
-});
-
-test('accepts other button components', () => {
-  const CustomButton = React.forwardRef<
-    HTMLSpanElement,
-    { children?: React.ReactNode }
-  >(() => <span>I am a Button!</span>);
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Button as={CustomButton}>Button</Button>
-    </ThemeProvider>
-  );
-
-  const button = screen.getByText('I am a Button!');
-  expect(button).toBeTruthy();
-});
-
-test('add icon in button works as expected', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button>
-        <Facebook fill="red" size={30} title="facebook" />
-        iconbutton
-      </Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/iconbutton/);
-  const icon = screen.getByTitle(/facebook/);
-
-  expect(button instanceof HTMLButtonElement).toBeTruthy();
-  expect(button).toHaveStyle('display: inline-flex');
-  expect(button.firstChild instanceof SVGElement).toBeTruthy();
-  expect(icon.getAttribute('fill')).toEqual('red');
-  expect(icon.getAttribute('width')).toEqual('30');
-});
-
-test('add space to button works as expected', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button title="iconbutton" space="small">
-        <Facebook fill="red" size={30} title="facebook" />
-        iconbutton
-      </Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByTitle(/iconbutton/);
-
-  const style = window.getComputedStyle(button);
-  expect(style.columnGap).toBe(`2px`);
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Button className="custom-class-name" title="button">
-        click
-      </Button>
-    </ThemeProvider>
-  );
-  const button = screen.getByTitle(/button/);
-
-  expect(button.className).toMatch('custom-class-name');
-});

package/src/Button/Button.tsx

@@ -1,64 +0,0 @@
-import React, { forwardRef, RefObject } from 'react';
-import { useButton } from '@react-aria/button';
-import {
-  PolymorphicComponentWithRef,
-  PolymorphicPropsWithRef,
-} from '@marigold/types';
-
-import { Box, BoxOwnProps } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface ButtonThemeExtension<Value> {
-  button?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type ButtonProps = PolymorphicPropsWithRef<BoxOwnProps, 'button'>;
-
-// Component
-// ---------------
-export const Button: PolymorphicComponentWithRef<BoxOwnProps, 'button'> =
-  forwardRef(
-    (
-      {
-        as = 'button',
-        variant = 'primary',
-        size = 'large',
-        space = 'none',
-        disabled,
-        children,
-        className,
-        ...props
-      },
-      ref
-    ) => {
-      const { buttonProps } = useButton(
-        {
-          ...props,
-          elementType: typeof as === 'string' ? as : 'span',
-          isDisabled: disabled,
-        },
-        ref as RefObject<HTMLSpanElement>
-      );
-
-      return (
-        <Box
-          {...buttonProps}
-          {...props}
-          as={as}
-          display="inline-flex"
-          alignItems="center"
-          variant={[`button.${variant}`, `button.${size}`]}
-          className={className}
-          ref={ref}
-          css={{ columnGap: space }}
-        >
-          {children}
-        </Box>
-      );
-    }
-  );

package/src/Button/index.ts

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

package/src/Card/Card.stories.tsx

@@ -1,41 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Card } from './Card';
-import { Text } from '../Text';
-
-export default {
-  title: 'Components/Card',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: '__default',
-        },
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'card title',
-    },
-    width: {
-      control: {
-        type: 'text',
-      },
-      description: 'max width of the card',
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Card> = args => (
-  <Card title="Card" {...args}>
-    <Text>
-      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse
-      dignissim dapibus elit.
-    </Text>
-  </Card>
-);

package/src/Card/Card.test.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-
-import { Card } from './Card';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 4,
-    medium: 8,
-  },
-  card: {
-    __default: {
-      p: 'medium',
-    },
-    custom: {
-      p: 'small',
-    },
-  },
-};
-
-test('supports default variant', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Card>card</Card>
-    </ThemeProvider>
-  );
-  const card = screen.getByText(/card/);
-  expect(card).toHaveStyle(`padding: 8px`);
-});
-
-test('supports other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Card variant="custom">card</Card>
-    </ThemeProvider>
-  );
-  const card = screen.getByText(/card/);
-  expect(card).toHaveStyle(`padding: 4px`);
-});
-
-test('accepts title prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Card title="title">content</Card>
-    </ThemeProvider>
-  );
-  const title = screen.getByText(/title/);
-  expect(title).toBeDefined();
-});
-
-test('accepts width prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Card width="320px">content</Card>
-    </ThemeProvider>
-  );
-  const card = screen.getByText(/content/);
-  expect(card).toHaveStyle(`maxWidth: 320px`);
-});
-
-test('renders correct HTMl element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Card>card</Card>
-    </ThemeProvider>
-  );
-  const card = screen.getByText(/card/);
-  expect(card instanceof HTMLDivElement).toBeTruthy();
-});

package/src/Card/Card.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import { ResponsiveStyleValue } from '@marigold/system';
-import { ComponentProps } from '@marigold/types';
-
-import { Box } from '../Box';
-
-// Theme Extension
-// ---------------
-export interface CardThemeExtension<Value> {
-  card?: {
-    [key: string]: Value;
-  };
-}
-
-// Props
-// ---------------
-export type CardProps = {
-  title?: string;
-  width?: ResponsiveStyleValue<string>;
-  variant?: string;
-} & ComponentProps<'div'>;
-
-// Component
-// ---------------
-export const Card: React.FC<CardProps> = ({
-  variant = '',
-  title,
-  width,
-  className,
-  children,
-  ...props
-}) => {
-  return (
-    <Box
-      {...props}
-      variant={`card.${variant}`}
-      maxWidth={width}
-      className={className}
-    >
-      {title && (
-        <Box as="h2" variant="text.h2" pb="small">
-          {title}
-        </Box>
-      )}
-      {children}
-    </Box>
-  );
-};

package/src/Card/index.ts

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

package/src/Checkbox/Checkbox.stories.mdx

@@ -1,97 +0,0 @@
-import { ArgsTable, Canvas, Meta, Story } from '@storybook/addon-docs';
-import { Checkbox } from './Checkbox';
-import { useState } from 'react';
-
-<Meta
-  title="Components/Checkbox"
-  parameters={{
-    actions: {
-      handles: ['click'],
-    },
-  }}
-  argTypes={{
-    id: {
-      control: {
-        type: 'text',
-      },
-      type: { required: true },
-      description: 'Unique ID',
-    },
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Checkbox variant',
-      table: {
-        defaultValue: {
-          summary: 'default',
-        },
-      },
-    },
-    labelVariant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Checkbox label variant',
-      table: {
-        defaultValue: {
-          summary: 'inline',
-        },
-      },
-    },
-    label: {
-      control: {
-        type: 'text',
-      },
-      description: 'Label',
-    },
-    required: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Require',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    error: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'Error',
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    errorMessage: {
-      control: {
-        type: 'text',
-      },
-      description: 'Error Message',
-    },
-  }}
-/>
-
-# Checkbox
-
-export const Template = ({ onChange, checked, ...args }) => {
-  const [isChecked, setChecked] = useState(false);
-  return (
-    <Checkbox
-      onChange={() => setChecked(!isChecked)}
-      checked={isChecked}
-      label="Checkbox Label"
-      {...args}
-    />
-  );
-};
-
-<Canvas>
-  <Story name="Default">{Template.bind({})}</Story>
-</Canvas>
-
-<ArgsTable story="Default" />