@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Modal/Modal.stories.tsx

@@ -0,0 +1,255 @@
+/*
+ADOBE CONFIDENTIAL
+Copyright 2023 Adobe
+All Rights Reserved.
+NOTICE: All information contained herein is, and remains
+the property of Adobe and its suppliers, if any. The intellectual
+and technical concepts contained herein are proprietary to Adobe
+and its suppliers and are protected by all applicable intellectual
+property laws, including trade secret and copyright laws.
+Dissemination of this information or reproduction of this material
+is strictly forbidden unless prior written permission is obtained
+from Adobe.
+*/
+
+import { Meta, StoryObj } from '@storybook/preact';
+import { Modal as component, ModalProps } from './Modal';
+import { useState } from 'preact/hooks';
+import { Button } from '../Button';
+import { expect, userEvent, within } from '@storybook/test';
+
+const meta: Meta<ModalProps> = {
+  title: 'Components/Modal',
+  component,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    children: {
+      description: 'Content',
+      control: { type: 'text' },
+      defaultValue: { summary: '<empty string>' },
+    },
+    size: {
+      description: 'Modal size',
+      control: { type: 'radio' },
+      options: ['small', 'medium', 'full'],
+      defaultValue: { summary: 'small' },
+    },
+    title: {
+      description: 'Title',
+      control: { type: 'text' },
+      defaultValue: { summary: '<empty string>' },
+    },
+    centered: {
+      description: 'Content inside modal is centered',
+      type: 'boolean',
+      defaultValue: { summary: 'false' },
+    },
+    onClose: {
+      description: 'On close modal callback',
+      control: { type: 'null' },
+      defaultValue: { summary: 'null' },
+    },
+    backgroundDim: {
+      description: 'Background behind modal content is dimmed',
+      type: 'boolean',
+      defaultValue: { summary: 'true' },
+    },
+    clickToDismiss: {
+      description: 'Enable click on background to dismiss the modal',
+      type: 'boolean',
+      defaultValue: { summary: 'true' },
+    },
+    escapeToDismiss: {
+      description: 'Enable ESCAPE key press to dismiss the modal',
+      type: 'boolean',
+      defaultValue: { summary: 'true' },
+    },
+    showCloseButton: {
+      description: 'Show close button',
+      type: 'boolean',
+      defaultValue: { summary: 'true' },
+    },
+  },
+  decorators: [
+    (Story, attrs) => {
+      const [active, setActive] = useState(false);
+
+      attrs.args.onClose = () => setActive(false);
+
+      return (
+        <div>
+          <Button onClick={() => setActive(true)}>Open Modal</Button>
+
+          {active && Story()}
+        </div>
+      );
+    },
+  ],
+};
+
+type Story = StoryObj<ModalProps>;
+
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="small" title={<h4>Modal Title</h4>}>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+
+export const SmallModal: Story = {
+  args: {
+    size: 'small',
+    children: "👋 Howdy, I'm Howdy!",
+    title: <h4>Small modal</h4>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+
+    const modal = document.querySelector(
+      '.dropin-modal__body'
+    ) as HTMLDivElement;
+
+    await expect(modal).toBeVisible();
+
+    await expect(await canvas.findByText('Small modal')).toBeVisible();
+
+    const closeButton = document.querySelector(
+      '.dropin-modal__header-close-button'
+    ) as HTMLButtonElement;
+
+    await userEvent.click(closeButton);
+
+    await expect(modal).not.toBeVisible();
+
+    await expect(canvas.getByText('Open Modal')).toBeVisible();
+  },
+};
+
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="medium" centered={true} title={<h3>Medium modal</h3>}>
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+
+export const MediumModal: Story = {
+  args: {
+    size: 'medium',
+    centered: true,
+    children: "👋 Howdy, I'm Howdy!",
+    title: <h3>Medium modal</h3>,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+
+    const modal = document.querySelector(
+      '.dropin-modal__body'
+    ) as HTMLDivElement;
+
+    await expect(modal).toBeVisible();
+
+    await expect(await canvas.findByText('Medium modal')).toBeVisible();
+
+    const closeButton = document.querySelector(
+      '.dropin-modal__header-close-button'
+    ) as HTMLButtonElement;
+
+    await userEvent.click(closeButton);
+
+    await expect(modal).not.toBeVisible();
+
+    await expect(canvas.getByText('Open Modal')).toBeVisible();
+  },
+};
+
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="full">
+ *      <div>👋 Howdy, I'm Howdy!</div>
+ * </Modal>
+ * ```
+ */
+
+export const FullModal: Story = {
+  args: {
+    size: 'full',
+    children: "👋 Howdy, I'm Howdy!",
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    await userEvent.click(canvas.getByRole('button'));
+
+    const modal = document.querySelector(
+      '.dropin-modal__body'
+    ) as HTMLDivElement;
+
+    await expect(modal).toBeVisible();
+
+    const closeButton = document.querySelector(
+      '.dropin-modal__header-close-button'
+    ) as HTMLButtonElement;
+
+    await userEvent.click(closeButton);
+
+    await expect(modal).not.toBeVisible();
+
+    await expect(canvas.getByText('Open Modal')).toBeVisible();
+  },
+};
+
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="full" centered={true}>
+ *      Lorem ipsum...
+ * </Modal>
+ * ```
+ */
+
+export const OverflowingChildren: Story = {
+  args: {
+    size: 'full',
+    centered: true,
+    children: `
+        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras tincidunt neque gravida ligula malesuada bibendum et quis enim. Mauris sed nunc odio. Sed ornare nec nulla at fringilla. Cras egestas laoreet mi, sit amet tristique ipsum. Quisque facilisis ante et nisi hendrerit, et cursus est iaculis. Vestibulum nec erat eleifend, convallis velit quis, pharetra est. Nam augue dolor, blandit ac suscipit pretium, efficitur ut mi. Donec et suscipit ipsum, vel ultricies felis. Maecenas vestibulum velit mauris, ut sagittis arcu auctor maximus. Nullam gravida eget felis ac iaculis. Ut a consectetur ipsum, ac cursus magna. Quisque tempus tempus magna at vehicula. Duis ac imperdiet purus, finibus aliquet enim. Sed vel diam pretium, blandit risus vel, convallis mauris. Mauris consectetur iaculis diam. 
+        `.repeat(15),
+  },
+};
+
+/**
+ * ```ts
+ * import { Modal } from '@/elsie/components/Modal';
+ *
+ * <Modal size="medium" title={<h3 style={{marginTop: 0}}>{`Howdy! This is the modal title`.repeat(5)}</h3>}>
+ *      Howdy! This is the modal content.
+ * </Modal>
+ * ```
+ */
+
+export const OverflowingTitle: Story = {
+  args: {
+    size: 'medium',
+    children: `Howdy! This is the modal content.`,
+    title: (
+      <h3 style={{ marginTop: 0 }}>
+        {`Howdy! This is the modal title`.repeat(5)}
+      </h3>
+    ),
+  },
+};
+
+export default meta;

