fixup! feat(Timeline): Migrate to styled-components

Royal-Navy · Sep 23, 2020 · cc36220 · cc36220
1 parent 29211b8
commit cc36220
Show file tree

Hide file tree

Showing 2 changed files with 105 additions and 66 deletions.
diff --git a/packages/css-framework/src/components/_timeline.scss b/packages/css-framework/src/components/_timeline.scss
@@ -23,11 +23,11 @@ $timeline-row-header-width: 16rem;
 //   margin-left: $timeline-row-header-width;
 // }
 
-.timeline__main {
-  width: auto;
-  height: auto;
-  min-height: 4rem;
-}
+// .timeline__main {
+//   width: auto;
+//   height: auto;
+//   min-height: 4rem;
+// }
 
 .timeline__today-marker-wrapper {
   position: relative;
@@ -51,18 +51,18 @@ $timeline-row-header-width: 16rem;
   }
 }
 
-.timeline__empty {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  min-height: inherit;
+// .timeline__empty {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   min-height: inherit;
 
-  span {
-    background-color: f.color("neutral", "white");
-    padding: f.spacing("2");
-    @include m.z-index("body", 1);
-  }
-}
+//   span {
+//     background-color: f.color("neutral", "white");
+//     padding: f.spacing("2");
+//     @include m.z-index("body", 1);
+//   }
+// }
 
 // .timeline__navigation {
 //   position: absolute;
@@ -216,27 +216,27 @@ $timeline-row-header-width: 16rem;
 //   position: relative;
 // }
 
-.timeline__row-weeks-wrapper {
-  position: relative;
-}
+// .timeline__row-weeks-wrapper {
+//   position: relative;
+// }
 
-.timeline__row-weeks,
-.timeline__row-weeks--renderDefault {
-  position: absolute;
-  top: 0;
-  left: 0;
-  white-space: nowrap;
-}
+// .timeline__row-weeks,
+// .timeline__row-weeks--renderDefault {
+//   position: absolute;
+//   top: 0;
+//   left: 0;
+//   white-space: nowrap;
+// }
 
-.timeline__row-week--renderDefault {
-  display: inline-block;
-  height: 100vh;
-  background-color: $timeline-bg-color;
-}
+// .timeline__row-week--renderDefault {
+//   display: inline-block;
+//   height: 100vh;
+//   background-color: $timeline-bg-color;
+// }
 
-.timeline__row-week--renderDefault.timeline__row-week--alt {
-  background-color: $timeline-alt-bg-color;
-}
+// .timeline__row-week--renderDefault.timeline__row-week--alt {
+//   background-color: $timeline-alt-bg-color;
+// }
 
 // .timeline__event--renderDefault {
 //   position: absolute;

diff --git a/packages/react-component-library/src/components/Timeline/TimelineRows.tsx b/packages/react-component-library/src/components/Timeline/TimelineRows.tsx
@@ -1,13 +1,23 @@
 import React from 'react'
-import classNames from 'classnames'
+import styled from 'styled-components'
 import { differenceInDays, endOfWeek, max, min } from 'date-fns'
+import {
+  ColorNeutralWhite,
+  Spacing2,
+  ZindexBody,
+} from '@royalnavy/design-tokens'
 
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { TimelineRowProps } from '.'
 import { TimelineContext } from './context'
 import { withKey } from '../../helpers'
 import { formatPx, isOdd } from './helpers'
-import { NO_DATA_MESSAGE, WEEK_START } from './constants'
+import {
+  NO_DATA_MESSAGE,
+  WEEK_START,
+  TIMELINE_BG_COLOR,
+  TIMELINE_ALT_BG_COLOR,
+} from './constants'
 
 type TimelineRowsChildrenType =
   | React.ReactElement<TimelineRowProps>
@@ -23,50 +33,76 @@ export interface TimelineRowsProps extends ComponentWithClass {
   ) => React.ReactElement
 }
 
+const StyledNoData = styled.div`
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: inherit;
+
+  span {
+    background-color: ${ColorNeutralWhite};
+    padding: ${Spacing2};
+    z-index: ${Number(ZindexBody) + 1};
+  }
+`
+
 const noData = (
-  <div className="timeline__empty" data-testid="timeline-no-data" role="row">
+  <StyledNoData role="row" data-testid="timeline-no-data">
     <span role="cell">{NO_DATA_MESSAGE}</span>
-  </div>
+  </StyledNoData>
 )
 
+interface TimelineStyledRowWeekProps {
+  isOddNumber: boolean
+  marginLeft: string
+  width: string
+}
+
+const StyledTimelineRowWeek = styled.div<TimelineStyledRowWeekProps>`
+  display: inline-block;
+  height: 100vh;
+  background-color: ${({ isOddNumber }) =>
+    isOddNumber ? TIMELINE_BG_COLOR : TIMELINE_ALT_BG_COLOR};
+`
+
 function renderDefaultColumns(
   index: number,
   isOddNumber: boolean,
   offsetPx: string,
   widthPx: string
 ) {
-  const classes = classNames(
-    'timeline__row-week',
-    'timeline__row-week--renderDefault',
-    {
-      'timeline__row-week--alt': isOddNumber,
-    }
-  )
-
   return (
-    <div
-      className={classes}
-      style={{
-        marginLeft: offsetPx,
-        width: widthPx,
-      }}
+    <StyledTimelineRowWeek
+      isOddNumber={isOddNumber}
+      marginLeft={offsetPx}
+      width={widthPx}
     />
   )
 }
 
+const StyledTimelineMain = styled.div`
+  width: auto;
+  height: auto;
+  min-height: 4rem;
+`
+
+const StyledTimelineRowWeeksWrapper = styled.div`
+  position: relative;
+`
+
+const StyledTimelineRowWeeks = styled.div`
+  position: absolute;
+  top: 0;
+  left: 0;
+  white-space: nowrap;
+`
+
 export const TimelineRows: React.FC<TimelineRowsProps> = ({
   children,
   className,
   renderColumns,
 }) => {
   const hasChildren = React.Children.count(children) > 0
-  const rowWeeksWrapperClasses = classNames('timeline__row-weeks-wrapper')
-  const rowWeeksClasses = classNames('timeline__row-weeks', {
-    'timeline__row-weeks--renderDefault': !renderColumns,
-  })
-  const mainClasses = classNames('timeline__main', className, {
-    'timeline__main--renderDefault': !renderColumns,
-  })
 
   return (
     <>
@@ -79,9 +115,8 @@ export const TimelineRows: React.FC<TimelineRowsProps> = ({
               options: { dayWidth },
             },
           }) => (
-            <div className={rowWeeksWrapperClasses}>
-              <div
-                className={rowWeeksClasses}
+            <StyledTimelineRowWeeksWrapper>
+              <StyledTimelineRowWeeks
                 data-testid="timeline-columns"
                 role="presentation"
               >
@@ -117,15 +152,19 @@ export const TimelineRows: React.FC<TimelineRowsProps> = ({
                     startDate.toString()
                   )
                 })}
-              </div>
-            </div>
+              </StyledTimelineRowWeeks>
+            </StyledTimelineRowWeeksWrapper>
           )}
         </TimelineContext.Consumer>
       )}
 
-      <div className={mainClasses} data-testid="timeline-rows" role="rowgroup">
+      <StyledTimelineMain
+        className={className}
+        data-testid="timeline-rows"
+        role="rowgroup"
+      >
         {hasChildren ? children : noData}
-      </div>
+      </StyledTimelineMain>
     </>
   )
 }