@marigold/components 0.3.0 → 0.4.0

package/src/Columns/Columns.tsx

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

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

package/src/Container/Container.stories.tsx

@@ -1,14 +0,0 @@
-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>
-);

package/src/Container/Container.test.tsx

@@ -1,26 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { Container } from './Container';
-import { Text } from '../Text';
-
-test('renders correct HTML element', () => {
-  render(
-    <Container title="container">
-      <Text>sdf</Text>
-    </Container>
-  );
-  const container = screen.getByTitle(/container/);
-
-  expect(container instanceof HTMLDivElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <Container className="custom-class-name" title="container">
-      <Text>text</Text>
-    </Container>
-  );
-  const container = screen.getByTitle(/container/);
-
-  expect(container.className).toMatch('custom-class-name');
-});

package/src/Container/Container.tsx

@@ -1,13 +0,0 @@
-import React from 'react';
-import { Box } from '../Box';
-
-export type ContainerProps = {
-  className?: string;
-  title?: string; // Used for testing.
-};
-
-export const Container: React.FC<ContainerProps> = ({ children, ...props }) => (
-  <Box {...props} width="100%">
-    {children}
-  </Box>
-);

package/src/Container/index.ts

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

package/src/Dialog/Dialog.stories.tsx

@@ -1,88 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Dialog, useDialogButtonProps } from './Dialog';
-import { Button } from '../Button';
-import { Text } from '../Text';
-
-export default {
-  title: 'Components/Dialog',
-  parameters: {
-    actions: {
-      handles: ['click'],
-    },
-  },
-  argTypes: {
-    isOpen: {
-      control: {
-        type: 'boolean',
-      },
-      description: 'handled by state from useDialogButtonProps',
-      options: [true, false],
-      table: {
-        defaultValue: {
-          summary: false,
-        },
-      },
-    },
-    title: {
-      control: {
-        type: 'text',
-      },
-      description: 'set dialog title',
-    },
-    close: {
-      control: {
-        type: 'text',
-      },
-      description: 'handled by state from useDialogButtonProps',
-    },
-    variant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Dialog variant',
-      table: {
-        defaultValue: {
-          summary: '__default',
-        },
-      },
-    },
-    backdropVariant: {
-      control: {
-        type: 'text',
-      },
-      description: 'Dialog backdrop variant',
-      table: {
-        defaultValue: {
-          summary: 'backdrop',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Dialog> = args => {
-  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
-  return (
-    <>
-      <Button
-        variant="secondary"
-        size="small"
-        {...openButtonProps}
-        ref={openButtonRef}
-      >
-        Open Dialog
-      </Button>
-      {state.isOpen && (
-        <Dialog
-          title="Dialog Title"
-          {...args}
-          isOpen={state.isOpen}
-          close={state.close}
-        >
-          <Text>Dialog content</Text>
-        </Dialog>
-      )}
-    </>
-  );
-};

package/src/Dialog/Dialog.test.tsx

@@ -1,158 +0,0 @@
-import React from 'react';
-import { fireEvent, render, screen } from '@testing-library/react';
-import userEvent from '@testing-library/user-event';
-
-import { ThemeProvider } from '@marigold/system';
-
-import { Dialog, useDialogButtonProps } from './Dialog';
-import { Button } from '../Button';
-
-const theme = {
-  space: {
-    none: 0,
-    xxsmall: 1,
-    xsmall: 2,
-    small: 4,
-    medium: 8,
-    large: 16,
-  },
-  dialog: {
-    __default: {
-      p: 'small',
-    },
-    default: {
-      p: 'medium',
-    },
-    backdrop: {
-      p: 'none',
-    },
-  },
-};
-
-type DialogComponentProps = {
-  title?: string;
-  variant?: string;
-  backdropVariant?: string;
-};
-
-const DialogComponent: React.FC<DialogComponentProps> = ({
-  variant,
-  backdropVariant,
-}) => {
-  const { state, openButtonProps, openButtonRef } = useDialogButtonProps();
-  return (
-    <>
-      <Button {...openButtonProps} ref={openButtonRef}>
-        Open
-      </Button>
-      {state.isOpen && (
-        <Dialog
-          variant={variant}
-          backdropVariant={backdropVariant}
-          title="Title"
-          isOpen={state.isOpen}
-          close={state.close}
-        >
-          Content
-        </Dialog>
-      )}
-    </>
-  );
-};
-
-test('dialog can be opened by button', () => {
-  render(<DialogComponent />);
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-  const dialog = screen.getByText(/Content/);
-  expect(dialog).toBeDefined();
-});
-
-test('supports default variants', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <DialogComponent />
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-
-  const dialog = screen.getByRole(/dialog/);
-  expect(dialog).toHaveStyle(`padding: 4px`);
-  expect(dialog.parentElement).toHaveStyle(`padding: 0px`);
-});
-
-test('supports other variants than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <DialogComponent variant="default" backdropVariant="default" />
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-
-  const dialog = screen.getByRole(/dialog/);
-  expect(dialog).toHaveStyle(`padding: 8px`);
-  expect(dialog.parentElement).toHaveStyle(`padding: 8px`);
-});
-
-test('dialog has correct baseCSS styles', async () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <DialogComponent variant="default" backdropVariant="default" />
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-
-  const dialog = screen.getByRole(/dialog/);
-  expect(dialog.firstChild).toHaveStyle(`display: flex`);
-  expect(dialog.firstChild?.lastChild).toHaveStyle(`alignItems: start`);
-
-  // ModalDialog baseCSS
-  expect(dialog.parentElement).toHaveStyle(`display: grid`);
-});
-
-test('dialog has correct baseCSS styles with theme index', async () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <DialogComponent variant="default" backdropVariant="default" />
-    </ThemeProvider>
-  );
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-
-  const dialog = screen.getByRole(/dialog/);
-  expect(dialog.firstChild).toHaveStyle(`paddingLeft: 16`);
-  expect(dialog.firstChild?.lastChild).toHaveStyle(`paddingTop: 2`);
-
-  // find all buttons to get the close and not the open button
-  const onCloseButton = await screen.findAllByRole('button');
-  expect(onCloseButton[1]).toHaveStyle(`paddingLeft: 1`);
-});
-
-test('close Dialog by escape key', () => {
-  render(<DialogComponent />);
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-
-  const dialog = screen.getByText(/Content/);
-  userEvent.type(dialog, '{esc}');
-  expect(dialog).not.toBeVisible();
-});
-
-test('close Dialog by close button', async () => {
-  render(<DialogComponent />);
-  const button = screen.getByText(/Open/);
-  fireEvent.click(button);
-
-  const dialog = screen.getByRole(/dialog/);
-  expect(dialog).toBeVisible();
-
-  // find all buttons to get the close and not the open button
-  const onCloseButton = await screen.findAllByRole('button');
-  expect(onCloseButton[1]).toBeVisible();
-  fireEvent.click(onCloseButton[1]);
-
-  expect(dialog).not.toBeVisible();
-});

