feat(Pagination): sbanken theme

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'`.                                          |

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'

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;

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 {

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,

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;
-  }
 }"
 `;

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;
+  }
+}

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);
+  }
+}