Add HelpDialog component

src/devpanel/components/App.css

@@ -1,6 +1,44 @@
-.app {
-  display: flex;
-  flex-direction: column;
-  height: 100vh;
-  min-width: 320px;
+@media only screen {
+  .app {
+    display: flex;
+    flex-direction: column;
+    height: 100vh;
+    min-width: 320px;
+  }
+
+  .modal {
+    align-items: center;
+    background-color: var(--microsoft-white);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .overlay {
+    align-items: center;
+    bottom: 0;
+    background-color: rgba(0, 0, 0, 0.5);
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    left: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+  }
+}
+
+@media only screen and (min-width: 540px) {
+  .modal {
+    height: auto;
+  }
+}
+
+@media only screen and (min-width: 1084px) {
+  .modal {
+    max-width: 1024px;
+    width: 80%;
+  }
 }

src/devpanel/components/App.js

@@ -1,10 +1,12 @@
 import React, { Component } from 'react';
+import Modal from 'react-modal';
 
 import MezzuriteInspector from '../services/MezzuriteInspector';
 import formatTimingsEvent from '../utilities/formatTimingsEvent';
 import './App.css';
 import Footer from './Footer/Footer';
 import Header from './Header/Header';
+import HelpDialog from './HelpDialog/HelpDialog';
 import Main from './Main/Main';
 
 class App extends Component {
@@ -13,12 +15,18 @@ class App extends Component {
     this.state = {
       applicationLoadTime: null,
       captureCycles: null,
+      helpDialogOpen: false,
       loading: true,
       framework: {
         name: null,
         version: null
       }
     };
+
+    Modal.setAppElement('#root');
+
+    this.onHelpDialogClose = this.onHelpDialogClose.bind(this);
+    this.onHelpDialogOpen = this.onHelpDialogOpen.bind(this);
   }
 
   componentDidMount () {
@@ -67,12 +75,40 @@ class App extends Component {
     }
   }
 
+  onHelpDialogClose () {
+    this.setState({ helpDialogOpen: false });
+  }
+
+  onHelpDialogOpen () {
+    this.setState({ helpDialogOpen: true });
+  }
+
   render () {
     return (
       <div className='app'>
         <Header />
-        <Main applicationLoadTime={this.state.applicationLoadTime} captureCycles={this.state.captureCycles} loading={this.state.loading} />
+        <Main
+          applicationLoadTime={this.state.applicationLoadTime}
+          captureCycles={this.state.captureCycles}
+          loading={this.state.loading}
+          onHelpClick={this.onHelpDialogOpen}
+        />
         <Footer packageName={this.state.framework.name} packageVersion={this.state.framework.version} />
+        <Modal
+          isOpen={this.state.helpDialogOpen}
+          className='modal'
+          contentLabel='Help Dialog'
+          onRequestClose={this.onHelpDialogClose}
+          overlayClassName='overlay'
+          shouldFocusAfterRender
+          shouldCloseOnOverlayClick
+          shouldCloseOnEsc
+          shouldReturnFocusAfterClose
+        >
+          <HelpDialog
+            onCloseClick={this.onHelpDialogClose}
+          />
+        </Modal>
       </div>
     );
   }

src/devpanel/components/HelpDialog/HelpDialog.css

@@ -0,0 +1,89 @@
+@media only screen {
+  .help-dialog--action {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: 100%;
+  }
+
+  .help-dialog--close {
+    background-color: var(--microsoft-blue);
+    border: none;
+    border-radius: 4px;
+    color: var(--microsoft-white);
+    font-size: 14px;
+    font-weight: 600;
+    padding: 10px 0;
+    width: 100%;
+  }
+
+  .help-dialog--close:active,
+  .help-dialog--close:hover {
+    background-color: var(--microsoft-blue-darker);
+    cursor: pointer;
+  }
+
+  .help-dialog--container {
+    align-content: center;
+    display: flex;
+    justify-content: center;
+    padding: 16px;
+    width: 100%;
+  }
+
+  .help-dialog--content {
+    align-items: center;
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    width: calc(100% - 16px);
+  }
+
+  .help-dialog--heading {
+    text-align: center;
+  }
+
+  .help-dialog--learn-more {
+    background-color: var(--microsoft-gray-lightest);
+    border-radius: 4px;
+    color: var(--microsoft-blue);
+    font-size: 14px;
+    font-weight: 600;
+    margin: 0 0 8px;
+    padding: 10px 0;
+    text-align: center;
+    text-decoration: none;
+    width: 100%;
+  }
+
+  .help-dialog--learn-more:active,
+  .help-dialog--learn-more:hover {
+    background-color: var(--microsoft-gray-lighter);
+  }
+
+  .help-dialog--vocab-item {
+    line-height: 18px;
+    margin-bottom: 20px;
+    font-size: 14px;
+  }
+
+  .help-dialog--vocab-title {
+    font-weight: 500;
+  }
+}
+
+@media only screen and (min-width: 540px) {
+  .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;
+  }
+}

src/devpanel/components/HelpDialog/HelpDialog.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import { func } from 'prop-types';
+
+import './HelpDialog.css';
+
+const applicationLoadTimeDescription = ` 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.`;
+const componentLoadTimeDescription = ` is the amount of time it takes to load a single component. This is calculated by using the framework's component life cycle.`;
+const viewportLoadTimeDescription = `  is the amount of time it takes to load the components visible in the current viewport.`;
+
+const HelpDialog = (props) => (
+  <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'>
+          <span className='help-dialog--vocab-title'>Application Load Time (ALT)</span>
+          {applicationLoadTimeDescription}
+        </li>
+        <li className='help-dialog--vocab-item'>
+          <span className='help-dialog--vocab-title'>Component Load Time (CLT)</span>
+          {componentLoadTimeDescription}
+        </li>
+        <li className='help-dialog--vocab-item'>
+          <span className='help-dialog--vocab-title'>Viewport Load Time (VLT)</span>
+          {viewportLoadTimeDescription}
+        </li>
+      </ul>
+      <div className='help-dialog--action'>
+        <a
+          aria-label='Learn more about Mezzurite'
+          className='help-dialog--learn-more'
+          href='https://github.com/Microsoft/Mezzurite#background'
+          target='_blank'
+        >
+          Learn More
+        </a>
+        <button
+          aria-label='Close'
+          className='help-dialog--close'
+          onClick={props.onCloseClick}
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+);
+
+HelpDialog.propTypes = {
+  onCloseClick: func
+};
+
+export default HelpDialog;

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

@@ -0,0 +1,20 @@
+import React from 'react';
+import ShallowRenderer from 'react-test-renderer/shallow';
+
+import HelpDialog from './HelpDialog';
+
+describe('HelpDialog.js', () => {
+  const renderer = new ShallowRenderer();
+
+  it('should render without an onCloseClick function', () => {
+    const tree = renderer
+      .render(<HelpDialog />);
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should render with an onCloseClick function', () => {
+    const tree = renderer
+      .render(<HelpDialog onCloseClick={() => true} />);
+    expect(tree).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,138 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`HelpDialog.js should render with an onCloseClick function 1`] = `
+<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"
+      >
+        <span
+          className="help-dialog--vocab-title"
+        >
+          Application Load Time (ALT)
+        </span>
+         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"
+      >
+        <span
+          className="help-dialog--vocab-title"
+        >
+          Component Load Time (CLT)
+        </span>
+         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"
+      >
+        <span
+          className="help-dialog--vocab-title"
+        >
+          Viewport Load Time (VLT)
+        </span>
+          is the amount of time it takes to load the components visible in the current viewport.
+      </li>
+    </ul>
+    <div
+      className="help-dialog--action"
+    >
+      <a
+        aria-label="Learn more about Mezzurite"
+        className="help-dialog--learn-more"
+        href="https://github.com/Microsoft/Mezzurite#background"
+        target="_blank"
+      >
+        Learn More
+      </a>
+      <button
+        aria-label="Close"
+        className="help-dialog--close"
+        onClick={[Function]}
+      >
+        Close
+      </button>
+    </div>
+  </div>
+</div>
+`;
+
+exports[`HelpDialog.js should render without an onCloseClick function 1`] = `
+<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"
+      >
+        <span
+          className="help-dialog--vocab-title"
+        >
+          Application Load Time (ALT)
+        </span>
+         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"
+      >
+        <span
+          className="help-dialog--vocab-title"
+        >
+          Component Load Time (CLT)
+        </span>
+         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"
+      >
+        <span
+          className="help-dialog--vocab-title"
+        >
+          Viewport Load Time (VLT)
+        </span>
+          is the amount of time it takes to load the components visible in the current viewport.
+      </li>
+    </ul>
+    <div
+      className="help-dialog--action"
+    >
+      <a
+        aria-label="Learn more about Mezzurite"
+        className="help-dialog--learn-more"
+        href="https://github.com/Microsoft/Mezzurite#background"
+        target="_blank"
+      >
+        Learn More
+      </a>
+      <button
+        aria-label="Close"
+        className="help-dialog--close"
+      >
+        Close
+      </button>
+    </div>
+  </div>
+</div>
+`;