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

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

Hide file tree

Showing 3 changed files with 93 additions and 52 deletions.
diff --git a/packages/css-framework/src/components/_timeline.scss b/packages/css-framework/src/components/_timeline.scss
@@ -176,43 +176,43 @@ $timeline-row-header-width: 16rem;
   font-size: f.font-size("xs");
 }
 
-.timeline__row {
-  display: flex;
-  height: 4rem;
-}
+// .timeline__row {
+//   display: flex;
+//   height: 4rem;
+// }
 
 // .timeline__row--short {
 //   height: 2.5rem;
 // }
 
-.timeline__row-header {
-  min-width: $timeline-row-header-width;
-  position: absolute;
-  left: 0;
-  height: inherit;
-  background-color: f.color("neutral", "white");
-  border-right: f.spacing("px") solid $timeline-border-color;
-  box-shadow: inset 0px 0px 0px 0px $timeline-border-color,
-    5px 0px 5px 0px rgba(0, 0, 0, 0.04);
-  @include m.z-index("body", 3);
-  justify-content: flex-end;
-  display: inline-flex;
-  align-items: center;
-  font-size: f.font-size("m");
-  font-weight: 600;
-  color: f.color("neutral", "600");
-  padding-right: f.spacing("8");
-}
+// .timeline__row-header {
+//   min-width: $timeline-row-header-width;
+//   position: absolute;
+//   left: 0;
+//   height: inherit;
+//   background-color: f.color("neutral", "white");
+//   border-right: f.spacing("px") solid $timeline-border-color;
+//   box-shadow: inset 0px 0px 0px 0px $timeline-border-color,
+//     5px 0px 5px 0px rgba(0, 0, 0, 0.04);
+//   @include m.z-index("body", 3);
+//   justify-content: flex-end;
+//   display: inline-flex;
+//   align-items: center;
+//   font-size: f.font-size("m");
+//   font-weight: 600;
+//   color: f.color("neutral", "600");
+//   padding-right: f.spacing("8");
+// }
 
-.timeline__row-header--header {
-  font-size: f.font-size("s");
-  font-weight: normal;
-  color: f.color("neutral", "400");
-}
+// .timeline__row-header--header {
+//   font-size: f.font-size("s");
+//   font-weight: normal;
+//   color: f.color("neutral", "400");
+// }
 
-.timeline__row-content {
-  position: relative;
-}
+// .timeline__row-content {
+//   position: relative;
+// }
 
 .timeline__row-weeks-wrapper {
   position: relative;

diff --git a/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import styled from 'styled-components'
 
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { TimelineRow } from './TimelineRow'
@@ -9,8 +10,10 @@ interface TimelineHeaderRowProps extends ComponentWithClass {
   renderRowHeader?: (name: string) => React.ReactElement
 }
 
+const StyledTimelineHeaderRow = styled(TimelineRow)``
+
 export const TimelineHeaderRow: React.FC<TimelineHeaderRowProps> = (props) => (
-  <TimelineRow rowHeaderClassName="timeline__row-header--header" {...props} />
+  <StyledTimelineHeaderRow isHeader {...props} />
 )
 
 TimelineHeaderRow.displayName = 'TimelineHeaderRow'
diff --git a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx
@@ -1,52 +1,90 @@
 import React from 'react'
-import classNames from 'classnames'
+import styled from 'styled-components'
+import {
+  SpacingPx,
+  ZindexBody,
+  TypographyS,
+  TypographyM,
+  ColorNeutral400,
+  ColorNeutral600,
+  ColorNeutralWhite,
+  Spacing8,
+} from '@royalnavy/design-tokens'
 
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { TimelineContext, TimelineEventsProps } from '.'
+import { TIMELINE_BORDER_COLOR, TIMELINE_ROW_HEADER_WIDTH } from './constants'
 
 export interface TimelineRowProps extends ComponentWithClass {
   children:
     | React.ReactElement<TimelineEventsProps>
     | React.ReactElement<TimelineEventsProps>[]
   name?: string
   renderRowHeader?: (name: string) => React.ReactElement
-  rowHeaderClassName?: string
+  isHeader: boolean
 }
 
+const StyledTimelineRow = styled.div`
+  display: flex;
+  height: 4rem;
+`
+
+interface RowHeaderProps {
+  isHeader: boolean
+}
+
+const RowHeader = styled.div<RowHeaderProps>`
+  min-width: ${TIMELINE_ROW_HEADER_WIDTH};
+  position: absolute;
+  left: 0;
+  height: inherit;
+  background-color: ${ColorNeutralWhite};
+  border-right: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR};
+  box-shadow: inset 0px 0px 0px 0px ${TIMELINE_BORDER_COLOR},
+    5px 0px 5px 0px rgba(0, 0, 0, 0.04);
+  z-index: ${Number(ZindexBody) + 3};
+  justify-content: flex-end;
+  display: inline-flex;
+  align-items: center;
+  font-size: ${TypographyM};
+  font-weight: 600;
+  color: ${ColorNeutral600};
+  padding-right: ${Spacing8};
+  ${({ isHeader }) =>
+    isHeader &&
+    `
+    font-size: ${TypographyS};
+    font-weight: normal;
+    color: ${ColorNeutral400};
+  `}
+`
+
+const RowContent = styled.div`
+  position: relative;
+`
+
 export const TimelineRow: React.FC<TimelineRowProps> = ({
   children,
-  className,
   name,
   renderRowHeader,
-  rowHeaderClassName,
+  isHeader,
   ...rest
 }) => {
-  const classes = classNames('timeline__row', className)
-  const rowHeaderClasses = classNames(
-    'timeline__row-header',
-    rowHeaderClassName
-  )
-
   return (
     <TimelineContext.Consumer>
       {({ hasSide }) => (
-        <div
-          className={classes}
-          data-testid="timeline-row"
-          role="row"
-          {...rest}
-        >
+        <StyledTimelineRow data-testid="timeline-row" role="row" {...rest}>
           {hasSide && (
-            <div
-              className={rowHeaderClasses}
+            <RowHeader
+              isHeader={isHeader}
               data-testid="timeline-row-header"
               role="rowheader"
             >
               {renderRowHeader ? renderRowHeader(name) : name}
-            </div>
+            </RowHeader>
           )}
-          <div className="timeline__row-content">{children}</div>
-        </div>
+          <RowContent>{children}</RowContent>
+        </StyledTimelineRow>
       )}
     </TimelineContext.Consumer>
   )