Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Mim 2045 table in accordion scroll bugfix #1283

Merged
merged 9 commits into from
Sep 18, 2024
Merged

Mim 2045 table in accordion scroll bugfix #1283

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
a443a7c
Fix padding for viewports with no scroll but extra padding
johnnadeluy Sep 4, 2024
b59dd1a
Add a checkIsOverflowing prop that triggers checkOverflow function
johnnadeluy Sep 12, 2024
228d5c2
Minor code refactoring and add overflow to accordion-body
johnnadeluy Sep 13, 2024
8a72d32
Add overflow-x to accordion body
johnnadeluy Sep 16, 2024
940a066
Include bundle.scss
johnnadeluy Sep 16, 2024
883b6d1
Merge branch 'master' of https://github.com/statisticsnorway/ssb-comp…
johnnadeluy Sep 16, 2024
198018a
Remove logging
johnnadeluy Sep 16, 2024
998650f
Minor code refactoring; fix types and id conditional
johnnadeluy Sep 16, 2024
6c61df5
Bump @statisticsnorway/ssb-component-library from 2.2.14 to 2.2.15
johnnadeluy Sep 16, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
25 changes: 11 additions & 14 deletions lib/bundle.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down Expand Up @@ -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;
Expand Down Expand Up @@ -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;
}
Expand Down
4 changes: 2 additions & 2 deletions package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

2 changes: 1 addition & 1 deletion package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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": {
Expand Down
2 changes: 2 additions & 0 deletions src/components/Accordion/_accordion.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -76,6 +76,8 @@
}

.accordion-body {
overflow-x: auto;

@include open-sans;
color: $ssb-dark-6;
font-size: 16px;
Expand Down
14 changes: 8 additions & 6 deletions src/components/Table/README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down
73 changes: 72 additions & 1 deletion src/components/Table/__snapshots__/table.test.tsx.snap
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
42 changes: 20 additions & 22 deletions src/components/Table/_table.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@
width: 100%;
border-collapse: collapse;
border: 1px solid variables.$ssb-dark-5;

caption,
th,
td {
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
}
Loading