udpates and fixes

src/components/GlobalContext.tsx

@@ -1,5 +1,8 @@
 /* eslint-disable react/prop-types */
-import { TimelineProps as PropsModel } from '@models/TimelineModel';
+import {
+  TimelineProps as PropsModel,
+  TextDensity,
+} from '@models/TimelineModel';
 import {
   getDefaultButtonTexts,
   getDefaultClassNames,
@@ -18,12 +21,14 @@ const GlobalContext = createContext<
   PropsModel & {
     toggleDarkMode?: () => void;
     updateHorizontalAllCards?: (state: boolean) => void;
+    updateTextContentDensity?: (value: TextDensity) => void;
   }
 >({});
 
 type ContextProps = PropsModel & {
   toggleDarkMode?: () => void;
   updateHorizontalAllCards?: (state: boolean) => void;
+  updateTextContentDensity?: (value: TextDensity) => void;
 };
 
 const GlobalContextProvider: FunctionComponent<Partial<PropsModel>> = (
@@ -47,13 +52,17 @@ const GlobalContextProvider: FunctionComponent<Partial<PropsModel>> = (
     mediaHeight = 200,
     contentDetailsHeight = 10,
     showAllCardsHorizontal,
+    textDensity = 'HIGH',
   } = props;
 
   const [isDarkMode, setIsDarkMode] = useState(darkMode);
   const [horizontalAll, setHorizontalAll] = useState(
     showAllCardsHorizontal || false,
   );
 
+  const [textContentDensity, setTextContentDensity] =
+    useState<TextDensity>(textDensity);
+
   const newCardHeight = useMemo(
     () => Math.max(contentDetailsHeight || 0 + mediaHeight || 0, cardHeight),
     [],
@@ -78,6 +87,13 @@ const GlobalContextProvider: FunctionComponent<Partial<PropsModel>> = (
     [horizontalAll],
   );
 
+  const updateTextContentDensity = useCallback(
+    (value: TextDensity) => {
+      setTextContentDensity(value);
+    },
+    [textContentDensity],
+  );
+
   const defaultProps = useMemo(
     () =>
       ({
@@ -140,19 +156,22 @@ const GlobalContextProvider: FunctionComponent<Partial<PropsModel>> = (
           ...mediaSettings,
         },
         showAllCardsHorizontal: horizontalAll,
+        textDensity: textContentDensity,
         theme: {
           ...getDefaultThemeOrDark(isDarkMode),
           ...theme,
         },
         toggleDarkMode,
         updateHorizontalAllCards,
+        updateTextContentDensity,
       }) as ContextProps,
     [
       newContentDetailsHeight,
       newCardHeight,
       isDarkMode,
       toggleDarkMode,
       updateHorizontalAllCards,
+      textContentDensity
     ],
   );
 

src/components/elements/popover/index.tsx

@@ -20,6 +20,8 @@ const PopOver: FunctionComponent<PopOverModel> = ({
   theme,
   width = '300px',
   isDarkMode = false,
+  icon,
+  isMobile = false
 }) => {
   const [open, setOpen] = useState(false);
   const [isVisible, setIsVisible] = useState(false);
@@ -57,11 +59,12 @@ const PopOver: FunctionComponent<PopOverModel> = ({
         isDarkMode={isDarkMode}
         tabIndex={0}
         onKeyUp={handleKeyPress}
+        isMobile={isMobile}
       >
         <SelecterIcon theme={theme} open={open}>
-          <ChevronDown />
+          {icon ? icon : <ChevronDown />}
         </SelecterIcon>
-        <SelecterLabel>{placeholder}</SelecterLabel>
+        {placeholder ? <SelecterLabel>{placeholder}</SelecterLabel> : null}
       </Selecter>
       {open ? (
         <PopoverHolder

src/components/elements/popover/popover.model.ts

@@ -3,7 +3,9 @@ import { ReactNode } from 'react';
 
 export type PopOverModel = {
   children: ReactNode | ReactNode[];
+  icon?: ReactNode;
   isDarkMode?: boolean;
+  isMobile?: boolean;
   placeholder?: string;
   position: 'top' | 'bottom';
   theme?: Theme;

src/components/elements/popover/popover.styles.ts

@@ -29,6 +29,7 @@ export const PopoverHolder = styled.div<{
 
 export const Selecter = styled.div<{
   isDarkMode: boolean;
+  isMobile?: boolean;
   open?: boolean;
   theme: Theme;
 }>`
@@ -44,7 +45,7 @@ export const Selecter = styled.div<{
   display: flex;
   font-weight: normal;
   justify-content: space-between;
-  padding: 0.4rem 0.75rem 0.4rem 0.5rem;
+  padding: ${p => p.isMobile ? '0.5rem' : `0.4rem 0.75rem 0.4rem 0.5rem`};
   user-select: none;
 `;
 
@@ -55,8 +56,9 @@ export const SelecterIcon = styled.span<{ open: boolean; theme: Theme }>`
   height: 1.25rem;
   justify-content: center;
   width: 1.25rem;
-  transform: ${({ open }) => (open ? 'rotate(180deg)' : 'rotate(0deg)')};
+  // transform: ${({ open }) => (open ? 'rotate(180deg)' : 'rotate(0deg)')};
   transition: transform 0.2s ease-in-out;
+  margin-right: 0.1rem;
 
   & svg {
     height: 100%;

src/components/icons/arrow-down.tsx

@@ -0,0 +1,10 @@
+const ArrowDownIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M6 18h12v2H6zm5-14v8.586L6.707 8.293 5.293 9.707 12 16.414l6.707-6.707-1.414-1.414L13 12.586V4z" />
+  </svg>
+)
+export default ArrowDownIcon

src/components/icons/index.tsx

@@ -1,13 +1,17 @@
+export { default as ArrowDownIcon } from './arrow-down';
+export { default as CheckIcon } from './check';
 export { default as ChevronDown } from './chev-down';
 export { default as ChevronLeft } from './chev-left';
 export { default as ChevronRight } from './chev-right';
 export { default as ChevronUp } from './chev-up';
 export { default as CloseIcon } from './close';
+export { default as LayoutIcon } from './layout';
 export { default as MaximizeIcon } from './maximize';
 export { default as MinimizeIcon } from './minimize';
 export { default as MinusIcon } from './minus';
 export { default as MoonIcon } from './moon';
 export { default as PlusIcon } from './plus';
 export { default as StopIcon } from "./stop";
 export { default as SunIcon } from './sun';
-export { default as CheckIcon } from './check';
+export { default as TextIcon } from './text';
+

src/components/icons/layout.tsx

@@ -0,0 +1,12 @@
+const LayoutIcon = (props) => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    fill='currentColor'
+  >
+    <path d="M19 3H5c-1.103 0-2 .897-2 2v4h18V5c0-1.103-.897-2-2-2zM3 19c0 1.103.897 2 2 2h8V11H3v8zm12 2h4c1.103 0 2-.897 2-2v-8h-6v10z" />
+  </svg>
+)
+export default LayoutIcon

src/components/icons/text.tsx

@@ -0,0 +1,10 @@
+const TextIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 24 24"
+    fill="currentColor"
+  >
+    <path d="M5 8h2V6h3.252L7.68 18H5v2h8v-2h-2.252L13.32 6H17v2h2V4H5z" />
+  </svg>
+)
+export default TextIcon

src/components/timeline-elements/timeline-card-content/timeline-card-content.styles.ts

@@ -1,5 +1,5 @@
 import { Theme } from '@models/Theme';
-import { TimelineProps } from '@models/TimelineModel';
+import { TextDensity, TimelineProps } from '@models/TimelineModel';
 import styled, { css, keyframes } from 'styled-components';
 import { linearGradient } from '../timeline-card-media/timeline-card-media.styles';
 import {
@@ -28,6 +28,7 @@ export const TimelineItemContentWrapper = styled.section<
     $slideShow?: TimelineProps['slideShow'];
     $slideShowActive?: boolean;
     $slideShowType?: TimelineProps['slideShowType'];
+    $textDensity?: TextDensity;
     $textOverlay?: boolean;
   } & ContentT
 >`
@@ -47,9 +48,11 @@ export const TimelineItemContentWrapper = styled.section<
   max-width: ${(p) => p.$maxWidth}px;
   // min-height: ${(p) => p.$minHeight}px;
   ${(p) =>
-    p.$customContent
+    p.$customContent && p.$textDensity === 'HIGH'
       ? `height: ${p.$minHeight}px;`
-      : `min-height: ${p.$minHeight}px;`}
+      : p.$textDensity === 'HIGH'
+        ? `min-height: ${p.$minHeight}px;`
+        : ''}
   position: relative;
   text-align: left;
   width: 98%;

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

@@ -78,6 +78,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
         showProgressOnSlideshow,
         disableInteraction,
         highlightCardsOnHover,
+        textDensity,
       } = useContext(GlobalContext);
 
       // If the media is a video, we don't show the progress bar.
@@ -228,8 +229,13 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
       // It is only shown if the useReadMore prop is true, the detailedText is non-null,
       // and the customContent prop is false.
       const canShowReadMore = useMemo(() => {
-        return useReadMore && detailedText && !customContent;
-      }, []);
+        return (
+          useReadMore &&
+          detailedText &&
+          !customContent &&
+          textDensity === 'HIGH'
+        );
+      }, [textDensity]);
 
       // decorate the comments
       // This function is triggered when the media state changes. If the slideshow is
@@ -321,8 +327,8 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
 
       // This code checks whether the textOverlay and items props are truthy. If so, then it returns false. Otherwise, it returns true.
       const canShowDetailsText = useMemo(() => {
-        return !textOverlay && !items?.length;
-      }, [items?.length]);
+        return !textOverlay && !items?.length && textDensity === 'HIGH';
+      }, [items?.length, textDensity]);
 
       const TextOrContent = useMemo(() => {
         return getTextOrContent({
@@ -375,6 +381,7 @@ const TimelineCardContent: React.FunctionComponent<TimelineContentModel> =
           $highlight={highlightCardsOnHover}
           data-testid="timeline-card-content"
           $customContent={!!customContent}
+          $textDensity={textDensity}
         >
           {title && !textOverlay ? (
             <ContentHeader

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

@@ -1,6 +1,11 @@
 import { VerticalItemModel } from '@models/TimelineVerticalModel';
 import cls from 'classnames';
-import React, { useCallback, useContext, useMemo, useRef } from 'react';
+import React, {
+  useCallback,
+  useContext,
+  useMemo,
+  useRef
+} from 'react';
 import { GlobalContext } from '../GlobalContext';
 import TimelineCard from '../timeline-elements/timeline-card-content/timeline-card-content';
 import TimelineItemTitle from '../timeline-elements/timeline-item-title/timeline-card-title';
@@ -80,6 +85,7 @@ const VerticalItem: React.FunctionComponent<VerticalItemModel> = (
     textOverlay,
     mediaHeight,
     disableInteraction,
+    textDensity,
   } = useContext(GlobalContext);
 
   // handler for onActive