feat: Updated Sbanken theming + improved screenshot test coverage for…

… Radio+Checkbox (#2931)

Radio and Checkbox components:
- Following discussions with UX, some updates to Sbanken theming for
have been applied.
- Plugged some gaps in the screenshot test coverages, as bugs were
discovered in various scenarios related to error state. It is debatable
whether this is necessary, since radio buttons and checkboxes being in
erroneous states seems to be a very rare scenario.

packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/Examples.tsx

@@ -52,3 +52,14 @@ export const CheckboxDisabled = () => (
     <Checkbox checked disabled />
   </ComponentBox>
 )
+
+export const CheckboxWithErrorStates = () => (
+  <>
+    <ComponentBox data-visual-test="checkbox-error-unchecked">
+      <Checkbox label="Unchecked" status="error" />
+    </ComponentBox>
+    <ComponentBox data-visual-test="checkbox-error-checked">
+      <Checkbox label="Checked" status="error" checked />
+    </ComponentBox>
+  </>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/checkbox/demos.mdx

@@ -9,6 +9,7 @@ import {
   CheckboxSuffix,
   CheckboxDifferentSizes,
   CheckboxDisabled,
+  CheckboxWithErrorStates,
 } from 'Docs/uilib/components/checkbox/Examples'
 
 ## Demos
@@ -38,3 +39,7 @@ As for now, there are two sizes. `medium` is the default size.
 ### Disabled checkbox
 
 <CheckboxDisabled />
+
+<VisibleWhenVisualTest>
+  <CheckboxWithErrorStates />
+</VisibleWhenVisualTest>

packages/dnb-design-system-portal/src/docs/uilib/components/radio/Examples.tsx

@@ -172,3 +172,14 @@ export function RadioVisibleWhenVisualTests() {
     </>
   )
 }
+
+export const RadioExampleError = () => (
+  <>
+    <ComponentBox data-visual-test="radio-error-unchecked">
+      <Radio label="Unchecked" status="error" />
+    </ComponentBox>
+    <ComponentBox data-visual-test="radio-error-checked">
+      <Radio label="Checked" status="error" checked />
+    </ComponentBox>
+  </>
+)

packages/dnb-design-system-portal/src/docs/uilib/components/radio/demos.mdx

@@ -11,6 +11,7 @@ import {
   RadioExampleSizes,
   RadioExampleDisabled,
   RadioExampleSuffix,
+  RadioExampleError,
   RadioVisibleWhenVisualTests,
 } from 'Docs/uilib/components/radio/Examples'
 
@@ -55,5 +56,6 @@ With `label_position` set to left.
 <RadioExampleSuffix />
 
 <VisibleWhenVisualTest>
+  <RadioExampleError />
   <RadioVisibleWhenVisualTests />
 </VisibleWhenVisualTest>

packages/dnb-eufemia/src/components/checkbox/__tests__/Checkbox.screenshot.test.ts

@@ -41,6 +41,23 @@ describe.each(['ui', 'sbanken'])('Checkbox for %s', (themeName) => {
       })
       expect(screenshot).toMatchImageSnapshot()
     })
+
+    it('have to match checkbox in unchecked state with error', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="checkbox-error-unchecked"] .dnb-checkbox',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('have to match checkbox in unchecked state with error and hover', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="checkbox-error-unchecked"] .dnb-checkbox',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
   })
 
   // NB: Because of focus simulation and screenshotElement.press('Tab')
@@ -93,5 +110,22 @@ describe.each(['ui', 'sbanken'])('Checkbox for %s', (themeName) => {
       })
       expect(screenshot).toMatchImageSnapshot()
     })
+
+    it('have to match checkbox in checked state with error', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="checkbox-error-checked"] .dnb-checkbox',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('have to match checkbox in checked state with error and hover', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="checkbox-error-checked"] .dnb-checkbox',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
   })
 })

packages/dnb-eufemia/src/components/checkbox/__tests__/__snapshots__/Checkbox.test.tsx.snap

@@ -387,6 +387,10 @@ html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-
 html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
   border: none;
   background-color: var(--checkbox-color-background--error-contrast);
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--error-contrast);

packages/dnb-eufemia/src/components/checkbox/style/dnb-checkbox.scss

