@openedx/paragon 21.9.1 → 21.10.0

package/dist/SelectableBox/index.js

@@ -1,4 +1,4 @@
-const _excluded = ["type", "value", "checked", "children", "isIndeterminate", "isInvalid", "onClick", "onFocus", "inputHidden", "className"];
+const _excluded = ["type", "value", "checked", "children", "isIndeterminate", "isInvalid", "onClick", "onFocus", "inputHidden", "className", "showActiveBoxState"];
 function _extends() { _extends = Object.assign ? Object.assign.bind() : function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 function ownKeys(object, enumerableOnly) { var keys = Object.keys(object); if (Object.getOwnPropertySymbols) { var symbols = Object.getOwnPropertySymbols(object); enumerableOnly && (symbols = symbols.filter(function (sym) { return Object.getOwnPropertyDescriptor(object, sym).enumerable; })), keys.push.apply(keys, symbols); } return keys; }
 function _objectSpread(target) { for (var i = 1; i < arguments.length; i++) { var source = null != arguments[i] ? arguments[i] : {}; i % 2 ? ownKeys(Object(source), !0).forEach(function (key) { _defineProperty(target, key, source[key]); }) : Object.getOwnPropertyDescriptors ? Object.defineProperties(target, Object.getOwnPropertyDescriptors(source)) : ownKeys(Object(source)).forEach(function (key) { Object.defineProperty(target, key, Object.getOwnPropertyDescriptor(source, key)); }); } return target; }
@@ -26,7 +26,8 @@ const SelectableBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
       onClick,
       onFocus,
       inputHidden,
-      className
+      className,
+      showActiveBoxState
     } = _ref,
     props = _objectWithoutProperties(_ref, _excluded);
   const inputType = getInputType('SelectableBox', type);
