feat(Autocomplete): preliminary sbanken colors (#3604)

* Fixed sbanken text colors
dnbexperience · May 29, 2024 · fe42538 · fe42538
1 parent c9cae37
commit fe42538
Show file tree

Hide file tree

Showing 31 changed files with 127 additions and 35 deletions.
diff --git a/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.ts b/packages/dnb-eufemia/src/components/autocomplete/__tests__/Autocomplete.screenshot.test.ts
@@ -8,9 +8,9 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('Autocomplete', () => {
+describe.each(['ui', 'sbanken'])('Autocomplete for %s', (themeName) => {
   setupPageScreenshot({
-    each: true,
+    themeName,
     url: '/uilib/components/autocomplete/demos',
     pageViewport: {
       width: 1280,
@@ -25,14 +25,6 @@ describe('Autocomplete', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match disabled state', async () => {
-    const screenshot = await makeScreenshot({
-      url: '/uilib/components/autocomplete/visual-tests',
-      selector: '[data-visual-test="autocomplete-disabled"]',
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
   it('have to match custom input width', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="autocomplete-input-width"]',
@@ -70,21 +62,6 @@ describe('Autocomplete', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
-  it('have to match autocomplete opened list', async () => {
-    const screenshot = await makeScreenshot({
-      url: '/uilib/components/autocomplete/visual-tests',
-      selector: '[data-visual-test="autocomplete-opened"]',
-      simulateSelector:
-        '[data-visual-test="autocomplete-opened"] .focus-trigger .dnb-drawer-list:last-of-type li.first-of-type',
-      waitAfterSimulate: 200,
-      simulate: 'click',
-      style: {
-        height: '40rem',
-      },
-    })
-    expect(screenshot).toMatchImageSnapshot()
-  })
-
   it('have to match autocomplete with suffix value', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="autocomplete-suffix"]',
@@ -106,14 +83,19 @@ describe('Autocomplete', () => {
     })
     expect(screenshot).toMatchImageSnapshot()
   })
+})
+
+describe.each(['ui', 'sbanken'])('Autocomplete for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/components/autocomplete/demos',
+    pageViewport: {
+      width: 700,
+    },
+  })
 
   it('have to match small screen autocomplete with suffix value', async () => {
     const screenshot = await makeScreenshot({
-      url: '/uilib/components/autocomplete/demos',
-      pageViewport: {
-        width: 700,
-        height: 200,
-      },
       selector: '[data-visual-test="autocomplete-suffix"]',
       style: {
         height: '4rem',
@@ -122,3 +104,31 @@ describe('Autocomplete', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 })
+
+describe.each(['ui', 'sbanken'])('Autocomplete for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/components/autocomplete/visual-tests',
+  })
+
+  it('have to match disabled state', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="autocomplete-disabled"]',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
+  it('have to match autocomplete opened list', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="autocomplete-opened"]',
+      simulateSelector:
+        '[data-visual-test="autocomplete-opened"] .focus-trigger .dnb-drawer-list:last-of-type li.first-of-type',
+      waitAfterSimulate: 200,
+      simulate: 'click',
+      style: {
+        height: '40rem',
+      },
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+})
diff --git a/...hots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png b/...hots__/autocomplete-for-sbanken-have-to-match-autocomplete-opened-list.snap.png
diff --git a/...autocomplete-for-sbanken-have-to-match-autocomplete-with-drawer-button.snap.png b/...autocomplete-for-sbanken-have-to-match-autocomplete-with-drawer-button.snap.png
diff --git a/...autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png b/...autocomplete-for-sbanken-have-to-match-autocomplete-with-search-result.snap.png
diff --git a/.../autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png b/.../autocomplete-for-sbanken-have-to-match-autocomplete-with-suffix-value.snap.png
diff --git a/..._snapshots__/autocomplete-for-sbanken-have-to-match-custom-input-width.snap.png b/..._snapshots__/autocomplete-for-sbanken-have-to-match-custom-input-width.snap.png
diff --git a/...age_snapshots__/autocomplete-for-sbanken-have-to-match-different-sizes.snap.png b/...age_snapshots__/autocomplete-for-sbanken-have-to-match-different-sizes.snap.png
diff --git a/...mage_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-state.snap.png b/...mage_snapshots__/autocomplete-for-sbanken-have-to-match-disabled-state.snap.png
diff --git a/...-for-sbanken-have-to-match-small-screen-autocomplete-with-suffix-value.snap.png b/...-for-sbanken-have-to-match-small-screen-autocomplete-with-suffix-value.snap.png
diff --git a/...shots__/autocomplete-for-sbanken-have-to-match-the-closed-autocomplete.snap.png b/...shots__/autocomplete-for-sbanken-have-to-match-the-closed-autocomplete.snap.png
diff --git a/...tocomplete-for-sbanken-have-to-match-the-status-with-status-state-info.snap.png b/...tocomplete-for-sbanken-have-to-match-the-status-with-status-state-info.snap.png
diff --git a/...o-match-autocomplete-opened-list.snap.png → ...o-match-autocomplete-opened-list.snap.png b/...o-match-autocomplete-opened-list.snap.png → ...o-match-autocomplete-opened-list.snap.png
diff --git a/...-autocomplete-with-drawer-button.snap.png → ...-autocomplete-with-drawer-button.snap.png b/...-autocomplete-with-drawer-button.snap.png → ...-autocomplete-with-drawer-button.snap.png
diff --git a/...-autocomplete-with-search-result.snap.png → ...-autocomplete-with-search-result.snap.png b/...-autocomplete-with-search-result.snap.png → ...-autocomplete-with-search-result.snap.png
diff --git a/...h-autocomplete-with-suffix-value.snap.png → ...h-autocomplete-with-suffix-value.snap.png b/...h-autocomplete-with-suffix-value.snap.png → ...h-autocomplete-with-suffix-value.snap.png
diff --git a/...have-to-match-custom-input-width.snap.png → ...have-to-match-custom-input-width.snap.png b/...have-to-match-custom-input-width.snap.png → ...have-to-match-custom-input-width.snap.png
diff --git a/...te-have-to-match-different-sizes.snap.png → ...ui-have-to-match-different-sizes.snap.png b/...te-have-to-match-different-sizes.snap.png → ...ui-have-to-match-different-sizes.snap.png
diff --git a/...ete-have-to-match-disabled-state.snap.png → ...-ui-have-to-match-disabled-state.snap.png b/...ete-have-to-match-disabled-state.snap.png → ...-ui-have-to-match-disabled-state.snap.png
diff --git a/...plete-for-ui-have-to-match-small-screen-autocomplete-with-suffix-value.snap.png b/...plete-for-ui-have-to-match-small-screen-autocomplete-with-suffix-value.snap.png
diff --git a/...to-match-the-closed-autocomplete.snap.png → ...to-match-the-closed-autocomplete.snap.png b/...to-match-the-closed-autocomplete.snap.png → ...to-match-the-closed-autocomplete.snap.png
diff --git a/...he-status-with-status-state-info.snap.png → ...he-status-with-status-state-info.snap.png b/...he-status-with-status-state-info.snap.png → ...he-status-with-status-state-info.snap.png
diff --git a/...autocomplete-have-to-match-small-screen-autocomplete-with-suffix-value.snap.png b/...autocomplete-have-to-match-small-screen-autocomplete-with-suffix-value.snap.png
diff --git a/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap b/...nb-eufemia/src/components/autocomplete/__tests__/__snapshots__/Autocomplete.test.tsx.snap
@@ -2724,7 +2724,6 @@ html[data-visual-test] .dnb-progress-indicator__bar-transition {
   display: flex;
   justify-content: center;
   align-items: center;
-  color: var(--color-sea-green);
 }
 .dnb-autocomplete__show-all .dnb-drawer-list__option__inner .dnb-drawer-list__option__item {
   display: flex;
@@ -2905,6 +2904,9 @@ exports[`Autocomplete scss have to match default theme snapshot 1`] = `
 /*
  * Utilities
  */
+.dnb-autocomplete__show-all .dnb-drawer-list__option__inner {
+  color: var(--color-sea-green);
+}
 .dnb-autocomplete--opened .dnb-input .dnb-input__shell .dnb-input__shell, .dnb-autocomplete:not(.dnb-autocomplete__status--error) .dnb-form-label:hover ~ .dnb-autocomplete__inner .dnb-input:not([data-input-state=disabled]) .dnb-input__shell {
   --border-color: var(--color-sea-green);
   --border-width: 0.125rem;

diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss b/packages/dnb-eufemia/src/components/autocomplete/style/dnb-autocomplete.scss
@@ -84,8 +84,6 @@
       .dnb-icon {
         align-self: center;
       }
-
-      color: var(--color-sea-green);
     }
   }
 

diff --git a/.../dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-sbanken.scss b/.../dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-sbanken.scss
@@ -0,0 +1,65 @@
+/*
+* Autocomplete theme for sbanken
+* TODO: this theme is just a prelimenary fix to avoid dnb colors
+*/
+
+@import '../../../../style/core/utilities.scss';
+
+.dnb-autocomplete {
+  &__show-all {
+    .dnb-drawer-list__option__inner {
+      color: var(--sb-color-violet);
+    }
+  }
+
+  &--opened .dnb-input .dnb-input__shell,
+  &:not(#{&}__status--error)
+    .dnb-form-label:hover
+    ~ &__inner
+    .dnb-input:not([data-input-state='disabled']) {
+    .dnb-input__shell {
+      @include fakeBorder(var(--sb-color-violet), 0.125rem);
+    }
+  }
+
+  &--show-indicator &__input .dnb-input__icon {
+    color: transparent;
+  }
+
+  &__shell,
+  &__input {
+    border-radius: var(--autocomplete-border-radius);
+  }
+
+  &__status--error:not(#{&}--opened)
+    .dnb-form-label:hover
+    ~ &__inner
+    .dnb-input:not([data-input-state='disabled']) {
+    .dnb-input__shell {
+      @include fakeBorder(var(--sb-color-red), 0.125rem);
+    }
+  }
+}
+
+.dnb-autocomplete__root .dnb-drawer-list__option {
+  &--focus,
+  &__item:nth-of-type(1) {
+    font-weight: var(--font-weight-basis);
+  }
+
+  &__item:nth-of-type(n + 2) {
+    color: var(--sb-color-gray-dark-2);
+  }
+
+  &--selected:not(.dnb-drawer-list__option--focus)
+    .dnb-drawer-list__option__item:nth-of-type(n + 2) {
+    &,
+    & .dnb-anchor {
+      color: var(--sb-color-white);
+    }
+  }
+
+  &__item--highlight {
+    font-weight: var(--font-weight-bold);
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss b/packages/dnb-eufemia/src/components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss
@@ -6,6 +6,12 @@
 @import '../../../../style/core/utilities.scss';
 
 .dnb-autocomplete {
+  &__show-all {
+    .dnb-drawer-list__option__inner {
+      color: var(--color-sea-green);
+    }
+  }
+
   &--opened .dnb-input .dnb-input__shell,
   &:not(#{&}__status--error)
     .dnb-form-label:hover

diff --git a/...mage_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png b/...mage_snapshots__/dropdown-for-sbanken-have-to-match-the-dropdown-items.snap.png
diff --git a/...apshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png b/...apshots__/drawerlist-for-sbanken-have-to-match-the-default-drawer-list.snap.png
diff --git a/...apshots__/drawerlist-for-sbanken-have-to-match-the-sbanken-drawer-list.snap.png b/...apshots__/drawerlist-for-sbanken-have-to-match-the-sbanken-drawer-list.snap.png
diff --git a/...ges/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss b/...ges/dnb-eufemia/src/fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss
@@ -31,7 +31,7 @@
 
   &__option__inner {
     overflow: visible;
-    background-color: transparent;
+    background-color: inherit;
     padding: 1rem 0.75rem;
 
     &::before {
@@ -64,6 +64,10 @@
     background-color: transparent;
     z-index: 0;
 
+    &__item.item-nr-1 {
+      font-weight: var(--font-weight-medium);
+    }
+
     @include hover() {
       border-color: var(--sb-color-violet);
       z-index: 1;
@@ -115,6 +119,13 @@
       }
     }
 
+    @include allAbove(small) {
+      &--selected &__suffix {
+        z-index: 2; // over check icon
+        background-color: inherit; // to "hide" the check icon
+      }
+    }
+
     &.last-of-type {
       border-radius: var(--drawer-list-options-border-radius);
 

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
@@ -19,6 +19,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 
 @import '../../../components/accordion/style/themes/dnb-accordion-theme-sbanken.scss';
 @import '../../../components/anchor/style/themes/dnb-anchor-theme-sbanken.scss';
+@import '../../../components/autocomplete/style/themes/dnb-autocomplete-theme-sbanken.scss';
 @import '../../../components/avatar/style/themes/dnb-avatar-theme-sbanken.scss';
 @import '../../../components/breadcrumb/style/themes/dnb-breadcrumb-theme-sbanken.scss';
 @import '../../../components/button/style/themes/dnb-button-theme-sbanken.scss';
@@ -48,7 +49,6 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/upload/style/themes/dnb-upload-theme-sbanken.scss';
 @import '../../../fragments/drawer-list/style/themes/dnb-drawer-list-theme-sbanken.scss';
 @import '../../../fragments/text-counter/style/themes/dnb-text-counter-theme-sbanken.scss';
-@import '../../../components/autocomplete/style/themes/dnb-autocomplete-theme-ui.scss';
 @import '../../../components/badge/style/themes/dnb-badge-theme-ui.scss';
 @import '../../../components/date-picker/style/themes/dnb-date-picker-theme-ui.scss';
 @import '../../../components/drawer/style/themes/dnb-drawer-theme-ui.scss';
-Original file line number
+Diff line change
@@ Expand Up / @@ -84,8 +84,6 @@ @@
           .dnb-icon {
             align-self: center;
           }
-          color: var(--color-sea-green);
         }
       }
@@ Expand Down @@