Clean code

nasa-jpl · Aug 16, 2023 · f96180c · f96180c
1 parent 1e91b2d
commit f96180c
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 15 deletions.
diff --git a/dist/css/explorer-1.min.css b/dist/css/explorer-1.min.css
diff --git a/dist/js/explorer-1.min.js b/dist/js/explorer-1.min.js
diff --git a/src/scss/components/_Dialog.scss b/src/scss/components/_Dialog.scss
@@ -13,6 +13,7 @@
     }
   }
 
+  // Using rems to align with the icon's element approach
   .button-close {
     top: -2rem;
   }

diff --git a/storybook/stories/components/Dialog/Dialog.js b/storybook/stories/components/Dialog/Dialog.js
@@ -1,32 +1,26 @@
 import { IconCloseTemplate } from '../Icons/IconClose'
 
 export const DialogTemplate = ({
-  dialogId,
-  dialogTrigger,
+  dialogId = '',
+  dialogTrigger = '',
   ariaLabelledBy = '',
-  content,
+  content = '',
   overlayClose = 'true',
   dialogBoxClass = '',
 }) => {
   const template = `
     <div class="Dialog">
-        <span data-a11y-dialog-show="${dialogId}">${
-    dialogTrigger ? dialogTrigger : 'Dialog trigger'
-  }</span>  
+        <span data-a11y-dialog-show="${dialogId}">${dialogTrigger}</span>  
         <div id="${dialogId}"
-        aria-labelledby="${
-          ariaLabelledBy ? ariaLabelledBy : ''
-        }" aria-hidden='true'
+        aria-labelledby="${ariaLabelledBy}" aria-hidden='true'
         class="dialog-container fixed top-0 left-0 z-50 flex w-full h-full overflow-auto" >
             <div class="dialog-overlay ${
               overlayClose ? 'data-a11y-dialog-hide' : ''
             }
             bg-gray-dark bg-opacity-90 fixed top-0 left-0 w-full h-full"></div> 
             <div class="container m-auto">
-                <div role="document" class="dialog-box ${
-                  dialogBoxClass ? dialogBoxClass : ''
-                } relative m-auto bg-white">
-                    <button data-a11y-dialog-hide aria-label="Close dialog" 
+                <div role="document" class="dialog-box ${dialogBoxClass} relative m-auto bg-white">
+                    <button type="button" data-a11y-dialog-hide aria-label="Close dialog" 
                     class="button-close absolute right-0 flex-shrink-0 text-white focus:outline-none focus:ring-2">
                         ${IconCloseTemplate({})}
                     </button>