Added 2 new features - the ability to add custom icon directly in the…

src/components/timeline-elements/timeline-card-content/content-footer.tsx

@@ -55,7 +55,7 @@ const ContentFooter: FunctionComponent<ContentFooterProps> = ({
   isNested,
   isResuming,
 }: ContentFooterProps) => {
-  const { mode, theme } = useContext(GlobalContext);
+  const { mode, theme, showMoreText } = useContext(GlobalContext);
 
   const canShowTriangleIcon = useMemo(() => {
     return (
@@ -95,7 +95,17 @@ const ContentFooter: FunctionComponent<ContentFooterProps> = ({
           theme={theme}
           tabIndex={0}
         >
-          {<span>{showMore ? 'read less' : 'read more'}</span>}
+          {
+            <span>
+              {showMore
+                ? showMoreText
+                  ? showMoreText.expand
+                  : 'read less'
+                : showMoreText
+                  ? showMoreText.collapse
+                  : 'read more'}
+            </span>
+          }
           <ChevronIconWrapper collapsed={showMore ? 'true' : 'false'}>
             <ChevronIcon />
           </ChevronIconWrapper>

src/components/timeline-horizontal/timeline-horizontal.tsx

@@ -86,7 +86,7 @@ const TimelineHorizontal: React.FunctionComponent<TimelineHorizontalModel> = ({
             onElapsed={onElapsed}
             customContent={children ? (children as ReactNode[])[index] : null}
             hasFocus={hasFocus}
-            iconChild={iconChildColln[index]}
+            iconChild={item.icon || iconChildColln[index]}
             active={item.active}
             cardWidth={cardWidth}
             isNested={isNested}

src/components/timeline-vertical/timeline-vertical.tsx

@@ -73,11 +73,13 @@ const TimelineVertical: React.FunctionComponent<TimelineVerticalModel> = ({
             (contentDetailsChildren as React.ReactNode[])[index]) ||
           null;
 
-        const customIcon = Array.isArray(iconChildren)
-          ? iconChildren[index]
-          : index === 0
-            ? iconChildren
-            : null;
+        const customIcon = item.icon
+          ? item.icon
+          : Array.isArray(iconChildren)
+            ? iconChildren[index]
+            : index === 0
+              ? iconChildren
+              : null;
 
         return (
           <TimelineVerticalItem

src/demo/App.tsx

@@ -69,6 +69,7 @@ const NewDemo: React.FunctionComponent = () => {
         timelineContent,
         date,
         items,
+        icon,
       }) => ({
         title,
         url,
@@ -80,6 +81,7 @@ const NewDemo: React.FunctionComponent = () => {
         timelineContent,
         date,
         items,
+        icon,
       }),
     );
     setItems(newItems);

src/demo/data.tsx

@@ -35,6 +35,12 @@ const items: TimelineItemModel[] = [
       </ul>
       `,
     ],
+    icon: (
+      <img
+        src="https://img.icons8.com/ios-filled/100/000000/twitter.png"
+        alt="github"
+      />
+    ),
   },
   {
     title: '25 July 1941',

src/demo/vertical-samples.tsx

@@ -427,6 +427,7 @@ export const VerticalCustomContent2: FunctionComponent<{
         flipLayout
         timelinePointDimension={30}
         items={items}
+        showMoreText={{ expand: 'Expand', collapse: 'Collapse' }}
       >
         <div>
           <div style={{ width: '250px', height: '250px' }}>

src/models/TimelineItemModel.ts

@@ -55,6 +55,9 @@ export interface TimelineItemModel {
 
   // Indicates if the timeline item is visible.
   visible?: boolean;
+
+  // Optional prop for timeline icon.
+  icon?: ReactNode;
 }
 
 /**
@@ -74,6 +77,7 @@ export type TimelineCardModel = Pick<
   | 'timelineContent'
   | 'isNested'
   | 'items'
+  | 'icon'
 > & {
   // Function for auto-scrolling.
   autoScroll?: ({

src/models/TimelineModel.ts

@@ -23,6 +23,7 @@ export type TimelineModel = Pick<
   | 'nestedCardHeight'
   | 'noUniqueId'
   | 'uniqueId'
+  | 'showMoreText'
 > & {
   activeTimelineItem?: number;
   contentDetailsChildren?: React.ReactNode | React.ReactNode[];
@@ -243,6 +244,11 @@ export type TimelineProps = {
 
   // enables the read more button
   useReadMore?: boolean;
+
+  showMoreText?: {
+    expand?: string;
+    collapse?: string;
+  }
 };
 
 export type SlideShowType = 'reveal' | 'slide_in' | 'slide_from_sides';