diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx index 85c3541cefe..f4349f4240d 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/autocomplete/properties.mdx @@ -37,7 +37,7 @@ You may check out the [DrawerList Properties](#drawerlist-properties) down below | `show_all` | _(optional)_ text that lets a user unravel all the available options. Defaults to `Vis alt`. | | `indicator_label` | _(optional)_ text show on indicator "options" item. Defaults to `Henter data ...`. | | `show_options_sr` | _(optional)_ only for screen readers. Title of the button to show the suggestions / options. It is always present and when activating, it opens the DrawerList and sets the focus on it. Defaults to `Bla gjennom alternativer`. | -| `selected_sr` | _(optional)_ only for screen readers (VocieOver). The label used to announce the selected item. Defaults to `Valgt:`. | +| `selected_sr` | _(optional)_ only for screen readers (VoiceOver). The label used to announce the selected item. Defaults to `Valgt:`. | | `submit_button_title` | _(optional)_ title on submit button. Defaults to `Vis alternativer`. | | `submit_button_icon` | _(optional)_ the icon used in the submit button. Defaults to `chevron_down`. | | `submit_element` | _(optional)_ replace the dropdown / submit button with a custom React element. Defaults to the input SubmitButton `import { SubmitButton } from '@dnb/eufemia/components/input/Input'`. | diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination.mdx index aa3f3ad21eb..5f7618a4cb1 100644 --- a/packages/dnb-design-system-portal/src/docs/uilib/components/pagination.mdx +++ b/packages/dnb-design-system-portal/src/docs/uilib/components/pagination.mdx @@ -2,6 +2,7 @@ title: 'Pagination' description: 'The Pagination component supports both classical pagination and infinity scrolling.' showTabs: true +theme: 'sbanken' --- import PaginationInfo from 'Docs/uilib/components/pagination/info' diff --git a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap index a7635c355a3..c5163d5bef3 100644 --- a/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/button/__tests__/__snapshots__/Button.test.tsx.snap @@ -777,7 +777,14 @@ html[data-whatinput=keyboard] .dnb-button--tertiary:hover:focus .dnb-button__tex --button-secondary-background: var(--sb-color-white); --button-secondary-background--hover: var(--sb-color-green); --button-secondary-background--active: var(--sb-color-white); - --button-secondary-border: var(--sb-color-purple-alternative); + --button-secondary-border: var(--button-secondary-border--default); + --button-secondary-border--default: var(--sb-color-purple-alternative); + --button-secondary-border--hover: var( + --button-secondary-border--default + ); + --button-secondary-border--active: var( + --button-secondary-border--default + ); --button-secondary-border--disabled: var(--sb-color-gray-light); border: none; } @@ -826,12 +833,14 @@ html:not([data-whatintent=touch]) .dnb-button--secondary:hover[disabled] { cursor: not-allowed; } html:not([data-whatintent=touch]) .dnb-button--secondary:hover:not([disabled]) { + --button-secondary-border: var(--button-secondary-border--hover); background-color: var(--button-secondary-background--hover); } .dnb-button--secondary:active[disabled], html:not([data-whatintent=touch]) .dnb-button--secondary:active[disabled] { cursor: not-allowed; } .dnb-button--secondary:active:not([disabled]), html:not([data-whatintent=touch]) .dnb-button--secondary:active:not([disabled]) { + --button-secondary-border: var(--button-secondary-border--active); background-color: var(--button-secondary-background--active); } html:not([data-whatintent=touch]) .dnb-button:focus-visible[disabled] { @@ -853,7 +862,9 @@ html:not([data-whatintent=touch]) .dnb-button:focus-visible:not([disabled]) { --button-primary-background--disabled ); --button-secondary-color: var(--button-secondary-color--disabled); - --button-secondary-border: var(--button-secondary-border--disabled); + --button-secondary-border--default: var( + --button-secondary-border--disabled + ); } .dnb-button:not([disabled]).dnb-button__status--error { --button-primary-shadow--hover: 0 0 transparent; @@ -866,7 +877,7 @@ html:not([data-whatintent=touch]) .dnb-button:focus-visible:not([disabled]) { --button-primary-border--hover: var(--sb-color-red); --button-secondary-color: var(--sb-color-red); --button-secondary-background--hover: var(--sb-color-magenta-light-3); - --button-secondary-border: var(--sb-color-red); + --button-secondary-border--default: var(--sb-color-red); } .dnb-button--tertiary { --button-tertiary-focus-overflow: -0.5rem; diff --git a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss index 13b51890cd8..2c06c34f8b3 100644 --- a/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss +++ b/packages/dnb-eufemia/src/components/button/style/themes/dnb-button-theme-sbanken.scss @@ -44,7 +44,14 @@ --button-secondary-background: var(--sb-color-white); --button-secondary-background--hover: var(--sb-color-green); --button-secondary-background--active: var(--sb-color-white); - --button-secondary-border: var(--sb-color-purple-alternative); + --button-secondary-border: var(--button-secondary-border--default); + --button-secondary-border--default: var(--sb-color-purple-alternative); + --button-secondary-border--hover: var( + --button-secondary-border--default + ); + --button-secondary-border--active: var( + --button-secondary-border--default + ); --button-secondary-border--disabled: var(--sb-color-gray-light); border: none; @@ -91,10 +98,12 @@ @include fakeBorder(var(--button-secondary-border), null, inset); @include hover() { + --button-secondary-border: var(--button-secondary-border--hover); background-color: var(--button-secondary-background--hover); } @include active() { + --button-secondary-border: var(--button-secondary-border--active); background-color: var(--button-secondary-background--active); } } @@ -120,7 +129,9 @@ // secondary --button-secondary-color: var(--button-secondary-color--disabled); - --button-secondary-border: var(--button-secondary-border--disabled); + --button-secondary-border--default: var( + --button-secondary-border--disabled + ); } &:not([disabled]).dnb-button__status--error { @@ -137,7 +148,7 @@ // secondary --button-secondary-color: var(--sb-color-red); --button-secondary-background--hover: var(--sb-color-magenta-light-3); - --button-secondary-border: var(--sb-color-red); + --button-secondary-border--default: var(--sb-color-red); } &--tertiary { diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.screenshot.test.ts b/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.screenshot.test.ts index f2f6b1bb766..6ffc1fc7213 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.screenshot.test.ts +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/Pagination.screenshot.test.ts @@ -8,8 +8,9 @@ import { setupPageScreenshot, } from '../../../core/jest/jestSetupScreenshots' -describe('Pagination', () => { +describe.each(['ui', 'sbanken'])('Pagination for %s', (themeName) => { setupPageScreenshot({ + themeName, url: '/uilib/components/pagination/demos', }) @@ -23,6 +24,84 @@ describe('Pagination', () => { expect(screenshot).toMatchImageSnapshot() }) + it('have to match the current button hover', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="pagination-default"]', + style: { + width: '50rem', + }, + simulateSelector: + '[data-visual-test="pagination-default"] .dnb-button--primary', + simulate: 'hover', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match the current button active', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="pagination-default"]', + style: { + width: '50rem', + }, + simulateSelector: + '[data-visual-test="pagination-default"] .dnb-button--primary', + simulate: 'active', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match the current button focus', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="pagination-default"]', + style: { + width: '50rem', + }, + simulateSelector: + '[data-visual-test="pagination-default"] .dnb-button--primary', + simulate: 'focus', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match unselected button hover', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="pagination-default"]', + style: { + width: '50rem', + }, + simulateSelector: + '[data-visual-test="pagination-default"] .dnb-button--secondary', + simulate: 'hover', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match unselected button active', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="pagination-default"]', + style: { + width: '50rem', + }, + simulateSelector: + '[data-visual-test="pagination-default"] .dnb-button--secondary', + simulate: 'active', + }) + expect(screenshot).toMatchImageSnapshot() + }) + + it('have to match unselected button focus', async () => { + const screenshot = await makeScreenshot({ + selector: '[data-visual-test="pagination-default"]', + style: { + width: '50rem', + }, + simulateSelector: + '[data-visual-test="pagination-default"] .dnb-button--secondary', + simulate: 'focus', + }) + expect(screenshot).toMatchImageSnapshot() + }) + it('have to match pagination bar at page one', async () => { const screenshot = await makeScreenshot({ selector: '[data-visual-test="pagination-default"]', @@ -50,8 +129,9 @@ describe('Pagination', () => { }) }) -describe('Pagination', () => { +describe.each(['ui', 'sbanken'])('Pagination for %s', (themeName) => { setupPageScreenshot({ + themeName, url: '/uilib/components/pagination/demos', pageViewport: { width: 500, diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-pagination-bar-at-last-page.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-pagination-bar-at-last-page.snap.png new file mode 100644 index 00000000000..fdadfecd0de Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-pagination-bar-at-last-page.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-pagination-bar-at-page-one.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-pagination-bar-at-page-one.snap.png new file mode 100644 index 00000000000..6164bb046cb Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-pagination-bar-at-page-one.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-active.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-active.snap.png new file mode 100644 index 00000000000..ea4943d5010 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-focus.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-focus.snap.png new file mode 100644 index 00000000000..e09d843d139 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-hover.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-hover.snap.png new file mode 100644 index 00000000000..74bdb9716d0 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-current-button-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png new file mode 100644 index 00000000000..33cfb367913 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-default-pagination-bar.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-default-pagination-bar.snap.png new file mode 100644 index 00000000000..aa2a68db27e Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-the-default-pagination-bar.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-active.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-active.snap.png new file mode 100644 index 00000000000..aa2a68db27e Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-focus.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-focus.snap.png new file mode 100644 index 00000000000..5892d0f5dcd Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-hover.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-hover.snap.png new file mode 100644 index 00000000000..9277c5856f7 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-sbanken-have-to-match-unselected-button-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-pagination-bar-at-last-page.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-pagination-bar-at-last-page.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-pagination-bar-at-last-page.snap.png rename to packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-pagination-bar-at-last-page.snap.png diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-pagination-bar-at-page-one.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-pagination-bar-at-page-one.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-pagination-bar-at-page-one.snap.png rename to packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-pagination-bar-at-page-one.snap.png diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-active.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-active.snap.png new file mode 100644 index 00000000000..f12bff93fba Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-focus.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-focus.snap.png new file mode 100644 index 00000000000..5ba3909ffc4 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-hover.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-hover.snap.png new file mode 100644 index 00000000000..b73efbb9d43 Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-current-button-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png rename to packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-default-pagination-bar-in-small-viewport.snap.png diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-the-default-pagination-bar.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-default-pagination-bar.snap.png similarity index 100% rename from packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-have-to-match-the-default-pagination-bar.snap.png rename to packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-the-default-pagination-bar.snap.png diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-active.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-active.snap.png new file mode 100644 index 00000000000..14e2968735e Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-active.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-focus.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-focus.snap.png new file mode 100644 index 00000000000..120d5d9578a Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-focus.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-hover.snap.png b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-hover.snap.png new file mode 100644 index 00000000000..851cffca67b Binary files /dev/null and b/packages/dnb-eufemia/src/components/pagination/__tests__/__image_snapshots__/pagination-for-ui-have-to-match-unselected-button-hover.snap.png differ diff --git a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap index ea07589d970..74c41d64ef7 100644 --- a/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap +++ b/packages/dnb-eufemia/src/components/pagination/__tests__/__snapshots__/Pagination.test.tsx.snap @@ -787,6 +787,13 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition { flex-wrap: wrap; align-items: center; } +.dnb-pagination__page, .dnb-pagination__loadbar { + min-height: 6rem; +} +.dnb-pagination__bar { + margin-top: 1rem; + margin-bottom: 1rem; +} .dnb-pagination--left .dnb-pagination__bar { justify-content: flex-start; } @@ -831,12 +838,14 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition { display: flex; flex-direction: column; justify-content: center; + min-height: inherit; } .dnb-pagination__indicator__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; + animation: show-page 300ms ease-out forwards; } .dnb-pagination__dots { align-self: flex-end; @@ -860,6 +869,17 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition { } .dnb-pagination__bar__skip .dnb-button:first-of-type { margin-right: 1.5rem; +} + +@keyframes show-page { + from { + transform: translate3d(0, -8px, 0); + opacity: 0.1; + } + to { + transform: translate3d(0, 0, 0); + opacity: 1; + } }" `; @@ -871,19 +891,6 @@ exports[`Pagination scss have to match default theme snapshot 1`] = ` /* * Utilities */ -.dnb-pagination__page, .dnb-pagination__loadbar { - min-height: 6rem; -} -.dnb-pagination__bar { - margin-top: 1rem; - margin-bottom: 1rem; -} -.dnb-pagination__indicator { - min-height: inherit; -} -.dnb-pagination__indicator__inner { - animation: show-page 300ms ease-out forwards; -} .dnb-core-style .dnb-pagination__button.dnb-button--primary, .dnb-core-style .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]), .dnb-pagination__button.dnb-button--primary, .dnb-pagination__button.dnb-button--primary:not(:active):hover:not([disabled]) { background-color: var(--color-emerald-green); color: var(--color-mint-green); @@ -895,16 +902,5 @@ html[data-whatinput=keyboard] .dnb-core-style .dnb-pagination__button.dnb-button .dnb-pagination__dots { color: var(--color-black-55); -} - -@keyframes show-page { - from { - transform: translate3d(0, -8px, 0); - opacity: 0.1; - } - to { - transform: translate3d(0, 0, 0); - opacity: 1; - } }" `; diff --git a/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss b/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss index 1cbc929efc6..57c10f22160 100644 --- a/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss +++ b/packages/dnb-eufemia/src/components/pagination/style/dnb-pagination.scss @@ -17,6 +17,16 @@ align-items: center; } + &__page, + &__loadbar { + min-height: 6rem; + } + + &__bar { + margin-top: 1rem; + margin-bottom: 1rem; + } + &--left &__bar { justify-content: flex-start; } @@ -70,12 +80,14 @@ display: flex; flex-direction: column; justify-content: center; + min-height: inherit; &__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; + animation: show-page 300ms ease-out forwards; } } @@ -112,3 +124,15 @@ margin-right: 1.5rem; } } + +@keyframes show-page { + from { + transform: translate3d(0, -8px, 0); + opacity: 0.1; + } + + to { + transform: translate3d(0, 0, 0); + opacity: 1; + } +} diff --git a/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-sbanken.scss b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-sbanken.scss new file mode 100644 index 00000000000..376e40a50fb --- /dev/null +++ b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-sbanken.scss @@ -0,0 +1,35 @@ +/* +* Pagination theme +* +*/ + +@import '../../../../style/core/utilities.scss'; + +.dnb-pagination { + &__bar__skip { + // button tertiary + .dnb-button--tertiary:not([disabled]) .dnb-button__text { + color: var(--sb-color-text); + } + } + // active/checked - like toggle-button + @at-root .dnb-core-style &__button.dnb-button, + &__button.dnb-button { + // button primary + --button-primary-color: var(--sb-color-white); + --button-primary-color--active: var(--sb-color-white); + --button-primary-background: var(--sb-color-violet); + --button-primary-background--hover: var(--sb-color-violet-light-4); + --button-primary-background--active: var(--sb-color-violet); + --button-primary-border--hover: var(--sb-color-violet); + // button secondary + --button-secondary-background--hover: var(--sb-color-white); + --button-secondary-border--default: var(--sb-color-gray); + --button-secondary-border--hover: var(--sb-color-violet); + --button-secondary-border--active: var(--sb-color-gray); + } + + &__dots { + color: var(--sb-color-text); + } +} diff --git a/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss index f34c8bd9f93..02bf73cbc06 100644 --- a/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss +++ b/packages/dnb-eufemia/src/components/pagination/style/themes/dnb-pagination-theme-ui.scss @@ -6,24 +6,6 @@ @import '../../../../style/core/utilities.scss'; .dnb-pagination { - &__page, - &__loadbar { - min-height: 6rem; - } - - &__bar { - margin-top: 1rem; - margin-bottom: 1rem; - } - - &__indicator { - min-height: inherit; - - &__inner { - animation: show-page 300ms ease-out forwards; - } - } - // active/checked - like toggle-button @at-root .dnb-core-style &__button.dnb-button--primary, &__button.dnb-button--primary { @@ -44,15 +26,3 @@ color: var(--color-black-55); } } - -@keyframes show-page { - from { - transform: translate3d(0, -8px, 0); - opacity: 0.1; - } - - to { - transform: translate3d(0, 0, 0); - opacity: 1; - } -} diff --git a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js index f378a23ade3..06671cd3cdd 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js +++ b/packages/dnb-eufemia/src/style/themes/theme-eiendom/properties.js @@ -82,11 +82,6 @@ export default { '--shadow-default-blur-radius': '16px', '--shadow-default-color': 'rgb(51 51 51 / 8%)', '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)', - '--scrollbar-track-width': '0.5rem', - '--scrollbar-thumb-width': '0.5rem', - '--scrollbar-track-color': 'var(--color-black-8)', - '--scrollbar-thumb-color': 'var(--color-sea-green)', - '--scrollbar-thumb-hover-color': 'var(--color-emerald-green)', '--color-emerald-green-50': '#89aaac', '--color-emerald-green-25': '#c4d4d6', '--color-emerald-green-10': '#e8eeef' diff --git a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss index b7873f0c54d..72be1e87e57 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss +++ b/packages/dnb-eufemia/src/style/themes/theme-sbanken/sbanken-theme-components.scss @@ -22,6 +22,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default; @import '../../../components/button/style/themes/dnb-button-theme-sbanken.scss'; @import '../../../components/input/style/themes/dnb-input-theme-sbanken.scss'; @import '../../../components/logo/style/themes/dnb-logo-theme-sbanken.scss'; +@import '../../../components/pagination/style/themes/dnb-pagination-theme-sbanken.scss'; @import '../../../components/table/style/themes/dnb-table-theme-sbanken.scss'; @import '../../../components/textarea/style/themes/dnb-textarea-theme-sbanken.scss'; @import '../../../components/accordion/style/themes/dnb-accordion-theme-ui.scss'; @@ -41,7 +42,6 @@ $fonts-path: '../../../../assets/fonts/dnb' !default; @import '../../../components/help-button/style/themes/dnb-help-button-theme-ui.scss'; @import '../../../components/icon/style/themes/dnb-icon-theme-ui.scss'; @import '../../../components/modal/style/themes/dnb-modal-theme-ui.scss'; -@import '../../../components/pagination/style/themes/dnb-pagination-theme-ui.scss'; @import '../../../components/progress-indicator/style/themes/dnb-progress-indicator-theme-ui.scss'; @import '../../../components/radio/style/themes/dnb-radio-theme-ui.scss'; @import '../../../components/section/style/themes/dnb-section-theme-ui.scss'; diff --git a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js index 04846018119..8a64f4bbb4f 100644 --- a/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js +++ b/packages/dnb-eufemia/src/style/themes/theme-ui/properties.js @@ -81,10 +81,5 @@ export default { '--shadow-default-y': '8px', '--shadow-default-blur-radius': '16px', '--shadow-default-color': 'rgb(51 51 51 / 8%)', - '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)', - '--scrollbar-track-width': '0.5rem', - '--scrollbar-thumb-width': '0.5rem', - '--scrollbar-track-color': 'var(--color-black-8)', - '--scrollbar-thumb-color': 'var(--color-sea-green)', - '--scrollbar-thumb-hover-color': 'var(--color-emerald-green)' + '--easing-default': 'cubic-bezier(0.42, 0, 0, 1)' }; // prettier-ignore