@@ -68,7 +69,7 @@ const SelectableBox = /*#__PURE__*/React.forwardRef((_ref, ref) => {
     onClick: () => inputRef.current.click(),
     onFocus: onFocus,
     className: classNames('pgn__selectable_box', className, {
-      'pgn__selectable_box-active': isChecked() || checked,
+      'pgn__selectable_box-active': !inputHidden && !showActiveBoxState ? false : isChecked() || checked,
       'pgn__selectable_box-invalid': isInvalid
     }),
     tabIndex: 0,
@@ -95,7 +96,9 @@ SelectableBox.propTypes = {
   /** Adds errors styles to the `SelectableBox`. */
   isInvalid: PropTypes.bool,
   /** A class that is appended to the base element. */
-  className: PropTypes.string
+  className: PropTypes.string,
+  /** Controls the visibility of the active state for the `SelectableBox`. */
+  showActiveBoxState: PropTypes.bool
 };
 SelectableBox.defaultProps = {
   value: undefined,
@@ -106,7 +109,8 @@ SelectableBox.defaultProps = {
   inputHidden: true,
   isIndeterminate: false,
   isInvalid: false,
-  className: undefined
+  className: undefined,
+  showActiveBoxState: true
 };
 SelectableBox.Set = SelectableBoxSet;
 export default SelectableBox;

package/dist/SelectableBox/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","names":["React","useRef","useEffect","PropTypes","classNames","SelectableBoxSet","useCheckboxSetContext","useRadioSetContext","getInputType","INPUT_TYPES","SelectableBox","forwardRef","_ref","ref","type","value","checked","children","isIndeterminate","isInvalid","onClick","onFocus","inputHidden","className","props","_objectWithoutProperties","_excluded","inputType","radioValue","checkboxValues","isChecked","includes","inputRef","input","createElement","_objectSpread","hidden","tabIndex","onChange","current","onclick","_extends","role","onKeyPress","click","propTypes","node","isRequired","oneOfType","string","number","bool","oneOf","func","defaultProps","undefined","Set"],"sources":["../../src/SelectableBox/index.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SelectableBoxSet from './SelectableBoxSet';\nimport { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';\nimport { useRadioSetContext } from '../Form/FormRadioSetContext';\nimport { getInputType } from './utils';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst SelectableBox = React.forwardRef(({\n  type,\n  value,\n  checked,\n  children,\n  isIndeterminate,\n  isInvalid,\n  onClick,\n  onFocus,\n  inputHidden,\n  className,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBox', type);\n  const { value: radioValue } = useRadioSetContext();\n  const { value: checkboxValues = [] } = useCheckboxSetContext();\n\n  const isChecked = () => {\n    switch (type) {\n      case 'radio':\n        return radioValue === value;\n      case 'checkbox':\n        return checkboxValues.includes(value);\n      default:\n        return radioValue === value;\n    }\n  };\n\n  const inputRef = useRef(null);\n  const input = React.createElement(inputType, {\n    value,\n    checked,\n    hidden: inputHidden,\n    ref: inputRef,\n    tabIndex: -1,\n    onChange: () => {},\n    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),\n  }, null);\n\n  useEffect(() => {\n    if (onClick && inputRef.current) {\n      inputRef.current.onclick = () => onClick(inputRef.current);\n    }\n  }, [onClick]);\n\n  return (\n    <div\n      role=\"button\"\n      onKeyPress={() => inputRef.current.click()}\n      onClick={() => inputRef.current.click()}\n      onFocus={onFocus}\n      className={classNames('pgn__selectable_box', className, {\n        'pgn__selectable_box-active': isChecked() || checked,\n        'pgn__selectable_box-invalid': isInvalid,\n      })}\n      tabIndex={0}\n      ref={ref}\n      {...props}\n    >\n      {input}\n      {children}\n    </div>\n  );\n});\n\nSelectableBox.propTypes = {\n  /** Content of the `SelectableBox`. */\n  children: PropTypes.node.isRequired,\n  /** A value that is passed to the input tag. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Controls whether `SelectableBox` is checked. */\n  checked: PropTypes.bool,\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /** Function that is called when the `SelectableBox` is clicked. */\n  onClick: PropTypes.func,\n  /** Function that is called when the `SelectableBox` is focused. */\n  onFocus: PropTypes.func,\n  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */\n  inputHidden: PropTypes.bool,\n  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */\n  isIndeterminate: PropTypes.bool,\n  /** Adds errors styles to the `SelectableBox`. */\n  isInvalid: PropTypes.bool,\n  /** A class that is appended to the base element. */\n  className: PropTypes.string,\n};\n\nSelectableBox.defaultProps = {\n  value: undefined,\n  checked: false,\n  type: 'radio',\n  onClick: () => {},\n  onFocus: () => {},\n  inputHidden: true,\n  isIndeterminate: false,\n  isInvalid: false,\n  className: undefined,\n};\n\nSelectableBox.Set = SelectableBoxSet;\nexport default SelectableBox;\n"],"mappings":"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"}
+{"version":3,"file":"index.js","names":["React","useRef","useEffect","PropTypes","classNames","SelectableBoxSet","useCheckboxSetContext","useRadioSetContext","getInputType","INPUT_TYPES","SelectableBox","forwardRef","_ref","ref","type","value","checked","children","isIndeterminate","isInvalid","onClick","onFocus","inputHidden","className","showActiveBoxState","props","_objectWithoutProperties","_excluded","inputType","radioValue","checkboxValues","isChecked","includes","inputRef","input","createElement","_objectSpread","hidden","tabIndex","onChange","current","onclick","_extends","role","onKeyPress","click","propTypes","node","isRequired","oneOfType","string","number","bool","oneOf","func","defaultProps","undefined","Set"],"sources":["../../src/SelectableBox/index.jsx"],"sourcesContent":["import React, { useRef, useEffect } from 'react';\nimport PropTypes from 'prop-types';\nimport classNames from 'classnames';\nimport SelectableBoxSet from './SelectableBoxSet';\nimport { useCheckboxSetContext } from '../Form/FormCheckboxSetContext';\nimport { useRadioSetContext } from '../Form/FormRadioSetContext';\nimport { getInputType } from './utils';\n\nconst INPUT_TYPES = [\n  'radio',\n  'checkbox',\n];\n\nconst SelectableBox = React.forwardRef(({\n  type,\n  value,\n  checked,\n  children,\n  isIndeterminate,\n  isInvalid,\n  onClick,\n  onFocus,\n  inputHidden,\n  className,\n  showActiveBoxState,\n  ...props\n}, ref) => {\n  const inputType = getInputType('SelectableBox', type);\n  const { value: radioValue } = useRadioSetContext();\n  const { value: checkboxValues = [] } = useCheckboxSetContext();\n\n  const isChecked = () => {\n    switch (type) {\n      case 'radio':\n        return radioValue === value;\n      case 'checkbox':\n        return checkboxValues.includes(value);\n      default:\n        return radioValue === value;\n    }\n  };\n\n  const inputRef = useRef(null);\n  const input = React.createElement(inputType, {\n    value,\n    checked,\n    hidden: inputHidden,\n    ref: inputRef,\n    tabIndex: -1,\n    onChange: () => {},\n    ...(type === 'checkbox' ? { ...props, isIndeterminate } : { ...props }),\n  }, null);\n\n  useEffect(() => {\n    if (onClick && inputRef.current) {\n      inputRef.current.onclick = () => onClick(inputRef.current);\n    }\n  }, [onClick]);\n\n  return (\n    <div\n      role=\"button\"\n      onKeyPress={() => inputRef.current.click()}\n      onClick={() => inputRef.current.click()}\n      onFocus={onFocus}\n      className={classNames('pgn__selectable_box', className, {\n        'pgn__selectable_box-active': (!inputHidden && !showActiveBoxState) ? false : isChecked() || checked,\n        'pgn__selectable_box-invalid': isInvalid,\n      })}\n      tabIndex={0}\n      ref={ref}\n      {...props}\n    >\n      {input}\n      {children}\n    </div>\n  );\n});\n\nSelectableBox.propTypes = {\n  /** Content of the `SelectableBox`. */\n  children: PropTypes.node.isRequired,\n  /** A value that is passed to the input tag. */\n  value: PropTypes.oneOfType([PropTypes.string, PropTypes.number]),\n  /** Controls whether `SelectableBox` is checked. */\n  checked: PropTypes.bool,\n  /** Indicates the input type: checkbox or radio. */\n  type: PropTypes.oneOf(INPUT_TYPES),\n  /** Function that is called when the `SelectableBox` is clicked. */\n  onClick: PropTypes.func,\n  /** Function that is called when the `SelectableBox` is focused. */\n  onFocus: PropTypes.func,\n  /** Controls display of the input (checkbox or radio button) on the `SelectableBox`. */\n  inputHidden: PropTypes.bool,\n  /** Indicates a state for the 'checkbox' `type` when `SelectableBox` is neither checked nor unchecked. */\n  isIndeterminate: PropTypes.bool,\n  /** Adds errors styles to the `SelectableBox`. */\n  isInvalid: PropTypes.bool,\n  /** A class that is appended to the base element. */\n  className: PropTypes.string,\n  /** Controls the visibility of the active state for the `SelectableBox`. */\n  showActiveBoxState: PropTypes.bool,\n};\n\nSelectableBox.defaultProps = {\n  value: undefined,\n  checked: false,\n  type: 'radio',\n  onClick: () => {},\n  onFocus: () => {},\n  inputHidden: true,\n  isIndeterminate: false,\n  isInvalid: false,\n  className: undefined,\n  showActiveBoxState: true,\n};\n\nSelectableBox.Set = SelectableBoxSet;\nexport default SelectableBox;\n"],"mappings":"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"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@openedx/paragon",
-  "version": "21.9.1",
+  "version": "21.10.0",
   "description": "Accessible, responsive UI component library based on Bootstrap.",
   "main": "dist/index.js",
   "module": "dist/index.js",

package/src/Button/README.md

@@ -200,30 +200,11 @@ For link to be `disabled`, it must have href defined with some value.
 )}
 ```
 
-### With a Spinner
-
-```jsx live
-<>
-  <Button variant="primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="outline-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-primary" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-  <Button variant="inverse-brand" className="mb-2 mr-2 mb-sm-0" aria-label="Loading some stuff">
-    <Spinner animation="border" />
-  </Button>
-</>
-```
+## Stateful buttons
+To implement loading state using a `Button` component, the [StatefulButton](https://paragon-openedx.netlify.app/components/statefulbutton/) component
+is available for use. <br/>
+This specialized component is designed to seamlessly manage and display boot states, providing a more efficient and 
+user-friendly experience.
 
 ***
 

package/src/DataTable/README.md

@@ -436,7 +436,7 @@ See ``dataViewToggleOptions`` props documentation for all supported props.
       }}
       isSortable
       defaultColumnValues={{ Filter: TextFilter }}
-      itemCount={7}
+      itemCount={3}
       data={[
         {
           name: 'Lil Bub',

package/src/SelectableBox/README.md

@@ -6,9 +6,9 @@ components:
 - SelectableBoxSet
 categories:
 - Forms
-status: 'New'
+status: 'Stable'
 designStatus: 'Done'
-devStatus: 'In progress'
+devStatus: 'Done'
 notes: |
 ---
 
@@ -26,7 +26,7 @@ As ``Checkbox``
   const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
   const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     e.target.checked ? add(e.target.value) : remove(e.target.value);
   };
   
@@ -34,35 +34,32 @@ As ``Checkbox``
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   
   return (
-    <div className="bg-light-200 p-3">
-      <SelectableBox.Set
-        value={checkedCheeses}
+    <SelectableBox.Set
+      className="bg-light-200 p-3"
+      value={checkedCheeses}
+      type={type}
+      onChange={handleChange}
+      name="cheeses"
+      columns={isExtraSmall ? 1 : 2}
+      ariaLabel="cheese selection"
+    >
+      <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
+        <h3>It is my first SelectableBox</h3>
+        <p>Swiss</p>
+      </SelectableBox>
+      <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
+        <h3>Cheddar</h3>
+      </SelectableBox>
+      <SelectableBox
+        value="pepperjack"
+        inputHidden={false}
         type={type}
-        onChange={handleChange}
-        name="cheeses"
-        columns={isExtraSmall ? 1 : 2}
-        ariaLabel="cheese selection"
+        isInvalid={isInvalid()}
+        aria-label="pepperjack checkbox"
       >
-        <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
-          <div>
-            <h3>It is my first SelectableBox</h3>
-            <p>Swiss</p>
-          </div>
-        </SelectableBox>
-        <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
-          Cheddar
-        </SelectableBox>
-        <SelectableBox
-          value="pepperjack"
-          inputHidden={false}
-          type={type}
-          isInvalid={isInvalid()}
-          aria-label="pepperjack checkbox"
-        >
-          <h3>Pepperjack</h3>
-        </SelectableBox>
-      </SelectableBox.Set>
-    </div>
+        <h3>Pepperjack</h3>
+      </SelectableBox>
+    </SelectableBox.Set>
   );
 }
 ```
