Timer

components/Timer.js

@@ -0,0 +1,14 @@
+import React from 'react'
+import PropTypes from 'prop-types'
+
+const Timer = ({ countdown }) => (
+  <div>
+    <span>{countdown}</span>
+  </div>
+)
+
+Timer.propTypes = {
+  countdown: PropTypes.number,
+}
+
+export default Timer

components/Timer.test.js

@@ -0,0 +1,10 @@
+import React from 'react'
+import { shallow } from 'enzyme'
+import Timer from './Timer'
+
+describe('Timer', () => {
+  it('should render a timer', () => {
+    const wrapper = shallow(<Timer countdown={42} />)
+    expect(wrapper.text()).toEqual('42')
+  })
+})

package.json

@@ -16,6 +16,7 @@
     "passport-github2": "^0.1.11",
     "pg": "^7.4.1",
     "polished": "^1.9.0",
+    "prop-types": "^15.6.0",
     "react": "^16.2.0",
     "react-dom": "^16.2.0",
     "styled-components": "^2.4.0"

stories/index.js

@@ -1,7 +1,7 @@
 import React from 'react'
 import { storiesOf } from '@storybook/react'
-// import { action } from '@storybook/addon-actions'
 import ProgressBar from '../components/ProgressBar'
+import Timer from '../components/Timer'
 
 storiesOf('ProgressBar', module)
   .add('0/20', () => <ProgressBar currentQuestion={0} />)
@@ -12,3 +12,5 @@ storiesOf('ProgressBar', module)
   .add('Large', () => <ProgressBar size={800} />)
   .add('Without ScoreBox', () => <ProgressBar scoreBox={false} />)
   .add('Red', () => <ProgressBar color="#BD4932" />)
+
+storiesOf('Timer', module).add('Basic', () => <Timer countdown={15} />)