@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Skeleton/Skeleton.tsx

@@ -0,0 +1,124 @@
+import { FunctionComponent } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/Skeleton/Skeleton.css';
+
+export interface SkeletonRowProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+  fullWidth?: boolean;
+  lines?: number;
+  size?: 'xsmall' | 'small' | 'medium' | 'large' | 'xlarge';
+  variant?: 'heading' | 'row' | 'empty';
+  multilineGap?: 'xsmall' | 'small' | 'medium' | 'big' | 'xbig';
+  children?: string;
+}
+
+const SINGLELINE = 1;
+
+export const SkeletonRow: FunctionComponent<SkeletonRowProps> = ({
+  className,
+  fullWidth = false,
+  lines = SINGLELINE,
+  size = 'small',
+  variant = 'row',
+  children = null,
+  multilineGap = 'medium',
+  ...props
+}) => {
+  const sharedClasses = [
+    [`dropin-skeleton-row__${variant}`, variant],
+    [`dropin-skeleton-row__${variant}-${size}`, variant && size],
+  ];
+
+  if (!children && variant === 'empty') {
+    return (
+      <div
+        className={classes([
+          'dropin-skeleton-row dropin-skeleton-row__empty',
+          className,
+        ])}
+      />
+    );
+  }
+
+  if (children) {
+    const svg = children.trim();
+    return (
+      <div
+        {...props}
+        class={classes([
+          'dropin-skeleton-row',
+          [`dropin-skeleton-row--full`, fullWidth],
+          className,
+        ])}
+        // eslint-disable-next-line react/no-danger
+        dangerouslySetInnerHTML={{ __html: svg }}
+      />
+    );
+  }
+
+  const isMultiline = lines > SINGLELINE;
+
+  if (isMultiline === false) {
+    return (
+      <div
+        {...props}
+        class={classes([
+          'dropin-skeleton-row',
+          [`dropin-skeleton-row--full`, fullWidth],
+          'dropin-skeleton--row__content',
+          ...sharedClasses,
+          className,
+        ])}
+      />
+    );
+  }
+
+  return (
+    <div
+      {...props}
+      style={{ '--multiline-gap-spacing': `var(--spacing-${multilineGap})` }}
+      class={classes([
+        'dropin-skeleton-row--multiline',
+        [`dropin-skeleton-row--full`, fullWidth],
+        className,
+      ])}
+    >
+      {Array.from({ length: lines }).map((_, index) => (
+        <div
+          key={index}
+          class={classes([
+            'dropin-skeleton-row',
+            [`dropin-skeleton-row--full`, fullWidth],
+            'dropin-skeleton--row__content',
+            ...sharedClasses,
+          ])}
+        />
+      ))}
+    </div>
+  );
+};
+
+export interface SkeletonProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'size'> {
+  rowGap?: 'xsmall' | 'small' | 'medium' | 'big' | 'xbig';
+}
+
+export const Skeleton: FunctionComponent<SkeletonProps> = ({
+  className,
+  children,
+  rowGap = 'medium',
+  ...props
+}) => {
+  return (
+    <div
+      style={{ '--row-gap-spacing': `var(--spacing-${rowGap})` }}
+      {...props}
+      className={classes(['dropin-skeleton', className])}
+      role="status"
+      aria-label="Loading..."
+    >
+      {children}
+    </div>
+  );
+};

package/src/components/Skeleton/index.ts

@@ -0,0 +1 @@
+export * from '@adobe/elsie/components/Skeleton/Skeleton';

package/src/components/Tag/Tag.css

@@ -0,0 +1,17 @@
+.dropin-tag-container {
+  position: relative;
+  border-radius: 20px;
+  user-select: none;
+  padding: 8px 16px;
+  background-color: var(--color-neutral-400);
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.dropin-tag-container__label {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-overline-letter-spacing);
+  color: var(--color-neutral-800);
+  line-height: 21px;
+}

package/src/components/Tag/Tag.stories.tsx

