@blaze-cms/react-page-builder 0.125.0-f-admin-updates.0 → 0.125.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.125.0-f-admin-updates.0",
+  "version": "0.125.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -27,13 +27,14 @@
   },
   "license": "GPL-3.0",
   "dependencies": {
-    "@blaze-cms/core-auth-ui": "^0.119.0",
+    "@blaze-cms/core-auth-ui": "^0.125.0",
     "@blaze-cms/core-errors": "^0.118.0",
     "@blaze-cms/image-cdn-react": "0.3.0-alpha.3",
-    "@blaze-cms/nextjs-components": "^0.125.0-f-admin-updates.0",
-    "@blaze-cms/plugin-search-ui": "^0.125.0-f-admin-updates.0",
+    "@blaze-cms/nextjs-components": "^0.125.0",
+    "@blaze-cms/plugin-search-ui": "^0.125.0",
     "@blaze-cms/setup-ui": "^0.92.0",
-    "@blaze-cms/utils": "^0.118.0",
+    "@blaze-cms/utils": "^0.125.0",
+    "@blaze-cms/utils-handlebars": "^0.125.0",
     "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
@@ -86,5 +87,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "aaa8fdc973cbae5af6cfc5668ce792ffa456cc62"
+  "gitHead": "ae2788fd44b23bc206072ea3937a466d4a728a16"
 }

package/src/components/Button.js

@@ -6,6 +6,7 @@ import BlazeButton from '@blaze-react/button';
 import { handleLogout } from '@blaze-cms/core-auth-ui';
 import { useApolloClient } from '@apollo/client';
 import PropTypes, { bool, string } from 'prop-types';
+import { useStringTemplate } from '@blaze-cms/utils-handlebars';
 import ClickWrapper from './ClickWrapper';
 import BlazeLink from './BlazeLink';
 import { withTitle } from '../HOC';
@@ -30,6 +31,7 @@ const Button = props => {
     clickAction,
     childSeoVisibility,
     afterClickText,
+    parent,
     ...otherProps
   } = props;
   const client = useApolloClient();
