@openedx/paragon 22.0.0-alpha.22 → 22.0.0-alpha.24

package/src/ProductTour/Checkpoint.jsx

@@ -10,6 +10,7 @@ import CheckpointActionRow from './CheckpointActionRow';
 import CheckpointBody from './CheckpointBody';
 import CheckpointBreadcrumbs from './CheckpointBreadcrumbs';
 import CheckpointTitle from './CheckpointTitle';
+import messages from './messages';
 
 const Checkpoint = React.forwardRef(({
   body,
@@ -99,10 +100,8 @@ const Checkpoint = React.forwardRef(({
     >
       <span className="sr-only">
         <FormattedMessage
-          id="pgn.ProductTour.Checkpoint.position-text"
-          defaultMessage="Top of step {step}"
-          value={{ step: index + 1 }}
-          description="Screen-reader message to indicate the user's position in a sequence of checkpoints."
+          {...messages.topPositionText}
+          values={{ step: index + 1 }}
         />
       </span>
       {(title || !isOnlyCheckpoint) && (
@@ -118,8 +117,12 @@ const Checkpoint = React.forwardRef(({
         {...props}
       />
       <div id="pgn__checkpoint-arrow" data-popper-arrow />
-      {/* This text is not translated due to Paragon's lack of i18n support */}
-      <span className="sr-only">Bottom of step {index + 1}</span>
+      <span className="sr-only">
+        <FormattedMessage
+          {...messages.bottomPositionText}
+          values={{ step: index + 1 }}
+        />
+      </span>
     </div>
   );
 });

package/src/ProductTour/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  topPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.top-position-text',
+    defaultMessage: 'Top of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+  bottomPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.bottom-position-text',
+    defaultMessage: 'Bottom of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+});
+
+export default messages;

package/src/SearchField/SearchFieldAdvanced.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, {
   useRef, createContext, useState, useEffect,
 } from 'react';
@@ -138,27 +137,32 @@ SearchFieldAdvanced.propTypes = {
   onSubmit: PropTypes.func.isRequired,
   /** specifies a custom class name. */
   className: PropTypes.string,
-  /** specifies a callback function for when the user loses focus in the `SearchField` component. The default is an empty function. For example:
+  /** specifies a callback function for when the user loses focus in the `SearchField` component.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onBlur={event => console.log(event)} />
   ``` */
   onBlur: PropTypes.func,
-  /** specifies a callback function for when the value in `SearchField` is changed by the user. The default is an empty function. For example:
+  /** specifies a callback function for when the value in `SearchField` is changed by the user.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onChange={value => console.log(value)} />
   ``` */
   onChange: PropTypes.func,
-  /** specifies a callback function for when the value in `SearchField` is cleared by the user. The default is an empty function. For example:
+  /** specifies a callback function for when the value in `SearchField` is cleared by the user.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onClear={() => console.log('search cleared')} />
   ``` */
   onClear: PropTypes.func,
-  /** specifies a callback function for when the user focuses in the `SearchField` component. The default is an empty function. For example:
+  /** specifies a callback function for when the user focuses in the `SearchField` component.
+   * The default is an empty function. For example:
   ```jsx
   <SearchField onFocus={event => console.log(event)} />
   ``` */
   onFocus: PropTypes.func,
-  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations). The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
+  /** specifies the screenreader text for both the clear and submit buttons (e.g., for i18n translations).
+   * The default is `{ label: 'search', clearButton: 'clear search', searchButton: 'submit search' }`. */
   screenReaderText: PropTypes.shape({
     label: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
     submitButton: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
@@ -171,7 +175,8 @@ SearchFieldAdvanced.propTypes = {
     submit: PropTypes.element.isRequired,
     clear: PropTypes.element,
   }),
-  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component more than once on a page. */
+  /** specifies the aria-label attribute on the form element. This is useful if you use the `SearchField` component
+   * more than once on a page. */
   formAriaLabel: PropTypes.string,
   /** Specifies whether the `SearchField` is disabled. */
   disabled: PropTypes.bool,

package/src/SearchField/SearchFieldLabel.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
@@ -21,8 +20,9 @@ function SearchFieldLabel({ children, ...props }) {
 
 SearchFieldLabel.propTypes = {
   /**
-   * specifies the label to use for the input field (e.g., for i18n translations). Note: if `children` is not provided,
-   * a screenreader-only label will be used in its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
+   * specifies the label to use for the input field (e.g., for i18n translations).
+   * Note: if `children` is not provided, a screenreader-only label will be used in
+   * its placed based on the `screenReaderText.label` prop for `SearchField.Advanced`.
    */
   children: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
 };

package/src/SearchField/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 

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/SelectableBox/tests/SelectableBoxSet.test.jsx

@@ -1,6 +1,6 @@
 import React from 'react';
 import { render, screen } from '@testing-library/react';
-import '@testing-library/jest-dom/extend-expect';
+import '@testing-library/jest-dom';
 import userEvent from '@testing-library/user-event';
 import SelectableBox from '..';
 

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/src/Tabs/index.jsx

@@ -1,4 +1,10 @@
-import React, { useEffect, useMemo, useRef } from 'react';
+import React, {
+  useEffect,
+  useMemo,
+  useRef,
+  useState,
+  useCallback,
+} from 'react';
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseTabs from 'react-bootstrap/Tabs';
@@ -17,15 +23,15 @@ function Tabs({
   activeKey,
   ...props
 }) {
-  const containerElementRef = useRef(null);
+  const [containerElementRef, setContainerElementRef] = useState(null);
   const overflowElementRef = useRef(null);
   const indexOfLastVisibleChild = useIndexOfLastVisibleChild(
-    containerElementRef.current?.children[0],
+    containerElementRef?.firstChild,
     overflowElementRef.current?.parentNode,
   );
 
   useEffect(() => {
-    if (containerElementRef.current) {
+    if (containerElementRef) {
       const observer = new MutationObserver((mutations => {
         mutations.forEach(mutation => {
           // React-Bootstrap attribute 'data-rb-event-key' is responsible for the tab identification
@@ -34,8 +40,8 @@ function Tabs({
           const isActive = mutation.target.getAttribute('aria-selected') === 'true';
           // datakey attribute is added manually to the dropdown
           // elements so that they correspond to the native tabs' eventKey
-          const element = containerElementRef.current.querySelector(`[datakey='${eventKey}']`);
-          const moreTab = containerElementRef.current.querySelector('.pgn__tab_more');
+          const element = containerElementRef.querySelector(`[datakey='${eventKey}']`);
+          const moreTab = containerElementRef.querySelector('.pgn__tab_more');
           if (isActive) {
             element?.classList.add('active');
             // Here we add active class to the 'More Tab' if element exists in the dropdown
@@ -49,13 +55,13 @@ function Tabs({
           }
         });
       }));
-      observer.observe(containerElementRef.current, {
+      observer.observe(containerElementRef, {
         attributes: true, subtree: true, attributeFilter: ['aria-selected'],
       });
       return () => observer.disconnect();
     }
     return undefined;
-  }, []);
+  }, [containerElementRef]);
 
   useEffect(() => {
     if (overflowElementRef.current?.parentNode) {
@@ -63,10 +69,10 @@ function Tabs({
     }
   }, [overflowElementRef.current?.parentNode]);
 
-  const handleDropdownTabClick = (eventKey) => {
-    const hiddenTab = containerElementRef.current.querySelector(`[data-rb-event-key='${eventKey}']`);
+  const handleDropdownTabClick = useCallback((eventKey) => {
+    const hiddenTab = containerElementRef.querySelector(`[data-rb-event-key='${eventKey}']`);
     hiddenTab.click();
-  };
+  }, [containerElementRef]);
 
   const tabsChildren = useMemo(() => {
     const indexOfOverflowStart = indexOfLastVisibleChild + 1;
@@ -164,10 +170,10 @@ function Tabs({
     />
     ));
     return childrenList;
-  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText]);
+  }, [activeKey, children, defaultActiveKey, indexOfLastVisibleChild, moreTabText, handleDropdownTabClick]);
 
   return (
-    <div ref={containerElementRef}>
+    <div ref={setContainerElementRef}>
       <BaseTabs
         defaultActiveKey={defaultActiveKey}
         activeKey={activeKey}

package/src/hooks/tests/useIndexOfLastVisibleChild.test.jsx

@@ -12,12 +12,12 @@ window.ResizeObserver = window.ResizeObserver
   }));
 
 function TestComponent() {
-  const containerElementRef = React.useRef(null);
+  const [containerElementRef, setContainerElementRef] = React.useState(null);
   const overflowElementRef = React.useRef(null);
-  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef.current, overflowElementRef.current);
+  const indexOfLastVisibleChild = useIndexOfLastVisibleChild(containerElementRef, overflowElementRef.current);
 
   return (
-    <div ref={containerElementRef} style={{ display: 'flex' }}>
+    <div ref={setContainerElementRef} style={{ display: 'flex' }}>
       <div style={{ width: '250px' }} className="element">Element 1</div>
       <div style={{ width: '250px' }} className="element">Element 2</div>
       <div style={{ width: '250px' }} className="element">Element 3</div>