package/src/Dialog/Dialog.tsx

@@ -1,130 +0,0 @@
-import React, { RefObject } from 'react';
-import { ComponentProps } from '@marigold/types';
-import { useOverlayTriggerState } from '@react-stately/overlays';
-import { OverlayContainer } from '@react-aria/overlays';
-import { useButton } from '@react-aria/button';
-import { Close } from '@marigold/icons';
-
-import { Box } from '../Box';
-import { Button } from '../Button';
-import { Text } from '../Text';
-
-import { ModalDialog, ModalDialogProps } from './ModalDialog';
-
-// Props
-// ---------------
-export type DialogProps = {
-  backdropVariant?: string;
-  close: ComponentProps<typeof Button>['onClick'];
-  isOpen: boolean;
-  title?: string;
-  variant?: string;
-} & ModalDialogProps &
-  ComponentProps<'div'>;
-
-// Component
-// ---------------
-export const Dialog: React.FC<DialogProps> = ({
-  backdropVariant,
-  children,
-  className,
-  close,
-  isOpen,
-  title,
-  variant,
-  ...props
-}) => {
-  const closeButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
-
-  // useButton ensures that focus management is handled correctly,
-  // across all browsers. Focus is restored to the button once the
-  // dialog closes.
-  const { buttonProps: closeButtonProps } = useButton(
-    {
-      onPress: () => close(),
-    },
-    closeButtonRef
-  );
-
-  return (
-    <OverlayContainer>
-      <ModalDialog
-        variant={variant}
-        backdropVariant={backdropVariant}
-        isOpen={isOpen}
-        onClose={close}
-        isDismissable
-        {...props}
-      >
-        <Box
-          __baseCSS={{
-            display: 'flex',
-            justifyContent: 'space-between',
-            borderRadius: 'small',
-            pl: 'large',
-            pb: 'large',
-          }}
-          className={className}
-        >
-          <Box pt="medium">
-            {title && (
-              <Text as="h4" variant="headline4">
-                {title}
-              </Text>
-            )}
-            {children}
-          </Box>
-          <Box
-            __baseCSS={{
-              display: 'flex',
-              justifyContent: 'flex-end',
-              alignItems: 'start',
-              paddingTop: 'xsmall',
-              paddingX: 'xsmall',
-            }}
-          >
-            <Box
-              as={Button}
-              __baseCSS={{
-                color: 'text',
-                bg: 'transparent',
-                lineHeight: 'xsmall',
-                px: 'xxsmall',
-                ':hover': {
-                  color: 'text',
-                  bg: 'transparent',
-                  cursor: 'pointer',
-                },
-                ':focus': {
-                  outline: 0,
-                },
-              }}
-              {...closeButtonProps}
-              ref={closeButtonRef}
-            >
-              <Close size={16} />
-            </Box>
-          </Box>
-        </Box>
-      </ModalDialog>
-    </OverlayContainer>
-  );
-};
-
-// get the overlayTriggerState and openButton props for using the dialog component
-export const useDialogButtonProps = () => {
-  const state = useOverlayTriggerState({});
-  const openButtonRef = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
-  const { buttonProps: openButtonProps } = useButton(
-    {
-      onPress: () => state.open(),
-    },
-    openButtonRef
-  );
-
-  return {
-    state,
-    openButtonProps,
-    openButtonRef,
-  };
-};

