feat(FormLabel): sbanken (#2563)

## Summary Sbanken styling of labels
dnbexperience · Aug 23, 2023 · 308a0b6 · 308a0b6 · vercel · Aug 23, 2023
1 parent 06eb04a
commit 308a0b6
Show file tree

Hide file tree

Showing 61 changed files with 43 additions and 25 deletions.
diff --git a/packages/dnb-design-system-portal/src/docs/uilib/components/form-label.mdx b/packages/dnb-design-system-portal/src/docs/uilib/components/form-label.mdx
@@ -4,6 +4,7 @@ description: 'The FormLabel component represents a caption for all sorts of HTML
 showTabs: true
 hideTabs:
   - title: Events
+theme: 'sbanken'
 ---
 
 import FormLabelInfo from 'Docs/uilib/components/form-label/info'

diff --git a/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts b/packages/dnb-eufemia/src/components/anchor/__tests__/Anchor.screenshot.test.ts
@@ -217,6 +217,7 @@ describe.each(['ui', 'sbanken'])(
           simulateSelector:
             '[data-visual-test="anchor-blank"] a.dnb-anchor',
           simulate: 'hover',
+          waitAfterSimulate: 200,
         })
         expect(screenshot).toMatchImageSnapshot()
       })

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
@@ -800,7 +800,6 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -1914,7 +1913,6 @@ button.dnb-button::-moz-focus-inner {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap b/packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`Checkbox scss has to match style dependencies css 1`] = `
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap b/...s/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap
@@ -800,7 +800,6 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -1828,7 +1827,6 @@ button.dnb-button::-moz-focus-inner {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -2422,7 +2420,6 @@ button.dnb-button::-moz-focus-inner {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -2702,7 +2699,6 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -3248,7 +3244,6 @@ button .dnb-form-status__text {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap b/packages/dnb-eufemia/src/components/dropdown/__tests__/__snapshots__/Dropdown.test.tsx.snap
@@ -671,7 +671,6 @@ button.dnb-button::-moz-focus-inner {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.screenshot.test.ts b/packages/dnb-eufemia/src/components/form-label/__tests__/FormLabel.screenshot.test.ts
@@ -8,8 +8,11 @@ import {
   setupPageScreenshot,
 } from '../../../core/jest/jestSetupScreenshots'
 
-describe('FormLabel', () => {
-  setupPageScreenshot({ url: '/uilib/components/form-label/demos' })
+describe.each(['ui', 'sbanken'])('FormLabel for %s', (themeName) => {
+  setupPageScreenshot({
+    themeName,
+    url: '/uilib/components/form-label/demos',
+  })
 
   it('have to match default form-label', async () => {
     const screenshot = await makeScreenshot({
@@ -26,6 +29,16 @@ describe('FormLabel', () => {
     expect(screenshot).toMatchImageSnapshot()
   })
 
+  it('have to match checkbox label hover', async () => {
+    const screenshot = await makeScreenshot({
+      selector: '[data-visual-test="form-label-default"]',
+      simulate: 'hover',
+      simulateSelector:
+        '[data-visual-test="form-label-default"] .dnb-checkbox .dnb-form-label',
+    })
+    expect(screenshot).toMatchImageSnapshot()
+  })
+
   it('have to match vertical form-label', async () => {
     const screenshot = await makeScreenshot({
       selector: '[data-visual-test="form-label-vertical"]',

diff --git a/...e_snapshots__/formlabel-for-sbanken-have-to-match-checkbox-label-hover.snap.png b/...e_snapshots__/formlabel-for-sbanken-have-to-match-checkbox-label-hover.snap.png
diff --git a/...ts__/formlabel-for-sbanken-have-to-match-default-form-label-with-hover.snap.png b/...ts__/formlabel-for-sbanken-have-to-match-default-form-label-with-hover.snap.png
diff --git a/...age_snapshots__/formlabel-for-sbanken-have-to-match-default-form-label.snap.png b/...age_snapshots__/formlabel-for-sbanken-have-to-match-default-form-label.snap.png
diff --git a/...ge_snapshots__/formlabel-for-sbanken-have-to-match-vertical-form-label.snap.png b/...ge_snapshots__/formlabel-for-sbanken-have-to-match-vertical-form-label.snap.png
diff --git a/..._image_snapshots__/formlabel-for-ui-have-to-match-checkbox-label-hover.snap.png b/..._image_snapshots__/formlabel-for-ui-have-to-match-checkbox-label-hover.snap.png
diff --git a/...ch-default-form-label-with-hover.snap.png → ...ch-default-form-label-with-hover.snap.png b/...ch-default-form-label-with-hover.snap.png → ...ch-default-form-label-with-hover.snap.png
diff --git a/...have-to-match-default-form-label.snap.png → ...have-to-match-default-form-label.snap.png b/...have-to-match-default-form-label.snap.png → ...have-to-match-default-form-label.snap.png
diff --git a/...ave-to-match-vertical-form-label.snap.png → ...ave-to-match-vertical-form-label.snap.png b/...ave-to-match-vertical-form-label.snap.png → ...ave-to-match-vertical-form-label.snap.png
diff --git a/...ges/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap b/...ges/dnb-eufemia/src/components/form-label/__tests__/__snapshots__/FormLabel.test.tsx.snap
@@ -34,7 +34,6 @@ exports[`FormLabel scss has to match style dependencies css 1`] = `
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -53,6 +52,9 @@ exports[`FormLabel scss have to match default theme snapshot 1`] = `
 .dnb-form-label {
   color: var(--color-black-80);
 }
+.dnb-form-label[for]:not([disabled]) {
+  cursor: pointer;
+}
 .dnb-form-label[for]:not([disabled]):hover {
   color: var(--color-sea-green);
 }"

diff --git a/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss b/packages/dnb-eufemia/src/components/form-label/style/dnb-form-label.scss
@@ -33,7 +33,6 @@
 
   &[for]:not([disabled]) {
     user-select: none; // Safari / Touch fix
-    cursor: pointer;
   }
 
   &[disabled] {

diff --git a/...ages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-sbanken.scss b/...ages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-sbanken.scss
@@ -0,0 +1,16 @@
+/*
+ * FormLabel theme
+ *
+ */
+
+.dnb-form-label {
+  color: var(--sb-color-text);
+
+  .dnb-checkbox &,
+  .dnb-switch &,
+  .dnb-radio & {
+    &[for]:not([disabled]) {
+      cursor: pointer;
+    }
+  }
+}
diff --git a/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss b/packages/dnb-eufemia/src/components/form-label/style/themes/dnb-form-label-theme-ui.scss
@@ -6,7 +6,11 @@
 .dnb-form-label {
   color: var(--color-black-80);
 
-  &[for]:not([disabled]):hover {
-    color: var(--color-sea-green);
+  &[for]:not([disabled]) {
+    cursor: pointer;
+
+    &:hover {
+      color: var(--color-sea-green);
+    }
   }
 }
diff --git a/...ts__/__image_snapshots__/input-for-sbanken-have-to-match-currency-mask.snap.png b/...ts__/__image_snapshots__/input-for-sbanken-have-to-match-currency-mask.snap.png
diff --git a/...__/__image_snapshots__/input-for-sbanken-have-to-match-locale-currency.snap.png b/...__/__image_snapshots__/input-for-sbanken-have-to-match-locale-currency.snap.png
diff --git a/...ts__/__image_snapshots__/input-for-sbanken-have-to-match-locale-number.snap.png b/...ts__/__image_snapshots__/input-for-sbanken-have-to-match-locale-number.snap.png
diff --git a/...ests__/__image_snapshots__/input-for-sbanken-have-to-match-number-mask.snap.png b/...ests__/__image_snapshots__/input-for-sbanken-have-to-match-number-mask.snap.png
diff --git a/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap b/...dnb-eufemia/src/components/input-masked/__tests__/__snapshots__/InputMasked.test.tsx.snap
@@ -800,7 +800,6 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/...s__/__image_snapshots__/input-for-sbanken-have-to-match-disabled-input.snap.png b/...s__/__image_snapshots__/input-for-sbanken-have-to-match-disabled-input.snap.png
diff --git a/.../__image_snapshots__/input-for-sbanken-have-to-match-error-focus-state.snap.png b/.../__image_snapshots__/input-for-sbanken-have-to-match-error-focus-state.snap.png
diff --git a/.../__image_snapshots__/input-for-sbanken-have-to-match-error-hover-state.snap.png b/.../__image_snapshots__/input-for-sbanken-have-to-match-error-hover-state.snap.png
diff --git a/...ge_snapshots__/input-for-sbanken-have-to-match-error-mouse-focus-state.snap.png b/...ge_snapshots__/input-for-sbanken-have-to-match-error-mouse-focus-state.snap.png
diff --git a/...ests__/__image_snapshots__/input-for-sbanken-have-to-match-error-state.snap.png b/...ests__/__image_snapshots__/input-for-sbanken-have-to-match-error-state.snap.png
diff --git a/...e_snapshots__/input-for-sbanken-have-to-match-error-with-button-active.snap.png b/...e_snapshots__/input-for-sbanken-have-to-match-error-with-button-active.snap.png
diff --git a/...ge_snapshots__/input-for-sbanken-have-to-match-error-with-button-focus.snap.png b/...ge_snapshots__/input-for-sbanken-have-to-match-error-with-button-focus.snap.png
diff --git a/...ge_snapshots__/input-for-sbanken-have-to-match-error-with-button-hover.snap.png b/...ge_snapshots__/input-for-sbanken-have-to-match-error-with-button-hover.snap.png
diff --git a/.../__image_snapshots__/input-for-sbanken-have-to-match-error-with-button.snap.png b/.../__image_snapshots__/input-for-sbanken-have-to-match-error-with-button.snap.png
diff --git a/...__/__image_snapshots__/input-for-sbanken-have-to-match-input-with-icon.snap.png b/...__/__image_snapshots__/input-for-sbanken-have-to-match-input-with-icon.snap.png
diff --git a/...age_snapshots__/input-for-sbanken-have-to-match-input-with-placeholder.snap.png b/...age_snapshots__/input-for-sbanken-have-to-match-input-with-placeholder.snap.png
diff --git a/...s__/__image_snapshots__/input-for-sbanken-have-to-match-password-input.snap.png b/...s__/__image_snapshots__/input-for-sbanken-have-to-match-password-input.snap.png
diff --git a/..._/input-for-sbanken-have-to-match-search-type-with-button-active-state.snap.png b/..._/input-for-sbanken-have-to-match-search-type-with-button-active-state.snap.png
diff --git a/...__/input-for-sbanken-have-to-match-search-type-with-button-focus-state.snap.png b/...__/input-for-sbanken-have-to-match-search-type-with-button-focus-state.snap.png
diff --git a/...__/input-for-sbanken-have-to-match-search-type-with-button-hover-state.snap.png b/...__/input-for-sbanken-have-to-match-search-type-with-button-hover-state.snap.png
diff --git a/...apshots__/input-for-sbanken-have-to-match-search-type-with-focus-state.snap.png b/...apshots__/input-for-sbanken-have-to-match-search-type-with-focus-state.snap.png
diff --git a/...apshots__/input-for-sbanken-have-to-match-search-type-with-hover-state.snap.png b/...apshots__/input-for-sbanken-have-to-match-search-type-with-hover-state.snap.png
diff --git a/...s__/input-for-sbanken-have-to-match-search-type-with-mouse-focus-state.snap.png b/...s__/input-for-sbanken-have-to-match-search-type-with-mouse-focus-state.snap.png
diff --git a/...ests__/__image_snapshots__/input-for-sbanken-have-to-match-search-type.snap.png b/...ests__/__image_snapshots__/input-for-sbanken-have-to-match-search-type.snap.png
diff --git a/...napshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png b/...napshots__/input-for-sbanken-have-to-match-stretched-input-with-status.snap.png
diff --git a/...image_snapshots__/input-for-sbanken-have-to-match-text-align-with-icon.snap.png b/...image_snapshots__/input-for-sbanken-have-to-match-text-align-with-icon.snap.png
diff --git a/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap b/packages/dnb-eufemia/src/components/input/__tests__/__snapshots__/Input.test.tsx.snap
@@ -793,7 +793,6 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap b/packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`Radio scss has to match style dependencies css 1`] = `
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap b/packages/dnb-eufemia/src/components/slider/__tests__/__snapshots__/Slider.test.tsx.snap
@@ -707,7 +707,6 @@ html[data-visual-test] .dnb-tooltip--hide {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.tsx.snap b/packages/dnb-eufemia/src/components/switch/__tests__/__snapshots__/Switch.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`Switch scss has to match style dependencies css 1`] = `
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/...napshots__/textarea-for-sbanken-have-to-match-stretched-textarea-style.snap.png b/...napshots__/textarea-for-sbanken-have-to-match-stretched-textarea-style.snap.png
diff --git a/...__/textarea-for-sbanken-have-to-match-the-default-error-textarea-style.snap.png b/...__/textarea-for-sbanken-have-to-match-the-default-error-textarea-style.snap.png
diff --git a/...pshots__/textarea-for-sbanken-have-to-match-the-default-textarea-style.snap.png b/...pshots__/textarea-for-sbanken-have-to-match-the-default-textarea-style.snap.png
diff --git a/...napshots__/textarea-for-sbanken-have-to-match-the-error-textarea-focus.snap.png b/...napshots__/textarea-for-sbanken-have-to-match-the-error-textarea-focus.snap.png
diff --git a/...napshots__/textarea-for-sbanken-have-to-match-the-error-textarea-hover.snap.png b/...napshots__/textarea-for-sbanken-have-to-match-the-error-textarea-hover.snap.png
diff --git a/...ts__/textarea-for-sbanken-have-to-match-the-error-textarea-mouse-focus.snap.png b/...ts__/textarea-for-sbanken-have-to-match-the-error-textarea-mouse-focus.snap.png
diff --git a/...napshots__/textarea-for-sbanken-have-to-match-the-focus-textarea-style.snap.png b/...napshots__/textarea-for-sbanken-have-to-match-the-focus-textarea-style.snap.png
diff --git a/...napshots__/textarea-for-sbanken-have-to-match-the-hover-textarea-style.snap.png b/...napshots__/textarea-for-sbanken-have-to-match-the-hover-textarea-style.snap.png
diff --git a/...ts__/textarea-for-sbanken-have-to-match-the-mouse-focus-textarea-style.snap.png b/...ts__/textarea-for-sbanken-have-to-match-the-mouse-focus-textarea-style.snap.png
diff --git a/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap b/packages/dnb-eufemia/src/components/textarea/__tests__/__snapshots__/Textarea.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`Textarea scss has to match style dependencies css 1`] = `
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

