🔀 Merge pull request #57 from alexlee-dev/feature/item-timer-heading

✨ Add ItemTimer heading
actuallyReallyAlex · Aug 24, 2019 · de95fb9 · de95fb9
2 parents a8d4890 + 5e37e33
commit de95fb9
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 4 deletions.
diff --git a/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap b/src/__tests__/components/__snapshots__/ItemTimer.test.js.snap
@@ -2,8 +2,17 @@
 
 exports[`<ItemTimer /> Should render the <ItemTimer /> component. 1`] = `
 <DocumentFragment>
-  <span>
-    0 minutes 0 seconds
-  </span>
+  <div
+    class="StyledBox-sc-13pk1d4-0 IRSNj"
+  >
+    <h3
+      class="StyledHeading-sc-1rdh4aw-0 ftOecI"
+    >
+      Item Timer
+    </h3>
+    <span>
+      0 minutes 0 seconds
+    </span>
+  </div>
 </DocumentFragment>
 `;
diff --git a/src/components/ItemTimer.js b/src/components/ItemTimer.js
@@ -7,6 +7,7 @@ import {
   refreshItems
 } from '../redux/actions/world'
 import { createDuration } from '../util'
+import { Box, Heading } from 'grommet'
 
 const ItemTimer = ({ handleTimerStarted, handleTimerStopped, world }) => {
   const { isTimerRunning } = world
@@ -35,7 +36,12 @@ const ItemTimer = ({ handleTimerStarted, handleTimerStopped, world }) => {
 
   useEffect(startTimer, [isTimerRunning])
 
-  return <span>{timeLeft}</span>
+  return (
+    <Box>
+      <Heading level="3">Item Timer</Heading>
+      <span>{timeLeft}</span>
+    </Box>
+  )
 }
 
 ItemTimer.propTypes = {