@redsift/popovers 8.0.0 → 8.0.1

package/src/components/dialog-content/DialogContent.stories.tsx

@@ -0,0 +1,337 @@
+import { mdiArrowRight, mdiInformationOutline } from '@redsift/icons';
+import React from 'react';
+
+import { Flexbox, Button, Text, Number } from '@redsift/design-system';
+import { DialogContent } from '.';
+import { Dialog } from '../dialog';
+
+export default {
+  title: 'Popovers/Dialog/DialogContent',
+  component: DialogContent,
+};
+
+export const Simple = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen>
+      <DialogContent>
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const Empty = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen hasCloseButton={false}>
+      <DialogContent />
+    </Dialog>
+  </Flexbox>
+);
+
+export const Dismissable = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen hasCloseButton={true}>
+      <DialogContent>
+        <DialogContent.Header />
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const WithHeader = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen>
+      <DialogContent>
+        <DialogContent.Header header="DialogContent Header" />
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const WithSubheader = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen>
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        />
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const WithIcon = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen hasCloseButton={false}>
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+          icon={mdiInformationOutline}
+        />
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const WithDescription = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen>
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Flexbox flexDirection="column" alignItems="flex-start" gap="8px">
+            <Text>
+              <Number value={102} as="b" /> mails have been detected from this
+              domain.
+            </Text>
+            <Button variant="secondary" rightIcon={mdiArrowRight}>
+              More details
+            </Button>
+          </Flexbox>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const WithActions = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen>
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const Small = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen size="small">
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const Medium = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen size="medium">
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const Large = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen size="large">
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+          eiusmod tempor incididunt ut labore et dolore magna aliqua.
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const InitialFocusOnHeader = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen initialFocus="header">
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          {Array.from({ length: 100 }).map((e, i) => (
+            <p key={i}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ))}
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const InitialFocusOnBody = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen initialFocus="body">
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          {Array.from({ length: 100 }).map((e, i) => (
+            <p key={i}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ))}
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);
+
+export const InitialFocusOnActions = () => (
+  <Flexbox padding="32px" style={{ backgroundColor: '#EFEFEF' }}>
+    <Dialog isOpen initialFocus="actions">
+      <DialogContent>
+        <DialogContent.Header
+          header="DialogContent Header"
+          subheader="Subheader"
+        >
+          <Text>
+            <Number value={102} as="b" /> mails have been detected from this
+            domain.
+          </Text>
+        </DialogContent.Header>
+        <DialogContent.Body>
+          {Array.from({ length: 100 }).map((e, i) => (
+            <p key={i}>
+              Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
+              eiusmod tempor incididunt ut labore et dolore magna aliqua.
+            </p>
+          ))}
+        </DialogContent.Body>
+        <DialogContent.Actions justifyContent="space-between">
+          <Button variant="unstyled">Previous</Button>
+          <Flexbox>
+            <Button variant="secondary">Cancel</Button>
+            <Button>Next</Button>
+          </Flexbox>
+        </DialogContent.Actions>
+      </DialogContent>
+    </Dialog>
+  </Flexbox>
+);

package/src/components/dialog-content/DialogContent.tsx

