Pivoted table on mobile (#345)

* Pivoted table on mobile * Start to handle mobile mode in data provider * Handle mobile and desktop table pivotation * Testfunction for pivot clockwise added. Code refactoring * Code refactoring * Updated packages * Handle small and xsmall devices * Added cooments regarding a bug * Added styling and ascending sorting for mobile table * PXWEB2-174 Fixed mediascreen breakpoint * More formatting * More formatting * First try repaeat header * Dont repeat headers for 2nd last stub * More formatting * Separat createRow for desktop and mobile * Remove unnessecary code * Code cleanup * Prettier code * Remove unnessecary check for mobile * Code cleanup * Fixed some issues reported by sonarqube * Prettier code * Fix for sonarcube issues * Fix for sonarcube issues * Fix for sonarcube issue * Fix for sonarcube issue * Prettier code * Memoized data in TableDataProvider * Prettier code * More styling * More formatting * Maybe formatted automatically * Add padding right for headings Remove fix width for data columns * Hover line and som small adjustment * Remove border-top on first th in first row on mobile-view * Refactor code * Prettier code * Make function out of codeblocks to make it easier to read * Autoformatted * Autoformatted * autoformat * Code clean up * Removed slash in imports * Added tests for Table * Prettier code --------- Co-authored-by: PerIngeVaaje <[email protected]>
PxTools · Jan 23, 2025 · 641cfca · 641cfca
1 parent 93605f7
commit 641cfca
Show file tree

Hide file tree

Showing 7 changed files with 783 additions and 148 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/packages/pxweb2-ui/src/lib/components/Table/Table.module.scss b/packages/pxweb2-ui/src/lib/components/Table/Table.module.scss
@@ -1,4 +1,5 @@
 @use '../../text-styles.scss';
+@use '../../../../style-dictionary/dist/scss/fixed-variables.scss' as fixed;
 
 .table {
   border-collapse: separate; /* Ensure border-radius works */
@@ -10,20 +11,39 @@
   overflow: hidden; /* Ensures content stays within rounded borders */
   color: var(--px-color-text-default);
 
+  @media screen and (max-width: fixed.$breakpoints-xsmall-max-width) {
+    line-height: fixed.$spacing-6;
+  }
+
+  tbody tr {
+    &:hover {
+      background: var(--px-color-surface-subtle) !important;
+
+      th {
+        background: var(--px-color-surface-subtle) !important;
+      }
+    }
+  }
+
   th {
     width: 40px;
-    padding: 8px 12px;
+    padding-left: 16px;
     font-weight: normal;
     text-align: center;
 
     background: var(--px-color-surface-moderate);
-    // border-bottom: 1px solid var(--px-color-border-default);
     border-top: 1px solid var(--px-color-border-default);
     border-left: 1px solid var(--px-color-border-default);
+
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding: 8px 12px;
+    }
+    @media screen and (max-width: fixed.$breakpoints-xsmall-max-width) {
+      width: fit-content;
+    }
   }
   thead th {
-    //font-weight: bold;
-    font-family: PxWeb-font-700;
+    font-family: PxWeb-font-700, sans-serif;
   }
   thead tr:last-child th {
     text-align: end;
@@ -36,6 +56,9 @@
 
   tr:first-child th:first-child {
     border-left: none;
+    @media screen and (max-width: fixed.$breakpoints-xsmall-max-width) {
+      border-top: none;
+    }
   }
   tbody tr:last-child td {
     border-bottom: none;
@@ -45,77 +68,115 @@
   }
 
   th.stub-0 {
-    padding-left: 12px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 12px;
+    }
   }
   th.stub-1 {
-    padding-left: 28px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 28px;
+    }
   }
   th.stub-2 {
-    padding-left: 44px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 44px;
+    }
   }
   th.stub-3 {
-    padding-left: 60px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 60px;
+    }
   }
   th.stub-4 {
-    padding-left: 76px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 76px;
+    }
   }
   th.stub-5 {
-    padding-left: 92px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 92px;
+    }
   }
   th.stub-6 {
-    padding-left: 108px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 108px;
+    }
   }
   th.stub-7 {
-    padding-left: 124px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 124px;
+    }
   }
   th.stub-8 {
-    padding-left: 140px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 140px;
+    }
   }
   th.stub-9 {
-    padding-left: 156px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 156px;
+    }
   }
   th.stub-10 {
-    padding-left: 172px;
     border-left: none;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding-left: 172px;
+    }
   }
   td {
-    padding: 8px 12px;
+    padding-right: 16px;
     width: 40px;
     text-align: right;
-
     border-top: 1px solid var(--px-color-border-default);
     border-left: 1px solid var(--px-color-border-default);
+
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      padding: 8px 12px;
+    }
+    @media screen and (max-width: fixed.$breakpoints-xsmall-max-width) {
+      width: fit-content;
+    }
   }
   tr th::first-letter {
     text-transform: capitalize;
   }
   tr.firstdim th {
-    border-top: 2px solid var(--px-color-border-default);
-    //font-weight: bold;
-    font-family: PxWeb-font-700;
+    border-top: 1px solid var(--px-color-border-default);
+    font-family: PxWeb-font-700, sans-serif;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      border-top: 2px solid var(--px-color-border-default);
+    }
+    @media screen and (max-width: fixed.$breakpoints-xsmall-max-width) {
+      padding-top: 16px;
+      padding-right: 16px;
+    }
   }
   tr.firstdim td {
-    border-top: 2px solid var(--px-color-border-default);
-    //font-weight: bold;
-    font-family: PxWeb-font-700;
+    border-top: 1px solid var(--px-color-border-default);
+    font-family: PxWeb-font-700, sans-serif;
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      border-top: 2px solid var(--px-color-border-default);
+    }
   }
   thead tr:first-of-type th,
   thead tr:first-of-type td {
     border-top: none;
   }
   tbody tr:first-of-type th,
   tbody tr:first-of-type td {
-    border-top: 2px solid var(--px-color-border-default);
+    @media screen and (min-width: fixed.$breakpoints-small-min-width) {
+      border-top: 2px solid var(--px-color-border-default);
+    }
   }
   tr.firstColNoStub > td:first-child {
     border-left: none;
@@ -124,4 +185,61 @@
   .firstColNoStub {
     border-left: none;
   }
+
+  .mobileEmptyRowCell > th,
+  .mobileEmptyRowCell > td {
+    background: var(--px-color-surface-moderate);
+    border-left: none;
+    border-bottom: none;
+    border-top: none;
+  }
+
+  .mobileRowHeadLastStub > th {
+    padding-bottom: 4px;
+    padding-top: 4px;
+    background: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    border-top: none;
+    vertical-align: top;
+  }
+
+  .mobileRowHeadLastStub > td {
+    padding-bottom: 4px;
+    padding-top: 4px;
+    background: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    border-top: none;
+    vertical-align: top;
+    padding-left: 16px;
+  }
+
+  .mobileRowHeadSecondLastStub > th,
+  .mobileRowHeadSecondLastStub > td {
+    padding-top: 0px;
+    padding-bottom: 4px;
+    padding-right: 16px;
+    background: none;
+    border-left: none;
+    border-right: none;
+    border-bottom: none;
+    border-top: none;
+    font-family: PxWeb-font-700, sans-serif;
+  }
+
+  .mobileRowHeadThirdLastStub > th,
+  .mobileRowHeadThirdLastStub > td {
+    padding-bottom: 16px;
+  }
+  .mobileRowHeadlastValueOfLastStub > th,
+  .mobileRowHeadlastValueOfLastStub > td {
+    padding-bottom: 28px;
+  }
+  .mobileRowHeadFirstValueOfSecondLastStub > th,
+  .mobileRowHeadFirstValueOfSecondLastStub > td {
+    padding-top: 28px;
+  }
 }
