feat(modal): add help link in modal header

app/components/UI/Modal.js

@@ -49,6 +49,7 @@ class Modal extends React.Component {
               <Text
                 fontWeight="normal"
                 css={{ cursor: 'pointer', opacity: 0.6, '&:hover': { opacity: 1 } }}
+                onClick={() => window.Zap.openHelpPage()}
               >
                 Need Help?
               </Text>

app/main.dev.js

@@ -12,6 +12,7 @@ import installExtension, {
   REDUX_DEVTOOLS
 } from 'electron-devtools-installer'
 import get from 'lodash.get'
+import path from 'path'
 import { mainLog } from './lib/utils/log'
 import ZapMenuBuilder from './lib/zap/menuBuilder'
 import ZapController from './lib/zap/controller'
@@ -118,7 +119,10 @@ app.on('ready', async () => {
     height: 650,
     minWidth: 900,
     minHeight: 425,
-    backgroundColor: get(theme, 'colors.primaryColor', '#242633')
+    backgroundColor: get(theme, 'colors.primaryColor', '#242633'),
+    webPreferences: {
+      preload: path.resolve(__dirname, './preload.js')
+    }
   })
 
   // Initialise the updater.

app/preload.js

@@ -0,0 +1,18 @@
+const { shell } = require('electron')
+
+init()
+
+function init() {
+  // Expose a bridging API to by setting an global on `window`.
+  //
+  // !CAREFUL! do not expose any functionality or APIs that could compromise the
+  // user's computer. E.g. don't directly expose core Electron (even IPC) or node.js modules.
+  window.Zap = {
+    openHelpPage
+  }
+}
+
+// Open the help page in a new browser window,.
+function openHelpPage() {
+  shell.openExternal('https://ln-zap.github.io/zap-tutorials/zap-desktop-getting-started')
+}

stories/components/modal.stories.js

@@ -1,6 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
 import { action } from '@storybook/addon-actions'
+import { boolean } from '@storybook/addon-knobs'
 import { Modal, Page, Text } from 'components/UI'
 
 storiesOf('Components', module).addWithChapters('Modal', {
@@ -11,20 +12,23 @@ storiesOf('Components', module).addWithChapters('Modal', {
     {
       sections: [
         {
-          sectionFn: () => (
+          sectionFn: () => {
-            <Page>
+            const withHeader = boolean('With header', false)
-              <Modal onClose={action('clicked')}>
+            return (
-                <Text>
+              <Page>
-                  Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
+                <Modal onClose={action('clicked')} withHeader={withHeader}>
-                  incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud
+                  <Text>
-                  exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute
+                    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor
-                  irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+                    incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis
-                  pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui
+                    nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
-                  officia deserunt mollit anim id est laborum.
+                    Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu
-                </Text>
+                    fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
-              </Modal>
+                    culpa qui officia deserunt mollit anim id est laborum.
-            </Page>
+                  </Text>
-          )
+                </Modal>
+              </Page>
+            )
+          }
         }
       ]
     }