@blaze-cms/react-page-builder 0.146.0-core-styles.60 → 0.146.0-core-styles.62

package/src/variants/LiveBlogList/LiveBlogList.js

@@ -7,89 +7,93 @@ import { BsPinAngleFill } from 'react-icons/bs';
 
 dayjs.extend(relativeTime);
 
-const LiveBlogList = props => {
-  const { children, date, published, featured } = props;
+const COLLAPSE_HEIGHT = 380;
+
+const LiveBlogList = ({ children, date, published, featured, alternativeHeadline }) => {
   const [isExpanded, setIsExpanded] = useState(false);
   const [shouldShowButton, setShouldShowButton] = useState(false);
   const [{ displayedDate, displayedTime }, setDisplayedDate] = useState({
     displayedDate: ' ',
-    displayTime: ''
+    displayedTime: ''
   });
-  const usedDate = date || published;
-
+  const usedDate = date;
   const contentRef = useRef(null);
 
   useEffect(
     () => {
-      const timeout = setTimeout(() => {
-        if (contentRef.current) {
-          const contentHeight = contentRef.current.scrollHeight;
-          if (contentHeight > 380) {
-            setShouldShowButton(true);
-          }
-        }
-      }, 500); // delay to wait for content load
-      // todo: change to use mutation observer
+      const el = contentRef.current;
+      if (!el) return;
 
-      return () => {
-        clearTimeout(timeout);
-      };
+      const check = () => setShouldShowButton(el.scrollHeight > COLLAPSE_HEIGHT);
+
+      if (typeof ResizeObserver !== 'undefined') {
+        check();
+        const ro = new ResizeObserver(check);
+        ro.observe(el);
+        return () => ro.disconnect();
+      }
+      check();
     },
     [children]
   );
 
   useEffect(
     () => {
-      // delay setting time so no SSR issues based on timezone
-      let newDate = '';
-      if (usedDate) {
-        const diffInDays = dayjs().diff(dayjs(usedDate), 'day');
-        if (diffInDays < 1) {
-          newDate = dayjs(usedDate).fromNow();
-        } else if (diffInDays < 365) {
-          newDate = dayjs(usedDate).format('DD MMM');
-        } else {
-          newDate = dayjs(usedDate).format('DD MMM YYYY');
-        }
-        setDisplayedDate({
-          displayedDate: newDate,
-          displayedTime: dayjs(usedDate).format('HH:mm')
-        });
-      }
+      if (!usedDate) return;
+      const days = dayjs().diff(dayjs(usedDate), 'day');
+      const lessThanAYear = days < 365;
+
+      let newDate;
+      if (days < 1) newDate = dayjs(usedDate).fromNow();
+      else if (lessThanAYear) newDate = dayjs(usedDate).format('DD MMM');
+      else newDate = dayjs(usedDate).format('DD MMM YYYY');
+
+      setDisplayedDate({
+        displayedDate: newDate,
+        displayedTime: lessThanAYear ? dayjs(usedDate).format('HH:mm') : null
+      });
     },
-    [date, published, usedDate]
+    [usedDate]
   );
 
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
-
+  const toggleExpanded = () => setIsExpanded(value => !value);
   const isCollapsed = !isExpanded;
-  const baseClass = 'live-blog-container';
-  const modifier = featured ? ` ${baseClass}--featured` : '';
-  const className = `${baseClass}${modifier}`;
+  const showHeader = usedDate || alternativeHeadline || featured;
 
   return (
-    <div className={className}>
-      {usedDate && (
+    <div className={`live-blog-container${featured ? ' live-blog-container--featured' : ''}`}>
+      {showHeader && (
         <div className="live-blog-date">
           {featured && <BsPinAngleFill />}
-          <span className="live-blog-date--date">{displayedDate}</span>
-          <span className="live-blog-date--time">{displayedTime}</span>
+          {usedDate && (
+            <>
+              <span className="live-blog-date--date">{displayedDate}</span>
+              {displayedTime && <span className="live-blog-date--time">{displayedTime}</span>}
+            </>
+          )}
+          {alternativeHeadline && (
+            <span className="live-blog-date--headline">{alternativeHeadline}</span>
+          )}
         </div>
       )}
 
       <div
         ref={contentRef}
         className={`live-blog-content ${
-          isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'
+          isCollapsed
+            ? 'live-blog-content--collapsed collapsed'
+            : 'live-blog-content--opened opened'
         }`}>
         {children}
       </div>
 
       {shouldShowButton && (
         <div className="live-blog-button-wrapper">
-          <Button className="live-blog-toggle" onClick={toggleExpanded} type="button">
+          <Button
+            aria-label={isExpanded ? 'Show Less' : 'Show More'}
+            className="live-blog-toggle"
+            onClick={toggleExpanded}
+            type="button">
             {isExpanded ? (
               <>
                 <FaMinus className="toggle-icon" /> Show Less

package/tests/unit/src/components/MenuItem/MenuItemRender.test.js

@@ -7,6 +7,8 @@ import { render, fireEvent } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import MenuRender from '../../../../../src/components/MenuItem/MenuItemRender';
 
+const MENU_ITEM_CHILDREN_CLASS = 'menu--item-children';
+
 let mockAsPathValue = '/';
 
 jest.mock('next/router', () => {
@@ -75,7 +77,7 @@ describe('MenuRender component', () => {
     );
 
     fireEvent.mouseEnter(getByText('Parent'));
-    let childContainer = container.querySelector('.menu--item-children');
+    let childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
     expect(childContainer).not.toHaveClass('hidden');
 
     mockAsPathValue = '/new-route';
@@ -85,7 +87,28 @@ describe('MenuRender component', () => {
       </MenuRender>
     );
 
-    childContainer = container.querySelector('.menu--item-children');
+    childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
+    expect(childContainer).toHaveClass('hidden');
+  });
+
+  it('toggles display of children when chevron icon is clicked', () => {
+    const { container } = render(
+      <MenuRender eventType="click" text="Parent">
+        <div data-testid="child">Child</div>
+      </MenuRender>
+    );
+    let childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
+    expect(childContainer).toHaveClass('hidden');
+
+    const chevronIcon = container.querySelector('.menu--item--link--icon');
+    expect(chevronIcon).toBeInTheDocument();
+
+    chevronIcon.click();
+    childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
+    expect(childContainer).not.toHaveClass('hidden');
+
+    chevronIcon.click();
+    childContainer = container.querySelector(`.${MENU_ITEM_CHILDREN_CLASS}`);
     expect(childContainer).toHaveClass('hidden');
   });
 });

package/tests/unit/src/components/MenuItem/__snapshots__/MenuItem.test.js.snap

@@ -17,6 +17,7 @@ exports[`MenuItem component should render a MenuItem based on passed parameters
       <i
         class="menu--item--link--icon"
         role="button"
+        tabindex="0"
       >
         <svg
           fill="currentColor"

package/tests/unit/src/variants/LiveBlogList/LiveBlogList.test.js

@@ -0,0 +1,121 @@
+/**
+ * @jest-environment jsdom
+ */
+import React from 'react';
+import { render, screen, fireEvent, waitFor } from '@testing-library/react';
+import '@testing-library/jest-dom/extend-expect';
+import dayjs from 'dayjs';
+import LiveBlogList from '../../../../../src/variants/LiveBlogList/LiveBlogList';
+import { LONG_TEXT, SHORT_TEXT } from './constants';
+
+describe('LiveBlogList', () => {
+  afterEach(() => {
+    jest.restoreAllMocks();
+  });
+
+  it('short content: uses date and hides toggle button', async () => {
+    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(200);
+    const dateProps = { date: '2025-04-15T11:26:03.863Z' };
+
+    const { container } = render(
+      <LiveBlogList {...dateProps}>
+        <h2>Short item</h2>
+        <p>{SHORT_TEXT}</p>
+      </LiveBlogList>
+    );
+
+    const contentElement = container.querySelector('.live-blog-content');
+    expect(contentElement).toBeInTheDocument();
+    expect(container.querySelector('.live-blog-toggle')).not.toBeInTheDocument();
+    const displayedDate = container.querySelector('.live-blog-date');
+
+    expect(displayedDate).toBeInTheDocument();
+    expect(displayedDate.textContent).not.toBe('');
+  });
+
+  it('long content: shows toggle button and lets you expand and collapse', async () => {
+    jest.spyOn(HTMLElement.prototype, 'scrollHeight', 'get').mockReturnValue(500);
+    const dateProps = { date: '2025-04-15T15:51:59.303Z' };
+
+    const { container } = render(
+      <LiveBlogList {...dateProps}>
+        <h3>The day so far</h3>
+        <div>{LONG_TEXT}</div>
+      </LiveBlogList>
+    );
+
+    const toggleButton = await screen.findByRole('button', { name: /show more/i });
+    expect(toggleButton).toBeInTheDocument();
+    const contentElement = container.querySelector('.live-blog-content');
+    expect(contentElement).toHaveClass('collapsed');
+
+    fireEvent.click(toggleButton);
+    await waitFor(() => {
+      expect(contentElement).not.toHaveClass('collapsed');
+      expect(toggleButton.textContent).toMatch(/show less/i);
+    });
+
+    fireEvent.click(toggleButton);
+    await waitFor(() => {
+      expect(contentElement).toHaveClass('collapsed');
+      expect(toggleButton.textContent).toMatch(/show more/i);
+    });
+
+    const displayedDate = container.querySelector('.live-blog-date');
+    expect(displayedDate).toBeInTheDocument();
+    expect(displayedDate.textContent).not.toBe('');
+  });
+
+  it('if date less than 1 day ago, shows relative time', () => {
+    const recentDate = '2025-04-15T15:52:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={recentDate}>
+        <p>Less than 1 day old content</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date');
+    expect(dateElement).toBeInTheDocument();
+    expect(dateElement.textContent).toMatch(/ago/i);
+    jest.useRealTimers();
+  });
+
+  it('if older than a day but within a year, shows date in DD MMM format', () => {
+    const fewDaysOld = '2025-04-09T00:00:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={fewDaysOld}>
+        <p>Older than 1 day but less than a year</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date--date');
+    expect(dateElement).toBeInTheDocument();
+    const expectedDate = dayjs(fewDaysOld).format('DD MMM');
+    expect(dateElement.textContent).toBe(expectedDate);
+    jest.useRealTimers();
+  });
+
+  it('if older than a year, shows date in DD MMM YYYY format', () => {
+    const oldDate = '2023-03-15T00:00:00.000Z';
+    jest.useFakeTimers('modern');
+    jest.setSystemTime(new Date('2025-04-16T10:00:00.000Z'));
+
+    const { container } = render(
+      <LiveBlogList date={oldDate}>
+        <p>More than 1 year old content</p>
+      </LiveBlogList>
+    );
+
+    const dateElement = container.querySelector('.live-blog-date');
+    expect(dateElement).toBeInTheDocument();
+    const expectedDate = dayjs(oldDate).format('DD MMM YYYY');
+    expect(dateElement.textContent).toBe(expectedDate);
+    jest.useRealTimers();
+  });
+});

package/tests/unit/src/variants/LiveBlogList/constants.js

@@ -0,0 +1,10 @@
+const LONG_TEXT = `
+    In case you’re just joining us, here’s a recap of the latest news and global market moves since the European market open. (You can see the earlier round-up here)
+    Europe’s main indexes started on a surprisingly positive note at the start of trading, as markets seemed to recover some ground from the tariff sell-off, even as it became clear that Trump had applied 145% tariffs on Chinese goods
+    Mining giants, supported in part by growing appetite for safe haven assets like gold, were leading the FTSE 100 – including Fresnillo, Glencore, and Anglo American
+    There was also some optimism emanating from the UK GDP figures, which showed the economy expanding by more than expected in February at 0.5%
+`;
+
+const SHORT_TEXT = `Winners of the 2022 World Superyacht Awards have been revealed. From the newly crowned Motor Yacht of the Year to the prestigious Voyagers Award, find out which yachts...`;
+
+export { LONG_TEXT, SHORT_TEXT };