@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/ProgressSpinner/ProgressSpinner.css

@@ -0,0 +1,91 @@
+/********************************************************************
+ *  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-progress-spinner-provider {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  border-radius: inherit;
+  opacity: 1;
+  padding: var(--spacing-small);
+}
+
+.dropin-progress-spinner {
+  --size: var(--spacing-medium);
+  --stroke-width: var(--shape-icon-stroke-4);
+  width: var(--size);
+  height: var(--size);
+  border-style: solid;
+  border-width: var(--stroke-width);
+  border-color: var(--color-neutral-400);
+  border-top-color: var(--color-brand-500);
+  border-radius: 50%;
+  animation: indeterminate 1s infinite ease-in-out;
+}
+
+.dropin-progress-spinner-with-provider {
+  position: absolute;
+  top: calc(50% - var(--size) / 2 - var(--stroke-width));
+  left: calc(50% - var(--size) / 2 - var(--stroke-width));
+}
+
+.dropin-progress-spinner-background {
+  --bgColor: var(--color-neutral-50);
+  background-color: var(--bgColor);
+  border-radius: inherit;
+  opacity: 0.5;
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  margin-top: calc(-1 * var(--spacing-small));
+  margin-left: calc(-1 * var(--spacing-small));
+}
+
+.dropin-progress-spinner--shape-size-small {
+  --size: var(--spacing-medium);
+}
+
+.dropin-progress-spinner--shape-size-medium {
+  --size: var(--spacing-big);
+}
+
+.dropin-progress-spinner--shape-size-big {
+  --size: var(--spacing-xxbig);
+}
+
+.dropin-progress-spinner--shape-size-large {
+  --size: var(--spacing-large);
+}
+
+.dropin-progress-spinner--shape-stroke-1 {
+  --stroke-width: var(--shape-icon-stroke-1);
+}
+
+.dropin-progress-spinner--shape-stroke-2 {
+  --stroke-width: var(--shape-icon-stroke-2);
+}
+
+.dropin-progress-spinner--shape-stroke-3 {
+  --stroke-width: var(--shape-icon-stroke-3);
+}
+
+.dropin-progress-spinner--shape-stroke-4 {
+  --stroke-width: var(--shape-icon-stroke-4);
+}
+
+@keyframes indeterminate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}

package/src/components/ProgressSpinner/ProgressSpinner.stories.tsx

@@ -0,0 +1,300 @@
+/********************************************************************
+ *  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 { expect } from '@storybook/test';
+import type { Meta, StoryObj } from '@storybook/preact';
+import ProgressSpinner, {
+  ProgressSpinner as component,
+  ProgressSpinnerProps,
+} from '@adobe-commerce/elsie/components/ProgressSpinner';
+import { Search } from '@adobe-commerce/elsie/icons';
+import { ActionButton, Button, Card, Icon, RadioButton, ImageSwatch } from '..';
+
+/**
+ * Use Progress Spinners to display ongoing activity or loading status.
+ */
+const meta: Meta<ProgressSpinnerProps> = {
+  title: 'Components/ProgressSpinner',
+  component,
+  argTypes: {
+    size: {
+      type: 'select',
+      table: {
+        defaultValue: {
+          summary: 'small',
+        },
+      },
+      options: ['small', 'medium', 'big', 'large'],
+      description: 'Size of the spinner',
+    },
+    stroke: {
+      type: 'select',
+      table: {
+        defaultValue: {
+          summary: '4',
+        },
+      },
+      options: ['1', '2', '3', '4'],
+      description: 'Stroke of the spinner',
+    },
+    active: {
+      type: 'boolean',
+      table: {
+        defaultValue: {
+          summary: 'true',
+        },
+      },
+      options: [true, false],
+      description:
+        'Whether the spinner is active or not (not a prop, just for story).',
+    },
+    ariaLabel: {
+      type: {
+        required: false,
+        name: 'string',
+      },
+      table: {
+        defaultValue: {
+          summary: 'Updating',
+        },
+      },
+      description: 'Aria label for the spinner',
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<ProgressSpinnerProps>;
+
+/**
+ * ```ts
+ * import { ProgressSpinner } from '@adobe-commerce/elsie/components/ProgressSpinner';
+ * ```
+ */
+
+export const SmallSpinner: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'small',
+    stroke: '4',
+  },
+  render: ({ ariaLabel, size, stroke }) => (
+    <ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke} />
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const LargeSpinnerWithCard: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'large',
+    stroke: '4',
+    active: true,
+  },
+  render: ({ ariaLabel, size, stroke, active }) => {
+    const components = (
+      <Card variant={'secondary'}>
+        <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+        <p style={{ font: 'var(--type-body-2-default-font)' }}>
+          This is a short description of the item and should be kept to two or
+          three lines as maximum.
+        </p>
+        <ActionButton disabled={active} children={'Action'} />
+      </Card>
+    );
+
+    return active ? (
+      <ProgressSpinner
+        aria-label={ariaLabel}
+        size={size}
+        stroke={stroke}
+        style={{ backgroundColor: 'var(--color-neutral-200);' }}
+      >
+        {components}
+      </ProgressSpinner>
+    ) : (
+      components
+    );
+  },
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const MediumSpinnerWithRadio: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'medium',
+    stroke: '4',
+    active: true,
+  },
+  render: ({ ariaLabel, size, stroke, active }) => {
+    const components = (
+      <div>
+        <p style={{ font: 'var(--type-body-2-default-font)' }}>
+          This is a short description of the item and should be kept to two or
+          three lines as maximum.
+        </p>
+        <RadioButton
+          label={'Option 1'}
+          value={'1'}
+          name={'radio'}
+          description={'first option'}
+          disabled={active}
+        />
+        <RadioButton
+          label={'Option 2'}
+          value={'2'}
+          name={'radio'}
+          description={'second option'}
+          disabled={active}
+        />
+      </div>
+    );
+
+    return (
+      <Card variant={'secondary'}>
+        <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+        {active ? (
+          <ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}>
+            {components}
+          </ProgressSpinner>
+        ) : (
+          components
+        )}
+      </Card>
+    );
+  },
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const SmallSpinnerReplaceButton: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'small',
+    stroke: '2',
+    active: true,
+  },
+  render: ({ ariaLabel, size, stroke, active }) => (
+    <Card variant={'secondary'}>
+      <h2 style={{ font: 'var(--type-headline-2-strong-font)' }}>Title</h2>
+      <p style={{ font: 'var(--type-body-2-default-font)' }}>
+        This is a short description of the item and should be kept to two or
+        three lines as maximum.
+      </p>
+      <div>
+        <Button
+          size="medium"
+          style={{
+            width: '100%',
+            background: 'var(--color-brand-500) 0 0% no-repeat padding-box',
+          }}
+          aria-hidden={active}
+          aria-label={active ? 'loading' : 'Action'}
+          disabled={active}
+          children={
+            active
+              ? [
+                  <ProgressSpinner
+                    aria-label={ariaLabel}
+                    tabIndex={-1}
+                    size={size}
+                    stroke={stroke}
+                    key="spinner"
+                  />,
+                ]
+              : [
+                  'Action!',
+                  <Icon
+                    source={Search}
+                    size="24"
+                    className="storybook_icon"
+                    stroke="1"
+                    viewBox="0 0 24 24"
+                    aria-label="Search"
+                    key={'4'}
+                  />,
+                ]
+          }
+        />
+      </div>
+    </Card>
+  ),
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};
+
+export const SpinnerForBoxShadow: Story = {
+  args: {
+    ariaLabel: 'Updating',
+    size: 'small',
+    stroke: '2',
+  },
+  render: ({ ariaLabel, size, stroke }) => {
+    return (
+      <ProgressSpinner aria-label={ariaLabel} size={size} stroke={stroke}>
+        <div
+          style={{
+            display: 'flex',
+            justifyContent: 'space-between',
+            gap: '20px',
+          }}
+        >
+          <ImageSwatch
+            name="imageSwatchField"
+            id="imageSwatchExample1"
+            src="https://picsum.photos/20/20"
+            value="imageExample"
+            disabled={true}
+          />
+          <ImageSwatch
+            name="imageSwatchField"
+            id="imageSwatchExample2"
+            src="https://picsum.photos/20/20"
+            value="imageExample"
+            disabled={true}
+          />
+          <ImageSwatch
+            name="imageSwatchField"
+            id="imageSwatchExample3"
+            src="https://picsum.photos/20/20"
+            value="imageExample"
+            selected={true}
+            disabled={true}
+          />
+        </div>
+      </ProgressSpinner>
+    );
+  },
+  play: async () => {
+    const loaderIcon = document.querySelector(
+      'div[class*="dropin-progress-spinner"]'
+    ) as HTMLElement;
+    await expect(loaderIcon).toBeVisible();
+  },
+};

