@blaze-cms/react-page-builder 0.114.1 → 0.116.0-alpha.2

package/src/components/SearchFilter/SearchFilter/ResetDesktopForm.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import PropTypes from 'prop-types';
+import { FaRedoAlt } from 'react-icons/fa';
 import { RESET } from '../constants';
 
 const ResetDesktopForm = ({ handleReset }) => (
@@ -10,7 +11,9 @@ const ResetDesktopForm = ({ handleReset }) => (
       title="reset--button"
       data-testid="reset-icon"
       onClick={handleReset}>
-      <i className="fas fa-redo-alt" />
+      <i>
+        <FaRedoAlt />
+      </i>
     </button>
 
     <div role="button" onClick={handleReset} data-testid="reset-button">

package/src/components/SearchFilter/components/Checkbox.js

@@ -2,11 +2,10 @@ import React, { useState } from 'react';
 import PropTypes from 'prop-types';
 import upperFirst from 'lodash.upperfirst';
 import { Checkboxes } from '@blaze-react/checkboxes';
+import { FaChevronDown, FaChevronUp } from 'react-icons/fa';
 import { withTitle } from '../../../HOC';
 import { decodeValue } from '../helpers';
-import { LIMIT_MIN, LIMIT_MAX, MORE, LESS, DOWN, UP } from '../constants';
-
-const getButtonInfo = isMore => (isMore ? { icon: DOWN, text: MORE } : { icon: UP, text: LESS });
+import { LIMIT_MIN, LIMIT_MAX, MORE, LESS } from '../constants';
 
 const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldSearch }) => {
   const [checkboxLimit, setCheckboxLimit] = useState(null);
@@ -69,8 +68,21 @@ const Checkbox = ({ data, prop, updateFilterValues, filterValues, label, shouldS
       />
       {data[prop].buckets.length > LIMIT_MIN && (
         <div role="button" className="see-more" onClick={handleCheckboxOptions}>
-          <i className={`fas fa-chevron-${getButtonInfo(shouldDisplayMore).icon}`} />
-          {` See ${getButtonInfo(shouldDisplayMore).text}`}
+          {shouldDisplayMore ? (
+            <>
+              <i>
+                <FaChevronDown className="inline-icon" />
+              </i>
+              {` See ${MORE}`}
+            </>
+          ) : (
+            <>
+              <i>
+                <FaChevronUp className="inline-icon" />
+              </i>
+              {` See ${LESS}`}
+            </>
+          )}
         </div>
       )}
     </>

package/src/components/SearchFilter/components/TextSearch.js

@@ -1,6 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import Input from '@blaze-react/input';
+import { MdSearch } from 'react-icons/md';
 import { withTitle } from '../../../HOC';
 import { SEARCH_TERM } from '../constants';
 
@@ -24,7 +25,9 @@ const TextSearch = ({ label, searchValue, updateFilterValues, handleSubmit, filt
           e.preventDefault();
           updateFilterValues({ [SEARCH_TERM]: searchValue }, true);
         }}>
-        <i className="material-icons">search</i>
+        <i>
+          <MdSearch />
+        </i>
       </button>
     </div>
   </div>

package/src/components/SearchFilter/constants.js

@@ -13,8 +13,6 @@ const LIMIT_MIN = 5;
 const LIMIT_MAX = 1000;
 const MORE = 'more';
 const LESS = 'less';
-const DOWN = 'down';
-const UP = 'up';
 const UPDATED_RANGES = 'updated_ranges';
 const MIN_VALUE = 'min-value';
 const MAX_VALUE = 'max-value';
@@ -52,8 +50,6 @@ export {
   LIMIT_MAX,
   MORE,
   LESS,
-  DOWN,
-  UP,
   UPDATED_RANGES,
   MIN_VALUE,
   MAX_VALUE,

package/src/components/SocialFollow/SFItem.js

@@ -4,12 +4,14 @@ import PropTypes from 'prop-types';
 import { SOCIAL_NETWORKS, BASE_CLASS_NAME_FOLLOW } from './sf.config';
 
 const SFItem = ({ url, id }) => {
-  const { name, className, icon, spanClassName } = SOCIAL_NETWORKS[id];
+  const { name, className, Icon, spanClassName } = SOCIAL_NETWORKS[id];
 
   return (
     <li className={BASE_CLASS_NAME_FOLLOW}>
       <a title={name} href={url} className={className} rel="noopener nofollow" target="_blank">
-        <i className={`fab ${icon}`} />
+        <i>
+          <Icon />
+        </i>
         <span className={`social__network ${spanClassName}`}>{name}</span>
       </a>
     </li>

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

@@ -1,3 +1,12 @@
+import {
+  FaFacebookF,
+  FaTwitter,
+  FaPinterestP,
+  FaInstagram,
+  FaLinkedinIn,
+  FaYoutube
+} from 'react-icons/fa';
+
 export const BASE_CLASS_NAME_FOLLOW = 'social__list-item social__list-item--follow';
 export const PORTRAIT = 'portrait';
 export const LANDSCAPE = 'landscape';
@@ -6,37 +15,37 @@ export const SOCIAL_NETWORKS = {
   facebook: {
     name: 'Facebook',
     className: 'facebook',
-    icon: 'fa-facebook-f',
+    Icon: FaFacebookF,
     spanClassName: 'hidden'
   },
   twitter: {
     name: 'Twitter',
     className: 'twitter',
-    icon: 'fa-twitter',
+    Icon: FaTwitter,
     spanClassName: 'hidden'
   },
   pinterest: {
     name: 'Pinterest',
     className: 'pinterest',
-    icon: 'fa-pinterest-p',
+    Icon: FaPinterestP,
     spanClassName: 'hidden'
   },
   instagram: {
     name: 'Instagram',
     className: 'instagram',
-    icon: 'fa-instagram',
+    Icon: FaInstagram,
     spanClassName: 'hidden'
   },
   linkedin: {
     name: 'Linkedin',
     className: 'linkedin',
-    icon: 'fa-linkedin-in',
+    Icon: FaLinkedinIn,
     spanClassName: 'hidden'
   },
   youtube: {
     name: 'YouTube',
     className: 'youtube',
-    icon: 'fa-youtube',
+    Icon: FaYoutube,
     spanClassName: 'hidden'
   }
 };

package/src/components/TextBlock/index.js

@@ -1,16 +1,16 @@
 import React from 'react';
 import PropTypes from 'prop-types';
-import { parseTextBlock } from '@blaze-react/drafteditor';
+import { parseTextBlock } from '../../helpers';
 import Wrapper from '../Wrapper';
 import TextBlockRender from './TextBlockRender';
 import BlazeLink from '../BlazeLink';
 
 import getClassModifiers from '../../utils/get-class-modifiers';
 
-const TextBlock = ({ editor, modifier, ...variableProps }) => {
-  if (!editor) return null;
+const TextBlock = ({ html, modifier, ...variableProps }) => {
+  if (!html) return null;
 
-  const parsedTextBlock = parseTextBlock({ editor, LinkWrapper: BlazeLink });
+  const parsedTextBlock = parseTextBlock({ html, LinkWrapper: BlazeLink });
   const modifiers = getClassModifiers('textBlock', { modifier, ...variableProps });
 
   // todo: the BLAZE_PB_TEXTBLOCK_WRAPPER_ENABLE flag is depreciated. Remove when appropriate
@@ -27,7 +27,7 @@ const TextBlock = ({ editor, modifier, ...variableProps }) => {
 };
 
 TextBlock.propTypes = {
-  editor: PropTypes.string,
+  html: PropTypes.string,
   modifier: PropTypes.string,
   gtmClassName: PropTypes.string,
   elementTitle: PropTypes.string
@@ -37,7 +37,7 @@ TextBlock.defaultProps = {
   modifier: '',
   gtmClassName: '',
   elementTitle: '',
-  editor: null
+  html: ''
 };
 
 export default TextBlock;

package/src/constants/index.js

@@ -194,6 +194,9 @@ const ALL_AZ_SORT = {
 
 const SCROLL_OFFSET = process.env.BLAZE_SCROLL_OFFSET || 50;
 
+const ANCHOR_TAG = 'a';
+const TARGET_BLANK = '_blank';
+
 export {
   BLANK_SPACE_UNICODE_STRING,
   BOLD_TAG,
@@ -297,5 +300,7 @@ export {
   AZ_AGGS,
   ALL_AZ_SORT,
   AZ,
-  SCROLL_OFFSET
+  SCROLL_OFFSET,
+  ANCHOR_TAG,
+  TARGET_BLANK
 };

package/src/helpers/index.js

@@ -50,3 +50,4 @@ export { default as removeExtraItems } from './remove-extra-items';
 export { default as getParsedPropValues } from './get-parsed-prop-values';
 export { default as getSanitizedPropValues } from './get-sanitized-prop-values';
 export { default as appendImages } from './append-images';
+export { default as parseTextBlock } from './parse-TextBlock';

package/src/helpers/parse-TextBlock.js

@@ -0,0 +1,29 @@
+import parseHTML, { domToReact } from 'html-react-parser';
+import React from 'react';
+import { ANCHOR_TAG, TARGET_BLANK } from '../constants';
+
+function parseTextBlock(config) {
+  const { html, LinkWrapper, useTargetBlank } = config;
+
+  const options = {
+    replace: domNode => {
+      const { attribs, children, name: tagName } = domNode;
+      if (tagName === ANCHOR_TAG) {
+        const target = useTargetBlank ? TARGET_BLANK : attribs.target;
+
+        return LinkWrapper ? (
+          <LinkWrapper {...attribs} target={target}>
+            {domToReact(children, options)}
+          </LinkWrapper>
+        ) : (
+          domNode
+        );
+      }
+      return null;
+    }
+  };
+
+  return parseHTML(html, options);
+}
+
+export default parseTextBlock;

package/tests/unit/src/components/Image/GlobalLightbox/__snapshots__/GlobalLightbox.test.js.snap

@@ -19,9 +19,21 @@ exports[`GlobalLightbox component should match snapshot 1`] = `
           class="modal__close"
           role="button"
         >
-          <i
-            class="fas fa-times"
-          />
+          <i>
+            <svg
+              fill="currentColor"
+              height="1em"
+              stroke="currentColor"
+              stroke-width="0"
+              viewBox="0 0 352 512"
+              width="1em"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M242.72 256l100.07-100.07c12.28-12.28 12.28-32.19 0-44.48l-22.24-22.24c-12.28-12.28-32.19-12.28-44.48 0L176 189.28 75.93 89.21c-12.28-12.28-32.19-12.28-44.48 0L9.21 111.45c-12.28 12.28-12.28 32.19 0 44.48L109.28 256 9.21 356.07c-12.28 12.28-12.28 32.19 0 44.48l22.24 22.24c12.28 12.28 32.2 12.28 44.48 0L176 322.72l100.07 100.07c12.28 12.28 32.2 12.28 44.48 0l22.24-22.24c12.28-12.28 12.28-32.19 0-44.48L242.72 256z"
+              />
+            </svg>
+          </i>
         </div>
       </header>
       <div

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/CloseMobileForm.test.js.snap

@@ -9,10 +9,25 @@ exports[`CloseMobileForm component should render without throwing error and matc
       Search refinement
     </p>
     <i
-      class="material-icons"
       role="button"
     >
-      close
+      <svg
+        fill="currentColor"
+        height="1em"
+        stroke="currentColor"
+        stroke-width="0"
+        viewBox="0 0 24 24"
+        width="1em"
+        xmlns="http://www.w3.org/2000/svg"
+      >
+        <path
+          d="M0 0h24v24H0z"
+          fill="none"
+        />
+        <path
+          d="M19 6.41L17.59 5 12 10.59 6.41 5 5 6.41 10.59 12 5 17.59 6.41 19 12 13.41 17.59 19 19 17.59 13.41 12z"
+        />
+      </svg>
     </i>
   </div>
 </DocumentFragment>

package/tests/unit/src/components/SearchFilter/SearchFilter/__snapshots__/ResetDesktopForm.test.js.snap

@@ -11,9 +11,21 @@ exports[`ResetDesktopForm component should render without throwing error and mat
       title="reset--button"
       type="button"
     >
-      <i
-        class="fas fa-redo-alt"
-      />
+      <i>
+        <svg
+          fill="currentColor"
+          height="1em"
+          stroke="currentColor"
+          stroke-width="0"
+          viewBox="0 0 512 512"
+          width="1em"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <path
+            d="M256.455 8c66.269.119 126.437 26.233 170.859 68.685l35.715-35.715C478.149 25.851 504 36.559 504 57.941V192c0 13.255-10.745 24-24 24H345.941c-21.382 0-32.09-25.851-16.971-40.971l41.75-41.75c-30.864-28.899-70.801-44.907-113.23-45.273-92.398-.798-170.283 73.977-169.484 169.442C88.764 348.009 162.184 424 256 424c41.127 0 79.997-14.678 110.629-41.556 4.743-4.161 11.906-3.908 16.368.553l39.662 39.662c4.872 4.872 4.631 12.815-.482 17.433C378.202 479.813 319.926 504 256 504 119.034 504 8.001 392.967 8 256.002 7.999 119.193 119.646 7.755 256.455 8z"
+          />
+        </svg>
+      </i>
     </button>
     <div
       data-testid="reset-button"