feat(Timeline): Migrate to styled-components

[m7kvqbe1]

Related issue

Closes #951

Overview

Initial migration away from SASS to styled-components.

Reason

SASS + BEM is brittle and makes it difficult for a consumer to override the presentation layer.

Work carried out

• Migrate from SASS to styled-components
• Remove broken box-shadow from sidebar
• Use babel v7 config file format
• Transpile @royalnavy/design-tokens when using Jest
• Fix 'custom hours' story styling
• Mark some items in roadmap as complete
• Preserve BEM class names for internal skeleton markup

Developer notes

Design tokens package to be supplemented with helpers in proceeding PR:

https://www.erikverweij.dev/blog/manage-design-tokens-with-typescript-and-styled-components
https://github.com/everweij/design-tokens-ts-styled-components

[thyhjwb6]

Looks good 👍

Some feedback around naming convention which looks like it was thought about but it feels useful to know that child elements of a styled component are styled components themselves.

[codecov]

Codecov Report

Merging #1468 into master will increase coverage by 0.02%.
The diff coverage is n/a.

@@            Coverage Diff             @@
##           master    #1468      +/-   ##
==========================================
+ Coverage   98.37%   98.40%   +0.02%     
==========================================
  Files         167      167              
  Lines        1661     1692      +31     
  Branches      404      413       +9     
==========================================
+ Hits         1634     1665      +31     
  Misses         27       27              

Impacted Files	Coverage Δ
...onent-library/src/components/Timeline/Timeline.tsx	100.00% <0.00%> (ø)
...onent-library/src/components/Timeline/constants.ts	100.00% <0.00%> (ø)
...nt-library/src/components/Timeline/TimelineDay.tsx	100.00% <0.00%> (ø)
...nt-library/src/components/Timeline/TimelineRow.tsx	100.00% <0.00%> (ø)
...t-library/src/components/Timeline/TimelineDays.tsx	100.00% <0.00%> (ø)
...t-library/src/components/Timeline/TimelineHour.tsx	100.00% <0.00%> (ø)
...t-library/src/components/Timeline/TimelineRows.tsx	100.00% <0.00%> (ø)
...t-library/src/components/Timeline/TimelineWeek.tsx	100.00% <0.00%> (ø)
...-library/src/components/Timeline/TimelineEvent.tsx	100.00% <0.00%> (ø)
...-library/src/components/Timeline/TimelineHours.tsx	100.00% <0.00%> (ø)
... and 5 more

[jpveooys]

My only general question/comment is about the overriding of inner styles not covered by render props (e.g. SyledInner). Is the aim to use this pattern?

It would be good to have a story for that (not necessarily in this PR if there are further PRs coming).

[m7kvqbe1]

My only general question/comment is about the overriding of inner styles not covered by render props (e.g. SyledInner). Is the aim to use this pattern?

It would be good to have a story for that (not necessarily in this PR if there are further PRs coming).

We have literally just been discussing this - we're not quite sure yet. The idea of having a customClasses prop (map of custom classes to internal skeleton markup) came up.

I'm trying to get my head around how the example you linked would work for you the consumer.

[thyhjwb6]

Looks good 👍

Maybe another pair of 👀 from @jpveooys ?

[codeclimate]

Code Climate has analyzed commit 273f1ca and detected 2 issues on this pull request.

Here's the issue category breakdown:

Category	Count
Duplication	2

View more on Code Climate.