@blaze-cms/react-page-builder 0.123.0-alpha.8 → 0.123.1-alpha.0

package/src/components/DataSummary/helpers/get-link-based-on-value.js

@@ -1,4 +1,8 @@
-import { DATA_SUMMARY_EMAIL_REGEX, DATA_SUMMARY_URL_REGEX } from '../../../constants';
+import {
+  DATA_SUMMARY_EMAIL_REGEX,
+  DATA_SUMMARY_URL_REGEX,
+  DATA_SUMMARY_TEL_REGEX
+} from '../../../constants';
 
 function getLinkBasedOnValue(value) {
   if (DATA_SUMMARY_EMAIL_REGEX.test(value)) {
@@ -8,6 +12,10 @@ function getLinkBasedOnValue(value) {
     return value;
   }
 
+  if (DATA_SUMMARY_TEL_REGEX.test(value)) {
+    return `tel:${value}`;
+  }
+
   return '';
 }
 

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

@@ -21,7 +21,12 @@ const CardsRenderItem = ({
   propsToDisplay,
   shouldRenderBanner,
   bannerIndex,
-  priority
+  priority,
+  enableOverlay,
+  autoScrollTimer,
+  arrowSize,
+  overlayModifier,
+  titleOverlayModifier
 }) => {
   const {
     initialOffset,
@@ -73,6 +78,10 @@ const CardsRenderItem = ({
           gtmId={name}
           gtmChildren={gtmChildren}
           priority={priority}
+          arrowSize={arrowSize}
+          enableOverlay={enableOverlay}
+          overlayModifier={overlayModifier}
+          titleOverlayModifier={titleOverlayModifier}
           {...cardProps}
         />
       </div>
@@ -96,7 +105,12 @@ CardsRenderItem.propTypes = {
   modifier: PropTypes.string,
   cardChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
   gtmChildren: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
-  priority: PropTypes.bool
+  priority: PropTypes.bool,
+  enableOverlay: PropTypes.bool,
+  overlayModifier: PropTypes.string,
+  titleOverlayModifier: PropTypes.string,
+  autoScrollTimer: PropTypes.number,
+  arrowSize: PropTypes.string
 };
 
 CardsRenderItem.defaultProps = {
@@ -106,7 +120,12 @@ CardsRenderItem.defaultProps = {
   propsToDisplay: [],
   modifier: '',
   cardChildren: [],
-  gtmChildren: []
+  gtmChildren: [],
+  enableOverlay: false,
+  autoScrollTimer: 0,
+  overlayModifier: '',
+  titleOverlayModifier: '',
+  arrowSize: ''
 };
 
 export default CardsRenderItem;

package/src/components/Menu/Menu.js

@@ -73,7 +73,7 @@ const Menu = ({
         <ul className={isMobile ? childrenMobileModifier : childrenDesktopModifier}>
           {logoOnDesktop &&
             logoOnDesktopAlignment === 'left' && (
-              <a href="/" className="">
+              <a href="/" className="menu--desktop__logo-wrapper">
                 <img
                   src={logoOnMobileUrl}
                   alt={logoOnMobileAlt}
@@ -106,7 +106,7 @@ const Menu = ({
           )}
           {logoOnDesktop &&
             logoOnDesktopAlignment === 'right' && (
-              <a href="/" className="">
+              <a href="/" className="menu--desktop__logo-wrapper">
                 <img
                   src={logoOnMobileUrl}
                   alt={logoOnMobileAlt}
@@ -123,7 +123,7 @@ const Menu = ({
 Menu.propTypes = {
   collapse: PropTypes.bool.isRequired,
   logoOnMobile: PropTypes.bool.isRequired,
-  logoOnDesktop: PropTypes.bool.isRequired,
+  logoOnDesktop: PropTypes.bool,
   logoOnMobileUrl: PropTypes.string,
   logoOnMobileAlt: PropTypes.string,
   logoOnMobileModifier: PropTypes.string,
@@ -144,6 +144,7 @@ Menu.propTypes = {
 };
 
 Menu.defaultProps = {
+  logoOnDesktop: false,
   logoOnMobileUrl: '',
   logoOnMobileAlt: '',
   logoOnMobileModifier: '',

package/src/components/SearchContent/index.js

@@ -7,11 +7,13 @@ import BlazeLink from '../BlazeLink';
 
 const SearchContent = ({
   entity,
+  searchInputAlignment,
   searchInputWrapperMobile,
   searchInputWrapperDesktop,
+  displayCollapsed,
   isMobile
 }) => {
-  const [collapsed, setCollapsed] = useState(true);
+  const [collapsed, setCollapsed] = useState(displayCollapsed);
   const [searchTerm, setSearchTerm] = useState(null);
   const router = useRouter();
 
@@ -49,20 +51,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 +89,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 +100,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 +114,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 +125,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,12 +140,12 @@ const SearchContent = ({
         </div>
         {data &&
           searchResultsMessage !== '' && (
-            <div className="bg-white ml-1 mr-1 rounded rounded-lg absolute top-16 flex flex-col z-50 border-2 border-gray-50 w-96">
-              <div className="px-2">
+            <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>
@@ -149,9 +156,11 @@ const SearchContent = ({
 };
 
 SearchContent.propTypes = {
+  searchInputAlignment: PropTypes.string,
   searchInputWrapperMobile: PropTypes.string,
   searchInputWrapperDesktop: PropTypes.string,
   isMobile: PropTypes.bool,
+  displayCollapsed: PropTypes.bool,
   entity: PropTypes.string.isRequired
 };
 
@@ -159,7 +168,8 @@ SearchContent.defaultProps = {
   searchInputAlignment: '',
   searchInputWrapperMobile: '',
   searchInputWrapperDesktop: '',
-  isMobile: false
+  isMobile: false,
+  displayCollapsed: false
 };
 
 export default SearchContent;

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);