Mim 2053 fix scroll arrows (#1289)

* Fixed arrow mobile and some refactoring * Fixed more * Bumped version * Sniker med fix overflow nested accordion
statisticsnorway · Sep 23, 2024 · a0d054a · a0d054a
1 parent 3469550
commit a0d054a
Show file tree

Hide file tree

Showing 6 changed files with 112 additions and 124 deletions.
diff --git a/lib/bundle.css b/lib/bundle.css
@@ -1921,6 +1921,7 @@ a {
   color: #162327;
   font-size: 16px;
   padding: 10px 10px 10px 30px;
+  overflow-x: auto;
 }
 .ssb-nested-accordion .nested-accordion-body.closed {
   display: none;
@@ -2291,14 +2292,6 @@ a {
   position: relative;
   padding: 1.25rem 1rem;
 }
-@media (max-width: 992px) {
-  .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 .icon-container {
   padding: 0 1rem;
 }
@@ -2318,9 +2311,17 @@ a {
   align-items: center;
   position: sticky;
   right: 40px;
-  left: 40px;
 }
 .ssb-table-wrapper .ssb-table caption .caption-wrapper .scroll-icon {
+  background-color: transparent;
+  border: none;
+  color: inherit;
+  cursor: pointer;
+  font-family: inherit;
+  font-size: inherit;
+  line-height: inherit;
+  padding: 0;
+  text-align: left;
   cursor: pointer;
   display: flex;
   justify-content: center;
@@ -2372,6 +2373,37 @@ a {
   color: #00824d;
   stroke-width: 1.5px;
 }
+@media screen and (max-width: 767px) {
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow {
+    display: grid;
+  }
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow .caption-text-wrapper {
+    order: 2;
+  }
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow .scroll-icon-wrapper {
+    order: 1;
+    position: sticky;
+    justify-content: end;
+    left: 0;
+    right: 0;
+  }
+}
+@media screen and (min-width: 768px) and (max-width: 991px) {
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow .caption-text-wrapper {
+    max-width: 500px;
+  }
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow .scroll-icon-wrapper {
+    width: auto !important;
+  }
+}
+@media screen and (min-width: 992px) {
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow .caption-text-wrapper {
+    max-width: 700px;
+  }
+  .ssb-table-wrapper .ssb-table caption .caption-wrapper.overflow .scroll-icon-wrapper {
+    width: auto !important;
+  }
+}
 .ssb-table-wrapper .ssb-table thead {
   border-bottom: 2px solid #274247;
 }

diff --git a/package.json b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "@statisticsnorway/ssb-component-library",
-  "version": "2.2.15",
+  "version": "2.2.16",
   "description": "Component library for SSB (Statistics Norway)",
   "main": "lib/bundle.js",
   "scripts": {

diff --git a/src/components/NestedAccordion/_nested-accordion.scss b/src/components/NestedAccordion/_nested-accordion.scss
@@ -52,6 +52,7 @@
     color: $ssb-dark-6;
     font-size: 16px;
     padding: 10px 10px 10px 30px;
+    overflow-x: auto;
 
     &.closed {
       display: none;

diff --git a/src/components/Table/__snapshots__/table.test.tsx.snap b/src/components/Table/__snapshots__/table.test.tsx.snap
@@ -10,85 +10,13 @@ exports[`Render Table component Matches the snapshot 1`] = `
     >
       <caption>
         <div
-          class="caption-wrapper"
-          style="position: relative;"
+          class="caption-wrapper "
         >
           <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>

diff --git a/src/components/Table/_table.scss b/src/components/Table/_table.scss
@@ -10,7 +10,7 @@
     width: 100%;
     border-collapse: collapse;
     border: 1px solid variables.$ssb-dark-5;
-    
+
     caption,
     th,
     td {
@@ -67,16 +67,6 @@
       position: relative;
       padding: 1.25rem 1rem;
 
-      @media (max-width: $desktop-screen) {
-        &:has(.visible){
-          padding-top: 3rem;
-        }
-
-        .caption-wrapper .scroll-icon-wrapper {
-          margin-top: -100px;
-        }
-      }
-
       .icon-container {
         padding: 0 1rem;
       }
@@ -98,10 +88,10 @@
           align-items: center;
           position: sticky;
           right: 40px;
-          left: 40px;
         }
 
         .scroll-icon {
+          @include reset-button;
           cursor: pointer;
           display: flex;
           justify-content: center;
@@ -169,6 +159,44 @@
           color: variables.$ssb-green-4;
           stroke-width: 1.5px;
         }
+
+        &.overflow {
+          @media #{$mobile} {
+            display: grid;
+
+            .caption-text-wrapper {
+              order: 2;
+            }
+
+            .scroll-icon-wrapper {
+              order: 1;
+              position: sticky;
+              justify-content: end;
+              left: 0;
+              right: 0;
+            }
+          }
+
+          @media #{$tablet} {
+            .caption-text-wrapper {
+              max-width: 500px;
+            }
+
+            .scroll-icon-wrapper {
+              width: auto !important;
+            }
+          }
+
+          @media #{$desktop} {
+            .caption-text-wrapper {
+              max-width: 700px;
+            }
+
+            .scroll-icon-wrapper {
+              width: auto !important;
+            }
+          }
+        }
       }
     }
 
@@ -252,12 +280,12 @@
       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;

diff --git a/src/components/Table/index.tsx b/src/components/Table/index.tsx
@@ -33,6 +33,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
     const captionRef = useRef<HTMLDivElement | null>(null)
     const [isOverflowing, setIsOverflowing] = useState(false)
     const [isActive, setIsActive] = useState<{ left: boolean; right: boolean }>({ left: false, right: false })
+    const [widthScrollWrapper, setWidthScrollWrapper] = useState('')
 
     type Direction = 'left' | 'right'
 
@@ -50,7 +51,7 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
       }
     }
 
-    const handleKeyPress = (event: React.KeyboardEvent<HTMLDivElement>, direction: Direction) => {
+    const handleKeyPress = (event: React.KeyboardEvent<HTMLButtonElement>, direction: Direction) => {
       if (event.key === 'Enter' || event.key === ' ') {
         event.preventDefault()
         setIsActive((prev) => ({ ...prev, [direction]: true }))
@@ -67,9 +68,8 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
           const hasOverflow = tableWrapperRef.current.scrollWidth > tableWrapperRef.current.clientWidth
           setIsOverflowing(hasOverflow)
 
-          if (iconWrapperRef.current) {
-            iconWrapperRef.current.style.visibility = hasOverflow ? 'visible' : 'hidden'
-          }
+          const widthValue = tableWrapperRef.current.clientWidth - 24
+          setWidthScrollWrapper(`${widthValue}px`)
         }
       }
       checkOverflow()
@@ -82,35 +82,34 @@ const Table = forwardRef<HTMLTableElement, TableProps>(
 
     return (
       <div id={id} className='ssb-table-wrapper' ref={tableWrapperRef}>
-        <table className={`ssb-table${className ? ` ${className}` : ''}`} ref={ref}>
+        <table className={['ssb-table', className ?? ''].filter(Boolean).join(' ')} ref={ref}>
           {caption && (
             <caption data-noterefs={dataNoteRefs}>
-              <div className='caption-wrapper' style={{ position: 'relative' }}>
+              <div className={`caption-wrapper ${isOverflowing ? 'overflow' : ''}`}>
                 <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={0}
-                    onClick={() => handleMouseClick('left')}
-                    onKeyDown={(event) => handleKeyPress(event, 'left')}
-                  >
-                    <ArrowLeftCircle />
+                {isOverflowing && (
+                  <div className='scroll-icon-wrapper' ref={iconWrapperRef} style={{ width: `${widthScrollWrapper}` }}>
+                    <button
+                      className={`scroll-icon ${isActive.left ? 'scroll-icon-active' : ''}`}
+                      aria-label='Scroll left'
+                      onClick={() => handleMouseClick('left')}
+                      onKeyDown={(event) => handleKeyPress(event, 'left')}
+                    >
+                      <ArrowLeftCircle />
+                    </button>
+                    <button
+                      className={`scroll-icon ${isActive.right ? 'scroll-icon-active' : ''}`}
+                      aria-label='Scroll right'
+                      tabIndex={0}
+                      onClick={() => handleMouseClick('right')}
+                      onKeyDown={(event) => handleKeyPress(event, 'right')}
+                    >
+                      <ArrowRightCircle />
+                    </button>
                   </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>
             </caption>
           )}