@redsift/popovers 8.0.1 → 8.0.3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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