diff --git a/web-app/.storybook/addons.ts b/web-app/.storybook/addons.ts index 7e5cdab9..514e2dbe 100644 --- a/web-app/.storybook/addons.ts +++ b/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' \ No newline at end of file +import '@storybook/addon-links/register' \ No newline at end of file diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index d8c9e71a..75deebf9 100644 --- a/web-app/src/App.tsx +++ b/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 = () => ( diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx new file mode 100644 index 00000000..41178f8f --- /dev/null +++ b/web-app/src/containers/Tutorial/LevelPage/Level/Step/index.tsx @@ -0,0 +1,56 @@ +import * as React from 'react' +import * as T from 'typings' +import { Button, Checkbox } from '@alifd/next' + +import Markdown from '../../../../../components/Markdown' + +interface Props { + order: number + content: string + status: T.ProgressStatus + onLoadSolution(): void +} + +const styles = { + card: { + display: 'grid', + gridTemplateColumns: '25px 1fr', + padding: '1rem 1rem 1rem 0.2rem', + }, + 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 = props.status === 'ACTIVE' && !loadedSolution + + return ( +
+
+ { + /* do nothing */ + }} + /> +
+
+ {props.content || ''} +
+
{showLoadSolution && }
+
+ ) +} + +export default Step diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx deleted file mode 100644 index 9870a21b..00000000 --- a/web-app/src/containers/Tutorial/LevelPage/Level/StepDescription/index.tsx +++ /dev/null @@ -1,43 +0,0 @@ -import * as React from 'react' -import Markdown from '../../../../../components/Markdown' -import { Button } from '@alifd/next' - -const styles = { - // active: { - // backgroundColor: '#e6f7ff', - // }, - card: { - padding: '0 1rem 1rem 0.5rem', - }, -} - -interface Props { - text?: string | null - mode: 'INCOMPLETE' | 'ACTIVE' | 'COMPLETE' - onLoadSolution(): void -} - -const StepDescription = ({ text, mode, onLoadSolution }: Props) => { - const [loadedSolution, setLoadedSolution] = React.useState() - - const onClickHandler = () => { - if (!loadedSolution) { - setLoadedSolution(true) - onLoadSolution() - } - } - - if (mode === 'INCOMPLETE') { - return null - } - - const showLoadSolution = mode === 'ACTIVE' && !loadedSolution - return ( -
- {text || ''} - {showLoadSolution && } -
- ) -} - -export default StepDescription diff --git a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx index 17c113e0..586f1681 100644 --- a/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx +++ b/web-app/src/containers/Tutorial/LevelPage/Level/index.tsx @@ -1,10 +1,10 @@ -import { Button, Step } from '@alifd/next' +import { Button } from '@alifd/next' import * as React from 'react' import * as G from 'typings/graphql' import * as T from 'typings' +import Step from './Step' import Markdown from '../../../../components/Markdown' -import StepDescription from './StepDescription' const styles = { card: { @@ -56,11 +56,6 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => { throw new Error('No Stage steps found') } - // grab the active step - const activeIndex: number = level.steps.findIndex((step: G.Step & { status: T.ProgressStatus } | null) => { - return step && step.status === 'ACTIVE' - }) - return (
@@ -76,20 +71,17 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
Tasks
- - {level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => { - if (!step) { - return null - } - return ( - } - /> - ) - })} - + {level.steps.map((step: G.Step & { status: T.ProgressStatus } | null, index: number) => { + if (!step) { + return null + } + return + })}
diff --git a/web-app/src/styles/index.css b/web-app/src/styles/index.css index 25961324..3820d1aa 100644 --- a/web-app/src/styles/index.css +++ b/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 +} \ No newline at end of file diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx index 522c23be..91407222 100644 --- a/web-app/stories/Step.stories.tsx +++ b/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', () => ( - ( + )) .add('Step Markdown', () => ( - ))