feat(Checkbox): add indeterminate state (#3515)

Visual changed for checkbox indeterminate state

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

@@ -73,6 +73,20 @@ export const CheckboxBoundingArea = () => (
   </ShowBoundingArea>
 )
 
+export const CheckboxIndeterminate = () => (
+  <ComponentBox data-visual-test="checkbox-indeterminate">
+    <Checkbox label="Checkbox" indeterminate />
+  </ComponentBox>
+)
+
+export const CheckboxIndeterminateLarge = () => {
+  return (
+    <ComponentBox data-visual-test="checkbox-indeterminate-large">
+      <Checkbox label="Checkbox" indeterminate size="large" />
+    </ComponentBox>
+  )
+}
+
 const ShowBoundingArea = styled.div`
   .dnb-checkbox__input {
     opacity: 0.5;

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

@@ -11,6 +11,8 @@ import {
   CheckboxDisabled,
   CheckboxWithErrorStates,
   CheckboxBoundingArea,
+  CheckboxIndeterminate,
+  CheckboxIndeterminateLarge,
 } from 'Docs/uilib/components/checkbox/Examples'
 
 ## Demos
@@ -41,6 +43,14 @@ As for now, there are two sizes. `medium` is the default size.
 
 <CheckboxDisabled />
 
+### Indeterminate state
+
+The checkbox offers a fully controlled indeterminate state (partialy checked).
+
+<CheckboxIndeterminate />
+
+<CheckboxIndeterminateLarge />
+
 <VisibleWhenVisualTest>
   <CheckboxWithErrorStates />
   <CheckboxBoundingArea />

packages/dnb-eufemia/src/components/checkbox/CheckIcon.tsx

@@ -5,7 +5,7 @@ export type CheckIconProps = {
 }
 
 // The new checkbox has too low contrast, as it is too thin on web
-function CheckIcon({ size, ...props }: CheckIconProps) {
+function CheckIcon({ size }: CheckIconProps) {
   let vB = 16
   if (size === 'large') {
     vB = 24
@@ -18,7 +18,6 @@ function CheckIcon({ size, ...props }: CheckIconProps) {
       fill="none"
       className="dnb-checkbox__gfx"
       aria-hidden
-      {...props}
     >
       <path
         d={size === 'large' ? 'M1.5 15L7.5 21L22.5 3' : 'M1 10L5 14L15 2'}

packages/dnb-eufemia/src/components/checkbox/Checkbox.tsx

@@ -72,6 +72,10 @@ export type CheckboxProps = {
    * Determine whether the checkbox is checked or not. The default is `false`.
    */
   checked?: boolean | undefined | null
+  /**
+   * Determine whether to show the indeterminate checked state when checked. The default is `false`.
+   */
+  indeterminate?: boolean
   /**
    * The size of the checkbox. For now there is "medium" (default) and "large".
    */
@@ -167,6 +171,7 @@ function Checkbox(localProps: CheckboxProps) {
     skeleton,
     className,
     id: idProp,
+    indeterminate,
     checked,
     onChange,
     innerRef,
@@ -195,6 +200,10 @@ function Checkbox(localProps: CheckboxProps) {
     }
   }, [checked, prevChecked])
 
+  useEffect(() => {
+    ref.current.indeterminate = indeterminate
+  }, [indeterminate])
+
   const callOnChange: CheckboxProps['onChange'] = useCallback(
     (args) => {
       onChange?.(args)
@@ -316,6 +325,8 @@ function Checkbox(localProps: CheckboxProps) {
               <span className="dnb-checkbox__focus" />
             </span>
 
+            <span className="dnb-checkbox__indeterminate" />
+
             <CheckIcon size={size} />
           </span>
         </span>

packages/dnb-eufemia/src/components/checkbox/CheckboxDocs.ts

@@ -31,6 +31,11 @@ export const CheckboxProperties: PropertiesTableProps = {
     type: ['string', 'number'],
     status: 'optional',
   },
+  indeterminate: {
+    doc: 'Controls the checkbox indeterminate (partial) state.',
+    type: 'boolean',
+    status: 'optional',
+  },
   status: {
     doc: 'Text with a status message. The style defaults to an error message. You can use `true` to only get the status color, without a message.',
     type: 'string',

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

@@ -134,5 +134,20 @@ describe.each(['ui', 'sbanken'])('Checkbox for %s', (themeName) => {
       })
       expect(screenshot).toMatchImageSnapshot()
     })
+
+    it('have to match checkbox in indeterminate state', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="checkbox-indeterminate"] .dnb-checkbox',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
+    it('have to match checkbox in indeterminate state with larger bounding area', async () => {
+      const screenshot = await makeScreenshot({
+        selector:
+          '[data-visual-test="checkbox-indeterminate-large"] .dnb-checkbox',
+      })
+      expect(screenshot).toMatchImageSnapshot()
+    })
   })
 })

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

@@ -261,6 +261,48 @@ describe('Checkbox component', () => {
       document.querySelector('.dnb-checkbox__input').getAttribute('type')
     ).toBe('checkbox')
   })
+  describe('Indeterminate state', () => {
+    it('renders indeterminate state', () => {
+      render(<Checkbox indeterminate />)
+
+      expect(
+        document.querySelector('.dnb-checkbox__indeterminate')
+      ).toBeInTheDocument()
+    })
+
+    it('changes to no longer indeterminate when clicking indeterminate state', () => {
+      const mockOnChange = jest.fn()
+      render(<Checkbox indeterminate onChange={mockOnChange} />)
+
+      screen.getByRole('checkbox').click()
+
+      expect(mockOnChange).toHaveBeenCalledWith(
+        expect.not.objectContaining({ indeterminate: true })
+      )
+
+      expect(screen.getByRole('checkbox')).not.toHaveClass(
+        '.dnb-checkbox__indeterminate'
+      )
+    })
+
+    it('sets the input indeterminate when setting indeterminate true', () => {
+      render(<Checkbox indeterminate />)
+
+      expect(
+        (screen.getByRole('checkbox') as HTMLInputElement).indeterminate
+      ).toBe(true)
+    })
+
+    it('sets the input indeterminate to false when clicking an indeterminate checkbox', () => {
+      render(<Checkbox indeterminate />)
+
+      screen.getByRole('checkbox').click()
+
+      expect(
+        (screen.getByRole('checkbox') as HTMLInputElement).indeterminate
+      ).toBe(false)
+    })
+  })
 })
 
 describe('Checkbox scss', () => {