@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/src/Dropdown/deprecated/index.jsx

@@ -0,0 +1,222 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+// eslint-disable-next-line import/no-cycle
+import DropdownButton from './DropdownButton';
+// eslint-disable-next-line import/no-cycle
+import DropdownMenu from './DropdownMenu';
+import DropdownItem from './DropdownItem';
+
+import withDeprecatedProps, { DeprTypes } from '../../withDeprecatedProps';
+
+const { Provider, Consumer } = React.createContext();
+
+class Dropdown extends React.Component {
+  // eslint-disable-next-line react/sort-comp
+  static idCounter = 0; // For creating unique ids
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      open: false,
+    };
+
+    // Used for aria labelling. Increment the id counter so the next id can be unique
+    this.uniqueId = Dropdown.idCounter;
+    Dropdown.idCounter += 1;
+    this.triggerId = `pgn__dropdown-trigger-${this.uniqueId}`;
+
+    this.containerRef = React.createRef();
+    this.menuRef = React.createRef();
+    this.buttonRef = React.createRef();
+  }
+
+  componentDidUpdate(prevProps, prevState) {
+    if (prevState.open !== this.state.open) {
+      if (this.state.open) {
+        this.focusFirst();
+      } else {
+        this.buttonRef.current.focus();
+      }
+    }
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleDocumentClick, true);
+  }
+
+  getFocusableElements() {
+    const selector = 'button:not([disabled]), [href]:not([disabled]), input:not([disabled]), select:not([disabled]), textarea:not([disabled]), [tabindex]:not([tabindex="-1"]):not([disabled])';
+    return Array.from(this.menuRef.current.querySelectorAll(selector));
+  }
+
+  handleDocumentClick = (e) => {
+    if (this.containerRef.current.contains(e.target) && this.containerRef.current !== e.target) {
+      return;
+    }
+    if (this.state.open) {
+      this.close();
+    }
+  };
+
+  handleMenuKeyDown = (e) => {
+    switch (e.key) {
+      case 'ArrowUp':
+        e.preventDefault();
+        this.focusPrevious();
+        break;
+      case 'ArrowDown':
+        e.preventDefault();
+        this.focusNext();
+        break;
+      case 'Tab':
+        e.preventDefault();
+        if (e.shiftKey) {
+          this.focusPrevious();
+        } else {
+          this.focusNext();
+        }
+        break;
+      case 'Escape':
+        e.stopPropagation();
+        this.close();
+        break;
+      default:
+        break;
+    }
+  };
+
+  toggle = () => {
+    if (this.state.open) {
+      this.close();
+    } else {
+      this.open();
+    }
+  };
+
+  close() {
+    document.removeEventListener('click', this.handleDocumentClick, true);
+    this.setState({
+      open: false,
+    });
+  }
+
+  open() {
+    // adding event listener here so the user can close dropdown on click outside of the dropdown
+    document.addEventListener('click', this.handleDocumentClick, true);
+    this.setState({
+      open: true,
+    });
+  }
+
+  focusFirst() {
+    const focusableElements = this.getFocusableElements();
+    if (focusableElements.length) { focusableElements[0].focus(); }
+  }
+
+  focusNext() {
+    const allFocusableElements = this.getFocusableElements();
+    if (allFocusableElements.length === 0) { return; }
+    const activeIndex = allFocusableElements.indexOf(document.activeElement);
+    const nextIndex = (activeIndex + 1) % allFocusableElements.length;
+    allFocusableElements[nextIndex].focus();
+  }
+
+  focusPrevious() {
+    const allFocusableElements = this.getFocusableElements();
+    if (allFocusableElements.length === 0) { return; }
+    const activeIndex = allFocusableElements.indexOf(document.activeElement);
+    const previousIndex = ((activeIndex - 1) + allFocusableElements.length) % allFocusableElements.length;
+    allFocusableElements[previousIndex].focus();
+  }
+
+  render() {
+    const { children, ...other } = this.props;
+
+    return (
+      <div
+        {...other}
+        className={classNames(
+          'dropdown',
+          { show: this.state.open },
+          other.className,
+        )}
+        ref={this.containerRef}
+      >
+        <Provider
+          value={{
+            buttonRef: this.buttonRef,
+            handleMenuKeyDown: this.handleMenuKeyDown,
+            isOpen: this.state.open,
+            menuRef: this.menuRef,
+            toggle: this.toggle,
+            triggerId: this.triggerId,
+          }}
+        >
+          {children}
+        </Provider>
+      </div>
+    );
+  }
+}
+
+Dropdown.propTypes = {
+  children: PropTypes.node,
+};
+
+Dropdown.Item = DropdownItem;
+Dropdown.Button = DropdownButton;
+Dropdown.Menu = DropdownMenu;
+
+const DropdownWithDeprecatedProps = withDeprecatedProps(Dropdown, 'Dropdown', {
+  menuItems: {
+    deprType: DeprTypes.MOVED_AND_FORMAT,
+    message: 'They should be components sent as children.',
+    newName: 'children',
+    transform: (menuItems, allProps) => {
+      if (!Array.isArray(menuItems)) { return null; }
+      return (
+        <>
+          <DropdownButton>
+            {React.isValidElement(allProps.iconElement) ? allProps.iconElement : null }
+            {allProps.title}
+          </DropdownButton>
+          <DropdownMenu>
+            {menuItems.map((menuItem, i) => {
+            /* eslint-disable react/no-array-index-key */
+              if (React.isValidElement(menuItem)) {
+                return React.cloneElement(menuItem, {
+                  className: 'dropdown-item',
+                  key: i,
+                });
+              }
+              return <DropdownItem key={i} href={menuItem.href}>{menuItem.label}</DropdownItem>;
+            /* eslint-enable react/no-array-index-key */
+            })}
+          </DropdownMenu>
+        </>
+      );
+    },
+  },
+  title: {
+    deprType: DeprTypes.REMOVED,
+    message: 'It should be specified inside the Dropdown.Button component',
+  },
+  buttonType: {
+    deprType: DeprTypes.REMOVED,
+    message: 'It should be specified as a className prop',
+  },
+  iconElement: {
+    deprType: DeprTypes.REMOVED,
+    message: 'It should be specified inside the buttonContent prop.',
+  },
+});
+
+DropdownWithDeprecatedProps.propTypes = Dropdown.propTypes;
+DropdownWithDeprecatedProps.defaultProps = Dropdown.defaultProps;
+DropdownWithDeprecatedProps.Item = Dropdown.Item;
+DropdownWithDeprecatedProps.Button = Dropdown.Button;
+DropdownWithDeprecatedProps.Menu = Dropdown.Menu;
+
+export { Provider, Consumer };
+export default DropdownWithDeprecatedProps;

