@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/src/RadioButtonGroup/RadioButtonGroup.test.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import RadioButtonGroup, { RadioButton } from '.';
+
+describe('<RadioButton />', () => {
+  const text = 'text';
+  const index = 0;
+  const isChecked = false;
+  const name = 'name';
+  const onBlur = jest.fn();
+  const onClick = jest.fn();
+  const onFocus = jest.fn();
+  const onKeyDown = jest.fn();
+  const value = 'value';
+  const props = {
+    index,
+    isChecked,
+    name,
+    onBlur,
+    onClick,
+    onFocus,
+    onKeyDown,
+    value,
+  };
+  describe('correct rendering', () => {
+    it('renders RadioButton', () => {
+      render(
+        <RadioButton {...props}>
+          {text}
+        </RadioButton>,
+      );
+
+      const radioButton = screen.getByRole('radio');
+      expect(radioButton).toBeInTheDocument();
+      expect(radioButton).toHaveAttribute('name', name);
+      expect(radioButton).toHaveAttribute('value', value);
+      expect(radioButton).toHaveAttribute('aria-checked', isChecked.toString());
+      expect(radioButton).toHaveAttribute('data-index', index.toString());
+    });
+  });
+
+  describe('event handlers correctly triggered', () => {
+    let spy;
+
+    beforeEach(() => {
+      spy = jest.fn();
+    });
+
+    afterEach(() => {
+      spy.mockClear();
+    });
+
+    it('should fire onBlur', async () => {
+      render((<RadioButton {...props} onBlur={spy} />));
+      const radioButton = screen.getByRole('radio');
+      radioButton.focus();
+      await userEvent.tab();
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should fire onClick', async () => {
+      render((<RadioButton {...props} onClick={spy} />));
+      const radioButton = screen.getByRole('radio');
+      await userEvent.click(radioButton);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should fire onFocus', async () => {
+      render((<RadioButton {...props} onFocus={spy} />));
+      const radioButton = screen.getByRole('radio');
+      radioButton.focus();
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should fire onKeyDown', async () => {
+      render((<RadioButton {...props} onKeyDown={spy} />));
+      const radioButton = screen.getByRole('radio');
+      radioButton.focus();
+      await userEvent.keyboard('{enter}');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
+describe('<RadioButtonGroup />', () => {
+  const firstText = 'firstText';
+  const secondText = 'secondText';
+  const name = 'name';
+  const label = 'label';
+  const onBlur = jest.fn();
+  const onChange = jest.fn();
+  const onClick = jest.fn();
+  const onFocus = jest.fn();
+  const onKeyDown = jest.fn();
+  const firstValue = 'firstValue';
+  const secondValue = 'secondValue';
+  const props = {
+    name,
+    label,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+  };
+
+  it('renders RadioButtonGroup', () => {
+    render(
+      <RadioButtonGroup {...props}>
+        <RadioButton value={firstValue}>{firstText}</RadioButton>
+        <RadioButton value={secondValue}>{secondText}</RadioButton>
+      </RadioButtonGroup>,
+    );
+
+    const radioButtons = screen.getAllByRole('radio');
+    expect(radioButtons.length).toBe(2);
+
+    radioButtons.forEach((radioButton, index) => {
+      expect(radioButton).toHaveAttribute('name', name);
+      expect(radioButton).toHaveAttribute('value', index === 0 ? firstValue : secondValue);
+    });
+
+    const radioButtonGroupDiv = screen.getByRole('radiogroup');
+    expect(radioButtonGroupDiv).toBeInTheDocument();
+    expect(radioButtonGroupDiv).toHaveAttribute('aria-label', label);
+    expect(radioButtonGroupDiv).toHaveAttribute('tabIndex', '-1');
+  });
+});

package/src/RadioButtonGroup/index.jsx

@@ -0,0 +1,185 @@
+/* eslint-disable react/no-multi-comp, max-classes-per-file, max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+class RadioButton extends React.PureComponent {
+  constructor(props) {
+    super(props);
+
+    const {
+      onBlur,
+      onClick,
+      onFocus,
+      onKeyDown,
+    } = props;
+
+    this.onBlur = onBlur.bind(this);
+    this.onClick = onClick.bind(this);
+    this.onFocus = onFocus.bind(this);
+    this.onKeyDown = onKeyDown.bind(this);
+  }
+
+  render() {
+    const {
+      children,
+      index,
+      isChecked,
+      name,
+      value,
+      ...other
+    } = this.props;
+
+    return (
+      <div>
+        <input
+          type="radio"
+          name={name}
+          aria-checked={isChecked}
+          defaultChecked={isChecked}
+          value={value}
+          aria-label={children}
+          data-index={index}
+          onBlur={this.onBlur}
+          onClick={this.onClick}
+          onFocus={this.onFocus}
+          onKeyDown={this.onKeyDown}
+          {...other}
+        />{children}
+      </div>
+    );
+  }
+}
+
+class RadioButtonGroup extends React.Component {
+  constructor(props) {
+    super();
+    // Bind the method to the component context
+    this.renderChildren = this.renderChildren.bind(this);
+    this.onChange = this.onChange.bind(this);
+
+    this.state = {
+      selectedIndex: props.selectedIndex,
+    };
+  }
+
+  onChange(event) {
+    if (event.target.checked && event.target.hasAttribute('data-index')) {
+      this.setState({
+        selectedIndex: parseInt(event.target.getAttribute('data-index'), 10),
+      });
+    }
+
+    this.props.onChange(event);
+  }
+
+  renderChildren() {
+    const {
+      children,
+      name,
+      onBlur,
+      onClick,
+      onFocus,
+      onKeyDown,
+    } = this.props;
+
+    return React.Children.map((children), (child, index) => React.cloneElement(child, {
+      name,
+      value: child.props.value,
+      isChecked: index === this.state.selectedIndex,
+      onBlur,
+      onClick,
+      onFocus,
+      onKeyDown,
+      index,
+    }));
+  }
+
+  render() {
+    const {
+      children,
+      label,
+      name,
+      onBlur,
+      onChange,
+      onClick,
+      onFocus,
+      onKeyDown,
+      selectedIndex,
+      ...other
+    } = this.props;
+
+    return (
+      <div
+        role="radiogroup"
+        aria-label={label}
+        onChange={this.onChange}
+        tabIndex={-1}
+        {...other}
+      >
+        {this.renderChildren()}
+      </div>
+    );
+  }
+}
+
+RadioButton.defaultProps = {
+  children: undefined,
+  index: undefined,
+  isChecked: false,
+  name: undefined,
+  onBlur: () => {},
+  onClick: () => {},
+  onFocus: () => {},
+  onKeyDown: () => {},
+};
+
+RadioButton.propTypes = {
+  children: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+  ]),
+  index: PropTypes.number,
+  isChecked: PropTypes.bool,
+  name: PropTypes.string,
+  onBlur: PropTypes.func,
+  onClick: PropTypes.func,
+  onFocus: PropTypes.func,
+  onKeyDown: PropTypes.func,
+  value: PropTypes.oneOfType([
+    PropTypes.string,
+    PropTypes.number,
+    PropTypes.bool,
+  ]).isRequired,
+};
+
+RadioButtonGroup.defaultProps = {
+  onBlur: () => {},
+  onChange: () => {},
+  onClick: () => {},
+  onFocus: () => {},
+  onKeyDown: () => {},
+  selectedIndex: undefined,
+};
+
+RadioButtonGroup.propTypes = {
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+  /** specifies the `aria-label` value for the `RadioButtonGroup` */
+  label: PropTypes.string.isRequired,
+  /** specifies the `name` value for the `RadioButtonGroup` so that no more than one `RadioButton` can be selected at any given time */
+  name: PropTypes.string.isRequired,
+  /** specifies the callback for the `onBlur` event for each `RadioButton` within the group. The default value is a no-op function. */
+  onBlur: PropTypes.func,
+  /** specifies the callback for the onChange event for each RadioButton within the group. The default value is a no-op function. */
+  onChange: PropTypes.func,
+  /** specifies the callback for the `onClick` event for each `RadioButton` within the group. The default value is a no-op function. */
+  onClick: PropTypes.func,
+  /** specifies the callback for the `onFocus` event for each `RadioButton` within the group. The default value is a no-op function. */
+  onFocus: PropTypes.func,
+  /** specifies the callback for the `onKeyDown` event for each `RadioButton` within the group. The default value is a no-op function. */
+  onKeyDown: PropTypes.func,
+  /** specifies which `RadioButton` is initially selected. The default value is `undefined` which signifies that no `RadioButton` is initially selected. */
+  selectedIndex: PropTypes.number,
+};
+
+export { RadioButtonGroup as default, RadioButton };

package/src/Scrollable/index.scss

@@ -9,7 +9,7 @@
   &::before {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow);
+    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
     display: block;
     height: 2px;
     position: sticky;
@@ -21,7 +21,7 @@
   &::after {
     content: "";
     background-color: transparent;
-    box-shadow: 5px 0 7px 2px var(--pgn-elevation-scrollable-body-box-shadow);
+    box-shadow: 5px 0 7px 2px rgba(0, 0, 0, .55);
     display: block;
     height: 2px;
     position: sticky;

package/src/SearchField/SearchField.test.jsx

@@ -176,7 +176,7 @@ describe('<SearchField /> with basic usage', () => {
       const inputElement = screen.getByRole('searchbox');
       await userEvent.type(inputElement, 'foobar');
       const buttonClear = screen.getByRole('button', { type: 'reset', variant: buttonProps.variant });
-      expect(buttonClear).toHaveAttribute('variant', 'inline');
+      expect(buttonClear).toHaveClass(`btn-icon-${buttonProps.variant}`);
     });
 
     it('should pass props to the label', () => {

package/src/SearchField/SearchFieldAdvanced.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, {
   useRef, createContext, useState, useEffect,
 } from 'react';
@@ -7,8 +6,6 @@ import classNames from 'classnames';
 import { Search, Close } from '../../icons';
 import newId from '../utils/newId';
 
-import Icon from '../Icon';
-
 export const SearchFieldContext = createContext();
 
 const BUTTON_LOCATION_VARIANTS = [
@@ -138,27 +135,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 +173,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,
@@ -189,8 +192,8 @@ SearchFieldAdvanced.defaultProps = {
     clearButton: 'clear search',
   },
   icons: {
-    clear: <Icon src={Close} />,
-    submit: <Icon src={Search} />,
+    clear: Close,
+    submit: Search,
   },
   onBlur: () => {},
   onChange: () => {},

package/src/SearchField/SearchFieldClearButton.jsx

@@ -1,6 +1,8 @@
 import React, { useContext } from 'react';
 
 import { SearchFieldContext } from './SearchFieldAdvanced';
+import Icon from '../Icon';
+import IconButton from '../IconButton';
 
 function SearchFieldClearButton(props) {
   const {
@@ -18,11 +20,17 @@ function SearchFieldClearButton(props) {
   };
 
   return (
-    // eslint-disable-next-line react/button-has-type
-    <button type="reset" className="btn" disabled={disabled} onClick={handleClick} {...props}>
-      {icons.clear}
-      <span className="sr-only">{screenReaderText.clearButton}</span>
-    </button>
+    <IconButton
+      className="pgn__searchfield__iconbutton-reset"
+      type="reset"
+      src={icons.clear}
+      size="sm"
+      iconAs={Icon}
+      alt={screenReaderText.clearButton}
+      disabled={disabled}
+      onClick={handleClick}
+      {...props}
+    />
   );
 }
 

package/src/SearchField/SearchFieldInput.jsx

@@ -1,7 +1,7 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
 
-import { FormControl } from '../Form';
+import Input from '../Input';
 import { SearchFieldContext } from './SearchFieldAdvanced';
 
 function SearchFieldInput(props) {
@@ -10,7 +10,7 @@ function SearchFieldInput(props) {
   } = useContext(SearchFieldContext);
 
   return (
-    <FormControl
+    <Input
       {...props}
       ref={refs.input}
       type="text"

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/SearchFieldSubmitButton.jsx

@@ -1,9 +1,10 @@
 import React, { useContext } from 'react';
 import PropTypes from 'prop-types';
-import classNames from 'classnames';
 
 import { SearchFieldContext } from './SearchFieldAdvanced';
 import Button from '../Button';
+import IconButton from '../IconButton';
+import Icon from '../Icon';
 
 const STYLE_VARIANTS = [
   'light',
@@ -40,16 +41,17 @@ function SearchFieldSubmitButton(props) {
       <span className="sr-only">{screenReaderText.submitButton}</span>
     </Button>
   ) : (
-    <button
+    <IconButton
+      className="pgn__searchfield__iconbutton-submit"
       type="submit"
-      className={classNames('btn')}
-      ref={refs.submitButton}
+      src={icons.submit}
+      size="sm"
+      iconAs={Icon}
+      alt={screenReaderText.submitButton}
       disabled={disabled}
+      ref={refs.submitButton}
       {...others}
-    >
-      {icons.submit}
-      <span className="sr-only">{screenReaderText.submitButton}</span>
-    </button>
+    />
   );
 }
 

package/src/SearchField/__snapshots__/SearchField.test.jsx.snap

@@ -19,45 +19,41 @@ exports[`<SearchField /> with basic usage should match the snapshot 1`] = `
           search
         </span>
       </label>
-      <div
-        class="pgn__form-control-decorator-group"
-      >
-        <input
-          class="form-control"
-          id="pgn-searchfield-input-1"
-          name="searchfield-input"
-          role="searchbox"
-          type="text"
-          value=""
-        />
-      </div>
+      <input
+        class="form-control"
+        id="pgn-searchfield-input-1"
+        name="searchfield-input"
+        role="searchbox"
+        type="text"
+        value=""
+      />
       <button
-        class="btn"
+        aria-label="submit search"
+        class="btn-icon btn-icon-primary btn-icon-sm pgn__searchfield__iconbutton-submit"
         type="submit"
       >
         <span
-          class="pgn__icon"
+          class="btn-icon__icon-container"
         >
-          <svg
-            aria-hidden="true"
-            fill="none"
-            focusable="false"
-            height="24"
-            role="img"
-            viewBox="0 0 24 24"
-            width="24"
-            xmlns="http://www.w3.org/2000/svg"
+          <span
+            class="pgn__icon btn-icon__icon"
           >
-            <path
-              d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
-              fill="currentColor"
-            />
-          </svg>
-        </span>
-        <span
-          class="sr-only"
-        >
-          submit search
+            <svg
+              aria-hidden="true"
+              fill="none"
+              focusable="false"
+              height="24"
+              role="img"
+              viewBox="0 0 24 24"
+              width="24"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M15.5 14h-.79l-.28-.27A6.471 6.471 0 0 0 16 9.5 6.5 6.5 0 1 0 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5Zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
         </span>
       </button>
     </form>

package/src/SearchField/_variables.scss

@@ -0,0 +1,14 @@
+$search-btn-variants: (
+  "light":  $primary-500,
+  "dark":   $brand-500,
+);
+$search-border-radius:                0 !default;
+$search-border-color:                 $gray-500 !default;
+$search-form-background-color:        $white !default;
+$search-border-color-interaction:     $black !default;
+$search-border-width:                 .0625rem !default;
+$search-disabled-opacity:             .3 !default;
+$search-button-margin:                .5rem !default;
+$input-height-search:                 calc(#{$input-line-height * 1em} + #{$input-padding-y * 2}) !default;
+$search-border-focus-color:           $black !default;
+$search-border-focus-width:           .3125rem !default;

package/src/SearchField/index.jsx

@@ -1,4 +1,3 @@
-/* eslint-disable max-len */
 import React, { useCallback } from 'react';
 import PropTypes from 'prop-types';
 
@@ -9,8 +8,6 @@ import SearchFieldInput from './SearchFieldInput';
 import SearchFieldClearButton from './SearchFieldClearButton';
 import SearchFieldSubmitButton from './SearchFieldSubmitButton';
 
-import Icon from '../Icon';
-
 export const SEARCH_FIELD_SCREEN_READER_TEXT_LABEL = 'search';
 export const SEARCH_FIELD_SCREEN_READER_TEXT_SUBMIT_BUTTON = 'submit search';
 export const SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON = 'clear search';
@@ -129,8 +126,8 @@ SearchField.propTypes = {
    *
    * ```jsx
    * {
-   *   submit: import {Search} from '@edx/paragon/icons';,
-   *   clear: import {Close} from '@edx/paragon/icons'.
+   *   submit: import {Search} from '@openedx/paragon/icons';,
+   *   clear: import {Close} from '@openedx/paragon/icons'.
    * }
    * ```
    */
@@ -170,8 +167,8 @@ SearchField.defaultProps = {
     clearButton: SEARCH_FIELD_SCREEN_READER_TEXT_CLEAR_BUTTON,
   },
   icons: {
-    clear: <Icon src={Close} />,
-    submit: <Icon src={Search} />,
+    clear: Close,
+    submit: Search,
   },
   onBlur: () => {},
   onChange: () => {},