@adobe-commerce/elsie 1.0.0-alpha04071347

package/src/components/CartList/CartList.tsx

@@ -0,0 +1,40 @@
+/********************************************************************
+ *  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, Children } from 'preact/compat';
+import { classes } from '@adobe-commerce/elsie/lib';
+
+import '@adobe-commerce/elsie/components/CartList/CartList.css';
+
+export interface CartListProps extends HTMLAttributes<HTMLDivElement> {}
+
+export const CartList: FunctionComponent<CartListProps> = ({
+  className,
+  children,
+  ...props
+}) => {
+  return (
+    <div {...props} className={classes(['dropin-cart-list', className])}>
+      <div
+        className="dropin-cart-list__wrapper"
+        aria-live="assertive"
+        aria-relevant="all"
+      >
+        {Children.map(children, (child, key) => {
+          return (
+            <div key={key} className="dropin-cart-list__item">
+              {child}
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

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

package/src/components/Checkbox/Checkbox.css

@@ -0,0 +1,255 @@
+/********************************************************************
+ *  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-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,290 @@
+/********************************************************************
+ *  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 type { Meta, StoryObj } from '@storybook/preact';
+import { Checkbox, CheckboxProps } from '@adobe-commerce/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-commerce/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();
+  },
+};