@openedx/paragon 22.0.0-alpha.24 → 22.0.0

package/src/Tabs/_variables.scss

@@ -0,0 +1,24 @@
+$tab-notification-height:                                   1rem !default;
+$tab-notification-width:                                    1rem !default;
+$tab-notification-font-size:                                $font-size-xs !default;
+$tab-more-link-dropdown-toggle-padding-x:                   .7rem !default;
+$tab-more-link-dropdown-toggle-padding-y:                   $spacer !default;
+$tab-more-link-dropdown-toggle-focus-bg:                    $primary-500 !default;
+$tab-more-link-dropdown-toggle-focus-border-color:          $tab-more-link-dropdown-toggle-focus-bg !default;
+$tab-more-link-dropdown-toggle-focus-color:                 $white !default;
+$tab-more-link-dropdown-toggle-btn-focus-color:             $tab-more-link-dropdown-toggle-focus-color !default;
+$tab-more-link-dropdown-toggle-btn-focus-border-color:      $tab-more-link-dropdown-toggle-focus-bg !default;
+$tab-more-link-dropdown-toggle-active-color:                $tab-more-link-dropdown-toggle-focus-color !default;
+$tab-more-link-dropdown-toggle-hover-color:                 $tab-more-link-dropdown-toggle-focus-bg !default;
+$tab-inverse-pills-link-dropdown-toggle-padding-x:          .625rem !default;
+$tab-inverse-pills-link-dropdown-toggle-padding-y:          $spacer !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-bg:           $white !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-color:        $primary-500 !default;
+$tab-inverse-pills-link-dropdown-toggle-focus-border-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
+$tab-inverse-pills-link-dropdown-toggle-active-color: $tab-inverse-pills-link-dropdown-toggle-focus-color !default;
+$tab-inverse-pills-link-dropdown-toggle-active-hover-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg !default;
+$tab-inverse-pills-link-dropdown-toggle-active-hover-bg:    $primary-300 !default;
+$tab-inverse-pills-link-dropdown-distance:                  5px !default;
+$tab-inverse-tabs-link-dropdown-toggle-padding-x:           .625rem !default;
+$tab-inverse-tabs-link-dropdown-toggle-padding-y:           $spacer !default;
+$tab-inverse-tabs-link-dropdown-toggle-hover-bg:            transparent !default;

package/src/Tabs/deprecated/Tabs.scss

@@ -0,0 +1,3 @@
+.nav-tabs .nav-link {
+  background: transparent;
+}

package/src/Tabs/deprecated/Tabs.test.jsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { render } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import Tabs from '.';
+
+const props = {
+  labels: [
+    'first',
+    'second',
+    'third',
+  ],
+  children: [
+    <div key="first">first</div>,
+    <div key="second">second</div>,
+    <div key="third">third</div>,
+  ],
+};
+
+const tabSelectedAtIndex = (index, container) => {
+  const tabButtons = container.querySelectorAll('button');
+  const tabPanes = container.querySelectorAll('.tab-pane');
+
+  tabButtons.forEach((node, i) => {
+    expect(node.getAttribute('aria-selected')).toEqual(i === index ? 'true' : 'false');
+  });
+
+  tabPanes.forEach((node, i) => {
+    expect(node.classList.contains('active')).toEqual(i === index);
+  });
+};
+
+describe('<Tabs />', () => {
+  it('renders with first tab selected', () => {
+    const { container } = render(<Tabs {...props} />);
+    tabSelectedAtIndex(0, container);
+  });
+
+  describe('switches tab selection', () => {
+    it('on click', () => {
+      const { container } = render(<Tabs {...props} />);
+      const tabButtons = container.querySelectorAll('button');
+
+      tabButtons.forEach((node, i) => {
+        userEvent.click(node);
+        tabSelectedAtIndex(i, container);
+      });
+    });
+  });
+});

package/src/Tabs/deprecated/index.jsx

