@adobe-commerce/elsie 1.0.0-alpha1

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,246 @@
+/* https://cssguidelin.es/#bem-like-naming */
+
+.dropin-checkbox {
+  align-items: flex-start;
+  display: grid;
+  grid-template-columns: var(--spacing-small) auto;
+  grid-gap: var(--spacing-xxsmall) 0;
+}
+
+.dropin-checkbox__checkbox {
+  display: none;
+  margin: 0;
+}
+
+.dropin-checkbox__checkbox-icon {
+  display: flex;
+  align-items: center;
+}
+
+.dropin-checkbox__box {
+  margin: 0;
+  width: 14px;
+  height: 14px;
+  border-radius: var(--shape-border-radius-1);
+  border: var(--shape-border-width-1) solid var(--color-neutral-600);
+  background: var(--color-neutral-50) 0 0 no-repeat padding-box;
+  cursor: pointer;
+}
+
+.dropin-checkbox__checkmark {
+  opacity: 0;
+  border-radius: var(--shape-border-radius-1);
+}
+
+/* checked */
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box {
+  border: none;
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box
+  .dropin-checkbox__checkmark {
+  opacity: 1;
+  color: var(--color-neutral-50);
+  background: var(--color-neutral-700) 0 0 no-repeat padding-box;
+  top: -1px;
+  position: relative;
+}
+
+/* hover */
+
+.dropin-checkbox__box:hover {
+  border: var(--shape-border-width-1) solid var(--color-neutral-800);
+}
+
+/* checked + hover */
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box:hover {
+  border: none;
+  background: var(--color-neutral-800) 0 0 no-repeat padding-box;
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box
+  .dropin-checkbox__checkmark:hover {
+  background: var(--color-neutral-800) 0 0 no-repeat padding-box;
+}
+
+/* focus */
+
+.dropin-checkbox__box:focus-visible {
+  border: var(--shape-border-width-1) solid var(--color-neutral-800);
+  outline: var(--shape-border-width-3) solid var(--color-neutral-400);
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box:focus-visible {
+  width: var(--spacing-small);
+  height: var(--spacing-small);
+  border: none;
+  background: var(--color-neutral-800) 0 0 no-repeat padding-box;
+  outline: var(--shape-border-width-3) solid var(--color-neutral-400);
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box:focus-visible
+  .dropin-checkbox__checkmark {
+  top: 0;
+}
+
+/* label and description */
+
+.dropin-checkbox__label,
+.dropin-checkbox__label--medium {
+  padding-left: var(--spacing-xsmall);
+  color: var(--color-neutral-800);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  text-align: left;
+}
+
+.dropin-checkbox__label--large {
+  padding-left: var(--spacing-small);
+  color: var(--color-neutral-800);
+  font: var(--type-body-1-default-font);
+  letter-spacing: var(--type-body-1-default-letter-spacing);
+  text-align: left;
+}
+
+.dropin-checkbox__label--medium a {
+  font: var(--type-body-2-strong-font);
+  letter-spacing: var(--type-body-2-strong-letter-spacing);
+}
+
+.dropin-checkbox__label--large a {
+  font: var(--type-body-1-strong-font);
+  letter-spacing: var(--type-body-1-strong-letter-spacing);
+}
+
+.dropin-checkbox__description {
+  display: block;
+  clear: both;
+  flex-basis: 100%;
+  width: 100%;
+}
+
+.dropin-checkbox__description,
+.dropin-checkbox__description--medium {
+  padding-left: var(--spacing-xsmall);
+  color: var(--color-neutral-700);
+  font: var(--type-details-caption-2-font);
+  letter-spacing: var(--type-details-caption-2-letter-spacing);
+  text-align: left;
+}
+
+.dropin-checkbox__description--large {
+  padding-left: var(--spacing-small);
+  color: var(--color-neutral-700);
+  font: var(--type-body-2-default-font);
+  letter-spacing: var(--type-body-2-default-letter-spacing);
+  text-align: left;
+}
+
+.dropin-checkbox,
+.dropin-checkbox--checkbox:not(:disabled) {
+  cursor: pointer;
+}
+
+/* error */
+
+.dropin-checkbox__box--error {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+  background: var(--color-neutral-50) 0 0 no-repeat padding-box;
+}
+
+.dropin-checkbox__box--error:hover {
+  border: var(--shape-border-width-2) solid var(--color-alert-500);
+  background: var(--color-neutral-50) 0 0 no-repeat padding-box;
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--error,
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--error:hover {
+  border: none;
+  background: var(--color-alert-500) 0 0 no-repeat padding-box;
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--error
+  > .dropin-checkbox__checkmark,
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--error
+  > .dropin-checkbox__checkmark:hover {
+  background: var(--color-alert-500) 0 0 no-repeat padding-box;
+}
+
+.dropin-checkbox__checkmark--error {
+  opacity: 1;
+  color: var(--color-neutral-50);
+  border: var(--color-alert-500);
+  background: var(--color-alert-500) 0 0 no-repeat padding-box;
+}
+
+/* disabled */
+
+.dropin-checkbox--disabled,
+.dropin-checkbox__label--disabled,
+.dropin-checkbox__description--disabled {
+  color: var(--color-neutral-500);
+  cursor: default;
+  pointer-events: none;
+}
+
+.dropin-checkbox__box--disabled,
+.dropin-checkbox__box--disabled:hover {
+  background: var(--color-neutral-300) 0 0 no-repeat padding-box;
+  border: var(--shape-border-width-1) solid var(--color-neutral-500);
+  cursor: default;
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--disabled,
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--disabled:hover {
+  border: none;
+  background: var(--color-neutral-300) 0 0 no-repeat padding-box;
+}
+
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--disabled
+  > .dropin-checkbox__checkmark,
+.dropin-checkbox__checkbox:checked
+  + .dropin-checkbox__checkbox-icon
+  .dropin-checkbox__box--disabled
+  > .dropin-checkbox__checkmark:hover {
+  background: var(--color-neutral-300) 0 0 no-repeat padding-box;
+}
+
+/* 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/Checkbox/Checkbox.stories.tsx

@@ -0,0 +1,281 @@
+// https://storybook.js.org/docs/7.0/preact/writing-stories/introduction
+import type { Meta, StoryObj } from '@storybook/preact';
+import { Checkbox, CheckboxProps } from '@adobe/elsie/components/Checkbox';
+import { expect, within, userEvent } from '@storybook/test';
+
+/**
+ * Use Checkboxes to let users pick multiple options from a list or mark a single item as selected.
+ */
+const meta: Meta<CheckboxProps> = {
+  title: 'Components/Checkbox',
+  component: Checkbox,
+  argTypes: {
+    name: {
+      description: 'Field name (used for mapping the value in a form)',
+      type: {
+        required: false,
+        name: 'string',
+      },
+    },
+    value: {
+      description: 'Field value',
+      type: 'string',
+    },
+    label: {
+      description: 'Label for the checkbox',
+      control: {
+        type: 'text',
+      },
+      table: {
+        type: {
+          summary: 'string | VNode',
+        },
+      },
+    },
+    description: {
+      description:
+        'Additional secondary description if needed. This can be a string or a Nodes',
+      type: 'string',
+      summary: 'Optional description text goes here',
+    },
+    size: {
+      description:
+        'Available sizes for the checkbox label and description texts',
+      type: 'string',
+      options: ['medium', 'large'],
+      default: 'medium',
+      control: {
+        type: 'radio',
+        default: 'medium',
+      },
+    },
+    disabled: {
+      description: 'Whether or not the checkbox is disabled',
+      type: 'boolean',
+      default: false,
+    },
+    checked: {
+      description: 'Whether or not the checkbox is active',
+      type: 'boolean',
+      default: false,
+    },
+    error: {
+      description: 'Whether or not the checkbox is on error status',
+      type: 'boolean',
+      default: false,
+    },
+  },
+};
+
+export default meta;
+
+type Story = StoryObj<CheckboxProps>;
+
+/**
+ * Import the Checkbox component
+ *
+ * ```ts
+ * import { Checkbox } from '@adobe/elsie/components/Checkbox';
+ * ```
+ */
+
+export const Primary: Story = {
+  name: 'Enabled and not Active',
+  args: {
+    name: 'checkboxField',
+    label: 'Option',
+    description: 'Optional description text goes here',
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    await expect(checkboxField).not.toBeChecked();
+    await userEvent.click(canvas.getByText('Option'));
+    await expect(checkboxField).toBeChecked();
+    await userEvent.click(checkboxField);
+    await expect(checkboxField).not.toBeChecked();
+  },
+};
+
+export const CheckboxEnabledAndActive: Story = {
+  name: 'Enabled and Active',
+  args: {
+    name: 'checkboxField',
+    label: 'Option',
+    description: 'Optional description text goes here',
+    checked: true,
+  },
+  play: async ({ canvasElement }) => {
+    const canvas = within(canvasElement);
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    await expect(checkboxField).toBeChecked();
+    await userEvent.click(canvas.getByText('Option'));
+    await expect(checkboxField).not.toBeChecked();
+    await userEvent.click(checkboxField);
+    await expect(checkboxField).toBeChecked();
+  },
+};
+
+export const CheckboxEnabledAndNotActiveWithError: Story = {
+  name: 'Enabled and not Active with Error',
+  args: {
+    name: 'checkboxField',
+    label: 'Option',
+    description: 'Optional description text goes here',
+    error: true,
+  },
+};
+
+export const CheckboxEnabledAndActiveWithError: Story = {
+  name: 'Enabled and Active with Error',
+  args: {
+    name: 'checkboxField',
+    label: 'Option',
+    description: 'Optional description text goes here',
+    checked: true,
+    error: true,
+  },
+};
+
+export const CheckboxDisabled: Story = {
+  name: 'Disabled',
+  args: {
+    name: 'checkboxField',
+    label: 'Option',
+    description: 'Optional description text goes here',
+    disabled: true,
+  },
+  play: async () => {
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    await expect(checkboxField).not.toBeChecked();
+    await expect(checkboxField).toBeDisabled();
+  },
+};
+
+export const CheckboxDisabledWithALink: Story = {
+  name: 'Disabled with a link',
+  args: {
+    name: 'checkboxField',
+    label: (
+      <span>
+        Option with{' '}
+        <a href="https://www.adobe.com" target="_blank" rel="noreferrer">
+          a link
+        </a>
+      </span>
+    ),
+    description: 'Optional description text goes here',
+    disabled: true,
+  },
+  play: async () => {
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    await expect(checkboxField).not.toBeChecked();
+    await expect(checkboxField).toBeDisabled();
+  },
+};
+
+export const CheckboxDisabledAndActive: Story = {
+  name: 'Disabled and Active',
+  args: {
+    name: 'checkboxField',
+    label: 'Option',
+    description: 'Optional description text goes here',
+    disabled: true,
+    checked: true,
+  },
+  play: async () => {
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    await expect(checkboxField).toBeChecked();
+    await expect(checkboxField).toBeDisabled();
+  },
+};
+
+export const CheckboxWithNodeLabelAndDescription: Story = {
+  name: 'Active with label and description as Nodes',
+  args: {
+    name: 'checkboxField',
+    label: <span>Option</span>,
+    description: <div>Optional description text goes here</div>,
+    checked: true,
+  },
+  play: async () => {
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    await expect(checkboxField).toBeChecked();
+  },
+};
+
+export const CheckboxWithALink: Story = {
+  name: 'With a link in the label',
+  args: {
+    name: 'checkboxField',
+    label: (
+      <span>
+        Option with{' '}
+        <a href="https://www.adobe.com" target="_blank" rel="noreferrer">
+          a link
+        </a>{' '}
+        and a{' '}
+        <a href="https://www.adobe.com" target="_blank" rel="noreferrer">
+          second link
+        </a>
+      </span>
+    ),
+    description: 'Optional description text goes here',
+    checked: false,
+  },
+  play: async () => {
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    const checkboxLink = document.querySelector(
+      '.dropin-checkbox a'
+    ) as HTMLElement;
+    await expect(checkboxField).not.toBeChecked();
+    await expect(checkboxLink).toBeDefined();
+  },
+};
+
+export const CheckboxWithLongLabel: Story = {
+  name: 'With a long label',
+  args: {
+    name: 'checkboxField',
+    label: (
+      <span style={{ width: '200px', display: 'inline-block' }}>
+        Option with{' '}
+        <a href="https://www.adobe.com" target="_blank" rel="noreferrer">
+          a link
+        </a>{' '}
+        and a{' '}
+        <a href="https://www.adobe.com" target="_blank" rel="noreferrer">
+          second link
+        </a>{' '}
+        plus a long text to test the wrapping and the checkbox alignment to the
+        top of the label
+      </span>
+    ),
+    description: 'Optional description text goes here',
+    checked: false,
+  },
+  play: async () => {
+    const checkboxField = document.querySelector(
+      'input[name="checkboxField"]'
+    ) as HTMLElement;
+    const checkboxLink = document.querySelector(
+      '.dropin-checkbox a'
+    ) as HTMLElement;
+    await expect(checkboxField).not.toBeChecked();
+    await expect(checkboxLink).toBeDefined();
+  },
+};

package/src/components/Checkbox/Checkbox.tsx

@@ -0,0 +1,129 @@
+import { FunctionComponent, VNode } from 'preact';
+import { ChangeEvent, HTMLAttributes, useRef, useState } from 'preact/compat';
+import { classes } from '@adobe/elsie/lib';
+import { Check } from '@adobe/elsie/icons';
+import { Icon } from '@adobe/elsie/components/Icon';
+import '@adobe/elsie/components/Checkbox/Checkbox.css';
+import { useEffect } from 'preact/hooks';
+
+export interface CheckboxProps
+  extends Omit<HTMLAttributes<HTMLInputElement>, 'size' | 'label'> {
+  name: string;
+  size?: 'medium' | 'large';
+  disabled?: boolean;
+  error?: boolean;
+  label?: string | VNode | VNode[];
+  description?: string | VNode | VNode[];
+}
+
+export const Checkbox: FunctionComponent<CheckboxProps> = ({
+  name,
+  value,
+  size = 'medium',
+  disabled = false,
+  error = false,
+  label = '',
+  description = '',
+  className,
+  checked,
+  ...props
+}) => {
+  const [isChecked, setIsChecked] = useState(
+    checked === undefined ? false : checked
+  );
+  const ref = useRef<HTMLInputElement>(null);
+
+  const handleCheckboxChange = (e: ChangeEvent<HTMLInputElement>) => {
+    props.onChange?.(e);
+    setIsChecked(e.currentTarget.checked);
+  };
+
+  const handleOnKeyDown = (e: KeyboardEvent) => {
+    if (e.key === ' ') {
+      e.preventDefault();
+      ref?.current?.click();
+    }
+  };
+
+  useEffect(() => {
+    if (typeof checked === 'boolean') {
+      setIsChecked(checked);
+    }
+  }, [checked]);
+
+  return (
+    <label
+      className={classes([
+        'dropin-checkbox',
+        ['dropin-checkbox--disabled', disabled],
+      ])}
+    >
+      <input
+        ref={ref}
+        name={name}
+        value={value}
+        type="checkbox"
+        disabled={disabled}
+        className={classes([
+          'dropin-checkbox__checkbox',
+          ['dropin-checkbox__checkbox--error', error],
+          className,
+        ])}
+        {...props}
+        onChange={handleCheckboxChange}
+        checked={isChecked}
+      />
+
+      <div className="dropin-checkbox__checkbox-icon">
+        {/*Zero-width space character, used to align checkbox properly*/}
+        {'\u200B'}
+        <span
+          aria-checked={isChecked ? 'true' : 'false'}
+          aria-labelledby={`${name}-label`}
+          aria-describedby={description ? `${name}-description` : undefined}
+          className={classes([
+            'dropin-checkbox__box',
+            ['dropin-checkbox__box--error', error],
+            ['dropin-checkbox__box--disabled', disabled],
+          ])}
+          role="checkbox"
+          tabIndex={disabled ? -1 : 0}
+          onKeyDown={handleOnKeyDown}
+        >
+          <Icon
+            className={classes(['dropin-checkbox__checkmark'])}
+            source={Check}
+            size="16"
+            stroke="3"
+          />
+        </span>
+      </div>
+
+      <div
+        id={`${name}-label`}
+        className={classes([
+          'dropin-checkbox__label',
+          `dropin-checkbox__label--${size}`,
+          ['dropin-checkbox__label--disabled', disabled],
+        ])}
+      >
+        {label}
+      </div>
+
+      <div />
+      {description && (
+        <div
+          id={`${name}-description`}
+          role={'note'}
+          className={classes([
+            'dropin-checkbox__description',
+            `dropin-checkbox__description--${size}`,
+            ['dropin-checkbox__description--disabled', disabled],
+          ])}
+        >
+          {description}
+        </div>
+      )}
+    </label>
+  );
+};

package/src/components/Checkbox/index.ts

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