@blaze-cms/react-page-builder 0.123.0-alpha.7 → 0.123.0

package/src/components/SearchContent/index.js

@@ -7,6 +7,7 @@ import BlazeLink from '../BlazeLink';
 
 const SearchContent = ({
   entity,
+  searchInputAlignment,
   searchInputWrapperMobile,
   searchInputWrapperDesktop,
   isMobile
@@ -49,20 +50,26 @@ const SearchContent = ({
   });
 
   if (loading) return null;
-  if (error) return `Error! ${error}`;
+  if (error) return null;
 
   const handleClick = (e, url) => {
     e.preventDefault();
     router.push(url);
   };
 
+  const handleKeyPress = e => {
+    if (e.key === 'Enter' && e.target.value !== '') {
+      router.push(`/search?search_term=${e.target.value}`);
+    }
+  };
+
   const renderResults = () => {
     // eslint-disable-next-line no-undef
     const { results } = data?.searchPublishedContent;
 
     if (results && searchTerm && searchTerm !== '') {
       return results.map(({ name, url }) => {
-        if (name.match(searchTerm)) {
+        if (name.includes(searchTerm)) {
           return (
             <BlazeLink href={url} onClick={e => handleClick(e, url)}>
               {name}
@@ -81,10 +88,10 @@ const SearchContent = ({
 
   return collapsed ? (
     <div className={isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}>
-      <div className="w-11 mx-auto">
-        <label className="relative block">
-          <span className="absolute inset-y-0 right-3 flex items-center pl-2 cursor-pointer">
-            <svg className="h-5 w-5 fill-slate-300" viewBox="0 0 20 20">
+      <div className="search-content--collapse__wrapper">
+        <label className="search-content--collapse__label">
+          <span className="search-content--collapse__icon_wrapper">
+            <svg className="search-content--collapse__icon" viewBox="0 0 20 20">
               <path
                 fillRule="evenodd"
                 d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
@@ -92,14 +99,13 @@ const SearchContent = ({
               />
             </svg>
           </span>
-          <span className="sr-only">Search</span>
           <input
             onFocus={() => setCollapsed(false)}
             onChange={e => setSearchTerm(e.target.value)}
             type="text"
             name="search"
             value=""
-            className="disabled:bg-white block bg-white w-full rounded-none border-white py-2 pl-5 pr-3 placeholder:italic placeholder:text-gray-400 focus:outline-none sm:text-sm"
+            className="search-content--collapse__input"
           />
         </label>
       </div>
@@ -107,10 +113,10 @@ const SearchContent = ({
   ) : (
     <>
       <div className={`${isMobile ? searchInputWrapperMobile : searchInputWrapperDesktop}`}>
-        <div className="w-96 mx-auto rounded-3xl">
-          <label className="relative block">
-            <span className="absolute inset-y-0 right-3 flex items-center pl-2">
-              <svg className="h-5 w-5 fill-slate-300" viewBox="0 0 20 20">
+        <div className="search-content--expanded__wrapper">
+          <label className="search-content--expanded__label">
+            <span className="search-content--expanded__icon_wrapper">
+              <svg className="search-content--expanded__icon" viewBox="0 0 20 20">
                 <path
                   fillRule="evenodd"
                   d="M8 4a4 4 0 100 8 4 4 0 000-8zM2 8a6 6 0 1110.89 3.476l4.817 4.817a1 1 0 01-1.414 1.414l-4.816-4.816A6 6 0 012 8z"
@@ -118,12 +124,12 @@ const SearchContent = ({
                 />
               </svg>
             </span>
-            <span className="sr-only">Search</span>
             <input
               type="text"
               name="search"
               onChange={e => setSearchTerm(e.target.value)}
-              className="block w-full rounded-full rounded-white py-2 pl-3 pr-3 placeholder:italic placeholder:text-slate-400 focus:outline-none sm:text-sm"
+              onKeyPress={handleKeyPress}
+              className="search-content--expanded__input"
               placeholder="Search for anything..."
               onBlur={() => {
                 if (!searchTerm || searchTerm === '') setCollapsed(true);
@@ -133,11 +139,13 @@ const SearchContent = ({
         </div>
         {data &&
           searchResultsMessage !== '' && (
-            <div className="bg-white ml-1 mr-1 rounded rounded-lg relative top-0 flex flex-col z-50 border-2 border-gray-50">
-              <div className="text-sm pt-2">{searchResultsMessage}</div>
+            <div className="search-content--results__wrapper">
+              <div className="search-content--results__wrapper--message">
+                <div className="text-sm pt-2">{searchResultsMessage}</div>
 
-              <div className="text-left px-4 py-2">
-                <div className="text-bold">{renderResults()}</div>
+                <div className="search-content--results__message">
+                  <div className="search-content--results__content">{renderResults()}</div>
+                </div>
               </div>
             </div>
           )}
@@ -147,6 +155,7 @@ const SearchContent = ({
 };
 
 SearchContent.propTypes = {
+  searchInputAlignment: PropTypes.string,
   searchInputWrapperMobile: PropTypes.string,
   searchInputWrapperDesktop: PropTypes.string,
   isMobile: PropTypes.bool,

package/src/components/SearchFilter/SearchFilter/FiltersList.js

@@ -15,7 +15,7 @@ const FiltersList = ({
 }) => {
   const { itemId } = useContext(MainContext);
 
-  return filters.map(({ type, label, propsToDisplay, rangeInterval, elementTitle }, index) => {
+  return filters.map(({ type, label, propsToDisplay, elementTitle, ...otherProps }, index) => {
     if (!propsToDisplay && !propsToDisplay.length) return null;
 
     const dynamicKey = [itemId, index].join('-');
@@ -32,6 +32,7 @@ const FiltersList = ({
             key={dynamicKey}
             className="filter__section filter__section--search-refine filter__section--search">
             <TextSearch
+              {...otherProps}
               label={label}
               elementTitle={elementTitle}
               searchValue={filterValues[SEARCH_TERM]}
@@ -47,6 +48,7 @@ const FiltersList = ({
               key={dynamicKey}
               className="filter__section filter__section--search-refine filter__section--checkboxes">
               <Checkbox
+                {...otherProps}
                 data={data}
                 prop={propsToDisplay[0]}
                 label={label}
@@ -66,6 +68,7 @@ const FiltersList = ({
               key={dynamicKey}
               className="filter__section filter__section--search-refine filter__section--selects">
               <SelectFilter
+                {...otherProps}
                 data={data}
                 prop={propsToDisplay[0]}
                 label={label}
@@ -83,9 +86,9 @@ const FiltersList = ({
           !!areAggregationsAvailable && (
             <div key={dynamicKey} className="range-slider__wrapper">
               <Range
+                {...otherProps}
                 dataAggregations={dataAggregations}
                 propsToDisplay={propsToDisplay}
-                rangeInterval={rangeInterval}
                 label={label}
                 elementTitle={elementTitle}
                 entity={entity}

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

@@ -44,8 +44,6 @@ const SearchFilter = ({
   groupAfterDesktop,
   groupAfterMobile
 }) => {
-  const [isDesktop, setIsDesktop] = useState(true);
-  const [pageWidth, setPageWidth] = useState(null);
   const [moreFiltersMobileCollapsed, setMoreFiltersMobileCollapsed] = useState(true);
   const [moreFiltersDesktopCollapsed, setMoreFiltersDesktopCollapsed] = useState(true);
   const [filterValues, dispatch] = useReducer(reducer, initialFilterValues);
@@ -55,27 +53,6 @@ const SearchFilter = ({
     handleSearch(newQuery);
   }, 200);
 
-  useEffect(
-    () => {
-      if (window && !pageWidth) {
-        setPageWidth(window.innerWidth);
-        setIsDesktop(isDeviceDesktop());
-      }
-
-      const handleResize = ({ target: { innerWidth } }) => {
-        setIsDesktop(isDeviceDesktop());
-        setPageWidth(innerWidth);
-        if (isDesktop) setDisplaySearchFilter(false);
-      };
-
-      window.addEventListener('resize', handleResize);
-      return () => {
-        window.removeEventListener('resize', handleResize);
-      };
-    },
-    [isDesktop, pageWidth, setDisplaySearchFilter]
-  );
-
   useEffect(
     () => {
       if (filterValues.shouldSearch) {
@@ -86,16 +63,9 @@ const SearchFilter = ({
     [filterValues, handleSubmit]
   );
 
-  let isDesktopFormDisplayed = true;
-  let isMobileFormDisplayed = false;
-
-  if (!isDesktop && isCollapsedOnResponsive) {
-    isMobileFormDisplayed = displaySearchFilter;
-    isDesktopFormDisplayed = false;
-  }
-
-  const formClass = classnames({
-    'filter__form filter__form--mobile': isMobileFormDisplayed
+  const formClass = classnames('filter__form filter__form--initial', {
+    'filter__form--mobile': isCollapsedOnResponsive && displaySearchFilter,
+    'filter__form--collapsible': isCollapsedOnResponsive
   });
 
   const {
@@ -122,143 +92,138 @@ const SearchFilter = ({
 
   return (
     <>
-      {isDesktopFormDisplayed || isMobileFormDisplayed ? (
-        <form
-          ref={searchFilterRef}
-          className={formClass}
-          data-testid={formId}
-          id={formId}
-          onSubmit={e => {
-            e.preventDefault();
-            const newQuery = buildQuery(filterValues, filters);
-            handleSearch(newQuery);
-          }}>
-          {isMobileFormDisplayed && (
-            <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
-          )}
-
-          <div className="filter filter--search-refine">
-            {isDesktopFormDisplayed && <ResetDesktopForm handleReset={handleReset} />}
-
-            <div className="filter__wrapper filter__wrapper--search-refine">
-              {!shouldGroup && (
+      <form
+        ref={searchFilterRef}
+        className={formClass}
+        data-testid={formId}
+        id={formId}
+        onSubmit={e => {
+          e.preventDefault();
+          const newQuery = buildQuery(filterValues, filters);
+          handleSearch(newQuery);
+        }}>
+        {displaySearchFilter && (
+          <CloseMobileForm handleClose={() => setDisplaySearchFilter(false)} />
+        )}
+
+        <div className="filter filter--search-refine">
+          <ResetDesktopForm handleReset={handleReset} />
+
+          <div className="filter__wrapper filter__wrapper--search-refine">
+            {!shouldGroup && (
+              <FiltersList
+                shouldSearch={shouldSearch}
+                data={data}
+                filters={filters}
+                hasUrl={hasUrl}
+                entity={entity}
+                filterValues={filterValues}
+                updateFilterValues={updateFilterValues}
+              />
+            )}
+
+            {shouldGroup && (
+              <>
                 <FiltersList
                   shouldSearch={shouldSearch}
                   data={data}
-                  filters={filters}
+                  filters={filters.slice(0, groupAfterMobile)}
                   hasUrl={hasUrl}
                   entity={entity}
                   filterValues={filterValues}
                   updateFilterValues={updateFilterValues}
                 />
-              )}
-
-              {shouldGroup && (
-                <>
-                  <FiltersList
-                    shouldSearch={shouldSearch}
-                    data={data}
-                    filters={filters.slice(0, groupAfterMobile)}
-                    hasUrl={hasUrl}
-                    entity={entity}
-                    filterValues={filterValues}
-                    updateFilterValues={updateFilterValues}
-                  />
 
-                  {!!groupAfterMobile && (
-                    <button
-                      className={moreFiltersMobileTogglerClass}
-                      type="button"
-                      onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
-                      Filters
-                    </button>
-                  )}
-
-                  <div className={moreFiltersMobileWrapperClass}>
-                    <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
-                      <FiltersList
-                        shouldSearch={shouldSearch && isDeviceDesktop()}
-                        data={data}
-                        filters={filters.slice(
-                          groupAfterMobile,
-                          groupAfterDesktop ? groupAfterDesktop - 1 : 0
-                        )}
-                        hasUrl={hasUrl}
-                        entity={entity}
-                        filterValues={filterValues}
-                        updateFilterValues={updateFilterValues}
-                      />
-
-                      {!!groupAfterDesktop && (
-                        <button
-                          className={moreFiltersDesktopTogglerClass}
-                          type="button"
-                          onClick={() =>
-                            setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
-                          }>
-                          More filters
-                        </button>
+                {!!groupAfterMobile && (
+                  <button
+                    className={moreFiltersMobileTogglerClass}
+                    type="button"
+                    onClick={() => setMoreFiltersMobileCollapsed(!moreFiltersMobileCollapsed)}>
+                    Filters
+                  </button>
+                )}
+
+                <div className={moreFiltersMobileWrapperClass}>
+                  <div className={MORE_FILTERS_CLASSES.MOBILE_CONTENT}>
+                    <FiltersList
+                      shouldSearch={shouldSearch && isDeviceDesktop()}
+                      data={data}
+                      filters={filters.slice(
+                        groupAfterMobile,
+                        groupAfterDesktop ? groupAfterDesktop - 1 : 0
                       )}
+                      hasUrl={hasUrl}
+                      entity={entity}
+                      filterValues={filterValues}
+                      updateFilterValues={updateFilterValues}
+                    />
+
+                    {!!groupAfterDesktop && (
+                      <button
+                        className={moreFiltersDesktopTogglerClass}
+                        type="button"
+                        onClick={() =>
+                          setMoreFiltersDesktopCollapsed(!moreFiltersDesktopCollapsed)
+                        }>
+                        More filters
+                      </button>
+                    )}
+
+                    <div className={moreFiltersDesktopWrapperClass}>
+                      <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
+                        <FiltersList
+                          shouldSearch={false}
+                          data={data}
+                          filters={filters.slice(groupAfterDesktop)}
+                          hasUrl={hasUrl}
+                          entity={entity}
+                          filterValues={filterValues}
+                          updateFilterValues={updateFilterValues}
+                        />
+                      </div>
 
-                      <div className={moreFiltersDesktopWrapperClass}>
-                        <div className={MORE_FILTERS_CLASSES.DESKTOP_CONTENT}>
-                          <FiltersList
-                            shouldSearch={false}
-                            data={data}
-                            filters={filters.slice(groupAfterDesktop)}
-                            hasUrl={hasUrl}
-                            entity={entity}
-                            filterValues={filterValues}
-                            updateFilterValues={updateFilterValues}
-                          />
-                        </div>
-
-                        <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
-                          <ResetDesktopForm handleReset={handleReset} />
+                      <div className={MORE_FILTERS_CLASSES.DESKTOP_BUTTONS}>
+                        <ResetDesktopForm handleReset={handleReset} />
 
-                          <button className="button button--full-width" type="submit">
-                            {SEARCH}
-                          </button>
-                        </div>
+                        <button className="button button--full-width" type="submit">
+                          {SEARCH}
+                        </button>
                       </div>
                     </div>
+                  </div>
 
-                    <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
-                      <ResetDesktopForm handleReset={handleReset} />
+                  <div className={MORE_FILTERS_CLASSES.MOBILE_BUTTONS}>
+                    <ResetDesktopForm handleReset={handleReset} />
 
-                      <button className="button button--full-width" type="submit">
-                        {SEARCH}
-                      </button>
-                    </div>
+                    <button className="button button--full-width" type="submit">
+                      {SEARCH}
+                    </button>
                   </div>
-                </>
-              )}
+                </div>
+              </>
+            )}
 
-              <br />
+            <br />
 
-              {isDesktopFormDisplayed && (
-                <button className="button button--full-width" type="submit">
-                  {SEARCH}
-                </button>
-              )}
-            </div>
+            {!displaySearchFilter && (
+              <button className="button button--full-width" type="submit">
+                {SEARCH}
+              </button>
+            )}
           </div>
+        </div>
+
+        {displaySearchFilter && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
+      </form>
 
-          {isMobileFormDisplayed && <MobileFormToolbar formId={formId} handleReset={handleReset} />}
-        </form>
-      ) : (
-        <>
-          {isCollapsedOnResponsive && (
-            <div
-              className="filter__refine filter__refine--mobile-close"
-              data-testid="refine-mobile">
-              <div role="button" onClick={() => setDisplaySearchFilter(true)}>
-                {REFINE}
-              </div>
+      {isCollapsedOnResponsive &&
+        !displaySearchFilter && (
+          <div className="filter__refine filter__refine--mobile-close" data-testid="refine-mobile">
+            <div role="button" onClick={() => setDisplaySearchFilter(true)}>
+              {REFINE}
             </div>
-          )}
-        </>
-      )}
+          </div>
+        )}
     </>
   );
 };

package/src/components/SearchFilter/components/Select.js

@@ -4,7 +4,15 @@ import Select from '@blaze-react/select';
 import { withTitle } from '../../../HOC';
 import { DEFAULT_OPTION } from '../constants';
 
-const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues, shouldSearch }) => {
+const SelectFilter = ({
+  data,
+  label,
+  prop,
+  updateFilterValues,
+  filterValues,
+  shouldSearch,
+  displayLabelAsPlaceholder
+}) => {
   const filterValue = filterValues[prop] || '';
 
   const options = data[prop].buckets
@@ -12,16 +20,29 @@ const SelectFilter = ({ data, label, prop, updateFilterValues, filterValues, sho
     .filter(Boolean)
     .sort();
 
-  const optionsJoined = [DEFAULT_OPTION, ...options];
+  const optionsJoined = options;
+
+  const labelText = label || prop;
+  let labelToUse = labelText;
+  let defaultTextValue = DEFAULT_OPTION;
+  if (displayLabelAsPlaceholder) {
+    defaultTextValue = labelToUse;
+    labelToUse = null;
+  }
 
   return (
     <Select
-      label={`${label || prop}`}
+      label={labelToUse}
       value={filterValue}
       id={prop}
+      data-testid={`filter-${prop}`}
       options={optionsJoined}
+      defaultTextValue={defaultTextValue}
       onChange={({ value }) => {
-        updateFilterValues({ [prop]: value }, shouldSearch);
+        let valueToUse = value;
+        if (value === defaultTextValue) valueToUse = '';
+
+        updateFilterValues({ [prop]: valueToUse }, shouldSearch);
       }}
     />
   );
@@ -33,12 +54,14 @@ SelectFilter.propTypes = {
   filterValues: PropTypes.object.isRequired,
   updateFilterValues: PropTypes.func.isRequired,
   shouldSearch: PropTypes.bool,
-  label: PropTypes.string
+  label: PropTypes.string,
+  displayLabelAsPlaceholder: PropTypes.bool
 };
 
 SelectFilter.defaultProps = {
   shouldSearch: false,
-  label: ''
+  label: '',
+  displayLabelAsPlaceholder: false
 };
 
 export default withTitle(SelectFilter);

package/src/components/index.js

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

package/src/constants/index.js

@@ -207,6 +207,7 @@ const TARGET_BLANK = '_blank';
 
 const DATA_SUMMARY_EMAIL_REGEX = /^([a-z0-9_\.\+-]+)@([\da-z\.-]+)\.([a-z\.]{2,6})$/;
 const DATA_SUMMARY_URL_REGEX = /(https?:\/\/)?(www\.)?[-a-zA-Z0-9@:%._\+~#=]{2,256}\.[a-z]{2,6}\b([-a-zA-Z0-9@:%_\+.~#?&//=]*)/;
+const DATA_SUMMARY_TEL_REGEX = /^\+{0,1}[0-9\(\)\.\- \/]{7,}$/; // note: very loose phone number match not for validation
 
 export {
   BANNER_LOADING,
@@ -318,5 +319,6 @@ export {
   ANCHOR_TAG,
   TARGET_BLANK,
   DATA_SUMMARY_EMAIL_REGEX,
-  DATA_SUMMARY_URL_REGEX
+  DATA_SUMMARY_URL_REGEX,
+  DATA_SUMMARY_TEL_REGEX
 };

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

@@ -19,7 +19,7 @@ exports[`Card component should not render alternative headline if alternativePre
       </a>
     </div>
     <div
-      class="card__content-wrapper card__content-wrapper--portrait"
+      class="card__content-wrapper card__content-wrapper--portrait "
     >
       <div
         class="card__content card__content--portrait"
@@ -31,7 +31,7 @@ exports[`Card component should not render alternative headline if alternativePre
           category-name
         </a>
         <h2
-          class="card__title card__title--portrait"
+          class="card__title card__title--portrait "
         >
           <a
             href="/mockurl"
@@ -93,13 +93,13 @@ exports[`Card component should not render alternative headline if displayCategor
       </a>
     </div>
     <div
-      class="card__content-wrapper card__content-wrapper--portrait"
+      class="card__content-wrapper card__content-wrapper--portrait "
     >
       <div
         class="card__content card__content--portrait"
       >
         <h2
-          class="card__title card__title--portrait"
+          class="card__title card__title--portrait "
         >
           <a
             href="/mockurl"
@@ -161,7 +161,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
       </a>
     </div>
     <div
-      class="card__content-wrapper card__content-wrapper--portrait"
+      class="card__content-wrapper card__content-wrapper--portrait "
     >
       <div
         class="card__content card__content--portrait"
@@ -173,7 +173,7 @@ exports[`Card component should not render preHeader if alternativeHeadline is no
           category-name
         </a>
         <h2
-          class="card__title card__title--portrait"
+          class="card__title card__title--portrait "
         >
           <a
             href="/mockurl"
@@ -235,7 +235,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
       </a>
     </div>
     <div
-      class="card__content-wrapper card__content-wrapper--portrait"
+      class="card__content-wrapper card__content-wrapper--portrait "
     >
       <div
         class="card__content card__content--portrait"
@@ -246,7 +246,7 @@ exports[`Card component should render customPreheader and alternativeHeadline in
           Pre header
         </div>
         <h2
-          class="card__title card__title--portrait"
+          class="card__title card__title--portrait "
         >
           <a
             href="/mockurl"
@@ -308,7 +308,7 @@ exports[`Card component should render without throwing an error and match snapsh
       </a>
     </div>
     <div
-      class="card__content-wrapper card__content-wrapper--portrait"
+      class="card__content-wrapper card__content-wrapper--portrait "
     >
       <div
         class="card__content card__content--portrait"
@@ -320,7 +320,7 @@ exports[`Card component should render without throwing an error and match snapsh
           category-name
         </a>
         <h2
-          class="card__title card__title--portrait"
+          class="card__title card__title--portrait "
         >
           <a
             href="/mockurl"