@@ -0,0 +1,117 @@
+// TODO: @jaebradley fix these eslint errors
+/* eslint-disable jsx-a11y/click-events-have-key-events */
+/* eslint-disable jsx-a11y/anchor-is-valid */
+/* eslint-disable max-len */
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+
+import newId from '../../utils/newId';
+
+class Tabs extends React.Component {
+  constructor(props) {
+    super(props);
+
+    this.toggle = this.toggle.bind(this);
+    this.state = {
+      activeTab: 0,
+      uuid: newId('tabInterface'),
+    };
+  }
+
+  toggle(tab) {
+    if (this.state.activeTab !== tab) {
+      this.setState({
+        activeTab: tab,
+      });
+    }
+  }
+
+  genLabelId(index) {
+    return `tab-label-${this.state.uuid}-${index}`;
+  }
+
+  genPanelId(index) {
+    return `tab-panel-${this.state.uuid}-${index}`;
+  }
+
+  buildLabels() {
+    return this.props.labels.map((label, i) => {
+      const selected = this.state.activeTab === i;
+      const labelId = this.genLabelId(i);
+
+      return (
+        <li key={labelId}>
+          {/* eslint-disable-next-line react/button-has-type */}
+          <button
+            role="tab"
+            aria-selected={selected}
+            aria-controls={this.genPanelId(i)}
+            id={labelId}
+            onClick={() => { this.toggle(i); }}
+            className={classNames('nav-link nav-item', {
+              active: selected,
+            })}
+          >
+            {label}
+          </button>
+        </li>
+      );
+    });
+  }
+
+  buildPanels() {
+    return this.props.children.map((panel, i) => {
+      const selected = this.state.activeTab === i;
+      const panelId = this.genPanelId(i);
+
+      return (
+        <div
+          aria-hidden={!selected}
+          aria-labelledby={this.genLabelId(i)}
+          className={classNames(
+            'tab-pane',
+            { active: selected },
+          )}
+          id={panelId}
+          key={panelId}
+          role="tabpanel"
+        >
+          {panel}
+        </div>
+      );
+    });
+  }
+
+  render() {
+    const labels = this.buildLabels();
+    const panels = this.buildPanels();
+
+    return (
+      <div className="tabs">
+        <ul
+          role="tablist"
+          className={classNames([
+            'nav',
+            'nav-tabs',
+          ])}
+        >
+          {labels}
+        </ul>
+        <div role="tabpanel" className="tab-content">
+          {panels}
+        </div>
+      </div>
+    );
+  }
+}
+// TODO: custom validator that ensures labels and panels are the same length
+Tabs.propTypes = {
+  /** specifies the list of elements that will be displayed within each of the tabbed views.  It is the content relevant to each label. Children should not be passed as Props, but should instead be nested between the opening and closing `<Tabs> </Tabs>` tags. */
+  labels: PropTypes.arrayOf(PropTypes.node).isRequired,
+  /** specifies the list of headings that will appear on all of the tabs that will be created.
+ */
+  children: PropTypes.arrayOf(PropTypes.element).isRequired,
+};
+
+export default Tabs;

package/src/Tabs/index.jsx

@@ -8,6 +8,7 @@ import React, {
 import classNames from 'classnames';
 import PropTypes from 'prop-types';
 import BaseTabs from 'react-bootstrap/Tabs';
+import TabsDeprecated from './deprecated';
 import Bubble from '../Bubble';
 import Dropdown from '../Dropdown';
 import useIndexOfLastVisibleChild from '../hooks/useIndexOfLastVisibleChild';
@@ -209,6 +210,8 @@ Tabs.defaultProps = {
   activeKey: undefined,
 };
 
+Tabs.Deprecated = TabsDeprecated;
+
 export default Tabs;
 export { Tab };
 export { default as TabContainer } from 'react-bootstrap/TabContainer';

package/src/Tabs/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__tabs {
   flex-wrap: nowrap;
 
@@ -9,9 +11,9 @@
     position: absolute;
     top: 0;
     right: 0;
-    min-height: var(--pgn-size-tabs-notification-height);
-    min-width: var(--pgn-size-tabs-notification-width);
-    font-size: var(--pgn-typography-tabs-notification-font-size);
+    min-height: $tab-notification-height;
+    min-width: $tab-notification-width;
+    font-size: $tab-notification-font-size;
   }
 
   .pgn__tab_more.nav-link {
@@ -30,29 +32,28 @@
       margin: 0;
 
       .dropdown .dropdown-toggle {
-        // stylelint-disable-next-line max-line-length
-        padding: var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
+        padding: $tab-more-link-dropdown-toggle-padding-x $tab-more-link-dropdown-toggle-padding-y;
 
         &:focus {
-          background-color: var(--pgn-color-tab-more-link-dropdown-toggle-bg-focus);
-          border-color: var(--pgn-color-tab-more-link-dropdown-toggle-border-focus);
-          color: var(--pgn-color-tab-more-link-dropdown-toggle-text-focus);
+          background-color: $tab-more-link-dropdown-toggle-focus-bg;
+          border-color: $tab-more-link-dropdown-toggle-focus-border-color;
+          color: $tab-more-link-dropdown-toggle-focus-color;
 
           &.btn.btn-link {
-            color: var(--pgn-color-tab-more-link-dropdown-toggle-btn-text-focus);
-            border-color: var(--pgn-color-tab-more-link-dropdown-toggle-btn-border-focus);
+            color: $tab-more-link-dropdown-toggle-btn-focus-color;
+            border-color: $tab-more-link-dropdown-toggle-btn-focus-border-color;
           }
         }
       }
 
       &.active {
         .dropdown .dropdown-toggle {
-          color: var(--pgn-color-tab-more-link-dropdown-toggle-text-active);
+          color: $tab-more-link-dropdown-toggle-active-color;
         }
 
         &:hover {
           .dropdown .dropdown-toggle {
-            background-color: var(--pgn-color-tab-more-link-dropdown-toggle-text-hover);
+            background-color: $tab-more-link-dropdown-toggle-hover-color;
           }
         }
       }
@@ -62,29 +63,28 @@
   // Nav inverse pills
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
-      // stylelint-disable-next-line max-line-length
-      padding: var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
+      padding: $tab-inverse-pills-link-dropdown-toggle-padding-x $tab-inverse-pills-link-dropdown-toggle-padding-y;
       border: none;
 
       &:focus {
-        background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-focus);
-        color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-focus);
+        background-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg;
+        color: $tab-inverse-pills-link-dropdown-toggle-focus-color;
       }
     }
 
     &.active .dropdown .dropdown-toggle {
-      color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active);
+      color: $tab-inverse-pills-link-dropdown-toggle-active-color;
 
       &:hover {
-        color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active-hover);
-        background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-active-hover);
+        color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color;
+        background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg;
       }
 
       &:focus {
         @include nav-tabs-link-focus(
-          var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-border-focus),
-          var(--pgn-size-nav-tabs-border-radius),
-          var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-distance)
+          $tab-inverse-pills-link-dropdown-toggle-focus-border-color,
+          $nav-tabs-border-radius,
+          $tab-inverse-pills-link-dropdown-distance
         );
       }
     }
