@marigold/system 0.3.3 → 0.4.0

package/src/Box.test.tsx

@@ -1,308 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from './useTheme';
-import { Box, StyleProps } from './Box';
-import { normalize } from './normalize';
-
-const theme = {
-  colors: {
-    primary: 'black',
-    secondary: 'hotpink',
-    black: '#000',
-    white: '#fff',
-    blue: 'cornflowerblue',
-  },
-  fontSizes: {
-    body: 16,
-    small: 12,
-    large: 24,
-  },
-  space: {
-    none: 0,
-    xsmall: 2,
-    small: 4,
-    medium: 8,
-    large: 16,
-  },
-  sizes: {
-    none: 0,
-    small: 8,
-    medium: 16,
-    large: 32,
-  },
-  borders: { none: 'none', regular: '1px solid black' },
-  radii: { none: 0, small: 2, medium: 4 },
-  opacities: {
-    hidden: 0,
-    faded: 0.5,
-    visible: 1,
-  },
-  transitions: { none: 'none', regular: '1s opacity' },
-  shadows: {
-    none: 'none',
-    regular: '3px 3px 5px 6px #ccc',
-    inset: 'inset 0 0 10px #000000',
-  },
-  text: {
-    body: {
-      fontSize: 'body',
-      color: 'primary',
-      bg: 'white',
-    },
-    headline1: {
-      fontSize: 'large',
-      color: 'secondary',
-    },
-    whitespace: {
-      p: 'medium',
-    },
-  },
-  variant: {
-    spacing: {
-      m: 'large',
-      p: 'large',
-    },
-  },
-};
-
-test('renders a <div> by default', () => {
-  render(<Box>Test</Box>);
-  const testelem = screen.getByText('Test');
-
-  expect(testelem instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('changes rendered element via "as" prop', () => {
-  render(<Box as="p">Test</Box>);
-  const testelem = screen.getByText('Test');
-
-  expect(testelem instanceof HTMLParagraphElement).toBeTruthy();
-});
-
-test('supports custom className', () => {
-  render(<Box className="my-custom-class">Test</Box>);
-  const element = screen.getByText('Test');
-
-  expect(element.getAttribute('class')).toMatch('my-custom-class');
-});
-
-test('passes down HTML attributes', () => {
-  render(
-    <Box className="my-custom-class" id="element-id" disabled>
-      Test
-    </Box>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element.getAttribute('id')).toEqual('element-id');
-  expect(element.getAttribute('disabled')).toMatch('');
-});
-
-test('forwards ref', () => {
-  const ref = React.createRef<HTMLButtonElement>();
-  render(
-    <Box as="button" ref={ref}>
-      button
-    </Box>
-  );
-
-  expect(ref.current instanceof HTMLButtonElement).toBeTruthy();
-});
-
-test('apply normalized styles', () => {
-  render(<Box>Test</Box>);
-  const element = screen.getByText('Test');
-  const { base } = normalize;
-
-  // Smoketest
-  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
-  expect(element).toHaveStyle(`margin: ${base.margin}px`);
-  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
-});
-
-test('base normalization is always applied', () => {
-  render(<Box as="button">Test</Box>);
-  const element = screen.getByText('Test');
-  const { base } = normalize;
-
-  expect(element).toHaveStyle(`box-sizing: ${base.boxSizing}`);
-  expect(element).toHaveStyle(`margin: ${base.margin}px`);
-  expect(element).toHaveStyle(`min-width: ${base.minWidth}`);
-});
-
-test('apply normalized styles based on element', () => {
-  render(<Box as="h1">Test</Box>);
-  const element = screen.getByText('Test');
-  const { h1 } = normalize;
-
-  expect(element).toHaveStyle(`overflow-wrap: ${h1.overflowWrap}`);
-});
-
-test('accepts default styling via "__baseCSS" prop', () => {
-  render(<Box __baseCSS={{ color: 'hotpink' }}>Test</Box>);
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle('color: hotpink');
-});
-
-test('default styling overrides normalization', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box __baseCSS={{ m: 'medium' }}>Test</Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`margin: ${theme.space.medium}px`);
-});
-
-test('variants are applied correctly', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box variant="text.body">Test</Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.body}px`);
-  expect(element).toHaveStyle(`color: ${theme.colors.primary}`);
-});
-
-test('accept an array of variants', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box as="p" variant={['text.headline1', 'text.whitespace']}>
-        Test
-      </Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.large}px`);
-  expect(element).toHaveStyle(`color: ${theme.colors.secondary}`);
-  expect(element).toHaveStyle(`padding: ${theme.space.medium}px`);
-});
-
-test('variants override normalization and default styles', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box __baseCSS={{ p: 'small' }} variant="variant.spacing">
-        Test
-      </Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`margin: ${theme.space.large}px`);
-  expect(element).toHaveStyle(`padding: ${theme.space.large}px`);
-});
-
-test.each([
-  [{ display: 'flex' }, 'display: flex'],
-  [{ height: 'small' }, 'height: 8px'],
-  [{ width: 'medium' }, 'width: 16px'],
-  [{ minWidth: 'small' }, 'min-width: 8px'],
-  [{ maxWidth: 'large' }, 'max-width: 32px'],
-  [{ position: 'absolute' }, 'position: absolute'],
-  [{ top: 'none' }, 'top: 0px'],
-  [{ bottom: 'xsmall' }, 'bottom: 2px'],
-  [{ right: 'medium' }, 'right: 8px'],
-  [{ left: 'small' }, 'left: 4px'],
-  [{ zIndex: 1000 }, 'z-index: 1000'],
-  [{ p: 'xsmall' }, 'padding: 2px'],
-  [{ px: 'xsmall' }, 'padding-left: 2px', 'padding-right: 2px'],
-  [{ py: 'small' }, 'padding-top: 4px', 'padding-bottom: 4px'],
-  [{ pt: 'xsmall' }, 'padding-top: 2px'],
-  [{ pb: 'xsmall' }, 'padding-bottom: 2px'],
-  [{ pl: 'xsmall' }, 'padding-left: 2px'],
-  [{ pr: 'xsmall' }, 'padding-right: 2px'],
-  [{ m: 'xsmall' }, 'margin: 2px'],
-  [{ mx: 'xsmall' }, 'margin-left: 2px', 'margin-right: 2px'],
-  [{ my: 'small' }, 'margin-top: 4px', 'margin-bottom: 4px'],
-  [{ mt: 'xsmall' }, 'margin-top: 2px'],
-  [{ mb: 'xsmall' }, 'margin-bottom: 2px'],
-  [{ ml: 'xsmall' }, 'margin-left: 2px'],
-  [{ mr: 'xsmall' }, 'margin-right: 2px'],
-  [{ flexDirection: 'column' }, 'flex-direction: column'],
-  [{ flexWrap: 'wrap' }, 'flex-wrap: wrap'],
-  [{ flexShrink: 5 }, 'flex-shrink: 5'],
-  [{ flexGrow: 1 }, 'flex-grow: 1'],
-  [{ alignItems: 'baseline' }, 'align-items: baseline'],
-  [{ justifyContent: 'space-between' }, 'justify-content: space-between'],
-  [{ bg: 'secondary' }, 'background-color: hotpink'],
-  [{ border: 'regular' }, 'border: 1px solid black'],
-  [{ borderRadius: 'medium' }, 'border-radius: 4px'],
-  [{ boxShadow: 'regular' }, 'box-shadow: 3px 3px 5px 6px #ccc'],
-  [{ opacity: 'faded' }, 'opacity: 0.5'],
-  [{ overflow: 'hidden' }, 'overflow: hidden'],
-  [{ transition: 'regular' }, 'transition: 1s opacity'],
-])('supports style prop (%o)', (...args) => {
-  const props = args.shift() as StyleProps;
-
-  render(
-    <ThemeProvider theme={theme}>
-      <Box {...props}>What's in the box!</Box>
-    </ThemeProvider>
-  );
-
-  const box = screen.getByText(`What's in the box!`);
-  args.forEach((style: any) => {
-    expect(box).toHaveStyle(style);
-  });
-});
-
-test('style props override normalization, defaults and variants', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box
-        __baseCSS={{ p: 'small' }}
-        variant="text.body"
-        bg="blue"
-        m="medium"
-        p="large"
-      >
-        Test
-      </Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`margin: ${theme.space.medium}px`); // overrides normalization
-  expect(element).toHaveStyle(`padding: ${theme.space.large}px`); // overrides default
-  expect(element).toHaveStyle(`background: ${theme.colors.blue}`); // overrides variant
-});
-
-test('apply custom styling via css prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box css={{ color: 'secondary', padding: '1rem' }}>Test</Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`padding: 1rem`);
-  expect(element).toHaveStyle(`color: ${theme.colors.secondary}`);
-});
-
-test('custom styling overrides normalization, defaults, variants and style props', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Box
-        __baseCSS={{ p: 'small' }}
-        variant="text.body"
-        bg="black"
-        css={{ fontSize: 'large', m: 'small', p: 'large', bg: 'blue' }}
-      >
-        Test
-      </Box>
-    </ThemeProvider>
-  );
-  const element = screen.getByText('Test');
-
-  expect(element).toHaveStyle(`margin: ${theme.space.small}px`); // overrides normalization
-  expect(element).toHaveStyle(`padding: ${theme.space.large}px`); // overrides default
-  expect(element).toHaveStyle(`font-size: ${theme.fontSizes.large}px`); // overrides variant
-  expect(element).toHaveStyle(`background: ${theme.colors.blue}`); // overrides style prop
-
-  expect(element).not.toHaveStyle(`color: ${theme.colors.primary}px`); // variant part that is not overriden
-});

