@adobe-commerce/elsie 2.0.0 → 2.0.1-alpha-20260728135101

package/src/components/ActionButton/ActionButton.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -50,7 +50,7 @@ export const Default: Story = {
     const canvas = within(canvasElement);
     await expect(await canvas.findByRole('button')).toBeVisible();
     await expect(await canvas.findByRole('button')).toHaveClass(
-      'dropin-action-button'
+      'dropin-action-button',
     );
   },
 };
@@ -74,10 +74,10 @@ export const IconOnly: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const buttonIcon = document.querySelector(
-      '.dropin-action-button-icon'
+      '.dropin-action-button-icon',
     ) as HTMLElement;
     const addIcon = document.querySelector(
-      'g[data-name="Add icon"]'
+      'g[data-name="Add icon"]',
     ) as HTMLElement;
     await expect(await canvas.findByRole('button')).toBeVisible();
     await expect(await buttonIcon).toBeVisible();
@@ -102,10 +102,10 @@ export const WithIcon: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const buttonIcon = document.querySelector(
-      '.dropin-action-button-icon'
+      '.dropin-action-button-icon',
     ) as HTMLElement;
     const addIcon = document.querySelector(
-      'g[data-name="Add icon"]'
+      'g[data-name="Add icon"]',
     ) as HTMLElement;
     await expect(await canvas.findByRole('button')).toBeVisible();
     await expect(await buttonIcon).toBeVisible();

package/src/components/ActionButton/ActionButton.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { ComponentChildren, FunctionComponent, VNode } from 'preact';
@@ -12,8 +12,10 @@ import { HTMLAttributes } from 'preact/compat';
 import { VComponent, classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/ActionButton/ActionButton.css';
 
-export interface ActionButtonProps
-  extends Omit<HTMLAttributes<HTMLButtonElement>, 'icon'> {
+export interface ActionButtonProps extends Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  'icon'
+> {
   children?: ComponentChildren;
   icon?: VNode<HTMLAttributes<SVGSVGElement>>;
   active?: boolean;

package/src/components/ActionButton/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/ActionButton/ActionButton';

package/src/components/ActionButtonGroup/ActionButtonGroup.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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

package/src/components/ActionButtonGroup/ActionButtonGroup.tsx

@@ -52,7 +52,7 @@ export const ActionButtonGroup: FunctionComponent<ActionButtonGroupProps> = ({
         }
       }
     },
-    [handleSelect, setActiveOptionState, disabled]
+    [handleSelect, setActiveOptionState, disabled],
   );
 
   const buttonGroupOptions = Children.map(
@@ -71,7 +71,7 @@ export const ActionButtonGroup: FunctionComponent<ActionButtonGroupProps> = ({
           ['dropin-action-button-group__option--with-dividers', dividers],
         ]),
       });
