@blaze-cms/react-page-builder 0.146.0-node18.1 → 0.146.0-rc-eagle.0

package/src/system-components/EditorMode/BlazeLogo.js

@@ -0,0 +1,48 @@
+import React, { useState, useEffect } from 'react';
+import { EDITOR_MODE_ICON_CLASS, EDITOR_MODE_HIGHLIGHT_CLASS } from './constants';
+
+const BlazeLogo = ({ childNode, ...props }) => {
+  const { id } = props;
+  const [style, setStyle] = useState({});
+
+  useEffect(() => {
+    if (!childNode) return;
+
+    const rect = childNode.getBoundingClientRect();
+    const left = rect.width / 2 + rect.left + window.scrollX - 20;
+    let top = rect.top - 20 + window.scrollY;
+    if (top <= 0) {
+      top = rect.bottom - 20;
+    }
+    const display = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS) ? null : 'none';
+    const newStyle = { display, top, left };
+    setStyle(newStyle);
+
+    const observer = new MutationObserver(mutations => {
+      mutations.forEach(mutation => {
+        if (mutation.type === 'attributes' && mutation.attributeName === 'class') {
+          const isHighlighted = childNode.classList.contains(EDITOR_MODE_HIGHLIGHT_CLASS);
+          setStyle({ ...newStyle, display: isHighlighted ? null : 'none' });
+        }
+      });
+    });
+    observer.observe(childNode, { attributes: true });
+    return () => observer.disconnect();
+  }, [childNode, id]);
+
+  // todo: fix icon hover/click activation while using position absolute
+  return (
+    <button type="button" className={EDITOR_MODE_ICON_CLASS} {...props} style={style}>
+      <svg xmlns="http://www.w3.org/2000/svg" width="22" height="33">
+        <path
+          fill="currentColor"
+          transform="translate(1.0415 1.85962)"
+          d="M7.0214715 6.2017469C7.0214715 6.2017469 4.6948299 13.380771 5.2965479 15.065234C5.6174636 15.947572 6.3796396 16.18821 7.3022733 15.386085C9.1074257 13.781834 13.078762 6.3621721 9.949831 0.42644304C8.7463951 -1.8596147 18.293648 5.1589837 16.328037 18.755013C16.087351 20.559793 16.809412 19.998306 17.250671 19.236286C19.176168 15.947572 17.972733 11.616095 17.972733 10.894181C17.972733 10.172268 19.657541 12.939602 19.777885 18.353949C19.89823 23.768295 17.050098 29.022219 11.393953 29.98477C10.03006 30.225407 13.199106 27.578392 13.640366 24.610529C13.68048 24.329784 10.39109 28.300306 9.5888004 27.738817C9.2277699 27.49818 15.36529 19.877987 13.199106 13.300558C13.158992 13.140133 11.754984 24.409996 6.3796396 27.097116C3.3309369 28.621155 0.60315031 25.051697 0.12177619 21.963514C-1.0415446 13.862046 6.4999828 8.7284422 7.0214715 6.2017469Z"
+          fillRule="evenodd"
+        />
+      </svg>
+    </button>
+  );
+};
+
+export default BlazeLogo;

package/src/system-components/EditorMode/PbWrapper.js

@@ -0,0 +1,27 @@
+import React, { useRef, useEffect, useState } from 'react';
+import { createPortal } from 'react-dom';
+import { useMainContext } from '@blaze-cms/nextjs-components';
+import addEditorModeEventListeners from './helpers/add-editor-mode-event-listeners';
+import BlazeLogo from './BlazeLogo';
+
+const PbWrapper = ({ name, type = 'start' }) => {
+  const ref = useRef(null);
+  const [logoProps, setLogoProps] = useState(null);
+  const { debugOptions: { adminHref } = {} } = useMainContext();
+
+  useEffect(() => {
+    const unmount = addEditorModeEventListeners({ ref, name, adminHref, type, setLogoProps });
+
+    return unmount;
+  }, [adminHref, name, type]);
+  const TagName = `pb-wrapper-${type}`;
+
+  return (
+    <>
+      <TagName ref={ref} pb-component-name={name} />
+      {type === 'end' && logoProps && createPortal(<BlazeLogo {...logoProps} />, document.body)}
+    </>
+  );
+};
+
+export default PbWrapper;

package/src/system-components/EditorMode/constants.js