package/src/components/Modal/Modal.tsx

@@ -0,0 +1,162 @@
+/*
+ADOBE CONFIDENTIAL
+Copyright 2023 Adobe
+All Rights Reserved.
+NOTICE: All information contained herein is, and remains
+the property of Adobe and its suppliers, if any. The intellectual
+and technical concepts contained herein are proprietary to Adobe
+and its suppliers and are protected by all applicable intellectual
+property laws, including trade secret and copyright laws.
+Dissemination of this information or reproduction of this material
+is strictly forbidden unless prior written permission is obtained
+from Adobe.
+*/
+
+import { useText } from '@adobe/elsie/i18n';
+import { classes } from '@adobe/elsie/lib';
+import {
+  FunctionComponent,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+} from 'preact/compat';
+import { Button } from '../Button';
+import { Close as CloseSVG } from '@adobe/elsie/icons';
+import { VNode } from 'preact';
+
+import '@adobe/elsie/components/Modal/Modal.css';
+
+export interface ModalProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size' | 'title'> {
+  size?: 'small' | 'medium' | 'full';
+  title?: VNode;
+  centered?: boolean;
+  onClose?: () => void;
+  backgroundDim?: boolean;
+  clickToDismiss?: boolean;
+  escapeToDismiss?: boolean;
+  showCloseButton?: boolean;
+}
+
+export const Modal: FunctionComponent<ModalProps> = ({
+  size = 'small',
+  title = null,
+  centered = false,
+  backgroundDim = true,
+  clickToDismiss = true,
+  escapeToDismiss = true,
+  onClose,
+  showCloseButton = true,
+  className,
+  children = null,
+  ...props
+}) => {
+  const handleOnClose = useCallback(() => {
+    onClose?.();
+  }, [onClose]);
+
+  const translations = useText({
+    modalCloseLabel: 'Dropin.Modal.Close.label',
+  });
+
+  // Close on background click
+  useEffect(() => {
+    const handleOutsideClick = (event: MouseEvent) => {
+      const modal = document.querySelector('.dropin-modal');
+      const modalBody = document.querySelector('.dropin-modal__body');
+
+      if (
+        clickToDismiss &&
+        modal &&
+        modalBody &&
+        !modalBody.contains(event.target as Node)
+      ) {
+        handleOnClose();
+      }
+    };
+
+    document.addEventListener('mousedown', handleOutsideClick);
+
+    return () => {
+      document.removeEventListener('mousedown', handleOutsideClick);
+    };
+  }, [handleOnClose, clickToDismiss]);
+
+  // Close on ESC
+  useEffect(() => {
+    const handleKeyDown = (event: KeyboardEvent) => {
+      if (event.key === 'Escape' && escapeToDismiss) {
+        handleOnClose();
+      }
+    };
+
+    document.addEventListener('keydown', handleKeyDown);
+
+    return () => {
+      document.removeEventListener('keydown', handleKeyDown);
+    };
+  }, [handleOnClose, escapeToDismiss]);
+
+  // Prevent document scrolling
+  useEffect(() => {
+    const scrollingElement = document.scrollingElement as HTMLElement;
+
+    const defaultOverflowValue = scrollingElement.style.overflow;
+
+    scrollingElement.style.overflow = 'hidden';
+
+    return () => {
+      scrollingElement.style.overflow = defaultOverflowValue;
+    };
+  }, []);
+
+  return (
+    <div
+      className={classes([
+        'dropin-modal',
+        ['dropin-modal--dim', backgroundDim],
+      ])}
+    >
+      <div
+        {...props}
+        className={classes([
+          'dropin-modal__body',
+          [`dropin-modal__body--${size}`, size],
+          className,
+        ])}
+      >
+        <div
+          className={classes([
+            'dropin-modal__header',
+            ['dropin-modal__header-title', !!title],
+          ])}
+        >
+          {title && (
+            <div className={classes(['dropin-modal__header-title-content'])}>
+              {title}
+            </div>
+          )}
+
+          {showCloseButton && (
+            <Button
+              aria-label={translations.modalCloseLabel}
+              variant="tertiary"
+              className="dropin-modal__header-close-button"
+              onClick={handleOnClose}
+              icon={<CloseSVG />}
+            />
+          )}
+        </div>
+
+        <div
+          className={classes([
+            'dropin-modal__content',
+            ['dropin-modal__body--centered', centered],
+          ])}
+        >
+          {children}
+        </div>
+      </div>
+    </div>
+  );
+};

