Feb 2, 2020 · Feb 2, 2020 · Feb 2, 2020
diff --git a/web-app/src/components/StepHelp/index.tsx b/web-app/src/components/StepHelp/index.tsx
 import { Balloon } from '@alifd/next'
 import * as React from 'react'
 import { css, jsx } from '@emotion/core'
 import Icon from '../Icon'
 import Button from '../Button'

 const styles = {
 }

 const StepHelp = (props: Props) => {
  const [visible, setVisible] = React.useState(false)
  // TODO extract or replace load solution
  const [loadedSolution, setLoadedSolution] = React.useState()
  const onClickHandler = () => {
    if (!loadedSolution) {
      setLoadedSolution(true)
      props.onLoadSolution()
      setVisible(false)
    }
  }
  const promptLeft = <Button css={styles.iconButton}>i</Button>
  const promptLeft = (
    <Button css={styles.iconButton} onClick={() => setVisible(!visible)}>
      <Icon type="help" />
    </Button>
  )
  return (
    <Balloon trigger={promptLeft} align="l" alignEdge triggerType="click" css={{ width: 150 }} closable={false}>
    <Balloon
      trigger={promptLeft}
      align="l"
      alignEdge
      triggerType="click"
      css={{ width: 150 }}
      closable
      visible={visible}
      onClose={() => setVisible(false)}
    >
      <div>
        <h4 css={styles.balloonTitle}>Stuck?</h4>
        <div css={styles.balloonOptions}>
diff --git a/web-app/src/containers/Overview/OverviewPage.tsx b/web-app/src/containers/Overview/OverviewPage.tsx
    display: 'flex' as 'flex',
    flexDirection: 'column' as 'column',
    width: '100%',
    paddingBottom:footerHeight,
    paddingBottom:'5rem',
  },
  summary: {
    padding: '0rem 1rem 1rem 1rem',
diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx
 storiesOf('Level', module)
  .addDecorator(SideBarDecorator)
  .addDecorator(withKnobs)
  .add('Step', () => (
    <Step
      order={1}
      content={text('text', stepText)}
      status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'COMPLETE', 'step')}
      onLoadSolution={action('onLoadSolution')}
    />
  .add('Active Step', () => (
    <Step order={1} content={text('text', stepText)} status="ACTIVE" onLoadSolution={action('onLoadSolution')} />
  ))
  .add('Step Markdown', () => (
    <Step
Original file line number	Diff line number	Diff line change
		@@ -1,6 +1,7 @@
		import { Balloon } from '@alifd/next'
		import * as React from 'react'
		import { css, jsx } from '@emotion/core'
		import Icon from '../Icon'
		import Button from '../Button'

		const styles = {
Expand DownExpand Up		@@ -28,17 +29,32 @@ interface Props {
		}

		const StepHelp = (props: Props) => {
		const [visible, setVisible] = React.useState(false)
		// TODO extract or replace load solution
		const [loadedSolution, setLoadedSolution] = React.useState()
		const onClickHandler = () => {
		if (!loadedSolution) {
		setLoadedSolution(true)
		props.onLoadSolution()
		setVisible(false)
		}
		}
		const promptLeft = <Button css={styles.iconButton}>i</Button>
		const promptLeft = (
		<Button css={styles.iconButton} onClick={() => setVisible(!visible)}>
		<Icon type="help" />
		</Button>
		)
		return (
		<Balloon trigger={promptLeft} align="l" alignEdge triggerType="click" css={{ width: 150 }} closable={false}>
		<Balloon
		trigger={promptLeft}
		align="l"
		alignEdge
		triggerType="click"
		css={{ width: 150 }}
		closable
		visible={visible}
		onClose={() => setVisible(false)}
		>
		<div>
		<h4 css={styles.balloonTitle}>Stuck?</h4>
		<div css={styles.balloonOptions}>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -13,7 +13,7 @@ const styles = {
		display: 'flex' as 'flex',
		flexDirection: 'column' as 'column',
		width: '100%',
		paddingBottom:footerHeight,
		paddingBottom:'5rem',
		},
		summary: {
		padding: '0rem 1rem 1rem 1rem',
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -31,13 +31,8 @@ const paragraphText = `Markdown included \`code\`, bold, & _italics_.
		storiesOf('Level', module)
		.addDecorator(SideBarDecorator)
		.addDecorator(withKnobs)
		.add('Step', () => (
		<Step
		order={1}
		content={text('text', stepText)}
		status={select('mode', { ACTIVE: 'ACTIVE', COMPLETE: 'COMPLETE', INCOMPLETE: 'INCOMPLETE' }, 'COMPLETE', 'step')}
		onLoadSolution={action('onLoadSolution')}
		/>
		.add('Active Step', () => (
		<Step order={1} content={text('text', stepText)} status="ACTIVE" onLoadSolution={action('onLoadSolution')} />
		))
		.add('Step Markdown', () => (
		<Step
Expand Down