@openedx/paragon 22.0.0-alpha.21 → 22.0.0-alpha.23

package/src/Modal/_ModalDialog.scss

@@ -26,6 +26,18 @@
     max-height: none;
     margin: var(--pgn-spacing-modal-dialog-margin);
   }
+
+  .pgn__modal-header {
+    padding-bottom: calc(var(--pgn-spacing-modal-inner-padding-base) / 2);
+  }
+
+  .pgn__modal-body {
+    padding: calc(var(--pgn-spacing-modal-inner-padding-base) / 2) var(--pgn-spacing-modal-inner-padding-base);
+
+    &::before {
+      top: calc(var(--pgn-spacing-modal-inner-padding-base) / 2 * -1);
+    }
+  }
 }
 
 // Sizes
@@ -232,22 +244,6 @@
 
 // Color Variants
 
-.pgn__modal-default {
-  // Default style modals don't have a background on the header which
-  // ends up looking spaced too far away from the body content.
-  .pgn__modal-header {
-    padding-bottom: calc(var(--pgn-spacing-modal-inner-padding-base) / 2);
-  }
-
-  .pgn__modal-body {
-    padding: calc(var(--pgn-spacing-modal-inner-padding-base) / 2) var(--pgn-spacing-modal-inner-padding-base);
-
-    &::before {
-      top: calc(var(--pgn-spacing-modal-inner-padding-base) / 2 * -1);
-    }
-  }
-}
-
 .pgn__modal-dark {
   .pgn__modal-header,
   .pgn__modal-hero {
@@ -258,10 +254,6 @@
       color: inherit;
     }
   }
-
-  .pgn__modal-header {
-    border-bottom: solid 1px var(--pgn-color-light-base);
-  }
 }
 
 .pgn__modal-warning .pgn__modal-header {

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

@@ -223,3 +223,79 @@ devStatus: 'Done'
   </Tab>
 </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
+
+<br/>
+
+### (Deprecated) basic usage
+
+```jsx live
+<Tabs.Deprecated
+  labels={[
+    'Panel 1',
+    'Panel 2',
+    'Panel 3'
+  ]}
+>
+  <div>Hello I am the first panel</div>
+  <div>Hello I am the second panel</div>
+  <div>Hello I am the third panel</div>
+</Tabs.Deprecated>
+```

package/styles/scss/core/core.scss

@@ -6,7 +6,7 @@
 @import "~bootstrap/scss/reboot";
 @import "typography";
 @import "grid";
-@import "~react-loading-skeleton/dist/skeleton.css";
+@import "react-loading-skeleton/dist/skeleton.css";
 @import "~bootstrap/scss/transitions";
 @import "utilities";
 @import "~bootstrap/scss/media";