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

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

Hide file tree

Showing 2 changed files with 50 additions and 24 deletions.
diff --git a/packages/css-framework/src/components/_timeline.scss b/packages/css-framework/src/components/_timeline.scss
@@ -64,30 +64,30 @@ $timeline-row-header-width: 16rem;
   }
 }
 
-.timeline__navigation {
-  position: absolute;
-  top: 1rem;
-  left: 1rem;
+// .timeline__navigation {
+//   position: absolute;
+//   top: 1rem;
+//   left: 1rem;
 
-  button {
-    &:first-of-type {
-      margin-right: f.spacing("4");
-    }
+//   button {
+//     &:first-of-type {
+//       margin-right: f.spacing("4");
+//     }
 
-    span:first-of-type {
-      display: none;
-    }
+//     span:first-of-type {
+//       display: none;
+//     }
 
-    .rn-btn__icon {
-      margin-left: 0;
-    }
-  }
-}
+//     .rn-btn__icon {
+//       margin-left: 0;
+//     }
+//   }
+// }
 
-.timeline__months,
-.timeline__months--renderDefault {
-  white-space: nowrap;
-}
+// .timeline__months,
+// .timeline__months--renderDefault {
+//   white-space: nowrap;
+// }
 
 // .timeline__month--renderDefault {
 //   position: relative;

diff --git a/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx b/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import { IconChevronRight, IconChevronLeft } from '@royalnavy/icon-library'
+import styled from 'styled-components'
+import { Spacing4 } from '@royalnavy/design-tokens'
 
 import { ComponentWithClass } from '../../common/ComponentWithClass'
 import { getKey } from '../../helpers'
@@ -27,6 +29,30 @@ export type TimelineMonthsProps =
   | TimelineMonthsWithRenderContentProps
   | TimelineMonthsWithChildrenProps
 
+const Navigation = styled.div`
+  position: absolute;
+  top: 1rem;
+  left: 1rem;
+
+  button {
+    &:first-of-type {
+      margin-right: ${Spacing4};
+    }
+
+    span:first-of-type {
+      display: none;
+    }
+
+    .rn-btn__icon {
+      margin-left: 0;
+    }
+  }
+`
+
+const StyledTimelineMonths = styled.div`
+  white-space: nowrap;
+`
+
 export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
   <TimelineContext.Consumer>
     {({
@@ -42,7 +68,7 @@ export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
         name="Months"
         renderRowHeader={(name) => (
           <>
-            <div
+            <Navigation
               className="timeline__navigation"
               data-testid="timeline-navigation"
             >
@@ -60,12 +86,12 @@ export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
                 onClick={(_) => dispatch({ type: TIMELINE_ACTIONS.GET_NEXT })}
                 data-testid="timeline-side-button-right"
               />
-            </div>
+            </Navigation>
             {name}
           </>
         )}
       >
-        <div className="timeline__months">
+        <StyledTimelineMonths>
           {months.map(({ startDate }, index) => (
             <TimelineMonth
               days={days}
@@ -76,7 +102,7 @@ export const TimelineMonths: React.FC<TimelineMonthsProps> = ({ render }) => (
               startDate={startDate}
             />
           ))}
-        </div>
+        </StyledTimelineMonths>
       </TimelineHeaderRow>
     )}
   </TimelineContext.Consumer>