@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/RadioButton/RadioButton.css

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

package/src/components/RadioButton/RadioButton.stories.tsx

@@ -0,0 +1,117 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  RadioButton,
+  RadioButtonProps,
+} from '@adobe/elsie/components/RadioButton';
+import { expect, userEvent, within } from '@storybook/test';
+
+/**
+ * Use Radio Buttons to let users select one option from a set of mutually exclusive choices.
+ */
+const meta: Meta<RadioButtonProps> = {
+  title: 'Components/RadioButton',
+  component: RadioButton,
+  argTypes: {
+    label: {
+      description: 'Label to be shown beside of the radio button',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    name: {
+      description: 'Field name (used for mapping the value in a form)',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: {
+        required: true,
+        name: 'string',
+      },
+    },
+    description: {
+      description: 'Additional secondary description if needed',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    disabled: {
+      description: 'Whether or not the radio button is disabled',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    error: {
+      description: 'Whether or not the radio button is in error state',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    size: {
+      description:
+        'Available sizes for the checkbox label and description texts',
+      type: 'string',
+      options: ['medium', 'large'],
+      defaultValue: {
+        summary: 'medium',
+      },
+      control: {
+        type: 'radio',
+        default: 'medium',
+      },
+    },
+    checked: {
+      description: 'Whether or not the radio button is checked',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+    busy: {
+      description: 'Whether or not the radio button is busy',
+      type: {
+        required: false,
+        name: 'boolean',
+      },
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<RadioButtonProps>;
+
+/**
+ * ```ts
+ * import { RadioButton } from '@adobe/elsie/components/RadioButton';
+ * ```
+ */
+
+export const RadioButtonStory: Story = {
+  name: 'Radio button',
+  args: {
+    name: 'standard',
+    label: 'Standard',
+    value: 'standard',
+    description: 'Description',
+    size: 'medium',
+    disabled: false,
+    error: false,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const radioButton = await canvas.findByRole('radio');
+    const radioButtonText = await canvas.findByText('Standard');
+    await expect(radioButton).not.toBeChecked();
+    await userEvent.click(radioButtonText);
+    await expect(radioButton).toBeChecked();
+  },
+};

package/src/components/RadioButton/RadioButton.tsx

@@ -0,0 +1,77 @@
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import '@adobe/elsie/components/RadioButton/RadioButton.css';
+
+export interface RadioButtonProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label'> {
+  label: string | VNode<HTMLAttributes<HTMLElement>>;
+  name: string;
+  value: string;
+  size?: 'medium' | 'large';
+  checked?: boolean;
+  disabled?: boolean;
+  error?: boolean;
+  description?: string;
+  busy?: boolean;
+}
+
+export const RadioButton: FunctionComponent<RadioButtonProps> = ({
+  name,
+  label,
+  value,
+  size = 'medium',
+  checked = false,
+  disabled = false,
+  error = false,
+  description = '',
+  busy = false,
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <label
+      className={classes([
+        className,
+        'dropin-radio-button',
+        ['dropin-radio-button--error', error],
+        ['dropin-radio-button--disabled', disabled],
+      ])}
+    >
+      <input
+        name={name}
+        value={value}
+        checked={checked}
+        disabled={disabled}
+        type="radio"
+        className={classes([
+          'dropin-radio-button__input',
+          ['dropin-radio-button__input--error', error],
+          ['dropin-radio-button__input--disabled', disabled],
+        ])}
+        aria-busy={busy}
+        {...props}
+      />
+      <span
+        className={classes([
+          'dropin-radio-button__label',
+          `dropin-radio-button__label--${size}`,
+          ['dropin-radio-button__label--error', error],
+          ['dropin-radio-button__label--disabled', disabled],
+        ])}
+      >
+        {label}
+      </span>
+      <span
+        className={classes([
+          'dropin-radio-button__description',
+          `dropin-radio-button__description--${size}`,
+          ['dropin-radio-button__description--disabled', disabled],
+        ])}
+      >
+        {description}
+      </span>
+    </label>
+  );
+};

package/src/components/RadioButton/index.ts

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

package/src/components/Skeleton/Skeleton.css

@@ -0,0 +1,136 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-skeleton {
+  --row-gap-spacing: var(--spacing-medium);
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--row-gap-spacing);
+}
+
+.dropin-skeleton .dropin-skeleton--row__content {
+  background: var(--color-neutral-300)
+    linear-gradient(
+      to right,
+      var(--color-neutral-300) 0%,
+      var(--color-neutral-100) 20%,
+      var(--color-neutral-300) 40%,
+      var(--color-neutral-300) 100%
+    )
+    no-repeat;
+  animation: skeletonShimmer infinite 1.2s linear;
+  border-radius: var(--shape-border-radius-2);
+}
+
+/* Empty */
+.dropin-skeleton__empty {
+  background: none;
+}
+
+.dropin-skeleton-row--multiline {
+  --multiline-gap-spacing: var(--spacing-medium);
+  display: grid;
+  grid-auto-rows: max-content;
+  gap: var(--multiline-gap-spacing);
+}
+
+.dropin-skeleton-row--full {
+  grid-column: 1 / -1;
+}
+
+/* SVG */
+.dropin-skeleton-row svg {
+  fill: var(--color-neutral-400);
+  fill-opacity: 0.5;
+  animation-duration: 1s;
+  animation-fill-mode: forwards;
+  animation-iteration-count: infinite;
+  animation-name: placeholderShimmer;
+  animation-timing-function: linear;
+}
+
+/* Row variants */
+
+.dropin-skeleton-row__row-xsmall {
+  height: 32px;
+}
+
+.dropin-skeleton-row__row-small {
+  height: 40px;
+}
+
+.dropin-skeleton-row__row-medium {
+  height: 48px;
+}
+
+.dropin-skeleton-row__row-large {
+  height: 56px;
+}
+
+.dropin-skeleton-row__row-xlarge {
+  height: 72px;
+}
+
+/* Heading variants */
+
+.dropin-skeleton-row__heading-xsmall {
+  height: 20px;
+}
+
+.dropin-skeleton-row__heading-small {
+  height: 24px;
+}
+
+.dropin-skeleton-row__heading-medium {
+  height: 32px;
+}
+
+.dropin-skeleton-row__heading-large {
+  height: 40px;
+}
+
+.dropin-skeleton-row__heading-xlarge {
+  height: 48px;
+}
+
+@keyframes skeletonShimmer {
+  0% {
+    background-position: -600px 0;
+  }
+
+  100% {
+    background-position: 600px 0;
+  }
+}
+
+@keyframes placeholderShimmer {
+  0% {
+    fill-opacity: 0.5;
+  }
+
+  50% {
+    fill-opacity: 1;
+  }
+
+  100% {
+    fill-opacity: 0.5;
+  }
+}
+
+/* Extra small devices (phones, 600px and down) */
+@media only screen and (max-width: 600px) {
+  .dropin-skeleton {
+    grid-template-columns: 1fr;
+  }
+}
+
+/* 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/Skeleton/Skeleton.stories.tsx

@@ -0,0 +1,256 @@
+import type { Meta, StoryObj } from '@storybook/preact';
+import {
+  Skeleton,
+  SkeletonProps,
+  SkeletonRow,
+  SkeletonRowProps,
+} from './Skeleton';
+import { expect } from '@storybook/test';
+
+/**
+ * Use Skeletons to display content placeholders while content is loading.
+ */
+const meta: Meta<SkeletonRowProps & SkeletonProps> = {
+  title: 'Components/Skeleton',
+  component: Skeleton,
+  argTypes: {
+    size: {
+      type: 'string',
+      options: ['xsmall', 'small', 'medium', 'large', 'xlarge'],
+      control: {
+        type: 'radio',
+      },
+      defaultValue: {
+        summary: 'small',
+      },
+      description: 'Size of the skeleton',
+    },
+    variant: {
+      type: 'string',
+      options: ['row', 'heading', 'empty'],
+      control: { type: 'radio' },
+      defaultValue: {
+        summary: 'row',
+      },
+      description: 'Variant of the skeleton',
+    },
+    fullWidth: {
+      type: 'boolean',
+      defaultValue: {
+        summary: 'false',
+      },
+      description: 'Stretch the skeleton to full width',
+    },
+    lines: {
+      type: 'number',
+      defaultValue: {
+        summary: '1',
+      },
+      description: 'No. of times to repeat the row',
+    },
+    multilineGap: {
+      type: 'string',
+      options: ['xsmall', 'small', 'medium', 'big', 'xbig'],
+      control: { type: 'radio' },
+      defaultValue: {
+        summary: 'medium',
+      },
+      description: 'Vertical gap between multiline items',
+    },
+    rowGap: {
+      type: 'string',
+      options: ['xsmall', 'small', 'medium', 'big', 'xbig'],
+      control: { type: 'radio' },
+      defaultValue: {
+        summary: 'medium',
+      },
+      description: 'Horizontal and vertical gap between SkeletonRows',
+    },
+  },
+  decorators: [(Story) => <div style={{ width: '400px' }}>{Story()}</div>],
+};
+
+export default meta;
+
+type Story = StoryObj<SkeletonRowProps & SkeletonProps>;
+
+/**
+ * Import the component to use in your components:
+ *
+ * ```ts
+ * import { Skeleton, SkeletonRow } from '@adobe/elsie/components';
+ * ```
+ */
+
+/**
+ * Pass in an SVG element as a child to render a shimmering skeleton version of it.
+ *
+ * ```tsx
+ * <Skeleton>
+ *    <SkeletonRow>
+ *     `<svg width="450" height="400">
+ *        <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+ *        <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+ *        <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+ *     </svg>`
+ *    </SkeletonRow>
+ * </Skeleton>
+ * ```
+ */
+
+export const SVG: Story = {
+  args: {
+    children: `<svg width="450" height="400">
+        <rect x="43" y="304" rx="4" ry="4" width="271" height="9" />
+        <rect x="44" y="323" rx="3" ry="3" width="119" height="6" />
+        <rect x="42" y="77" rx="10" ry="10" width="388" height="217" />
+      </svg>`,
+  },
+  render: (args) => {
+    return (
+      <Skeleton>
+        <SkeletonRow>{args.children}</SkeletonRow>
+      </Skeleton>
+    );
+  },
+  play: async () => {
+    const skeleton = document.querySelector('.dropin-skeleton') as HTMLElement;
+
+    const skeletonRow = document.querySelector(
+      '.dropin-skeleton-row'
+    ) as HTMLElement;
+
+    await expect(skeleton).toBeVisible();
+    await expect(skeletonRow).toBeVisible();
+  },
+};
+
+/**
+ * Use a Row HTML element
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="row" size="medium" />
+ *  <SkeletonRow variant="row" size="medium" />
+ *  <SkeletonRow variant="row" size="medium" />
+ * </Skeleton>
+ * ```
+ */
+
+export const Rows: Story = {
+  args: {
+    size: 'medium',
+    variant: 'row',
+    multilineGap: 'medium',
+    rowGap: 'medium',
+  },
+  render: (args) => {
+    return (
+      <Skeleton rowGap={args.rowGap}>
+        <SkeletonRow
+          variant={args.variant}
+          size={args.size}
+          fullWidth={args.fullWidth}
+          lines={args.lines}
+          multilineGap={args.multilineGap}
+        />
+        <SkeletonRow
+          variant={args.variant}
+          size={args.size}
+          fullWidth={args.fullWidth}
+          lines={args.lines}
+          multilineGap={args.multilineGap}
+        />
+        <SkeletonRow
+          variant={args.variant}
+          size={args.size}
+          fullWidth={args.fullWidth}
+          lines={args.lines}
+          multilineGap={args.multilineGap}
+        />
+      </Skeleton>
+    );
+  },
+};
+
+/**
+ * Use a Heading HTML element
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="heading" size="medium" />
+ * </Skeleton>
+ * ```
+ */
+
+export const Headings: Story = {
+  args: {
+    size: 'medium',
+    variant: 'heading',
+    multilineGap: 'medium',
+    rowGap: 'medium',
+  },
+  render: (args) => {
+    return (
+      <Skeleton rowGap={args.rowGap}>
+        <SkeletonRow
+          variant={args.variant}
+          size={args.size}
+          fullWidth={args.fullWidth}
+          lines={args.lines}
+          multilineGap={args.multilineGap}
+        />
+      </Skeleton>
+    );
+  },
+};
+
+/**
+ * HTML Example
+ *
+ * ```tsx
+ * <Skeleton>
+ *  <SkeletonRow variant="heading" size="medium" />
+ *  <SkeletonRow variant="empty" size="medium" />
+ *  <SkeletonRow size="medium" fullWidth={true} />
+ *  <SkeletonRow size="medium" fullWidth={true} lines={3} />
+ * </Skeleton>
+ * ```
+ */
+
+export const HTMLExample: Story = {
+  args: {
+    size: 'medium',
+    multilineGap: 'medium',
+    rowGap: 'medium',
+  },
+  render: (args) => {
+    return (
+      <Skeleton rowGap={args.rowGap}>
+        <SkeletonRow
+          variant={'heading'}
+          size={args.size}
+          multilineGap={args.multilineGap}
+        />
+        <SkeletonRow
+          variant={'empty'}
+          size={args.size}
+          multilineGap={args.multilineGap}
+        />
+        <SkeletonRow
+          size={args.size}
+          fullWidth={true}
+          multilineGap={args.multilineGap}
+        />
+        <SkeletonRow
+          size={args.size}
+          fullWidth={true}
+          lines={3}
+          multilineGap={args.multilineGap}
+        />
+        <SkeletonRow size={args.size} multilineGap={args.multilineGap} />
+        <SkeletonRow size={args.size} multilineGap={args.multilineGap} />
+      </Skeleton>
+    );
+  },
+};