add show/hide step review toggle

Signed-off-by: shmck <[email protected]>

Author: ShMcK

Diff for: web-app/src/containers/Tutorial/containers/Review.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as T from 'typings'
+import { Switch } from '@alifd/next'
 import Steps from '../components/Steps'
 import Content from '../components/Content'
 
@@ -15,7 +16,7 @@ const styles = {
   header: {
     display: 'flex' as 'flex',
     alignItems: 'center',
-    justifyContent: 'flex-start',
+    justifyContent: 'space-between',
     height: '2rem',
     backgroundColor: '#EBEBEB',
     fontSize: '1rem',
@@ -25,22 +26,39 @@ const styles = {
   title: {
     marginLeft: '0.5rem',
   },
+  control: {
+    display: 'flex' as 'flex',
+    alignItems: 'center',
+    fontSize: '70%',
+  },
+  levels: {
+    paddingBottom: '2rem',
+  },
 }
 
 const ReviewPage = (props: Props) => {
+  const [stepVisibility, setStepVisibility] = React.useState(false)
   return (
     <div css={styles.container}>
-      <div css={styles.header}>Review</div>
-      {props.levels.map((level: T.LevelUI, index: number) => (
-        <div key={level.id}>
-          <div>
-            <Content title={level.title} content={level.content} />
-            <Steps steps={level.steps} displayAll />
-          </div>
-          {/* divider */}
-          {index < props.levels.length - 1 ? <hr /> : null}
+      <div css={styles.header}>
+        <div>Review</div>
+        <div css={styles.control}>
+          <span>Show steps&nbsp;</span>
+          <Switch checked={stepVisibility} onChange={(checked) => setStepVisibility(checked)} />
         </div>
-      ))}
+      </div>
+      <div css={styles.levels}>
+        {props.levels.map((level: T.LevelUI, index: number) => (
+          <div key={level.id}>
+            <div>
+              <Content title={level.title} content={level.content} />
+              {stepVisibility ? <Steps steps={level.steps} displayAll /> : null}
+            </div>
+            {/* divider */}
+            {index < props.levels.length - 1 ? <hr /> : null}
+          </div>
+        ))}
+      </div>
     </div>
   )
 }