@@ -351,6 +351,10 @@
     html[data-whatinput='keyboard'] & {
       border: none;
       background-color: var(--checkbox-color-background--error-contrast);
+      @include fakeBorder(
+        var(--checkbox-color-border--error),
+        calc(var(--focus-ring-width) + 0.0625rem)
+      );
     }
   }
   &__status--error &__input:not([disabled]):focus:hover ~ &__gfx {

packages/dnb-eufemia/src/components/checkbox/style/themes/dnb-checkbox-theme-sbanken.scss

@@ -9,8 +9,8 @@
   --checkbox-color-gfx-off: var(--sb-color-violet-light);
   --checkbox-color-background-on: var(--sb-color-white);
   --checkbox-color-background-off: var(--sb-color-white);
-  --checkbox-color-border-on: var(--sb-color-gray-dark-2-neutral);
-  --checkbox-color-border-off: var(--sb-color-gray-dark-2-neutral);
+  --checkbox-color-border-on: var(--sb-color-violet);
+  --checkbox-color-border-off: var(--sb-color-violet);
   // Disabled state
   --checkbox-color-gfx--disabled: var(--sb-color-gray-dark-2-neutral);
   --checkbox-color-background-on--disabled: var(--sb-color-gray-light);
@@ -26,11 +26,11 @@
   --checkbox-color-border--active: var(--sb-color-gray);
   // Hover state
   --checkbox-color-gfx--hover: var(--sb-color-violet-light);
-  --checkbox-color-background--hover: var(--sb-color-white);
-  --checkbox-color-border-on--hover: var(--sb-color-violet-light);
-  --checkbox-color-border-off--hover: var(--sb-color-violet-light);
+  --checkbox-color-background--hover: var(--sb-color-violet-light-3);
+  --checkbox-color-border-on--hover: var(--sb-color-violet);
+  --checkbox-color-border-off--hover: var(--sb-color-violet);
   // Focus state
-  --checkbox-color-gfx--focus: var(--sb-color-violet-light);
+  --checkbox-color-gfx--focus: var(--focus-ring-color);
   --checkbox-color-background--focus: var(--sb-color-blue-light-3);
   // Error state
   --checkbox-color-gfx--error: var(--sb-color-magenta);

packages/dnb-eufemia/src/components/date-picker/__tests__/__snapshots__/DatePicker.test.tsx.snap

@@ -2806,6 +2806,10 @@ html[data-whatinput=keyboard] .dnb-checkbox__input:not([disabled]):focus ~ .dnb-
 html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus ~ .dnb-checkbox__button, html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__button {
   border: none;
   background-color: var(--checkbox-color-background--error-contrast);
+  --border-color: var(--checkbox-color-border--error);
+  --border-width: calc(var(--focus-ring-width) + 0.0625rem);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
 }
 html[data-whatinput=keyboard] .dnb-checkbox__status--error .dnb-checkbox__input:not([disabled]):focus:hover ~ .dnb-checkbox__gfx {
   color: var(--checkbox-color-gfx--error-contrast);
@@ -2988,13 +2992,17 @@ button .dnb-form-status__text {
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
   --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   --radio-color-dot-on--error: red;
   --radio-color-border-on--error: red;
-  --radio-color-background-off--error: lavenderblush;
+  --radio-color-border--error-hover: red;
+  --radio-color-background-off--error-hover: lavenderblush;
+  --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
+  --radio-focus-ring-width--error: var(--focus-ring-width);
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -3226,6 +3234,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--hover);
 }
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--hover);
+}
 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--hover);
 }
@@ -3235,9 +3246,12 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-rad
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
   display: block;
 }
-.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on--focus);
 }
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--focus, var(--focus-ring-color));
+}
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--focus);
 }
@@ -3247,7 +3261,13 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
   display: block;
   --border-color: var(--radio-color-border-on--error);