package/src/Box.tsx

@@ -1,199 +0,0 @@
-import { jsx, Theme } from '@emotion/react';
-import { css as transformStyleObject } from '@theme-ui/css';
-import { forwardRef } from 'react';
-import {
-  PolymorphicPropsWithRef,
-  PolymorphicComponentWithRef,
-} from '@marigold/types';
-
-import { getNormalizedStyles } from './normalize';
-import { CSSObject } from './types';
-import { ensureArrayVariant } from './variant';
-
-export type StyleProps = Pick<
-  CSSObject,
-  | 'display'
-  | 'height'
-  | 'width'
-  | 'minWidth'
-  | 'maxWidth'
-  | 'position'
-  | 'top'
-  | 'bottom'
-  | 'right'
-  | 'left'
-  | 'zIndex'
-  | 'p'
-  | 'px'
-  | 'py'
-  | 'pt'
-  | 'pb'
-  | 'pl'
-  | 'pr'
-  | 'm'
-  | 'mx'
-  | 'my'
-  | 'mt'
-  | 'mb'
-  | 'ml'
-  | 'mr'
-  | 'flexDirection'
-  | 'flexWrap'
-  | 'flexShrink'
-  | 'flexGrow'
-  | 'alignItems'
-  | 'justifyContent'
-  | 'bg'
-  | 'border'
-  | 'borderRadius'
-  | 'boxShadow'
-  | 'opacity'
-  | 'overflow'
-  | 'transition'
->;
-
-export type BoxOwnProps = {
-  css?: CSSObject;
-  variant?: string | string[];
-  /**
-   * Use to set base styles for the component
-   * @internal Used to set default styles for Marigold components
-   */
-  __baseCSS?: CSSObject;
-} & StyleProps;
-
-export type BoxProps = PolymorphicPropsWithRef<BoxOwnProps, 'div'>;
-
-/**
- * Check if there is any falsy value or empty object
- */
-const isNotEmpty = (val: any) =>
-  !(val && Object.keys(val).length === 0 && val.constructor === Object);
-
-type CreateStyleProps = {
-  as?: BoxProps['as'];
-  __baseCSS?: BoxOwnProps['__baseCSS'];
-  variant?: BoxOwnProps['variant'];
-  css?: BoxOwnProps['css'];
-  styles?: StyleProps;
-};
-
-const createThemedStyle =
-  ({ as, __baseCSS, variant, styles, css }: CreateStyleProps) =>
-  (theme: Theme) => {
-    return [
-      getNormalizedStyles(as),
-      transformStyleObject(__baseCSS)(theme),
-      ...ensureArrayVariant(variant).map(v =>
-        transformStyleObject({ variant: v })(theme)
-      ),
-      transformStyleObject(styles)(theme),
-      transformStyleObject(css)(theme),
-    ].filter(isNotEmpty);
-  };
-
-export const Box: PolymorphicComponentWithRef<BoxOwnProps, 'div'> = forwardRef(
-  (
-    {
-      as = 'div',
-      children,
-      __baseCSS,
-      variant,
-      css = {},
-      display,
-      height,
-      width,
-      minWidth,
-      maxWidth,
-      position,
-      top,
-      bottom,
-      right,
-      left,
-      zIndex,
-      p,
-      px,
-      py,
-      pt,
-      pb,
-      pl,
-      pr,
-      m,
-      mx,
-      my,
-      mt,
-      mb,
-      ml,
-      mr,
-      flexDirection,
-      flexWrap,
-      flexShrink,
-      flexGrow,
-      alignItems,
-      justifyContent,
-      bg,
-      border,
-      borderRadius,
-      boxShadow,
-      opacity,
-      overflow,
-      transition,
-      ...props
-    },
-    ref
-  ) =>
-    jsx(
-      as,
-      {
-        ...props,
-        css: createThemedStyle({
-          as,
-          __baseCSS,
-          variant,
-          css,
-          styles: {
-            display,
-            height,
-            width,
-            minWidth,
-            maxWidth,
-            position,
-            top,
-            bottom,
-            right,
-            left,
-            zIndex,
-            p,
-            px,
-            py,
-            pt,
-            pb,
-            pl,
-            pr,
-            m,
-            mx,
-            my,
-            mt,
-            mb,
-            ml,
-            mr,
-            flexDirection,
-            flexWrap,
-            flexShrink,
-            flexGrow,
-            alignItems,
-            justifyContent,
-            bg,
-            border,
-            borderRadius,
-            boxShadow,
-            opacity,
-            overflow,
-            transition,
-          },
-        }),
-        ref,
-      },
-      children
-    )
-);