@@ -0,0 +1,94 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Tag, TagProps } from '@adobe/elsie/components';
+import { expect } from '@storybook/test';
+
+/**
+ * Use Tag components to display the message text inside.
+ */
+export default {
+  title: 'Components/Tag',
+  component: Tag,
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    label: 'Your Message',
+    children: '',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description:
+        'Allows to enter custom text (ignored if `children` is set).',
+    },
+    children: {
+      control: 'text',
+      description: 'Overrides the label if provided. Accepts HTML or JSX.',
+    },
+  },
+} as Meta<any>; // Using "any" as a workaround to accommodate the string type for the children prop
+
+const Template: StoryObj<TagProps> = {
+  render: (args) => (
+    <Tag {...args}>
+      {/* This workaround allows children to be edited as plain text in Storybook */}
+      {args.children && typeof args.children === 'string' ? (
+        <span dangerouslySetInnerHTML={{ __html: args.children }} />
+      ) : undefined}
+    </Tag>
+  ),
+};
+
+type Story = StoryObj<TagProps>;
+
+export const Default: Story = {
+  ...Template,
+  args: { label: 'Custom Message' },
+  play: async () => {
+    const tagElement = document.querySelector(
+      '.dropin-tag-container'
+    ) as HTMLElement;
+    const label = tagElement.querySelector('.dropin-tag-container__label');
+
+    await expect(tagElement).toBeVisible();
+    await expect(label).toHaveTextContent('Custom Message');
+  },
+};
+
+export const WithUppercase = {
+  ...Template,
+  args: { label: 'SHIPPING' },
+  play: async () => {
+    const tagElement = document.querySelector(
+      '.dropin-tag-container'
+    ) as HTMLElement;
+    const label = tagElement.querySelector('.dropin-tag-container__label');
+
+    await expect(tagElement).toBeVisible();
+    await expect(label).toHaveTextContent('SHIPPING');
+  },
+};
+
+export const WithChildren = {
+  ...Template,
+  args: {
+    label: '',
+    children: 'CHILDREN TEXT &nbsp;<button aria-label="Close tag">X</button>',
+  },
+  play: async () => {
+    const tagElement = document.querySelector(
+      '.dropin-tag-container'
+    ) as HTMLElement;
+    const actionButton = tagElement.querySelector('button');
+
+    await expect(tagElement).toBeVisible();
+    await expect(tagElement).toHaveTextContent('CHILDREN TEXT');
+    await expect(actionButton).toBeVisible();
+  },
+};

package/src/components/Tag/Tag.tsx

@@ -0,0 +1,29 @@
+import { FunctionComponent, VNode } from 'preact';
+import { classes } from '@adobe/elsie/lib';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/Tag/Tag.css';
+
+export interface TagProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'icon'> {
+  label?: string;
+  children?: VNode | VNode[];
+}
+
+export const Tag: FunctionComponent<TagProps> = ({
+  label,
+  className,
+  children,
+  ...props
+}) => {
+  if (!label && !children) return null;
+
+  return (
+    <div
+      {...props}
+      className={classes(['dropin-tag-container', className])}
+      data-testid="dropin-tag-container"
+    >
+      {children ?? <span className="dropin-tag-container__label">{label}</span>}
+    </div>
+  );
+};

package/src/components/Tag/index.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/Tag/Tag';
+export { Tag as default } from '@adobe/elsie/components/Tag/Tag';

package/src/components/TextArea/TextArea.css

