@marigold/components 0.0.2 → 0.3.0

package/src/Checkbox/Checkbox.tsx

@@ -1,64 +1,101 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
-import { Required, SquareUnchecked, SquareChecked } from '@marigold/icons';
-import { Label } from '@marigold/components';
+import { useFocusRing } from '@react-aria/focus';
+import { VisuallyHidden } from '@react-aria/visually-hidden';
+import { useCheckbox } from '@react-aria/checkbox';
+import { useToggleState } from '@react-stately/toggle';
+import { ToggleProps } from '@react-types/checkbox';
 
-type CheckboxProps = {
-  id: string;
-  variant?: string;
-  label?: string;
-  required?: boolean;
-};
+import { ComponentProps } from '@marigold/types';
+import { Exclamation } from '@marigold/icons';
+
+import { CheckboxIcon, CheckboxIconProps } from './CheckboxIcons';
+import { Box } from '../Box';
+import { Label } from '../Label';
+import { ValidationMessage } from '../ValidationMessage';
+
+// Theme Extension
+// ---------------
+export interface CheckboxThemeExtension<Value> {
+  checkbox?: {
+    [key: string]: Value;
+  };
+}
 
-export const Checkbox = system<CheckboxProps, 'input'>(
-  ({ id, variant = 'checkbox', label, required, className, ...props }) => {
-    const checkboxStyles = useStyles({
-      position: 'absolute',
-      opacity: 0,
-      zIndex: -1,
-      width: 1,
-      height: 1,
-      overflow: 'hidden',
-    });
+// Checkbox Input
+// ---------------
+type CheckboxInputProps = CheckboxIconProps &
+  ToggleProps &
+  ComponentProps<'input'>;
 
-    const checkboxIconStyles = useStyles(
-      {
-        variant: `form.${variant}`,
-        ariaHidden: 'true',
-        mr: 2,
-        verticalAlign: 'middle',
-        ':hover': { cursor: 'pointer' },
-        'input:disabled ~ &': {
-          color: 'muted',
-          cursor: 'not-allowed',
-        },
-      },
-      className
-    );
+const CheckboxInput: React.FC<CheckboxInputProps> = ({ error, ...props }) => {
+  const state = useToggleState(props);
+  const ref = React.useRef<HTMLInputElement>(null);
+  const { inputProps } = useCheckbox(props, state, ref);
+  const { focusProps } = useFocusRing();
 
-    const checkbox = (
-      <div className={useStyles({ display: 'inline-block' })}>
-        <input type="checkbox" id={id} className={checkboxStyles} {...props} />
-        {props.checked ? (
-          <SquareChecked className={checkboxIconStyles} />
-        ) : (
-          <SquareUnchecked className={checkboxIconStyles} />
-        )}
-      </div>
-    );
+  return (
+    <Box pr="xsmall">
+      <VisuallyHidden>
+        <Box
+          as="input"
+          type="checkbox"
+          disabled={props.disabled}
+          {...inputProps}
+          {...focusProps}
+          ref={ref}
+          {...props}
+        />
+      </VisuallyHidden>
+      <CheckboxIcon
+        checked={props.checked}
+        variant={props.variant}
+        disabled={props.disabled}
+        error={error}
+      />
+    </Box>
+  );
+};
 
-    return (
-      <>
-        {label ? (
-          <Label htmlFor={id}>
-            {checkbox}
-            {label}
-            {required ? <Required size={16} /> : ''}
-          </Label>
-        ) : (
-          <>{checkbox}</>
-        )}
-      </>
-    );
-  }
-);
+// Checkbox
+// ---------------
+export type CheckboxProps = {
+  id: string;
+  label: string;
+  required?: boolean;
+  labelVariant?: string;
+  error?: boolean;
+  errorMessage?: string;
+} & CheckboxInputProps;
+
+export const Checkbox: React.FC<CheckboxProps> = ({
+  label,
+  required,
+  labelVariant = 'inline',
+  error,
+  errorMessage,
+  ...props
+}) => {
+  return (
+    <>
+      <Box
+        as={Label}
+        __baseCSS={{
+          ':hover': { cursor: props.disabled ? 'not-allowed' : 'pointer' },
+        }}
+        htmlFor={props.id}
+        required={required}
+        variant={`label.${labelVariant}`}
+        color={props.disabled ? 'disabled' : 'text'}
+      >
+        <Box as={CheckboxInput} error={error} {...props} />
+        {label}
+      </Box>
+      {error && errorMessage && (
+        <ValidationMessage>
+          <Exclamation size={16} />
+          {errorMessage}
+        </ValidationMessage>
+      )}
+    </>
+  );
+};

