@adobe-commerce/elsie 1.3.0-alpha04 → 1.3.0-alpha068

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@adobe-commerce/elsie",
-  "version": "1.3.0-alpha04",
+  "version": "1.3.0-alpha068",
   "license": "SEE LICENSE IN LICENSE.md",
   "description": "Domain Package SDK",
   "engines": {
@@ -27,10 +27,10 @@
   },
   "devDependencies": {
     "@adobe-commerce/event-bus": "~1.0.0",
-    "@adobe-commerce/fetch-graphql": "~1.0.0",
-    "@adobe-commerce/recaptcha": "~1.0.0",
+    "@adobe-commerce/fetch-graphql": "1.1.0-beta1",
+    "@adobe-commerce/recaptcha": "1.0.1-beta1",
     "@adobe-commerce/storefront-design": "~1.0.0",
-    "@dropins/build-tools": "~1.0.0",
+    "@dropins/build-tools": "1.0.1-beta1",
     "preact": "~10.22.1",
     "vite-plugin-banner": "^0.8.0"
   },

package/src/components/Modal/Modal.css

@@ -10,10 +10,10 @@
 /* https://cssguidelin.es/#bem-like-naming */
 
 .dropin-modal {
+  height: 100vh;
+  width: 100vw;
   position: fixed;
   top: 0;
-  right: 0;
-  bottom: 0;
   left: 0;
   z-index: 99999;
   overflow: auto;

package/src/components/Modal/Modal.stories.tsx

@@ -11,7 +11,7 @@ import { Meta, StoryObj } from '@storybook/preact';
 import { Modal as component, ModalProps } from './Modal';
 import { useState } from 'preact/hooks';
 import { Button } from '../Button';
-import { expect, userEvent, within, waitFor } from '@storybook/test';
+import { expect, userEvent, within } from '@storybook/test';
 
 const meta: Meta<ModalProps> = {
   title: 'Components/Modal',
@@ -107,21 +107,13 @@ export const SmallModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
-    await expect(portalRoot).toBeVisible();
-
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    expect(portalRoot.querySelector('h4')?.innerText).toBe('Small modal');
+    await expect(await canvas.findByText('Small modal')).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -156,21 +148,13 @@ export const MediumModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
-    await expect(portalRoot).toBeVisible();
-
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
     await expect(modal).toBeVisible();
 
-    expect(portalRoot.querySelector('h3')?.innerText).toBe('Medium modal');
+    await expect(await canvas.findByText('Medium modal')).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'
@@ -203,17 +187,11 @@ export const FullModal: Story = {
     const canvas = within(canvasElement);
     await userEvent.click(canvas.getByRole('button'));
 
-    const portalRoot = await waitFor(() => {
-      const root = document.querySelector('[data-portal-root]') as HTMLDivElement;
-      expect(root).toBeTruthy();
-      return root;
-    });
-
     const modal = document.querySelector(
       '.dropin-modal__body'
     ) as HTMLDivElement;
 
-    await expect(portalRoot).toBeVisible();
+    await expect(modal).toBeVisible();
 
     const closeButton = document.querySelector(
       '.dropin-modal__header-close-button'

package/src/components/Modal/Modal.tsx

@@ -18,7 +18,6 @@ import {
 import { Button } from '../Button';
 import { Close as CloseSVG } from '@adobe-commerce/elsie/icons';
 import { VNode } from 'preact';
-import { Portal } from '../Portal/Portal';
 
 import '@adobe-commerce/elsie/components/Modal/Modal.css';
 
@@ -107,54 +106,52 @@ export const Modal: FunctionComponent<ModalProps> = ({
   }, []);
 
   return (
-    <Portal>
+    <div
+      className={classes([
+        'dropin-modal',
+        ['dropin-modal--dim', backgroundDim],
+      ])}
+    >
       <div
+        {...props}
         className={classes([
-          'dropin-modal',
-          ['dropin-modal--dim', backgroundDim],
+          'dropin-modal__body',
+          [`dropin-modal__body--${size}`, size],
+          className,
         ])}
       >
         <div
-          {...props}
           className={classes([
-            'dropin-modal__body',
-            [`dropin-modal__body--${size}`, size],
-            className,
+            'dropin-modal__header',
+            ['dropin-modal__header-title', !!title],
           ])}
         >
-          <div
-            className={classes([
-              'dropin-modal__header',
-              ['dropin-modal__header-title', !!title],
-            ])}
-          >
-            {title && (
-              <div className={classes(['dropin-modal__header-title-content'])}>
-                {title}
-              </div>
-            )}
-
-            {showCloseButton && (
-              <Button
-                aria-label={translations.modalCloseLabel}
-                variant="tertiary"
-                className="dropin-modal__header-close-button"
-                onClick={handleOnClose}
-                icon={<CloseSVG />}
-              />
-            )}
-          </div>
-
-          <div
-            className={classes([
-              'dropin-modal__content',
-              ['dropin-modal__body--centered', centered],
-            ])}
-          >
-            {children}
-          </div>
+          {title && (
+            <div className={classes(['dropin-modal__header-title-content'])}>
+              {title}
+            </div>
+          )}
+
+          {showCloseButton && (
+            <Button
+              aria-label={translations.modalCloseLabel}
+              variant="tertiary"
+              className="dropin-modal__header-close-button"
+              onClick={handleOnClose}
+              icon={<CloseSVG />}
+            />
+          )}
+        </div>
+
+        <div
+          className={classes([
+            'dropin-modal__content',
+            ['dropin-modal__body--centered', centered],
+          ])}
+        >
+          {children}
         </div>
       </div>
-    </Portal>
+    </div>
   );
 };

package/src/components/Portal/Portal.stories.tsx

@@ -1,145 +0,0 @@
-/********************************************************************
- *  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 { Meta, StoryObj } from '@storybook/preact';
-import { Portal } from './Portal';
-import { Button } from '../Button';
-import { useState } from 'preact/compat';
-
-const meta: Meta<typeof Portal> = {
-  title: 'Components/Portal',
-  component: Portal,
-  parameters: {
-    layout: 'centered',
-  },
-  tags: ['autodocs'],
-};
-
-export default meta;
-type Story = StoryObj<typeof Portal>;
-
-/**
- * ```ts
- * import { Portal } from '@/elsie/components/Portal';
- *
- * <Portal>
- *      <div>👋 Howdy, I'm Howdy!</div>
- * </Portal>
- * ```
- */
-
-// Portal with dynamic content
-export const DynamicContent: Story = {
-  render: () => {
-    const [isOpen, setIsOpen] = useState(false);
-    const [count, setCount] = useState(0);
-
-    return (
-      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
-        <Button onClick={() => setIsOpen(!isOpen)}>
-          {isOpen ? 'Close Portal' : 'Open Portal'}
-        </Button>
-        
-        {isOpen && (
-          <Portal>
-            <div style={{ 
-              position: 'fixed', 
-              top: '50%', 
-              left: '50%', 
-              transform: 'translate(-50%, -50%)',
-              background: 'white',
-              padding: '20px',
-              border: '1px solid #ccc',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}>
-              <p>Portal content with counter: {count}</p>
-              <Button onClick={() => setCount(c => c + 1)}>
-                Increment Counter
-              </Button>
-              <Button 
-                variant="tertiary" 
-                onClick={() => setIsOpen(false)}
-                style={{ marginLeft: '8px' }}
-              >
-                Close
-              </Button>
-            </div>
-          </Portal>
-        )}
-      </div>
-    );
-  },
-};
-
-// Portal with nested portals
-export const NestedPortals: Story = {
-  render: () => {
-    const [isOuterOpen, setOuterOpen] = useState(false);
-    const [isInnerOpen, setInnerOpen] = useState(false);
-
-    return (
-      <div style={{ border: '2px dashed #ccc', padding: '20px' }}>
-        <Button onClick={() => setOuterOpen(!isOuterOpen)}>
-          {isOuterOpen ? 'Close Outer Portal' : 'Open Outer Portal'}
-        </Button>
-        
-        {isOuterOpen && (
-          <Portal>
-            <div style={{ 
-              position: 'fixed', 
-              top: '50%', 
-              left: '50%', 
-              transform: 'translate(-50%, -50%)',
-              background: 'white',
-              padding: '20px',
-              border: '1px solid #ccc',
-              boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-            }}>
-              <p>Outer Portal Content</p>
-              <Button onClick={() => setInnerOpen(!isInnerOpen)}>
-                {isInnerOpen ? 'Close Inner Portal' : 'Open Inner Portal'}
-              </Button>
-              
-              {isInnerOpen && (
-                <Portal>
-                  <div style={{ 
-                    position: 'fixed', 
-                    top: '60%', 
-                    left: '50%', 
-                    transform: 'translate(-50%, -50%)',
-                    background: 'white',
-                    padding: '20px',
-                    border: '1px solid #ccc',
-                    boxShadow: '0 2px 4px rgba(0,0,0,0.1)'
-                  }}>
-                    <p>Inner Portal Content</p>
-                    <Button 
-                      variant="tertiary" 
-                      onClick={() => setInnerOpen(false)}
-                    >
-                      Close Inner Portal
-                    </Button>
-                  </div>
-                </Portal>
-              )}
-              
-              <Button 
-                variant="tertiary" 
-                onClick={() => setOuterOpen(false)}
-                style={{ marginLeft: '8px' }}
-              >
-                Close Outer Portal
-              </Button>
-            </div>
-          </Portal>
-        )}
-      </div>
-    );
-  },
-};

package/src/components/Portal/Portal.tsx

@@ -1,43 +0,0 @@
-/********************************************************************
- *  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 { ComponentChildren, render } from 'preact';
-import { FunctionComponent, useEffect, useRef } from 'preact/compat';
-
-interface PortalProps {
-  children: ComponentChildren;
-}
-
-export const Portal: FunctionComponent<PortalProps> = ({ children }) => {
-  const portalRoot = useRef<HTMLDivElement | null>(null);
-
-  useEffect(() => {
-    // Create portal root if it doesn't exist
-    if (!portalRoot.current) {
-      portalRoot.current = document.createElement('div');
-      portalRoot.current.setAttribute('data-portal-root', '');
-      portalRoot.current.classList.add('dropin-design');
-      document.body.appendChild(portalRoot.current);
-    }
-
-    // Render children into portal root
-    render(children, portalRoot.current);
-
-    // Cleanup
-    return () => {
-      if (portalRoot.current) {
-        render(null, portalRoot.current);
-        portalRoot.current.remove();
-        portalRoot.current = null;
-      }
-    };
-  }, [children]);
-
-  return null;
-};