@@ -0,0 +1,134 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import {
+  useMergeRefs,
+  FloatingPortal,
+  FloatingFocusManager,
+  useTransitionStyles,
+} from '@floating-ui/react';
+import { mdiClose } from '@redsift/icons';
+
+import { useLocalizedStringFormatter } from 'react-aria';
+import intlMessages from './intl';
+
+import {
+  Comp,
+  IconButton,
+  isComponent,
+  partitionComponents,
+} from '@redsift/design-system';
+import { DialogContentProps } from './types';
+import { useDialogContext } from '../dialog';
+import { StyledDialogContent, StyledFloatingOverlay } from './styles';
+import { DialogContentActions } from '../dialog-content-actions';
+import { DialogContentBody } from '../dialog-content-body';
+import { DialogContentHeader } from '../dialog-content-header';
+
+const COMPONENT_NAME = 'DialogContent';
+const CLASSNAME = 'redsift-dialog-content';
+const DEFAULT_PROPS: Partial<DialogContentProps> = {};
+
+/**
+ * The DialogContent component.
+ */
+export const BaseDialogContent: Comp<DialogContentProps, HTMLDivElement> =
+  forwardRef((props, ref) => {
+    const { children, className, ...forwardedProps } = props;
+    const {
+      context: floatingContext,
+      getFloatingProps,
+      refs,
+      labelId,
+      descriptionId,
+      handleOpen,
+      hasCloseButton,
+      initialFocus: propsInitialFocus,
+      size,
+      headerRef,
+      bodyRef,
+      actionsRef,
+    } = useDialogContext();
+    const { isMounted, styles } = useTransitionStyles(floatingContext);
+    const dialogRef = useMergeRefs([refs.setFloating, ref]);
+
+    const stringFormatter = useLocalizedStringFormatter(intlMessages);
+
+    const [[header], [body], [actions]] = partitionComponents(
+      React.Children.toArray(children),
+      [
+        isComponent('DialogContentHeader'),
+        isComponent('DialogContentBody'),
+        isComponent('DialogContentActions'),
+      ]
+    );
+
+    const initialFocus:
+      | number
+      | React.MutableRefObject<HTMLElement | null>
+      | undefined =
+      propsInitialFocus === 'header'
+        ? headerRef
+        : propsInitialFocus === 'body'
+        ? bodyRef
+        : propsInitialFocus === 'actions'
+        ? actionsRef
+        : propsInitialFocus
+        ? propsInitialFocus
+        : undefined;
+
+    return (
+      <FloatingPortal id="redsift-app-container">
+        {isMounted && (
+          <StyledFloatingOverlay lockScroll style={styles}>
+            <FloatingFocusManager
+              context={floatingContext}
+              initialFocus={initialFocus ? initialFocus : undefined}
+            >
+              <StyledDialogContent
+                className={classNames(DialogContent.className, className)}
+                {...forwardedProps}
+                ref={dialogRef}
+                aria-labelledby={labelId}
+                aria-describedby={descriptionId}
+                {...getFloatingProps(props)}
+                style={styles}
+                $size={size!}
+              >
+                {header || hasCloseButton ? (
+                  <div className={`${BaseDialogContent.className}__header`}>
+                    {header}
+
+                    {hasCloseButton ? (
+                      <IconButton
+                        aria-label={stringFormatter.format('close')}
+                        className={`${BaseDialogContent.className}-header__icon-button`}
+                        color="question"
+                        icon={mdiClose}
+                        onClick={() => handleOpen(false)}
+                      />
+                    ) : null}
+                  </div>
+                ) : null}
+
+                {body || actions ? (
+                  <div className={`${BaseDialogContent.className}__content`}>
+                    {body}
+                    {actions}
+                  </div>
+                ) : null}
+              </StyledDialogContent>
+            </FloatingFocusManager>
+          </StyledFloatingOverlay>
+        )}
+      </FloatingPortal>
+    );
+  });
+BaseDialogContent.className = CLASSNAME;
+BaseDialogContent.defaultProps = DEFAULT_PROPS;
+BaseDialogContent.displayName = COMPONENT_NAME;
+
+export const DialogContent = Object.assign(BaseDialogContent, {
+  Header: DialogContentHeader,
+  Body: DialogContentBody,
+  Actions: DialogContentActions,
+});

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

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

package/src/components/dialog-content/intl/en-US.json

@@ -0,0 +1,3 @@
+{
+  "close": "Close"
+}

package/src/components/dialog-content/intl/fr-FR.json

@@ -0,0 +1,3 @@
+{
+  "close": "Fermer"
+}

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

@@ -0,0 +1,7 @@
+import enUS from './en-US.json';
+import frFR from './fr-FR.json';
+
+export default {
+  'en-US': enUS,
+  'fr-FR': frFR,
+};

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

