diff --git a/lib/bundle.css b/lib/bundle.css index b3bd360e..85e60c4e 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; } @@ -2317,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/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": { 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 -
-
- - - - - -
-
- - - - - -
-
diff --git a/src/components/Table/_table.scss b/src/components/Table/_table.scss index 446f2f22..37bf3931 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; } @@ -98,11 +101,6 @@ position: sticky; right: 40px; left: 40px; - visibility: hidden; - - &.visible { - visibility: visible; - } } .scroll-icon { @@ -267,4 +265,4 @@ stroke: var(--ssb-dark-5); transition: stroke 0.16s; } -} \ No newline at end of file +} 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(({ className, caption, da return (
- +
{caption && ( )} diff --git a/src/components/Table/table.story.jsx b/src/components/Table/table.story.jsx index c3961d28..83f992b9 100644 --- a/src/components/Table/table.story.jsx +++ b/src/components/Table/table.story.jsx @@ -10,7 +10,7 @@ export default { } export const Default = () => ( -
+
{caption}
-
-
handleMouseClick('left')} - onKeyDown={(event) => handleKeyPress(event, 'left')} - > - + {isOverflowing && ( +
+
handleMouseClick('left')} + onKeyDown={(event) => handleKeyPress(event, 'left')} + > + +
+
handleMouseClick('right')} + onKeyDown={(event) => handleKeyPress(event, 'right')} + > + +
-
handleMouseClick('right')} - onKeyDown={(event) => handleKeyPress(event, 'right')} - > - -
-
+ )}
@@ -39,7 +39,7 @@ export const Default = () => ( export const Statistics = () => (
-
+
@@ -56,6 +56,12 @@ export const Statistics = () => ( First level1 + + First level + + + First level + @@ -65,6 +71,8 @@ export const Statistics = () => ( 1 000 2 000 + 3 000 + 4 000 @@ -72,6 +80,8 @@ export const Statistics = () => ( 50 100 + 150 + 200 @@ -79,6 +89,8 @@ export const Statistics = () => ( 200 650 + 800 + 1050 @@ -86,6 +98,8 @@ export const Statistics = () => ( 500 200 + 700 + 900