package/src/Dropdown/index.jsx

@@ -5,6 +5,7 @@ import BaseDropdown from 'react-bootstrap/Dropdown';
 import DropdownMenu from 'react-bootstrap/DropdownMenu';
 import BaseDropdownItem from 'react-bootstrap/DropdownItem';
 import BaseDropdownToggle from 'react-bootstrap/DropdownToggle';
+import DropdownDeprecated from './deprecated';
 import Button from '../Button';
 import IconButton from '../IconButton';
 
@@ -68,6 +69,7 @@ const Dropdown = React.forwardRef(
     );
   },
 );
+
 Dropdown.propTypes = {
   autoClose: PropTypes.oneOfType([
     PropTypes.string,
@@ -78,6 +80,7 @@ Dropdown.propTypes = {
   show: PropTypes.bool,
   variant: PropTypes.oneOf(['light', 'dark']),
 };
+
 Dropdown.defaultProps = {
   autoClose: true,
   className: '',
@@ -126,13 +129,16 @@ Dropdown.Item = React.forwardRef(
     );
   },
 );
+
 Dropdown.Item.propTypes = {
   className: PropTypes.string,
 };
+
 Dropdown.Item.defaultProps = {
   className: undefined,
 };
 
+Dropdown.Deprecated = DropdownDeprecated;
 Dropdown.Toggle = DropdownToggle;
 Dropdown.Menu = DropdownMenu;
 Dropdown.Header = BaseDropdown.Header;

package/src/Dropdown/index.scss

@@ -1,46 +1,47 @@
-@import "dropdown-bootstrap";
+@import "variables";
+@import "~bootstrap/scss/dropdown";
 
 .pgn__dropdown-dark {
   .dropdown-menu {
-    background-color: var(--pgn-color-dark-300);
-    color: var(--pgn-color-white);
+    background-color: $dark-300;
+    color: $white;
 
     .pgn__dropdown-item {
-      color: var(--pgn-color-white);
+      color: $white;
       font-weight: 400;
 
       &:hover {
-        background-color: var(--pgn-color-dark-200);
+        background-color: $dark-200;
       }
 
       &.active {
-        background-color: var(--pgn-color-light-300);
-        color: var(--pgn-color-primary-700);
+        background-color: $light-300;
+        color: $primary-700;
         font-weight: 700;
       }
 
       &:focus {
-        border: 2px solid var(--pgn-color-white);
+        border: 2px solid $white;
         background-color: inherit;
       }
     }
 
     .dropdown-header {
-      color: var(--pgn-color-light-700);
+      color: $light-700;
     }
 
 
     .dropdown-divider {
-      border-color: var(--pgn-color-dark-200);
+      border-color: $dark-200;
     }
   }
 }
 
 .dropdown-toggle::after {
-  content: "";
   border: 0;
   border-style: solid;
   border-width: .15rem .15rem 0 0;
+  content: "";
   height: .45rem;
   margin-inline-start: .5em;
   position: relative;

package/src/Dropzone/_variables.scss

@@ -0,0 +1,9 @@
+$dropzone-padding:                          1.5rem !default;
+$dropzone-border-default:                   1px dashed $gray-500 !default;
+$dropzone-box-shadow-hover:                 inset 0 0 0 2px $info-300 !default;
+$dropzone-box-shadow-focus:                 inset 0 0 0 2px $info-300 !default;
+$dropzone-box-shadow-active:                inset 0 0 0 2px $primary-500 !default;
+$dropzone-box-shadow-error:                 inset 0 0 0 2px $danger-300 !default;
+$dropzone-error-wrapper-color:              $danger-500 !default;
+$dropzone-restriction-msg-font-size:        $x-small-font-size !default;
+$dropzone-restriction-msg-color:            $gray-500 !default;

package/src/Dropzone/index.jsx

@@ -178,8 +178,7 @@ function Dropzone({
     <div
       data-testid="dropzone-container"
       {...getRootProps({
-        className: classNames('pgn__dropzone', {
-          className,
+        className: classNames('pgn__dropzone', className, {
           'pgn__dropzone-validation-error': isMultipleDragged || errors.length > 0 || isDragReject,
           'pgn__dropzone-active': isDragActive && !isDragReject,
         }),
@@ -271,7 +270,7 @@ Dropzone.propTypes = {
    */
   validator: PropTypes.func,
   /** A component to display initial state of the `Dropzone`. */
-  inputComponent: PropTypes.oneOfType([PropTypes.func, PropTypes.node]),
+  inputComponent: PropTypes.oneOfType([PropTypes.elementType, PropTypes.node]),
 };
 
 export default Dropzone;

package/src/Dropzone/index.scss

@@ -1,10 +1,12 @@
+@import "variables";
+
 .pgn__dropzone {
   display: flex;
   justify-content: center;
   align-items: center;
   min-height: 200px;
-  padding: var(--pgn-spacing-dropzone-padding);
-  border: var(--pgn-spacing-dropzone-border-base) dashed var(--pgn-color-dropzone-border-base);
+  padding: $dropzone-padding;
+  border: $dropzone-border-default;
   box-sizing: border-box;
   cursor: pointer;
 
@@ -16,30 +18,30 @@
   }
 
   &:hover {
-    box-shadow: var(--pgn-elevation-dropzone-hover);
+    box-shadow: $dropzone-box-shadow-hover;
   }
 
   &:focus {
-    box-shadow: var(--pgn-elevation-dropzone-focus);
+    box-shadow: $dropzone-box-shadow-focus;
   }
 
   &.pgn__dropzone-validation-error {
-    box-shadow: var(--pgn-elevation-dropzone-error);
+    box-shadow: $dropzone-box-shadow-error;
   }
 
   &.pgn__dropzone-active {
-    box-shadow: var(--pgn-elevation-dropzone-active);
+    box-shadow: $dropzone-box-shadow-active;
   }
 }
 
 .pgn__dropzone-error-wrapper {
   text-align: center;
-  color: var(--pgn-color-dropzone-error-wrapper);
+  color: $dropzone-error-wrapper-color;
 }
 
 .pgn__dropzone-generic-alert {
   width: 100%;
-  margin-bottom: var(--pgn-spacing-spacer-4);
+  margin-bottom: map_get($spacers, 4);
 
   .pgn__alert-message-wrapper .alert-message-content {
     > span {
@@ -51,10 +53,10 @@
 .pgn__dropzone__upload-icon-wrapper {
   height: 56px;
   width: 56px;
-  background: var(--pgn-color-light-300);
+  background: $light-300;
   border-radius: 50%;
   position: relative;
-  margin-bottom: var(--pgn-spacing-spacer-4);
+  margin-bottom: map-get($spacers, 4);
 }
 
 .pgn__dropzone__upload-icon {
@@ -67,6 +69,6 @@
 }
 
 .pgn__dropzone__upload-restriction-message {
-  font-size: var(--pgn-typography-dropzone-restriction-msg-font-size);
-  color: var(--pgn-color-dropzone-restriction-msg);
+  font-size: $dropzone-restriction-msg-font-size;
+  color: $dropzone-restriction-msg-color;
 }

package/src/Fieldset/Fieldset.test.jsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+
+import Fieldset from '.';
+import Variant from '../utils/constants';
+
+const dangerVariant = {
+  status: Variant.status.DANGER,
+};
+const id = 'input1';
+const legend = 'A Fieldset';
+const invalidMessage = 'This is invalid!';
+const children = 'Input goes here';
+const variant = {
+  status: Variant.status.INFO,
+};
+const variantIconDescription = 'Error';
+
+const baseProps = {
+  className: '',
+  id,
+  isValid: true,
+  legend,
+  invalidMessage,
+  variant,
+  variantIconDescription,
+};
+
+jest.mock('../utils/newId', () => jest.fn().mockReturnValue('fieldset1'));
+
+describe('Fieldset', () => {
+  it('renders', () => {
+    const { getByTestId, getByText } = render(
+      <Fieldset {...baseProps}>{children}</Fieldset>,
+    );
+
+    const fieldset = getByTestId('fieldset');
+    expect(fieldset).toBeInTheDocument();
+    expect(fieldset).toHaveClass('is-invalid-nodanger');
+    expect(fieldset).toHaveAttribute('aria-describedby', `error-${id}`);
+
+    const legendElem = getByText(legend);
+    expect(legendElem).toBeInTheDocument();
+
+    const feedback = getByTestId('validation-message');
+    expect(feedback).toHaveAttribute('id', `error-${id}`);
+  });
+
+  it('renders with auto-generated id if not specified', () => {
+    const props = {
+      ...baseProps,
+      id: undefined,
+    };
+
+    const { getByTestId } = render(<Fieldset {...props} />);
+    const feedback = getByTestId('validation-message');
+    expect(feedback).toHaveAttribute('id', 'error-fieldset1');
+  });
+
+  it('renders invalidMessage when isValid is false', () => {
+    const { getByTestId } = render(
+      <Fieldset {...baseProps} isValid={false} />,
+    );
+    const feedback = getByTestId('validation-message');
+    expect(feedback).toHaveTextContent(invalidMessage);
+  });
+
+  it('renders with danger variant when isValid is false and variant is DANGER', () => {
+    const { getByTestId } = render(
+      <Fieldset {...baseProps} isValid={false} variant={dangerVariant} />,
+    );
+    const feedback = getByTestId('validation-message');
+    expect(feedback).not.toHaveClass('invalid-feedback-nodanger');
+    expect(feedback).toHaveTextContent(invalidMessage);
+  });
+
+  it('receives new id when a valid one is passed to props', () => {
+    const nextId = 'new-id';
+
+    const { getByTestId } = render(<Fieldset {...baseProps} id={nextId} />);
+    const fieldset = getByTestId('fieldset');
+    const feedback = getByTestId('validation-message');
+
+    expect(fieldset).toHaveAttribute('aria-describedby', `error-${nextId}`);
+    expect(feedback).toHaveAttribute('id', `error-${nextId}`);
+  });
+
+  it('auto-generates new id when an invalid one is passed to props', () => {
+    const nextId = '';
+
+    const { getByTestId } = render(<Fieldset {...baseProps} id={nextId} />);
+    const fieldset = getByTestId('fieldset');
+    const feedback = getByTestId('validation-message');
+
+    expect(fieldset).toHaveAttribute(
+      'aria-describedby',
+      'error-fieldset1',
+    );
+    expect(feedback).toHaveAttribute('id', 'error-fieldset1');
+  });
+});

package/src/Fieldset/README.md

@@ -0,0 +1,146 @@
+---
+title: 'Fieldset'
+type: 'component'
+components:
+- Fieldset
+categories:
+- Forms (deprecated)
+status: 'Deprecate Soon'
+designStatus: 'TBD'
+devStatus: 'To Do'
+notes: |
+  Unneeded. Used in one place (studio-frontend/src/components/EditImageModal/index.jsx)
+---
+
+## basic usage
+
+```jsx live
+<form>
+  <Fieldset legend="Name">
+    <InputText
+      name="firstName"
+      label="First Name"
+      value=""
+    />
+    <InputText
+      name="lastName"
+      label="Last Name"
+      value=""
+    />
+  </Fieldset>
+</form>
+```
+
+## invalid
+
+```jsx live
+<form>
+  <Fieldset legend="Name" invalidMessage="This is invalid!" isValid={false}>
+    <InputText
+      name="firstName"
+      label="First Name"
+      value=""
+    />
+    <InputText
+      name="lastName"
+      label="Last Name"
+      value=""
+    />
+  </Fieldset>
+</form>
+```
+
+## invalid with danger theme
+
+```jsx live
+<form>
+  <Fieldset
+    legend="Name"
+    invalidMessage="This is invalid!"
+    isValid={false}
+    variant={{
+      status: Variant.status.DANGER,
+    }}
+    variantIconDescription="Error"
+  >
+    <InputText
+      name="firstName"
+      label="First Name"
+      value=""
+    />
+    <InputText
+      name="lastName"
+      label="Last Name"
+      value=""
+    />
+  </Fieldset>
+</form>
+```
+
+## Validated Form
+
+```jsx live
+class ValidatedForm extends React.Component {
+  constructor(props) {
+    super(props);
+    this.firstInputRef = null;
+    this.secondInputRef = null;
+
+    this.state = {
+      isValid: true,
+    };
+
+    this.handleSubmit = this.handleSubmit.bind(this);
+  }
+
+  handleSubmit(event) {
+    if (
+      this.firstInputRef.value.length === 0 &&
+      this.secondInputRef.value.length === 0
+    ) {
+      this.setState({
+        isValid: false,
+      });
+    } else {
+      this.setState({
+        isValid: true,
+      });
+    }
+    event.preventDefault();
+  }
+
+  render() {
+    return (
+      <form onSubmit={this.handleSubmit}>
+        <Fieldset
+          legend="Name"
+          invalidMessage="Please enter at least one name."
+          isValid={this.state.isValid}
+          variant={{
+            status: Variant.status.DANGER,
+          }}
+          variantIconDescription="Error"
+        >
+          <InputText
+            name="firstName"
+            label="First Name"
+            value=""
+            inputRef={ref => {
+              this.firstInputRef = ref;
+            }}
+          />
+          <InputText
+            name="lastName"
+            label="Last Name"
+            value=""
+            inputRef={ref => {
+              this.secondInputRef = ref;
+            }}
+          />
+        </Fieldset>
+        <input type="submit" className="btn btn-primary" value="Submit" />
+      </form>
+    );
+  }
+}
+```