Merge pull request #37 from kawwong/help-dialog

Design Review - Help Dialog Styling

src/devpanel/components/App.css

@@ -13,6 +13,7 @@
     flex-direction: column;
     height: 100%;
     justify-content: center;
+    position: relative;
     width: 100%;
   }
 
@@ -39,6 +40,5 @@
 @media only screen and (min-width: 1084px) {
   .modal {
     max-width: 1024px;
-    width: 80%;
   }
 }

src/devpanel/components/HelpDialog/HelpDialog.css

@@ -7,15 +7,23 @@
     width: 100%;
   }
 
+  .help-dialog--cancel {
+    background: none;
+    border: none;
+    font-size: 20px;
+    margin: 8px;
+    position: absolute;
+    right: 0;
+    top: 0;
+  }
+
   .help-dialog--close {
     background-color: var(--color-blue);
     border: none;
-    border-radius: 4px;
+    border-radius: 2px;
     color: var(--color-white);
     font-size: 14px;
-    font-weight: 600;
-    padding: 10px 0;
-    width: 100%;
+    padding: 12px 36px;
   }
 
   .help-dialog--close:active,
@@ -29,6 +37,7 @@
     align-content: center;
     display: flex;
     justify-content: center;
+    min-width: 320px;
     padding: 16px;
     width: 100%;
   }
@@ -38,35 +47,32 @@
     display: flex;
     flex-direction: column;
     justify-content: center;
-    width: calc(100% - 16px);
+    margin: 0 28px;
+    width: 100%;
   }
 
   .help-dialog--heading {
+    font-weight: 600;
     text-align: center;
   }
 
-  .help-dialog--vocab-item {
+  .help-dialog--item {
     line-height: 18px;
     margin-bottom: 20px;
     font-size: 14px;
   }
 
+  .help-dialog--learn-more {
+    color: var(--color-blue);
+  }
+
   .help-dialog--vocab-title {
-    font-weight: 500;
+    font-weight: 600;
   }
 }
 
 @media only screen and (min-width: 640px) {
   .help-dialog--action {
-    flex-direction: row;
-    margin: 16px 0 8px;
-  }
-
-  .help-dialog--content {
-    max-width: 800px;
-  }
-
-  .help-dialog--learn-more {
-    margin: 0 8px 0 0;
+    align-items: flex-end;
   }
 }

src/devpanel/components/HelpDialog/HelpDialog.js

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 import { func } from 'prop-types';
 
 import './HelpDialog.css';
