fix(modal): fix reviewed changes

ovh · Oct 5, 2023 · 7e8cfcd · 7e8cfcd
1 parent 81f1d07
commit 7e8cfcd
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 59 deletions.
diff --git a/packages/components/modal/src/components/osds-modal/osds-modal.tsx b/packages/components/modal/src/components/osds-modal/osds-modal.tsx
@@ -12,7 +12,7 @@ import { OdsModalMethod } from './interfaces/methods';
 @Component({
   tag: 'osds-modal',
   styleUrl: 'osds-modal.scss',
-  shadow: true
+  shadow: true,
 })
 export class OsdsModal implements OdsModalAttribute, OdsModalMethod {
   @Element() el!: HTMLElement;
@@ -48,13 +48,13 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod {
   @Watch('masked')
   watchOpenedStateHandler(masked: boolean) {
     const directChildren = Array.from(document.body.children);
-    const filteredChildren = directChildren.filter(child => child !== this.el && child.nodeName !== 'SCRIPT');
-
-    for (const child of filteredChildren) {
-      if (!masked) {
-        child.setAttribute('inert', '');
-      } else {
-        child.removeAttribute('inert');
+    for (const child of directChildren) {
+      if (child !== this.el && child.nodeName !== 'SCRIPT') {
+        if (!masked) {
+          child.setAttribute('inert', '');
+        } else {
+          child.removeAttribute('inert');
+        }
       }
     }
   }
@@ -64,47 +64,29 @@ export class OsdsModal implements OdsModalAttribute, OdsModalMethod {
   }
 
   render() {
-
-    const {
-      color,
-      headline,
-      dismissible,
-      masked
-    } = this;
+    const { color, headline, dismissible, masked } = this;
 
     return (
       <Host masked={masked}>
         <div class="backdrop"></div>
 
         <div class="wrapper">
           <div class="header">
-            { dismissible &&
-              <osds-button
-                onClick={() => this.close()}
-                color={color}
-                circle={true}
-                ghost={true}
-              >
-                <osds-icon
-                  ariaName={ODS_ICON_NAME.CLOSE + " icon"}
-                  name={ODS_ICON_NAME.CLOSE}
-                  size={ODS_ICON_SIZE.sm}
-                  color={color}
-                ></osds-icon>
+            {dismissible && (
+              <osds-button onClick={() => this.close()} color={color} circle={true} ghost={true}>
+                <osds-icon ariaName={ODS_ICON_NAME.CLOSE + ' icon'} name={ODS_ICON_NAME.CLOSE} size={ODS_ICON_SIZE.sm} color={color}></osds-icon>
               </osds-button>
-            }
+            )}
           </div>
 
           <div class="content">
-            {headline && headline.length > 0 &&
+            {headline && headline.length > 0 && (
               <div class="headline">
-                <osds-text
-                  level={ODS_TEXT_LEVEL.heading}
-                  size={ODS_THEME_TYPOGRAPHY_SIZE._400}
-                  color={ODS_THEME_COLOR_INTENT.primary}
-                >{headline}</osds-text>
+                <osds-text level={ODS_TEXT_LEVEL.heading} size={ODS_THEME_TYPOGRAPHY_SIZE._400} color={ODS_THEME_COLOR_INTENT.primary}>
+                  {headline}
+                </osds-text>
               </div>
-            }
+            )}
 
             <div class="slot">
               <slot></slot>

diff --git a/packages/storybook/stories/components/modal/modal.web-components.stories.ts b/packages/storybook/stories/components/modal/modal.web-components.stories.ts
@@ -51,55 +51,51 @@ export default {
     },
     docs: { page },
   },
-  argTypes: extractArgTypes(storyParams)
+  argTypes: extractArgTypes(storyParams),
 };
 
-const TemplateDefault = (args:any) => {
+const TemplateDefault = (args: any) => {
   const handleOpenModal = () => {
     const modal = document.querySelector('osds-modal');
     if (modal) {
       modal.open();
-      locationChangeTrigger();
     }
-  }
+  };
 
   const handleCloseModal = () => {
     const modal = document.querySelector('osds-modal');
     if (modal) {
       modal.close();
     }
-  }
+  };
 
-const locationChangeTrigger = () => {
-  let prevUrl = document.location.href;
-  const body = document.querySelector("body");
+  const locationChangeTrigger = () => {
+    let prevUrl = document.location.href;
+    const body = document.querySelector('body');
 
-  const observer = new MutationObserver(() => {
-    if (prevUrl !== document.location.href) {
-      prevUrl = document.location.href;
+    const observer = new MutationObserver(() => {
+      if (prevUrl !== document.location.href) {
+        prevUrl = document.location.href;
 
-      const modals = document.getElementsByTagName('osds-modal');
+        const modals = document.getElementsByTagName('osds-modal');
         for (let i = 0; i < modals.length; i++) {
           modals[i].close();
         }
-    }
-  });
-  observer.observe(body, { childList: true, subtree: true });
-};
+      }
+    });
+    observer.observe(body, { childList: true, subtree: true });
+  };
 
-window.onload = locationChangeTrigger;
+  window.onload = locationChangeTrigger;
 
   return html`
     <button @click=${handleOpenModal}>Trigger "open()"</button>
     <button @click=${handleCloseModal}>Trigger "close()"</button>
     ${locationChangeTrigger()}
 
-    <osds-modal id="my-modal" ...=${getTagAttributes(args)}>
-      ${unsafeHTML(args.content)}
-      ${unsafeHTML(args.actions)}
-    </osds-modal>
-  `
-}
+    <osds-modal id="my-modal" ...=${getTagAttributes(args)}> ${unsafeHTML(args.content)} ${unsafeHTML(args.actions)} </osds-modal>
+  `;
+};
 
 export const Default = TemplateDefault.bind({});
 Default.args = {