Skip to content

Commit

Permalink
Merge pull request #1141 from statisticsnorway/MIM-1967-Table-Scroll
Browse files Browse the repository at this point in the history 
Mim 1967 table scroll
  • Loading branch information
@Carl-OW
Carl-OW authored Jul 11, 2024
2 parents 66d56a9 + dcb0d26 commit 6c3982a
Show file tree
Hide file tree
Showing 4 changed files with 283 additions and 79 deletions.
71 changes: 71 additions & 0 deletions src/components/Table/__snapshots__/table.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,12 +11,83 @@ exports[`Render Table component Matches the snapshot 1`] = `
<caption>
<div
class="caption-wrapper"
style="position: relative;"
>
<div
class="caption-text-wrapper"
>
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>
Expand Down
188 changes: 127 additions & 61 deletions src/components/Table/_table.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
.ssb-table {
@include roboto;
line-height: 1.75rem;
width: 100%;
min-width: $desktop-screen; // We need a fixed width for overflow-x to work
border-collapse: collapse;
border: 1px solid variables.$ssb-dark-5;

Expand All @@ -32,25 +32,18 @@
th,
td {
text-align: left;
}
padding: 0.5rem 1rem;

thead,
tbody {
th,
td {
padding: 0.5rem 1rem;

&.level1 {
padding-left: 1.75rem;
}
&.level1 {
padding-left: 1.75rem;
}

&.level2 {
padding-left: 2.5rem;
}
&.level2 {
padding-left: 2.5rem;
}

&.level3 {
padding-left: 3.25rem;
}
&.level3 {
padding-left: 3.25rem;
}

th {
Expand All @@ -60,59 +53,114 @@

caption {
text-align: left;
position: relative;
padding: 1.75rem 1rem;

@media (width <= $desktop-screen) {
padding-top: 55px;

.scroll-icon-wrapper {
margin-top: -100px;
}
}

.icon-container {
padding: 0 1rem;
}

.caption-wrapper {
display: flex;
align-items: center;
justify-content: space-between;
padding: 1.75rem 1rem;
position: relative;

.caption-text-wrapper {
font-weight: bold;
text-align: left;
width: 998px;
}

.scroll-icon-wrapper {
display: flex;
align-items: center;
position: sticky;
right: 40px;
left: 40px;
visibility: hidden;

&.visible {
visibility: visible;
}
}

.scroll-icon {
cursor: pointer;
display: flex;
justify-content: center;
align-items: center;
width: 44px;
height: 44px;
overflow: hidden;
background: transparent;

&:focus {
svg {
fill: variables.$ssb-green-4;
transition: fill 0.18s;
}

svg line,
svg polyline {
stroke: variables.$ssb-white;
}

svg circle {
stroke: variables.$ssb-green-4;
transition: stroke 0.16s;
}
}

&:hover {
svg {
fill: variables.$ssb-green-4;
transition: fill 0.18s;
}

svg line,
svg polyline {
stroke: variables.$ssb-white;
}

svg circle {
stroke: variables.$ssb-green-4;
transition: stroke 0.16s;
}
}

&:active {
svg {
fill: variables.$ssb-dark-5;
transition: fill 0.18s;
}

svg line,
svg polyline {
stroke: variables.$ssb-white;
}

svg circle {
stroke: variables.$ssb-dark-5;
transition: stroke 0.16s;
}
}
}

.scroll-icon svg {
width: 32px;
height: 32px;
color: variables.$ssb-green-4;
stroke-width: 1px;
}

// TODO: Can be reused (partly?) for later implementation of scroll functionality
// .scoll-icons-wrapper {
// display: grid;
// grid-auto-flow: column;
// grid-column-gap: 1.25em;
// padding: 0 2.5em 0 1.5em; // padding-left with caption-text-wrapper padding-left is a total of 2.5em

// .scroll-icon-left, .scroll-icon-right {
// height: 32px; // icon height

// // remove default styling for button
// background: none;
// color: inherit;
// border: none;
// padding: 0;
// font: inherit;
// cursor: pointer;
// outline: inherit;

// &:focus, &:hover {
// @include focus-ring;
// }

// &.disabled {
// color: $ssb-dark-2;
// cursor: default;
// }

// svg {
// color: $ssb-green-4;
// }
// }
// }

// @media #{$mobile} {
// flex-direction: column-reverse;
// align-items: start;

// .caption-text-wrapper, .scoll-icons-wrapper {
// padding-top: 1rem;
// }
// }
}
}

Expand Down Expand Up @@ -190,3 +238,21 @@
}
}
}

.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;
}
}
Loading

0 comments on commit 6c3982a

Please sign in to comment.