package/src/Checkbox/CheckboxIcons.tsx

@@ -0,0 +1,59 @@
+import React from 'react';
+import { conditional, State, SVG } from '@marigold/system';
+
+import { Box } from '../Box';
+
+// Checkbox Icon
+// ---------------
+export type CheckboxIconProps = {
+  variant?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  children?: never;
+};
+
+export const CheckboxIcon: React.FC<CheckboxIconProps> = ({
+  variant = '',
+  checked = false,
+  disabled = false,
+  error = false,
+}) => {
+  const conditionalStates: State = disabled
+    ? {
+        disabled: disabled,
+      }
+    : {
+        checked: checked,
+        error: error,
+      };
+
+  return (
+    <SVG
+      width="16"
+      height="32"
+      viewBox="0 0 16 32"
+      fill="none"
+      aria-hidden="true"
+    >
+      <Box
+        as="rect"
+        x="0.5"
+        y="8.5"
+        width="15px"
+        height="15px"
+        rx="1.5"
+        variant={conditional(`checkbox.${variant}`, conditionalStates)}
+      />
+      {checked && (
+        <Box
+          __baseCSS={{ fill: 'gray00' }}
+          as="path"
+          fillRule="evenodd"
+          clipRule="evenodd"
+          d="M13.9571 12.8338L12.4085 11.2852L6.08699 17.6007L3.59887 15.1126L2.04163 16.6588L6.08682 20.704L13.9571 12.8338Z"
+        />
+      )}
+    </SVG>
+  );
+};

package/src/Column/Column.stories.tsx

@@ -0,0 +1,33 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+
+import { Column } from './Column';
+import { Box } from '../Box';
+
+export default {
+  title: 'Components/Column',
+  argTypes: {
+    width: {
+      control: {
+        type: 'range',
+        min: 0,
+        max: 12,
+        step: 1,
+      },
+      description: 'Absolute width in 12 grid',
+      table: {
+        defaultValue: {
+          summary: 12,
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Column> = args => (
+  <Column width={12} {...args}>
+    <Box p="small" border="1px solid gray" borderRadius="4px">
+      width=12
+    </Box>
+  </Column>
+);

package/src/Column/Column.test.tsx

@@ -1,76 +1,32 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Column } from '@marigold/components';
-
-const theme = {
-  layout: {
-    column: {
-      alignItems: 'center',
-    },
-    grid: {
-      alignItems: 'right',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Column title="column">Default</Column>
-    </ThemeProvider>
-  );
-  const column = screen.getByTitle(/column/);
-
-  expect(column).toHaveStyle(`align-items: center`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Column title="column" variant="grid">
-        Grid
-      </Column>
-    </ThemeProvider>
-  );
-  const column = screen.getByTitle(/column/);
-
-  expect(column).toHaveStyle(`align-items: right`);
-});
+import { Column } from './Column';
 
 test('supports width prop', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Column title="column" width={6}>
-        column
-      </Column>
-    </ThemeProvider>
-  );
-  const column = screen.getByTitle(/column/);
+  render(<Column width={6}>column</Column>);
+  const column = screen.getByText('column');
 
   expect(column).toHaveStyle(`width: 50%`);
 });
 
 test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Column title="column">Default</Column>
-    </ThemeProvider>
-  );
-  const column = screen.getByTitle(/column/);
+  render(<Column>column</Column>);
+  const column = screen.getByText('column');
 
   expect(column instanceof HTMLDivElement).toBeTruthy();
 });
 
 test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Column className="custom-class-name" title="column">
