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

package/src/components/Icon/Icon.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 { Icon, IconProps } from '@adobe-commerce/elsie/components/Icon';
@@ -14,7 +14,7 @@ import type { Meta, StoryObj } from '@storybook/preact-vite';
 
 /**
  * Use Icons as symbols or metaphors to communicate and enhance the user experience.
- * 
+ *
  * The Icon component supports three source types:
  * - Direct component imports
  * - Icon names from the built-in icon set
@@ -36,7 +36,8 @@ const meta: Meta<StoryIconProps> = {
       control: {
         type: 'text',
       },
-      description: 'Or enter a URL to an external SVG (this takes priority over icon selection)',
+      description:
+        'Or enter a URL to an external SVG (this takes priority over icon selection)',
     },
     size: {
       control: 'select',
@@ -93,24 +94,24 @@ export const AllBuiltInIcons: Story = {
     style: Object,
     url: {
       table: {
-        disable: true
-      }
+        disable: true,
+      },
     },
     source: {
       table: {
-        disable: true
-      }
+        disable: true,
+      },
     },
     title: {
       table: {
-        disable: true
-      }
-    }
+        disable: true,
+      },
+    },
   },
   args: {
     style: {
-      color: 'blue'
-    }
+      color: 'blue',
+    },
   },
   render: (props) => (
     <div
@@ -132,82 +133,95 @@ export const AllBuiltInIcons: Story = {
   ),
 };
 
-
 export const UrlExamples: Story = {
   argTypes: {
     source: {
       table: {
-        disable: true
-      }
+        disable: true,
+      },
     },
     title: {
       table: {
-        disable: true
-      }
-    }
+        disable: true,
+      },
+    },
   },
   render: ({ url, ...args }: StoryIconProps) => (
-    <div style={{ 
-      display: 'grid', 
-      gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))', 
-      gap: '2rem',
-      padding: '1rem'
-    }}>
-      <div style={{
-        border: '1px solid #e1e5e9',
-        borderRadius: '8px',
-        padding: '1.5rem',
-        textAlign: 'center',
-        backgroundColor: '#f8f9fa'
-      }}>
+    <div
+      style={{
+        display: 'grid',
+        gridTemplateColumns: 'repeat(auto-fit, minmax(200px, 1fr))',
+        gap: '2rem',
+        padding: '1rem',
+      }}
+    >
+      <div
+        style={{
+          border: '1px solid #e1e5e9',
+          borderRadius: '8px',
+          padding: '1.5rem',
+          textAlign: 'center',
+          backgroundColor: '#f8f9fa',
+        }}
+      >
         <h3 style={{ margin: '0 0 1rem 0', color: '#2c3e50' }}>✅ Valid URL</h3>
-        <Icon 
+        <Icon
           source={url || `${window.location.origin}/favicon.svg`}
           size="12"
           title="logo icon from common domain"
           aria-label="Star icon loaded from external URL"
           {...args}
         />
-        <p style={{ 
-          fontSize: '12px', 
-          color: '#495057',
-          margin: '0.5rem 0 0 0',
-          wordBreak: 'break-all'
-        }}>
-          {url ? `Displays icon from: ${url}` : `Displays icon from ${window.location.origin}/favicon.svg`}
+        <p
+          style={{
+            fontSize: '12px',
+            color: '#495057',
+            margin: '0.5rem 0 0 0',
+            wordBreak: 'break-all',
+          }}
+        >
+          {url
+            ? `Displays icon from: ${url}`
+            : `Displays icon from ${window.location.origin}/favicon.svg`}
         </p>
       </div>
-      
-      <div style={{
-        border: '1px solid #f8d7da',
-        borderRadius: '8px',
-        padding: '1.5rem',
-        textAlign: 'center',
-        backgroundColor: '#f8d7da'
-      }}>
-        <h3 style={{ margin: '0 0 1rem 0', color: '#721c24' }}>❌ Invalid URL</h3>
-        <Icon 
-          source="https://invalid-url.com/icon.svg" 
+
+      <div
+        style={{
+          border: '1px solid #f8d7da',
+          borderRadius: '8px',
+          padding: '1.5rem',
+          textAlign: 'center',
+          backgroundColor: '#f8d7da',
+        }}
+      >
+        <h3 style={{ margin: '0 0 1rem 0', color: '#721c24' }}>
+          ❌ Invalid URL
+        </h3>
+        <Icon
+          source="https://invalid-url.com/icon.svg"
           size="32"
           title="Failed to load icon"
           aria-label="Icon that failed to load"
         />
-        <p style={{ 
-          fontSize: '12px', 
-          color: '#721c24',
-          margin: '0.5rem 0 0 0',
-          wordBreak: 'break-all'
-        }}>
+        <p
+          style={{
+            fontSize: '12px',
+            color: '#721c24',
+            margin: '0.5rem 0 0 0',
+            wordBreak: 'break-all',
+          }}
+        >
           Shows empty SVG
         </p>
       </div>
-      
     </div>
   ),
   parameters: {
     docs: {
       description: {
-        story: 'Examples of different URL formats supported by the Icon component.',
+        story:
+          'Examples of different URL formats supported by the Icon component.',
       },
     },
   },

package/src/components/Icon/Icon.tsx

@@ -18,16 +18,24 @@ export type IconType = keyof typeof import('@adobe-commerce/elsie/icons');
 
 const lazyIcons = {
   Add: lazy(() => import('@adobe-commerce/elsie/icons/Add.svg')),
-  AddressBook: lazy(() => import('@adobe-commerce/elsie/icons/AddressBook.svg')),
+  AddressBook: lazy(
+    () => import('@adobe-commerce/elsie/icons/AddressBook.svg'),
+  ),
   Bulk: lazy(() => import('@adobe-commerce/elsie/icons/Bulk.svg')),
   Burger: lazy(() => import('@adobe-commerce/elsie/icons/Burger.svg')),
   Business: lazy(() => import('@adobe-commerce/elsie/icons/Business.svg')),
   Card: lazy(() => import('@adobe-commerce/elsie/icons/Card.svg')),
   Cart: lazy(() => import('@adobe-commerce/elsie/icons/Cart.svg')),
   Check: lazy(() => import('@adobe-commerce/elsie/icons/Check.svg')),
-  CheckWithCircle: lazy(() => import('@adobe-commerce/elsie/icons/CheckWithCircle.svg')),
-  ChevronDown: lazy(() => import('@adobe-commerce/elsie/icons/ChevronDown.svg')),
-  ChevronRight: lazy(() => import('@adobe-commerce/elsie/icons/ChevronRight.svg')),
+  CheckWithCircle: lazy(
+    () => import('@adobe-commerce/elsie/icons/CheckWithCircle.svg'),
+  ),
+  ChevronDown: lazy(
+    () => import('@adobe-commerce/elsie/icons/ChevronDown.svg'),
+  ),
+  ChevronRight: lazy(
+    () => import('@adobe-commerce/elsie/icons/ChevronRight.svg'),
+  ),
   ChevronUp: lazy(() => import('@adobe-commerce/elsie/icons/ChevronUp.svg')),
   Close: lazy(() => import('@adobe-commerce/elsie/icons/Close.svg')),
   Coupon: lazy(() => import('@adobe-commerce/elsie/icons/Coupon.svg')),
@@ -40,23 +48,33 @@ const lazyIcons = {
   Gift: lazy(() => import('@adobe-commerce/elsie/icons/Gift.svg')),
   GiftCard: lazy(() => import('@adobe-commerce/elsie/icons/GiftCard.svg')),
   Heart: lazy(() => import('@adobe-commerce/elsie/icons/Heart.svg')),
-  HeartFilled: lazy(() => import('@adobe-commerce/elsie/icons/HeartFilled.svg')),
+  HeartFilled: lazy(
+    () => import('@adobe-commerce/elsie/icons/HeartFilled.svg'),
+  ),
   InfoFilled: lazy(() => import('@adobe-commerce/elsie/icons/InfoFilled.svg')),
   List: lazy(() => import('@adobe-commerce/elsie/icons/List.svg')),
   Locker: lazy(() => import('@adobe-commerce/elsie/icons/Locker.svg')),
   Minus: lazy(() => import('@adobe-commerce/elsie/icons/Minus.svg')),
   Order: lazy(() => import('@adobe-commerce/elsie/icons/Order.svg')),
   OrderError: lazy(() => import('@adobe-commerce/elsie/icons/OrderError.svg')),
-  OrderSuccess: lazy(() => import('@adobe-commerce/elsie/icons/OrderSuccess.svg')),
-  PaymentError: lazy(() => import('@adobe-commerce/elsie/icons/PaymentError.svg')),
-  Placeholder: lazy(() => import('@adobe-commerce/elsie/icons/Placeholder.svg')),
+  OrderSuccess: lazy(
+    () => import('@adobe-commerce/elsie/icons/OrderSuccess.svg'),
+  ),
+  PaymentError: lazy(
+    () => import('@adobe-commerce/elsie/icons/PaymentError.svg'),
+  ),
+  Placeholder: lazy(
+    () => import('@adobe-commerce/elsie/icons/Placeholder.svg'),
+  ),
   PlaceholderFilled: lazy(
-    () => import('@adobe-commerce/elsie/icons/PlaceholderFilled.svg')
+    () => import('@adobe-commerce/elsie/icons/PlaceholderFilled.svg'),
   ),
   Purchase: lazy(() => import('@adobe-commerce/elsie/icons/Purchase.svg')),
   Quote: lazy(() => import('@adobe-commerce/elsie/icons/Quote.svg')),
   Search: lazy(() => import('@adobe-commerce/elsie/icons/Search.svg')),
-  SearchFilled: lazy(() => import('@adobe-commerce/elsie/icons/SearchFilled.svg')),
+  SearchFilled: lazy(
+    () => import('@adobe-commerce/elsie/icons/SearchFilled.svg'),
+  ),
   Sort: lazy(() => import('@adobe-commerce/elsie/icons/Sort.svg')),
   Star: lazy(() => import('@adobe-commerce/elsie/icons/Star.svg')),
   Structure: lazy(() => import('@adobe-commerce/elsie/icons/Structure.svg')),
@@ -66,17 +84,19 @@ const lazyIcons = {
   View: lazy(() => import('@adobe-commerce/elsie/icons/View.svg')),
   Wallet: lazy(() => import('@adobe-commerce/elsie/icons/Wallet.svg')),
   Warning: lazy(() => import('@adobe-commerce/elsie/icons/Warning.svg')),
-  WarningFilled: lazy(() => import('@adobe-commerce/elsie/icons/WarningFilled.svg')),
+  WarningFilled: lazy(
+    () => import('@adobe-commerce/elsie/icons/WarningFilled.svg'),
+  ),
   WarningWithCircle: lazy(
-    () => import('@adobe-commerce/elsie/icons/WarningWithCircle.svg')
+    () => import('@adobe-commerce/elsie/icons/WarningWithCircle.svg'),
   ),
 };
 
 export interface IconProps extends Omit<SVGProps<SVGSVGElement>, 'size'> {
   source?:
-  | FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>
-  | IconType
-  | string;
+    | FunctionComponent<SVGProps<SVGSVGElement> & { title?: string }>
+    | IconType
+    | string;
   size?: '12' | '16' | '24' | '32' | '64' | '80';
   stroke?: '1' | '2' | '3' | '4';
   className?: string;
@@ -87,26 +107,29 @@ export type IconNode = FunctionComponent<
   SVGProps<SVGSVGElement> & { title?: string }
 >;
 
-function isValidUrl(source: string): boolean { // check for URL from same domain
+function isValidUrl(source: string): boolean {
+  // check for URL from same domain
   try {
     if (source.startsWith('//')) {
       const absoluteUrl = `${window.location.protocol}${source}`;
       const url = new URL(absoluteUrl);
       if (url.hostname !== window.location.hostname) {
         console.error(
-          `[Icon] External URL rejected for security: ${source} - Only same-domain URLs are allowed`
+          `[Icon] External URL rejected for security: ${source} - Only same-domain URLs are allowed`,
         );
         return false;
       }
       return true;
     }
     const url = new URL(source);
-    
+
     if (url.hostname !== window.location.hostname) {
-      console.error(`[Icon] External URL rejected for security: ${source} - Only same-domain URLs are allowed`);
+      console.error(
+        `[Icon] External URL rejected for security: ${source} - Only same-domain URLs are allowed`,
+      );
       return false;
     }
-    
+
     return true;
   } catch {
     console.error(`[Icon] Invalid URL format: ${source}`);
@@ -124,33 +147,40 @@ function UrlSvgLoader({
 
   useEffect(() => {
     fetch(url)
-      .then(response => {
+      .then((response) => {
         if (!response.ok) {
-          console.error(`[Icon] Failed to fetch SVG: ${response.status} ${response.statusText}`);
-          throw new Error(`Failed to fetch SVG: ${response.status} ${response.statusText}`);
+          console.error(
+            `[Icon] Failed to fetch SVG: ${response.status} ${response.statusText}`,
+          );
+          throw new Error(
+            `Failed to fetch SVG: ${response.status} ${response.statusText}`,
+          );
         }
         return response.text();
       })
-      .then(content => {
+      .then((content) => {
         // Check if content is valid SVG
         try {
           const parser = new DOMParser();
-          const doc = parser.parseFromString(content, "image/svg+xml");
+          const doc = parser.parseFromString(content, 'image/svg+xml');
           const svg = doc.querySelector('svg');
           if (!svg) {
-            throw new Error("No <svg> element found");
+            throw new Error('No <svg> element found');
           }
           // Success!
-        } catch(e: unknown) {
-          if (e instanceof Error ) {
-            console.error(`[Icon] Invalid SVG content from ${url}: ${e.message}`);
+        } catch (e: unknown) {
+          if (e instanceof Error) {
+            console.error(
+              `[Icon] Invalid SVG content from ${url}: ${e.message}`,
+            );
           } else {
-            console.error(`[Icon] Invalid SVG content from ${url}: ${String(e)}`);
+            console.error(
+              `[Icon] Invalid SVG content from ${url}: ${String(e)}`,
+            );
           }
           setError(true);
           setLoading(false);
         }
-        
 
         // Process SVG content to ensure proper sizing and accessibility
         let processedContent = content;
@@ -158,33 +188,36 @@ function UrlSvgLoader({
         if (props.width) {
           processedContent = processedContent.replace(
             /<svg([^>]*)\s+width\s*=\s*["'][^"']*["']/gi,
-            '<svg$1'
+            '<svg$1',
           );
           processedContent = processedContent.replace(
             /<svg/i,
-            `<svg width="${props.width}"`
+            `<svg width="${props.width}"`,
           );
         }
 
         if (props.height) {
           processedContent = processedContent.replace(
             /<svg([^>]*)\s+height\s*=\s*["'][^"']*["']/gi,
-            '<svg$1'
+            '<svg$1',
           );
           processedContent = processedContent.replace(
             /<svg/i,
-            `<svg height="${props.height}"`
+            `<svg height="${props.height}"`,
           );
         }
-        
+
         if (props.title) {
-          processedContent = processedContent.replace(/<title[^>]*>.*?<\/title>/gi, '');
+          processedContent = processedContent.replace(
+            /<title[^>]*>.*?<\/title>/gi,
+            '',
+          );
           processedContent = processedContent.replace(
             /<svg([^>]*)>/i,
-            `<svg$1><title>${props.title}</title>`
+            `<svg$1><title>${props.title}</title>`,
           );
         }
-        
+
         setSvgContent(processedContent);
         setLoading(false);
       })
@@ -226,7 +259,6 @@ export function Icon({
   className,
   ...props
 }: IconProps) {
-
   const defaultProps = {
     className: classes([
       'dropin-icon',
@@ -248,14 +280,15 @@ export function Icon({
   if (isLikelyUrl && isValidUrl(Source)) {
     return (
       <Suspense fallback={<svg {...props} {...defaultProps} />}>
-        <UrlSvgLoader url={Source} {...props} {...defaultProps}/>
+        <UrlSvgLoader url={Source} {...props} {...defaultProps} />
       </Suspense>
     );
   }
 
-  const LazyIcon = typeof Source === 'string' && Source in lazyIcons
-    ? lazyIcons[Source as IconType]
-    : null;
+  const LazyIcon =
+    typeof Source === 'string' && Source in lazyIcons
+      ? lazyIcons[Source as IconType]
+      : null;
 
   const isRejectedUrl = isLikelyUrl && !isValidUrl(Source);
 

package/src/components/Icon/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/Icon/Icon';

package/src/components/IllustratedMessage/IllustratedMessage.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
@@ -98,28 +98,28 @@ export const IllustratedMessage: Story = {
   },
   play: async () => {
     const illustratedMessage = document.querySelector(
-      'div[class*="dropin-illustrated-message"]'
+      'div[class*="dropin-illustrated-message"]',
     ) as HTMLElement;
 
     await expect(illustratedMessage).toBeVisible();
 
     const icon = illustratedMessage.querySelector(
-      '.dropin-illustrated-message__icon'
+      '.dropin-illustrated-message__icon',
     );
     await expect(icon).toBeVisible();
 
     const heading = illustratedMessage.querySelector(
-      '.dropin-illustrated-message__heading'
+      '.dropin-illustrated-message__heading',
     );
     await expect(heading).toBeVisible();
 
     const message = illustratedMessage.querySelector(
-      '.dropin-illustrated-message__message'
+      '.dropin-illustrated-message__message',
     );
     await expect(message).toBeVisible();
 
     const action = illustratedMessage.querySelector(
-      '.dropin-illustrated-message__action'
+      '.dropin-illustrated-message__action',
     );
     await expect(action).toBeVisible();
   },

package/src/components/IllustratedMessage/IllustratedMessage.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, VNode } from 'preact';
@@ -13,8 +13,10 @@ import { classes, VComponent } from '@adobe-commerce/elsie/lib';
 import '@adobe-commerce/elsie/components/IllustratedMessage/IllustratedMessage.css';
 import { Card } from '@adobe-commerce/elsie/components';
 
-export interface IllustratedMessageProps
-  extends Omit<HTMLAttributes<HTMLDivElement>, 'icon' | 'action'> {
+export interface IllustratedMessageProps extends Omit<
+  HTMLAttributes<HTMLDivElement>,
+  'icon' | 'action'
+> {
   icon?: VNode<HTMLAttributes<SVGSVGElement>>;
   heading?: string;
   headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;

package/src/components/IllustratedMessage/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/IllustratedMessage/IllustratedMessage';

package/src/components/Image/Image.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/Image/Image.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';
@@ -47,7 +47,7 @@ export const Image: FunctionComponent<ImageProps> = ({
 
   // Add class at image onLoad
   const onLoadHandler = (e: any) => {
-    setLoaded(true);    
+    setLoaded(true);
     onLoad?.(e);
   };
 

package/src/components/Image/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/Image/Image';

package/src/components/ImageSwatch/ImageSwatch.css

@@ -51,7 +51,8 @@
 }
 
 .dropin-image-swatch__span:hover {
-  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+  box-shadow:
+    0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
     0 0 0 var(--shape-border-width-4) var(--color-neutral-500);
   outline: none;
 }
@@ -73,7 +74,8 @@
   input[type='checkbox']:checked
   ~ .dropin-image-swatch__span,
 .dropin-image-swatch--selected {
-  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+  box-shadow:
+    0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
     0 0 0 var(--shape-border-width-4) var(--color-neutral-800);
 }
 
@@ -83,7 +85,8 @@
 .dropin-image-swatch__container
   input[type='checkbox']:checked:active
   ~ .dropin-image-swatch__span {
-  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
+  box-shadow:
+    0 0 0 var(--shape-border-width-3) var(--color-neutral-50),
     0 0 0 var(--shape-border-width-4) var(--color-neutral-600);
 }
 
@@ -93,7 +96,8 @@
 .dropin-image-swatch__container
   input[type='checkbox']:focus-visible
   + .dropin-image-swatch__span {
-  box-shadow: 0 0 0 var(--shape-border-width-3) var(--color-neutral-900),
+  box-shadow:
+    0 0 0 var(--shape-border-width-3) var(--color-neutral-900),
     0 0 0 6px var(--color-neutral-600);
 }