@openedx/paragon 22.0.0-alpha.23 → 22.0.0

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;
 }

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/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);
+    });
+  });
+});