-    }
+    },
   );
 
   return (

package/src/components/ActionButtonGroup/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/ActionButtonGroup/ActionButtonGroup';

package/src/components/AlertBanner/AlertBanner.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -94,13 +94,13 @@ export const Neutral: Story = {
   },
   play: async () => {
     const alertBanner = document.querySelector(
-      'div[class*="dropin-alert-banner"]'
+      'div[class*="dropin-alert-banner"]',
     ) as HTMLElement;
 
     await expect(alertBanner).toBeVisible();
 
     const link = alertBanner.querySelector(
-      '.dropin-alert-banner__dismiss-button'
+      '.dropin-alert-banner__dismiss-button',
     );
     await expect(link).toBeVisible();
     await expect(link?.ariaLabel).toBe('Dismiss Alert');
@@ -152,7 +152,7 @@ export const Action: Story = {
   },
   play: async () => {
     const alertBanner = document.querySelector(
-      'div[class*="dropin-alert-banner"]'
+      'div[class*="dropin-alert-banner"]',
     ) as HTMLElement;
 
     await expect(alertBanner).toBeVisible();

package/src/components/AlertBanner/AlertBanner.tsx

@@ -2,21 +2,23 @@
  *  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. 
+ * 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, VNode } from 'preact';
-import { HTMLAttributes } from 'preact/compat';
-import { classes, VComponent } from '@adobe-commerce/elsie/lib';
-import '@adobe-commerce/elsie/components/AlertBanner/AlertBanner.css';
 import { Button, Icon } from '@adobe-commerce/elsie/components';
-import { Close } from '@adobe-commerce/elsie/icons';
+import '@adobe-commerce/elsie/components/AlertBanner/AlertBanner.css';
 import { useText } from '@adobe-commerce/elsie/i18n';
+import { Close } from '@adobe-commerce/elsie/icons';
+import { classes, VComponent } from '@adobe-commerce/elsie/lib';
+import { FunctionComponent, VNode } from 'preact';
+import { HTMLAttributes } from 'preact/compat';
 
-export interface AlertBannerProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon' | 'action'> {
+export interface AlertBannerProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'icon' | 'action'
+> {
   variant: 'brand' | 'neutral' | 'success' | 'warning';
   icon?: VNode<HTMLAttributes<SVGSVGElement>>;
   message: VNode;

package/src/components/AlertBanner/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/AlertBanner/AlertBanner';

package/src/components/Breadcrumbs/Breadcrumbs.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -65,10 +65,10 @@ export const Breadcrumbs: Story = {
   },
   play: async () => {
     const breadcrumbsElement = document.querySelector(
-      '.dropin-breadcrumbs__container'
+      '.dropin-breadcrumbs__container',
     ) as HTMLElement;
     const categories = breadcrumbsElement.querySelectorAll(
-      '.dropin-breadcrumbs__item a'
+      '.dropin-breadcrumbs__item a',
     );
 
     await expect(breadcrumbsElement).toBeVisible();
@@ -99,13 +99,13 @@ export const BreadcrumbsWithLeadingIcon: Story = {
   },
   play: async () => {
     const breadcrumbsElement = document.querySelector(
-      '.dropin-breadcrumbs__container'
+      '.dropin-breadcrumbs__container',
     ) as HTMLElement;
     const icon = breadcrumbsElement.querySelector(
-      '.dropin-breadcrumbs__item svg'
+      '.dropin-breadcrumbs__item svg',
     ) as HTMLElement;
     const categories = breadcrumbsElement.querySelectorAll(
-      '.dropin-breadcrumbs__item a'
+      '.dropin-breadcrumbs__item a',
     );
 
     await expect(breadcrumbsElement).toBeVisible();
@@ -130,10 +130,10 @@ export const BreadcrumbsWithSeparator: Story = {
   },
   play: async () => {
     const breadcrumbsElement = document.querySelector(
-      '.dropin-breadcrumbs__container'
+      '.dropin-breadcrumbs__container',
     ) as HTMLElement;
     const separators = breadcrumbsElement.querySelectorAll(
-      '.dropin-breadcrumbs__separator--icon'
+      '.dropin-breadcrumbs__separator--icon',
     );
 
     await expect(breadcrumbsElement).toBeVisible();
@@ -174,16 +174,16 @@ export const BreadcrumbsWithIcons: Story = {
   },
   play: async () => {
     const breadcrumbsElement = document.querySelector(
-      '.dropin-breadcrumbs__container'
+      '.dropin-breadcrumbs__container',
     ) as HTMLElement;
     const icon = breadcrumbsElement.querySelector(
-      '.dropin-breadcrumbs__item svg'
+      '.dropin-breadcrumbs__item svg',
     ) as HTMLElement;
     const categories = breadcrumbsElement.querySelectorAll(
-      '.dropin-breadcrumbs__item a'
+      '.dropin-breadcrumbs__item a',
     );
     const separators = breadcrumbsElement.querySelectorAll(
-      '.dropin-breadcrumbs__separator--icon'
+      '.dropin-breadcrumbs__separator--icon',
     );
 
     await expect(breadcrumbsElement).toBeVisible();

package/src/components/Breadcrumbs/Breadcrumbs.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { HTMLAttributes } from 'preact/compat';

package/src/components/Breadcrumbs/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/Breadcrumbs/Breadcrumbs';

package/src/components/Button/Button.mdx

@@ -29,17 +29,23 @@ This example uses all the `Button` properties.
 
 ## All props
 
-The table below shows the name, description, and default value of each `Button` prop. 
-Use the table controls to learn how each property affects the Button.
+The table below shows the name, description, and default value of each `Button`
+prop. Use the table controls to learn how each property affects the Button.
 
 <Canvas of={ButtonStories.Button} />
 <Controls of={ButtonStories.Button} sort="requiredFirst" />
 
 ## Active
 
-Setting `active` to `true` overrides the Button's `icon` and `children` properties with the values you set for the `activeIcon` and `activeChildren` properties. With this one property, you can quickly toggle the Button's icon and text. 
+Setting `active` to `true` overrides the Button's `icon` and `children`
+properties with the values you set for the `activeIcon` and `activeChildren`
+properties. With this one property, you can quickly toggle the Button's icon and
+text.
 
-**Note:** Setting the `active` property to `false` (from `true`) returns the button's `children` and `icon` values. It does not disable the button. To disable the button, use the `disabled` property, as described in the [Disabled](#disabled) section below. 
+**Note:** Setting the `active` property to `false` (from `true`) returns the
+button's `children` and `icon` values. It does not disable the button. To
+disable the button, use the `disabled` property, as described in the
+[Disabled](#disabled) section below.
 
 <StoryWrapper>
   <Story of={ButtonStories.Active} />
@@ -51,9 +57,12 @@ Setting `active` to `true` overrides the Button's `icon` and `children` properti
 
 ## Children
 
-The `children` prop accepts the Preact `ComponentChildren` type. This type is equal to React's `ReactNode` type and can accept any type. But in practice, you should try to limit the `children` prop to a `string`.
+The `children` prop accepts the Preact `ComponentChildren` type. This type is
+equal to React's `ReactNode` type and can accept any type. But in practice, you
+should try to limit the `children` prop to a `string`.
 
-To create Icon-only buttons, use the `icon` prop. See the [Icons](#icons) section below for more information.
+To create Icon-only buttons, use the `icon` prop. See the [Icons](#icons)
+section below for more information.
 
 <StoryWrapper>
   <Story of={ButtonStories.Children} />
@@ -73,7 +82,8 @@ The `disabled` prop is a `boolean` that disables the button. Default is `false`.
 
 ## Icons
 
-The `icon` prop adds an `Icon` component. You can add an `Icon` with or without Button text.
+The `icon` prop adds an `Icon` component. You can add an `Icon` with or without
+Button text.
 
 <StoryWrapper>
   <Story of={ButtonStories.IconOnly} />
@@ -112,17 +122,20 @@ The `variant` prop sets the appearance of the button.
 ### When to use
 
 Use buttons to communicate actions users can take and interact with the page.
-Usually, each page should have only one primary button, and any remaining calls to action should be represented as lower-emphasis buttons.
+Usually, each page should have only one primary button, and any remaining calls
+to action should be represented as lower-emphasis buttons.
 
 ### When not to use
 
-Do not use the `onClick()` attribute to make buttons act as navigational elements.
-Instead, render the button as a link when the desired action is to take the user to a new page.
+Do not use the `onClick()` attribute to make buttons act as navigational
+elements. Instead, render the button as a link when the desired action is to
+take the user to a new page.
 
 ### Render as a link
 
 To use a button as a navigation element, set the `href` prop to the target URL.
-This renders the button as an anchor tag (`<a>`) instead of a button tag (`<button>`).
+This renders the button as an anchor tag (`<a>`) instead of a button tag
+(`<button>`).
 
 <StoryWrapper>
   <Story of={ButtonStories.AsLink} />

package/src/components/Button/Button.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import type { Meta, StoryObj } from '@storybook/preact-vite';
@@ -265,7 +265,7 @@ export const IconOnly: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const searchIcon = document.querySelector(
-      'g[data-name="Search icon"]'
+      'g[data-name="Search icon"]',
     ) as HTMLElement;
     await expect(await canvas.findByRole('button')).toBeVisible();
     await expect(searchIcon).toBeVisible();
@@ -294,7 +294,7 @@ export const TextAndIcon: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const searchIcon = document.querySelector(
-      'g[data-name="Search icon"]'
+      'g[data-name="Search icon"]',
     ) as HTMLElement;
     await expect(await canvas.findByRole('button')).toBeVisible();
     await expect(searchIcon).toBeVisible();
@@ -351,7 +351,7 @@ export const Active: Story = {
   play: async ({ canvasElement }) => {
     const canvas = within(canvasElement);
     const searchIcon = document.querySelector(
-      '[data-name="Search icon filled"]'
+      '[data-name="Search icon filled"]',
     ) as HTMLElement;
     await expect(await canvas.findByRole('button')).toBeVisible();
     await expect(canvas.getByText('Active')).toBeVisible();

package/src/components/Button/Button.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { ComponentChildren, FunctionComponent, VNode } from 'preact';
@@ -12,11 +12,10 @@ import { HTMLAttributes } from 'preact/compat';
 import { VComponent, classes } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/Button/Button.css';
 
-export interface ButtonProps
-  extends Omit<
-    HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
-    'size' | 'icon'
-  > {
+export interface ButtonProps extends Omit<
+  HTMLAttributes<HTMLButtonElement | HTMLAnchorElement>,
+  'size' | 'icon'
+> {
   variant?: 'primary' | 'secondary' | 'tertiary';
   size?: 'medium' | 'large';
   children?: ComponentChildren;

package/src/components/Button/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/Button/Button';

package/src/components/Card/Card.stories.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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
@@ -28,7 +28,7 @@ const meta: Meta<CardProps> = {
       description: 'The content of the Card.',
       control: false,
       type: { name: 'other', value: 'VNode[]' },
-    }
+    },
   },
 };
 
@@ -61,8 +61,8 @@ export const Primary: Story = {
     await expect(await canvas.getByText('Title')).toBeVisible();
     await expect(
       await canvas.getByText(
-        'This is a short description of the item and should be kept to two or three lines as maximum.'
-      )
+        'This is a short description of the item and should be kept to two or three lines as maximum.',
+      ),
     ).toBeVisible();
   },
 };

package/src/components/Card/Card.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * NOTICE:  Adobe permits you to use, modify, and distribute this
+ * file in accordance with the terms of the Adobe license agreement
+ * accompanying it.
  *******************************************************************/
 
 import { ComponentChildren, FunctionComponent } from 'preact';

package/src/components/Card/index.ts

@@ -2,9 +2,9 @@
  *  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. 
+ * 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/Card/Card';

package/src/components/CartItem/CartItem.stories.tsx

@@ -469,48 +469,48 @@ export const CartItem: Story = {
   },
   play: async () => {
     const canvasElement = document.querySelector(
-      '#storybook-root'
+      '#storybook-root',
     ) as HTMLElement;
     const canvas = within(canvasElement);
 
     const itemImage = document.querySelector(
-      '.dropin-cart-item__image'
+      '.dropin-cart-item__image',
     ) as HTMLElement;
     expect(itemImage).toBeVisible();
     const itemTitle = document.querySelector(
-      '.dropin-cart-item__title'
+      '.dropin-cart-item__title',
     ) as HTMLElement;
     expect(itemTitle).toBeVisible();
     const itemSku = document.querySelector(
-      '.dropin-cart-item__sku'
+      '.dropin-cart-item__sku',
     ) as HTMLElement;
     expect(itemSku).toBeVisible();
     const itemConfigurations = document.querySelector(
-      '.dropin-cart-item__configurations'
+      '.dropin-cart-item__configurations',
     ) as HTMLElement;
     expect(itemConfigurations).toBeVisible();
     const itemPrice = document.querySelector(
-      '.dropin-cart-item__price'
+      '.dropin-cart-item__price',
     ) as HTMLElement;
     expect(itemPrice).toBeVisible();
     const quantityStepper = document.querySelector(
-      '.dropin-cart-item__quantity'
+      '.dropin-cart-item__quantity',
     ) as HTMLElement;
     expect(quantityStepper).toBeVisible();
     const itemTotal = document.querySelector(
-      '.dropin-cart-item__total'
+      '.dropin-cart-item__total',
     ) as HTMLElement;
     expect(itemTotal).toBeVisible();
     const actions = document.querySelector(
-      '.dropin-cart-item__buttons'
+      '.dropin-cart-item__buttons',
     ) as HTMLElement;
     expect(actions).toBeVisible();
 
     const increaseButton = document.querySelector(
-      'button[aria-label="Increase Quantity"]'
+      'button[aria-label="Increase Quantity"]',
     ) as HTMLElement;
     const decreaseButton = document.querySelector(
-      'button[aria-label="Decrease Quantity"]'
+      'button[aria-label="Decrease Quantity"]',
     ) as HTMLElement;
 
     // Without this wait test failing intermittently as click event is triggering before even element fully loaded
@@ -665,7 +665,7 @@ export const WithPromotionalBadge: Story = {
   play: async ({ canvasElement }) => {
     // Verify row total footer is rendered below the total
     const rowTotalFooter = canvasElement.querySelector(
-      '.dropin-cart-item__row-total-footer'
+      '.dropin-cart-item__row-total-footer',
     ) as HTMLElement;
     expect(rowTotalFooter).toBeTruthy();
     expect(rowTotalFooter?.textContent).toContain('Super offer');

package/src/components/CartItem/CartItem.tsx

@@ -24,8 +24,10 @@ import { Trash } from '@adobe-commerce/elsie/icons';
 
 import '@adobe-commerce/elsie/components/CartItem/CartItem.css';
 
-export interface CartItemProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'title' | 'loading'> {
+export interface CartItemProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'title' | 'loading'
+> {
   ariaLabel?: string;
   image?: VNode;
   title?: VNode;

package/src/components/CartItem/CartItemSkeleton.tsx

@@ -2,9 +2,9 @@
  *  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. 
+ * 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';