@@ -92,16 +92,15 @@
 
   // Nav tabs
   &.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    padding: .563rem var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
+    padding: .563rem $tab-more-link-dropdown-toggle-padding-y;
   }
 
   // Nav inverse tabs
   &.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    // stylelint-disable-next-line max-line-length
-    padding: var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x) var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
+    padding: $tab-inverse-tabs-link-dropdown-toggle-padding-x $tab-inverse-tabs-link-dropdown-toggle-padding-y;
 
     &:hover {
-      background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover);
+      background-color: $tab-inverse-tabs-link-dropdown-toggle-hover-bg;
     }
   }
 

package/src/TextArea/README.md

@@ -0,0 +1,63 @@
+---
+title: 'TextArea'
+type: 'component'
+components:
+- TextArea
+categories:
+- Forms (deprecated)
+status: 'Deprecate Soon'
+designStatus: 'TBD'
+devStatus: 'To Do'
+notes: |
+  Replaced by Form.Control
+---
+
+## Minimal usage
+
+```jsx live
+<TextArea
+  name="name"
+  label="First Name"
+  value="Foo Bar"
+/>
+```
+
+## Scrollable
+
+```jsx live
+<TextArea
+  name="name"
+  label="Information"
+  value="Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
+/>
+```
+
+## Validation
+
+```jsx live
+<TextArea
+  name="username"
+  label="Username"
+  description="The unique name that identifies you throughout the site."
+  validator={value => {
+    let feedback = { isValid: true };
+    if (value.length < 3) {
+      feedback = {
+        isValid: false,
+        validationMessage: 'Username must be at least 3 characters in length.',
+      };
+    }
+    return feedback;
+  }}
+/>
+```
+
+## Label as element
+
+```jsx live
+<TextArea
+  name="username"
+  label={<span lang="en">Element</span>}
+  value="Label is wrapped in language span"
+/>
+```

package/src/TextArea/index.jsx

@@ -0,0 +1,48 @@
+/* eslint-disable max-len */
+import React from 'react';
+import PropTypes from 'prop-types';
+
+import asInput from '../asInput';
+import withDeprecatedProps, { DeprTypes } from '../withDeprecatedProps';
+
+function Text(props) {
+  const {
+    className,
+    inputRef,
+    ...others
+  } = props;
+
+  return (
+    <textarea
+      {...others}
+      className={className}
+      ref={inputRef}
+    />
+  );
+}
+
+Text.propTypes = {
+  className: PropTypes.string,
+  /** specifies all of the properties that are necessary from the included `asInput` component.  Please see details for input requirements within that component.
+  */
+  inputRef: PropTypes.oneOfType([
+    PropTypes.func,
+    PropTypes.shape({ current: PropTypes.instanceOf(PropTypes.element) }),
+  ]),
+};
+
+Text.defaultProps = {
+  className: undefined,
+  inputRef: undefined,
+};
+
+const TextArea = asInput(withDeprecatedProps(Text, 'TextArea', {
+  className: {
+    deprType: DeprTypes.FORMAT,
+    expect: value => typeof value === 'string',
+    transform: value => (Array.isArray(value) ? value.join(' ') : value),
+    message: 'It should be a string.',
+  },
+}));
+
+export default TextArea;