@@ -71,31 +68,27 @@ As ``Checkbox``
 
 ```jsx live
 () => {
-  const type = 'radio';
   const [value, setValue] = useState('green');
-  const handleChange = e => setValue(e.target.value);
+  const handleChange = (e) => setValue(e.target.value);
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
 
   return (
     <SelectableBox.Set
-      type={type}
       value={value}
       onChange={handleChange}
       name="colors"
       columns={isExtraSmall ? 1 : 3}
       ariaLabel="color selection"
     >
-      <SelectableBox value="red" type={type} aria-label="red checkbox">
-        <div>
-          <h3>It is Red color</h3>
-          <p>Select me</p>
-        </div>
+      <SelectableBox value="red" aria-label="red checkbox">
+        <h3>It is Red color</h3>
+        <p>Select me</p>
       </SelectableBox>
-      <SelectableBox value="green" inputHidden={false} type={type} aria-label="green-checkbox">
+      <SelectableBox value="green" inputHidden={false} aria-label="green radio-button">
         <h3>Green</h3>
         <p>Leaves and grass</p>
       </SelectableBox>
-      <SelectableBox value="blue" inputHidden={false} type={type} aria-label="blue checkbox">
+      <SelectableBox value="blue" inputHidden={false} aria-label="blue radio-button">
         <h3>Blue</h3>
         <p>The sky</p>
       </SelectableBox>
@@ -103,6 +96,7 @@ As ``Checkbox``
   );
 }
 ```