-  --border-width: var(--focus-ring-width);
+  --border-width: var(--radio-focus-ring-width--error);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-radio__focus {
+  --border-color: var(--radio-color-border--error-hover);
+  --border-width: var(--radio-focus-ring-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -3257,8 +3277,11 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--error-hover);
 }
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__button, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--error-hover);
+}
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--radio-color-background-off--error);
+  background-color: var(--radio-color-background-off--error-hover);
 }
 
 /*

packages/dnb-eufemia/src/components/radio/__tests__/Radio.screenshot.test.ts

@@ -41,6 +41,21 @@ describe.each(['ui', 'sbanken'])('Radio for %s', (themeName) => {
       })
       expect(screenshot).toMatchImageSnapshot()
     })
+
+    it('have to match radio in unchecked state with error', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="radio-error-unchecked"] .dnb-radio',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('have to match radio in unchecked state with error and hover', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="radio-error-unchecked"] .dnb-radio',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
   })
 
   // NB: Because of focus simulation and screenshotElement.press('Tab')
@@ -130,5 +145,20 @@ describe.each(['ui', 'sbanken'])('Radio for %s', (themeName) => {
       })
       expect(screenshot).toMatchImageSnapshot()
     })
+
+    it('have to match radio in checked state with error', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="radio-error-checked"] .dnb-radio',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+
+    it('have to match radio in checked state with error and hover', async () => {
+      const screenshot = await makeScreenshot({
+        selector: '[data-visual-test="radio-error-checked"] .dnb-radio',
+        simulate: 'hover',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
   })
 })

packages/dnb-eufemia/src/components/radio/__tests__/__snapshots__/Radio.test.tsx.snap

@@ -166,13 +166,17 @@ button .dnb-form-status__text {
   --radio-color-background-off--active: lightgrey;
   --radio-color-border-off--active: transparent;
   --radio-color-dot-on--hover: lightgrey;
+  --radio-color-background-on--hover: lightgrey;
   --radio-color-background-off--hover: lightgrey;
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: lightgrey;
   --radio-color-dot-on--error: red;
   --radio-color-border-on--error: red;
-  --radio-color-background-off--error: lavenderblush;
+  --radio-color-border--error-hover: red;
+  --radio-color-background-off--error-hover: lavenderblush;
+  --radio-color-background-on--error-hover: lavenderblush;
   --radio-color-dot-on--error-hover: lavenderblush;
+  --radio-focus-ring-width--error: var(--focus-ring-width);
   display: inline-flex;
   flex-direction: column;
   font-size: var(--font-size-small);
@@ -404,6 +408,9 @@ html[data-whatinput=keyboard] .dnb-radio__focus {
 .dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__dot, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--hover);
 }
+.dnb-radio__input:not([disabled]):not(:focus):checked:hover ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:focus)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--hover);
+}
 .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--hover);
 }
@@ -413,9 +420,12 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):focus ~ .dnb-rad
 .dnb-radio__input:not([disabled]):focus ~ .dnb-radio__focus, .dnb-radio__input:not([disabled]):active ~ .dnb-radio__focus {
   display: block;
 }
-.dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__button, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-on--focus);
 }
+html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover):checked:focus ~ .dnb-radio__dot, html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:active):not(:hover)[data-checked=true]:focus ~ .dnb-radio__dot {
+  background-color: var(--radio-color-dot-on--focus, var(--focus-ring-color));
+}
 html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):not([data-checked=true]):focus ~ .dnb-radio__button {
   background-color: var(--radio-color-background-off--focus);
 }
@@ -425,7 +435,13 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active) ~ .dnb-radio__focus {
   display: block;
   --border-color: var(--radio-color-border-on--error);
-  --border-width: var(--focus-ring-width);
+  --border-width: var(--radio-focus-ring-width--error);
+  box-shadow: 0 0 0 var(--border-width) var(--border-color);
+  border-color: transparent;
+}
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):hover ~ .dnb-radio__focus {
+  --border-color: var(--radio-color-border--error-hover);
+  --border-width: var(--radio-focus-ring-width--error);
   box-shadow: 0 0 0 var(--border-width) var(--border-color);
   border-color: transparent;
 }
@@ -435,8 +451,11 @@ html[data-whatinput=keyboard] .dnb-radio__input:not([disabled]):not(:checked):no
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__dot, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__dot {
   background-color: var(--radio-color-dot-on--error-hover);
 }
+.dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active):checked:hover ~ .dnb-radio__button, .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:active)[data-checked=true]:hover ~ .dnb-radio__button {
+  background-color: var(--radio-color-background-on--error-hover);
+}
 .dnb-radio__status--error .dnb-radio__input:not([disabled]):not(:focus):not(:checked):not([data-checked=true]):hover ~ .dnb-radio__button {
-  background-color: var(--radio-color-background-off--error);
+  background-color: var(--radio-color-background-off--error-hover);
 }"
 `;
 
@@ -459,12 +478,16 @@ exports[`Radio scss have to match default theme snapshot 1`] = `
   --radio-color-background-off--active: var(--color-mint-green-50);
   --radio-color-border-off--active: transparent;
   --radio-color-dot-on--hover: var(--color-mint-green-50);
+  --radio-color-background-on--hover: var(--color-white);
   --radio-color-background-off--hover: var(--color-mint-green-50);
+  --radio-color-dot-on--focus: var(--color-sea-green);
   --radio-color-background-on--focus: var(--color-white);
   --radio-color-background-off--focus: var(--color-mint-green-50);
   --radio-color-dot-on--error: var(--color-fire-red);
   --radio-color-border-on--error: var(--color-fire-red);
-  --radio-color-background-off--error: var(--color-fire-red-8);
+  --radio-color-border--error-hover: var(--radio-color-border-on--error);
+  --radio-color-background-off--error-hover: var(--color-fire-red-8);
+  --radio-color-background-on--error-hover: var(--color-white);
   --radio-color-dot-on--error-hover: var(--color-fire-red-8);
 }"
 `;