feat(Timeline): Constrain hours blockSize prop

Royal-Navy · Sep 21, 2020 · f9efecd · f9efecd
1 parent 2159107
commit f9efecd
Show file tree

Hide file tree

Showing 4 changed files with 19 additions and 7 deletions.
diff --git a/packages/react-component-library/src/components/Timeline/Timeline.stories.tsx b/packages/react-component-library/src/components/Timeline/Timeline.stories.tsx
@@ -16,6 +16,7 @@ import {
   TimelineDays,
   TimelineSide,
 } from '.'
+import { TIMELINE_BLOCK_SIZE } from './constants'
 
 export default { component: Timeline, title: 'Timeline' } as Meta
 
@@ -139,7 +140,7 @@ export const WithHours = () => (
     <TimelineMonths />
     <TimelineWeeks />
     <TimelineDays />
-    <TimelineHours blockSize={6} />
+    <TimelineHours blockSize={TIMELINE_BLOCK_SIZE.QUARTER_DAY} />
     <TimelineRows>
       <TimelineRow name="Row 1">
         <TimelineEvents>

diff --git a/packages/react-component-library/src/components/Timeline/TimelineHours.tsx b/packages/react-component-library/src/components/Timeline/TimelineHours.tsx
@@ -2,17 +2,22 @@ import React from 'react'
 import classNames from 'classnames'
 
 import { getKey } from '../../helpers'
+import { TIMELINE_BLOCK_SIZE } from './constants'
 import { TimelineContext } from './context'
 import { TimelineHour } from './TimelineHour'
 import { TimelineHeaderRow } from './TimelineHeaderRow'
 
+type BlockSizeType =
+  | typeof TIMELINE_BLOCK_SIZE.QUARTER_DAY
+  | typeof TIMELINE_BLOCK_SIZE.HALF_DAY
+
 export interface TimelineHoursWithRenderContentProps {
-  blockSize?: number
+  blockSize?: BlockSizeType
   render: (width: number, time: string) => React.ReactElement
 }
 
 export interface TimelineHoursWithChildrenProps {
-  blockSize?: number
+  blockSize?: BlockSizeType
   render?: never
 }
 

diff --git a/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx b/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx
@@ -3,7 +3,7 @@ import '@testing-library/jest-dom/extend-expect'
 import { render, RenderResult, fireEvent } from '@testing-library/react'
 import { renderToStaticMarkup } from 'react-dom/server'
 
-import { DEFAULTS, NO_DATA_MESSAGE } from '../constants'
+import { DEFAULTS, NO_DATA_MESSAGE, TIMELINE_BLOCK_SIZE } from '../constants'
 import {
   Timeline,
   TimelineDays,
@@ -732,7 +732,7 @@ describe('Timeline', () => {
           startDate={new Date(2020, 3, 1)}
           today={new Date(2020, 3, 15)}
         >
-          <TimelineHours blockSize={12} />
+          <TimelineHours blockSize={TIMELINE_BLOCK_SIZE.HALF_DAY} />
           <TimelineRows>
             <TimelineRow name="Row 1">
               <TimelineEvents>
@@ -761,7 +761,7 @@ describe('Timeline', () => {
           startDate={new Date(2020, 3, 1)}
           today={new Date(2020, 3, 15)}
         >
-          <TimelineHours blockSize={12} />
+          <TimelineHours blockSize={TIMELINE_BLOCK_SIZE.HALF_DAY} />
           <TimelineRows>
             <TimelineRow name="Row 1">
               <TimelineEvents>

diff --git a/packages/react-component-library/src/components/Timeline/constants.ts b/packages/react-component-library/src/components/Timeline/constants.ts
@@ -4,10 +4,15 @@ const DATE_DAY_FORMAT = 'dd'
 const DATE_MONTH_FORMAT = 'MMMM yyyy'
 const DATE_WEEK_FORMAT = 'dd/MM'
 
+const TIMELINE_BLOCK_SIZE = {
+  QUARTER_DAY: 6,
+  HALF_DAY: 12,
+} as const
+
 const DEFAULTS = {
   DAY_WIDTH: 30,
   RANGE_IN_MONTHS: 3,
-  HOURS_BLOCK_SIZE: 6,
+  HOURS_BLOCK_SIZE: TIMELINE_BLOCK_SIZE.QUARTER_DAY,
 } as const
 
 const NO_DATA_MESSAGE = 'No data available'
@@ -21,5 +26,6 @@ export {
   DATE_WEEK_FORMAT,
   DEFAULTS,
   NO_DATA_MESSAGE,
+  TIMELINE_BLOCK_SIZE,
   WEEK_START
 }