@@ -0,0 +1,72 @@
+import { FloatingOverlay } from '@floating-ui/react';
+import styled, { css } from 'styled-components';
+import { DialogSize } from '../dialog/types';
+import { StyledDialogContentProps } from './types';
+
+/**
+ * Component style.
+ */
+export const StyledDialogContent = styled.div<StyledDialogContentProps>`
+  background-color: var(--redsift-color-neutral-white);
+  box-shadow: 0px 2px 4px -1px rgba(0, 0, 0, 0.2);
+  color: var(--redsift-color-neutral-black);
+  display: flex;
+  filter: drop-shadow(0px 4px 5px rgba(0, 0, 0, 0.14))
+    drop-shadow(0px 1px 10px rgba(0, 0, 0, 0.12));
+  flex-direction: column;
+  font-family: var(--redsift-typography-dialog-font-family);
+  font-size: var(--redsift-typography-dialog-font-size);
+  font-weight: var(--redsift-typography-dialog-font-weight);
+  line-height: var(--redsift-typography-dialog-line-height);
+  margin: 32px;
+  max-width: calc(100vw - 48px);
+  padding: 24px;
+  width: 540px;
+  z-index: var(--redsift-layout-z-index-dialog);
+
+  ${({ $size }) => {
+    switch ($size) {
+      case DialogSize.small:
+        return css`
+          width: 540px;
+        `;
+      case DialogSize.large:
+        return css`
+          width: 800px;
+        `;
+      case DialogSize.medium:
+      default:
+        return css`
+          width: 700px;
+        `;
+    }
+  }}
+
+  &:focus-visible {
+    outline: none;
+  }
+
+  .redsift-dialog-content__header {
+    align-items: flex-start;
+    display: flex;
+    justify-content: space-between;
+  }
+
+  .redsift-card-header__icon-button {
+    margin-top: 8px;
+    margin-left: auto;
+    margin-right: 8px;
+
+    [dir='rtl'] & {
+      margin-left: 8px;
+      margin-right: auto;
+    }
+  }
+`;
+
+export const StyledFloatingOverlay = styled(FloatingOverlay)`
+  background: rgba(0, 0, 0, 0.8);
+  display: grid;
+  place-items: center;
+  z-index: var(--redsift-layout-z-index-overlay);
+`;

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

@@ -0,0 +1,11 @@
+import { ComponentProps } from 'react';
+import { DialogSize } from '../dialog/types';
+
+/**
+ * Component props.
+ */
+export interface DialogContentProps extends ComponentProps<'div'> {}
+
+export type StyledDialogContentProps = DialogContentProps & {
+  $size: DialogSize;
+};

package/src/components/dialog-content-actions/DialogContentActions.test.tsx

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

package/src/components/dialog-content-actions/DialogContentActions.tsx

@@ -0,0 +1,40 @@
+import React, { forwardRef } from 'react';
+import classNames from 'classnames';
+import { useMergeRefs } from '@floating-ui/react';
+
+import { Comp } from '@redsift/design-system';
+import { StyledDialogContentActions } from './styles';
+import { DialogContentActionsProps } from './types';
+import { useDialogContext } from '../dialog';
+
+const COMPONENT_NAME = 'DialogContentActions';
+const CLASSNAME = 'redsift-dialog-content-actions';
+const DEFAULT_PROPS: Partial<DialogContentActionsProps> = {
+  flexDirection: 'row',
+};
+
+/**
+ * The DialogContentActions component.
+ */
+export const DialogContentActions: Comp<
+  DialogContentActionsProps,
+  HTMLDivElement
+> = forwardRef((props, ref) => {
+  const { children, className, ...forwardedProps } = props;
+
+  const { actionsRef, initialFocus } = useDialogContext();
+
+  return (
+    <StyledDialogContentActions
+      {...forwardedProps}
+      className={classNames(DialogContentActions.className, className)}
+      ref={useMergeRefs([ref, actionsRef])}
+      tabIndex={initialFocus === 'actions' ? -1 : undefined}
+    >
+      {children}
+    </StyledDialogContentActions>
+  );
+});
+DialogContentActions.className = CLASSNAME;
+DialogContentActions.defaultProps = DEFAULT_PROPS;
+DialogContentActions.displayName = COMPONENT_NAME;

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

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