-        text
-      </Column>
-    </ThemeProvider>
-  );
-  const column = screen.getByTitle(/column/);
+  render(<Column className="custom-class-name">column</Column>);
+  const column = screen.getByText('column');
 
   expect(column.className).toMatch('custom-class-name');
 });
+
+test('accepts responsive values', () => {
+  render(<Column width={[12, 6]}>column</Column>);
+  const column = screen.getByText('column');
+
+  // Note: as of November 2021 jest-dom does not support media queries...
+  expect(column).toHaveStyle('width: 100%');
+});

package/src/Column/Column.tsx

@@ -1,25 +1,27 @@
 import React from 'react';
-import { useStyles, system } from '@marigold/system';
+import { Box } from '../Box';
 
-type ColumnProps = {
-  variant?: string;
-  width?: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
-};
+type WidthValues = 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12;
 
-export const Column = system<ColumnProps, 'div'>(
-  ({ variant = 'column', width = 12, className, children, ...props }) => {
-    const classNames = useStyles(
-      {
-        variant: `layout.${variant}`,
-        width: `${(width / 12) * 100}%`,
-      },
-      className
-    );
+export type ColumnProps = {
+  className?: string;
+  width?: WidthValues | WidthValues[];
+};
 
-    return (
-      <div className={classNames} {...props}>
-        {children}
-      </div>
-    );
+const transform = (width: WidthValues | WidthValues[]) => {
+  if (Array.isArray(width)) {
+    return width.map(v => `${(v / 12) * 100}%`);
   }
+
+  return `${(width / 12) * 100}%`;
+};
+
+export const Column: React.FC<ColumnProps> = ({
+  width = 12,
+  children,
+  ...props
+}) => (
+  <Box {...props} width={transform(width)}>
+    {children}
+  </Box>
 );

package/src/Columns/Columns.stories.tsx

@@ -0,0 +1,75 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Column, Columns, Text } from '@marigold/components';
+
+export default {
+  title: 'Components/Columns',
+  argTypes: {
+    space: {
+      control: {
+        type: 'select',
+      },
+      options: [
+        'none',
+        'xxsmall',
+        'xsmall',
+        'small',
+        'medium',
+        'large',
+        'xlarge',
+        'xxlarge',
+      ],
+      description: 'Responsive Style Value',
+      table: {
+        defaultValue: {
+          summary: 'none',
+        },
+      },
+    },
+    horizontalAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['left', 'right', 'center'],
+      description: 'where to place',
+      table: {
+        defaultValue: {
+          summary: 'left',
+        },
+      },
+    },
+    verticalAlign: {
+      control: {
+        type: 'select',
+      },
+      options: ['top', 'bottom', 'center'],
+      description: 'where to place',
+      table: {
+        defaultValue: {
+          summary: 'top',
+        },
+      },
+    },
+  },
+} as Meta;
+
+export const Basic: ComponentStory<typeof Columns> = args => (
+  <Columns {...args}>
+    <Column width={6}>
+      <Text>First column</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.
+      </Text>
+    </Column>
+    <Column width={6}>
+      <Text>Second column</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.
+      </Text>
+    </Column>
+  </Columns>
+);

package/src/Columns/Columns.test.tsx