diff --git a/...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap b/...b-eufemia/src/components/toggle-button/__tests__/__snapshots__/ToggleButton.test.tsx.snap
@@ -41,7 +41,6 @@ exports[`ToggleButton scss has to match style dependencies css 1`] = `
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -635,7 +634,6 @@ button.dnb-button::-moz-focus-inner {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;
@@ -915,7 +913,6 @@ html[data-whatinput=keyboard] .dnb-checkbox__focus {
 }
 .dnb-form-label[for]:not([disabled]) {
   user-select: none;
-  cursor: pointer;
 }
 .dnb-form-label[disabled] {
   cursor: not-allowed;

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
@@ -20,6 +20,7 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/anchor/style/themes/dnb-anchor-theme-sbanken.scss';
 @import '../../../components/avatar/style/themes/dnb-avatar-theme-sbanken.scss';
 @import '../../../components/button/style/themes/dnb-button-theme-sbanken.scss';
+@import '../../../components/form-label/style/themes/dnb-form-label-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';
@@ -33,7 +34,6 @@ $fonts-path: '../../../../assets/fonts/dnb' !default;
 @import '../../../components/dialog/style/themes/dnb-dialog-theme-ui.scss';
 @import '../../../components/drawer/style/themes/dnb-drawer-theme-ui.scss';
 @import '../../../components/dropdown/style/themes/dnb-dropdown-theme-ui.scss';
-@import '../../../components/form-label/style/themes/dnb-form-label-theme-ui.scss';
 @import '../../../components/form-row/style/themes/dnb-form-row-theme-ui.scss';
 @import '../../../components/form-set/style/themes/dnb-form-set-theme-ui.scss';
 @import '../../../components/form-status/style/themes/dnb-form-status-theme-ui.scss';