@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/src/Sheet/index.scss

@@ -1,7 +1,7 @@
 .pgn__sheet-skrim {
   width: 100%;
   height: 100%;
-  background-color: var(--pgn-color-sheet-skrim-bg);
+  background-color: rgba(196, 196, 196, .5);
   position: fixed;
   top: 0;
   left: 0;
@@ -10,17 +10,17 @@
     display: none;
   }
 
-  z-index: var(--pgn-elevation-sheet-zindex-backdrop);
+  z-index: $zindex-sheet-backdrop;
 }
 
 %component-left {
   left: 0;
-  box-shadow: 8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+  box-shadow: 8px 0 16px 0 rgba(0, 0, 0, .15);
 }
 
 %component-right {
   right: 0;
-  box-shadow: -8px 0 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+  box-shadow: -8px 0 16px 0 rgba(0, 0, 0, .15);
 }
 
 .pgn__sheet-component-left {
@@ -34,22 +34,22 @@
 .pgn__sheet-component {
   position: fixed;
   padding: 1.25rem;
-  background-color: var(--pgn-color-white);
-  z-index: var(--pgn-elevation-sheet-zindex-main);
+  background-color: white;
+  z-index: $zindex-sheet;
 
   &.pgn__sheet__dark {
-    background-color: var(--pgn-color-dark-500);
-    color: var(--pgn-color-light-300);
+    background-color: $dark-500;
+    color: $light-300;
   }
 
   &.bottom {
     bottom: 0;
-    box-shadow: 0 -8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+    box-shadow: 0 -8px 16px 0 rgba(0, 0, 0, .15);
   }
 
   &.top {
     top: 0;
-    box-shadow: 0 8px 16px 0 var(--pgn-color-sheet-skrim-component-box-shadow);
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .15);
   }
 
   &.left {

package/src/Spinner/_variables.scss

@@ -0,0 +1,9 @@
+// Spinners
+
+$spinner-width:         2rem !default;
+$spinner-height:        $spinner-width !default;
+$spinner-border-width:  .25em !default;
+
+$spinner-width-sm:        1rem !default;
+$spinner-height-sm:       $spinner-width-sm !default;
+$spinner-border-width-sm: .2em !default;

package/src/Spinner/index.scss

@@ -1,57 +1,2 @@
-@keyframes spinner-border {
-  to { transform: rotate(360deg); }
-}
-
-.spinner-border {
-  display: inline-block;
-  width: var(--pgn-size-spinner-base-width);
-  height: var(--pgn-size-spinner-base-height);
-  vertical-align: calc(var(--pgn-spacing-vertical-align) * -1);
-  border: var(--pgn-size-spinner-base-border-width) solid currentcolor;
-  border-right-color: transparent;
-  border-radius: 50%;
-  animation: .75s linear infinite spinner-border;
-}
-
-.spinner-border-sm {
-  width: var(--pgn-size-spinner-sm-width);
-  height: var(--pgn-size-spinner-sm-height);
-  border-width: var(--pgn-size-spinner-sm-border-width);
-}
-
-@keyframes spinner-grow {
-  0% {
-    transform: scale(0);
-  }
-
-  50% {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.spinner-grow {
-  display: inline-block;
-  width: var(--pgn-size-spinner-base-width);
-  height: var(--pgn-size-spinner-base-height);
-  vertical-align: calc(var(--pgn-spacing-vertical-align) * -1);
-  background-color: currentcolor;
-  border-radius: 50%;
-  opacity: 0;
-  animation: .75s linear infinite spinner-grow;
-}
-
-.spinner-grow-sm {
-  width: var(--pgn-size-spinner-sm-width);
-  height: var(--pgn-size-spinner-sm-height);
-}
-
-@if $enable-prefers-reduced-motion-media-query {
-  @media (prefers-reduced-motion: reduce) {
-    .spinner-border,
-    .spinner-grow {
-      animation-duration: 1.5s;
-    }
-  }
-}
-
+@import "variables";
+@import "~bootstrap/scss/spinners";

package/src/Stack/_variables.scss

@@ -0,0 +1 @@
+$stack-gap:                       0 !default;

package/src/Stack/index.scss

@@ -1,8 +1,10 @@
+@import "variables";
+
 .pgn__vstack,
 .pgn__hstack {
   display: flex;
   align-self: stretch;
-  gap: var(--pgn-size-stack-gap);
+  gap: $stack-gap;
 
   @each $level, $space in $spacers {
     &.pgn__stack-gap--#{$level} {

package/src/StatusAlert/README.md

@@ -0,0 +1,149 @@
+---
+title: 'StatusAlert'
+type: 'component'
+components:
+- StatusAlert
+categories:
+- Status & metadata
+status: 'Deprecate Soon'
+designStatus: 'Done'
+devStatus: 'Done'
+notes: |
+  Alert replaces this component
+---
+
+## basic usage
+
+```jsx live
+<StatusAlert
+  dialog="You have a status alert!"
+  onClose={() => {}}
+  open
+/>
+```
+
+## success alert
+
+```jsx live
+<StatusAlert
+  alertType="success"
+  dialog="Success!"
+  onClose={() => {}}
+  open
+/>
+```
+
+## danger alert
+
+```jsx live
+<StatusAlert
+  alertType="danger"
+  dialog="Error!"
+  onClose={() => {}}
+  open
+/>
+```
+
+## informational alert
+
+```jsx live
+<StatusAlert
+  alertType="info"
+  dialog="Get some info here!"
+  onClose={() => {}}
+  open
+/>
+```
+
+## alert with a custom aria-label on the close button
+
+```jsx live
+<StatusAlert
+  alertType="info"
+  dialog="Some very specific information."
+  onClose={() => {}}
+  open
+  closeButtonAriaLabel="Dismiss this very specific information."
+/>
+```
+
+## Non-dismissible alert
+
+```jsx live
+<StatusAlert
+  alertType="danger"
+  dismissible={false}
+  dialog="You can't get rid of me!"
+  open
+/>
+```
+
+## alert invoked via a button
+
+```jsx live
+class StatusAlertWrapper extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.openStatusAlert = this.openStatusAlert.bind(this);
+    this.resetStatusAlertWrapperState = this.resetStatusAlertWrapperState.bind(
+      this,
+    );
+
+    this.state = { open: false };
+  }
+
+  openStatusAlert() {
+    this.setState({ open: true });
+  }
+
+  resetStatusAlertWrapperState() {
+    this.setState({ open: false });
+    this.button.focus();
+  }
+
+  render() {
+    return (
+      <div>
+        <StatusAlert
+          alertType="warning"
+          open={this.state.open}
+          dialog="You triggered a warning"
+          onClose={this.resetStatusAlertWrapperState}
+        />
+        <Button
+          onClick={this.openStatusAlert}
+          variant="light"
+          inputRef={input => {
+            this.button = input;
+          }}
+        >
+          Click me to open a Status Alert!
+        </Button>
+      </div>
+    );
+  }
+}
+```
+
+## alert with a link
+
+```jsx live
+<StatusAlert
+  alertType="info"
+  dialog={
+    <div>
+      <span>Love cats? </span>
+      <a
+        href="https://www.factretriever.com/cat-facts"
+        target="_blank"
+        rel="noopener noreferrer"
+      >
+        Click me!
+      </a>
+    </div>
+  }
+  onClose={() => {}}
+  open
+/>
+```

package/src/StatusAlert/StatusAlert.test.jsx

@@ -0,0 +1,150 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import StatusAlert from '.';
+import { Button } from '..';
+
+const dialog = 'Status Alert dialog';
+const defaultProps = {
+  dialog,
+  onClose: () => {},
+  open: true,
+};
+
+describe('<StatusAlert />', () => {
+  describe('correct rendering', () => {
+    it('renders default view', () => {
+      render(<StatusAlert {...defaultProps} />);
+      const statusAlertDialog = screen.getByRole('alert');
+      expect(statusAlertDialog.textContent).toContain(dialog);
+      expect(screen.getAllByRole('button')).toHaveLength(1);
+    });
+
+    it('renders non-dismissible view', () => {
+      render(<StatusAlert {...defaultProps} dismissible={false} />);
+      const statusAlertDialog = screen.getByRole('alert');
+
+      expect(statusAlertDialog.textContent).toContain(dialog);
+      expect(screen.queryAllByRole('button')).toHaveLength(0);
+    });
+
+    it('renders custom aria-label view', () => {
+      const customLabel = 'Dismiss this alert post-haste!';
+      render(<StatusAlert {...defaultProps} closeButtonAriaLabel={customLabel} />);
+      const button = screen.getByRole('button');
+
+      expect(button.getAttribute('aria-label')).toBe(customLabel);
+    });
+  });
+
+  describe('props received correctly', () => {
+    it('component receives props', async () => {
+      const onCloseMock = jest.fn();
+
+      const { rerender } = render(
+        <StatusAlert dialog={dialog} onClose={onCloseMock} />,
+      );
+      const alertElement = screen.getByRole('alert', { hidden: true });
+      expect(alertElement).not.toHaveClass('show');
+
+      rerender(<StatusAlert dialog={dialog} onClose={onCloseMock} open />);
+      expect(screen.getByRole('alert')).toHaveClass('show');
+
+      expect(onCloseMock).not.toHaveBeenCalled();
+      const closeButton = screen.getByRole('button');
+      await userEvent.click(closeButton);
+      expect(onCloseMock).toHaveBeenCalled();
+    });
+
+    it('component receives props and ignores prop change', () => {
+      render(<StatusAlert {...defaultProps} />);
+      const statusAlertDialog = screen.getByRole('alert');
+
+      // Initial rendering with default props
+      expect(statusAlertDialog.textContent).toContain(dialog);
+
+      // Simulate prop update
+      render(<StatusAlert {...defaultProps} dialog="Changed alert dialog" />);
+      expect(statusAlertDialog.textContent).toContain(dialog);
+    });
+  });
+
+  describe('close functions properly', () => {
+    it('closes when x button pressed', async () => {
+      render(<StatusAlert {...defaultProps} />);
+      const closeButton = screen.getByRole('button');
+      await userEvent.click(closeButton);
+      expect(screen.queryByRole('alert')).toBeNull();
+    });
+
+    it('closes when Enter key pressed', async () => {
+      render(<StatusAlert {...defaultProps} />);
+      const closeButton = screen.getByRole('button');
+      closeButton.focus();
+      await userEvent.keyboard('{enter}');
+      expect(screen.queryByRole('alert')).toBeNull();
+    });
+
+    it('closes when Escape key pressed', async () => {
+      render(<StatusAlert {...defaultProps} />);
+      const closeButton = screen.getByRole('button');
+      closeButton.focus();
+      await userEvent.keyboard('{enter}');
+      expect(screen.queryByRole('alert')).toBeNull();
+    });
+
+    it('calls callback function on close', async () => {
+      const spy = jest.fn();
+
+      render(<StatusAlert {...defaultProps} onClose={spy} />);
+      const closeButton = screen.getByRole('button');
+
+      expect(spy).toHaveBeenCalledTimes(0);
+
+      await userEvent.click(closeButton);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+
+  describe('invalid keystrokes do nothing', () => {
+    beforeEach(() => {
+      render(<StatusAlert {...defaultProps} />);
+    });
+
+    it('does nothing on invalid keystroke q', async () => {
+      const closeButton = screen.getByRole('button');
+      expect(document.activeElement).toEqual(closeButton);
+      closeButton.focus();
+      await userEvent.keyboard('{q}');
+      expect(document.activeElement).toEqual(closeButton);
+    });
+
+    it('does nothing on invalid keystroke + ctrl', async () => {
+      const closeButton = screen.getByRole('button');
+      expect(document.activeElement).toEqual(closeButton);
+      await userEvent.keyboard('{ctrl>}{tab}{/ctrl}');
+      expect(document.activeElement).toEqual(closeButton);
+    });
+  });
+  describe('focus functions properly', () => {
+    it('focus function changes focus', async () => {
+      render(
+        <div>
+          <Button label="test">Button</Button>
+          <StatusAlert {...defaultProps} />
+        </div>,
+      );
+      const buttons = screen.getAllByRole('button');
+      const xButton = buttons[1];
+      const statusAlertButton = buttons[0];
+
+      // Move focus away from the default StatusAlert xButton
+      await userEvent.click(xButton);
+      expect(xButton.innerHTML).toEqual(document.activeElement.innerHTML);
+
+      statusAlertButton.focus();
+      expect(statusAlertButton.innerHTML).toEqual(document.activeElement.innerHTML);
+    });
+  });
+});

package/src/StatusAlert/index.jsx

@@ -0,0 +1,144 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import isRequiredIf from 'react-proptype-conditional-require';
+
+import Button from '../Button';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
+
+class StatusAlert extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.close = this.close.bind(this);
+    this.handleKeyDown = this.handleKeyDown.bind(this);
+    this.renderDialog = this.renderDialog.bind(this);
+
+    this.state = {
+      open: props.open,
+    };
+  }
+
+  componentDidMount() {
+    if (this.xButton) {
+      this.xButton.focus();
+    }
+  }
+
+  /* eslint-disable react/no-did-update-set-state */
+  componentDidUpdate(prevProps, prevState) {
+    if (this.state.open && !prevState.open && this.xButton) {
+      this.xButton.focus();
+    }
+
+    if (this.props.open !== prevProps.open) {
+      this.setState({ open: this.props.open });
+    }
+  }
+
+  handleKeyDown(e) {
+    if (e.key === 'Enter' || e.key === 'Escape') {
+      e.preventDefault();
+      this.close();
+    }
+  }
+
+  close() {
+    this.setState({ open: false });
+    this.props.onClose();
+  }
+
+  // eslint-disable-next-line react/no-unused-class-component-methods
+  focus() {
+    if (this.xButton) {
+      this.xButton.focus();
+    }
+  }
+
+  renderDialog() {
+    const { dialog } = this.props;
+
+    return (
+      <div className="alert-dialog">
+        { dialog }
+      </div>
+    );
+  }
+
+  renderDismissible() {
+    const { closeButtonAriaLabel, dismissible } = this.props;
+
+    return (dismissible) ? (
+      <Button.Deprecated
+        aria-label={closeButtonAriaLabel}
+        inputRef={(input) => { this.xButton = input; }}
+        onClick={this.close}
+        onKeyDown={this.handleKeyDown}
+        isClose
+      >
+        <span aria-hidden="true">&times;</span>
+      </Button.Deprecated>
+    ) : null;
+  }
+
+  render() {
+    const { alertType, className, dismissible } = this.props;
+
+    return (
+      <div
+        className={classNames([
+          className,
+          'alert',
+          'fade',
+        ], {
+          'alert-dismissible': dismissible,
+        }, {
+          [`alert-${alertType}`]: alertType !== undefined,
+        }, {
+          show: this.state.open,
+        })}
+        role="alert"
+        hidden={!this.state.open}
+      >
+        {this.renderDismissible()}
+        {this.renderDialog()}
+      </div>
+    );
+  }
+}
+
+StatusAlert.propTypes = {
+  /** specifies the type of alert that is being diplayed. It defaults to "warning".
+   * See the other available [bootstrap](https://react-bootstrap-v4.netlify.app/components/alerts/) options. */
+  alertType: PropTypes.string,
+  /** is a string array that defines the classes to be used within the status alert. */
+  className: PropTypes.string,
+  dialog: PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired,
+  /** specifies if the status alert will include the dismissible X button to close the alert. It defaults to true. */
+  dismissible: PropTypes.bool,
+  /* eslint-disable react/require-default-props */
+  closeButtonAriaLabel: PropTypes.string,
+  /** is a function that is called on close. It can be used to perform actions upon closing of the status alert,
+   * such as restoring focus to the previous logical focusable element.  It is only required if `dismissible`
+   * is set to `true` and not required if the alert is not `dismissible`. */
+  onClose: isRequiredIf(PropTypes.func, props => props.dismissible),
+  /** specifies whether the status alert renders open or closed on the initial render. It defaults to false. */
+  open: PropTypes.bool,
+};
+
+StatusAlert.defaultProps = {
+  alertType: 'warning',
+  className: undefined,
+  closeButtonAriaLabel: 'Close',
+  dismissible: true,
+  open: false,
+};
+
+export default withDeprecatedProps(StatusAlert, 'StatusAlert', {
+  className: {
+    deprType: DeprTypes.FORMAT,
+    expect: value => typeof value === 'string',
+    transform: value => (Array.isArray(value) ? value.join(' ') : value),
+    message: 'It should be a string.',
+  },
+});

package/src/Stepper/_variables.scss

@@ -0,0 +1,18 @@
+$stepper-header-bg:                                       transparent !default;
+$stepper-header-min-height:                               5.13rem !default;
+$stepper-header-padding-y:                                .75rem !default;
+$stepper-header-padding-x:                                $spacer !default;
+$stepper-header-line-bg:                                  $light !default;
+$stepper-header-line-height:                              1px !default;
+$stepper-header-step-color:                               $primary !default;
+$stepper-header-step-bg:                                  $stepper-header-bg !default;
+$stepper-header-step-border:                              none !default;
+$stepper-header-step-min-width:                           0 !default;
+$stepper-header-step-padding:                             .25rem !default;
+$stepper-header-step-list-padding-y:                      .25rem !default;
+$stepper-header-step-list-padding-x:                      0 !default;
+$stepper-header-step-list-margin:                         0 !default;
+$stepper-header-active-step-bg:                           $gray-500 !default;
+$stepper-header-step-error-bubble-color:                  $danger !default;
+$stepper-header-step-error-bubble-shadow-width:           3px !default;
+$stepper-header-step-error-description-color:             $stepper-header-step-error-bubble-color !default;

package/src/Stepper/index.scss

@@ -1,42 +1,43 @@
+@import "variables";
+
 .pgn__stepper-header {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: var(--pgn-color-stepper-header-bg-base);
-  padding: var(--pgn-spacing-stepper-header-padding-y) var(--pgn-spacing-stepper-header-padding-x);
-  min-height: var(--pgn-size-stepper-header-height-min);
+  background: $stepper-header-bg;
+  padding: $stepper-header-padding-y $stepper-header-padding-x;
+  min-height: $stepper-header-min-height;
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-stepper-header-step-list-padding-y) var(--pgn-spacing-stepper-header-step-list-padding-x);
+    padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x;
     display: flex;
     align-items: center;
-    margin: var(--pgn-spacing-stepper-header-step-list-margin);
+    margin: $stepper-header-step-list-margin;
     flex-grow: 1;
     justify-content: center;
 
     .pgn__stepper-header-line {
       display: block;
-      height: var(--pgn-typography-spacer-line-height);
-      background: var(--pgn-color-stepper-header-bg-line);
+      height: $stepper-header-line-height;
+      background: $stepper-header-line-bg;
       flex-basis: 80px;
       margin: 0 .5rem;
     }
 
     button.pgn__stepper-header-step {
-      border: var(--pgn-color-stepper-header-step-border);
-      background-color: var(--pgn-color-stepper-header-bg-base);
+      border: $stepper-header-step-border;
+      background-color: $stepper-header-step-bg;
     }
   }
 
   .pgn__stepper-header-step {
     display: flex;
     align-items: center;
-    color: var(--pgn-color-stepper-header-step-base);
+    color: $stepper-header-step-color;
     flex-shrink: 1;
-    min-width: var(--pgn-size-stepper-step-width-min);
-    padding: var(--pgn-spacing-stepper-header-step-padding);
+    min-width: $stepper-header-step-min-width;
+    padding: $stepper-header-step-padding;
 
     .pgn__bubble {
       margin-inline-end: .5rem;
@@ -55,11 +56,11 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: var(--pgn-typography-font-size-small-x);
+      font-size: $x-small-font-size;
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
-      color: var(--pgn-color-stepper-header-step-bg-active);
+      color: $stepper-header-active-step-bg;
     }
 
     &.pgn__stepper-header-step-has-error {
@@ -67,16 +68,16 @@
         background: transparent;
         box-shadow:
           inset 0 0 0
-          var(--pgn-size-stepper-step-bubble-error-shadow-width)
-          var(--pgn-color-stepper-header-step-bubble-error);
+          $stepper-header-step-error-bubble-shadow-width
+          $stepper-header-step-error-bubble-color;
 
         * {
-          color: var(--pgn-color-stepper-header-step-bubble-error);
+          color: $stepper-header-step-error-bubble-color;
         }
       }
 
       .pgn__stepper-header-step-description {
-        color: var(--pgn-color-stepper-header-step-description-error);
+        color: $stepper-header-step-error-description-color;
       }
     }
   }