@redsift/popovers 8.0.0 → 8.0.1

package/src/components/dialog-content-actions/styles.ts

@@ -0,0 +1,18 @@
+import styled from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+import { StyledDialogContentActionsProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContentActions = styled.div<StyledDialogContentActionsProps>`
+  display: flex;
+  ${baseContainer}
+
+  margin-top: 8px;
+  margin-bottom: 8px;
+
+  &:focus-visible {
+    outline: none;
+  }
+`;

package/src/components/dialog-content-actions/types.ts

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { ContainerProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogContentActionsProps
+  extends ComponentProps<'div'>,
+    ContainerProps {}
+
+export type StyledDialogContentActionsProps = DialogContentActionsProps;

package/src/components/dialog-content-body/DialogContentBody.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+
+import { DialogContentBody } from '.';
+import { Dialog } from '../dialog';
+
+const DialogBodyWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Dialog isOpen>
+      <Dialog.Content>{children}</Dialog.Content>
+    </Dialog>
+  );
+};
+
+describe('DialogContentBody', () => {
+  it('handles default', async () => {
+    const { getByText } = render(<DialogContentBody>Body</DialogContentBody>, {
+      wrapper: DialogBodyWrapper,
+    });
+    await act(async () => {});
+    await waitFor(() => {
+      expect(getByText('Body')).toBeVisible();
+    });
+    expect(getByText('Body')).toBeVisible();
+  });
+
+  it('supports custom className', async () => {
+    const { getByText } = render(
+      <DialogContentBody className="test-class">Body</DialogContentBody>,
+      { wrapper: DialogBodyWrapper }
+    );
+
+    await act(async () => {});
+    await waitFor(() => {
+      expect(getByText('Body')).toBeVisible();
+    });
+
+    const component = getByText('Body');
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining(DialogContentBody.className!)
+    );
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining('test-class')
+    );
+  });
+
+  it('supports custom data attributes', async () => {
+    const { getByText } = render(
+      <DialogContentBody data-testid="test">Body</DialogContentBody>,
+      { wrapper: DialogBodyWrapper }
+    );
+
+    await act(async () => {});
+    await waitFor(() => {
+      expect(getByText('Body')).toBeVisible();
+    });
+
+    const component = getByText('Body');
+    expect(component).toHaveAttribute('data-testid', 'test');
+  });
+});

package/src/components/dialog-content-body/DialogContentBody.tsx

@@ -0,0 +1,49 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Comp, useBoundingClientRect } from '@redsift/design-system';
+import { StyledDialogContentBody } from './styles';
+import { DialogContentBodyProps } from './types';
+import { useDialogContext } from '../dialog';
+
+const COMPONENT_NAME = 'DialogContentBody';
+const CLASSNAME = 'redsift-dialog-content-body';
+const DEFAULT_PROPS: Partial<DialogContentBodyProps> = {};
+
+/**
+ * The DialogContentBody component.
+ */
+export const DialogContentBody: Comp<DialogContentBodyProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    const { children, className, ...forwardedProps } = props;
+
+    const { actionsRef, bodyRef, hasCloseButton, headerRef, initialFocus } =
+      useDialogContext();
+
+    const { height: headerHeight = 0 } = useBoundingClientRect(
+      headerRef as any,
+      [children, headerRef]
+    );
+    const { height: actionsHeight = 0 } = useBoundingClientRect(
+      actionsRef as any,
+      [children, actionsRef]
+    );
+
+    /* istanbul ignore next */
+    return (
+      <StyledDialogContentBody
+        {...forwardedProps}
+        className={classNames(DialogContentBody.className, className)}
+        ref={useMergeRefs([ref, bodyRef])}
+        tabIndex={initialFocus === 'body' ? -1 : undefined}
+        $marginTop={Math.max(headerHeight, hasCloseButton ? 40 : 0) + 80}
+        $marginBottom={(actionsHeight === 0 ? 0 : actionsHeight + 16) + 80}
+      >
+        {children}
+      </StyledDialogContentBody>
+    );
+  });
+DialogContentBody.className = CLASSNAME;
+DialogContentBody.defaultProps = DEFAULT_PROPS;
+DialogContentBody.displayName = COMPONENT_NAME;

