[ONL-7877] Add support to show slot content instead of a row in ec-ta…

…ble (#1687)

* [ONL-7877] add custom slot to ec-table

* [ONL-7877] add custom slot to ec-smart-table

* [ONL-7877] add unit tests for custom slot

* [ONL-7877] remove spaces

* [ONL-7877] remove obsolete snapshot

* [ONL-7877] fix vue warn

* [ONL-7877] fix coverage

* [ONL-7877] useMediaQuery instead of useWindowSize

* [ONL-7877] change isCustomSlotShown prop usage and add missing test in ec-smart table

* [ONL-7877] update ec-table visual test screenshots

* [ONL-7877] add isTableHeaderHidden prop

* [ONL-7877] remove useMediaQuery from ec-smart-table and rename custom slot to custom row

* [ONL-7877] rename missing custom slot to custom row

* [ONL-7877] use numberOfColumns for colspan

* [ONL-7877] add more stories to ec-smart-table

* [ONL-7877] add regression test screenshots for new stories

* 2.2.43

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ebury/chameleon-components",
-  "version": "2.2.42",
+  "version": "2.2.43",
   "main": "src/main.js",
   "sideEffects": false,
   "author": "Ebury Team (http://labs.ebury.rocks/)",

src/components/ec-smart-table/__snapshots__/ec-smart-table.spec.js.snap

@@ -1,5 +1,64 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
+exports[`EcSmartTable #slots should only render custom row if "isCustomRowShown" is true 1`] = `
+<div
+  class="ec-smart-table"
+  data-test="ec-smart-table"
+>
+  
+  <!--v-if-->
+  <!--v-if-->
+  
+  <div
+    class="ec-loading"
+    data-test="ec-loading"
+  >
+    <!--v-if-->
+    <div
+      class="ec-loading__content ec-loading__content--is-transparent"
+      data-test="ec-loading__content"
+    >
+      
+      <div>
+        <!--v-if-->
+        <div
+          class="ec-table-scroll-container"
+          data-test="ec-table-scroll-container"
+        >
+          <table
+            class="ec-table"
+          >
+            <!--v-if-->
+            <tbody>
+              
+              <tr
+                class=""
+                data-test="ec-table__row ec-table__row--0"
+              >
+                <td
+                  colspan="3"
+                >
+                  
+                  
+                  <div>
+                    Custom row data: {"row":[1,2,3]}
+                  </div>
+                  
+                  
+                </td>
+              </tr>
+              
+            </tbody>
+            <!--v-if-->
+          </table>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EcSmartTable #slots should pass ec-table slots 1`] = `
 <tr
   class=""
@@ -38,6 +97,65 @@ exports[`EcSmartTable #slots should pass ec-table slots 1`] = `
 </tr>
 `;
 
+exports[`EcSmartTable #slots should render custom row if window width is lower than 768px 1`] = `
+<div
+  class="ec-smart-table"
+  data-test="ec-smart-table"
+>
+  
+  <!--v-if-->
+  <!--v-if-->
+  
+  <div
+    class="ec-loading"
+    data-test="ec-loading"
+  >
+    <!--v-if-->
+    <div
+      class="ec-loading__content ec-loading__content--is-transparent"
+      data-test="ec-loading__content"
+    >
+      
+      <div>
+        <!--v-if-->
+        <div
+          class="ec-table-scroll-container"
+          data-test="ec-table-scroll-container"
+        >
+          <table
+            class="ec-table"
+          >
+            <!--v-if-->
+            <tbody>
+              
+              <tr
+                class=""
+                data-test="ec-table__row ec-table__row--0"
+              >
+                <td
+                  colspan="3"
+                >
+                  
+                  
+                  <div>
+                    Custom row data: {"row":[1,2,3]}
+                  </div>
+                  
+                  
+                </td>
+              </tr>
+              
+            </tbody>
+            <!--v-if-->
+          </table>
+        </div>
+      </div>
+      
+    </div>
+  </div>
+</div>
+`;
+
 exports[`EcSmartTable #slots should render empty data with custom template 1`] = `
 <div
   class="ec-smart-table"

src/components/ec-smart-table/ec-smart-table.spec.js

@@ -222,6 +222,41 @@ describe('EcSmartTable', () => {
       });
       expect(wrapper.findByDataTest('ec-table__row--0').element).toMatchSnapshot();
     });
+
+    it('should render custom row if window width is lower than 768px', () => {
+      window.matchMedia = jest.fn().mockImplementation(query => ({
+        matches: query === '(max-width: 768px)',
+        media: '',
+        onchange: null,
+        addListener: jest.fn(),
+        removeListener: jest.fn(),
+      }));
+
+      const wrapper = mountEcSmartTableWithData(data, {
+        columns,
+      }, {
+        slots: {
+          default: props => h('div', `Custom row data: ${JSON.stringify(props)}`),
+          col1: props => h('div', `Cell data: ${JSON.stringify(props)}`),
+        },
+      });
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
+
+    it('should only render custom row if "isCustomRowShown" is true', () => {
+      const wrapper = mountEcSmartTableWithData(data, {
+        columns,
+        isCustomRowShown: true,
+      }, {
+        slots: {
+          default: props => h('div', `Custom row data: ${JSON.stringify(props)}`),
+          col1: props => h('div', `Cell data: ${JSON.stringify(props)}`),
+        },
+      });
+
+      expect(wrapper.element).toMatchSnapshot();
+    });
   });
 
   describe('sorting', () => {