diff --git a/packages/pxweb2-ui/src/lib/components/Table/Table.spec.tsx b/packages/pxweb2-ui/src/lib/components/Table/Table.spec.tsx
@@ -4,8 +4,44 @@ import Table from './Table';
 import { pxTable } from './testData';
 
 describe('Table', () => {
-  it('should render successfully', () => {
-    const { baseElement } = render(<Table pxtable={pxTable} />);
+  it('should render successfully desktop', () => {
+    const { baseElement } = render(
+      <Table pxtable={pxTable} isMobile={false} />,
+    );
     expect(baseElement).toBeTruthy();
   });
+
+  it('should render successfully mobile', () => {
+    const { baseElement } = render(<Table pxtable={pxTable} isMobile={true} />);
+    expect(baseElement).toBeTruthy();
+  });
+
+  it('should have a th header named 1968', () => {
+    const { baseElement } = render(
+      <Table pxtable={pxTable} isMobile={false} />,
+    );
+    const ths = baseElement.querySelectorAll('th');
+    let found = false;
+    ths.forEach((th) => {
+      if (th.innerHTML === '1968') {
+        found = true;
+      }
+    });
+    expect(found).toBe(true);
+    expect(ths.length).toBeGreaterThan(0);
+  });
+
+  it('should NOT have a th header named 1967', () => {
+    const { baseElement } = render(
+      <Table pxtable={pxTable} isMobile={false} />,
+    );
+    const ths = baseElement.querySelectorAll('th');
+    let found = false;
+    ths.forEach((th) => {
+      if (th.innerHTML === '1967') {
+        found = true;
+      }
+    });
+    expect(found).toBe(false);
+  });
 });