@@ -0,0 +1,113 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import { Column, Columns, MarigoldProvider } from '@marigold/components';
+
+const theme = {
+  space: {
+    none: 0,
+    large: 24,
+  },
+};
+
+test('supports default space prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Columns data-testid="column">
+        <Column>column</Column>
+      </Columns>
+    </MarigoldProvider>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`margin: 0px`);
+});
+
+test('supports custom space prop', () => {
+  render(
+    <MarigoldProvider theme={theme}>
+      <Columns space="large" data-testid="column">
+        <Column>column</Column>
+      </Columns>
+    </MarigoldProvider>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`margin: -12px`);
+});
+
+test('supports default horizontalAlign prop: left', () => {
+  render(
+    <Columns data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`justify-content: flex-start`);
+});
+
+test('supports custom horizontalAlign prop: center', () => {
+  render(
+    <Columns horizontalAlign="center" data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`justify-content: center`);
+});
+
+test('supports custom horizontalAlign prop: right', () => {
+  render(
+    <Columns horizontalAlign="right" data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`justify-content: flex-end`);
+});
+
+test('supports default verticalAlign prop: top', () => {
+  render(
+    <Columns data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`align-items: flex-start`);
+});
+
+test('supports custom verticalAlign prop: center', () => {
+  render(
+    <Columns verticalAlign="center" data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`align-items: center`);
+});
+
+test('supports custom verticalAlign prop: bottom', () => {
+  render(
+    <Columns verticalAlign="bottom" data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column).toHaveStyle(`align-items: flex-end`);
+});
+
+test('renders correct HTML element', () => {
+  render(
+    <Columns data-testid="column">
+      <Column>column</Column>
+    </Columns>
+  );
+  const column = screen.getByTestId(/column/);
+
+  expect(column instanceof HTMLDivElement).toBeTruthy();
+});

package/src/Columns/Columns.tsx

@@ -0,0 +1,69 @@
+import React, { Children } from 'react';
+import { Box } from '../Box';
+import flattenChildren from 'react-keyed-flatten-children';
+import { ResponsiveStyleValue, useTheme } from '@marigold/system';
+
+type ColumnsProps = {
+  className?: string;
+  space?: ResponsiveStyleValue<string>;
+  horizontalAlign?: 'left' | 'right' | 'center';
+  verticalAlign?: 'top' | 'bottom' | 'center';
+};
+
+const useAlignment = (direction: string) => {
+  switch (direction) {
+    case 'right':
+      return 'flex-end';
+    case 'bottom':
+      return 'flex-end';
+    case 'center':
+      return 'center';
+  }
+  return 'flex-start';
+};
+
+export const Columns: React.FC<ColumnsProps> = ({
+  space = 'none',
+  horizontalAlign = 'left',
+  verticalAlign = 'top',
+  className,
+  children,
+  ...props
+}) => {
+  const justifyContent = useAlignment(horizontalAlign);
+  const alignItems = useAlignment(verticalAlign);
+
+  /**
+   * transform space string to space value from theme
+   */
+  const { css } = useTheme();
+  const spaceObject = css({ space }) as Object;
+  const spaceValue = Object.values(spaceObject)[0];
+
+  return (
+    <Box p={space} display="flex" className={className}>
+      <Box
+        width={`calc(100% + ${spaceValue}px)`}
+        m={`${-spaceValue / 2}px`}
+        display="flex"
+        flexWrap="wrap"
+        alignItems={alignItems}
+        justifyContent={justifyContent}
+        {...props}
+      >
+        {Children.map(
+          flattenChildren(children) as unknown as React.ReactElement,
+          (child: React.ReactElement) => {
+            return React.cloneElement(
+              child,
+              {},
+              <Box css={{ p: `${spaceValue / 2}px` }}>
+                {child.props.children}
+              </Box>
+            );
+          }
+        )}
+      </Box>
+    </Box>
+  );
+};

package/src/Columns/index.ts

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

package/src/Container/Container.stories.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+import type { Meta, ComponentStory } from '@storybook/react';
+import { Container } from './Container';
+import { Text } from '../Text';
+
+export default {
+  title: 'Components/Container',
+} as Meta;
+
+export const Basic: ComponentStory<typeof Container> = args => (
+  <Container {...args}>
+    <Text>Container with width=100%</Text>
+  </Container>
+);