@@ -0,0 +1,2 @@
+export const EDITOR_MODE_HIGHLIGHT_CLASS = 'blaze-pb-editor-highlight';
+export const EDITOR_MODE_ICON_CLASS = 'blaze-pb-editor-icon';

package/src/system-components/EditorMode/helpers/add-editor-mode-event-listeners.js

@@ -0,0 +1,101 @@
+import { getComponentId } from '../../../helpers';
+import { EDITOR_MODE_HIGHLIGHT_CLASS, EDITOR_MODE_ICON_CLASS } from '../constants';
+import checkIsOverBlazeIcon from './check-is-over-blaze-icon';
+
+const addEditorModeEventListeners = ({ ref, name, adminHref, type, setLogoProps }) => {
+  // ignore start tags and if parent not found
+  if (type !== 'end' || !ref.current || !ref.current.parentNode) return;
+
+  const listeners = [];
+
+  const siblings = ref.current.parentNode.children;
+
+  const foundChildren = [];
+  let foundStart = false;
+  // eslint-disable-next-line no-restricted-syntax, no-unused-vars
+  for (const child of siblings) {
+    if (!foundStart) {
+      // find start tag
+      if (child.getAttribute('pb-component-name') === name) {
+        foundStart = true;
+      }
+      // eslint-disable-next-line no-continue
+      continue;
+    }
+
+    if (child === ref.current) {
+      // end tag found
+      break;
+    }
+
+    foundChildren.push(child); // all nodes between start and end tags - PB component nodes
+  }
+
+  const cleanUpFunctions = Object.values(siblings).map(childNode => {
+    const componentId = getComponentId(name);
+    const clickItemId = `click-${componentId}`;
+
+    const mouseenter = e => {
+      e.stopPropagation();
+
+      document.querySelectorAll(`.${EDITOR_MODE_HIGHLIGHT_CLASS}`).forEach(node => {
+        node.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
+      });
+      childNode.classList.add(EDITOR_MODE_HIGHLIGHT_CLASS);
+
+      setLogoProps({
+        id: clickItemId,
+        'aria-label': `Edit ${name}`,
+        childNode,
+        onClick: click
+      });
+    };
+
+    const mouseleave = e => {
+      e.stopPropagation();
+      if (checkIsOverBlazeIcon(e)) {
+        return;
+      }
+      setLogoProps(null);
+      if (e.toElement) {
+        const icon = e.toElement.closest(`.${EDITOR_MODE_ICON_CLASS}`);
+        document.querySelectorAll(`.${EDITOR_MODE_HIGHLIGHT_CLASS}`).forEach(node => {
+          node.classList.remove(EDITOR_MODE_HIGHLIGHT_CLASS);
+        });
+        if (icon && icon.id === clickItemId) {
+          e.stopPropagation();
+        }
+      }
+    };
+
+    const click = e => {
+      e.stopPropagation();
+      e.preventDefault();
+      window.open(`${adminHref}#${componentId}`, adminHref);
+    };
+
+    childNode.addEventListener('click', click); // todo: remove listener and trigger on icon click
+    childNode.addEventListener('mouseenter', mouseenter);
+    childNode.addEventListener('mouseleave', mouseleave);
+
+    listeners.push([childNode, { click, mouseenter, mouseleave }]);
+
+    const nodeCleanup = () => {
+      listeners.forEach(([, events]) => {
+        Object.entries(events).forEach(([event, handler]) => {
+          childNode.removeEventListener(event, handler);
+        });
+      });
+    };
+
+    return nodeCleanup;
+  });
+
+  const unmount = () => {
+    cleanUpFunctions.forEach(fn => fn());
+  };
+
+  return unmount;
+};
+
+export default addEditorModeEventListeners;

package/src/system-components/EditorMode/helpers/check-is-over-blaze-icon.js

@@ -0,0 +1,24 @@
+import { EDITOR_MODE_ICON_CLASS } from '../constants';
+
+const checkIsOverBlazeIcon = event => {
+  const { relatedTarget } = event;
+  if (!relatedTarget) return false;
+  if (relatedTarget.tagName === 'BUTTON' && relatedTarget.className === EDITOR_MODE_ICON_CLASS) {
+    return true;
+  }
+  if (
+    relatedTarget.tagName === 'svg' &&
+    relatedTarget.parentNode.className === EDITOR_MODE_ICON_CLASS
+  ) {
+    return true;
+  }
+  if (
+    relatedTarget.tagName === 'path' &&
+    relatedTarget.parentNode.parentNode.className === EDITOR_MODE_ICON_CLASS
+  ) {
+    return true;
+  }
+  return false;
+};
+
+export default checkIsOverBlazeIcon;

