From 8911dca708127e05e35562f3085376a75bc858cd Mon Sep 17 00:00:00 2001
From: Carina <cgn@ssb.no>
Date: Mon, 2 Sep 2024 11:45:20 +0200
Subject: [PATCH 1/4] Fixed probem with width

---
 lib/bundle.css                       |  8 ++++++--
 src/components/Table/_table.scss     | 11 +++++++----
 src/components/Table/table.story.jsx |  4 ++--
 3 files changed, 15 insertions(+), 8 deletions(-)

diff --git a/lib/bundle.css b/lib/bundle.css
index b3bd360e..6ca9c1e4 100644
--- a/lib/bundle.css
+++ b/lib/bundle.css
@@ -2234,7 +2234,7 @@ a {
   font-stretch: normal;
   font-weight: normal;
   line-height: 1.75rem;
-  min-width: 992px;
+  width: 100%;
   border-collapse: collapse;
   border: 1px solid #274247;
 }
@@ -2257,6 +2257,11 @@ a {
     max-width: 998px;
   }
 }
+@media screen and (max-width: 767px) {
+  .ssb-table-wrapper .ssb-table .caption-text-wrapper {
+    max-width: none;
+  }
+}
 .ssb-table-wrapper .ssb-table th,
 .ssb-table-wrapper .ssb-table td {
   text-align: left;
@@ -2307,7 +2312,6 @@ a {
 .ssb-table-wrapper .ssb-table caption .caption-wrapper .caption-text-wrapper {
   font-weight: bold;
   text-align: left;
-  width: 998px;
   padding-top: 0.5rem;
   padding-bottom: 0.5rem;
 }
diff --git a/src/components/Table/_table.scss b/src/components/Table/_table.scss
index 446f2f22..f3b44b81 100644
--- a/src/components/Table/_table.scss
+++ b/src/components/Table/_table.scss
@@ -7,7 +7,7 @@
   .ssb-table {
     @include roboto;
     line-height: 1.75rem;
-    min-width: $desktop-screen; // We need a fixed width for overflow-x to work
+    width: 100%;
     border-collapse: collapse;
     border: 1px solid variables.$ssb-dark-5;
 
@@ -28,10 +28,14 @@
       }
     }
 
-    .caption-text-wrapper{
+    .caption-text-wrapper {
       @media #{$desktop} {
         max-width: 998px;
       }
+
+      @media #{$mobile} {
+        max-width: none;
+      }
     }
 
     th,
@@ -87,7 +91,6 @@
         .caption-text-wrapper {
           font-weight: bold;
           text-align: left;
-          width: 998px;
           padding-top: 0.5rem;
           padding-bottom: 0.5rem;
         }
@@ -267,4 +270,4 @@
     stroke: var(--ssb-dark-5);
     transition: stroke 0.16s;
   }
