feat: readonly checkbox

packages/react/__tests__/__snapshots__/PublicAPI-test.js.snap

@@ -475,6 +475,9 @@ Map {
       "onChange": Object {
         "type": "func",
       },
+      "readOnly": Object {
+        "type": "bool",
+      },
       "title": Object {
         "type": "string",
       },

packages/react/src/components/Checkbox/Checkbox.js

@@ -19,6 +19,7 @@ const Checkbox = React.forwardRef(function Checkbox(
     onChange,
     indeterminate,
     hideLabel,
+    readOnly,
     title = '',
     ...other
   },
@@ -28,7 +29,10 @@ const Checkbox = React.forwardRef(function Checkbox(
   const wrapperClasses = classNames(
     `${prefix}--form-item`,
     `${prefix}--checkbox-wrapper`,
-    [className]
+    className,
+    {
+      [`${prefix}--checkbox-wrapper--readonly`]: readOnly,
+    }
   );
   const innerLabelClasses = classNames(`${prefix}--checkbox-label-text`, {
     [`${prefix}--visually-hidden`]: hideLabel,
@@ -40,7 +44,9 @@ const Checkbox = React.forwardRef(function Checkbox(
         {...other}
         type="checkbox"
         onChange={(evt) => {
-          onChange(evt, { checked: evt.target.checked, id });
+          if (!readOnly) {
+            onChange(evt, { checked: evt.target.checked, id });
+          }
         }}
         className={`${prefix}--checkbox`}
         id={id}
@@ -54,6 +60,19 @@ const Checkbox = React.forwardRef(function Checkbox(
             ref.current = el;
           }
         }}
+        // readonly attribute not applicable to type="checkbox"
+        // see - https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox
+        aria-readonly={readOnly}
+        onClick={(evt) => {
+          if (readOnly) {
+            // prevent default stops the checkbox being updated
+            evt.preventDefault();
+          }
+          // pass onClick event on to the user even if readonly
+          if (other.onClick) {
+            other.onClick(evt);
+          }
+        }}
       />
       <label
         htmlFor={id}
@@ -114,6 +133,11 @@ Checkbox.propTypes = {
    */
   onChange: PropTypes.func,
 
+  /**
+   * Whether the checkbox should be read-only
+   */
+  readOnly: PropTypes.bool,
+
   /**
    * Specify a title for the <label> node for the Checkbox
    */

packages/react/src/components/Checkbox/__tests__/Checkbox-test.js

@@ -78,10 +78,23 @@ describe('Checkbox', () => {
     );
   });
 
-  describe('indeterminate', () => {
-    it('should set the indeterminate attribute of the <input> to true', () => {
-      render(<Checkbox id="test" indeterminate labelText="test-label" />);
-      expect(screen.getByRole('checkbox').indeterminate).toBe(true);
-    });
+  it('should NOT call the `onChange` prop when readonly', () => {
+    const onChange = jest.fn();
+    const onClick = jest.fn();
+    render(
+      <Checkbox
+        id="test"
+        labelText="test-label"
+        onChange={onChange}
+        onClick={onClick}
+        checked={false}
+        readOnly={true}
+      />
+    );
+
+    userEvent.click(screen.getByLabelText('test-label'));
+    userEvent.click(screen.getByRole('checkbox'));
+    expect(onClick).toHaveBeenCalled();
+    expect(onChange).not.toHaveBeenCalled();
   });
 });

packages/styles/scss/components/checkbox/_checkbox.scss

@@ -180,6 +180,31 @@
     background-color: $icon-disabled;
   }
 
+  //----------------------------------------------
+  // Read-only
+  // ---------------------------------------------
+  // should this be a token of it's own?
+  $border-readonly: $icon-disabled;
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox
+    + .#{$prefix}--checkbox-label::before {
+    border-color: $border-readonly;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::before {
+    border: 1px solid $border-readonly;
+    background: transparent;
+  }
+
+  .#{$prefix}--checkbox-wrapper--readonly
+    .#{$prefix}--checkbox:checked
+    + .#{$prefix}--checkbox-label::after {
+    border-color: $text-primary;
+  }
+
   //-----------------------------------------------
   // Skeleton
   //-----------------------------------------------