From 137d07bbbe8d06446deba05bec318f589f246c6f Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jun 2020 19:58:38 -0700
Subject: [PATCH 1/4] udpate typings

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 typings/tutorial.d.ts | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/typings/tutorial.d.ts b/typings/tutorial.d.ts
index 58bd21df..00dd1dfc 100644
--- a/typings/tutorial.d.ts
+++ b/typings/tutorial.d.ts
@@ -28,6 +28,7 @@ export type Step = {
   setup: StepActions
   solution: Maybe<StepActions>
   subtasks?: { [testName: string]: boolean }
+  hints?: string[]
 }
 
 /** A tutorial for use in VSCode CodeRoad */
@@ -61,7 +62,7 @@ export interface TestRunnerArgs {
 
 export interface TestRunnerConfig {
   command: string
-  args?: TestRunnerArgs
+  args: TestRunnerArgs
   path?: string // deprecated
   directory?: string
   actions?: StepActions // deprecated

From f4f6e1cae3800d85ed04737d660e8d261154e264 Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jun 2020 20:20:02 -0700
Subject: [PATCH 2/4] outline hints component

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 .../containers/Tutorial/components/Hints.tsx  | 34 +++++++++++++++++++
 .../containers/Tutorial/components/Step.tsx   |  6 ++++
 web-app/stories/Step.stories.tsx              | 10 ++++++
 3 files changed, 50 insertions(+)
 create mode 100644 web-app/src/containers/Tutorial/components/Hints.tsx

diff --git a/web-app/src/containers/Tutorial/components/Hints.tsx b/web-app/src/containers/Tutorial/components/Hints.tsx
new file mode 100644
index 00000000..acbaa0b5
--- /dev/null
+++ b/web-app/src/containers/Tutorial/components/Hints.tsx
@@ -0,0 +1,34 @@
+import * as React from 'react'
+import Button from '../../../components/Button'
+
+interface Props {
+  hints: string[]
+}
+
+const Hints = (props: Props) => {
+  const [hintIndex, setHintIndex] = React.useState(0)
+  const isFinalHint = props.hints.length - 1 === hintIndex
+  console.log(hintIndex)
+  const nextHint = () => {
+    console.log(hintIndex)
+    if (!isFinalHint) {
+      setHintIndex((currentHintIndex) => currentHintIndex + 1)
+    }
+  }
+  return (
+    <div>
+      {props.hints.map((h, i) => {
+        return i <= hintIndex ? (
+          <div key={i} style={{ backgroundColor: 'red' }}>
+            {h}
+          </div>
+        ) : null
+      })}
+      <Button onClick={nextHint} disabled={isFinalHint}>
+        Next Hint
+      </Button>
+    </div>
+  )
+}
+
+export default Hints
diff --git a/web-app/src/containers/Tutorial/components/Step.tsx b/web-app/src/containers/Tutorial/components/Step.tsx
index b1007de6..5065685c 100644
--- a/web-app/src/containers/Tutorial/components/Step.tsx
+++ b/web-app/src/containers/Tutorial/components/Step.tsx
@@ -2,6 +2,7 @@ import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
 import TestStatusIcon from './TestStatusIcon'
+import Hints from './Hints'
 import Markdown from '../../../components/Markdown'
 
 interface Props {
@@ -9,6 +10,7 @@ interface Props {
   content: string
   status: T.ProgressStatus
   subtasks: { name: string; pass: boolean }[] | null
+  hints?: string[]
   onLoadSolution(): void
 }
 
@@ -54,9 +56,11 @@ const Step = (props: Props) => {
           {props.status === 'COMPLETE' && <TestStatusIcon size="small" checked />}
         </div>
         <div>
+          {/* content */}
           <div css={styles.content}>
             <Markdown>{props.content || ''}</Markdown>
           </div>
+          {/* subtasks */}
           {props.subtasks ? (
             <ul css={styles.subtasks}>
               {props.subtasks.map((subtask) => (
@@ -68,6 +72,8 @@ const Step = (props: Props) => {
               ))}
             </ul>
           ) : null}
+          {/* hints */}
+          {props.hints && props.hints.length ? <Hints hints={props.hints} /> : null}
         </div>
       </div>
     </div>
diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx
index ca519850..463bd290 100644
--- a/web-app/stories/Step.stories.tsx
+++ b/web-app/stories/Step.stories.tsx
@@ -98,3 +98,13 @@ storiesOf('Step', module)
       ]}
     />
   ))
+  .add('Hints', () => (
+    <Step
+      order={1}
+      content={text('text', stepText)}
+      status="ACTIVE"
+      onLoadSolution={action('onLoadSolution')}
+      subtasks={null}
+      hints={['First hint!', 'Second hint!']}
+    />
+  ))

From dcc51cc90715c6c61404850b5d5b79752daa9f3d Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jun 2020 20:26:25 -0700
Subject: [PATCH 3/4] add basic hint styles

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 .../containers/Tutorial/components/Hints.tsx  | 40 +++++++++++++------
 1 file changed, 28 insertions(+), 12 deletions(-)

diff --git a/web-app/src/containers/Tutorial/components/Hints.tsx b/web-app/src/containers/Tutorial/components/Hints.tsx
index acbaa0b5..39acaef6 100644
--- a/web-app/src/containers/Tutorial/components/Hints.tsx
+++ b/web-app/src/containers/Tutorial/components/Hints.tsx
@@ -1,31 +1,47 @@
 import * as React from 'react'
+import Markdown from '../../../components/Markdown'
 import Button from '../../../components/Button'
 
+const styles = {
+  hints: {
+    marginTop: '1rem',
+  },
+  hintList: {
+    marginBottom: '0.5rem',
+  },
+  hint: {
+    margin: '0.5rem 0',
+    backgroundColor: 'rgba(255,229,100,0.3)',
+    borderLeft: '#ffe564',
+    padding: '0.5rem',
+  },
+}
+
 interface Props {
   hints: string[]
 }
 
 const Hints = (props: Props) => {
-  const [hintIndex, setHintIndex] = React.useState(0)
+  const [hintIndex, setHintIndex] = React.useState(-1)
   const isFinalHint = props.hints.length - 1 === hintIndex
-  console.log(hintIndex)
   const nextHint = () => {
-    console.log(hintIndex)
     if (!isFinalHint) {
       setHintIndex((currentHintIndex) => currentHintIndex + 1)
     }
   }
   return (
-    <div>
-      {props.hints.map((h, i) => {
-        return i <= hintIndex ? (
-          <div key={i} style={{ backgroundColor: 'red' }}>
-            {h}
-          </div>
-        ) : null
-      })}
+    <div style={styles.hints}>
+      <div style={styles.hintList}>
+        {props.hints.map((h, i) => {
+          return i <= hintIndex ? (
+            <div key={i} style={styles.hint}>
+              <Markdown>{h}</Markdown>
+            </div>
+          ) : null
+        })}
+      </div>
       <Button onClick={nextHint} disabled={isFinalHint}>
-        Next Hint
+        Get A Hint
       </Button>
     </div>
   )

From 4d532de8414681968879e347779dcc285acf374e Mon Sep 17 00:00:00 2001
From: shmck <shawn.j.mckay@gmail.com>
Date: Sun, 14 Jun 2020 20:35:18 -0700
Subject: [PATCH 4/4] pass down hints

Signed-off-by: shmck <shawn.j.mckay@gmail.com>
---
 web-app/src/containers/Tutorial/components/Level.tsx | 1 +
 1 file changed, 1 insertion(+)

diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx
index e8f01d0f..b28382dd 100644
--- a/web-app/src/containers/Tutorial/components/Level.tsx
+++ b/web-app/src/containers/Tutorial/components/Level.tsx
@@ -173,6 +173,7 @@ const Level = ({
                     content={step.content}
                     onLoadSolution={onLoadSolution}
                     subtasks={subtasks}
+                    hints={step.hints}
                   />
                 )
               })}