@@ -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

@@ -2,13 +2,15 @@ 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 {
 order: number
 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>

@@ -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!']}
+/>
+))