@@ -8,24 +8,27 @@ const componentLoadTimeDescription = ` is the amount of time it takes to load a
 const viewportLoadTimeDescription = `  is the amount of time it takes to load the components visible in the current viewport.`;
 
 const HelpDialog = (props) => (
+  <Fragment>
+    <button className='help-dialog--cancel' onClick={props.onCloseClick}>
+      <i className='ms-Icon ms-Icon--Cancel' title='Close' aria-label='Close' />
+    </button>
     <div className='help-dialog--container'>
       <div className='help-dialog--content'>
         <h2 className='help-dialog--heading'>Understanding Mezzurite Metrics</h2>
         <ul className='help-dialog--vocab'>
-        <li className='help-dialog--vocab-item'>
+          <li className='help-dialog--item'>
             <span className='help-dialog--vocab-title'>Application Load Time (ALT)</span>
             {applicationLoadTimeDescription}
           </li>
-        <li className='help-dialog--vocab-item'>
+          <li className='help-dialog--item'>
             <span className='help-dialog--vocab-title'>Component Load Time (CLT)</span>
             {componentLoadTimeDescription}
           </li>
-        <li className='help-dialog--vocab-item'>
+          <li className='help-dialog--item'>
             <span className='help-dialog--vocab-title'>Viewport Load Time (VLT)</span>
             {viewportLoadTimeDescription}
           </li>
-      </ul>
-      <div className='help-dialog--action'>
+          <li className='help-dialog--item'>
             <a
               aria-label='Learn more about Mezzurite'
               className='help-dialog--learn-more'
@@ -34,6 +37,9 @@ const HelpDialog = (props) => (
             >
               Learn More
             </a>
+          </li>
+        </ul>
+        <div className='help-dialog--action'>
           <button
             aria-label='Close'
             className='help-dialog--close'
@@ -44,6 +50,7 @@ const HelpDialog = (props) => (
         </div>
       </div>
     </div>
+  </Fragment>
 );
 
 HelpDialog.propTypes = {

src/devpanel/components/HelpDialog/__snapshots__/HelpDialog.test.js.snap

@@ -1,6 +1,17 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
+<React.Fragment>
+  <button
+    className="help-dialog--cancel"
+    onClick={[Function]}
+  >
+    <i
+      aria-label="Close"
+      className="ms-Icon ms-Icon--Cancel"
+      title="Close"
+    />
+  </button>
   <div
     className="help-dialog--container"
   >
@@ -16,7 +27,7 @@ exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
         className="help-dialog--vocab"
       >
         <li
-        className="help-dialog--vocab-item"
+          className="help-dialog--item"
         >
           <span
             className="help-dialog--vocab-title"
@@ -26,7 +37,7 @@ exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
            is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
         </li>
         <li
-        className="help-dialog--vocab-item"
+          className="help-dialog--item"
         >
           <span
             className="help-dialog--vocab-title"
@@ -36,7 +47,7 @@ exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
            is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
         </li>
         <li
-        className="help-dialog--vocab-item"
+          className="help-dialog--item"
         >
           <span
             className="help-dialog--vocab-title"
@@ -45,9 +56,8 @@ exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
           </span>
             is the amount of time it takes to load the components visible in the current viewport.
         </li>
-    </ul>
-    <div
-      className="help-dialog--action"
+        <li
+          className="help-dialog--item"
         >
           <a
             aria-label="Learn more about Mezzurite"
@@ -57,6 +67,11 @@ exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
           >
             Learn More
           </a>
+        </li>
+      </ul>
+      <div
+        className="help-dialog--action"
+      >
         <button
           aria-label="Close"
           className="help-dialog--close"
@@ -67,9 +82,20 @@ exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
       </div>
     </div>
   </div>
+</React.Fragment>
 `;
 
 exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
+<React.Fragment>
+  <button
+    className="help-dialog--cancel"
+  >
+    <i
+      aria-label="Close"
+      className="ms-Icon ms-Icon--Cancel"
+      title="Close"
+    />
+  </button>
   <div
     className="help-dialog--container"
   >
@@ -85,7 +111,7 @@ exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
         className="help-dialog--vocab"
       >
         <li
-        className="help-dialog--vocab-item"
+          className="help-dialog--item"
         >
           <span
             className="help-dialog--vocab-title"
@@ -95,7 +121,7 @@ exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
            is the amount of time it takes to load the SPA framework. This is calculated using the navigation start time and the application framework load time.
         </li>
         <li
-        className="help-dialog--vocab-item"
+          className="help-dialog--item"
         >
           <span
             className="help-dialog--vocab-title"
@@ -105,7 +131,7 @@ exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
            is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.
         </li>
         <li
-        className="help-dialog--vocab-item"
+          className="help-dialog--item"
         >
           <span
             className="help-dialog--vocab-title"
@@ -114,9 +140,8 @@ exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
           </span>
             is the amount of time it takes to load the components visible in the current viewport.
         </li>
-    </ul>
-    <div
-      className="help-dialog--action"
+        <li
+          className="help-dialog--item"
         >
           <a
             aria-label="Learn more about Mezzurite"
@@ -126,6 +151,11 @@ exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
           >
             Learn More
           </a>
+        </li>
+      </ul>
+      <div
+        className="help-dialog--action"
+      >
         <button
           aria-label="Close"
           className="help-dialog--close"
@@ -135,4 +165,5 @@ exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
       </div>
     </div>
   </div>
+</React.Fragment>
 `;