Merge pull request #14 from ShMcK/feature/styles

Feature/styles

Author: ShMcK

web-app/src/App.tsx

@@ -1,10 +1,10 @@
 import * as React from 'react'
 import * as CR from 'typings'
 
-import Debugger from './components/Debugger'
+// import Debugger from './components/Debugger'
 import Routes from './Routes'
+import DataContext, { initialData, initialState } from './utils/DataContext'
 import { send } from './utils/vscode'
-import DataContext, { initialState, initialData } from './utils/DataContext'
 
 interface ReceivedEvent {
   data: CR.Action

web-app/src/components/Divider.tsx

@@ -0,0 +1,12 @@
+import * as React from 'react'
+
+const styles = {
+  divider: {
+    backgroundColor: '#e8e8e8',
+    height: '0.1rem',
+  },
+}
+
+const Divider = () => <div style={styles.divider} />
+
+export default Divider

web-app/src/components/Level/LevelStageSummary.tsx

@@ -0,0 +1,51 @@
+import { Button } from '@alifd/next'
+import * as React from 'react'
+import CC from '../../../../typings/context'
+
+import Markdown from '../Markdown'
+
+const styles = {
+  active: {
+    backgroundColor: '#e6f7ff',
+  },
+  card: {
+    padding: '0.5rem 1rem',
+  },
+  completed: {
+    backgroundColor: '#f6ffed',
+  },
+  disabled: {
+    // backgroundColor: 'blue',
+  },
+  options: {},
+  title: {
+    margin: 0,
+  },
+}
+
+interface Props {
+  stage: CC.StageWithStatus
+  onNext(): void
+}
+
+const LevelStageSummary = (props: Props) => {
+  const { stage, onNext } = props
+  const { complete, active } = stage.status
+  const cardStyle = {
+    ...styles.card,
+    ...(active ? styles.active : styles.disabled),
+    ...(complete ? styles.completed : {}),
+  }
+  return (
+    <div style={cardStyle}>
+      <h3 style={styles.title}>{stage.content.title}</h3>
+      <Markdown>{stage.content.text}</Markdown>
+      <div style={styles.options}>
+        {active && <Button onClick={onNext}>Continue</Button>}
+        {complete && <div>Complete</div>}
+      </div>
+    </div>
+  )
+}
+
+export default LevelStageSummary

web-app/src/components/Level/index.tsx

@@ -1,48 +1,54 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Divider from '../Divider'
 import Markdown from '../Markdown'
+import LevelStageSummary from './LevelStageSummary'
 
 const styles = {
-  card: {
-    // width: '20rem',
+  card: {},
+  content: {
+    padding: '0rem 1rem',
+    paddingBottom: '1rem',
   },
-  disabled: {
-    backgroundColor: 'grey',
+  list: {
+    padding: '0rem',
   },
+  options: {
+    padding: '0rem 1rem',
+  },
+  title: {},
 }
 
 interface Props {
   level: CR.TutorialLevel
-  onNext(): void
-  onBack(): void
   stages: {
     [stageId: string]: any // CC.StageWithStatus
   }
+  onNext(): void
+  onBack(): void
 }
 
 const Level = ({ level, stages, onNext, onBack }: Props) => {
   const { title, text } = level.content
   return (
-    <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
-      <Markdown>{text}</Markdown>
-      <div>
+    <div style={styles.card}>
+      <div style={styles.content}>
+        <h2 style={styles.title}>{title}</h2>
+        <Markdown>{text}</Markdown>
+      </div>
+      <Divider />
+      <div style={styles.list}>
         {level.stageList.map((stageId: string) => {
           const stage = stages[stageId]
-          const unavailable = !stage.status.complete && !stage.status.active
-          return (
-            <div key={stageId} style={unavailable ? styles.disabled : {}}>
-              <h3>{stage.content.title}</h3>
-              <p>{stage.content.text}</p>
-              {stage.status.active && <Button onClick={onNext}>Continue</Button>}
-              {stage.status.complete && <div>Complete</div>}
-            </div>
-          )
+          return <LevelStageSummary key={stageId} stage={stage} onNext={onNext} />
         })}
       </div>
-      <Button onClick={onBack}>Back</Button>
-    </Card>
+      <div style={styles.options}>
+        <Button onClick={onBack}>Back</Button>
+      </div>
+    </div>
   )
 }
 

web-app/src/components/Stage/index.tsx

@@ -1,42 +1,56 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
+import Divider from '../Divider'
 import Markdown from '../Markdown'
 import Step from '../Step'
 
 const styles = {
   card: {
-    // width: '20rem',
+    padding: 0,
   },
+  content: {
+    padding: '0rem 1rem',
+    paddingBottom: '1rem',
+  },
+  options: {
+    padding: '0rem 1rem',
+  },
+  title: {},
 }
 
 interface Props {
   stage: CR.TutorialStage
   steps: {
     [stepId: string]: any // CC.Step
   }
-  onNextStage(): void
   complete: boolean
+  onNextStage(): void
 }
 
 const Stage = ({ stage, steps, onNextStage, complete }: Props) => {
   const { title, text } = stage.content
   return (
-    <Card style={styles.card} title={title} showTitleBullet={false} contentHeight="auto">
-      <Markdown>{text}</Markdown>
+    <div style={styles.card}>
+      <div style={styles.content}>
+        <h2 style={styles.title}>{title}</h2>
+        <Markdown>{text}</Markdown>
+      </div>
+      <Divider />
       <div>
         {stage.stepList.map((stepId: string) => {
           const step = steps[stepId]
           return <Step key={stepId} content={step.content} status={step.status} />
         })}
       </div>
+
       {complete && (
-        <div>
+        <div style={styles.options}>
           <Button onClick={onNextStage}>Continue</Button>
         </div>
       )}
-    </Card>
+    </div>
   )
 }
 

web-app/src/components/Step/index.tsx

@@ -5,19 +5,24 @@ import CR from 'typings'
 import Markdown from '../Markdown'
 
 const styles = {
+  active: {
+    backgroundColor: '#e6f7ff',
+  },
   card: {
-    display: 'flex',
-    flexDirection: 'row' as 'row',
-    margin: '1rem',
+    borderRadius: '0.3rem',
+    display: 'grid',
+    gridTemplateAreas: 'CheckboxMargin Content',
+    gridTemplateColumns: '2rem 1fr',
+    gridTemplateRows: '1fr',
+    padding: '1rem',
   },
   left: {
-    width: '2rem',
+    justifySelf: 'center',
+    paddingTop: '0.8rem',
   },
   right: {
-    flex: 1,
-  },
-  active: {
-    backgroundColor: 'yellow',
+    padding: '0.2rem',
+    paddingTop: 0,
   },
 }
 

web-app/src/components/Summary/index.tsx

@@ -1,11 +1,18 @@
+import { Button } from '@alifd/next'
 import * as React from 'react'
-import { Button, Card } from '@alifd/next'
 import CR from 'typings'
 
 const styles = {
   card: {
     // width: '20rem',
   },
+  content: {
+    padding: '0rem 1rem',
+  },
+  options: {
+    padding: '1rem',
+  },
+  title: {},
 }
 
 interface Props {
@@ -16,10 +23,15 @@ interface Props {
 const Summary = ({ data, onNext }: Props) => {
   const { summary } = data
   return (
-    <Card style={styles.card} title={summary.title} showTitleBullet={false} contentHeight="auto">
-      <p>{summary.description}</p>
-      <Button onClick={() => onNext()}>Continue</Button>
-    </Card>
+    <div style={styles.card}>
+      <div style={styles.content}>
+        <h2 style={styles.title}>{summary.title}</h2>
+        <p>{summary.description}</p>
+      </div>
+      <div style={styles.options}>
+        <Button onClick={() => onNext()}>Continue</Button>
+      </div>
+    </div>
   )
 }
 

web-app/stories/Level.stories.tsx

@@ -6,39 +6,55 @@ import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
 import Level from '../src/components/Level'
-import demo from './data/basic'
 
 storiesOf('Tutorial SideBar', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Level', () => (
     <Level
-      level={object('level', demo.data.levels.level1Id)}
+      level={object('level', {
+        content: {
+          text: 'A description of this stage',
+          title: 'Sum Level',
+        },
+        stageList: ['stage1Id', 'stage2Id', 'stage3Id'],
+      })}
       stages={object('stages', {
         stage1Id: {
-          stepList: [],
           content: {
-            title: 'Stage 1',
             text: 'some description',
+            title: 'Stage 1',
           },
           status: {
             active: false,
             complete: true,
           },
+          stepList: [],
         },
         stage2Id: {
-          stepList: [],
           content: {
-            title: 'Stage 2',
             text: 'some description',
+            title: 'Stage 2',
           },
           status: {
             active: true,
             complete: false,
           },
+          stepList: [],
+        },
+        stage3Id: {
+          content: {
+            text: 'some description',
+            title: 'Stage 3',
+          },
+          status: {
+            active: false,
+            complete: false,
+          },
+          stepList: [],
         },
       })}
-      onStageSelect={linkTo('Tutorial SideBar', 'Stage')}
+      onNext={linkTo('Tutorial SideBar', 'Stage')}
       onBack={linkTo('TUtorial SideBar', 'Summary')}
     />
   ))

web-app/stories/Summary.stories.tsx

@@ -1,22 +1,22 @@
 import React from 'react'
 
-import { storiesOf } from '@storybook/react'
+import { object, withKnobs } from '@storybook/addon-knobs'
 import { linkTo } from '@storybook/addon-links'
-import { withKnobs, object } from '@storybook/addon-knobs'
+import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-import demo from './data/basic'
 import Summary from '../src/components/Summary'
+import demo from './data/basic'
 
 storiesOf('Tutorial SideBar', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
   .add('Summary', () => (
     <Summary
       data={object('data', {
-        summary: demo.data.summary,
         levels: demo.data.levels,
+        summary: demo.data.summary,
       })}
-      onLevelSelect={linkTo('Tutorial SideBar', 'Level')}
+      onNext={linkTo('Tutorial SideBar', 'Level')}
     />
   ))