From bc8acbc235938f2c93108fb9158e0e7a63b32a32 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Tue, 22 Sep 2020 09:55:41 +0100 Subject: [PATCH 1/6] feat(Timeline): Migrate to styled-components --- packages/css-framework/index.scss | 1 - .../src/components/_timeline.scss | 270 ------------------ packages/react-component-library/package.json | 8 +- .../src/components/Timeline/Timeline.tsx | 50 ++-- .../src/components/Timeline/TimelineDay.tsx | 50 ++-- .../src/components/Timeline/TimelineDays.tsx | 20 +- .../src/components/Timeline/TimelineEvent.tsx | 64 +++-- .../components/Timeline/TimelineHeaderRow.tsx | 12 +- .../src/components/Timeline/TimelineHour.tsx | 46 +-- .../src/components/Timeline/TimelineHours.tsx | 20 +- .../src/components/Timeline/TimelineMonth.tsx | 59 ++-- .../components/Timeline/TimelineMonths.tsx | 37 ++- .../src/components/Timeline/TimelineRow.tsx | 80 ++++-- .../src/components/Timeline/TimelineRows.tsx | 116 +++++--- .../Timeline/TimelineTodayMarker.tsx | 50 +++- .../src/components/Timeline/TimelineWeek.tsx | 70 +++-- .../src/components/Timeline/TimelineWeeks.tsx | 15 +- .../src/components/Timeline/constants.ts | 13 +- .../react-component-library/webpack/common.js | 7 + yarn.lock | 60 +++- 20 files changed, 560 insertions(+), 488 deletions(-) delete mode 100644 packages/css-framework/src/components/_timeline.scss diff --git a/packages/css-framework/index.scss b/packages/css-framework/index.scss index 46fe3ea34a..e81a6f6a7f 100644 --- a/packages/css-framework/index.scss +++ b/packages/css-framework/index.scss @@ -76,7 +76,6 @@ @use "src/components/tab-nav"; @use "src/components/tab-set"; @use "src/components/textinput"; -@use "src/components/timeline"; @use "src/components/toast"; @use "src/components/toggle"; @use "src/components/tooltip"; diff --git a/packages/css-framework/src/components/_timeline.scss b/packages/css-framework/src/components/_timeline.scss deleted file mode 100644 index cad0693e4e..0000000000 --- a/packages/css-framework/src/components/_timeline.scss +++ /dev/null @@ -1,270 +0,0 @@ -@use "../abstracts/functions" as f; -@use "../abstracts/mixins" as m; - -$timeline-border-color: f.color("neutral", "100"); -$timeline-bg-color: f.color("neutral", "000"); -$timeline-alt-bg-color: f.color("neutral", "white"); -$timeline-row-header-width: 16rem; - -.timeline { - position: relative; - display: flex; - width: 100%; - background-color: f.color("neutral", "white"); -} - -.timeline__inner { - overflow-y: hidden; - border-right: f.spacing("px") solid $timeline-border-color; - border-bottom: f.spacing("px") solid $timeline-border-color; -} - -.timeline__inner--has-side { - margin-left: $timeline-row-header-width; -} - -.timeline__main { - width: auto; - height: auto; - min-height: 4rem; -} - -.timeline__today-marker-wrapper { - position: relative; -} - -.timeline__today-marker--renderDefault { - position: absolute; - top: 4rem; - display: inline-block; - width: f.spacing("px"); - height: 100vh; - background-color: f.color("danger", "500"); - @include m.z-index("body", 1); - - &::before { - content: "Today"; - display: inline-block; - color: f.color("danger", "500"); - font-size: f.font-size("s"); - transform: translate(-50%, -175%); - } -} - -.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); - } -} - -.timeline__navigation { - position: absolute; - top: 1rem; - left: 1rem; - - button { - &:first-of-type { - margin-right: f.spacing("4"); - } - - span:first-of-type { - display: none; - } - - .rn-btn__icon { - margin-left: 0; - } - } -} - -.timeline__months, -.timeline__months--renderDefault { - white-space: nowrap; -} - -.timeline__month--renderDefault { - position: relative; - display: inline-flex; - align-items: center; - height: 4rem; - - &:last-of-type { - border-right: none; - } - - &::after { - position: absolute; - right: 0; - top: 0; - content: ""; - display: inline-block; - width: 1rem; - height: 100vh; - border-right: f.spacing("px") dashed f.color("neutral", "200"); - @include m.z-index("body", 1); - } -} - -.timeline__month-title--renderDefault { - font-size: f.font-size("xl"); - font-weight: 600; - color: f.color("neutral", "600"); - padding-left: f.spacing("8"); -} - -.timeline__weeks, -.timeline__weeks--renderDefault, -.timeline__days, -.timeline__days--renderDefault, -.timeline__hours, -.timeline__hours--renderDefault { - white-space: nowrap; -} - -.timeline__week--renderDefault, -.timeline__day--renderDefault, -.timeline__hour--renderDefault { - display: inline-flex; - align-items: center; - justify-content: center; - height: 2.5rem; - background-color: $timeline-bg-color; - border-top: f.spacing("px") solid $timeline-border-color; - border-bottom: f.spacing("px") solid $timeline-border-color; -} - -.timeline__week--renderDefault { - justify-content: unset; -} - -.timeline__week-title--renderDefault, -.timeline__day-title--renderDefault, -.timeline__hour-title--renderDefault { - font-weight: 600; - font-size: f.font-size("m"); - color: f.color("neutral", "400"); - background-color: $timeline-bg-color; - @include m.z-index("body", 2); -} - -.timeline__week-title--renderDefault { - margin-left: f.spacing("4"); -} - -.timeline__week--renderDefault.timeline__week--alt { - background-color: $timeline-alt-bg-color; - - .timeline__week-title { - background-color: $timeline-alt-bg-color; - } -} - -.timeline__day--renderDefault, -.timeline__hour--renderDefault { - border-right: f.spacing("px") solid f.color("neutral", "100"); -} - -.timeline__day-title--renderDefault, -.timeline__hour-title--renderDefault { - font-size: f.font-size("xs"); -} - -.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--header { - font-size: f.font-size("s"); - font-weight: normal; - color: f.color("neutral", "400"); -} - -.timeline__row-content { - 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-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__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-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; -} diff --git a/packages/react-component-library/package.json b/packages/react-component-library/package.json index efc99521ec..a4423b55f8 100644 --- a/packages/react-component-library/package.json +++ b/packages/react-component-library/package.json @@ -84,6 +84,7 @@ "@types/react-select": "^3.0.10", "@types/react-transition-group": "^4.2.3", "@types/testing-library__react": "^10.0.1", + "@types/styled-components": "^5.1.3", "@types/uuid": "^8.0.0", "@types/yup": "^0.29.2", "@typescript-eslint/eslint-plugin": "^3.1.0", @@ -126,7 +127,8 @@ "webpack-bundle-analyzer": "^3.6.0", "webpack-cli": "^3.3.10", "webpack-merge": "^4.2.2", - "yup": "^0.28.3" + "yup": "^0.28.3", + "styled-components": "^5.2.0" }, "browserslist": [ ">0.2%", @@ -141,6 +143,7 @@ ], "dependencies": { "@datepicker-react/hooks": "^2.4.1", + "@royalnavy/design-tokens": "^2.16.0-alpha.0", "@royalnavy/css-framework": "^2.16.0-alpha.0", "@royalnavy/eslint-config-react": "^2.16.0-alpha.0", "@royalnavy/fonts": "^2.16.0-alpha.0", @@ -158,5 +161,8 @@ "react-tether": "^2.0.7", "react-toast-notifications": "^2.4.0", "react-transition-group": "^4.3.0" + }, + "peerDependencies": { + "styled-components": ">= 5" } } diff --git a/packages/react-component-library/src/components/Timeline/Timeline.tsx b/packages/react-component-library/src/components/Timeline/Timeline.tsx index 82d2df608e..7bda84425f 100755 --- a/packages/react-component-library/src/components/Timeline/Timeline.tsx +++ b/packages/react-component-library/src/components/Timeline/Timeline.tsx @@ -1,5 +1,6 @@ import React from 'react' -import classNames from 'classnames' +import styled from 'styled-components' +import { ColorNeutralWhite, SpacingPx } from '@royalnavy/design-tokens' import { ComponentWithClass } from '../../common/ComponentWithClass' import { TimelineProvider } from './context' @@ -22,7 +23,11 @@ import { } from '.' import { TimelineOptions } from './context/types' -import { DEFAULTS } from './constants' +import { + DEFAULTS, + TIMELINE_BORDER_COLOR, + TIMELINE_ROW_HEADER_WIDTH, +} from './constants' type timelineRootChildrenType = React.ReactElement @@ -102,6 +107,27 @@ function getDayWidth( return (dayWidth || unitWidth || DEFAULTS.UNIT_WIDTH) * multiplier } +const StyledTimeline = styled.div` + position: relative; + display: flex; + width: 100%; + background-color: ${ColorNeutralWhite}; +` + +interface StyledInnerProps { + hasSide: boolean +} + +const StyledInner = styled.div` + overflow-y: hidden; + border-right: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + border-bottom: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + margin-left: ${({ hasSide }) => + hasSide ? TIMELINE_ROW_HEADER_WIDTH : 'initial'}; +` + +const StyledHeader = styled.div`` + export const Timeline: React.FC = ({ children, dayWidth, @@ -146,10 +172,6 @@ export const Timeline: React.FC = ({ const bodyChildren = extractChildren(children, [TimelineRows]) - const innerClasses = classNames('timeline__inner', { - 'timeline__inner--has-side': hasSide || hasTimelineSide, - }) - return ( = ({ startDate={startDate} today={today} > -
-
+ + {rootChildren} -
+ {headChildren} -
+ {bodyChildren} -
-
+ + ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineDay.tsx b/packages/react-component-library/src/components/Timeline/TimelineDay.tsx index 8bc8167304..be6ecfe7df 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineDay.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineDay.tsx @@ -1,8 +1,18 @@ import React from 'react' +import styled from 'styled-components' import { format, isAfter } from 'date-fns' -import classNames from 'classnames' +import { + SpacingPx, + ZindexBody, + TypographyXs, + ColorNeutral400, +} from '@royalnavy/design-tokens' -import { DATE_DAY_FORMAT } from './constants' +import { + DATE_DAY_FORMAT, + TIMELINE_BORDER_COLOR, + TIMELINE_BG_COLOR, +} from './constants' interface TimelineDayProps { date: Date @@ -12,29 +22,37 @@ interface TimelineDayProps { timelineEndDate: Date } -function renderDefault(index: number, dayWidth: number, date: Date) { - const wrapperClasses = classNames( - 'timeline__day', - 'timeline__day--renderDefault' - ) +const StyledTimelineDay = styled.div` + display: inline-flex; + align-items: center; + justify-content: center; + height: 2.5rem; + background-color: ${TIMELINE_BG_COLOR}; + border-top: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + border-bottom: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + border-right: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; +` - const titleClasses = classNames( - 'timeline__day-title', - 'timeline__day-title--renderDefault' - ) +const StyledTitle = styled.div` + font-weight: 600; + font-size: ${TypographyXs}; + color: ${ColorNeutral400}; + background-color: ${TIMELINE_BG_COLOR}; + z-index: ${Number(ZindexBody) + 2}; +` +function renderDefault(index: number, dayWidth: number, date: Date) { return ( -
- + {format(date, DATE_DAY_FORMAT)} - -
+ + ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineDays.tsx b/packages/react-component-library/src/components/Timeline/TimelineDays.tsx index 1ee95abb48..635475e17c 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineDays.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineDays.tsx @@ -1,5 +1,5 @@ import React from 'react' -import classNames from 'classnames' +import styled from 'styled-components' import { getKey } from '../../helpers' import { TimelineContext } from './context' @@ -18,11 +18,11 @@ export type TimelineDaysProps = | TimelineDaysWithRenderContentProps | TimelineDaysWithChildrenProps -export const TimelineDays: React.FC = ({ render }) => { - const classes = classNames('timeline__days', { - 'timeline__days--renderDefault': !render, - }) +const StyledTimelineDays = styled.div` + white-space: nowrap; +` +export const TimelineDays: React.FC = ({ render }) => { return ( {({ @@ -32,12 +32,8 @@ export const TimelineDays: React.FC = ({ render }) => { options: { dayWidth }, }, }) => ( - -
+ + {days.map(({ date }, index) => ( = ({ render }) => { timelineEndDate={timelineEndDate} /> ))} -
+ )} diff --git a/packages/react-component-library/src/components/Timeline/TimelineEvent.tsx b/packages/react-component-library/src/components/Timeline/TimelineEvent.tsx index ea5992f561..7d37dc7b1b 100755 --- 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 { DATE_FORMAT } from '../../constants' import { useTimelinePosition } from './hooks/useTimelinePosition' @@ -31,31 +38,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 StyledEventTitle = styled.span` + font-size: ${TypographyS}; + font-weight: 400; + color: ${ColorNeutral600}; + white-space: nowrap; +` + +interface StyledEventBarProps { + width: string +} + +const StyledEventBar = styled.div` + 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 ( -
- + {children || `Task ${format(new Date(startDate), DATE_FORMAT.SHORT)}`} - -
-
+ + + ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineHeaderRow.tsx index f91b827c5f..88fb9b3eed 100644 --- 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' @@ -7,10 +8,19 @@ interface TimelineHeaderRowProps extends ComponentWithClass { children: React.ReactElement | React.ReactElement[] name: string renderRowHeader?: (name: string) => React.ReactElement + isShort?: boolean } +const StyledTimelineHeaderRow = styled(TimelineRow)` + ${({ isShort }) => + isShort && + ` + height: 2.5rem; + `} +` + export const TimelineHeaderRow: React.FC = (props) => ( - + ) TimelineHeaderRow.displayName = 'TimelineHeaderRow' diff --git a/packages/react-component-library/src/components/Timeline/TimelineHour.tsx b/packages/react-component-library/src/components/Timeline/TimelineHour.tsx index 02c3a80332..079e97bc3c 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineHour.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineHour.tsx @@ -1,6 +1,14 @@ import React from 'react' import { isAfter } from 'date-fns' -import classNames from 'classnames' +import styled from 'styled-components' +import { + SpacingPx, + ZindexBody, + ColorNeutral400, + TypographyXs, +} from '@royalnavy/design-tokens' + +import { TIMELINE_BORDER_COLOR, TIMELINE_BG_COLOR } from './constants' interface TimelineHourProps { date: Date @@ -10,29 +18,35 @@ interface TimelineHourProps { width: number } -function renderDefault(width: number, time: string) { - const wrapperClasses = classNames( - 'timeline__hour', - 'timeline__hour--renderDefault' - ) +const StyledTimelineHour = styled.div` + display: inline-flex; + align-items: center; + justify-content: center; + height: 2.5rem; + background-color: ${TIMELINE_BG_COLOR}; + border-top: ${SpacingPx} ${TIMELINE_BORDER_COLOR}; + border-bottom: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + border-right: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; +` - const titleClasses = classNames( - 'timeline__hour-title', - 'timeline__hour-title--renderDefault' - ) +const StyledTitle = styled.span` + font-weight: 600; + font-size: ${TypographyXs}; + color: ${ColorNeutral400}; + background-color: ${TIMELINE_BG_COLOR}; + z-index: ${Number(ZindexBody) + 2}; +` +function renderDefault(width: number, time: string) { return ( -
- - {time} - -
+ {time} + ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineHours.tsx b/packages/react-component-library/src/components/Timeline/TimelineHours.tsx index c801940b9d..a942eca2a7 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineHours.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineHours.tsx @@ -1,5 +1,5 @@ import React from 'react' -import classNames from 'classnames' +import styled from 'styled-components' import { getKey } from '../../helpers' import { TIMELINE_BLOCK_SIZE } from './constants' @@ -25,11 +25,11 @@ export type TimelineHoursProps = | TimelineHoursWithRenderContentProps | TimelineHoursWithChildrenProps -export const TimelineHours: React.FC = ({ render }) => { - const classes = classNames('timeline__hours', { - 'timeline__hours--renderDefault': !render, - }) +const StyledTimelineHours = styled.div` + white-space: nowrap; +` +export const TimelineHours: React.FC = ({ render }) => { return ( {({ @@ -40,12 +40,8 @@ export const TimelineHours: React.FC = ({ render }) => { options: { unitWidth }, }, }) => ( - -
+ + {days.map(({ date }) => { return hours.map(({ hourIndex, time }) => ( = ({ render }) => { /> )) })} -
+ )} diff --git a/packages/react-component-library/src/components/Timeline/TimelineMonth.tsx b/packages/react-component-library/src/components/Timeline/TimelineMonth.tsx index 198693bf78..ee27d63129 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineMonth.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineMonth.tsx @@ -1,6 +1,14 @@ import React from 'react' import { format, endOfMonth, differenceInDays, min, max } from 'date-fns' -import classNames from 'classnames' +import styled from 'styled-components' +import { + SpacingPx, + Spacing8, + ColorNeutral200, + ColorNeutral600, + ZindexBody, + TypographyXl, +} from '@royalnavy/design-tokens' import { DATE_MONTH_FORMAT } from './constants' import { formatPx } from './helpers' @@ -19,34 +27,51 @@ interface TimelineMonthProps { startDate: Date } +const StyledTimelineMonth = styled.div` + position: relative; + display: inline-flex; + align-items: center; + height: 4rem; + + &:last-of-type { + border-right: none; + } + + &::after { + position: absolute; + right: 0; + top: 0; + content: ''; + display: inline-block; + width: 1rem; + height: 100vh; + border-right: ${SpacingPx} dashed ${ColorNeutral200}; + z-index ${Number(ZindexBody) + 1} + } +` + +const StyledTitle = styled.span` + font-size: ${TypographyXl}; + font-weight: 600; + color: ${ColorNeutral600}; + padding-left: ${Spacing8}; +` + function renderDefault( index: number, dayWidth: number, daysTotal: number, startDate: Date ): React.ReactElement { - const wrapperClasses = classNames( - 'timeline__month', - 'timeline__month--renderDefault' - ) - - const titleClasses = classNames( - 'timeline__month-title', - 'timeline__month-title--renderDefault' - ) - return ( -
- - {format(startDate, DATE_MONTH_FORMAT)} - -
+ {format(startDate, DATE_MONTH_FORMAT)} + ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx b/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx index 3de3fe83e5..9b94345398 100755 --- 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 StyledNavigation = 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 = ({ render }) => ( {({ @@ -42,10 +68,7 @@ export const TimelineMonths: React.FC = ({ render }) => ( name="Months" renderRowHeader={(name) => ( <> -
+
+ {name} )} > -
+ {months.map(({ startDate }, index) => ( = ({ render }) => ( startDate={startDate} /> ))} -
+ )} diff --git a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx index e3c2000888..a886641fb6 100755 --- a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx @@ -1,8 +1,19 @@ 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: @@ -10,43 +21,70 @@ export interface TimelineRowProps extends ComponentWithClass { | React.ReactElement[] name?: string renderRowHeader?: (name: string) => React.ReactElement - rowHeaderClassName?: string + isHeader?: boolean } +const StyledTimelineRow = styled.div` + display: flex; + height: 4rem; +` + +interface StyledRowHeaderProps { + isHeader?: boolean +} + +const StyledRowHeader = styled.div` + 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 StyledRowContent = styled.div` + position: relative; +` + export const TimelineRow: React.FC = ({ children, - className, name, renderRowHeader, - rowHeaderClassName, + isHeader, ...rest }) => { - const classes = classNames('timeline__row', className) - const rowHeaderClasses = classNames( - 'timeline__row-header', - rowHeaderClassName - ) - return ( {({ hasSide }) => ( -
+ {hasSide && ( -
{renderRowHeader ? renderRowHeader(name) : name} -
+ )} -
{children}
-
+ {children} + )} ) diff --git a/packages/react-component-library/src/components/Timeline/TimelineRows.tsx b/packages/react-component-library/src/components/Timeline/TimelineRows.tsx index 32bac19908..2171184757 100644 --- 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 @@ -23,50 +33,86 @@ 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 = ( -
+ {NO_DATA_MESSAGE} -
+ ) +interface StyledTimelineRowWeekProps { + isOddNumber: boolean + marginLeft: string + width: string +} + +const StyledTimelineRowWeek = styled.div` + display: inline-block; + height: 100vh; + background-color: ${({ isOddNumber }) => + isOddNumber ? TIMELINE_BG_COLOR : TIMELINE_ALT_BG_COLOR}; + margin-left: ${({ marginLeft }) => marginLeft}; + width: ${({ width }) => width}; +` + 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 ( -
) } +interface DefaultStyles { + defaultStyles: boolean +} + +const StyledTimelineMain = styled.div` + ${({ defaultStyles }) => + defaultStyles && + ` + 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 = ({ 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,11 +125,10 @@ export const TimelineRows: React.FC = ({ options: { dayWidth }, }, }) => ( -
-
+ {weeks.map(({ startDate }, index) => { const lastDateDisplayed = min([ @@ -117,15 +162,20 @@ export const TimelineRows: React.FC = ({ startDate.toString() ) })} -
-
+ + )} )} -
+ {hasChildren ? children : noData} -
+ ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineTodayMarker.tsx b/packages/react-component-library/src/components/Timeline/TimelineTodayMarker.tsx index f203ef0f85..7486bc2da8 100755 --- a/packages/react-component-library/src/components/Timeline/TimelineTodayMarker.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineTodayMarker.tsx @@ -1,5 +1,11 @@ import React, { useContext } from 'react' -import classNames from 'classnames' +import styled from 'styled-components' +import { + SpacingPx, + ColorDanger500, + TypographyS, + ZindexBody, +} from '@royalnavy/design-tokens' import { ComponentWithClass } from '../../common/ComponentWithClass' import { TimelineContext } from './context' @@ -19,13 +25,36 @@ export type TimelineTodayMarkerProps = | TimelineTodayMarkerWithRenderContentProps | TimelineTodayMarkerWithChildrenProps -function renderDefault(offset: string) { - const classes = classNames( - 'timeline__today-marker', - 'timeline__today-marker--renderDefault' - ) +const StyledTimelineTodayMarkerWrapper = styled.div` + position: relative; +` - return
+interface StyledTimelineTodayMarkerProps { + left: string +} + +const StyledTimelineTodayMarker = styled.div` + position: absolute; + top: 4rem; + display: inline-block; + width: ${SpacingPx}; + height: 100vh; + background-color: ${ColorDanger500}; + z-index: ${Number(ZindexBody) + 1}; + + &::before { + content: 'Today'; + display: inline-block; + color: ${ColorDanger500}; + font-size: ${TypographyS}; + transform: translate(-50%, -175%); + } + + left: ${({ left }) => left}; +` + +function renderDefault(offset: string) { + return } export const TimelineTodayMarker: React.FC = ({ @@ -39,16 +68,13 @@ export const TimelineTodayMarker: React.FC = ({ if (isBeforeStart || isAfterEnd) return null - const wrapperClasses = classNames('timeline__today-marker-wrapper') - return ( -
{render ? render(today, offset) : renderDefault(offset)} -
+ ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineWeek.tsx b/packages/react-component-library/src/components/Timeline/TimelineWeek.tsx index 2d9d33c170..54b335c848 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineWeek.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineWeek.tsx @@ -1,11 +1,21 @@ import React from 'react' -import classNames from 'classnames' +import styled from 'styled-components' import { format, differenceInDays, endOfWeek, max, min } from 'date-fns' +import { + SpacingPx, + TypographyM, + ColorNeutral400, + Spacing4, + ZindexBody, +} from '@royalnavy/design-tokens' import { ACCESSIBLE_DATE_FORMAT, DATE_WEEK_FORMAT, WEEK_START, + TIMELINE_BG_COLOR, + TIMELINE_ALT_BG_COLOR, + TIMELINE_BORDER_COLOR, } from './constants' import { formatPx, isOdd } from './helpers' import { TimelineDay } from './context/types' @@ -26,6 +36,35 @@ interface TimelineWeekProps { startDate: Date } +interface StyledTimelineWeekProps { + isOddNumber: boolean + marginLeft: string + width: string +} + +const StyledTimelineWeek = styled.div` + display: inline-flex; + align-items: center; + justify-content: center; + height: 2.5rem; + background-color: ${({ isOddNumber }) => + isOddNumber ? TIMELINE_ALT_BG_COLOR : TIMELINE_BG_COLOR}; + border-top: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + border-bottom: ${SpacingPx} solid ${TIMELINE_BORDER_COLOR}; + justify-content: unset; + margin-left: ${({ marginLeft }) => marginLeft}; + width: ${({ width }) => width}; +` + +const StyledTitle = styled.span` + font-weight: 600; + font-size: ${TypographyM}; + color: ${ColorNeutral400}; + background-color: inherit; + z-index: ${Number(ZindexBody) + 2}; + margin-left: ${Spacing4}; +` + function renderDefault( index: number, isOddNumber: boolean, @@ -35,32 +74,15 @@ function renderDefault( daysTotal: number, startDate: Date ) { - const wrapperClasses = classNames( - 'timeline__week', - 'timeline__week--renderDefault', - { - 'timeline__week--alt': isOddNumber, - } - ) - - const titleClasses = classNames( - 'timeline__week-title', - 'timeline__week-title--renderDefault' - ) - return ( -
- - {format(startDate, DATE_WEEK_FORMAT)} - -
+ {format(startDate, DATE_WEEK_FORMAT)} + ) } diff --git a/packages/react-component-library/src/components/Timeline/TimelineWeeks.tsx b/packages/react-component-library/src/components/Timeline/TimelineWeeks.tsx index e21d8dacea..28854264eb 100755 --- a/packages/react-component-library/src/components/Timeline/TimelineWeeks.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineWeeks.tsx @@ -1,4 +1,5 @@ import React from 'react' +import styled from 'styled-components' import { ComponentWithClass } from '../../common/ComponentWithClass' import { getKey } from '../../helpers' @@ -27,6 +28,10 @@ export type TimelineWeeksProps = | TimelineWeeksWithRenderContentProps | TimelineWeeksWithChildrenProps +const StyledTimelineWeeks = styled.div` + white-space: nowrap; +` + export const TimelineWeeks: React.FC = ({ render }) => { return ( @@ -37,12 +42,8 @@ export const TimelineWeeks: React.FC = ({ render }) => { options: { dayWidth }, }, }) => ( - -
+ + {weeks.map(({ startDate }, index) => ( = ({ render }) => { startDate={startDate} /> ))} -
+ )} diff --git a/packages/react-component-library/src/components/Timeline/constants.ts b/packages/react-component-library/src/components/Timeline/constants.ts index 51762a51f1..c3d377d1a0 100755 --- a/packages/react-component-library/src/components/Timeline/constants.ts +++ b/packages/react-component-library/src/components/Timeline/constants.ts @@ -1,3 +1,5 @@ +import { ColorNeutralWhite, ColorNeutral000, ColorNeutral100 } from '@royalnavy/design-tokens' + const ACCESSIBLE_DATE_FORMAT = 'do MMMM y' const DATE_DAY_FORMAT = 'dd' @@ -19,6 +21,11 @@ const NO_DATA_MESSAGE = 'No data available' const WEEK_START = 1 // Monday +const TIMELINE_BORDER_COLOR = ColorNeutral100 +const TIMELINE_BG_COLOR = ColorNeutral000 +const TIMELINE_ALT_BG_COLOR = ColorNeutralWhite +const TIMELINE_ROW_HEADER_WIDTH = '16rem' + export { ACCESSIBLE_DATE_FORMAT, DATE_DAY_FORMAT, @@ -27,5 +34,9 @@ export { DEFAULTS, NO_DATA_MESSAGE, TIMELINE_BLOCK_SIZE, - WEEK_START + WEEK_START, + TIMELINE_BORDER_COLOR, + TIMELINE_BG_COLOR, + TIMELINE_ALT_BG_COLOR, + TIMELINE_ROW_HEADER_WIDTH } diff --git a/packages/react-component-library/webpack/common.js b/packages/react-component-library/webpack/common.js index 17bed76a44..150a99e58b 100755 --- a/packages/react-component-library/webpack/common.js +++ b/packages/react-component-library/webpack/common.js @@ -4,6 +4,13 @@ const { resolve } = require('path') module.exports = { target: 'node', entry: ['./index.ts'], + externals: { + 'styled-components': { + commonjs: 'styled-components', + commonjs2: 'styled-components', + amd: 'styled-components', + }, + }, resolve: { extensions: ['.ts', '.tsx', '.js', '.jsx'], }, diff --git a/yarn.lock b/yarn.lock index 091ce6b3a5..000b867fd8 100644 --- a/yarn.lock +++ b/yarn.lock @@ -1085,7 +1085,7 @@ "@babel/parser" "^7.10.4" "@babel/types" "^7.10.4" -"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.2", "@babel/traverse@^7.10.3", "@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5", "@babel/traverse@^7.11.5", "@babel/traverse@^7.7.0": +"@babel/traverse@^7.0.0", "@babel/traverse@^7.1.0", "@babel/traverse@^7.10.2", "@babel/traverse@^7.10.3", "@babel/traverse@^7.10.4", "@babel/traverse@^7.10.5", "@babel/traverse@^7.11.5", "@babel/traverse@^7.4.5", "@babel/traverse@^7.7.0": version "7.11.5" resolved "https://registry.yarnpkg.com/@babel/traverse/-/traverse-7.11.5.tgz#be777b93b518eb6d76ee2e1ea1d143daa11e61c3" integrity sha512-EjiPXt+r7LiCZXEfRpSJd+jUMnBd4/9OUv7Nx3+0u9+eimMwJmG0Q98lw4/289JCoxSE8OolDMNZaaF/JZ69WQ== @@ -1316,7 +1316,7 @@ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413" integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow== -"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.6": +"@emotion/is-prop-valid@0.8.8", "@emotion/is-prop-valid@^0.8.1", "@emotion/is-prop-valid@^0.8.6", "@emotion/is-prop-valid@^0.8.8": version "0.8.8" resolved "https://registry.yarnpkg.com/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz#db28b1c4368a259b60a97311d6a952d4fd01ac1a" integrity sha512-u5WtneEAr5IDG2Wv65yhunPSMLIpuKsbuOktRojfrEiEvRyC85LgPMZI63cr7NUqT8ZIGdSVg8ZKGxIug4lXcA== @@ -1362,12 +1362,12 @@ "@emotion/styled-base" "^10.0.27" babel-plugin-emotion "^10.0.27" -"@emotion/stylis@0.8.5": +"@emotion/stylis@0.8.5", "@emotion/stylis@^0.8.4": version "0.8.5" resolved "https://registry.yarnpkg.com/@emotion/stylis/-/stylis-0.8.5.tgz#deacb389bd6ee77d1e7fcaccce9e16c5c7e78e04" integrity sha512-h6KtPihKFn3T9fuIrwvXXUOwlx3rfUvfZIcP5a6rh8Y7zjE3O06hT5Ss4S/YI1AYhuZ1kjaE/5EaOOI2NqSylQ== -"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0": +"@emotion/unitless@0.7.5", "@emotion/unitless@^0.7.0", "@emotion/unitless@^0.7.4": version "0.7.5" resolved "https://registry.yarnpkg.com/@emotion/unitless/-/unitless-0.7.5.tgz#77211291c1900a700b8a78cfafda3160d76949ed" integrity sha512-OWORNpfjMsSSUBVrRBVGECkhWcULOAJz9ZW8uK9qgxD+87M7jHRcvh/A96XXNhXTLmKcoYSQtBEX7lHMO7YRwg== @@ -4233,6 +4233,14 @@ resolved "https://registry.yarnpkg.com/@types/history/-/history-4.7.7.tgz#613957d900fab9ff84c8dfb24fa3eef0c2a40896" integrity sha512-2xtoL22/3Mv6a70i4+4RB7VgbDDORoWwjcqeNysojZA0R7NK17RbY5Gof/2QiFfJgX+KkWghbwJ+d/2SB8Ndzg== +"@types/hoist-non-react-statics@*": + version "3.3.1" + resolved "https://registry.yarnpkg.com/@types/hoist-non-react-statics/-/hoist-non-react-statics-3.3.1.tgz#1124aafe5118cb591977aeb1ceaaed1070eb039f" + integrity sha512-iMIqiko6ooLrTh1joXodJK5X9xeEALT1kM5G3ZLhD3hszxBdIEd5C75U834D9mLcINgD4OyZf5uQXjkuYydWvA== + dependencies: + "@types/react" "*" + hoist-non-react-statics "^3.3.0" + "@types/hosted-git-info@^2.7.0": version "2.7.0" resolved "https://registry.yarnpkg.com/@types/hosted-git-info/-/hosted-git-info-2.7.0.tgz#5199b4df62d53f51d60520d61513eaa4b2dd3d3d" @@ -4494,6 +4502,13 @@ dependencies: "@types/react" "*" +"@types/react-native@*": + version "0.63.20" + resolved "https://registry.yarnpkg.com/@types/react-native/-/react-native-0.63.20.tgz#15ccf000bf849d867b15d14d2b4acc364fb7fa27" + integrity sha512-APnxRTDxbWw/IYjvwvXkhYJiz1gahyVA579pJqAVsEfZ+ZUwUHZpWKnexobyH5NmRJHuA/8LrThyps/BW3SYXA== + dependencies: + "@types/react" "*" + "@types/react-responsive@^8.0.2": version "8.0.2" resolved "https://registry.yarnpkg.com/@types/react-responsive/-/react-responsive-8.0.2.tgz#959fdc32f72e38b807e32be617a74be2c315081b" @@ -4576,6 +4591,16 @@ resolved "https://registry.yarnpkg.com/@types/stack-utils/-/stack-utils-1.0.1.tgz#0a851d3bd96498fa25c33ab7278ed3bd65f06c3e" integrity sha512-l42BggppR6zLmpfU6fq9HEa2oGPEI8yrSPL3GITjfRInppYFahObbIQOQK3UGxEnyQpltZLaPe75046NOZQikw== +"@types/styled-components@^5.1.3": + version "5.1.3" + resolved "https://registry.yarnpkg.com/@types/styled-components/-/styled-components-5.1.3.tgz#6fab3d9c8f7d9a15cbb89d379d850c985002f363" + integrity sha512-HGpirof3WOhiX17lb61Q/tpgqn48jxO8EfZkdJ8ueYqwLbK2AHQe/G08DasdA2IdKnmwOIP1s9X2bopxKXgjRw== + dependencies: + "@types/hoist-non-react-statics" "*" + "@types/react" "*" + "@types/react-native" "*" + csstype "^3.0.2" + "@types/tapable@*", "@types/tapable@^1.0.5": version "1.0.6" resolved "https://registry.yarnpkg.com/@types/tapable/-/tapable-1.0.6.tgz#a9ca4b70a18b270ccb2bc0aaafefd1d486b7ea74" @@ -8220,6 +8245,15 @@ css-to-react-native@^2.2.2: css-color-keywords "^1.0.0" postcss-value-parser "^3.3.0" +css-to-react-native@^3.0.0: + version "3.0.0" + resolved "https://registry.yarnpkg.com/css-to-react-native/-/css-to-react-native-3.0.0.tgz#62dbe678072a824a689bcfee011fc96e02a7d756" + integrity sha512-Ro1yETZA813eoyUp2GDBhG2j+YggidUmzO1/v9eYBKR2EHVEniE2MI/NqpTQ954BMpTPZFsGNPm46qFB9dpaPQ== + dependencies: + camelize "^1.0.0" + css-color-keywords "^1.0.0" + postcss-value-parser "^4.0.2" + css-tree@1.0.0-alpha.37: version "1.0.0-alpha.37" resolved "https://registry.yarnpkg.com/css-tree/-/css-tree-1.0.0-alpha.37.tgz#98bebd62c4c1d9f960ec340cf9f7522e30709a22" @@ -12481,7 +12515,7 @@ hmac-drbg@^1.0.0: minimalistic-assert "^1.0.0" minimalistic-crypto-utils "^1.0.1" -hoist-non-react-statics@^3.3.0: +hoist-non-react-statics@^3.0.0, hoist-non-react-statics@^3.3.0: version "3.3.2" resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45" integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw== @@ -22501,6 +22535,22 @@ styled-components@^4.4.1: stylis-rule-sheet "^0.0.10" supports-color "^5.5.0" +styled-components@^5.2.0: + version "5.2.0" + resolved "https://registry.yarnpkg.com/styled-components/-/styled-components-5.2.0.tgz#6dcb5aa8a629c84b8d5ab34b7167e3e0c6f7ed74" + integrity sha512-9qE8Vgp8C5cpGAIdFaQVAl89Zgx1TDM4Yf4tlHbO9cPijtpSXTMLHy9lmP0lb+yImhgPFb1AmZ1qMUubmg3HLg== + dependencies: + "@babel/helper-module-imports" "^7.0.0" + "@babel/traverse" "^7.4.5" + "@emotion/is-prop-valid" "^0.8.8" + "@emotion/stylis" "^0.8.4" + "@emotion/unitless" "^0.7.4" + babel-plugin-styled-components ">= 1" + css-to-react-native "^3.0.0" + hoist-non-react-statics "^3.0.0" + shallowequal "^1.1.0" + supports-color "^5.5.0" + stylehacks@^4.0.0: version "4.0.3" resolved "https://registry.yarnpkg.com/stylehacks/-/stylehacks-4.0.3.tgz#6718fcaf4d1e07d8a1318690881e8d96726a71d5" From b47b0ae83d5d338f5bae5d2b4b83166aa7d79ee3 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Wed, 23 Sep 2020 11:56:21 +0100 Subject: [PATCH 2/6] fix(Timeline): Remove broken box-shadow --- .../src/components/Timeline/TimelineRow.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx index a886641fb6..47f0f66a60 100755 --- a/packages/react-component-library/src/components/Timeline/TimelineRow.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineRow.tsx @@ -40,8 +40,6 @@ const StyledRowHeader = styled.div` 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; From 08a56c33d05ba62a1d9c79dbbdc4899375a68f7a Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Thu, 24 Sep 2020 11:21:45 +0100 Subject: [PATCH 3/6] test(ReactComponentLibrary): Add design-tokens to Jest transformIgnorePatterns Also rename the babel config file (v7 format). --- packages/react-component-library/.babelrc | 42 ------------------- .../react-component-library/babel.config.js | 29 +++++++++++++ .../react-component-library/jest.config.js | 3 ++ 3 files changed, 32 insertions(+), 42 deletions(-) delete mode 100755 packages/react-component-library/.babelrc create mode 100755 packages/react-component-library/babel.config.js diff --git a/packages/react-component-library/.babelrc b/packages/react-component-library/.babelrc deleted file mode 100755 index 386ed72312..0000000000 --- a/packages/react-component-library/.babelrc +++ /dev/null @@ -1,42 +0,0 @@ -{ - "presets": [ - "@babel/preset-react", - "@babel/typescript" - ], - "plugins": [ - "@babel/proposal-class-properties", - "@babel/proposal-object-rest-spread", - "@babel/plugin-proposal-nullish-coalescing-operator", - "@babel/plugin-proposal-optional-chaining" - ], - "env": { - "es": { - "presets": [ - [ - "@babel/preset-env", - { - "modules": false - } - ] - ], - "plugins": [ - "babel-plugin-jsx-remove-data-test-id" - ] - }, - "cjs": { - "presets": [ - [ - "@babel/preset-env" - ] - ], - "plugins": [ - "babel-plugin-jsx-remove-data-test-id" - ] - }, - "test": { - "plugins": [ - "@babel/plugin-transform-modules-commonjs" - ] - } - } -} diff --git a/packages/react-component-library/babel.config.js b/packages/react-component-library/babel.config.js new file mode 100755 index 0000000000..fb4bb8e0ac --- /dev/null +++ b/packages/react-component-library/babel.config.js @@ -0,0 +1,29 @@ +module.exports = { + presets: ['@babel/preset-react', '@babel/typescript'], + plugins: [ + '@babel/proposal-class-properties', + '@babel/proposal-object-rest-spread', + '@babel/plugin-proposal-nullish-coalescing-operator', + '@babel/plugin-proposal-optional-chaining', + ], + env: { + es: { + presets: [ + [ + '@babel/preset-env', + { + modules: false, + }, + ], + ], + plugins: ['babel-plugin-jsx-remove-data-test-id'], + }, + cjs: { + presets: [['@babel/preset-env']], + plugins: ['babel-plugin-jsx-remove-data-test-id'], + }, + test: { + plugins: ['@babel/plugin-transform-modules-commonjs'], + }, + }, +} diff --git a/packages/react-component-library/jest.config.js b/packages/react-component-library/jest.config.js index f815be99b2..b2c1a6c3e6 100644 --- a/packages/react-component-library/jest.config.js +++ b/packages/react-component-library/jest.config.js @@ -8,4 +8,7 @@ module.exports = { testMatch: ['**/?(*.)(spec|test).ts?(x)'], setupFiles: ['/jest/setupTests.js'], globalSetup: '/jest/globalSetup.js', + transformIgnorePatterns: [ + '/node_modules/(?!@royalnavy/design-tokens).+\\.js$', + ], } From e8432c9fb8b133279adee79c5642472dbad38790 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Thu, 24 Sep 2020 13:04:29 +0100 Subject: [PATCH 4/6] fix(Timeline): Adjust broken `With custom hours` story --- .../src/components/Timeline/Timeline.stories.tsx | 7 +++---- 1 file changed, 3 insertions(+), 4 deletions(-) diff --git a/packages/react-component-library/src/components/Timeline/Timeline.stories.tsx b/packages/react-component-library/src/components/Timeline/Timeline.stories.tsx index 4057fd2af2..2c7ec0bfce 100755 --- a/packages/react-component-library/src/components/Timeline/Timeline.stories.tsx +++ b/packages/react-component-library/src/components/Timeline/Timeline.stories.tsx @@ -279,18 +279,17 @@ WithCustomDays.storyName = 'With custom days' export const WithCustomHours = () => { const CustomTimelineHours = (width: number, time: string) => { return ( - - {time} - + {time} +
) } From 094a4ad515507476540f6206192b0f3bc4c68f26 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Thu, 24 Sep 2020 13:05:29 +0100 Subject: [PATCH 5/6] docs(Timeline): Mark some roadmap items as complete --- packages/docs-site/src/library/pages/timeline/index.md | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/packages/docs-site/src/library/pages/timeline/index.md b/packages/docs-site/src/library/pages/timeline/index.md index 9783f58e98..532fde656f 100644 --- a/packages/docs-site/src/library/pages/timeline/index.md +++ b/packages/docs-site/src/library/pages/timeline/index.md @@ -1245,11 +1245,12 @@ Here you will find comprehensive API documentation for the Timeline Components. ## Roadmap - Migrate to independent package within monorepo -- Adopt [styled-components](https://github.com/styled-components/styled-components) for default presentation +- ~~Adopt [styled-components](https://github.com/styled-components/styled-components) for default presentation~~ - Expose `TimelineSide` render prop - Add demos to sandbox - Iterate upon default presentation (user research and design) - Investigate support for advanced features: + - ~~Hours display~~ - Infinite scroll - Lazy loading - View scaling (micro to macro / hours to years) From 273f1ca782a0cb75624cd438e79fcc9ed5950ae3 Mon Sep 17 00:00:00 2001 From: m7kvqbe1 Date: Fri, 25 Sep 2020 11:21:45 +0100 Subject: [PATCH 6/6] fix(Timeline): Preserve BEM classes for skeleton markup Prevents breaking existing downstream CSS overrides. --- .../src/components/Timeline/Timeline.tsx | 13 ++++++++++--- .../src/components/Timeline/TimelineDays.tsx | 7 ++++++- .../src/components/Timeline/TimelineHours.tsx | 7 ++++++- .../src/components/Timeline/TimelineMonths.tsx | 6 +++++- .../src/components/Timeline/TimelineRow.tsx | 11 ++++++++++- .../src/components/Timeline/TimelineRows.tsx | 4 +++- .../src/components/Timeline/TimelineWeeks.tsx | 7 ++++++- 7 files changed, 46 insertions(+), 9 deletions(-) diff --git a/packages/react-component-library/src/components/Timeline/Timeline.tsx b/packages/react-component-library/src/components/Timeline/Timeline.tsx index 7bda84425f..0e7f4c6dd7 100755 --- a/packages/react-component-library/src/components/Timeline/Timeline.tsx +++ b/packages/react-component-library/src/components/Timeline/Timeline.tsx @@ -180,10 +180,17 @@ export const Timeline: React.FC = ({ startDate={startDate} today={today} > - - + + {rootChildren} - + {headChildren} {bodyChildren} diff --git a/packages/react-component-library/src/components/Timeline/TimelineDays.tsx b/packages/react-component-library/src/components/Timeline/TimelineDays.tsx index 635475e17c..ce4ea18daf 100644 --- a/packages/react-component-library/src/components/Timeline/TimelineDays.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineDays.tsx @@ -32,7 +32,12 @@ export const TimelineDays: React.FC = ({ render }) => { options: { dayWidth }, }, }) => ( - + {days.map(({ date }, index) => ( = ({ render }) => { options: { unitWidth }, }, }) => ( - + {days.map(({ date }) => { return hours.map(({ hourIndex, time }) => ( diff --git a/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx b/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx index 9b94345398..33a8e5dae5 100755 --- a/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx +++ b/packages/react-component-library/src/components/Timeline/TimelineMonths.tsx @@ -64,11 +64,15 @@ export const TimelineMonths: React.FC = ({ render }) => ( }, }) => ( ( <> - +