<Timeline/> - allow passing a node instead of string only in the item… (#5883)

* <Timeline/> - allow passing a node instead of string only in the item.label prop

* update tsx and index.d.ts files

* udpate storybook and unit test

Author: sivanharel

src/Timeline/Timeline.js

@@ -37,8 +37,8 @@ Timeline.propTypes = {
   /** timeline events items */
   items: PropTypes.arrayOf(
     PropTypes.shape({
-      /** event text */
-      label: PropTypes.string,
+      /** event text - could be a node or a string */
+      label: PropTypes.node,
       /** action element in the end of event text */
       labelAction: PropTypes.node,
       /**  TODO: still in development. custom bullet element like icon or avatar */

src/Timeline/TimelineItem.js

@@ -5,7 +5,7 @@ import Text from '../Text';
 import { classes } from './TimelineItem.st.css';
 import { dataHooks } from './constants';
 
-const _isString = a => typeof a === 'string';
+import { isString } from '../utils/StringUtils';
 
 /** A timeline item is a display of a timeline event */
 class TimelineItem extends React.PureComponent {
@@ -28,14 +28,18 @@ class TimelineItem extends React.PureComponent {
           <div className={classes.line} />
         </div>
         <div className={classes.label}>
-          <Text
-            dataHook={`${dataHooks.timelineLabel}-${idx}`}
-            weight="normal"
-            size="small"
-            className={classes.labelText}
-          >
-            {item.label}
-          </Text>
+          {isString(item.label) ? (
+            <Text
+              dataHook={`${dataHooks.timelineLabel}-${idx}`}
+              weight="normal"
+              size="small"
+              className={classes.labelText}
+            >
+              {item.label}
+            </Text>
+          ) : (
+            item.label
+          )}
           {item.labelAction ? (
             <div
               className={classes.labelAction}
@@ -50,7 +54,7 @@ class TimelineItem extends React.PureComponent {
           data-hook={`${dataHooks.timelineSuffix}-${idx}`}
         >
           {item.suffix ? (
-            _isString(item.suffix) ? (
+            isString(item.suffix) ? (
               <Text
                 dataHook={`${dataHooks.timelineTextSuffix}-${idx}`}
                 weight="normal"
@@ -79,8 +83,8 @@ TimelineItem.propTypes = {
   idx: PropTypes.number,
   /** timeline event item */
   item: PropTypes.shape({
-    /** event text */
-    label: PropTypes.string,
+    /** event text - could be a node or a string */
+    label: PropTypes.node,
     /** action element in the end of event text */
     labelAction: PropTypes.node,
     /**  TODO: still in development. custom bullet element like icon or avatar */

src/Timeline/docs/examples.js

@@ -51,3 +51,50 @@ export const simple = `() => {
 
   return <Card><Card.Content><Timeline items={items} /></Card.Content></Card>;
 }`;
+
+export const customExample = `() => {
+  const items = [
+    {
+      label: (
+        <Layout cols={1} gap={0}>
+          <Heading appearance="H6">Review Request Date</Heading>
+          <Text size="small">Jul 05, 2020 at 11:00 AM</Text>
+          <Box marginTop={2}>
+            <Badge type="outlined">Waiting for review</Badge>
+          </Box>
+          <Box marginTop={3}>
+            <Text size="small">
+              Ask your client for a review directly from here. Send this
+            </Text>
+          </Box>
+          <Box>
+            <TextButton size="small">Request Review link</TextButton>
+          </Box>
+        </Layout>
+      ),
+    },
+    {
+      label: (
+        <Layout cols={1} gap={6}>
+          <Heading appearance="H6">Submitted Date</Heading>
+          <Text size="small">Jul 04, 2020 at 09:00 AM</Text>
+          <Box marginTop={3}>
+            <Heading appearance="H6">Website Url</Heading>
+          </Box>
+          <Box>
+            <TextButton size="small">www.mycurrentlywebsite.com</TextButton>
+          </Box>
+        </Layout>
+      ),
+    },
+  ];
+
+  return (
+    <Card>
+      <Card.Content>
+        <Timeline items={items} />
+      </Card.Content>
+    </Card>
+  );
+};
+`;

src/Timeline/docs/index.story.js

@@ -63,6 +63,13 @@ export default {
             text: 'A simple example with compact preview',
             source: examples.simple,
           }),
+
+          example({
+            title: 'Custom Content',
+            text:
+              "Component's label allows to insert any content to build custom layouts.",
+            source: examples.customExample,
+          }),
         ],
       }),
 

src/Timeline/index.d.ts

@@ -1,7 +1,7 @@
 import * as React from 'react';
 
 export interface TimelineItem {
-  label: string;
+  label: React.ReactNode;
   labelAction?: React.ReactNode;
   customPrefix?: React.ReactNode;
   suffix?: React.ReactNode | string;

src/Timeline/test/Timeline.spec.js

@@ -27,6 +27,19 @@ describe(Timeline.displayName, () => {
     expect(await driver.getLabelText(0)).toEqual(items[0].label);
   });
 
+  it('should render the provided `label` node', async () => {
+    const items = [
+      {
+        label: <div data-hook="label-node">timeline item number 1</div>,
+      },
+    ];
+    const { driver } = render(<Timeline items={items} />);
+
+    expect(
+      !!(await driver.element()).querySelector('[data-hook="label-node"]'),
+    ).toBe(true);
+  });
+
   it('should render timeline with text suffix', async () => {
     const items = [
       {

src/Timeline/test/Timeline.tsx

@@ -11,7 +11,20 @@ function timelineWithMandatoryProps() {
 }
 
 function timelineWithAllProps() {
-  return <Timeline dataHook="dataHook" className="className" items={[]} />;
+  return (
+    <Timeline
+      dataHook="dataHook"
+      className="className"
+      items={[
+        {
+          label: <div>label</div>,
+          labelAction: <div>labelAction</div>,
+          customPrefix: <div>customPrefix</div>,
+          suffix: <div>suffix</div>,
+        }
+      ]}
+    />
+  )
 }
 
 async function testkits() {