package/src/system-components/index.js

@@ -0,0 +1,3 @@
+import dynamic from 'next/dynamic';
+
+export const PbWrapper = dynamic(() => import('./EditorMode/PbWrapper'));

package/src/translations.js

@@ -0,0 +1,38 @@
+export const TRANSLATION_NAMESPACE = 'page-builder-fe';
+
+const translations = {
+  en_GB: {
+    RESET: 'Reset',
+    SEARCH_MOBILE_BUTTON_TEXT: 'Search',
+    SEARCH_BUTTON_TEXT: 'Search',
+    RESET_ALL_FILTERS: 'Reset all filters',
+    REFINE_SEARCH: 'Refine search',
+    MOBILE_REFINEMENT_TITLE: 'Search refinement'
+  },
+  en_US: {},
+  fr_FR: {
+    SEARCH_BUTTON_TEXT: 'Rechercher',
+    SEARCH_MOBILE_BUTTON_TEXT: 'Rechercher',
+    RESET_ALL_FILTERS: 'RAZ des filtres',
+    REFINE_SEARCH: 'Affiner la recherche',
+    MOBILE_REFINEMENT_TITLE: 'Affinement de la recherche'
+  },
+  it_IT: {
+    RESET: 'Cancella',
+    SEARCH_BUTTON_TEXT: 'Ricerca',
+    SEARCH_MOBILE_BUTTON_TEXT: 'Ricerca',
+    RESET_ALL_FILTERS: 'Cancella',
+    REFINE_SEARCH: 'Perfeziona la ricerca',
+    MOBILE_REFINEMENT_TITLE: 'Perfezionamento della ricerca'
+  },
+  de_DE: {
+    RESET: 'Zurücksetzen',
+    SEARCH_BUTTON_TEXT: 'Suchen',
+    SEARCH_MOBILE_BUTTON_TEXT: 'Suchen',
+    RESET_ALL_FILTERS: 'Zurücksetzen',
+    REFINE_SEARCH: 'Suche verfeinern',
+    MOBILE_REFINEMENT_TITLE: 'Suche verfeinern'
+  }
+};
+
+export default translations;

package/src/variants/Infographic/Infographic.js