-}
\ No newline at end of file
+}
diff --git a/src/components/Table/table.story.jsx b/src/components/Table/table.story.jsx
index c3961d28..dbf33ce2 100644
--- a/src/components/Table/table.story.jsx
+++ b/src/components/Table/table.story.jsx
@@ -10,7 +10,7 @@ export default {
 }
 
 export const Default = () => (
-  <div style={{ padding: '4rem' }}>
+  <div style={{ width: '740px', padding: '4rem' }}>
     <Table>
       <TableHead>
         <TableRow>
@@ -38,7 +38,7 @@ export const Default = () => (
 )
 
 export const Statistics = () => (
-  <div style={{ padding: '4rem' }}>
+  <div style={{ width: '740px', padding: '4rem' }}>
     <Table caption='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non pretium felis. Aenean eu ipsum in magna auctor porta. Donec vestibulum nulla vel laoreet blandit.'>
       <TableHead>
         <TableRow>

From aeb49dc63222094e3bd8315bbfb6fa67d3cb95e9 Mon Sep 17 00:00:00 2001
From: Carina <cgn@ssb.no>
Date: Mon, 2 Sep 2024 11:47:48 +0200
Subject: [PATCH 2/4] Bumped version

---
 package.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/package.json b/package.json
index 4325769d..0d1759e8 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.11",
+  "version": "2.2.12",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

From 785d0fdc169607d5f35b7235cc317149d3b8e6dc Mon Sep 17 00:00:00 2001
From: Carina <cgn@ssb.no>
Date: Mon, 2 Sep 2024 13:46:38 +0200
Subject: [PATCH 3/4] Small refactoring

---
 lib/bundle.css                                |  4 --
 package-lock.json                             |  4 +-
 .../Table/__snapshots__/table.test.tsx.snap   | 70 -------------------
 src/components/Table/_table.scss              |  5 --
 src/components/Table/index.tsx                | 46 ++++++------
 5 files changed, 26 insertions(+), 103 deletions(-)

diff --git a/lib/bundle.css b/lib/bundle.css
index 6ca9c1e4..85e60c4e 100644
--- a/lib/bundle.css
+++ b/lib/bundle.css
@@ -2321,10 +2321,6 @@ a {
   position: sticky;
   right: 40px;
   left: 40px;
-  visibility: hidden;
-}
-.ssb-table-wrapper .ssb-table caption .caption-wrapper .scroll-icon-wrapper.visible {
-  visibility: visible;
 }
 .ssb-table-wrapper .ssb-table caption .caption-wrapper .scroll-icon {
   cursor: pointer;
diff --git a/package-lock.json b/package-lock.json
index 43ef254a..59cf3424 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,12 +1,12 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.10",
+  "version": "2.2.12",
   "lockfileVersion": 3,
   "requires": true,
   "packages": {
     "": {
       "name": "@statisticsnorway/ssb-component-library",
-      "version": "2.2.10",
+      "version": "2.2.12",
       "license": "Apache-2.0",
       "dependencies": {
         "prismjs": "~1.29.0",
diff --git a/src/components/Table/__snapshots__/table.test.tsx.snap b/src/components/Table/__snapshots__/table.test.tsx.snap
index d4edf527..da123112 100644
--- a/src/components/Table/__snapshots__/table.test.tsx.snap
+++ b/src/components/Table/__snapshots__/table.test.tsx.snap
@@ -18,76 +18,6 @@ exports[`Render Table component Matches the snapshot 1`] = `
           >
             Table caption
           </div>
-          <div
-            class="scroll-icon-wrapper "
-          >
-            <div
-              aria-label="Scroll left"
-              class="scroll-icon "
-              role="button"
-              tabindex="-1"
-            >
-              <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="-1"
-            >
-              <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>
diff --git a/src/components/Table/_table.scss b/src/components/Table/_table.scss
index f3b44b81..37bf3931 100644
--- a/src/components/Table/_table.scss
+++ b/src/components/Table/_table.scss
@@ -101,11 +101,6 @@
           position: sticky;
           right: 40px;
           left: 40px;
-          visibility: hidden;
-
-          &.visible {
-            visibility: visible;
-          }
         }
 
         .scroll-icon {
diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
index 4924fa2b..3d867439 100644
--- a/src/components/Table/index.tsx
+++ b/src/components/Table/index.tsx
@@ -96,35 +96,37 @@ const Table = forwardRef<HTMLTableElement, TableProps>(({ className, caption, da
 
   return (
     <div className={`ssb-table-wrapper${isOverflowing ? ' overflowing' : ''}`} ref={tableWrapperRef}>
-      <table className={`ssb-table${className ? ` ${className}` : ''}`} ref={ref}>
+      <table className={`ssb-table${className ?? ''}`} ref={ref}>
         {caption && (
           <caption data-noterefs={dataNoteRefs}>
             <div className='caption-wrapper' style={{ position: 'relative' }}>
               <div className='caption-text-wrapper' ref={captionRef}>
                 {caption}
               </div>
-              <div className={`scroll-icon-wrapper ${isOverflowing ? 'visible' : ''}`} ref={iconWrapperRef}>
-                <div
-                  className={`scroll-icon ${isActive.left ? 'scroll-icon-active' : ''}`}
-                  role='button'
-                  aria-label='Scroll left'
-                  tabIndex={isOverflowing ? 0 : -1}
-                  onClick={() => handleMouseClick('left')}
-                  onKeyDown={(event) => handleKeyPress(event, 'left')}
-                >
-                  <ArrowLeftCircle />
+              {isOverflowing && (
+                <div className='scroll-icon-wrapper' ref={iconWrapperRef}>
+                  <div
+                    className={`scroll-icon ${isActive.left ? 'scroll-icon-active' : ''}`}
+                    role='button'
+                    aria-label='Scroll left'
+                    tabIndex={0}
+                    onClick={() => handleMouseClick('left')}
+                    onKeyDown={(event) => handleKeyPress(event, 'left')}
+                  >
+                    <ArrowLeftCircle />
+                  </div>
+                  <div
+                    className={`scroll-icon ${isActive.right ? 'scroll-icon-active' : ''}`}
+                    role='button'
+                    aria-label='Scroll right'
+                    tabIndex={0}
+                    onClick={() => handleMouseClick('right')}
+                    onKeyDown={(event) => handleKeyPress(event, 'right')}
+                  >
+                    <ArrowRightCircle />
+                  </div>
                 </div>
-                <div
-                  className={`scroll-icon ${isActive.right ? 'scroll-icon-active' : ''}`}
-                  role='button'
-                  aria-label='Scroll right'
-                  tabIndex={isOverflowing ? 0 : -1}
-                  onClick={() => handleMouseClick('right')}
-                  onKeyDown={(event) => handleKeyPress(event, 'right')}
-                >
-                  <ArrowRightCircle />
-                </div>
-              </div>
+              )}
             </div>
           </caption>
         )}

From a9b80c2a0748c2c2392ef264fca463905c6db3c2 Mon Sep 17 00:00:00 2001
From: Carina <cgn@ssb.no>
Date: Mon, 2 Sep 2024 14:03:47 +0200
Subject: [PATCH 4/4] Made example table wider

---
 src/components/Table/table.story.jsx | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/src/components/Table/table.story.jsx b/src/components/Table/table.story.jsx
index dbf33ce2..83f992b9 100644
--- a/src/components/Table/table.story.jsx
+++ b/src/components/Table/table.story.jsx
@@ -38,8 +38,8 @@ export const Default = () => (
 )
 
 export const Statistics = () => (
-  <div style={{ width: '740px', padding: '4rem' }}>
-    <Table caption='Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras non pretium felis. Aenean eu ipsum in magna auctor porta. Donec vestibulum nulla vel laoreet blandit.'>
+  <div style={{ padding: '4rem' }}>
+    <Table caption='Lorem ipsum dolor sit amet, consectetur adipiscing elit. '>
       <TableHead>
         <TableRow>
           <TableCell type='th' rowSpan={2} align='right'>
@@ -56,6 +56,12 @@ export const Statistics = () => (
           <TableCell type='th' scope='col' align='right'>
             First level<sup>1</sup>
           </TableCell>
+          <TableCell type='th' scope='col' align='right'>
+            First level
+          </TableCell>
+          <TableCell type='th' scope='col' align='right'>
+            First level
+          </TableCell>
         </TableRow>
       </TableHead>
       <TableBody>
@@ -65,6 +71,8 @@ export const Statistics = () => (
           </TableCell>
           <TableCell align='right'>1 000</TableCell>
           <TableCell align='right'>2 000</TableCell>
+          <TableCell align='right'>3 000</TableCell>
+          <TableCell align='right'>4 000</TableCell>
         </TableRow>
         <TableRow>
           <TableCell type='th' scope='row' indentationLevel={1}>
@@ -72,6 +80,8 @@ export const Statistics = () => (
           </TableCell>
           <TableCell align='right'>50</TableCell>
           <TableCell align='right'>100</TableCell>
+          <TableCell align='right'>150</TableCell>
+          <TableCell align='right'>200</TableCell>
         </TableRow>
         <TableRow>
           <TableCell type='th' scope='row' indentationLevel={2}>
@@ -79,6 +89,8 @@ export const Statistics = () => (
           </TableCell>
           <TableCell align='right'>200</TableCell>
           <TableCell align='right'>650</TableCell>
+          <TableCell align='right'>800</TableCell>
+          <TableCell align='right'>1050</TableCell>
         </TableRow>
         <TableRow>
           <TableCell type='th' scope='row' indentationLevel={3}>
@@ -86,6 +98,8 @@ export const Statistics = () => (
           </TableCell>
           <TableCell align='right'>500</TableCell>
           <TableCell align='right'>200</TableCell>
+          <TableCell align='right'>700</TableCell>
+          <TableCell align='right'>900</TableCell>
         </TableRow>
       </TableBody>
       <TableFooter>