From 87b10ead96357c4380d58b8763f2e0344625bef7 Mon Sep 17 00:00:00 2001
From: dleadbetter <derek@performantsoftware.com>
Date: Mon, 12 Aug 2024 10:27:58 -0400
Subject: [PATCH] RC #291 - Adding optional "description" prop to FacetTimeline
 component; Adjusting padding based on "description" prop

---
 .../core-data/src/components/FacetTimeline.js | 28 +++++++++++++------
 .../src/core-data/FacetTimeline.stories.js    |  9 ++++++
 2 files changed, 29 insertions(+), 8 deletions(-)

diff --git a/packages/core-data/src/components/FacetTimeline.js b/packages/core-data/src/components/FacetTimeline.js
index 2758a811..1de88a77 100644
--- a/packages/core-data/src/components/FacetTimeline.js
+++ b/packages/core-data/src/components/FacetTimeline.js
@@ -15,7 +15,7 @@ import React, {
 import _ from 'underscore';
 import type { Event as EventType } from '../types/Event';
 import EventUtils from '../utils/Event';
-import FacetSlider, { Action as ActionType, ClassNames as ClassNamesType } from './FacetSlider';
+import FacetSlider, { type Action as ActionType, type ClassNames as ClassNamesType } from './FacetSlider';
 import { useEventsService } from '../hooks/CoreData';
 
 type Props = {
@@ -44,6 +44,11 @@ type Props = {
    */
   defaultMin: number,
 
+  /**
+   * If `true`, the event popover content will display the event description.
+   */
+  description?: boolean,
+
   /**
    * Callback fired when the event popover is clicked.
    */
@@ -127,11 +132,16 @@ const FacetTimeline = (props: Props) => {
 
   return (
     <div
-      className={clsx('py-7', props.className)}
+      className={clsx(
+        'py-7',
+        { 'pt-12': !props.description },
+        { 'pt-40': props.description },
+        props.className
+      )}
       ref={ref}
     >
       <div
-        className='flex justify-between items-center h-0 pt-40'
+        className='flex justify-between items-center'
       >
         <button
           aria-label='Slider Left'
@@ -196,11 +206,13 @@ const FacetTimeline = (props: Props) => {
                     <p>
                       { EventUtils.getDateView(event) }
                     </p>
-                    <p
-                      className='text-muted'
-                    >
-                      { event.description }
-                    </p>
+                    { props.description && (
+                      <p
+                        className='text-muted'
+                      >
+                        { event.description }
+                      </p>
+                    )}
                     <Popover.Arrow
                       className='fill-white'
                     />
diff --git a/packages/storybook/src/core-data/FacetTimeline.stories.js b/packages/storybook/src/core-data/FacetTimeline.stories.js
index c9f12274..e10c06e1 100644
--- a/packages/storybook/src/core-data/FacetTimeline.stories.js
+++ b/packages/storybook/src/core-data/FacetTimeline.stories.js
@@ -119,3 +119,12 @@ export const ListView = withCoreDataContextProvider(() => {
     </>
   );
 });
+
+export const Description = withCoreDataContextProvider(() => (
+  <FacetTimeline
+    defaultMin={2000}
+    defaultMax={2024}
+    description
+    zoom={10}
+  />
+));