fix(Timeline): Forward className prop

The `Timeline` had a `className` prop that wasn't used. This forwards it to the root child component so library users can override styles more easily. The prop was also added to the docs.
Royal-Navy · Oct 9, 2020 · ea752b2 · ea752b2
1 parent 6aee881
commit ea752b2
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 1 deletion.
diff --git a/packages/docs-site/src/library/pages/timeline/index.md b/packages/docs-site/src/library/pages/timeline/index.md
@@ -668,6 +668,25 @@ Here you will find comprehensive API documentation for the Timeline Components.
   </div>
 </div>
 
+<div className="rn-fw-api">
+  <div className="rn-fw-api-header">
+    <h1 className="rn-fw-api-title">className</h1>
+    <Badge color="supa" colorVariant="faded" size="small">String</Badge>
+  </div>
+  <div className="rn-fw-api-body">
+    <div className="rn-fw-api-row">
+      <div className="rn-fw-api-item">Default Value</div>
+      <div className="rn-fw-api-value">
+        <code>-</code>
+      </div>
+    </div>
+    <div className="rn-fw-api-row">
+      <div className="rn-fw-api-item">Description</div>
+      <p className="rn-fw-api-value">Custom CSS class to add to the component.</p>
+    </div>
+  </div>
+</div>
+
 </div>
 <div className="rn-fw-code rn-fw-md">
 

diff --git a/packages/react-component-library/src/components/Timeline/Timeline.tsx b/packages/react-component-library/src/components/Timeline/Timeline.tsx
@@ -1,4 +1,5 @@
 import React from 'react'
+import classNames from 'classnames'
 import styled from 'styled-components'
 import { selectors } from '@royalnavy/design-tokens'
 
@@ -132,6 +133,7 @@ const StyledHeader = styled.div``
 
 export const Timeline: React.FC<TimelineProps> = ({
   children,
+  className,
   dayWidth,
   hasSide,
   startDate,
@@ -182,7 +184,11 @@ export const Timeline: React.FC<TimelineProps> = ({
       startDate={startDate}
       today={today}
     >
-      <StyledTimeline className="timeline" data-testid="timeline" role="grid">
+      <StyledTimeline
+        className={classNames('timeline', className)}
+        data-testid="timeline"
+        role="grid"
+      >
         <StyledInner
           className="timeline__inner"
           hasSide={hasSide || hasTimelineSide}

diff --git a/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx b/packages/react-component-library/src/components/Timeline/__tests__/Timeline.test.tsx
@@ -25,6 +25,25 @@ describe('Timeline', () => {
     jest.clearAllMocks()
   })
 
+  describe('when a custom className is provided', () => {
+    beforeEach(() => {
+      wrapper = render(
+        <Timeline
+          startDate={new Date(2020, 3, 1)}
+          today={new Date(2020, 3, 15)}
+          className="test-class-name"
+        >
+          <TimelineMonths />
+          <TimelineRows>{}</TimelineRows>
+        </Timeline>
+      )
+    })
+
+    it('adds the custom CSS class to the component', () => {
+      expect(wrapper.getByTestId('timeline')).toHaveClass('test-class-name')
+    })
+  })
+
   describe('when no data is provided', () => {
     beforeEach(() => {
       wrapper = render(