@blaze-cms/react-page-builder 0.146.0-node18-core-styles-tooltips.3 → 0.146.0-node18-core-styles-tooltips.5

package/lib-es/variants/LiveBlogList/LiveBlogList.js

@@ -5,13 +5,14 @@ import Button from '@blaze-react/button';
 import { FaPlus, FaMinus } from 'react-icons/fa';
 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 [{
@@ -19,64 +20,53 @@ const LiveBlogList = props => {
     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
-
-    return () => {
-      clearTimeout(timeout);
-    };
+    const el = contentRef.current;
+    if (!el) return;
+    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')
-      });
-    }
-  }, [date, published, usedDate]);
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
+    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
+    });
+  }, [usedDate]);
+  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 /*#__PURE__*/React.createElement("div", {
-    className: className
-  }, usedDate && /*#__PURE__*/React.createElement("div", {
+    className: `live-blog-container${featured ? ' live-blog-container--featured' : ''}`
+  }, showHeader && /*#__PURE__*/React.createElement("div", {
     className: "live-blog-date"
-  }, featured && /*#__PURE__*/React.createElement(BsPinAngleFill, null), /*#__PURE__*/React.createElement("span", {
+  }, featured && /*#__PURE__*/React.createElement(BsPinAngleFill, null), usedDate && /*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement("span", {
     className: "live-blog-date--date"
-  }, displayedDate), /*#__PURE__*/React.createElement("span", {
+  }, displayedDate), displayedTime && /*#__PURE__*/React.createElement("span", {
     className: "live-blog-date--time"
-  }, displayedTime)), /*#__PURE__*/React.createElement("div", {
+  }, displayedTime)), alternativeHeadline && /*#__PURE__*/React.createElement("span", {
+    className: "live-blog-date--headline"
+  }, alternativeHeadline)), /*#__PURE__*/React.createElement("div", {
     ref: contentRef,
-    className: `live-blog-content ${isCollapsed ? 'live-blog-content--collapsed' : 'live-blog-content--opened'}`
+    className: `live-blog-content ${isCollapsed ? 'live-blog-content--collapsed collapsed' : 'live-blog-content--opened opened'}`
   }, children), shouldShowButton && /*#__PURE__*/React.createElement("div", {
     className: "live-blog-button-wrapper"
   }, /*#__PURE__*/React.createElement(Button, {
+    "aria-label": isExpanded ? 'Show Less' : 'Show More',
     className: "live-blog-toggle",
     onClick: toggleExpanded,
     type: "button"

package/lib-es/variants/LiveBlogList/LiveBlogList.js.map

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

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.146.0-node18-core-styles-tooltips.3",
+  "version": "0.146.0-node18-core-styles-tooltips.5",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -32,7 +32,7 @@
     "@blaze-cms/core-errors-ui": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.7",
     "@blaze-cms/nextjs-components": "0.146.0-node18-core-styles-tooltips.3",
-    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.3",
+    "@blaze-cms/plugin-search-ui": "0.146.0-node18-core-styles-tooltips.5",
     "@blaze-cms/setup-ui": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-cms/utils": "0.146.0-node18-core-styles-tooltips.3",
     "@blaze-cms/utils-handlebars": "0.146.0-node18-core-styles-tooltips.3",
@@ -92,5 +92,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "92ba8597805e2d7b354f553467072fbcec37b1d8"
+  "gitHead": "d6b0cd14687e7fe634aade939e3b28c67aabda02"
 }

package/src/components/Button.js

@@ -54,19 +54,23 @@ const Button = props => {
     return !!(url || hasChildren(children));
   };
 
-  const logout = () => {
-    handleLogout(client);
-    if (hasChildren(children)) return setShowChildren(true);
+  const logout = async () => {
+    await handleLogout(client);
 
-    if (!urlToUse) return router.reload();
+    if (hasChildren(children)) {
+      setShowChildren(true);
+      return;
+    }
 
-    return urlToUse.startsWith('/')
-      ? router.push('/Resolver', urlToUse)
-      : (window.location.href = urlToUse);
+    if (!urlToUse) {
+      return router.reload();
+    }
+
+    window.location.href = urlToUse;
   };
 
-  const handleClick = () => {
-    if (isLogoutButton) logout();
+  const handleClick = async () => {
+    if (isLogoutButton) await logout();
     if (!url && !isLogoutButton) setShowChildren(!showChildren);
   };
 

package/src/components/List/ListFactory.js

@@ -49,7 +49,7 @@ const ListFactory = props => {
     operator: filterOperator,
     sortProperties,
     itemListName,
-    VariantComponent // extracted from props
+    VariantComponent
   } = props;
   const { isPreview } = useContext(MainContext);
   const router = useRouter();

package/src/components/MenuItem/MenuItemRender.js

@@ -1,3 +1,4 @@
+/* eslint-disable jsx-a11y/no-static-element-interactions */
 import React, { useState, useContext, useEffect } from 'react';
 import PropTypes from 'prop-types';
 import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
@@ -29,6 +30,7 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
   const isActive = router ? isUrlPathMatch(router.asPath, urlToUse) : false;
   const isActiveParent = router ? hasActiveChild(router.asPath, children) : false;
   const shouldPreOpen = openActiveSubmenus && isActiveParent && isClickEvent;
+  const hasValidChildren = hasChildren(children);
 
   const [displayChildren, setDisplayChildren] = useState(shouldPreOpen);
 
@@ -65,7 +67,11 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
     }
   };
 
-  const hasValidChildren = hasChildren(children);
+  const handleMobileClick = () => {
+    if (!urlToUse && hasValidChildren) {
+      setDisplayChildren(!displayChildren);
+    }
+  };
 
   const menuItemLinkClassname = classnames('menu--item--link', {
     'menu--item--link--active': isActive,
@@ -74,7 +80,11 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
 
   return (
     <li className={modifier} onMouseEnter={handleItemEvent} onMouseLeave={handleItemEvent}>
-      <div className={menuItemLinkClassname}>
+      <div
+        className={menuItemLinkClassname}
+        onClick={handleMobileClick}
+        role={!urlToUse && hasValidChildren ? 'button' : undefined}
+        tabIndex={!urlToUse && hasValidChildren ? 0 : undefined}>
         {urlToUse ? (
           <BlazeLink href={urlToUse}>{textToUse}</BlazeLink>
         ) : (
@@ -86,7 +96,11 @@ const MenuItemRender = ({ children, eventType, text, modifier, url, parent }) =>
           <i
             role="button"
             className="menu--item--link--icon"
-            onClick={() => setDisplayChildren(!displayChildren)}>
+            onClick={e => {
+              e.stopPropagation();
+              setDisplayChildren(!displayChildren);
+            }}
+            tabIndex={0}>
             {displayChildren ? <FaChevronUp /> : <FaChevronDown />}
           </i>
         )}

package/src/hooks/helpers/StoreImages.js

@@ -1,48 +1,50 @@
 class StoreImages {
-  constructor() {
-    this.images = [];
-    this.id = null;
-    this.toggleModal = () => {};
-    this.setSelectedImage = () => {};
-  }
+  #images = [];
 
-  resetImages() {
-    this.images = [];
-  }
+  #pageBuilderID = null;
 
-  removeDuplicated = (images, key) => {
-    this.images = images
-      .map(item => item[key])
-      .map((item, index, final) => final.indexOf(item) === index && index)
-      .filter(item => images[item])
-      .map(item => images[item]);
+  #handlers = {
+    toggleModal: () => {},
+    onSelect: () => {}
   };
 
-  handleSelectedImage = imageId => {
-    const index = this.images.findIndex(image => image.imageId === imageId);
-    if (index !== -1) {
-      this.setSelectedImage(index);
-    }
-  };
+  get images() {
+    return [...this.#images];
+  }
 
-  setHandlers = ({ toggleModal = this.toggleModal, setSelectedImage = this.setSelectedImage }) => {
-    this.toggleModal = toggleModal;
-    this.setSelectedImage = setSelectedImage;
-  };
+  resetImages() {
+    this.#images = [];
+  }
 
-  addImages = (images, options = {}) => {
-    if (!images.length) return this.images;
+  setHandlers({ toggleModal, setSelectedImage }) {
+    if (typeof toggleModal === 'function') this.#handlers.toggleModal = toggleModal;
+    if (typeof setSelectedImage === 'function') this.#handlers.onSelect = setSelectedImage;
+  }
 
-    const { pageBuilderID } = options;
+  addImages(newImages, { pageBuilderID } = {}, handlers = {}) {
+    if (!Array.isArray(newImages) || newImages.length === 0) {
+      return this.images;
+    }
 
-    if (pageBuilderID !== this.id) {
+    if (pageBuilderID != null && pageBuilderID !== this.#pageBuilderID) {
       this.resetImages();
-      this.id = pageBuilderID;
+      this.#pageBuilderID = pageBuilderID;
     }
 
-    this.removeDuplicated(this.images.concat(images), 'imageId');
+    const merged = this.#images.concat(newImages);
+    this.#images = Array.from(new Map(merged.map(img => [img.imageId, img])).values());
 
+    this.setHandlers(handlers);
     return this.images;
+  }
+
+  toggleModal = () => {
+    this.#handlers.toggleModal();
+  };
+
+  handleSelectedImage = imageId => {
+    const idx = this.#images.findIndex(img => img.imageId === imageId);
+    if (idx !== -1) this.#handlers.onSelect(idx);
   };
 }
 

package/src/variants/LiveBlogList/LiveBlogList.js

@@ -7,83 +7,87 @@ 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;
+
+    const check = () => setShouldShowButton(el.scrollHeight > COLLAPSE_HEIGHT);
 
-    return () => {
-      clearTimeout(timeout);
-    };
+    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')
-      });
-    }
-  }, [date, published, usedDate]);
+    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');
 
-  const toggleExpanded = () => {
-    setIsExpanded(!isExpanded);
-  };
+    setDisplayedDate({
+      displayedDate: newDate,
+      displayedTime: lessThanAYear ? dayjs(usedDate).format('HH:mm') : null
+    });
+  }, [usedDate]);
 
+  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"