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

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/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 card--overlay"
+      class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
     >
       <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 card__content--overlay__title"
         >
           <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 card--overlay"
+      class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
     >
       <div
         class="card__content card__content--portrait"
       >
         <h2
-          class="card__title card__title--portrait"
+          class="card__title card__title--portrait card__content--overlay__title"
         >
           <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 card--overlay"
+      class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
     >
       <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 card__content--overlay__title"
         >
           <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 card--overlay"
+      class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
     >
       <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 card__content--overlay__title"
         >
           <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 card--overlay"
+      class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
     >
       <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 card__content--overlay__title"
         >
           <a
             href="/mockurl"

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

@@ -37,7 +37,7 @@ exports[`CardContainer component should render with carousel if option is enable
               page
             </div>
             <h2
-              class="card__title card__title--portrait"
+              class="card__title card__title--portrait "
             >
               <a
                 href="/nautors-swan/swan-78"
@@ -74,7 +74,7 @@ exports[`CardContainer component should render with carousel if option is enable
               page
             </div>
             <h2
-              class="card__title card__title--portrait"
+              class="card__title card__title--portrait "
             >
               <a
                 href="/nautors-swan/swan-98"
@@ -121,7 +121,7 @@ exports[`CardContainer component should render without throwing error and match
             page
           </div>
           <h2
-            class="card__title card__title--portrait"
+            class="card__title card__title--portrait "
           >
             <a
               href="/nautors-swan/swan-78"
@@ -158,7 +158,7 @@ exports[`CardContainer component should render without throwing error and match
             page
           </div>
           <h2
-            class="card__title card__title--portrait"
+            class="card__title card__title--portrait "
           >
             <a
               href="/nautors-swan/swan-98"

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

@@ -33,7 +33,7 @@ exports[`CardRender component should render without throwing an error and match
             Card page cat
           </a>
           <h2
-            class="card__title card__title--portrait"
+            class="card__title card__title--portrait "
           >
             <a
               href="/card-page"

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

@@ -26,4 +26,33 @@ describe('Get link based on value', () => {
     });
     expect.hasAssertions();
   });
+
+  it('should return tel: link for phone numbers', () => {
+    const examples = [
+      '+385 (0) 98 398 831',
+      '123456781211',
+      '+44123123566345',
+      '07789793111',
+      '555-456',
+      '123/1123',
+      '+32 (0) 3231 5055',
+      '+32 3 219 08 91'
+    ];
+    examples.forEach(example => {
+      expect(getLinkBasedOnValue(example)).toEqual(`tel:${example}`);
+    });
+  });
+
+  it('should not add tel: link for short numbers', () => {
+    const examples = [
+      '123',
+      '2010',
+      '123456',
+      '11m',
+      'string with number +44123123566345 in the middle'
+    ];
+    examples.forEach(example => {
+      expect(getLinkBasedOnValue(example)).toEqual('');
+    });
+  });
 });

package/tests/unit/src/components/List/components/Cards/__snapshots__/CardsRender.test.js.snap

@@ -20,13 +20,13 @@ exports[`CardsRender component should render based on listData received 1`] = `
           class="card card--portrait"
         >
           <div
-            class="card__content-wrapper card__content-wrapper--portrait card--overlay"
+            class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
           >
             <div
               class="card__content card__content--portrait"
             >
               <h2
-                class="card__title card__title--portrait"
+                class="card__title card__title--portrait card__content--overlay__title"
               >
                 item 1
               </h2>
@@ -41,13 +41,13 @@ exports[`CardsRender component should render based on listData received 1`] = `
           class="card card--portrait"
         >
           <div
-            class="card__content-wrapper card__content-wrapper--portrait card--overlay"
+            class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
           >
             <div
               class="card__content card__content--portrait"
             >
               <h2
-                class="card__title card__title--portrait"
+                class="card__title card__title--portrait card__content--overlay__title"
               >
                 item 1
               </h2>
@@ -62,13 +62,13 @@ exports[`CardsRender component should render based on listData received 1`] = `
           class="card card--portrait"
         >
           <div
-            class="card__content-wrapper card__content-wrapper--portrait card--overlay"
+            class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
           >
             <div
               class="card__content card__content--portrait"
             >
               <h2
-                class="card__title card__title--portrait"
+                class="card__title card__title--portrait card__content--overlay__title"
               >
                 item 1
               </h2>
@@ -95,13 +95,13 @@ exports[`CardsRender component should render without wrapper, when requested 1`]
       class="card card--portrait"
     >
       <div
-        class="card__content-wrapper card__content-wrapper--portrait card--overlay"
+        class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
       >
         <div
           class="card__content card__content--portrait"
         >
           <h2
-            class="card__title card__title--portrait"
+            class="card__title card__title--portrait card__content--overlay__title"
           >
             item 1
           </h2>
@@ -116,13 +116,13 @@ exports[`CardsRender component should render without wrapper, when requested 1`]
       class="card card--portrait"
     >
       <div
-        class="card__content-wrapper card__content-wrapper--portrait card--overlay"
+        class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
       >
         <div
           class="card__content card__content--portrait"
         >
           <h2
-            class="card__title card__title--portrait"
+            class="card__title card__title--portrait card__content--overlay__title"
           >
             item 1
           </h2>
@@ -137,13 +137,13 @@ exports[`CardsRender component should render without wrapper, when requested 1`]
       class="card card--portrait"
     >
       <div
-        class="card__content-wrapper card__content-wrapper--portrait card--overlay"
+        class="card__content-wrapper card__content-wrapper--portrait card__content--overlay"
       >
         <div
           class="card__content card__content--portrait"
         >
           <h2
-            class="card__title card__title--portrait"
+            class="card__title card__title--portrait card__content--overlay__title"
           >
             item 1
           </h2>

package/tests/unit/src/components/SearchFilter/components/Select.test.js

@@ -1,23 +1,27 @@
 import { render } from '@blaze-cms/tools/test-helpers/test-functions';
-import { screen } from '@testing-library/react';
+import { screen, fireEvent, act } from '@testing-library/react';
 import '@testing-library/jest-dom/extend-expect';
 import { SelectFilter } from '../../../../../../src/components/SearchFilter/components';
+import { DEFAULT_OPTION } from '../../../../../../src/components/SearchFilter/constants';
 
 jest.mock('next/router', () => ({
   useRouter: jest.fn(() => ({ asPath: 'test-url' }))
 }));
 
+const changeValue = 'name2';
+const testId = 'filter-name';
 const props = {
   data: {
     name: {
-      buckets: [{ key: 'name1' }, { key: 'name2' }]
+      buckets: [{ key: 'name1' }, { key: changeValue }]
     }
   },
   filterValues: {},
   updateFilterValues: jest.fn(),
   prop: 'name',
   buttonRef: {},
-  hasUrl: false
+  hasUrl: false,
+  shouldSearch: true
 };
 
 describe('Select component', () => {
@@ -26,10 +30,60 @@ describe('Select component', () => {
     expect(asFragment()).toMatchSnapshot();
   });
 
-  it('should  match snapshot with label', () => {
+  it('should match snapshot with label', () => {
     const label = 'Select name';
     const propsWithLabel = { ...props, label };
     render(SelectFilter, propsWithLabel);
     expect(screen.getByLabelText(label)).toBeInTheDocument();
   });
+
+  it('should pass on changed value', () => {
+    const { getByTestId } = render(SelectFilter, props);
+    act(() => {
+      fireEvent.change(getByTestId(testId), { target: { value: changeValue } });
+    });
+
+    expect(props.updateFilterValues).toHaveBeenCalledWith(
+      {
+        [props.prop]: changeValue
+      },
+      props.shouldSearch
+    );
+  });
+
+  it('should reset value if default option selected', () => {
+    const { getByTestId } = render(SelectFilter, props);
+    act(() => {
+      fireEvent.change(getByTestId(testId), { target: { value: DEFAULT_OPTION } });
+    });
+
+    expect(props.updateFilterValues).toHaveBeenCalledWith(
+      {
+        [props.prop]: ''
+      },
+      props.shouldSearch
+    );
+  });
+
+  it('should display label as placeholder with no label tag', () => {
+    const label = 'Placeholder label';
+    const { asFragment, getByTestId, queryByText } = render(SelectFilter, {
+      ...props,
+      label,
+      displayLabelAsPlaceholder: true
+    });
+    expect(asFragment()).toMatchSnapshot();
+    expect(queryByText(DEFAULT_OPTION)).toBeNull();
+
+    act(() => {
+      fireEvent.change(getByTestId(testId), { target: { value: label } });
+    });
+
+    expect(props.updateFilterValues).toHaveBeenCalledWith(
+      {
+        [props.prop]: ''
+      },
+      props.shouldSearch
+    );
+  });
 });

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

@@ -1,5 +1,32 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`Select component should display label as placeholder with no label tag 1`] = `
+<DocumentFragment>
+  <div
+    class="form-field form-field--select"
+  >
+    <select
+      data-testid="filter-name"
+      id="name"
+    >
+      <option>
+        Placeholder label
+      </option>
+      <option
+        value="name1"
+      >
+        name1
+      </option>
+      <option
+        value="name2"
+      >
+        name2
+      </option>
+    </select>
+  </div>
+</DocumentFragment>
+`;
+
 exports[`Select component should render witout throwing an error and match snapshot 1`] = `
 <DocumentFragment>
   <div
@@ -12,14 +39,10 @@ exports[`Select component should render witout throwing an error and match snaps
       name
     </label>
     <select
+      data-testid="filter-name"
       id="name"
     >
       <option>
-        Please Choose...
-      </option>
-      <option
-        value="Any"
-      >
         Any
       </option>
       <option