package/src/Global.test.tsx

@@ -1,57 +0,0 @@
-import React from 'react';
-import { render } from '@testing-library/react';
-import { ThemeProvider } from './useTheme';
-
-import { Global } from './Global';
-
-test('applies normlaization to html and body', () => {
-  const root = render(<Global />);
-
-  const html = window.getComputedStyle(root.baseElement.parentElement!);
-  expect(html.height).toBe('100%');
-  const body = window.getComputedStyle(root.baseElement);
-  expect(body.height).toBe('100%');
-  expect(body.lineHeight).toBe('1.5');
-});
-
-test('applies global styles for body and html based on `theme.root`', () => {
-  const theme = {
-    colors: {
-      background: '#fff',
-    },
-    fonts: {
-      body: 'Inter',
-    },
-    lineHeights: {
-      body: 2.5,
-    },
-    fontWeights: {
-      body: 500,
-      html: 700,
-    },
-    root: {
-      body: {
-        fontFamily: 'body',
-        lineHeight: 'body',
-        fontWeight: 'body',
-      },
-      html: {
-        bg: 'background',
-      },
-    },
-  };
-
-  const root = render(
-    <ThemeProvider theme={theme}>
-      <Global />
-    </ThemeProvider>
-  );
-
-  const html = root.baseElement.parentElement;
-  expect(html).toHaveStyle(`background: ${theme.colors.background}`);
-
-  const body = root.baseElement;
-  expect(body).toHaveStyle(`font-family: ${theme.fonts.body}`);
-  expect(body).toHaveStyle(`line-height: ${theme.lineHeights.body}`);
-  expect(body).toHaveStyle(`font-weight: ${theme.fontWeights.body}`);
-});

