@adobe-commerce/elsie 1.0.0-alpha04071347

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

@@ -0,0 +1,117 @@
+/********************************************************************
+ *  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://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+
+import {
+  Pagination,
+  PaginationProps,
+} from '@adobe-commerce/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-commerce/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}
+      />
+    );
+  },
+};

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,149 @@
+/********************************************************************
+ *  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 { FunctionComponent } from 'preact';
+import { classes, isNumber } from '@adobe-commerce/elsie/lib';
+import { useCallback, useMemo } from 'preact/hooks';
+import { ChevronDown } from '@adobe-commerce/elsie/icons';
+import { Icon } from '@adobe-commerce/elsie/components/Icon';
+import { useText } from '@adobe-commerce/elsie/i18n';
+import '@adobe-commerce/elsie/components/Pagination/Pagination.css';
+
+export interface PaginationProps {
+  className?: string;
+  currentPage?: number;
+  totalPages?: number;
+  onChange?: (currentPage: number) => void;
+}
+
+export type PaginationList = {
+  page: number | string;
+  isActive: boolean;
+  label: number | string;
+};
+
+export const Pagination: FunctionComponent<PaginationProps> = ({
+  totalPages = 10,
+  currentPage = 1,
+  onChange,
+  className,
+  ...props
+}) => {
+  const translations = useText({
+    backwardButton: 'Dropin.Pagination.backwardButton.ariaLabel',
+    forwardButton: 'Dropin.Pagination.forwardButton.ariaLabel',
+  });
+
+  const handleForward = useCallback(() => {
+    const nextPage = Math.min(currentPage + 1, totalPages);
+
+    onChange?.(nextPage);
+  }, [currentPage, onChange, totalPages]);
+
+  const handleBackward = useCallback(() => {
+    const prevPage = Math.max(currentPage - 1, 1);
+
+    onChange?.(prevPage);
+  }, [currentPage, onChange]);
+
+  const handleSetPage = useCallback(
+    (currentPage: number | string) => {
+      if (isNumber(currentPage)) {
+        onChange?.(currentPage as number);
+      }
+    },
+    [onChange]
+  );
+
+  const createPages = useCallback(
+    (currentPage: number, totalPages: number): PaginationList[] => {
+      let pages: PaginationList[] = [];
+
+      const addPageRange = (start: number, end: number) => {
+        for (let i = start; i <= end; i++) {
+          pages.push({ page: i, isActive: i === currentPage, label: i });
+        }
+      };
+
+      if (totalPages <= 5) {
+        addPageRange(1, totalPages);
+      } else if (currentPage <= 2) {
+        addPageRange(1, 2);
+        pages.push({ page: 'ellipsis', isActive: false, label: '...' });
+        addPageRange(totalPages - 1, totalPages);
+      } else if (currentPage >= totalPages - 3) {
+        addPageRange(totalPages - 4, totalPages);
+      } else {
+        addPageRange(currentPage - 1, currentPage);
+        pages.push({ page: 'ellipsis', isActive: false, label: '...' });
+        addPageRange(totalPages - 1, totalPages);
+      }
+
+      return pages;
+    },
+    []
+  );
+
+  const paginationList: PaginationList[] = useMemo(
+    () => createPages(currentPage, totalPages),
+    [createPages, currentPage, totalPages]
+  );
+
+  return (
+    <div {...props} className={classes(['dropin-pagination', className])}>
+      <button
+        type="button"
+        data-testid="prev-button"
+        aria-label={translations.backwardButton}
+        disabled={currentPage === 1}
+        onClick={handleBackward}
+        className={classes([
+          'dropin-pagination-arrow',
+          'dropin-pagination-arrow--backward',
+        ])}
+      >
+        <Icon size="24" source={ChevronDown} />
+      </button>
+      <ul className="dropin-pagination_list">
+        {(paginationList as PaginationList[]).map((item, index) => (
+          <li
+            data-testid={`dropin-pagination_list-item--${item.page}`}
+            key={`${item.page}_${index}`}
+            className={classes([
+              'dropin-pagination_list-item',
+              `dropin-pagination_list-item--${item.page}`,
+              [`dropin-pagination_list-item--active`, item.isActive],
+            ])}
+          >
+            <button
+              type="button"
+              data-testid={`set-page-button-${item.page}`}
+              onClick={() => handleSetPage(item.page)}
+            >
+              {item.label}
+            </button>
+          </li>
+        ))}
+      </ul>
+      <button
+        type="button"
+        data-testid="next-button"
+        aria-label={translations.forwardButton}
+        disabled={currentPage === totalPages}
+        onClick={handleForward}
+        className={classes([
+          'dropin-pagination-arrow',
+          'dropin-pagination-arrow--forward',
+        ])}
+      >
+        <Icon size="24" source={ChevronDown} />
+      </button>
+    </div>
+  );
+};

package/src/components/Pagination/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/Pagination/Pagination';
+export { Pagination as default } from '@adobe-commerce/elsie/components/Pagination/Pagination';

package/src/components/Picker/Picker.css

@@ -0,0 +1,220 @@
+/********************************************************************
+ *  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-picker {
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  background-color: var(--color-neutral-50);
+  justify-content: space-between;
+  align-items: center;
+  cursor: pointer;
+  gap: var(--spacing-small);
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+.dropin-picker select {
+  background-color: transparent;
+  border: var(--shape-border-width-1) solid var(--color-neutral-600);
+  border-radius: var(--shape-border-radius-1);
+  color: var(--color-neutral-700);
+  appearance: none;
+  box-shadow: none;
+  flex: 1;
+  cursor: pointer;
+  width: 100%;
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+
+.dropin-picker__select:focus {
+  outline: none;
+  border: var(--shape-border-width-1) solid var(--color-neutral-800);
+}
+
+/* Resulting height of 40px for medium size, 48px for large size */
+.dropin-picker__medium .dropin-picker__select--primary,
+.dropin-picker__medium .dropin-picker__select--secondary {
+  padding: 9px var(--spacing-xxbig) 9px var(--spacing-small);
+}
+
+.dropin-picker__large .dropin-picker__select--primary,
+.dropin-picker__large .dropin-picker__select--secondary {
+  padding: 11px var(--spacing-xxbig) 11px var(--spacing-small);
+}
+
+.dropin-picker__select--medium {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+.dropin-picker__select--large {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+/* Chevron */
+.dropin-picker__chevronDown {
+  z-index: 1;
+  position: absolute;
+  color: var(--color-neutral-700);
+  right: var(--spacing-small);
+  display: block;
+  pointer-events: none;
+  padding: 0;
+  height: var(--icon-size);
+  width: var(--icon-size);
+}
+
+/* Floating label */
+.dropin-picker__floatingLabel {
+  position: absolute;
+  pointer-events: none;
+  left: var(--spacing-small);
+  color: var(--color-neutral-700);
+  touch-action: manipulation;
+  transform: translateY(-50%);
+  transition: top 20ms ease-in, font-size 50ms ease-in;
+}
+
+.dropin-picker__select--floating:focus ~ label {
+  transition: all 40ms;
+}
+
+/* Option selected */
+.dropin-picker__selected select {
+  color: var(--color-neutral-800);
+}
+
+/* Label position when option selected */
+.dropin-picker__selected label {
+  top: 30%;
+}
+
+/* Label font when option selected */
+.dropin-picker__medium.dropin-picker__floating.dropin-picker__selected label {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+}
+
+.dropin-picker__large.dropin-picker__floating.dropin-picker__selected label {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+
+/* Resulting height of 56px no matter medium or large size */
+.dropin-picker__medium.dropin-picker__floating select {
+  padding: 17px var(--spacing-small);
+}
+
+.dropin-picker__large.dropin-picker__floating select {
+  padding: 15px var(--spacing-small);
+}
+
+/* Resulting height of 56px when option selected */
+.dropin-picker__large.dropin-picker__floating.dropin-picker__selected select {
+  padding: 25px var(--spacing-xxbig) 5px var(--spacing-small);
+}
+
+.dropin-picker__medium.dropin-picker__floating.dropin-picker__selected select {
+  padding: 27px var(--spacing-xxbig) 7px var(--spacing-small);
+}
+
+/* Remove IE arrow */
+select::-ms-expand {
+  display: none;
+}
+
+/* Disabled */
+.dropin-picker__disabled select.dropin-picker__select {
+  background-color: var(--color-neutral-300);
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+  color: var(--color-neutral-500);
+  cursor: not-allowed;
+}
+
+.dropin-picker__disabled svg.dropin-picker__chevronDown {
+  color: var(--color-neutral-500);
+}
+
+/* Error */
+.dropin-picker__error select {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+  color: var(--color-alert-500);
+}
+
+.dropin-picker__error .dropin-picker__select:focus {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+}
+
+.dropin-picker__error .dropin-picker__chevronDown {
+  color: var(--color-alert-500);
+}
+
+.dropin-picker__error label {
+  color: var(--color-alert-500);
+}
+
+/* Secondary variant */
+.dropin-picker select.dropin-picker__select--secondary {
+  border-top: var(--shape-border-width-1) solid transparent;
+  border-left: 0 none;
+  border-right: 0 none;
+  border-radius: 0;
+}
+
+.dropin-picker__disabled select.dropin-picker__select--secondary {
+  border-bottom: var(--shape-border-width-1) solid var(--color-neutral-500);
+}
+.dropin-picker__error select.dropin-picker__select--secondary {
+  border-top: var(--shape-border-width-1) solid transparent;
+  border-left: 0 none;
+  border-right: 0 none;
+}
+
+/* Icon */
+.dropin-picker__icon--placeholder {
+  z-index: 1;
+  position: absolute;
+  color: var(--color-neutral-700);
+  left: var(--spacing-small);
+  display: block;
+  pointer-events: none;
+  padding: 0;
+  height: var(--icon-size);
+  width: var(--icon-size);
+}
+
+.dropin-picker__icon select.dropin-picker__select {
+  padding-left: var(--spacing-xxbig);
+}
+
+.dropin-picker__floating.dropin-picker__selected.dropin-picker__icon select {
+  padding-left: var(--spacing-xxbig);
+}
+
+.dropin-picker__floating.dropin-picker__selected.dropin-picker__icon label {
+  left: var(--spacing-xxbig);
+}
+
+/* Medium (portrait tablets and large phones, 768px and up) */
+/* @media only screen and (min-width: 768px) { } */
+
+/* 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) { } */