package/src/components/dialog-content-body/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './DialogContentBody';

package/src/components/dialog-content-body/styles.ts

@@ -0,0 +1,58 @@
+import styled, { css } from 'styled-components';
+import { baseContainer } from '@redsift/design-system';
+import { StyledDialogContentBodyProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContentBody = styled.div<StyledDialogContentBodyProps>`
+  ${baseContainer}
+
+  overflow-y: auto;
+  ${({ $marginTop, $marginBottom }) => css`
+    max-height: calc(100vh - ${$marginTop + $marginBottom}px);
+  `}
+
+  color: var(--redsift-color-neutral-darkgrey);
+  font-family: var(--redsift-typography-body2-font-family);
+  font-size: var(--redsift-typography-body2-font-size);
+  font-weight: var(--redsift-typography-body2-font-weight);
+  line-height: var(--redsift-typography-body2-line-height);
+  padding: 0 24px;
+  margin: 16px -24px;
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  scrollbar-color: var(--redsift-color-neutral-midgrey) transparent;
+  scrollbar-width: thin;
+
+  &::-webkit-scrollbar {
+    block-size: 9px;
+    inline-size: 9px;
+  }
+
+  &::-webkit-scrollbar-thumb {
+    background-clip: padding-box;
+    background-color: var(--redsift-color-neutral-midgrey);
+    border-radius: 0px;
+    border-left: 2px solid transparent;
+    border-right: 2px solid transparent;
+  }
+
+  &::-webkit-scrollbar-track {
+    background-color: transparent;
+  }
+
+  &::-webkit-scrollbar-thumb:horizontal,
+  &::-webkit-scrollbar-thumb:vertical {
+    &:hover {
+      background-color: var(--redsift-color-neutral-darkgrey);
+    }
+  }
+
+  &::-webkit-scrollbar-corner {
+    visibility: hidden;
+  }
+`;

package/src/components/dialog-content-body/types.ts

@@ -0,0 +1,14 @@
+import { ComponentProps } from 'react';
+import { ContainerProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogContentBodyProps
+  extends ComponentProps<'div'>,
+    ContainerProps {}
+
+export type StyledDialogContentBodyProps = DialogContentBodyProps & {
+  $marginTop: number;
+  $marginBottom: number;
+};

package/src/components/dialog-content-header/DialogContentHeader.test.tsx

@@ -0,0 +1,63 @@
+import React from 'react';
+import { act, render, waitFor } from '@testing-library/react';
+
+import { DialogContentHeader } from '.';
+import { Dialog } from '../dialog';
+
+const DialogHeaderWrapper = ({ children }: { children: React.ReactNode }) => {
+  return (
+    <Dialog isOpen>
+      <Dialog.Content>{children}</Dialog.Content>
+    </Dialog>
+  );
+};
+
+describe('DialogContentHeader', () => {
+  it('handles default', async () => {
+    const { getByText } = render(<DialogContentHeader header="Header" />, {
+      wrapper: DialogHeaderWrapper,
+    });
+    await act(async () => {});
+    await waitFor(() => {
+      expect(getByText('Header')).toBeVisible();
+    });
+    expect(getByText('Header')).toBeVisible();
+  });
+
+  it('supports custom className', async () => {
+    const { getByText } = render(
+      <DialogContentHeader className="test-class" header="Header" />,
+      { wrapper: DialogHeaderWrapper }
+    );
+
+    await act(async () => {});
+    await waitFor(() => {
+      expect(getByText('Header')).toBeVisible();
+    });
+
+    const component = getByText('Header').parentElement;
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining(DialogContentHeader.className!)
+    );
+    expect(component).toHaveAttribute(
+      'class',
+      expect.stringContaining('test-class')
+    );
+  });
+
+  it('supports custom data attributes', async () => {
+    const { getByText } = render(
+      <DialogContentHeader data-testid="test" header="Header" />,
+      { wrapper: DialogHeaderWrapper }
+    );
+
+    await act(async () => {});
+    await waitFor(() => {
+      expect(getByText('Header')).toBeVisible();
+    });
+
+    const component = getByText('Header').parentElement;
+    expect(component).toHaveAttribute('data-testid', 'test');
+  });
+});

package/src/components/dialog-content-header/DialogContentHeader.tsx

@@ -0,0 +1,81 @@
+import React, { forwardRef, useId } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Icon, Heading, Comp } from '@redsift/design-system';
+import { StyledDialogContentHeader } from './styles';
+import { DialogContentHeaderProps } from './types';
+import { useDialogContext } from '../dialog';
+
+const COMPONENT_NAME = 'DialogContentHeader';
+const CLASSNAME = 'redsift-dialog-content-header';
+const DEFAULT_PROPS: Partial<DialogContentHeaderProps> = {};
+
+/**
+ * The DialogContentHeader component.
+ */
+export const DialogContentHeader: Comp<
+  DialogContentHeaderProps,
+  HTMLDivElement
+> = forwardRef((props, ref) => {
+  const {
+    children,
+    className,
+    header,
+    headingProps,
+    icon,
+    subheader,
+    ...forwardedProps
+  } = props;
+
+  const { setLabelId, setDescriptionId, headerRef, initialFocus } =
+    useDialogContext();
+  const labelId = useId();
+  const descriptionId = useId();
+
+  // Only sets `aria-labelledby` on the Dialog root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setLabelId(labelId);
+    return () => setLabelId(undefined);
+  }, [labelId, setLabelId]);
+
+  // Only sets `aria-describedby` on the Dialog root element
+  // if this component is mounted inside it.
+  React.useLayoutEffect(() => {
+    setDescriptionId(descriptionId);
+    return () => setDescriptionId(undefined);
+  }, [descriptionId, setDescriptionId]);
+
+  return (
+    <StyledDialogContentHeader
+      {...forwardedProps}
+      className={classNames(DialogContentHeader.className, className)}
+      ref={useMergeRefs([ref, headerRef])}
+      tabIndex={initialFocus === 'header' ? -1 : undefined}
+    >
+      {subheader ? (
+        <div className={`${DialogContentHeader.className}__subheader`}>
+          {subheader}
+        </div>
+      ) : null}
+      {header ? (
+        <Heading
+          as="h2"
+          color="black"
+          className={`${DialogContentHeader.className}__header`}
+          id={labelId}
+          variant="h2"
+          {...headingProps}
+        >
+          {icon ? <Icon icon={icon} aria-hidden="true" /> : null}
+          {header}
+        </Heading>
+      ) : null}
+      {children ? <div id={descriptionId}>{children}</div> : null}
+    </StyledDialogContentHeader>
+  );
+});
+DialogContentHeader.className = CLASSNAME;
+DialogContentHeader.defaultProps = DEFAULT_PROPS;
+DialogContentHeader.displayName = COMPONENT_NAME;