package/src/components/Modal/index.ts

@@ -0,0 +1,15 @@
+/*
+ADOBE CONFIDENTIAL
+Copyright 2023 Adobe
+All Rights Reserved.
+NOTICE: All information contained herein is, and remains
+the property of Adobe and its suppliers, if any. The intellectual
+and technical concepts contained herein are proprietary to Adobe
+and its suppliers and are protected by all applicable intellectual
+property laws, including trade secret and copyright laws.
+Dissemination of this information or reproduction of this material
+is strictly forbidden unless prior written permission is obtained
+from Adobe.
+*/
+
+export * from '@adobe/elsie/components/Modal/Modal';

package/src/components/Pagination/Pagination.css

@@ -0,0 +1,86 @@
+.dropin-pagination {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 var(--grid-2-gutters);
+}
+
+.dropin-pagination-arrow {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+  background-color: transparent;
+  border: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  cursor: pointer;
+}
+
+.dropin-pagination-arrow--backward svg {
+  transform: rotate(90deg);
+}
+
+.dropin-pagination-arrow--forward svg {
+  transform: rotate(-90deg);
+}
+
+.dropin-pagination_list {
+  list-style: none;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 0 var(--grid-2-gutters);
+  margin: 0;
+  padding: 0;
+}
+
+.dropin-pagination_list-item {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  margin: 0;
+  padding: 0;
+  width: 16px;
+  height: 16px;
+}
+
+.dropin-pagination_list-item--active {
+  background-color: var(--color-neutral-300);
+  width: 16px;
+  height: 16px;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropin-pagination_list-item button {
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  background-color: transparent;
+  border: none;
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+}
+
+.dropin-pagination_list-item--active button {
+  cursor: default;
+}
+
+.dropin-pagination_list-item--active button:disabled,
+.dropin-pagination_list-item--ellipsis button,
+.dropin-pagination-arrow--backward:disabled,
+.dropin-pagination-arrow--forward:disabled {
+  cursor: default;
+}
+
+.dropin-pagination button:not(:disabled) {
+  color: var(--color-neutral-800);
+}
+
+.dropin-pagination button {
+  appearance: none;
+  -webkit-appearance: none;
+}

package/src/components/Pagination/Pagination.stories.tsx

@@ -0,0 +1,108 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+
+import {
+  Pagination,
+  PaginationProps,
+} from '@adobe/elsie/components/Pagination';
+import { expect, userEvent, within } from '@storybook/test';
+import { useState } from 'preact/hooks';
+
+/**
+ *  A component that divides large content sets into multiple pages, allowing users to navigate through the data with controls like "Next," "Previous," or page numbers, enhancing performance and usability by limiting the number of items displayed per page.
+ */
+
+const meta: Meta<PaginationProps> = {
+  title: 'Components/Pagination',
+  component: Pagination,
+  argTypes: {
+    totalPages: {
+      control: { type: 'number' },
+      description: 'The total number of pages in the pagination component.',
+      defaultValue: 10,
+    },
+    currentPage: {
+      control: { type: 'number' },
+      description: 'The current active page in the pagination.',
+      defaultValue: 1,
+    },
+    onChange: {
+      action: 'pageChanged',
+      description:
+        'Called when the page number is changed, and it takes the resulting page number.',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<PaginationProps>;
+
+/**
+ * ```ts
+ * import { Pagination } from '@adobe/elsie/components/Pagination';
+ * ```
+ */
+
+export const ShortPagination: Story = {
+  name: 'Short pagination list',
+  args: { totalPages: 5 },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    const item1 = canvas.getByTestId('dropin-pagination_list-item--1');
+    const item2 = canvas.getByTestId('dropin-pagination_list-item--2');
+    const item5 = canvas.getByTestId('dropin-pagination_list-item--5');
+    const nextButton = canvas.getByTestId('next-button');
+
+    expect(item1).toHaveClass('dropin-pagination_list-item--active');
+    expect(item2).not.toHaveClass('dropin-pagination_list-item--active');
+
+    await userEvent.click(nextButton);
+
+    expect(item1).not.toHaveClass('dropin-pagination_list-item--active');
+    expect(item2).toHaveClass('dropin-pagination_list-item--active');
+
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+    await userEvent.click(nextButton);
+
+    expect(item5).toHaveClass('dropin-pagination_list-item--active');
+  },
+  render: (args) => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = args.totalPages;
+
+    const handlePageChange = (newPage: number) => {
+      setCurrentPage(newPage);
+    };
+
+    return (
+      <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage}
+        onChange={handlePageChange}
+      />
+    );
+  },
+};
+
+export const LongPagination: Story = {
+  name: 'Long pagination list',
+  render: () => {
+    const [currentPage, setCurrentPage] = useState(1);
+    const totalPages = 20;
+
+    const handlePageChange = (newPage: number) => {
+      setCurrentPage(newPage);
+    };
+
+    return (
+      <Pagination
+        totalPages={totalPages}
+        currentPage={currentPage}
+        onChange={handlePageChange}
+      />
+    );
+  },
+};