add click event handler for title; add read full button in the footer…

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "react-chrono",
+  "name": "react-chrono-extra",
   "version": "2.2.7",
   "license": "MIT",
   "description": "A Modern Timeline component for React",

src/components/timeline-elements/memoized/index.tsx

@@ -23,6 +23,7 @@ import {
 const TitleMemo = ({
   title,
   url,
+  urlClassName,
   theme,
   color,
   dir,
@@ -40,13 +41,14 @@ const TitleMemo = ({
       $fontSize={fontSize}
       data-class={classString}
       $padding={padding}
+      onClick={typeof url === 'function' ? url : () => {}}
     >
-      {url ? (
+      {typeof url === 'string' ? (
         <CardTitleAnchor href={url} target="_blank" rel="noreferrer">
           {title}
         </CardTitleAnchor>
       ) : (
-        title
+        <span className={cls(url ? urlClassName : '')}>{title}</span>
       )}
     </CardTitle>
   ) : null;

src/components/timeline-elements/memoized/memoized-model.ts

@@ -16,6 +16,7 @@ export interface Title extends common {
   padding?: boolean;
   title?: string;
   url?: string;
+  urlClassName?: string
 }
 
 export interface Content extends common {

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

@@ -31,6 +31,7 @@ import {
  * @property {React.RefObject} progressRef - Ref to the progress bar.
  * @property {boolean} isNested - Determines if component is nested.
  * @property {boolean} isResuming - Determines if slideshow is resuming.
+ * @property {string | Function} url - Navigate user to URL
  *
  * @returns {JSX.Element} ContentFooter component.
  */
@@ -48,6 +49,7 @@ const ContentFooter: FunctionComponent<ContentFooterProps> = ({
   progressRef,
   isNested,
   isResuming,
+  url
 }) => {
   const { mode, theme } = useContext(GlobalContext);
 
@@ -72,25 +74,39 @@ const ContentFooter: FunctionComponent<ContentFooterProps> = ({
 
   return (
     <>
-      {canShowMore ? (
-        <ShowMore
-          className="show-more"
-          onPointerDown={handleClick}
-          onKeyUp={(event) => {
-            if (event.key === 'Enter') {
-              onExpand();
-            }
-          }}
-          show={canShow ? 'true' : 'false'}
-          theme={theme}
-          tabIndex={0}
-        >
-          {<span>{showMore ? 'read less' : 'read more'}</span>}
-          <ChevronIconWrapper collapsed={showMore ? 'true' : 'false'}>
-            <ChevronIcon />
-          </ChevronIconWrapper>
-        </ShowMore>
-      ) : null}
+      <div style={{ width: '100%' }}>
+        <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
+          <button
+            style={{ margin: '0 6px 6px 0', padding: '3px' }}
+            onClick={typeof url === 'function' ? url : () => {}}
+          >
+            <span
+              style={{ fontSize: '12px', color: 'rgb(0, 127, 255)' }}
+            >
+              read in full
+            </span>
+          </button>
+          {canShowMore ? (
+            <ShowMore
+              className="show-more"
+              onPointerDown={handleClick}
+              onKeyUp={(event) => {
+                if (event.key === 'Enter') {
+                  onExpand();
+                }
+              }}
+              show={canShow ? 'true' : 'false'}
+              theme={theme}
+              tabIndex={0}
+            >
+              {<span>{showMore ? 'read less' : 'read more'}</span>}
+              <ChevronIconWrapper collapsed={showMore ? 'true' : 'false'}>
+                <ChevronIcon />
+              </ChevronIconWrapper>
+            </ShowMore>
+          ) : null}
+        </div>
+      </div>
 
       {showProgressBar && (
         <SlideShowProgressBar

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

@@ -12,12 +12,13 @@ import { TimelineCardHeader } from './timeline-card-content.styles';
  *
  * @property {string} title - The title of the card.
  * @property {string} url - The URL of the card.
+ * @property {string} urlClassName - Class applied to title, if url present
  * @property {boolean} media - Indicates whether the card has media or not.
  * @property {string} content - The main content of the card.
  * @returns {JSX.Element} The ContentHeader component.
  */
 const ContentHeader: FunctionComponent<ContentHeaderProps> = memo(
-  ({ title, url, media, content }: ContentHeaderProps) => {
+  ({ title, url, urlClassName, media, content }: ContentHeaderProps) => {
     // Using context to get global values
     const { fontSizes, classNames, theme } = useContext(GlobalContext);
 
@@ -29,6 +30,7 @@ const ContentHeader: FunctionComponent<ContentHeaderProps> = memo(
             title={title}
             theme={theme}
             url={url}
+            urlClassName={urlClassName}
             fontSize={fontSizes?.cardTitle}
             classString={classNames?.cardTitle}
           />

src/components/timeline-elements/timeline-card-content/header-footer.model.ts

@@ -4,7 +4,7 @@ import { RefObject } from 'react';
 
 export type ContentHeaderProps = Pick<
   TimelineContentModel,
-  'theme' | 'url' | 'title' | 'media' | 'content'
+  'theme' | 'url' | 'title' | 'media' | 'content' | 'urlClassName'
 >;
 
 export type ContentFooterProps = {
@@ -22,4 +22,5 @@ export type ContentFooterProps = {
   textContentIsLarge: boolean;
   theme?: Theme;
   triangleDir?: string;
+  url?: string
 };

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

@@ -38,6 +38,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
       flip,
       branchDir,
       url,
+      urlClassName,
       timelineContent,
       items,
       isNested,
@@ -375,6 +376,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
               title={title}
               theme={theme}
               url={url}
+              urlClassName={urlClassName}
               media={media}
               content={content}
             />
@@ -394,6 +396,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
               theme={theme}
               title={title}
               url={url}
+              urlClassName={urlClassName}
               startWidth={startWidth}
               detailsText={TextOrContent}
               paused={paused}
@@ -444,6 +447,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
               showMore={showMore}
               isNested={isNested}
               isResuming={isResuming}
+              url={url}
             />
           )}
         </TimelineItemContentWrapper>

src/components/timeline-elements/timeline-card-media/timeline-card-media.tsx

@@ -48,6 +48,7 @@ const CardMedia: React.FunctionComponent<CardMediaModel> = ({
   media,
   slideshowActive,
   url,
+  urlClassName,
   detailsText,
   showProgressBar,
   remainInterval,
@@ -294,6 +295,7 @@ const CardMedia: React.FunctionComponent<CardMediaModel> = ({
             theme={theme}
             active={active}
             url={url}
+            urlClassName={urlClassName}
             fontSize={fontSizes?.cardTitle}
             classString={classNames?.cardTitle}
           />

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

@@ -19,6 +19,7 @@ import {
  * @property {string} cardSubtitle - The subtitle of the card.
  * @property {string} cardTitle - The title of the card.
  * @property {string} url - The URL of the card.
+ * @property {string} urlClassName - Class applied to title, if title is url
  * @property {string} className - The class name for the component.
  * @property {React.ReactNode} contentDetailsChildren - The content details children nodes.
  * @property {React.ReactNode} iconChild - The icon child nodes.
@@ -49,6 +50,7 @@ const VerticalItem: React.FunctionComponent<VerticalItemModel> = (
     cardSubtitle,
     cardTitle,
     url,
+    urlClassName,
     className,
     contentDetailsChildren,
     iconChild,
@@ -217,6 +219,7 @@ const VerticalItem: React.FunctionComponent<VerticalItemModel> = (
             theme={theme}
             title={cardTitle}
             url={url}
+            urlClassName={urlClassName}
             flip={flipLayout}
             timelineContent={timelineContent}
             items={items}

src/models/TimelineContentModel.ts

@@ -66,4 +66,7 @@ export type TimelineContentModel = {
 
   // URL associated with the timeline item.
   url?: string;
+
+  // Class applied to title, if title is URL
+  urlClassName: string
 };

src/models/TimelineMediaModel.ts

@@ -106,4 +106,7 @@ export interface CardMediaModel {
 
   // URL associated with the media.
   url?: string;
+
+  // Class applied to title, if url is present
+  urlClassName?: string
 }

src/models/TimelineVerticalModel.ts

@@ -67,7 +67,7 @@ type VerticalModel = Pick<
     | 'timelineContent'
     | 'items'
     | 'isNested'
-  > & { active?: boolean; className: string; id?: string };
+  > & { active?: boolean; className: string; id?: string, urlClassName?: string };
 
 /**
  * Represents the model for a vertical timeline point.