package/src/Dialog/ModalDialog.tsx

@@ -1,76 +0,0 @@
-import React, { RefObject } from 'react';
-import {
-  useOverlay,
-  usePreventScroll,
-  useModal,
-  OverlayProps,
-} from '@react-aria/overlays';
-import { useDialog } from '@react-aria/dialog';
-import { FocusScope } from '@react-aria/focus';
-import { AriaDialogProps } from '@react-types/dialog';
-
-import { Box } from '../Box';
-
-// Props
-// ---------------
-export type ModalDialogProps = {
-  variant?: string;
-  backdropVariant?: string;
-} & OverlayProps &
-  AriaDialogProps;
-
-// Component
-// ---------------
-export const ModalDialog: React.FC<ModalDialogProps> = ({
-  variant,
-  backdropVariant = 'backdrop',
-  children,
-  ...props
-}) => {
-  const { isDismissable, isOpen, onClose, ...restProps } = props;
-
-  // Handle interacting outside the dialog and pressing
-  // the Escape key to close the modal.
-  const ref = React.useRef<HTMLElement>() as RefObject<HTMLElement>;
-  const { overlayProps, underlayProps } = useOverlay(
-    { isDismissable, isOpen, onClose },
-    ref
-  );
-
-  // Prevent scrolling while the modal is open, and hide content
-  // outside the modal from screen readers.
-  usePreventScroll();
-
-  const { modalProps } = useModal();
-  const { dialogProps } = useDialog(props, ref);
-
-  return (
-    <Box
-      __baseCSS={{
-        display: 'grid',
-        placeItems: 'center',
-        position: 'fixed',
-        zIndex: 100,
-        top: 0,
-        left: 0,
-        bottom: 0,
-        right: 0,
-      }}
-      variant={`dialog.${backdropVariant}`}
-      {...underlayProps}
-    >
-      <FocusScope contain restoreFocus autoFocus>
-        <Box
-          {...overlayProps}
-          {...dialogProps}
-          {...modalProps}
-          ref={ref}
-          variant={variant ? `dialog.${variant}` : `dialog`}
-          {...restProps}
-        >
-          {children}
-        </Box>
-      </FocusScope>
-    </Box>
-  );
-};

package/src/Dialog/index.ts

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

package/src/Divider/Divider.stories.tsx

@@ -1,30 +0,0 @@
-import React from 'react';
-import type { Meta, ComponentStory } from '@storybook/react';
-import { Divider } from './Divider';
-import { Text } from '../Text';
-
-export default {
-  title: 'Components/Divider',
-  argTypes: {
-    variant: {
-      control: {
-        type: 'select',
-      },
-      options: ['regular', 'bold'],
-      description: 'Thick or thin line',
-      table: {
-        defaultValue: {
-          summary: 'regular',
-        },
-      },
-    },
-  },
-} as Meta;
-
-export const Basic: ComponentStory<typeof Divider> = args => (
-  <>
-    <Text>Above</Text>
-    <Divider {...args} />
-    <Text>Below</Text>
-  </>
-);

package/src/Divider/Divider.test.tsx

@@ -1,71 +0,0 @@
-import React from 'react';
-import { render, screen } from '@testing-library/react';
-import { ThemeProvider } from '@marigold/system';
-import { Divider } from './Divider';
-
-const theme = {
-  space: {
-    none: 0,
-    small: 2,
-  },
-  borders: {
-    none: 0,
-    regular: '1px solid',
-  },
-  divider: {
-    regular: {
-      border: 'none',
-      borderBottom: 'regular',
-      margin: 'small',
-    },
-    bold: {
-      border: 'none',
-      borderBottom: '2px solid',
-      margin: 'small',
-    },
-  },
-};
-
-test('supports default variant and themeSection', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Divider title="divider" />
-    </ThemeProvider>
-  );
-  const divider = screen.getByTitle(/divider/);
-
-  expect(divider).toHaveStyle(`borderBottom: 1px solid`);
-});
-
-test('accepts other variant than default', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Divider variant="bold" title="divider" />
-    </ThemeProvider>
-  );
-  const divider = screen.getByTitle(/divider/);
-
-  expect(divider).toHaveStyle(`borderBottom: 2px solid`);
-});
-
-test('renders correct HTML element', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Divider title="divider" />
-    </ThemeProvider>
-  );
-  const divider = screen.getByTitle(/divider/);
-
-  expect(divider instanceof HTMLHRElement).toBeTruthy();
-});
-
-test('accepts custom styles prop className', () => {
-  render(
-    <ThemeProvider theme={theme}>
-      <Divider className="custom-class-name" title="divider" />
-    </ThemeProvider>
-  );
-  const divider = screen.getByTitle(/divider/);
-
-  expect(divider.className).toMatch('custom-class-name');
-});