package/src/Toast/ToastContainer.scss

@@ -1,22 +1,24 @@
+@import "variables";
+
 .toast-container {
-  bottom: var(--pgn-spacing-toast-container-gutter-lg);
-  left: var(--pgn-spacing-toast-container-gutter-lg);
+  bottom: $toast-container-gutter-lg;
+  left: $toast-container-gutter-lg;
   position: fixed;
   z-index: 2;
 
   [dir="rtl"] & {
-    right: var(--pgn-spacing-toast-container-gutter-lg);
+    right: $toast-container-gutter-lg;
     left: 0;
   }
 
-  @media (--pgn-size-breakpoint-max-width-sm) {
-    bottom: var(--pgn-spacing-toast-container-gutter-sm);
-    right: var(--pgn-spacing-toast-container-gutter-sm);
-    left: var(--pgn-spacing-toast-container-gutter-sm);
+  @media only screen and (max-width: 768px) {
+    bottom: $toast-container-gutter-sm;
+    right: $toast-container-gutter-sm;
+    left: $toast-container-gutter-sm;
 
     [dir="rtl"] & {
-      left: var(--pgn-spacing-toast-container-gutter-sm);
-      right: var(--pgn-spacing-toast-container-gutter-sm);
+      left: $toast-container-gutter-sm;
+      right: $toast-container-gutter-sm;
     }
   }
 }

package/src/Toast/_variables.scss

@@ -0,0 +1,19 @@
+// Toasts
+
+$toast-max-width:                   400px !default;
+$toast-padding-x:                   .75rem !default;
+$toast-padding-y:                   .25rem !default;
+$toast-font-size:                   .875rem !default;
+$toast-color:                       null !default;
+$toast-background-color:            $gray-700 !default;
+$toast-border-width:                1px !default;
+$toast-border-color:                rgba(0, 0, 0, .1) !default;
+$toast-border-radius:               .25rem !default;
+$toast-box-shadow:                  0 1.25rem 2.5rem rgba($black, .15), 0 .5rem 3rem rgba($black, .15) !default;
+
+$toast-header-color:                $white !default;
+$toast-header-background-color:     $gray-700 !default;
+$toast-header-border-color:         rgba(0, 0, 0, .5) !default;
+
+$toast-container-gutter-lg:         1.25rem !default;
+$toast-container-gutter-sm:         .625rem !default;

package/src/Toast/index.scss

@@ -1,12 +1,13 @@
-@import "bootstrap-toast";
+@import "variables";
+@import "~bootstrap/scss/toasts";
 
 .toast {
-  background-color: var(--pgn-color-toast-bg);
-  box-shadow: var(--pgn-elevation-toast-box-shadow);
+  background-color: $toast-background-color;
+  box-shadow: $toast-box-shadow;
   margin: 0;
   padding: 1rem;
   position: relative;
-  border-radius: var(--pgn-size-toast-border-radius);
+  border-radius: $toast-border-radius;
   z-index: 2;
 
   &.show {
@@ -31,7 +32,7 @@
     padding: 0;
 
     p {
-      font-size: var(--pgn-typography-font-size-small-base);
+      font-size: $small-font-size;
       margin: 0;
       padding-right: .75rem;
     }
@@ -41,12 +42,12 @@
     }
   }
 
-  @media (--pgn-size-breakpoint-max-width-sm) {
+  @media only screen and (max-width: 768px) {
     max-width: 100%;
   }
 
-  @media (--pgn-size-breakpoint-min-width-md) {
-    min-width: var(--pgn-size-toast-max-width);
-    max-width: var(--pgn-size-toast-max-width);
+  @media only screen and (min-width: 768px) {
+    min-width: $toast-max-width;
+    max-width: $toast-max-width;
   }
 }

package/src/Tooltip/_variables.scss

@@ -0,0 +1,21 @@
+// Tooltips
+
+$tooltip-font-size:                 $font-size-sm !default;
+$tooltip-max-width:                 200px !default;
+$tooltip-color:                     $white !default;
+$tooltip-bg:                        $black !default;
+$tooltip-border-radius:             $border-radius !default;
+$tooltip-opacity:                   1 !default;
+$tooltip-padding-y:                 .5rem !default;
+$tooltip-padding-x:                 .5rem !default;
+$tooltip-margin:                    0 !default;
+$tooltip-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+
+$tooltip-arrow-width:               .8rem !default;
+$tooltip-arrow-height:              .4rem !default;
+$tooltip-arrow-color:               $tooltip-bg !default;
+
+$tooltip-color-light:               $black !default;
+$tooltip-bg-light:                  $white !default;
+$tooltip-arrow-color-light:         $white !default;