package/src/components/ProgressSpinner/ProgressSpinner.tsx

@@ -0,0 +1,86 @@
+/********************************************************************
+ *  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 { HTMLAttributes } from 'preact/compat';
+import { useText } from '@adobe-commerce/elsie/i18n';
+import { classes } from '@adobe-commerce/elsie/lib';
+
+import '@adobe-commerce/elsie/components/ProgressSpinner/ProgressSpinner.css';
+
+/**
+ * @param size this is the size of the spinner ranging in [12px, 24px, 36px, 48px]
+ * @param stroke this is the stroke of the spinner ranging in [1px, 2px, 3px, 4px]
+ */
+export interface ProgressSpinnerProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+  ariaLabel?: string;
+  size?: 'small' | 'medium' | 'big' | 'large';
+  stroke?: '1' | '2' | '3' | '4';
+}
+
+export const ProgressSpinner: FunctionComponent<ProgressSpinnerProps> = ({
+  ariaLabel,
+  size = 'small',
+  stroke = '4',
+  children,
+  className,
+  style,
+  ...props
+}) => {
+  const commonClasses = [
+    'dropin-progress-spinner',
+    `dropin-progress-spinner--shape-size-${size}`,
+    `dropin-progress-spinner--shape-stroke-${stroke}`,
+  ];
+
+  const translations = useText({
+    updating: 'Dropin.ProgressSpinner.updating.label',
+    updatingChildren: 'Dropin.ProgressSpinner.updatingChildren.label',
+  });
+
+  const handleAriaLabel = () => {
+    if (ariaLabel) return ariaLabel;
+    return children ? translations.updatingChildren : translations.updating;
+  };
+
+  return children ? (
+    // if we provide children to this component, it should act as a provider in order to add background with low opacity
+    <div
+      {...props}
+      className={classes(['dropin-progress-spinner-provider'])}
+      aria-live="polite"
+      role="status"
+    >
+      <div aria-hidden={true}>{children}</div>
+      <div
+        aria-label={handleAriaLabel()}
+        role="status"
+        className={classes(['dropin-progress-spinner-background', className])}
+        style={style}
+      />
+      <div
+        className={classes([
+          'dropin-progress-spinner-with-provider',
+          ...commonClasses,
+        ])}
+        aria-hidden={true}
+      />
+    </div>
+  ) : (
+    // if there are no children, it should be able to be standalone and have no background
+    <div
+      {...props}
+      className={classes([className, ...commonClasses])}
+      aria-live="polite"
+      role="status"
+      aria-label={handleAriaLabel()}
+    />
+  );
+};

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