@@ -2,10 +2,10 @@ import React from 'react';
 import useInfographic from './useInfographic';
 
 const Infographic = props => {
-  const { contentRef, id, className, tabId, children } = useInfographic(props);
+  const { contentRef, className, children } = useInfographic(props);
 
   return (
-    <div ref={contentRef} id={id} className={className} role="tabpanel" aria-labelledby={tabId}>
+    <div {...props} ref={contentRef} className={className}>
       {children}
     </div>
   );

package/src/variants/LiveBlogList/LiveBlogList.js

@@ -0,0 +1,107 @@
+import React, { useRef, useState, useEffect } from 'react';
+import dayjs from 'dayjs';
+import relativeTime from 'dayjs/plugin/relativeTime';
+import Button from '@blaze-react/button';
+import { FaPlus, FaMinus } from 'react-icons/fa';
+import { BsPinAngleFill } from 'react-icons/bs';
+
+dayjs.extend(relativeTime);
+
+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: ' ',
+    displayedTime: ''
+  });
+  const usedDate = date;
+  const contentRef = useRef(null);
+
+  useEffect(() => {
+    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(() => {
+    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 showHeader = usedDate || alternativeHeadline || featured;
+
+  return (
+    <div className={`live-blog-container${featured ? ' live-blog-container--featured' : ''}`}>
+      {showHeader && (
+        <div className="live-blog-date">
+          {featured && <BsPinAngleFill />}
+          {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 collapsed'
+            : 'live-blog-content--opened opened'
+        }`}>
+        {children}
+      </div>
+
+      {shouldShowButton && (
+        <div className="live-blog-button-wrapper">
+          <Button
+            aria-label={isExpanded ? 'Show Less' : 'Show More'}
+            className="live-blog-toggle"
+            onClick={toggleExpanded}
+            type="button">
+            {isExpanded ? (
+              <>
+                <FaMinus className="toggle-icon" /> Show Less
+              </>
+            ) : (
+              <>
+                <FaPlus className="toggle-icon" /> Show More
+              </>
+            )}
+          </Button>
+        </div>
+      )}
+    </div>
+  );
+};
+
+export default LiveBlogList;

package/src/variants/LiveBlogList/index.js

@@ -0,0 +1,13 @@
+import dynamic from 'next/dynamic';
+
+const liveBlogList = {
+  VariantComponent: dynamic(
+    () => import(/* webpackChunkName: "blazePbliveBlogList" */ './LiveBlogList')
+  ),
+  getSettings: componentSettings => ({
+    ...componentSettings,
+    modifier: 'liveBlogList'
+  })
+};
+
+export default liveBlogList;

package/src/variants/index.js

@@ -6,6 +6,7 @@ import parallaxImageTextRight from './ParallaxImageTextRight';
 import thumbnailCarousel from './ThumbnailCarousel';
 import slideSummary from './SlideSummary';
 import floatingSideButton from './FloatingSideButton';
+import liveBlogList from './LiveBlogList';
 
 export default {
   heroImage,
@@ -15,5 +16,6 @@ export default {
   parallaxImageTextRight,
   thumbnailCarousel,
   slideSummary,
-  floatingSideButton
+  floatingSideButton,
+  liveBlogList
 };

package/tests/unit/src/Layout/Layout.test.js

@@ -1,6 +1,7 @@
 /**
  * @jest-environment jsdom
  */
+import React from 'react';
 import '@testing-library/jest-dom/extend-expect';
 import {
   getMockedProvider,
@@ -117,4 +118,50 @@ describe('Layout component', () => {
     });
     expect(columnNoChildren.toJSON()).toEqual(null);
   });
+
+  it('should add data-nosnippet attribute when dataNoSnippet prop is true', async () => {
+    const componentWithSnippet = await getMockedProvider(Layout, {
+      props: getMockedProps({ dataNoSnippet: true })
+    });
+    const element = componentWithSnippet.root.findByProps({ className: 'row' });
+    expect(element.props['data-nosnippet']).toBe(true);
+  });
+
+  it('should not add data-nosnippet attribute when dataNoSnippet prop is false', () => {
+    const element = testInstance.findByProps({ className: 'row' });
+    expect(element.props['data-nosnippet']).toBeUndefined();
+  });
+
+  it('should render VariantComponent instead of Wrapper when provided', async () => {
+    const MockVariant = React.forwardRef((props, ref) => <div ref={ref} {...props} />);
+    const componentWithVariant = await getMockedProvider(Layout, {
+      props: getMockedProps({ VariantComponent: MockVariant })
+    });
+    const element = componentWithVariant.root.findByType(MockVariant);
+    expect(element).toBeDefined();
+    const wrapperElements = shouldThrowError(componentWithVariant, 'findByType', Wrapper);
+    expect(wrapperElements).toBeTruthy();
+  });
+
+  it('should spread customHtmlProps onto the wrapper element', async () => {
+    const customHtmlProps = [
+      { name: 'data-testid', value: 'custom-layout' },
+      { name: 'aria-label', value: 'My layout' }
+    ];
+    const componentWithCustomProps = await getMockedProvider(Layout, {
+      props: getMockedProps({ customHtmlProps })
+    });
+    const element = componentWithCustomProps.root.findByProps({ className: 'row' });
+    expect(element.props['data-testid']).toBe('custom-layout');
+    expect(element.props['aria-label']).toBe('My layout');
+  });
+
+  it('should not spread customHtmlProps entries with value "null"', async () => {
+    const customHtmlProps = [{ name: 'data-skip', value: 'null' }];
+    const componentWithNullProp = await getMockedProvider(Layout, {
+      props: getMockedProps({ customHtmlProps })
+    });
+    const element = componentWithNullProp.root.findByProps({ className: 'row' });
+    expect(element.props['data-skip']).toBeUndefined();
+  });
 });

package/tests/unit/src/Layout/helpers/check-if-row-has-columns.test.js

@@ -6,12 +6,12 @@ import '@testing-library/jest-dom/extend-expect';
 import checkIfRowHasColumns from '../../../../../src/components/Layout/helpers/check-if-row-has-columns';
 import { ROW, COLUMN } from '../../../../../src/components/Layout/constants';
 
-describe('checkIfRowHasColumns function', () => {
-  const REACT_CHILDREN_WITH_COLUMN = [false, [<image id="1" component={{ type: 'column' }} />]];
-
-  const ELEMENT_WITH_COLUMN = <element>{REACT_CHILDREN_WITH_COLUMN}</element>;
-  const rowWithColumnChildren = checkIfRowHasColumns(ROW, ELEMENT_WITH_COLUMN);
+// eslint-disable-next-line react/no-unknown-property
+const REACT_CHILDREN_WITH_COLUMN = [false, [<image id="1" component={{ type: 'column' }} />]];
+const ELEMENT_WITH_COLUMN = <element>{REACT_CHILDREN_WITH_COLUMN}</element>;
+const rowWithColumnChildren = checkIfRowHasColumns(ROW, ELEMENT_WITH_COLUMN);
 
+describe('checkIfRowHasColumns function', () => {
   it('should be defined', () => {
     expect(checkIfRowHasColumns).toBeDefined();
   });
@@ -37,6 +37,7 @@ describe('checkIfRowHasColumns function', () => {
   });
 
   it('should return false if children does not contain columns', async () => {
+    // eslint-disable-next-line react/no-unknown-property
     const REACT_CHILDREN_WITHOUT_COLUMN = [false, [<image id="1" component={{ type: 'image' }} />]];
     const ELEMENT = <element>{REACT_CHILDREN_WITHOUT_COLUMN}</element>;
 

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

@@ -1,4 +1,4 @@
-// Jest Snapshot v1, https://goo.gl/fbAQLP
+// Jest Snapshot v1, https://jestjs.io/docs/snapshot-testing
 
 exports[`Breadcrumb component should match snapshot 1`] = `
 <DocumentFragment>
@@ -14,9 +14,6 @@ exports[`Breadcrumb component should match snapshot 1`] = `
         <a
           aria-label="Home"
           href="/"
-        />
-        <a
-          href="/"
         >
           Home
         </a>
@@ -27,7 +24,6 @@ exports[`Breadcrumb component should match snapshot 1`] = `
         <a
           href="/Resolver"
         />
-        <a />
       </li>
     </ul>
   </div>
@@ -48,9 +44,6 @@ exports[`Breadcrumb component should not render if loading, err or no data exist
         <a
           aria-label="Home"
           href="/"
-        />
-        <a
-          href="/"
         >
           Home
         </a>
@@ -61,7 +54,6 @@ exports[`Breadcrumb component should not render if loading, err or no data exist
         <a
           href="/Resolver"
         />
-        <a />
       </li>
     </ul>
   </div>
@@ -82,9 +74,6 @@ exports[`Breadcrumb component should render 1`] = `
         <a
           aria-label="Home"
           href="/"
-        />
-        <a
-          href="/"
         >
           Home
         </a>
@@ -95,7 +84,6 @@ exports[`Breadcrumb component should render 1`] = `
         <a
           href="/Resolver"
         />
-        <a />
       </li>
     </ul>
   </div>

package/tests/unit/src/components/Button.test.js

@@ -6,6 +6,11 @@ import { act, render, fireEvent, waitFor } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import Button from '../../../../src/components/Button';
 
+jest.mock('react-cookie', () => ({
+  useCookies: jest.fn(() => [{ blazeCookie: 'blazeCookie' }, jest.fn(), jest.fn()]),
+  CookiesProvider: ({ children }) => children
+}));
+
 jest.mock('@blaze-cms/utils-handlebars', () => ({
   useStringTemplate: jest.fn((parent, [title]) => ({ loadig: false, data: [title] }))
 }));

package/tests/unit/src/components/Card/Card.test.js

@@ -33,9 +33,7 @@ const propsToDisplay = [
     htmlAttribute: 'data-testid'
   }
 ];
-const getMockedParsedProp = children => {
-  children;
-};
+const getMockedParsedProp = children => React.createElement(React.Fragment, {}, ...children);
 const firstPropValue = 'some description';
 const secondPropValue = 'extra props';
 const firstPropToDisplay = getMockedParsedProp(['', '', firstPropValue, '', '']);
@@ -56,7 +54,7 @@ const componentProps = {
   modifiers: 'test-modifier',
   cardChildren: [
     <div className="child_1">some stuff</div>,
-    <div className="child_2" modifier="child-modi">
+    <div className="child_2" data-modifier="child-modifier">
       another child
     </div>
   ],
@@ -77,7 +75,7 @@ const alternativeHeadline = 'Alternative headline';
 jest.mock(
   '../../../../../src/components/LazyImage',
   () =>
-    function ({ src, alt }) {
+    function LazyImage({ src, alt }) {
       return <img src={src} alt={alt} />;
     }
 );