@blaze-cms/react-page-builder 0.120.1 → 0.122.0-alpha.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@blaze-cms/react-page-builder",
-  "version": "0.120.1",
+  "version": "0.122.0-alpha.0",
   "description": "Blaze react page builder",
   "main": "lib/index.js",
   "module": "lib-es/index.js",
@@ -33,6 +33,7 @@
     "@blaze-cms/nextjs-components": "^0.119.0",
     "@blaze-cms/setup-ui": "^0.92.0",
     "@blaze-cms/utils": "^0.118.0",
+    "@blaze-react/breadcrumb": "0.8.0-alpha.60",
     "@blaze-react/button": "0.5.19",
     "@blaze-react/checkboxes": "0.5.31",
     "@blaze-react/input": "0.5.30",
@@ -83,5 +84,5 @@
     "lib/*",
     "lib-es/*"
   ],
-  "gitHead": "1cf69b010ec6b72069e9d9e231c1fec16232a2d7"
+  "gitHead": "246146ffdb3f5e5bbdd70f2a6f9d383cab59b3af"
 }

package/src/application/query/index.js

@@ -45,6 +45,20 @@ const getSingleEntitySchema = gql`
   }
 `;
 
+const getRecordParents = queryName => gql`
+query getRecordParents($id: String!){
+  recordParents: ${queryName}(id: $id){
+    id,
+    name,
+    url,
+    parents {
+      id,
+      name
+      url
+    }
+  }
+}`;
+
 const getMultipleSchema = identifiers => {
   const queryString = identifiers
     .map(
@@ -136,5 +150,6 @@ export {
   getSearchPublishedContent,
   getCount,
   getMultipleSchema,
-  getUser
+  getUser,
+  getRecordParents
 };

package/src/components/Breadcrumb/Breadcrumb.js

@@ -0,0 +1,73 @@
+import React, { useContext } from 'react';
+import { MainContext, Link } from '@blaze-cms/nextjs-components';
+import PropTypes from 'prop-types';
+import { useQuery } from '@apollo/client';
+import Breadcrumbs from '@blaze-react/breadcrumb';
+import { getRecordParents, getSingleEntitySchema } from '../../application/query';
+import Wrapper from '../Wrapper';
+import { getClassModifiers } from '../../utils';
+
+const Breadcrumb = ({ type, ...otherProps }) => {
+  const { isPreview } = useContext(MainContext);
+  const { parent } = otherProps;
+  const { itemEntity, itemId } = parent;
+
+  const { data = {}, error, loading } = useQuery(getSingleEntitySchema, {
+    variables: { id: itemEntity }
+  });
+
+  const { getEntitySchema = {} } = data;
+  const { actions: { getPublished, get } = {} } = getEntitySchema;
+  const actionKey = isPreview ? get : getPublished || get;
+
+  const { data: parentsData = [], loading: parentsLoading } = useQuery(
+    getRecordParents(actionKey),
+    {
+      variables: { id: itemId },
+      skip: !actionKey
+    }
+  );
+
+  if (loading || parentsLoading) return '';
+  if (error) return error.message;
+  if (!data) return null;
+
+  const modifiers = getClassModifiers('breadcrumb', otherProps);
+  const { recordParents: { name, url, parents = [] } = {} } = parentsData;
+
+  if (url === '/') return '';
+
+  const breadcrumbItems = [
+    {
+      name,
+      url
+    },
+    ...parents,
+    {
+      name: 'Home',
+      url: '/'
+    }
+  ];
+
+  return (
+    <Wrapper className={type} modifiers={modifiers}>
+      <Breadcrumbs>
+        {breadcrumbItems.reverse().map(item => (
+          <Link key={item.url} href={item.url}>
+            {item.name}
+          </Link>
+        ))}
+      </Breadcrumbs>
+    </Wrapper>
+  );
+};
+
+Breadcrumb.propTypes = {
+  type: PropTypes.string
+};
+
+Breadcrumb.defaultProps = {
+  type: 'breadcrumb'
+};
+
+export default Breadcrumb;

package/src/components/Breadcrumb/index.js

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

package/src/components/Image/Image.js

@@ -34,7 +34,11 @@ const Image = ({
 }) => {
   const [displayLightbox, setDisplayLightbox] = useState(false);
   const [isIntersecting, outerRef] = useInView(IN_VIEW_CONFIG);
-  const { caption, altText, hrefUrl } = getImageData(otherProps, imageData);
+
+  const { caption, altText, hrefUrl, credits: imageDataCredits } = getImageData(
+    otherProps,
+    imageData
+  );
 
   const href = url || hrefUrl;
 
@@ -62,7 +66,7 @@ const Image = ({
   });
 
   // deprecated: imageCredits is deprecated. This code is to handle legacy data. check before changing/removing
-  const creditsValue = credits || imageCredits;
+  const creditsValue = credits || imageCredits || imageDataCredits;
 
   const shouldDisplayCredits = shouldShowProperty({
     isDisplayed: areImageCreditsDisplayed,
@@ -71,6 +75,7 @@ const Image = ({
   const { shouldDisplayCount, countMessage } = getDisplayCountData(displayCount, images);
   const sizeKey = [IMAGE, isHero ? HERO : '', _modifier].filter(Boolean).join(':');
   const shouldDisplayImage = !!imageUrl && (priority || isIntersecting);
+
   return (
     <Wrapper ref={outerRef} className={wrapperClassName} modifiers={modifiers} {...otherProps}>
       {elementTitle && <h2 className="heading heading--section">{elementTitle}</h2>}

package/src/components/List/components/Full/FullRender.js

@@ -1,4 +1,6 @@
-import React, { Fragment } from 'react';
+import React, { Fragment, useContext } from 'react';
+import { MainContext } from '@blaze-cms/nextjs-components';
+import { MainContextProvider } from '@blaze-cms/nextjs-tools';
 import PropTypes from 'prop-types';
 import uuid from 'uuid/v1';
 import FullRenderItem from './FullRenderItem';
@@ -9,6 +11,7 @@ import Wrapper from '../../../Wrapper';
 import { checkIfShouldRenderBanner } from '../helpers';
 
 const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props }) => {
+  const contextProps = useContext(MainContext);
   const pageBuilderID = uuid();
   const { parent, entity, propsToDisplay, banner, hasBanner } = props;
   const bannerProps = banner
@@ -19,7 +22,7 @@ const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props })
   const WrapperToUse = omitWrappers ? Fragment : Wrapper;
 
   return (
-    <>
+    <MainContextProvider value={{ ...contextProps, isPreview: false }}>
       <WrapperToUse className="list list--full">
         {orderedListData.map(({ id, ...entityProps }, i) => {
           const shouldRenderBanner = !!bannerProps && checkIfShouldRenderBanner(i, bannerProps);
@@ -45,7 +48,7 @@ const FullRender = ({ orderedListData, omitWrappers, paginationType, ...props })
       {paginationType === LOAD_MORE && (
         <ListPagination paginationType={paginationType} {...props} />
       )}
-    </>
+    </MainContextProvider>
   );
 };
 

package/src/components/List/components/Full/FullRenderItem.js

@@ -31,7 +31,6 @@ const FullRenderItem = ({
   const currentItemIndex = initialOffset + index;
   const renderWaypoint =
     isInfinite && shouldRenderWaypoint(index, currentListLength, currentItemIndex, listTotal);
-
   return (
     <>
       {renderWaypoint && <Waypoint onEnter={triggerInfiniteScroll} />}

package/src/components/SocialFollow/sf.config.js

@@ -4,7 +4,8 @@ import {
   FaPinterestP,
   FaInstagram,
   FaLinkedinIn,
-  FaYoutube
+  FaYoutube,
+  FaTiktok
 } from 'react-icons/fa';
 
 export const BASE_CLASS_NAME_FOLLOW = 'social__list-item social__list-item--follow';
@@ -47,5 +48,11 @@ export const SOCIAL_NETWORKS = {
     className: 'youtube',
     Icon: FaYoutube,
     spanClassName: 'hidden'
+  },
+  tiktok: {
+    name: 'TikTok',
+    className: 'tiktok',
+    Icon: FaTiktok,
+    spanClassName: 'hidden'
   }
 };

package/src/components/index.js

@@ -37,5 +37,6 @@ export default {
   ),
   passwordresetrequest: dynamic(() =>
     import(/* webpackChunkName: "blazePbPasswordResetRequest" */ './PasswordResetRequest')
-  )
+  ),
+  breadcrumb: dynamic(() => import(/* webpackChunkName: "blazePbBreadcrumb" */ './Breadcrumb'))
 };

package/src/constants/index.js

@@ -110,7 +110,12 @@ const LOAD_MORE = 'loadMore';
 const PAGINATION_DISPLAY_LIMIT = 10;
 const PAGINATION_DIFFERENCE = 5;
 
-const PROPS_TO_CHECK = [['altText', 'alt'], ['caption', 'caption'], ['hrefUrl', 'hrefUrl']];
+const PROPS_TO_CHECK = [
+  ['altText', 'alt'],
+  ['caption', 'caption'],
+  ['hrefUrl', 'hrefUrl'],
+  ['credits', 'credits']
+];
 
 const JW_PLAYER_TYPE_FILE = 'file';
 const VIDEO_WRAPPER_CLASS_NAME = 'video__wrapper';

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

@@ -0,0 +1,103 @@
+import React from 'react';
+import '@testing-library/jest-dom/extend-expect';
+import { render as RenderComponent } from '@testing-library/react';
+import { MockedProvider } from '@apollo/client/testing';
+import { render } from '@blaze-cms/tools/test-helpers/test-functions';
+import Breadcrumb from '../../../../../src/components/Breadcrumb';
+import { getAction, getRecordParents } from '../../../../../src/application/query';
+
+jest.mock('@apollo/client', () => ({
+  ...jest.requireActual('@apollo/client'),
+  useQuery: jest.fn(({ data, loading, error }) => ({ data, loading, error }))
+}));
+jest.mock('next/router', () => ({
+  useRouter: jest.fn(() => ({ asPath: 'test-url' }))
+}));
+
+const actionKey = 'getPublishedPage';
+const id = 'record id';
+const action = getAction(actionKey, 'id, name');
+const getEntityDataMock = {
+  request: {
+    query: action,
+    variables: {
+      id
+    }
+  },
+  result: {
+    data: {
+      [actionKey]: {
+        id,
+        name: 'record name'
+      }
+    }
+  }
+};
+
+const getRecordParentsMock = {
+  request: {
+    query: getRecordParents(actionKey),
+    variables: { id: 'id' },
+    skip: false
+  },
+  result: {
+    data: {
+      recordParents: {
+        parents: [
+          {
+            name: 'parent page',
+            url: '/top-parent/parent'
+          }
+        ]
+      }
+    }
+  }
+};
+
+const breadcrumbMock = {
+  router: {
+    asPath: 'test-url'
+  },
+  client: {},
+  type: 'breadcrumb',
+  id: 'id',
+  pageName: 'page',
+  slug: 'page',
+  parent: {
+    itemEntity: 'page',
+    tags: [],
+    category: ''
+  }
+};
+
+const mocks = [getEntityDataMock, getRecordParentsMock];
+
+const setup = (props = breadcrumbMock) =>
+  RenderComponent(
+    <MockedProvider mocks={mocks}>
+      <Breadcrumb {...props} />
+    </MockedProvider>
+  );
+
+describe('Breadcrumb component', () => {
+  it('should not render if loading, err or no data exists', () => {
+    const { asFragment } = render(Breadcrumb, {
+      ...breadcrumbMock,
+      action: { data: null, loading: true, error: null }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should match snapshot', () => {
+    const { asFragment } = render(Breadcrumb, {
+      ...breadcrumbMock,
+      action: { data: {}, loading: false, error: null }
+    });
+    expect(asFragment()).toMatchSnapshot();
+  });
+
+  it('should render', () => {
+    const { asFragment } = setup();
+    expect(asFragment()).toMatchSnapshot();
+  });
+});

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

@@ -0,0 +1,82 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Breadcrumb component should match snapshot 1`] = `
+<DocumentFragment>
+  <div
+    class="breadcrumb "
+  >
+    <ul
+      class="breadcrumb"
+    >
+      <li
+        class="breadcrumb__item"
+      >
+        <a
+          href="/"
+        >
+          Home
+        </a>
+      </li>
+      <li
+        class="breadcrumb__item"
+      >
+        <a />
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Breadcrumb component should not render if loading, err or no data exists 1`] = `
+<DocumentFragment>
+  <div
+    class="breadcrumb "
+  >
+    <ul
+      class="breadcrumb"
+    >
+      <li
+        class="breadcrumb__item"
+      >
+        <a
+          href="/"
+        >
+          Home
+        </a>
+      </li>
+      <li
+        class="breadcrumb__item"
+      >
+        <a />
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;
+
+exports[`Breadcrumb component should render 1`] = `
+<DocumentFragment>
+  <div
+    class="breadcrumb "
+  >
+    <ul
+      class="breadcrumb"
+    >
+      <li
+        class="breadcrumb__item"
+      >
+        <a
+          href="/"
+        >
+          Home
+        </a>
+      </li>
+      <li
+        class="breadcrumb__item"
+      >
+        <a />
+      </li>
+    </ul>
+  </div>
+</DocumentFragment>
+`;

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

@@ -6,6 +6,10 @@ Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],
   },
+  "breadcrumb": Object {
+    "$$typeof": Symbol(react.forward_ref),
+    "render": [Function],
+  },
   "button": Object {
     "$$typeof": Symbol(react.forward_ref),
     "render": [Function],

package/tests/unit/src/utils/get-image-data.test.js

@@ -4,17 +4,18 @@ import { getImageData } from '../../../../src/utils';
 describe('get image data', () => {
   const altText = 'altText-test-prop';
   const caption = 'caption-test-prop';
-  const imageCredits = 'credits-test-prop';
+  const credits = 'credits-test-prop';
   const mockedProps = {
     alt: altText,
     caption,
-    imageCredits
+    credits
   };
 
   const mockedData = {
     altText: 'altText-test-data',
     caption: 'caption-test-data',
-    hrefUrl: 'hrefUrl-test-data'
+    hrefUrl: 'hrefUrl-test-data',
+    credits: 'credits-test-data'
   };
 
   it('should be a function', () => {
@@ -28,6 +29,7 @@ describe('get image data', () => {
   it('should return expected value if has props', () => {
     const imageData = getImageData(mockedProps, {});
     const expected = {
+      credits,
       altText,
       caption,
       hrefUrl: ''
@@ -45,7 +47,8 @@ describe('get image data', () => {
     const expected = {
       altText,
       caption,
-      hrefUrl: 'hrefUrl-test-data'
+      hrefUrl: 'hrefUrl-test-data',
+      credits
     };
     expect(imageData).toEqual(expected);
   });