@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/InputPassword/PasswordStatusIndicator/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator';
+export { PasswordStatusIndicator as default } from '@adobe-commerce/elsie/components/InputPassword/PasswordStatusIndicator/PasswordStatusIndicator';

package/src/components/InputPassword/index.ts

@@ -0,0 +1,11 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/components/InputPassword/InputPassword';
+export { InputPassword as default } from '@adobe-commerce/elsie/components/InputPassword/InputPassword';

package/src/components/Modal/Modal.css

@@ -0,0 +1,125 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-modal {
+  height: 100vh;
+  width: 100vw;
+  position: fixed;
+  top: 0;
+  left: 0;
+  z-index: 99999;
+  overflow: auto;
+  display: grid;
+  grid-template-columns: repeat(var(--grid-2-columns), 1fr);
+  grid-auto-flow: column;
+}
+
+.dropin-modal--dim {
+  background-color: rgba(0, 0, 0, 0.24);
+}
+
+.dropin-modal__body {
+  background-color: var(--color-neutral-50);
+  padding: var(--spacing-medium);
+  overflow: hidden;
+  text-align: left;
+  vertical-align: middle;
+  position: relative;
+  box-shadow: var(--shape-shadow-2);
+  border-radius: 4px;
+  flex-direction: column;
+}
+
+.dropin-modal__body--centered {
+  text-align: center;
+  margin-left: auto;
+  margin-right: auto;
+}
+
+.dropin-modal__body--full {
+  grid-column-start: 1;
+  grid-column-end: span var(--grid-2-columns);
+  margin-block: auto;
+}
+
+.dropin-modal__body--small,
+.dropin-modal__body--medium {
+  grid-column-start: 3;
+  grid-column-end: 11;
+  margin-block: auto;
+}
+
+.dropin-modal__body--small > .dropin-modal__content,
+.dropin-modal__body--medium > .dropin-modal__content,
+.dropin-modal__body--full > .dropin-modal__content {
+  margin-bottom: var(--spacing-xbig);
+}
+
+/* Modal Contents */
+
+.dropin-modal__header {
+  flex-direction: row;
+  min-height: var(--spacing-medium);
+  display: flex;
+  position: relative;
+}
+
+.dropin-modal__header-title {
+  margin-bottom: var(--spacing-small);
+}
+
+.dropin-modal__header-title-content {
+  flex-direction: row;
+  display: flex;
+  position: relative;
+}
+
+.dropin-modal__header-close-button {
+  margin-left: auto;
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+@media only screen and (min-width: 768px) {
+  .dropin-modal__body--small {
+    grid-column-start: 6;
+    grid-column-end: 9;
+    margin-block: auto;
+  }
+  .dropin-modal__body--medium {
+    grid-column-start: 4;
+    grid-column-end: 10;
+    margin-block: auto;
+  }
+
+  .dropin-modal__body--medium > .dropin-modal__content,
+  .dropin-modal__body--full > .dropin-modal__content {
+    margin: 0 var(--spacing-xxbig) var(--spacing-large);
+  }
+
+  .dropin-modal__body--medium > .dropin-modal__header,
+  .dropin-modal__body--full > .dropin-modal__header {
+    min-height: var(--spacing-xxbig);
+  }
+
+  .dropin-modal__body--medium > .dropin-modal__header-title,
+  .dropin-modal__body--full > .dropin-modal__header-title {
+    margin-bottom: var(--spacing-medium);
+  }
+}
+
+/* Large (landscape tablets, 1024px and up) */
+/* @media only screen and (min-width: 1024px) { } */
+
+/* XLarge (laptops/desktops, 1366px and up) */
+/* @media only screen and (min-width: 1366px) { } */
+
+/* XXlarge (large laptops and desktops, 1920px and up) */
+/* @media only screen and (min-width: 1920px) { } */

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

@@ -0,0 +1,250 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+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,157 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+import { useText } from '@adobe-commerce/elsie/i18n';
+import { classes } from '@adobe-commerce/elsie/lib';
+import {
+  FunctionComponent,
+  HTMLAttributes,
+  useCallback,
+  useEffect,
+} from 'preact/compat';
+import { Button } from '../Button';
+import { Close as CloseSVG } from '@adobe-commerce/elsie/icons';
+import { VNode } from 'preact';
+
+import '@adobe-commerce/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,10 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+export * from '@adobe-commerce/elsie/components/Modal/Modal';

package/src/components/Pagination/Pagination.css

@@ -0,0 +1,95 @@
+/********************************************************************
+ *  Copyright 2024 Adobe
+ *  All Rights Reserved.
+ *
+ * NOTICE:  Adobe permits you to use, modify, and distribute this 
+ * file in accordance with the terms of the Adobe license agreement 
+ * accompanying it. 
+ *******************************************************************/
+
+.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;
+}