+
 ## As Checkbox
 As ``Checkbox`` with ``isIndeterminate``
 
@@ -117,7 +111,7 @@ As ``Checkbox`` with ``isIndeterminate``
   const isIndeterminate = someChecked && !allChecked;
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.small.maxWidth });
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     e.target.checked ? add(e.target.value) : remove(e.target.value);
   };
 
@@ -127,18 +121,17 @@ As ``Checkbox`` with ``isIndeterminate``
 
   return (
     <>
-      <div className="mb-3">
-        <SelectableBox
-          checked={allChecked}
-          isIndeterminate={isIndeterminate}
-          onClick={handleCheckAllChange}
-          inputHidden={false}
-          type={type}
-          aria-label="all options checkbox"
-        >
-          All the cheese
-        </SelectableBox>
-      </div>
+      <SelectableBox
+        className="mb-3"
+        checked={allChecked}
+        isIndeterminate={isIndeterminate}
+        onClick={handleCheckAllChange}
+        inputHidden={false}
+        type={type}
+        aria-label="all options checkbox"
+      >
+        All the cheese
+      </SelectableBox>
       <SelectableBox.Set
         value={checkedCheeses}
         type={type}
@@ -148,13 +141,11 @@ As ``Checkbox`` with ``isIndeterminate``
         ariaLabel="cheese selection"
       >
         <SelectableBox value="swiss" type={type} aria-label="swiss checkbox">
-          <div>
-            <h3>It is my first SelectableBox</h3>
-            <p>Swiss</p>
-          </div>
+          <h3>It is my first SelectableBox</h3>
+          <p>Swiss</p>
         </SelectableBox>
         <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
-          Cheddar
+          <h3>Cheddar</h3>
         </SelectableBox>
         <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
           <h3>Pepperjack</h3>
@@ -173,16 +164,16 @@ As ``Checkbox`` with ``ariaLabelledby``
   const allCheeseOptions = ['swiss', 'cheddar', 'pepperjack'];
   const [checkedCheeses, { add, remove, set, clear }] = useCheckboxSetValues(['swiss']);
 
-  const handleChange = e => {
+  const handleChange = (e) => {
     e.target.checked ? add(e.target.value) : remove(e.target.value);
   };
   
   const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
   
   return (
-    <div className="bg-light-200 p-3">
+    <Stack className="bg-light-200 p-3">
       <h3 id="cheese selection" className="mb-4">
-        Select your favorite cheese
+        Select your favorite cheese:
       </h3>
       <SelectableBox.Set
         value={checkedCheeses}
@@ -193,22 +184,63 @@ As ``Checkbox`` with ``ariaLabelledby``
         ariaLabelledby="cheese selection"
       >
         <SelectableBox value="swiss" inputHidden={false} type={type} aria-label="swiss checkbox">
-          <h3>
-            Swiss
-          </h3>
+          <h3>Swiss</h3>
         </SelectableBox>
         <SelectableBox value="cheddar" inputHidden={false} type={type} aria-label="cheddar checkbox">
-          <h3>
-            Cheddar
-          </h3>
+          <h3>Cheddar</h3>
         </SelectableBox>
         <SelectableBox value="pepperjack" inputHidden={false} type={type} aria-label="pepperjack checkbox">
-          <h3>
-            Pepperjack
-          </h3>
+          <h3>Pepperjack</h3>
         </SelectableBox>
       </SelectableBox.Set>
-    </div>
+    </Stack>
+  );
+}
+```
+
+## Without active outline
+The `showActiveBoxState` property only affects `SelectableBox` that have `inputHidden` set to `false`.
+If a component has no input, the border is always rendered in an active state.
+
+```jsx live
+() => {
+  const [value, setValue] = useState('apples');
+  const handleChange = (e) => setValue(e.target.value);
+  const isExtraSmall = useMediaQuery({ maxWidth: breakpoints.extraSmall.maxWidth });
+
+  return (
+    <SelectableBox.Set
+      value={value}
+      onChange={handleChange}
+      name="fruits"
+      columns={isExtraSmall ? 1 : 3}
+      ariaLabel="fruits selection"
+    >
+      <SelectableBox
+        value="apples"
+        inputHidden={false}
+        showActiveBoxState={false}
+        aria-label="apple radio-button"
+      >
+        <h3>Apples</h3>
+      </SelectableBox>
+      <SelectableBox
+        value="oranges"
+        inputHidden={false}
+        showActiveBoxState={false}
+        aria-label="orange radio-button"
+      >
+        <h3>Oranges</h3>
+      </SelectableBox>
+      <SelectableBox
+        value="bananas"
+        inputHidden={false}
+        showActiveBoxState={false}
+        aria-label="banana radio-button"
+      >
+        <h3>Bananas</h3>
+      </SelectableBox>
+    </SelectableBox.Set>
   );
 }
 ```

package/src/SelectableBox/index.jsx

@@ -22,6 +22,7 @@ const SelectableBox = React.forwardRef(({
   onFocus,
   inputHidden,
   className,
+  showActiveBoxState,
   ...props
 }, ref) => {
   const inputType = getInputType('SelectableBox', type);
@@ -63,7 +64,7 @@ const SelectableBox = React.forwardRef(({
       onClick={() => inputRef.current.click()}
       onFocus={onFocus}
       className={classNames('pgn__selectable_box', className, {
-        'pgn__selectable_box-active': isChecked() || checked,
+        'pgn__selectable_box-active': (!inputHidden && !showActiveBoxState) ? false : isChecked() || checked,
         'pgn__selectable_box-invalid': isInvalid,
       })}
       tabIndex={0}
@@ -97,6 +98,8 @@ SelectableBox.propTypes = {
   isInvalid: PropTypes.bool,
   /** A class that is appended to the base element. */
   className: PropTypes.string,
+  /** Controls the visibility of the active state for the `SelectableBox`. */
+  showActiveBoxState: PropTypes.bool,
 };
 
 SelectableBox.defaultProps = {
@@ -109,6 +112,7 @@ SelectableBox.defaultProps = {
   isIndeterminate: false,
   isInvalid: false,
   className: undefined,
+  showActiveBoxState: true,
 };
 
 SelectableBox.Set = SelectableBoxSet;

package/src/SelectableBox/tests/SelectableBox.test.jsx

@@ -100,6 +100,13 @@ describe('<SelectableBox />', () => {
       rerender(<SelectableCheckbox inputHidden={false} />);
       expect(inputElement.getAttribute('hidden')).toBeNull();
     });
+    it('renders with active state and updates to inactive when showActiveBoxState is false', async () => {
+      const { rerender } = render(<SelectableCheckbox inputHidden={false} checked />);
+      const selectableBox = screen.getByRole('button');
+      expect(selectableBox.classList.contains('pgn__selectable_box-active')).toEqual(true);
+      rerender(<SelectableCheckbox inputHidden={false} showActiveBoxState={false} checked />);
+      expect(selectableBox.classList.contains('pgn__selectable_box-active')).toEqual(false);
+    });
   });
   describe('correct interactions', () => {
     it('correct checkbox state change when checked is changed', () => {

package/src/Tabs/README.md

@@ -226,6 +226,60 @@ notes: |
 </Tabs>
 ```
 
+## Conditional rendering
+
+```jsx live
+() => {
+  const librariesEnabled = true;
+  const visibleTabs = useMemo(() => {
+    const tabs = [];
+        
+    tabs.push(
+      <Tab
+        key="courses"
+        eventKey="courses"
+        title="Courses"
+      >
+        Hello I am the courses panel.
+      </Tab>
+    );
+
+    tabs.push(
+      <Tab
+        key="programs"
+        eventKey="programs"
+        title="Programs"
+      >
+        Hello I am the programs panel.
+      </Tab>
+    );
+    
+    if (librariesEnabled) {
+      tabs.push(
+        <Tab
+          key="libraries"
+          eventKey="libraries"
+          title="Libraries"
+        >
+          Hello I am the libraries panel.
+        </Tab>
+      );   
+    }
+
+    return tabs;
+  }, [librariesEnabled]);
+
+  return (
+    <Tabs
+      id="tabs"
+      defaultActiveKey="courses"
+    >
+      {visibleTabs}
+    </Tabs>
+  );
+}
+```
+
 ***
 
 ## Tabs.Deprecated