Timeline - Option to override the row styling (not just header)

[s24y85u2]

Description

On Timeline component:

https://storybook.royalnavy.io/?path=/story/timeline--with-custom-event-content

We would like to see guidelines of the rows in the timeline, so a thin border around the rows essentially. We currently only have the ability to provide a function to renderRowHeader but would be great if there was a way we could put these guidelines onto the whole row somehow.

[thyhjwb6]

Does this help?

const StyledTimelineRow = styled(TimelineRow)`
  height: 60px;
  ${StyledRowHeader} {
    background-color: lightcoral;
  }

  ${StyledRowContent} {
    background-color: lightblue;
  }
`

And then:

  <Timeline
    hasSide
    startDate={new Date(2020, 3, 1)}
    today={new Date(2020, 3, 15)}
  >
    <TimelineTodayMarker />
    <TimelineMonths />
    <TimelineWeeks />
    <TimelineDays />
    <TimelineRows>
      <StyledTimelineRow name="Row 1" renderRowHeader={() => <span>row header2</span>}>
        <TimelineEvents>
          <TimelineEvent
            startDate={new Date(2020, 2, 14)}
            endDate={new Date(2020, 3, 18)}
          >
            Event 1
          </TimelineEvent>
        </TimelineEvents>
      </StyledTimelineRow>
    </TimelineRows>
  </Timeline>