feat(checkbox): adds checkbox component in ui with story and unit tests

packages/bruno-app/src/themes/DesignSystem/Overview.jsx

@@ -283,7 +283,7 @@ export const IntroductionRender = () => {
             { name: 'Primary Colors', desc: '4 variants for brand identity', color: palette.primary.SOLID },
             { name: 'Backgrounds', desc: '6 layered surface colors', color: theme.background.mantle },
             { name: 'Text', desc: '8 semantic text colors', color: theme.text },
-            { name: 'Borders', desc: '3 hierarchy levels', color: theme.border.border2 },
+            { name: 'Borders', desc: '4 hierarchy levels', color: theme.border.border2 },
             { name: 'Overlays', desc: '3 depth levels', color: theme.overlay.overlay1 },
             { name: 'Hues', desc: '14 hue-spread colors', color: palette.hues.BLUE }
           ].map(({ name, desc, color }) => (
@@ -1306,7 +1306,8 @@ export const BordersAndOverlaysRender = () => {
           {[
             { name: 'border0', color: theme.border.border0, desc: 'Subtle separations, card outlines' },
             { name: 'border1', color: theme.border.border1, desc: 'Standard dividers, input borders' },
-            { name: 'border2', color: theme.border.border2, desc: 'Focus states, selected items' }
+            { name: 'border2', color: theme.border.border2, desc: 'Focus states, selected items' },
+            { name: 'border3', color: theme.border.border3, desc: 'Stronger outlines, e.g. unchecked checkboxes' }
           ].map(({ name, color, desc }) => (
             <div
               key={name}

packages/bruno-app/src/themes/dark/catppuccin-frappe.js

@@ -148,6 +148,7 @@ const catppuccinFrappeTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.OVERLAY0,
     border2: colors.SURFACE2,
     border1: colors.SURFACE1,
     border0: colors.SURFACE0

packages/bruno-app/src/themes/dark/catppuccin-macchiato.js

@@ -148,6 +148,7 @@ const catppuccinMacchiatoTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.OVERLAY0,
     border2: colors.SURFACE2,
     border1: colors.SURFACE1,
     border0: colors.SURFACE0

packages/bruno-app/src/themes/dark/catppuccin-mocha.js

@@ -148,6 +148,7 @@ const catppuccinMochaTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.OVERLAY0,
     border2: colors.SURFACE2,
     border1: colors.SURFACE1,
     border0: colors.SURFACE0

packages/bruno-app/src/themes/dark/dark-monochrome.js

@@ -129,6 +129,7 @@ const darkMonochromeTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.GRAY_5,
     border2: colors.GRAY_4,
     border1: colors.GRAY_3,
     border0: colors.GRAY_2

packages/bruno-app/src/themes/dark/dark-pastel.js

@@ -156,6 +156,7 @@ const darkPastelTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.GRAY_6,
     border2: colors.GRAY_5,
     border1: colors.GRAY_4,
     border0: colors.GRAY_3

packages/bruno-app/src/themes/dark/dark.js

@@ -46,6 +46,7 @@ export const palette = {
     OVERLAY0: '#444444'
   },
   border: {
+    BORDER3: '#989898',
     BORDER2: '#444444',
     BORDER1: '#333333',
     BORDER0: '#2a2a2a'
@@ -180,6 +181,7 @@ const darkTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: palette.border.BORDER3,
     border2: palette.border.BORDER2,
     border1: palette.border.BORDER1,
     border0: palette.border.BORDER0

packages/bruno-app/src/themes/dark/nord.js

@@ -6,7 +6,7 @@
 // Frost: nord7-nord10 (#8fbcbb, #88c0d0, #81a1c1, #5e81ac)
 // Aurora: nord11-nord15 (#bf616a, #d08770, #ebcb8b, #a3be8c, #b48ead)
 
-import { rgba } from 'polished';
+import { rgba, lighten } from 'polished';
 
 const colors = {
   // Polar Night
@@ -155,6 +155,7 @@ const nordTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: lighten(0.15, colors.NORD3),
     border2: colors.NORD3,
     border1: colors.NORD2,
     border0: colors.NORD1

packages/bruno-app/src/themes/dark/vscode.js

@@ -158,6 +158,7 @@ const vscodeDarkTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.GRAY_6,
     border2: colors.GRAY_5,
     border1: colors.BORDER,
     border0: colors.BORDER_LIGHT

packages/bruno-app/src/themes/light/catppuccin-latte.js

@@ -148,6 +148,7 @@ const catppuccinLatteTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.OVERLAY0,
     border2: colors.SURFACE2,
     border1: colors.SURFACE1,
     border0: colors.SURFACE0

packages/bruno-app/src/themes/light/light-monochrome.js

@@ -130,6 +130,7 @@ const lightMonochromeTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.GRAY_6,
     border2: colors.GRAY_5,
     border1: colors.GRAY_4,
     border0: colors.GRAY_3

packages/bruno-app/src/themes/light/light-pastel.js

@@ -147,6 +147,7 @@ const lightPastelTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.GRAY_5,
     border2: colors.GRAY_4,
     border1: colors.GRAY_3,
     border0: colors.GRAY_2

packages/bruno-app/src/themes/light/light.js

@@ -45,6 +45,7 @@ export const palette = {
     OVERLAY0: '#C0C0C0'
   },
   border: {
+    BORDER3: '#B1B1B1',
     BORDER2: '#cccccc',
     BORDER1: '#e5e5e5',
     BORDER0: '#efefef'
@@ -166,6 +167,7 @@ const lightTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: palette.border.BORDER3,
     border2: palette.border.BORDER2,
     border1: palette.border.BORDER1,
     border0: palette.border.BORDER0

packages/bruno-app/src/themes/light/vscode.js

@@ -151,6 +151,7 @@ const vscodeLightTheme = {
       lg: '10px',
       xl: '12px'
     },
+    border3: colors.GRAY_5,
     border2: colors.GRAY_4,
     border1: colors.BORDER,
     border0: colors.GRAY_2

packages/bruno-app/src/themes/schema/oss.js

@@ -150,11 +150,12 @@ export const ossSchema = {
           required: ['sm', 'base', 'md', 'lg', 'xl'],
           additionalProperties: false
         },
+        border3: { type: 'string' },
         border2: { type: 'string' },
         border1: { type: 'string' },
         border0: { type: 'string' }
       },
-      required: ['radius', 'border2', 'border1', 'border0'],
+      required: ['radius', 'border3', 'border2', 'border1', 'border0'],
       additionalProperties: false
     },
 

packages/bruno-app/src/ui/Checkbox/Checkbox.spec.jsx

@@ -0,0 +1,187 @@
+import '@testing-library/jest-dom';
+import React, { createRef, useState } from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+import { ThemeProvider } from 'styled-components';
+import Checkbox from './index';
+
+const theme = {
+  mode: 'light',
+  text: '#343434',
+  border: { border3: '#B1B1B1' },
+  primary: { solid: '#D37F17' },
+  button2: { color: { primary: { text: '#ffffff' } } },
+  font: { size: { sm: '0.75rem' } }
+};
+
+const renderWithTheme = (ui) => render(<ThemeProvider theme={theme}>{ui}</ThemeProvider>);
+
+const renderCheckbox = (props = {}) => {
+  const hasAccessibleName = 'label' in props || 'ariaLabel' in props || 'ariaLabelledBy' in props;
+  return renderWithTheme(
+    <Checkbox onChange={() => {}} {...(hasAccessibleName ? {} : { ariaLabel: 'Checkbox' })} {...props} />
+  );
+};
+
+describe('Checkbox', () => {
+  let user;
+
+  beforeEach(() => {
+    user = userEvent.setup();
+  });
+
+  it('renders unchecked by default', () => {
+    renderCheckbox();
+    expect(screen.getByRole('checkbox')).not.toBeChecked();
+  });
+
+  it('reflects the checked prop', () => {
+    renderCheckbox({ checked: true });
+    expect(screen.getByRole('checkbox')).toBeChecked();
+  });
+
+  it('calls onChange when clicked', async () => {
+    const onChange = jest.fn();
+    renderCheckbox({ onChange });
+
+    await user.click(screen.getByRole('checkbox'));
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('does not call onChange when disabled', async () => {
+    const onChange = jest.fn();
+    renderCheckbox({ onChange, disabled: true });
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeDisabled();
+    await user.click(checkbox);
+
+    expect(onChange).not.toHaveBeenCalled();
+  });
+
+  it('updates when driven as a controlled component', async () => {
+    const Controlled = () => {
+      const [checked, setChecked] = useState(false);
+      return <Checkbox checked={checked} onChange={(e) => setChecked(e.target.checked)} />;
+    };
+    renderWithTheme(<Controlled />);
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).not.toBeChecked();
+
+    await user.click(checkbox);
+    expect(checkbox).toBeChecked();
+
+    await user.click(checkbox);
+    expect(checkbox).not.toBeChecked();
+  });
+
+  it('renders the optional label and associates it with the input', () => {
+    renderCheckbox({ label: 'Accept terms' });
+
+    expect(screen.getByText('Accept terms')).toBeInTheDocument();
+    expect(screen.getByRole('checkbox', { name: 'Accept terms' })).toBeInTheDocument();
+  });
+
+  it('toggles via keyboard (space)', async () => {
+    const onChange = jest.fn();
+    renderCheckbox({ onChange });
+
+    const checkbox = screen.getByRole('checkbox');
+    checkbox.focus();
+    await user.keyboard(' ');
+
+    expect(onChange).toHaveBeenCalledTimes(1);
+  });
+
+  it('applies the data-testid to the input', () => {
+    renderCheckbox({ 'data-testid': 'my-checkbox' });
+    expect(screen.getByTestId('my-checkbox')).toBe(screen.getByRole('checkbox'));
+  });
+
+  it('forwards the ref to the input element', () => {
+    const ref = createRef();
+    renderCheckbox({ ref });
+
+    expect(ref.current).toBe(screen.getByRole('checkbox'));
+  });
+
+  it('forwards additional props to the input', () => {
+    renderCheckbox({ required: true, name: 'terms' });
+
+    const checkbox = screen.getByRole('checkbox');
+    expect(checkbox).toBeRequired();
+    expect(checkbox).toHaveAttribute('name', 'terms');
+  });
+
+  describe('indeterminate', () => {
+    it('sets the DOM indeterminate property when the prop is true', () => {
+      renderCheckbox({ indeterminate: true });
+      expect(screen.getByRole('checkbox').indeterminate).toBe(true);
+    });
+
+    it('does not set the DOM indeterminate property by default', () => {
+      renderCheckbox();
+      expect(screen.getByRole('checkbox').indeterminate).toBe(false);
+    });
+
+    it('clears the DOM indeterminate property when the prop turns false', () => {
+      const { rerender } = renderCheckbox({ indeterminate: true });
+      expect(screen.getByRole('checkbox').indeterminate).toBe(true);
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <Checkbox onChange={() => {}} ariaLabel="Checkbox" indeterminate={false} />
+        </ThemeProvider>
+      );
+
+      expect(screen.getByRole('checkbox').indeterminate).toBe(false);
+    });
+
+    it('re-applies the DOM property on re-render even though the browser clears it on click', async () => {
+      const onChange = jest.fn();
+      const { rerender } = renderCheckbox({ indeterminate: true, onChange });
+
+      const checkbox = screen.getByRole('checkbox');
+      await user.click(checkbox);
+      // Clicking a native checkbox always resets `indeterminate` to false in the browser,
+      // regardless of what the app does with the click. this is the behavior our effect
+      // (re-applied on every render, no dependency array) must correct for.
+      checkbox.indeterminate = false;
+
+      rerender(
+        <ThemeProvider theme={theme}>
+          <Checkbox onChange={onChange} ariaLabel="Checkbox" indeterminate={true} />
+        </ThemeProvider>
+      );
+
+      expect(checkbox.indeterminate).toBe(true);
+    });
+
+    it('still forwards the ref to the input element when indeterminate', () => {
+      const ref = createRef();
+      renderCheckbox({ indeterminate: true, ref });
+
+      expect(ref.current).toBe(screen.getByRole('checkbox'));
+      expect(ref.current.indeterminate).toBe(true);
+    });
+  });
+
+  describe('accessible name', () => {
+    it('is derived from ariaLabel when there is no visible label', () => {
+      renderCheckbox({ ariaLabel: 'Select all' });
+      expect(screen.getByRole('checkbox', { name: 'Select all' })).toBeInTheDocument();
+    });
+
+    it('is derived from an external element via ariaLabelledBy', () => {
+      renderWithTheme(
+        <>
+          <span id="ext-label">Select all</span>
+          <Checkbox onChange={() => {}} ariaLabelledBy="ext-label" />
+        </>
+      );
+      expect(screen.getByRole('checkbox', { name: 'Select all' })).toBeInTheDocument();
+    });
+  });
+});