@@ -0,0 +1,131 @@
+.dropin-textarea-container {
+  position: relative;
+}
+
+.dropin-textarea.dropin-textarea--error {
+  border: var(--shape-border-width-1) solid var(--color-alert-800);
+}
+
+.dropin-textarea.dropin-textarea--error .dropin-textarea__label--floating {
+  color: var(--color-alert-800);
+}
+
+.dropin-textarea__label--floating {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  color: var(--color-neutral-700);
+  position: absolute;
+  top: 18px;
+  left: 17px;
+  transition: all 0.2s;
+}
+
+.dropin-textarea {
+  margin: 0;
+  padding: 0;
+  border: none;
+  outline: none;
+  resize: none;
+  box-shadow: none;
+  font: inherit;
+  color: inherit;
+  background: none;
+  overflow: hidden;
+  width: 100%;
+}
+
+.dropin-textarea {
+  border: 1px solid var(--color-neutral-500);
+  box-sizing: border-box;
+}
+
+.dropin-textarea {
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  color: var(--color-neutral-800, #3d3d3d);
+  min-height: 200px;
+  padding: var(--spacing-big) var(--spacing-small);
+  border-radius: var(--shape-border-radius-1);
+  transition: border-color 0.2s;
+  scrollbar-color: var(--color-neutral-500) transparent;
+  scrollbar-width: thin;
+  overflow-y: hidden;
+}
+
+.dropin-textarea::-webkit-scrollbar {
+  width: 12px;
+  background-color: transparent;
+}
+
+.dropin-textarea:disabled {
+  border-top-left-radius: var(--shape-border-radius-1);
+  border-top-right-radius: var(--shape-border-radius-1);
+  border-color: var(--color-neutral-500);
+  background-color: var(--color-neutral-300);
+  color: var(--color-neutral-500);
+}
+
+.dropin-textarea:disabled::-webkit-input-placeholder {
+  /* WebKit browsers */
+  color: var(--color-neutral-500);
+}
+.dropin-textarea:disabled:-moz-placeholder {
+  /* Mozilla Firefox 4 to 18 */
+  color: var(--color-neutral-500);
+}
+.dropin-textarea:disabled::-moz-placeholder {
+  /* Mozilla Firefox 19+ */
+  color: var(--color-neutral-500);
+}
+.dropin-textarea:disabled:-ms-input-placeholder {
+  /* Internet Explorer 10+ */
+  color: var(--color-neutral-500);
+}
+
+.dropin-textarea::placeholder {
+  color: var(--color-neutral-700);
+  opacity: 0;
+  transition: color 0.2s, opacity 0.2s;
+}
+
+.dropin-textarea:focus {
+  border-color: var(--color-neutral-800, #3d3d3d);
+  border-radius: var(--shape-border-radius-1);
+}
+
+.dropin-textarea:focus::placeholder {
+  color: var(--color-neutral-700);
+  opacity: 0.8;
+}
+
+.dropin-textarea:not(:placeholder-shown) + .dropin-textarea__label--floating,
+.dropin-textarea:focus + .dropin-textarea__label--floating {
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+  color: var(--color-neutral-700, #666666);
+  transition: all 0.2s;
+  touch-action: manipulation;
+  top: 1px;
+  left: 1px;
+  width: 99%;
+  background-color: var(--color-neutral-50);
+  border-radius: var(--shape-border-radius-1);
+  height: 30px;
+  padding: 12px 16px 0;
+  box-sizing: border-box;
+}
+
+.dropin-textarea:focus + .dropin-textarea__label--floating {
+  color: var(--color-neutral-800);
+}
+
+.dropin-textarea:focus-visible {
+  outline: none;
+}
+
+.dropin-textarea__label--floating--error {
+  font: var(--type-details-caption-1-font);
+  letter-spacing: var(--type-details-caption-1-letter-spacing);
+  color: var(--color-alert-800);
+  padding-top: var(--spacing-xsmall);
+}

package/src/components/TextArea/TextArea.stories.tsx

@@ -0,0 +1,121 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { TextArea, TextAreaProps } from '@adobe/elsie/components/TextArea';
+import { expect, userEvent, within } from '@storybook/test';
+import { useState, useCallback } from 'preact/hooks';
+
+export default {
+  title: 'Components/TextArea',
+  component: TextArea,
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    label: 'Your Message',
+    name: 'message',
+    errorMessage: '',
+    value: '',
+  },
+  argTypes: {
+    label: {
+      control: 'text',
+      description: 'Input field label, indicating expected information.',
+    },
+    name: {
+      control: 'text',
+      description:
+        'Unique name attribute for the input, used in form submissions.',
+    },
+    errorMessage: {
+      control: 'text',
+      description: 'Error messages.',
+    },
+    value: {
+      control: 'text',
+      description: 'Field textarea value.',
+    },
+    disabled: {
+      description: 'disable textarea field',
+      control: 'boolean',
+    },
+    onChange: {
+      action: 'clicked',
+      defaultValue: () => {
+        console.info('onChange');
+      },
+      description:
+        'Function called when the value of the input changes. It is used to capture and handle the input data.',
+    },
+    onBlur: {
+      action: 'clicked',
+      defaultValue: () => {
+        console.info('onBlur');
+      },
+      description:
+        'Function called when the input loses focus. This can be used to trigger validation or other effects when the user moves away from the input field.',
+    },
+  },
+} as Meta<TextAreaProps>;
+
+const Template: StoryObj<TextAreaProps> = {
+  render: (args) => {
+    const [value, setValue] = useState(args.value);
+
+    const setTextAreaValue = useCallback((event) => {
+      setValue(event.target.value);
+    }, []);
+
+    return <TextArea {...args} value={value} onChange={setTextAreaValue} />;
+  },
+};
+
+export const DefaultWithValue = {
+  ...Template,
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    label: 'Your Message',
+    name: 'message',
+    value: 'Initial',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const inputField = document.querySelector('textarea') as HTMLElement;
+    await userEvent.type(inputField, ' Storybook Test Text! input max length');
+    await expect(
+      await canvas.findByDisplayValue(
+        'Initial Storybook Test Text! input max length'
+      )
+    ).toBeTruthy();
+    await userEvent.clear(inputField);
+    await expect(await canvas.findByDisplayValue('')).toBeTruthy();
+  },
+};
+
+export const WithError = {
+  ...Template,
+  parameters: {
+    layout: 'centered',
+    a11y: {
+      config: {
+        rules: [{ id: 'color-contrast', enabled: false }],
+      },
+    },
+  },
+  args: {
+    label: 'Your Message',
+    name: 'message',
+    errorMessage: 'Message cannot be empty',
+  },
+};

package/src/components/TextArea/TextArea.tsx

@@ -0,0 +1,80 @@
+import { FunctionComponent } from 'preact';
+import { classes } from '@adobe/elsie/lib';
+import { HTMLAttributes } from 'preact/compat';
+import '@adobe/elsie/components/TextArea/TextArea.css';
+import { useRef, useEffect, useId } from 'preact/hooks';
+
+export interface TextAreaProps extends HTMLAttributes<HTMLTextAreaElement> {
+  id?: string;
+  name?: string;
+  disabled?: boolean;
+  errorMessage?: string;
+}
+
+export const TextArea: FunctionComponent<TextAreaProps> = ({
+  disabled,
+  name = '',
+  errorMessage,
+  value,
+  label,
+  className,
+  onChange,
+  onBlur,
+  ...props
+}) => {
+  const textareaRef = useRef<HTMLTextAreaElement | null>(null);
+  const id = useId();
+  const error = !!errorMessage?.length;
+
+  useEffect(() => {
+    const textArea = textareaRef.current;
+    if (!textArea) return;
+
+    textArea.style.height = 'auto';
+    textArea.style.height = `${textArea.scrollHeight}px`;
+  }, [value]);
+
+  return (
+    <div
+      className={classes(['dropin-textarea-container', className])}
+      data-testid="dropin-textarea-container"
+    >
+      <textarea
+        ref={textareaRef}
+        data-testid="dropin-textarea-field"
+        className={classes([
+          'dropin-textarea',
+          [`dropin-textarea--error`, error],
+          ['dropin-textarea--disabled', !!disabled],
+        ])}
+        id={id}
+        placeholder={label}
+        name={name}
+        value={value}
+        disabled={disabled}
+        onBlur={onBlur}
+        onChange={onChange}
+        {...props}
+      />
+      <label
+        htmlFor={id}
+        className={classes([
+          `dropin-textarea__label--floating`,
+          [`dropin-textarea__label--floating--error`, error],
+        ])}
+      >
+        {label}
+      </label>
+      {error ? (
+        <div
+          className={classes([
+            `dropin-textarea__label--floating--text`,
+            [`dropin-textarea__label--floating--error`, error],
+          ])}
+        >
+          {errorMessage}
+        </div>
+      ) : null}
+    </div>
+  );
+};

package/src/components/TextArea/index.ts

@@ -0,0 +1,2 @@
+export * from '@adobe/elsie/components/TextArea/TextArea';
+export { TextArea as default } from '@adobe/elsie/components/TextArea/TextArea';