package/src/components/dialog-content-header/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './DialogContentHeader';

package/src/components/dialog-content-header/styles.ts

@@ -0,0 +1,36 @@
+import styled from 'styled-components';
+import { StyledDialogContentHeaderProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContentHeader = styled.div<StyledDialogContentHeaderProps>`
+  color: var(--redsift-color-neutral-black);
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  .redsift-dialog-content-header__header {
+    align-items: center;
+    display: flex;
+    gap: 8px;
+    padding: 10px 0px;
+    margin: 0px;
+
+    .redsift-icon {
+      color: var(--redsift-color-neutral-black);
+      padding-right: 8px;
+      font-size: 30px;
+      line-height: 30px;
+      height: 30px;
+    }
+  }
+
+  .redsift-dialog-content-header__subheader {
+    font-family: var(--redsift-typography-body-font-family);
+    font-size: var(--redsift-typography-body-font-size);
+    font-weight: var(--redsift-typography-body-font-weight);
+    line-height: var(--redsift-typography-body-line-height);
+  }
+`;

package/src/components/dialog-content-header/types.ts

@@ -0,0 +1,23 @@
+import { ComponentProps } from 'react';
+import { HeadingProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogContentHeaderProps extends ComponentProps<'div'> {
+  /** Header. */
+  header?: string;
+  /** Heading props allowing to override the component rendered by the heading without changing its style. */
+  headingProps?: Pick<HeadingProps, 'as' | 'noWrap'>;
+  /** Subheader */
+  subheader?: string;
+  /**
+   * Icon path data (`d` property of the `path` SVG element).<br />
+   * See <a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Paths</a>.<br />
+   * Recommended path data come from mdi/js.<br />
+   * See <a href="https://www.npmjs.com/package/@mdi/js">https://www.npmjs.com/package/@mdi/js</a>.
+   */
+  icon?: string;
+}
+
+export type StyledDialogContentHeaderProps = DialogContentHeaderProps;

package/src/components/dialog-trigger/DialogTrigger.tsx

@@ -0,0 +1,43 @@
+import React, { forwardRef, ReactElement } from 'react';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Comp, isComponent } from '@redsift/design-system';
+import { useDialogContext } from '../dialog';
+import { DialogTriggerProps } from './types';
+
+const COMPONENT_NAME = 'DialogTrigger';
+const CLASSNAME = 'redsift-dialog-trigger';
+const DEFAULT_PROPS: Partial<DialogTriggerProps> = {};
+
+/**
+ * The DialogTrigger component.
+ */
+export const DialogTrigger: Comp<DialogTriggerProps, HTMLButtonElement> =
+  forwardRef((props, ref) => {
+    const { children } = props;
+
+    const { getReferenceProps, isOpen, handleOpen, refs } = useDialogContext();
+    const childrenRef = (children as any).ref;
+    const triggerRef = useMergeRefs([refs.setReference, ref, childrenRef]);
+
+    if (
+      isComponent('Button')(children) ||
+      isComponent('IconButton')(children) ||
+      isComponent('LinkButton')(children)
+    ) {
+      return React.cloneElement(children, {
+        ...getReferenceProps({
+          ref: triggerRef,
+          ...props,
+          ...(children as ReactElement).props,
+        }),
+        onClick: () => handleOpen(!isOpen),
+        isActive: isOpen,
+      });
+    }
+
+    return <>{children}</>;
+  });
+DialogTrigger.className = CLASSNAME;
+DialogTrigger.defaultProps = DEFAULT_PROPS;
+DialogTrigger.displayName = COMPONENT_NAME;

package/src/components/dialog-trigger/index.ts

@@ -0,0 +1,2 @@
+export * from './types';
+export * from './DialogTrigger';

package/src/components/dialog-trigger/types.ts

@@ -0,0 +1,9 @@
+import { ComponentProps } from 'react';
+import { StylingProps } from '@redsift/design-system';
+
+/**
+ * Component props.
+ */
+export interface DialogTriggerProps
+  extends Omit<ComponentProps<'button'>, 'onClick'>,
+    StylingProps {}

package/src/components/popover/Popover.stories.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { Flexbox, Button, Text } from '@redsift/design-system';
+import { Popover, PopoverPlacement } from '.';
+
+export default {
+  title: 'Popovers/Popover',
+  component: Popover,
+};
+
+export const Uncontrolled = () => (
+  <Popover>
+    <Popover.Trigger>
+      <Button variant="secondary">Button</Button>
+    </Popover.Trigger>
+    <Popover.Content>
+      <Text margin="16px">
+        Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps.
+        Liquorice marzipan jelly-o carrot cake icing croissant carrot cake. Tart
+        soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah
+        marzipan bear claw donut.
+      </Text>
+    </Popover.Content>
+  </Popover>
+);
+
+export const Controlled = () => {
+  const [isOpen, setIsOpen] = useState(false);
+  return (
+    <>
+      <Button variant="secondary" onClick={() => setIsOpen(!isOpen)}>
+        External trigger
+      </Button>
+      <Popover isOpen={isOpen} onOpen={setIsOpen}>
+        <Popover.Trigger>
+          <Button variant="secondary">Trigger</Button>
+        </Popover.Trigger>
+        <Popover.Content>
+          <Text margin="16px">
+            Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps.
+            Liquorice marzipan jelly-o carrot cake icing croissant carrot cake.
+            Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy
+            halvah marzipan bear claw donut.
+          </Text>
+        </Popover.Content>
+      </Popover>
+    </>
+  );
+};
+
+export const AllPlacements = () => (
+  <Flexbox
+    flexDirection="column"
+    flexWrap="wrap"
+    gap="32px"
+    padding="64px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    {['top', 'left', 'right', 'bottom'].map((side) => {
+      return (
+        <Flexbox
+          key={side}
+          flexDirection="row"
+          flexWrap="wrap"
+          justifyContent="space-evenly"
+          alignItems="center"
+        >
+          {['start', '', 'end'].map((alignment) => {
+            return (
+              <div
+                key={`${side}${alignment ? '-' : ''}${alignment}`}
+                style={{ margin: '1em' }}
+              >
+                <Popover
+                  isOpen
+                  placement={
+                    `${side}${
+                      alignment ? '-' : ''
+                    }${alignment}` as PopoverPlacement
+                  }
+                >
+                  <Popover.Trigger>
+                    <Button variant="secondary">Button</Button>
+                  </Popover.Trigger>
+                  <Popover.Content>
+                    <Text margin="16px">{`Popover [${side}${
+                      alignment ? '-' : ''
+                    }${alignment}]`}</Text>
+                  </Popover.Content>
+                </Popover>
+              </div>
+            );
+          })}
+        </Flexbox>
+      );
+    })}
+  </Flexbox>
+);
+
+export const TriggerIsNotAButton = () => (
+  <Popover>
+    <Popover.Trigger>
+      This text has a popover but this will never be displayed because the
+      trigger is not a button.
+    </Popover.Trigger>
+    <Popover.Content>
+      <Text margin="16px">
+        Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps.
+        Liquorice marzipan jelly-o carrot cake icing croissant carrot cake. Tart
+        soufflé sweet roll halvah croissant wafer cotton candy. Candy halvah
+        marzipan bear claw donut.
+      </Text>
+    </Popover.Content>
+  </Popover>
+);
+
+export const EmptyPopover = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Popover>
+      <Popover.Trigger>
+        <Button variant="secondary">Button</Button>
+      </Popover.Trigger>
+    </Popover>
+  </Flexbox>
+);
+
+export const PopoverOnDisabledButton = () => (
+  <Flexbox
+    flexDirection="row"
+    flexWrap="wrap"
+    justifyContent="center"
+    alignItems="center"
+    padding="32px"
+    style={{ backgroundColor: '#EFEFEF' }}
+  >
+    <Popover>
+      <Popover.Trigger>
+        <Button variant="secondary" isDisabled>
+          Disabled
+        </Button>
+      </Popover.Trigger>
+      <Popover.Content>
+        <Text margin="16px">
+          Cupcake ipsum dolor sit amet blueie jujubes topping sesame snaps.
+          Liquorice marzipan jelly-o carrot cake icing croissant carrot cake.
+          Tart soufflé sweet roll halvah croissant wafer cotton candy. Candy
+          halvah marzipan bear claw donut.
+        </Text>
+      </Popover.Content>
+    </Popover>
+  </Flexbox>
+);