remove level headers

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

web-app/src/containers/Tutorial/components/Level.tsx

@@ -7,7 +7,6 @@ import Icon from '../../../components/Icon'
 import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
 import ProcessMessages from '../../../components/ProcessMessages'
-import NuxTutorial from '../../../components/NewUserExperience/NuxTutorial'
 import ContentMenu from './ContentMenu'
 import Step from './Step'
 import { DISPLAY_RUN_TEST_BUTTON } from '../../../environment'
@@ -43,6 +42,10 @@ const styles = {
     padding: '0rem 1rem',
     paddingBottom: '1rem',
   },
+  separator: {
+    height: 0,
+    borderBottom: '1px solid rgba(0, 0, 0, 0.1)',
+  },
   tasks: {},
   steps: {
     padding: '1rem 1rem',
@@ -171,30 +174,30 @@ const Level = ({
 
   return (
     <div css={styles.page}>
+      <div css={styles.header}>
+        <Dropdown
+          trigger={
+            <a css={styles.learn}>
+              {tutorial.summary.title} <Icon type="arrow-down" size="xxs" />
+            </a>
+          }
+          triggerType="click"
+        >
+          {menu}
+        </Dropdown>
+      </div>
       <div css={styles.content}>
-        <div css={styles.header}>
-          <Dropdown
-            trigger={
-              <a css={styles.learn}>
-                Learn <Icon type="arrow-down" size="xxs" />
-              </a>
-            }
-            triggerType="click"
-          >
-            {menu}
-          </Dropdown>
-        </div>
-
         {content.length ? (
           <div css={styles.text}>
             <h2 css={styles.title}>{title}</h2>
             <Markdown>{content || ''}</Markdown>
           </div>
         ) : null}
 
+        {content.length && steps.length ? <div css={styles.separator} /> : null}
+
         {steps.length ? (
           <div css={styles.tasks}>
-            <div css={styles.header}>Tasks</div>
             <div css={styles.steps}>
               {steps.map((step: (TT.Step & { status: T.ProgressStatus }) | null, stepIndex: number) => {
                 if (!step) {
@@ -233,10 +236,6 @@ const Level = ({
           </div>
         )}
 
-        <div css={styles.nux}>
-          <NuxTutorial onLoadSolution={onLoadSolution} />
-        </div>
-
         <div css={styles.footer}>
           {DISPLAY_RUN_TEST_BUTTON && status !== 'COMPLETE' ? (
             <Button type="primary" onClick={onRunTest} disabled={processes.length > 0}>

web-app/stories/Level.stories.tsx

@@ -14,6 +14,10 @@ type ModifiedLevel = TT.Level & {
 }
 
 const tutorial: Partial<TT.Tutorial> = {
+  summary: {
+    title: 'Example Title',
+    description: 'An example description',
+  },
   levels: [
     {
       id: '1',
@@ -96,7 +100,10 @@ storiesOf('Level', module)
   ))
   .add('No steps', () => (
     <Level
-      tutorial={{ levels: [{ id: '1', title: 'No Step Level', content: 'No steps in this one', steps: [] }] }}
+      tutorial={{
+        summary: tutorial.summary,
+        levels: [{ id: '1', title: 'No Step Level', content: 'No steps in this one', steps: [] }],
+      }}
       index={0}
       status="ACTIVE"
       position={{ levelId: '1', stepId: null, complete: false }}
@@ -111,7 +118,10 @@ storiesOf('Level', module)
   ))
   .add('No lesson', () => (
     <Level
-      tutorial={{ levels: [{ id: '1', title: 'No Step Level', content: '', steps: tutorial.levels[0].steps }] }}
+      tutorial={{
+        summary: tutorial.summary,
+        levels: [{ id: '1', title: 'No Step Level', content: '', steps: tutorial.levels[0].steps }],
+      }}
       index={0}
       status="ACTIVE"
       position={{ levelId: '1', stepId: '1.1', complete: false }}