package/src/Global.tsx

@@ -1,34 +0,0 @@
-import React from 'react';
-import { Global as EmotionGlobal } from '@emotion/react';
-import { useTheme } from './useTheme';
-
-/**
- * CSS snippet and idea from:
- * https://css-tricks.com/revisiting-prefers-reduced-motion-the-reduced-motion-media-query/
- */
-const reduceMotionStyles = {
-  '@media screen and (prefers-reduced-motion: reduce), (update: slow)': {
-    '*': {
-      animationDuration: '0.001ms !important',
-      animationIterationCount: '1 !important',
-      transitionDuration: '0.001ms !important',
-    },
-  },
-};
-
-export const Global = () => {
-  const { css } = useTheme();
-  const styles = css({
-    html: {
-      height: '100%',
-      variant: 'root.html',
-    },
-    body: {
-      height: '100%',
-      lineHeight: 1.5,
-      WebkitFontSmoothing: 'antialiased',
-      variant: 'root.body',
-    },
-  });
-  return <EmotionGlobal styles={{ reduceMotionStyles, ...styles }} />;
-};

package/src/SVG.stories.tsx

@@ -1,48 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { SVG } from './SVG';
-
-export default {
-  title: 'Components/SVG',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'icon',
-        },
-      },
-    },
-    size: {
-      control: {
-        type: 'range',
-        min: 0,
-        max: 96,
-        step: 2,
-      },
-      table: {
-        defaultValue: {
-          summary: 24,
-        },
-      },
-    },
-    fill: {
-      control: {
-        type: 'text',
-      },
-      table: {
-        defaultValue: {
-          summary: 'currentColor',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof SVG> = args => (
-  <SVG {...args}>
-    <path d="M9.9 20.113V13.8415H14.1V20.113H19.35V11.751H22.5L12 2.34375L1.5 11.751H4.65V20.113H9.9Z" />
-  </SVG>
-);