From 034fe0053ae241f28e123c2f0f0f9d78b9da2bfd Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 10 Nov 2019 13:54:33 -0800
Subject: [PATCH] load solution with help balloon

---
 web-app/src/components/Button/index.tsx       |  8 ++-
 web-app/src/components/Icon/index.tsx         | 15 +++++
 web-app/src/components/StepHelp/index.tsx     | 55 +++++++++++++++++++
 .../Tutorial/LevelPage/Level/Step/index.tsx   | 46 ++++++++--------
 web-app/stories/utils/SideBarDecorator.tsx    |  6 +-
 5 files changed, 101 insertions(+), 29 deletions(-)
 create mode 100644 web-app/src/components/Icon/index.tsx
 create mode 100644 web-app/src/components/StepHelp/index.tsx

diff --git a/web-app/src/components/Button/index.tsx b/web-app/src/components/Button/index.tsx
index c793f895..f135f1ba 100644
--- a/web-app/src/components/Button/index.tsx
+++ b/web-app/src/components/Button/index.tsx
@@ -2,13 +2,15 @@ import * as React from 'react'
 import { Button as AlifdButton } from '@alifd/next'
 
 interface Props {
-  children: string
+  style?: React.CSSProperties
+  children: string | React.ReactNode
+  disabled?: boolean
   type?: 'primary' | 'secondary' | 'normal'
-  onClick(): void
+  onClick?: () => void
 }
 
 const Button = (props: Props) => (
-  <AlifdButton onClick={props.onClick} type={props.type}>
+  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
     {props.children}
   </AlifdButton>
 )
diff --git a/web-app/src/components/Icon/index.tsx b/web-app/src/components/Icon/index.tsx
new file mode 100644
index 00000000..e690d973
--- /dev/null
+++ b/web-app/src/components/Icon/index.tsx
@@ -0,0 +1,15 @@
+import * as React from 'react'
+import { Icon as AlifdIcon } from '@alifd/next'
+
+interface Props {
+  type: string
+  role?: string
+  style?: React.CSSProperties
+  size?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl' | 'inherit'
+}
+
+const Icon = (props: Props) => {
+  return <AlifdIcon type={props.type} role={props.role} size={props.size} style={props.style} />
+}
+
+export default Icon
diff --git a/web-app/src/components/StepHelp/index.tsx b/web-app/src/components/StepHelp/index.tsx
new file mode 100644
index 00000000..fdf2ed3b
--- /dev/null
+++ b/web-app/src/components/StepHelp/index.tsx
@@ -0,0 +1,55 @@
+import * as React from 'react'
+import { Balloon } from '@alifd/next'
+import Button from '../Button'
+import Icon from '../Icon'
+
+const styles = {
+  iconButton: {
+    display: 'flex',
+    justifyContent: 'center',
+    alignItems: 'center',
+    width: 30,
+    height: 30,
+  },
+  balloonTitle: {
+    marginTop: 0,
+  },
+  balloonOptions: {
+    display: 'flex',
+    justifyContent: 'center',
+  },
+}
+
+interface Props {
+  onLoadSolution(): void
+}
+
+const StepHelp = (props: Props) => {
+  // TODO: extract or replace load solution
+  const [loadedSolution, setLoadedSolution] = React.useState()
+  const onClickHandler = () => {
+    if (!loadedSolution) {
+      setLoadedSolution(true)
+      props.onLoadSolution()
+    }
+  }
+  const promptLeft = (
+    <Button style={styles.iconButton}>
+      <Icon type="prompt" role="button" />
+    </Button>
+  )
+  return (
+    <Balloon trigger={promptLeft} align="l" alignEdge triggerType="click" style={{ width: 300 }}>
+      <div>
+        <h4 style={styles.balloonTitle}>Stuck? Need help?</h4>
+        <div style={styles.balloonOptions}>
+          <Button type="secondary" onClick={onClickHandler} disabled={loadedSolution}>
+            Load Solution
+          </Button>
+        </div>
+      </div>
+    </Balloon>
+  )
+}
+
+export default StepHelp
diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx
index c124ba41..381fe5d9 100644
--- a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx
+++ b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx
@@ -1,8 +1,8 @@
 import * as React from 'react'
 import * as T from 'typings'
-import Button from '../../../../../components/Button'
 import Checkbox from '../../../../../components/Checkbox'
 import Markdown from '../../../../../components/Markdown'
+import StepHelp from '../../../../../components/StepHelp'
 
 interface Props {
   order: number
@@ -20,34 +20,32 @@ const styles = {
   content: {
     margin: 0,
   },
+  options: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    justifyContent: 'flex-end',
+    alignItems: 'center' as 'center',
+    padding: '0.5rem',
+  },
 }
 
 const Step = (props: Props) => {
-  // TODO: extract or replace load solution
-  const [loadedSolution, setLoadedSolution] = React.useState()
-  const onClickHandler = () => {
-    if (!loadedSolution) {
-      setLoadedSolution(true)
-      props.onLoadSolution()
-    }
-  }
-  const showLoadSolution = props.status === 'ACTIVE' && !loadedSolution
-
+  const showLoadSolution = props.status === 'ACTIVE'
   return (
-    <div style={styles.card}>
-      <div>
-        <Checkbox status={props.status} />
-      </div>
-      <div>
-        <Markdown>{props.content || ''}</Markdown>
-      </div>
-      <div>
-        {showLoadSolution && (
-          <Button type="normal" onClick={onClickHandler}>
-            Load Solution
-          </Button>
-        )}
+    <div>
+      <div style={styles.card}>
+        <div>
+          <Checkbox status={props.status} />
+        </div>
+        <div>
+          <Markdown>{props.content || ''}</Markdown>
+        </div>
       </div>
+      {showLoadSolution && (
+        <div style={styles.options}>
+          <StepHelp onLoadSolution={props.onLoadSolution} />
+        </div>
+      )}
     </div>
   )
 }
diff --git a/web-app/stories/utils/SideBarDecorator.tsx b/web-app/stories/utils/SideBarDecorator.tsx
index 5c7acd65..03c80a93 100644
--- a/web-app/stories/utils/SideBarDecorator.tsx
+++ b/web-app/stories/utils/SideBarDecorator.tsx
@@ -2,10 +2,12 @@ import * as React from 'react'
 
 const styles = {
   container: {
-    position: 'relative' as 'relative',
+    left: '25rem',
+    position: 'absolute' as 'absolute',
     boxSizing: 'border-box' as 'border-box',
+    borderLeft: '2px solid black',
     borderRight: '2px solid black',
-    width: '100%',
+    width: '50rem',
     height: window.innerHeight,
   },
 }