@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Pagination/Pagination.tsx

@@ -0,0 +1,140 @@
+import { FunctionComponent } from 'preact';
+import { classes, isNumber } from '@adobe/elsie/lib';
+import { useCallback, useMemo } from 'preact/hooks';
+import { ChevronDown } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import { useText } from '@adobe/elsie/i18n';
+import '@adobe/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,2 @@
+export * from '@adobe/elsie/components/Pagination/Pagination';
+export { Pagination as default } from '@adobe/elsie/components/Pagination/Pagination';

package/src/components/Picker/Picker.css

@@ -0,0 +1,211 @@
+/* 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) { } */

package/src/components/Picker/Picker.stories.tsx

@@ -0,0 +1,309 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Picker, PickerProps } from '@adobe/elsie/components/Picker';
+import { expect, userEvent, within } from '@storybook/test';
+import { Placeholder } from '@adobe/elsie/icons';
+
+/**
+ * Use Pickers to let users select values or items from predefined lists.
+ */
+const meta: Meta<PickerProps> = {
+  title: 'Components/Picker',
+  component: Picker,
+  argTypes: {
+    name: {
+      description: 'Field name (used for mapping the value in a form)',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: 'string',
+    },
+    variant: {
+      description: 'Variant of the picker',
+      control: { type: 'radio' },
+      type: 'string',
+      defaultValue: { summary: 'primary' },
+      options: ['primary', 'secondary'],
+    },
+    size: {
+      description: 'Size of the picker',
+      control: 'radio',
+      options: ['medium', 'large'],
+      defaultValue: { summary: 'medium' },
+    },
+    floatingLabel: {
+      description: 'Floating label text',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    placeholder: {
+      description:
+        'Placeholder text (will be overridden by floatingLabel if provided)',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    defaultOption: {
+      description: 'Default available option from the options array',
+      type: {
+        required: false,
+        /* @ts-ignore */
+        name: 'object',
+      },
+    },
+    error: {
+      description: 'Whether or not the field has an error',
+      type: 'boolean',
+      defaultValue: {
+        summary: false,
+      },
+    },
+    options: {
+      description: 'Array of options',
+      type: {
+        required: true,
+        /* @ts-ignore */
+        name: 'Array',
+      },
+    },
+    disabled: {
+      description: 'Whether or not the field is disabled',
+      type: 'boolean',
+      defaultValue: {
+        summary: false,
+      },
+    },
+    icon: {
+      description: 'Icon to display in the Picker',
+    },
+    handleSelect: {
+      description: 'Callback function for when a value is selected',
+      type: 'function',
+      defaultValue: {
+        summary: '() => {}',
+      },
+      action: 'Value Selected',
+    },
+  },
+  decorators: [(Story) => <div style={{ width: '300px' }}>{Story()}</div>],
+};
+
+export default meta;
+
+interface StoryProps extends PickerProps {
+  handleSubmit?: (e: Event) => void;
+}
+
+type Story = StoryObj<StoryProps>;
+
+/**
+ * ```ts
+ * import { Picker } from '@/checkout/components/Picker';
+ * ```
+ */
+
+export const Primary: Story = {
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    defaultOption: {
+      value: 'option1',
+      text: 'A Option 1',
+    },
+    placeholder: 'Select an option',
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+        disabled: true,
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+      },
+    ],
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+
+    userEvent.click(canvas.getByText('A Option 1'));
+    expect(canvas.getByText('A Option 1')).toBeVisible();
+    expect(canvas.getByText('B Option 2')).toBeVisible();
+
+    const select = document.querySelector(
+      '.dropin-picker__select'
+    ) as HTMLSelectElement;
+
+    userEvent.selectOptions(select, 'option3');
+
+    expect(select.textContent).toContain('C Option 3');
+  },
+};
+
+export const SecondaryWithIcon: Story = {
+  name: 'Secondary with icon',
+  args: {
+    name: 'pickerField',
+    variant: 'secondary',
+    defaultOption: {
+      value: 'option2',
+      text: 'B Option 2',
+    },
+    placeholder: 'Select an option',
+    icon: <Placeholder />,
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+        disabled: true,
+      },
+    ],
+  },
+};
+
+export const PlaceholderText: Story = {
+  name: 'Secondary with placeholder',
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    placeholder: 'Select an option',
+    icon: <Placeholder />,
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+        disabled: true,
+      },
+    ],
+  },
+};
+
+export const FloatingLabel: Story = {
+  name: 'Floating label',
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    floatingLabel: 'Floating label',
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+        disabled: true,
+      },
+    ],
+  },
+};
+
+export const FloatingLabelWithDefaultOption: Story = {
+  name: 'Floating label with default option',
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    floatingLabel: 'Floating label',
+    defaultOption: {
+      value: 'option2',
+      text: 'B Option 2',
+    },
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+        disabled: true,
+      },
+    ],
+  },
+};
+
+export const FloatingLabelWithValue: Story = {
+  name: 'Floating label with value',
+  args: {
+    name: 'pickerField',
+    variant: 'primary',
+    floatingLabel: 'Floating label',
+    value: 'option2',
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+        disabled: true,
+      },
+    ],
+  },
+};
+
+export const MandatoryFieldFloatingLabelWithValue: Story = {
+  name: 'Mandatory field floating label with value',
+  args: {
+    name: 'pickerFieldPrimary',
+    variant: 'primary',
+    floatingLabel: 'Floating label',
+    value: 'option2',
+    required: true,
+    options: [
+      {
+        value: 'option1',
+        text: 'A Option 1',
+      },
+      {
+        value: 'option2',
+        text: 'B Option 2',
+      },
+      {
+        value: 'option3',
+        text: 'C Option 3',
+        disabled: true,
+      },
+    ],
+  },
+};