style step checkbox

web-app/.storybook/addons.ts

@@ -1,4 +1,3 @@
 import '@storybook/addon-actions/register'
 import '@storybook/addon-knobs/register'
-import '@storybook/addon-links/register'
-import '@storybook/addon-viewport/register'
+import '@storybook/addon-links/register'

web-app/src/App.tsx

@@ -5,6 +5,7 @@ import ErrorBoundary from './components/ErrorBoundary'
 import client from './services/apollo'
 import Routes from './Routes'
 
+
 const App = () => (
   <ErrorBoundary>
     <ApolloProvider client={client}>

web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx

@@ -13,33 +13,42 @@ interface Props {
 
 const styles = {
   card: {
-		display: 'grid',
-
-    padding: '0 1rem 1rem 0.5rem',
-  },
+    display: 'grid',
+    gridTemplateColumns: '25px 1fr',
+    padding: '1rem 1rem 1rem 0.5rem',
+	},
+	content: {
+		margin: 0
+	}
 }
 
 const Step = (props: Props) => {
+  // TODO: extract or replace load solution
   const [loadedSolution, setLoadedSolution] = React.useState()
-
   const onClickHandler = () => {
     if (!loadedSolution) {
       setLoadedSolution(true)
       props.onLoadSolution()
     }
   }
-
-  const showLoadSolution = status === 'ACTIVE' && !loadedSolution
+  const showLoadSolution = props.status === 'ACTIVE' && !loadedSolution
 
   return (
     <div style={styles.card}>
-      <Checkbox
-        checked={status === 'COMPLETE'}
-        indeterminate={false}
-        disabled={status === 'INCOMPLETE'}
-      />
-      <Markdown>{props.content || ''}</Markdown>
-      {showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}
+      <div>
+        <Checkbox
+          checked={props.status === 'COMPLETE'}
+          indeterminate={false /* TODO: running */}
+          disabled={props.status !== 'COMPLETE' /* TODO: and not running */}
+          onChange={() => {
+            /* do nothing */
+          }}
+        />
+      </div>
+      <div id='content'>
+        <Markdown>{props.content || ''}</Markdown>
+      </div>
+      <div>{showLoadSolution && <Button onClick={onClickHandler}>Load Solution</Button>}</div>
     </div>
   )
 }

web-app/src/styles/index.css

@@ -10,6 +10,6 @@ code {
   font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace;
 }
 
-.hover-select:hover {
-  cursor: pointer;
-}
+p {
+	margin: 0
+}

web-app/stories/Step.stories.tsx

@@ -5,7 +5,7 @@ import { select, text, withKnobs } from '@storybook/addon-knobs'
 import { storiesOf } from '@storybook/react'
 import SideBarDecorator from './utils/SideBarDecorator'
 
-import StepDescription from '../src/containers/Tutorial/LevelPage/Level/StepDescription'
+import Step from '../src/containers/Tutorial/LevelPage/Level/Step'
 
 const stepText =
   'This is a long paragraph of step text intended to wrap around the side after a short period of writing to demonstrate text wrap among other things'
@@ -33,17 +33,19 @@ const paragraphText = `Markdown included \`code\`, *bold*, & _italics_.
 storiesOf('Level', module)
   .addDecorator(SideBarDecorator)
   .addDecorator(withKnobs)
-  .add('Step Description', () => (
-    <StepDescription
-      text={text('text', stepText)}
-      mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
+  .add('Step', () => (
+    <Step
+			order={1}
+      content={text('text', stepText)}
+      status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'COMPLETE', 'step')}
       onLoadSolution={action('onLoadSolution')}
     />
   ))
   .add('Step Markdown', () => (
-    <StepDescription
-      text={text('text', paragraphText)}
-      mode={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
+    <Step
+			order={2}
+      content={text('text', paragraphText)}
+      status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'ACTIVE', 'step')}
       onLoadSolution={action('onLoadSolution')}
     />
   ))