Mim 2045 table in accordion scroll bugfix (#1283)

* Fix padding for viewports with no scroll but extra padding
Add logging and temporary snapshot example for attachment tables scroll debugging

MIM-2045

* Add a checkIsOverflowing prop that triggers checkOverflow function
MIM-2045

* Minor code refactoring and add overflow to accordion-body

* Add overflow-x to accordion body

* Include bundle.scss

* Remove logging

* Minor code refactoring; fix types and id conditional

* Bump @statisticsnorway/ssb-component-library from 2.2.14 to 2.2.15

lib/bundle.css

@@ -127,6 +127,7 @@ a {
   grid-column-start: 1;
 }
 .ssb-accordion .accordion-body {
+  overflow-x: auto;
   font-family: "Open Sans", sans-serif !important;
   font-stretch: normal;
   font-weight: normal;
@@ -2291,15 +2292,12 @@ a {
   padding: 1.25rem 1rem;
 }
 @media (max-width: 992px) {
-  .ssb-table-wrapper .ssb-table caption {
-    padding-top: 47px;
+  .ssb-table-wrapper .ssb-table caption:has(.visible) {
+    padding-top: 3rem;
   }
   .ssb-table-wrapper .ssb-table caption .caption-wrapper .scroll-icon-wrapper {
     margin-top: -100px;
   }
-  .ssb-table-wrapper .ssb-table caption .caption-wrapper.single-line .scroll-icon-wrapper {
-    margin-top: -70px;
-  }
 }
 .ssb-table-wrapper .ssb-table caption .icon-container {
   padding: 0 1rem;
@@ -2423,20 +2421,19 @@ a {
 .ssb-table-wrapper .ssb-table .align-center {
   text-align: center;
 }
-
-.scroll-icon-active svg,
-.scroll-icon:active svg {
+.ssb-table-wrapper .scroll-icon-active svg,
+.ssb-table-wrapper .scroll-icon:active svg {
   fill: var(--ssb-dark-5);
   transition: fill 0.18s;
 }
-.scroll-icon-active svg line,
-.scroll-icon-active svg polyline,
-.scroll-icon:active svg line,
-.scroll-icon:active svg polyline {
+.ssb-table-wrapper .scroll-icon-active svg line,
+.ssb-table-wrapper .scroll-icon-active svg polyline,
+.ssb-table-wrapper .scroll-icon:active svg line,
+.ssb-table-wrapper .scroll-icon:active svg polyline {
   stroke: var(--ssb-white);
 }
-.scroll-icon-active svg circle,
-.scroll-icon:active svg circle {
+.ssb-table-wrapper .scroll-icon-active svg circle,
+.ssb-table-wrapper .scroll-icon:active svg circle {
   stroke: var(--ssb-dark-5);
   transition: stroke 0.16s;
 }

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.14",
+  "version": "2.2.15",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

src/components/Accordion/_accordion.scss

@@ -76,6 +76,8 @@
   }
 
   .accordion-body {
+    overflow-x: auto;
+
     @include open-sans;
     color: $ssb-dark-6;
     font-size: 16px;

src/components/Table/README.md

@@ -81,12 +81,14 @@ Available props:
 
 ##### Table
 
-| Name         | Type          | Description                                                      |
-| ------------ | ------------- | ---------------------------------------------------------------- |
-| className    | string        | Optional styling classes                                         |
-| caption      | string        | Optional caption text                                            |
-| dataNoteRefs | string        | Optional caption text for data-noterefs attribute                |
-| children     | Required node | Table content (TableHead, TableBody, and TableFooter components) |
+| Name               | Type          | Description                                                      |
+| ------------------ | ------------- | ---------------------------------------------------------------- |
+| id                 | string        | Optional id                                                      |
+| className          | string        | Optional styling classes                                         |
+| caption            | string        | Optional caption text                                            |
+| dataNoteRefs       | string        | Optional caption text for data-noterefs attribute                |
+| children           | Required node | Table content (TableHead, TableBody, and TableFooter components) |
+| checkIsOverflowing | boolean       | Optional boolean that fires checkOverflow function in useEffect  |
 
 ##### TableHead, TableBody, TableFooter, and TableRow
 

src/components/Table/__snapshots__/table.test.tsx.snap

@@ -10,14 +10,85 @@ exports[`Render Table component Matches the snapshot 1`] = `
     >
       <caption>
         <div
-          class="caption-wrapper single-line"
+          class="caption-wrapper"
           style="position: relative;"
         >
           <div
             class="caption-text-wrapper"
           >
             Table caption
           </div>
+          <div
+            class="scroll-icon-wrapper "
+            style="visibility: hidden;"
+          >
+            <div
+              aria-label="Scroll left"
+              class="scroll-icon "
+              role="button"
+              tabindex="0"
+            >
+              <svg
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                />
+                <polyline
+                  points="12 8 8 12 12 16"
+                />
+                <line
+                  x1="16"
+                  x2="8"
+                  y1="12"
+                  y2="12"
+                />
+              </svg>
+            </div>
+            <div
+              aria-label="Scroll right"
+              class="scroll-icon "
+              role="button"
+              tabindex="0"
+            >
+              <svg
+                fill="none"
+                height="24"
+                stroke="currentColor"
+                stroke-linecap="round"
+                stroke-linejoin="round"
+                stroke-width="2"
+                viewBox="0 0 24 24"
+                width="24"
+                xmlns="http://www.w3.org/2000/svg"
+              >
+                <circle
+                  cx="12"
+                  cy="12"
+                  r="10"
+                />
+                <polyline
+                  points="12 16 16 12 12 8"
+                />
+                <line
+                  x1="8"
+                  x2="16"
+                  y1="12"
+                  y2="12"
+                />
+              </svg>
+            </div>
+          </div>
         </div>
       </caption>
       <thead>

src/components/Table/_table.scss

@@ -10,7 +10,7 @@
     width: 100%;
     border-collapse: collapse;
     border: 1px solid variables.$ssb-dark-5;
-
+    
     caption,
     th,
     td {
@@ -68,15 +68,13 @@
       padding: 1.25rem 1rem;
 
       @media (max-width: $desktop-screen) {
-        padding-top: 47px;
+        &:has(.visible){
+          padding-top: 3rem;
+        }
 
         .caption-wrapper .scroll-icon-wrapper {
           margin-top: -100px;
         }
-
-        .caption-wrapper.single-line .scroll-icon-wrapper {
-          margin-top: -70px;
-        }
       }
 
       .icon-container {
@@ -247,22 +245,22 @@
       text-align: center;
     }
   }
-}
-
-.scroll-icon-active,
-.scroll-icon:active {
-  svg {
-    fill: var(--ssb-dark-5);
-    transition: fill 0.18s;
-  }
-
-  svg line,
-  svg polyline {
-    stroke: var(--ssb-white);
-  }
 
-  svg circle {
-    stroke: var(--ssb-dark-5);
-    transition: stroke 0.16s;
+  .scroll-icon-active,
+  .scroll-icon:active {
+    svg {
+      fill: var(--ssb-dark-5);
+      transition: fill 0.18s;
+    }
+
+    svg line,
+    svg polyline {
+      stroke: var(--ssb-white);
+    }
+
+    svg circle {
+      stroke: var(--ssb-dark-5);
+      transition: stroke 0.16s;
+    }
   }
 }