package/src/components/RadioButton/RadioButton.css

@@ -0,0 +1,134 @@
+/********************************************************************
+ *  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-radio-button {
+  display: block;
+  position: relative;
+}
+.dropin-radio-button__input {
+  position: fixed;
+  opacity: 0;
+  pointer-events: none;
+  margin: 0;
+}
+
+.dropin-radio-button__label {
+  color: var(--color-neutral-800);
+  position: relative;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  cursor: pointer;
+  width: fit-content;
+}
+
+.dropin-radio-button__label:before {
+  content: ' ';
+  display: inline-block;
+  position: relative;
+  width: 16px;
+  height: 16px;
+  border-radius: var(--shape-border-radius-3);
+  background-color: var(--color-neutral-50);
+  border: var(--shape-border-width-1) solid var(--color-neutral-600);
+  margin-right: var(--spacing-small);
+  vertical-align: middle;
+}
+
+.dropin-radio-button__label:hover::before {
+  border: var(--shape-border-width-1) solid var(--color-neutral-700);
+}
+
+.dropin-radio-button__input:checked + .dropin-radio-button__label:after {
+  content: ' ';
+  display: block;
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  border-radius: var(--shape-border-radius-3);
+  margin-left: calc(var(--spacing-xxsmall) + var(--shape-border-width-1));
+  background: var(--color-brand-500);
+  accent-color: var(--color-brand-500);
+}
+
+.dropin-radio-button__input:focus-visible + .dropin-radio-button__label:before {
+  border: var(--shape-border-width-1) solid var(--color-neutral-800);
+  box-shadow: 0 0 0 var(--shape-icon-stroke-4) var(--color-neutral-400);
+}
+
+.dropin-radio-button__description {
+  clear: both;
+  color: var(--color-neutral-700);
+  margin-left: calc(var(--spacing-big) + var(--shape-border-width-3));
+  margin-top: var(--spacing-xxsmall);
+}
+
+.dropin-radio-button__description:empty {
+  display: none;
+}
+
+/* Sizes */
+.dropin-radio-button__label--medium {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+.dropin-radio-button__label--large {
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+}
+
+.dropin-radio-button__description--medium {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+}
+
+.dropin-radio-button__description--large {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+}
+
+/* Disabled */
+.dropin-radio-button__input--disabled,
+.dropin-radio-button__label--disabled,
+.dropin-radio-button__description--disabled {
+  color: var(--color-neutral-500);
+  cursor: default;
+}
+
+/* By adding "div." ↓ before the class, we add priority to the disabled state against the error state. */
+div.dropin-radio-button__label--disabled:before {
+  box-shadow: 0 0 0 var(--shape-border-width-1) var(--color-neutral-500);
+  background-color: var(--color-neutral-300);
+}
+
+/* Error */
+.dropin-radio-button__label--error:before {
+  box-shadow: 0 0 0 var(--shape-border-width-2) var(--color-alert-500);
+  background: var(--color-neutral-50) 0 0% no-repeat padding-box;
+}
+
+.dropin-radio-button__input--error:checked
+  + .dropin-radio-button__label--error:after {
+  background: var(--color-alert-500);
+}
+
+/* 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) { } */