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

Royal-Navy · Sep 22, 2020 · 0c8323f · 0c8323f
1 parent c6d227e
commit 0c8323f
Show file tree

Hide file tree

Showing 2 changed files with 77 additions and 45 deletions.
diff --git a/packages/css-framework/src/components/_timeline.scss b/packages/css-framework/src/components/_timeline.scss
@@ -236,35 +236,35 @@ $timeline-row-header-width: 16rem;
   background-color: $timeline-alt-bg-color;
 }
 
-.timeline__event--renderDefault {
-  position: absolute;
-  top: 50%;
-  left: 0;
-  width: 4.5rem;
-  transform: translateY(-50%);
-  display: inline-flex;
-  flex-direction: column;
-  padding: f.spacing("2") 0;
-  background-color: $timeline-bg-color;
-  overflow: visible;
-  @include m.z-index("body", 2);
-}
+// .timeline__event--renderDefault {
+//   position: absolute;
+//   top: 50%;
+//   left: 0;
+//   width: 4.5rem;
+//   transform: translateY(-50%);
+//   display: inline-flex;
+//   flex-direction: column;
+//   padding: f.spacing("2") 0;
+//   background-color: $timeline-bg-color;
+//   overflow: visible;
+//   @include m.z-index("body", 2);
+// }
 
-.timeline__event--renderDefault.timeline__event--alt {
-  background-color: $timeline-alt-bg-color;
-}
+// .timeline__event--renderDefault.timeline__event--alt {
+//   background-color: $timeline-alt-bg-color;
+// }
 
-.timeline__event--renderDefault .timeline__event-title {
-  font-size: f.font-size("s");
-  font-weight: 400;
-  color: f.color("neutral", "600");
-  white-space: nowrap;
-}
+// .timeline__event--renderDefault .timeline__event-title {
+//   font-size: f.font-size("s");
+//   font-weight: 400;
+//   color: f.color("neutral", "600");
+//   white-space: nowrap;
+// }
 
-.timeline__event--renderDefault .timeline__event-bar {
-  display: inline-block;
-  background-color: f.color("success", "500");
-  border-radius: 4px;
-  height: 16px;
-  min-width: 1rem;
-}
+// .timeline__event--renderDefault .timeline__event-bar {
+//   display: inline-block;
+//   background-color: f.color("success", "500");
+//   border-radius: 4px;
+//   height: 16px;
+//   min-width: 1rem;
+// }
diff --git a/packages/react-component-library/src/components/Timeline/TimelineEvent.tsx b/packages/react-component-library/src/components/Timeline/TimelineEvent.tsx
@@ -1,8 +1,15 @@
 import React from 'react'
-import classNames from 'classnames'
+import styled from 'styled-components'
 import { format } from 'date-fns'
+import {
+  ZindexBody,
+  Spacing2,
+  TypographyS,
+  ColorNeutral600,
+  ColorSuccess500,
+} from '@royalnavy/design-tokens'
 
-import { ACCESSIBLE_DATE_FORMAT } from './constants'
+import { ACCESSIBLE_DATE_FORMAT, TIMELINE_BG_COLOR } from './constants'
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { useTimelinePosition } from './hooks/useTimelinePosition'
 
@@ -30,31 +37,56 @@ export type TimelineEventProps =
   | TimelineEventWithRenderContentProps
   | TimelineEventWithChildrenProps
 
+const StyledTimelineEvent = styled.div`
+  position: absolute;
+  top: 50%;
+  left: 0;
+  width: 4.5rem;
+  transform: translateY(-50%);
+  display: inline-flex;
+  flex-direction: column;
+  padding: ${Spacing2} 0;
+  background-color: ${TIMELINE_BG_COLOR};
+  overflow: visible;
+  z-index: ${Number(ZindexBody) + 2};
+`
+
+const EventTitle = styled.span`
+  font-size: ${TypographyS};
+  font-weight: 400;
+  color: ${ColorNeutral600};
+  white-space: nowrap;
+`
+
+interface EventBarProps {
+  width: string
+}
+
+const EventBar = styled.div<EventBarProps>`
+  display: inline-block;
+  background-color: ${ColorSuccess500};
+  border-radius: 4px;
+  height: 16px;
+  min-width: 1rem;
+  width: ${({ width }) => width};
+`
+
 function renderDefault(
   children: string,
   offsetPx: string,
   startDate: Date,
   widthPx: string
 ) {
-  const classes = classNames(
-    'timeline__event',
-    'timeline__event--renderDefault'
-  )
-
   return (
-    <div
-      className={classes}
+    <StyledTimelineEvent
       style={{ left: offsetPx }}
       data-testid="timeline-event"
     >
-      <span
-        className="timeline__event-title"
-        data-testid="timeline-event-title"
-      >
+      <EventTitle data-testid="timeline-event-title">
         {children || `Task ${format(new Date(startDate), 'dd/mm/yyyy')}`}
-      </span>
-      <div className="timeline__event-bar" style={{ width: widthPx }} />
-    </div>
+      </EventTitle>
+      <EventBar width={widthPx} />
+    </StyledTimelineEvent>
   )
 }