@@ -38,6 +40,9 @@ const Button = props => {
   const [cookies] = useCookies();
   const { blaze_auth: blazeCookie } = cookies;
   const [showChildren, setShowChildren] = useState(false);
+  const {
+    data: [textToUse, afterClickTextToUse, urlToUse]
+  } = useStringTemplate(parent, [text, afterClickText, url]);
 
   useEffect(
     () => {
@@ -54,7 +59,7 @@ const Button = props => {
 
   const logout = () => {
     handleLogout(client);
-    url ? router.reload(url) : router.reload();
+    url ? router.reload(urlToUse) : router.reload();
   };
 
   const handleClick = () => {
@@ -66,9 +71,9 @@ const Button = props => {
 
   const buttonType = !text && icon ? 'icon' : type;
   const modifiers = getClassModifiers(buttonType, { icon, style, ...otherProps });
-  const currentProps = url ? { href: url, title: name } : { name };
+  const currentProps = url ? { href: urlToUse, title: name } : { name };
   const DynamicButton = url && !isLogoutButton ? BlazeLink : BlazeButton;
-  updateChildrensParent(children, otherProps.parent.itemId, otherProps.parent.itemEntity);
+  updateChildrensParent(children, parent.itemId, parent.itemEntity);
 
   const renderedChildren = renderChildren(children, { onClose: handleClick });
   const { shouldUseClickWrapper, wrapperProps } = getClickWrapperOptions(children, props);
@@ -84,13 +89,14 @@ const Button = props => {
       {!childSeoVisibility && showChildren && renderedChildren}
       <DynamicButton className={modifiers} onClick={handleClick} {...currentProps}>
         {icon && <i className={icon} />}
-        {showChildren ? afterClickText : text}
+        {showChildren ? afterClickTextToUse : textToUse}
       </DynamicButton>
     </Wrapper>
   );
 };
 
 Button.propTypes = {
+  parent: PropTypes.object,
   clickAction: PropTypes.string,
   text: PropTypes.string,
   afterClickText: string,
@@ -105,6 +111,7 @@ Button.propTypes = {
 };
 
 Button.defaultProps = {
+  parent: {},
   clickAction: '',
   text: '',
   afterClickText: '',

package/src/components/Card/Card.js

@@ -1,4 +1,5 @@
 import React, { Fragment } from 'react';
+import { useRouter } from 'next/router';
 import PropTypes from 'prop-types';
 import BlazeLink from '../BlazeLink';
 import ClickWrapper from '../ClickWrapper';
@@ -10,7 +11,7 @@ import {
 } from '../../helpers';
 import LazyImage from '../LazyImage';
 import { getPublishedListingUrl, useDynamicSizeKey } from './helpers';
-import { CARD_STRING } from './constants';
+import { CARD_STRING, CARD_CHILDREN_WITH_LINKS } from './constants';
 
 const Card = ({
   id,
@@ -23,6 +24,7 @@ const Card = ({
   alternativeHeadline,
   category,
   modifier,
+  parsedPropsToDisplay,
   propsToDisplay,
   propsToDisplayModifiers,
   gtmId,
@@ -41,6 +43,7 @@ const Card = ({
   ...otherProps
 }) => {
   updateChildrensParent(cardChildren, id, entity);
+  const router = useRouter();
   const { imageSrc, shouldDisplayThumbnail, altText } = getImageDefinedProps({
     image,
     displayThumbnail
@@ -79,9 +82,29 @@ const Card = ({
     enableOverlay && enableCarousel ? titleOverlayModifier : ''
   }`;
 
+  const handleCardClick = e => {
+    if (!url) return;
+
+    const clickEventTag = e.target.tagName.toLowerCase();
+    const clickEventRole = e.target.role;
+    const shouldTriggerRouteChange =
+      clickEventRole !== 'button' &&
+      !CARD_CHILDREN_WITH_LINKS.find(childTag => childTag === clickEventTag);
+    if (shouldTriggerRouteChange) router.push(`/Resolver`, url);
+  };
+
+  // todo: remove temp env var flag once widely tested BLAZE_PB_ADD_CLICK_TO_CARDS
+  const clickProps =
+    url && process.env.BLAZE_PB_ADD_CLICK_TO_CARDS
+      ? {
+          onClick: handleCardClick,
+          role: 'button'
+        }
+      : {};
+
   return (
     <Wrapper {...wrapperProps}>
-      <div className={classNameWithModifiers}>
+      <div className={classNameWithModifiers} {...clickProps}>
         {shouldDisplayThumbnail && (
           <div className={getModifiers('card__image', modifiers)}>
             <BlazeLink gtmId={gtmId} href={url} className="card__image-link" scroll>
@@ -115,15 +138,22 @@ const Card = ({
                 </BlazeLink>
               </h2>
             )}
-            {!!propsToDisplay.length && (
+            {!!parsedPropsToDisplay.length && (
               <div className={getModifiers('card__details', modifiers)}>
-                {propsToDisplay.map((prop, i) => {
+                {parsedPropsToDisplay.map((prop, i) => {
                   if (!prop) return null;
+
                   const dynamicKey = `${id}${i}`;
                   const propModifier = propsToDisplayModifiers[i] || '';
 
+                  const { htmlAttribute } = propsToDisplay[i] || {};
+                  const extraProps = {};
+                  if (htmlAttribute && prop.props.children) {
+                    extraProps[htmlAttribute] = encodeURIComponent(prop.props.children[2]);
+                  }
+
                   return (
-                    <span key={dynamicKey} className={propModifier}>
+                    <span key={dynamicKey} className={propModifier} {...extraProps}>
                       {prop}
                     </span>
                   );
@@ -147,6 +177,7 @@ Card.propTypes = {
     data: PropTypes.object
   }),
   style: PropTypes.string,
+  parsedPropsToDisplay: PropTypes.array,
   propsToDisplay: PropTypes.array,
   propsToDisplayModifiers: PropTypes.array,
   url: PropTypes.string,
@@ -186,6 +217,7 @@ Card.defaultProps = {
   },
   gtmId: '',
   style: 'portrait',
+  parsedPropsToDisplay: [],
   propsToDisplay: [],
   propsToDisplayModifiers: [],
   url: '',

package/src/components/Card/CardContainer.js

@@ -74,7 +74,8 @@ const CardContainer = ({
             id={id}
             enableCarousel={enableCarousel}
             entity={entity}
-            propsToDisplay={extraProps}
+            propsToDisplay={propsToDisplay}
+            parsedPropsToDisplay={extraProps}
             propsToDisplayModifiers={propsToDisplayModifiers}
             modifier={modifier}
             style={style}

package/src/components/Card/constants.js

@@ -1,3 +1,4 @@
 const CARD_STRING = 'card';
+const CARD_CHILDREN_WITH_LINKS = ['a', 'img', 'button', 'svg', 'i', 'path'];
 
-export { CARD_STRING };
+export { CARD_STRING, CARD_CHILDREN_WITH_LINKS };

package/src/components/ContentGroup/ContentGroup.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import ContentGroupTabs from './ContentGroupTabs';
+
+const ContentGroup = ({ contentType, ...props }) => {
+  if (contentType === 'tab' || contentType === 'sidepanel')
+    return <ContentGroupTabs contentType={contentType} {...props} />;
+  return '';
+};
+
+ContentGroup.propTypes = {
+  contentType: PropTypes.string.isRequired
+};
+
+ContentGroup.defaultProps = {};
+
+export default ContentGroup;

package/src/components/ContentGroup/ContentGroupTabs.js

@@ -0,0 +1,74 @@
+import React, { useState } from 'react';
+import PropTypes from 'prop-types';
+
+const ContentGroupTabs = ({ name, contentType, modifier, children, ...props }) => {
+  const [selectedTab, setSelectedTab] = useState('tab-0');
+  const groupSections = children?.props?.children[1];
+  const contentClassame = contentType === 'tab' ? '-tabs' : '-sidepanel';
+  if (!groupSections || !groupSections.length) return '';
+
+  return (
+    <div className={`content-group${contentClassame}`}>
+      <ul
+        className={`content-group${contentClassame}__buttons-wrapper`}
+        role="tablist"
+        aria-label={name}>
+        {groupSections.map((groupSection, index) => {
+          const {
+            props: { component: { settings: { label: sectionLabel } = {} } = {} } = {}
+          } = groupSection;
+          const tabId = `tab-${index}`;
+          const panelId = `panel-${index}`;
+          const isSelected = selectedTab === tabId;
+          const buttonClassName = isSelected
+            ? `content-group${contentClassame}__button--is-active`
+            : `content-group${contentClassame}__button`;
+
+          return (
+            <button
+              id={tabId}
+              key={tabId}
+              className={buttonClassName}
+              type="button"
+              role="tab"
+              aria-selected={isSelected}
+              aria-controls={panelId}
+              onClick={() => setSelectedTab(tabId)}>
+              {sectionLabel}
+            </button>
+          );
+        })}
+      </ul>
+      {groupSections.map((groupSection, index) => {
+        const tabId = `tab-${index}`;
+        const panelId = `panel-${index}`;
+        if (selectedTab !== tabId) return null;
+
+        return (
+          <div
+            id={panelId}
+            key={panelId}
+            className={`content-group${contentClassame}__content-section`}
+            role="tabpanel"
+            aria-labelledby={tabId}>
+            {groupSection}
+          </div>
+        );
+      })}
+    </div>
+  );
+};
+
+ContentGroupTabs.propTypes = {
+  name: PropTypes.string.isRequired,
+  contentType: PropTypes.string.isRequired,
+  modifier: PropTypes.string,
+  children: PropTypes.object
+};
+
+ContentGroupTabs.defaultProps = {
+  modifier: '',
+  children: {}
+};
+
+export default ContentGroupTabs;

package/src/components/ContentGroup/index.js

@@ -0,0 +1,3 @@
+import ContentGroup from './ContentGroup';
+
+export default ContentGroup;

package/src/components/ContentGroupSection/ContentGroupSection.js

@@ -0,0 +1,17 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { hasChildren } from '../../helpers';
+
+const ContentGroupSection = ({ children, ...props }) => {
+  if (!hasChildren(children)) return null;
+
+  return <div className="content-group-section">{children}</div>;
+};
+
+ContentGroupSection.propTypes = {
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node])
+};
+
+ContentGroupSection.defaultProps = { children: null };
+
+export default ContentGroupSection;

package/src/components/ContentGroupSection/index.js

@@ -0,0 +1,3 @@
+import ContentGroupSection from './ContentGroupSection';
+
+export default ContentGroupSection;

package/src/components/List/components/Cards/CardsRender.js

@@ -34,6 +34,7 @@ const CardsRender = ({
   const bannerProps = banner
     ? { parent, hasBanner, entity, propsToDisplay, ...banner, type: BANNER }
     : null;
+
   const propsToDisplayModifiers = getPropsToDisplayModifiers(propsToDisplay);
   const imageIds = itemsToDisplay.map(({ imageId }) => imageId).filter(Boolean);
   const { data: imagesData, loading: imagesLoading } = useGetImages(imageIds, true);

package/src/components/List/components/Cards/CardsRenderItem.js

@@ -66,7 +66,8 @@ const CardsRenderItem = ({
           id={id}
           entity={entity}
           gridModifier={gridModifier}
-          propsToDisplay={parsedPropsToDisplay}
+          propsToDisplay={propsToDisplay}
+          parsedPropsToDisplay={parsedPropsToDisplay}
           propsToDisplayModifiers={propsToDisplayModifiers}
           modifier={modifier}
           style={style}

package/src/components/index.js

@@ -28,19 +28,13 @@ export default {
   ),
   modal: dynamic(() => import(/* webpackChunkName: "blazePbModal" */ './Modal')),
   code: dynamic(() => import(/* webpackChunkName: "blazePbCode" */ './Code')),
-  login: dynamic(() => import(/* webpackChunkName: "blazePbLogin" */ './Login')),
   menu: dynamic(() => import(/* webpackChunkName: "blazePbMenu" */ './Menu')),
   menuitem: dynamic(() => import(/* webpackChunkName: "blazePbMenuItem" */ './MenuItem')),
   submenu: dynamic(() => import(/* webpackChunkName: "blazePbSubMenu" */ './SubMenu')),
   emailconfirm: dynamic(() =>
     import(/* webpackChunkName: "blazePbEmailConfirm" */ './EmailConfirm')
   ),
-  passwordreset: dynamic(() =>
-    import(/* webpackChunkName: "blazePbPasswordReset" */ './PasswordReset')
-  ),
-  passwordresetrequest: dynamic(() =>
-    import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
-  ),
+
   breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb')),
   itemlistbutton: dynamic(() =>
     import(/* webpackChunkName: "blazePbItemListButton" */ './ItemList/ItemListButton')
@@ -51,5 +45,11 @@ export default {
   itemlistnew: dynamic(() =>
     import(/* webpackChunkName: "blazePbItemListNew" */ './ItemList/ItemListNew')
   ),
-  backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop'))
+  backtotop: dynamic(() => import(/* webpackChunkName: "blazePbBackToTop" */ './BackToTop')),
+  contentgroup: dynamic(() =>
+    import(/* webpackChunkName: "blazePbContentGroup" */ './ContentGroup')
+  ),
+  contentgroupsection: dynamic(() =>
+    import(/* webpackChunkName: "blazePbContentGroupSection" */ './ContentGroupSection')
+  )
 };

package/src/constants/index.js

@@ -35,10 +35,7 @@ const CATEGORY_ID = 'categoryId';
 const PUBLISHED = 'published';
 const ID = 'id';
 const LINK = 'link';
-const EMAIL = 'email';
-const PASSWORD = 'password';
 const LOGOUT = 'logout';
-const LOGIN_FORM = 'loginForm';
 const GRAPH_QL_ERROR = 'GraphQL error: ';
 const HOVER = 'hover';
 const MOUSE_ENTER = 'mouseenter';
@@ -130,10 +127,6 @@ const BREAKPOINT_SIZES = {
 
 const MAX_BANNER_HEIGHT = 250;
 const MIN_BANNER_HEIGHT = 90;
-const PASSWORD_REGEX = /^(?=.*\d)(?=.*[a-z])(?=.*[A-Z])(?=.*[^a-zA-Z0-9])(?!.*\s).{8,}$/;
-const PASSWORD_VALIDATION_MESSAGE =
-  'Must contain 8 or more characters with a mix of upper & lower case letters, numbers & symbols and no spaces';
-const PASSWORD_CONFIRM_MESSAGE = 'Passwords must match';
 const ALLOWED_BLOCK_TYPES = ['p', 'ul', 'ol'];
 
 const PREHEADER_PROP = 'alternativePreHeader';
@@ -287,8 +280,6 @@ export {
   LOAD_MORE,
   CLASSIC,
   BREAKPOINT_SIZES,
-  EMAIL,
-  PASSWORD,
   LOGOUT,
   MIN_BANNER_HEIGHT,
   MAX_BANNER_HEIGHT,
@@ -305,10 +296,6 @@ export {
   HIDDEN,
   MENU_ITEM,
   SUB_MENU,
-  LOGIN_FORM,
-  PASSWORD_REGEX,
-  PASSWORD_VALIDATION_MESSAGE,
-  PASSWORD_CONFIRM_MESSAGE,
   ELEMENT,
   ALLOWED_BLOCK_TYPES,
   PREHEADER_PROP,

package/src/hooks/helpers/get-banners-by-type.js

@@ -15,7 +15,7 @@ const getBannersByType = (items, bannerType) => {
           type === PB_TYPE_BANNER && insertionType === PB_TYPE_TEXTBLOCK
       );
 
-      const hasTextBlockBanners = textBlockBanners && textBlockBanners.length;
+      const hasTextBlockBanners = !!textBlockBanners && !!textBlockBanners.length;
 
       return [hasTextBlockBanners, textBlockBanners];
     }

package/src/index.js

@@ -11,7 +11,7 @@ export {
   getSingleEntitySchema,
   getUser
 } from './application/query';
-export { buildPropsQuery, getUnpublishedEntityName, renderChildren } from './helpers';
+export { buildPropsQuery, getUnpublishedEntityName, renderChildren, hasChildren } from './helpers';
 export { withTitle } from './HOC';
 export { useGetEntitySchema, useGetEntitySchemasAsObj, useGetSingleEntitySchema } from './hooks';
 export { summaryComponents } from './components/DataSummary/DataSummaryTypes';

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

@@ -12,6 +12,13 @@ jest.mock('next/router', () => ({
   useRouter: jest.fn(() => ({ asPath: '' }))
 }));
 
+jest.mock('@blaze-cms/utils-handlebars', () => ({
+  useStringTemplate: jest.fn((parent, [text, after, url]) => ({
+    loading: false,
+    data: [text, after, url]
+  }))
+}));
+
 const componentProps = {
   type: 'icon',
   text: 'test',

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

@@ -16,8 +16,17 @@ const render = async (Component, props) => {
 };
 
 const CATEGORY = 'category-name';
-const firstPropToDisplay = 'some description';
-const secondPropToDisplay = 'extra props';
+
+const propsToDisplay = [
+  {
+    htmlAttribute: 'data-testid'
+  }
+];
+const getMockedParsedProp = children => <>{children}</>;
+const firstPropValue = 'some description';
+const secondPropValue = 'extra props';
+const firstPropToDisplay = getMockedParsedProp(['', '', firstPropValue, '', '']);
+const secondPropToDisplay = getMockedParsedProp(['', '', secondPropValue, '', '']);
 
 const componentProps = {
   id: 'id',
@@ -41,7 +50,8 @@ const componentProps = {
   displayCategory: true,
   displayThumbnail: true,
   displayTitle: true,
-  propsToDisplay: [firstPropToDisplay, secondPropToDisplay]
+  propsToDisplay,
+  parsedPropsToDisplay: [firstPropToDisplay, secondPropToDisplay]
 };
 
 const preHeaderName = 'Pre header';
@@ -54,7 +64,8 @@ jest.mock('../../../../../src/components/LazyImage', () => ({ src, alt }) => (
 
 describe('Card component', () => {
   it('should render without throwing an error and match snapshot', async () => {
-    const { asFragment } = await render(Card, componentProps);
+    const { asFragment, getByTestId } = await render(Card, componentProps);
+    expect(getByTestId(encodeURIComponent(firstPropValue))).toBeDefined();
     expect(asFragment()).toMatchSnapshot();
   });
 
@@ -159,8 +170,8 @@ describe('Card component', () => {
     const { getByText } = await render(Card, componentProps);
 
     await waitFor(() => {
-      expect(getByText(firstPropToDisplay)).toBeInTheDocument();
-      expect(getByText(secondPropToDisplay)).toBeInTheDocument();
+      expect(getByText(firstPropValue)).toBeInTheDocument();
+      expect(getByText(secondPropValue)).toBeInTheDocument();
     });
   });
 
@@ -170,7 +181,7 @@ describe('Card component', () => {
     const { getByText } = await render(Card, { ...componentProps, ...propsToDisplayModifiers });
 
     await waitFor(() => {
-      const span = getByText(firstPropToDisplay).closest('span');
+      const span = getByText(firstPropValue).closest('span');
       expect(span).not.toHaveAttribute(modifier);
     });
   });

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

@@ -44,6 +44,7 @@ exports[`Card component should not render alternative headline if alternativePre
         >
           <span
             class=""
+            data-testid="some%20description"
           >
             some description
           </span>
@@ -112,6 +113,7 @@ exports[`Card component should not render alternative headline if displayCategor
         >
           <span
             class=""
+            data-testid="some%20description"
           >
             some description
           </span>
@@ -186,6 +188,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
         >
           <span
             class=""
+            data-testid="some%20description"
           >
             some description
           </span>
@@ -259,6 +262,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
         >
           <span
             class=""
+            data-testid="some%20description"
           >
             some description
           </span>
@@ -333,6 +337,7 @@ exports[`Card component should render without throwing an error and match snapsh
         >
           <span
             class=""
+            data-testid="some%20description"
           >
             some description
           </span>

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

@@ -0,0 +1,13 @@
+import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import ContentGroup from '../../../../../src/components/ContentGroup/ContentGroup';
+
+describe('ContentGroup component', () => {
+  it('should match snapshot and render based on contentType prop', () => {
+    const { asFragment: tabContentGroup } = render(ContentGroup, { contentType: 'tab' });
+    const { asFragment: sidepanelContentGroup } = render(ContentGroup, {
+      contentType: 'sidepanel'
+    });
+    expect(tabContentGroup()).toMatchSnapshot();
+    expect(sidepanelContentGroup()).toMatchSnapshot();
+  });
+});

package/tests/unit/src/components/ContentGroup/ContentGroupTabs.test.js

@@ -0,0 +1,16 @@
+import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import ContentGroupTabs from '../../../../../src/components/ContentGroup/ContentGroupTabs';
+
+describe('ContentGroupTabs component', () => {
+  it('should match snapshot and render tabs content', () => {
+    const { asFragment: tabContentGroup } = render(ContentGroupTabs, { contentType: 'tab' });
+    expect(tabContentGroup()).toMatchSnapshot();
+  });
+
+  it('should match snapshot and render sidepanel content', () => {
+    const { asFragment: sidepanelContentGroup } = render(ContentGroupTabs, {
+      contentType: 'sidepanel'
+    });
+    expect(sidepanelContentGroup()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentGroup component should match snapshot and render based on contentType prop 1`] = `<DocumentFragment />`;
+
+exports[`ContentGroup component should match snapshot and render based on contentType prop 2`] = `<DocumentFragment />`;

package/tests/unit/src/components/ContentGroup/__snapshots__/ContentGroupTabs.test.js.snap

@@ -0,0 +1,5 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentGroupTabs component should match snapshot and render sidepanel content 1`] = `<DocumentFragment />`;
+
+exports[`ContentGroupTabs component should match snapshot and render tabs content 1`] = `<DocumentFragment />`;

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

@@ -0,0 +1,17 @@
+import React from 'react';
+import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import ContentGroupSection from '../../../../../src/components/ContentGroupSection/ContentGroupSection';
+
+describe('ContentGroupSection component', () => {
+  it('should not render if section has no children', () => {
+    const { asFragment: contentGroupSection } = render(ContentGroupSection);
+    expect(contentGroupSection()).toMatchSnapshot();
+  });
+
+  it('should render if section has children', () => {
+    const { asFragment: contentGroupSection } = render(ContentGroupSection, {
+      children: [<div>child div</div>]
+    });
+    expect(contentGroupSection()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,15 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ContentGroupSection component should not render if section has no children 1`] = `<DocumentFragment />`;
+
+exports[`ContentGroupSection component should render if section has children 1`] = `
+<DocumentFragment>
+  <div
+    class="content-group-section"
+  >
+    <div>
+      child div
+    </div>
+  </div>
+</DocumentFragment>
+`;