@openedx/paragon 22.0.0-alpha.24 → 22.0.0

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

@@ -6,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 = [
@@ -194,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/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

@@ -8,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';
@@ -128,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'.
    * }
    * ```
    */
@@ -169,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: () => {},

package/src/SearchField/index.scss

@@ -1,22 +1,24 @@
+@import "variables";
+
 .pgn__searchfield {
-  transition: var(--pgn-transition-form-input);
-  border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
+  transition: $input-transition;
+  border: $search-border-width solid $search-border-color;
 
   .pgn__searchfield-form {
     display: flex;
     align-items: center;
     width: 100%;
-    background-color: var(--pgn-color-search-field-form-bg);
+    background-color: $search-form-background-color;
   }
 
   .btn:focus-visible {
     outline: none;
     position: relative;
-    transition: var(--pgn-transition-form-input);
+    transition: $input-transition;
 
     &::after {
       content: "";
-      border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
+      border: $search-border-focus-width double $search-border-focus-color;
       position: absolute;
       width: 100%;
       height: 100%;
@@ -25,7 +27,7 @@
 
   &.disabled,
   &:disabled {
-    opacity: var(--pgn-other-search-field-disabled-opacity);
+    opacity: $search-disabled-opacity;
     pointer-events: none;
   }
 
@@ -34,26 +36,26 @@
 
     &::after {
       content: "";
-      border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
+      border: $search-border-focus-width double $search-border-focus-color;
       position: absolute;
       width: 100%;
       height: 100%;
     }
 
     .pgn__searchfield_wrapper {
-      box-shadow: 0 0 0 var(--pgn-size-search-field-border-width-base) var(--pgn-color-search-field-border-interaction);
+      box-shadow: 0 0 0 $search-border-width $search-border-color-interaction;
     }
   }
 
   &:hover,
   &:active {
-    border-color: var(--pgn-color-search-field-border-interaction);
+    border-color: $search-border-color-interaction;
   }
 
   .form-control {
     border: none;
-    border-radius: var(--pgn-size-search-field-border-radius);
-    height: var(--pgn-size-search-field-search-input-height);
+    border-radius: $search-border-radius;
+    height: $input-height-search;
 
     &:focus {
       box-shadow: none;
@@ -89,14 +91,6 @@
   &.pgn__searchfield--external {
     border: none;
 
-    .btn-primary {
-      background: var(--pgn-color-search-field-button-bg-primary);
-    }
-
-    .btn-brand {
-      background: var(--pgn-color-search-field-button-bg-brand);
-    }
-
     &.has-focus {
       box-shadow: none;
 
@@ -105,20 +99,12 @@
 
         &::after {
           content: "";
-          border: var(--pgn-size-search-field-border-width-focus) double var(--pgn-color-search-field-border-focus);
+          border: $search-border-focus-width double $search-border-focus-color;
           position: absolute;
           width: 100%;
           height: 100%;
         }
       }
-
-      .btn-primary {
-        background: var(--pgn-color-search-field-button-bg-primary);
-      }
-
-      .btn-brand {
-        background: var(--pgn-color-search-field-button-bg-brand);
-      }
     }
   }
 
@@ -126,16 +112,22 @@
     display: flex;
     align-items: center;
     width: 100%;
-    border: var(--pgn-size-search-field-border-width-base) solid var(--pgn-color-search-field-border-base);
+    border: $search-border-width solid $search-border-color;
 
     &:hover,
     &:active {
-      border-color: var(--pgn-color-search-field-border-interaction);
+      border-color: $search-border-color-interaction;
     }
   }
 }
 
 .pgn__searchfield__button.btn[type="submit"] {
   border-radius: 0;
-  margin-inline-start: var(--pgn-spacing-search-field-margin-button);
+  margin-inline-start: $search-button-margin;
+}
+
+.pgn__searchfield__iconbutton-submit,
+.pgn__searchfield__iconbutton-reset {
+  flex-shrink: 0;
+  margin-inline-end: map-get($spacers, 1);
 }

package/src/SelectableBox/_variables.scss

@@ -0,0 +1,5 @@
+$selectable-box-padding:                   1rem !default;
+$selectable-box-border-radius:             .25rem !default;
+$selectable-box-space:                     .75rem !default;
+$min-cols-number:                          1 !default;
+$max-cols-number:                          12 !default;

package/src/SelectableBox/index.scss

@@ -1,9 +1,11 @@
+@import "variables";
+
 .pgn__selectable_box-set {
   display: grid;
   grid-auto-rows: 1fr;
-  grid-gap: var(--pgn-spacing-selectable-box-box-space);
+  grid-gap: $selectable-box-space;
 
-  @for $i from 1 through 12 {
+  @for $i from $min-cols-number through $max-cols-number {
     &.pgn__selectable_box-set--#{$i} {
       grid-template-columns: repeat(#{$i}, 1fr);
     }
@@ -17,21 +19,21 @@
 .pgn__selectable_box {
   position: relative;
   height: 100%;
-  padding: var(--pgn-spacing-selectable-box-padding);
-  box-shadow: var(--pgn-elevation-box-shadow-level-1);
-  border-radius: var(--pgn-spacing-selectable-box-border-radius);
+  padding: $selectable-box-padding;
+  box-shadow: $level-1-box-shadow;
+  border-radius: $selectable-box-border-radius;
   text-align: start;
-  background: var(--pgn-color-white);
+  background: $white;
 
   &:focus-visible {
-    outline: 1px solid var(--pgn-color-primary-700);
+    outline: 1px solid $primary-700;
   }
 
   .pgn__form-radio,
   .pgn__form-checkbox {
     position: absolute;
-    top: var(--pgn-spacing-selectable-box-padding);
-    inset-inline-end: var(--pgn-spacing-selectable-box-padding);
+    top: $selectable-box-padding;
+    inset-inline-end: $selectable-box-padding;
 
     input {
       margin-inline-end: 0;
@@ -44,9 +46,9 @@
 }
 
 .pgn__selectable_box-active {
-  outline: 2px solid var(--pgn-color-primary-500);
+  outline: 2px solid $primary-500;
 }
 
 .pgn__selectable_box-invalid {
-  outline: 2px solid var(--pgn-color-danger-300);
+  outline: 2px solid $danger-300;
 }