@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/ValidationFormGroup/index.jsx

@@ -0,0 +1,114 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Input from '../Input';
+import { FormControl } from '../Form';
+
+const propTypes = {
+  /** Id of the form input that the validation is for */
+  for: PropTypes.string.isRequired,
+  /** Additional classnames for this component */
+  className: PropTypes.string,
+  /** Determines if invalid styles / message will be shown */
+  invalid: PropTypes.bool,
+  /** Determines if invalid styles / message will be shown */
+  valid: PropTypes.bool,
+  /** Message to display on valid input */
+  validMessage: PropTypes.node,
+  /** Message to display on invalid input */
+  invalidMessage: PropTypes.node,
+  /** Help text for the form input */
+  helpText: PropTypes.node,
+  /** Specifies contents of the component. */
+  children: PropTypes.node,
+};
+
+const defaultProps = {
+  invalid: undefined,
+  valid: undefined,
+  validMessage: undefined,
+  invalidMessage: undefined,
+  helpText: undefined,
+  children: undefined,
+  className: undefined,
+};
+
+function ValidationFormGroup(props) {
+  const {
+    className,
+    invalidMessage,
+    invalid,
+    valid,
+    validMessage,
+    helpText,
+    for: id,
+    children,
+  } = props;
+
+  const renderChildren = () => React.Children.map(children, (child) => {
+    // Any non-user input element should pass through unmodified
+    if (['input', 'textarea', 'select', Input, FormControl].indexOf(child.type) === -1) { return child; }
+
+    // Add validation class names and describedby values to input element
+    return React.cloneElement(child, {
+      className: classNames(child.props.className, {
+        'is-invalid': invalid,
+        'is-valid': valid,
+      }),
+      // This is a non-standard use of the classNames package, but it's exactly the same use case.
+      'aria-describedby': classNames(child.props['aria-describedby'], {
+        [`${id}-help-text`]: Boolean(helpText),
+        [`${id}-invalid-feedback`]: invalid && invalidMessage,
+        [`${id}-valid-feedback`]: valid && validMessage,
+      }),
+    });
+  });
+
+  const renderHelpText = (text) => {
+    if (!text) { return null; }
+    return <small id={`${id}-help-text`} className="form-text text-muted">{text}</small>;
+  };
+
+  /**
+   * The red text conveys semantic emphasis using color and font weight. For WCAG 2.1, the
+   * semantics need to be exposed programmatically as well. To do this, we use <strong/>
+   * elements and attach the formatting classes to them.
+   */
+  const renderInvalidFeedback = (message) => {
+    if (!message) { return null; }
+    return (
+      <strong
+        id={`${id}-invalid-feedback`}
+        className="invalid-feedback"
+      >
+        {message}
+      </strong>
+    );
+  };
+
+  const renderValidFeedback = (message) => {
+    if (!message) { return null; }
+    return (
+      <div
+        className="valid-feedback"
+        id={`${id}-valid-feedback`}
+      >
+        {message}
+      </div>
+    );
+  };
+
+  return (
+    <div className={classNames('form-group', className)} data-testid="validation-form-group">
+      {renderChildren()}
+      {renderHelpText(helpText)}
+      {renderInvalidFeedback(invalidMessage)}
+      {renderValidFeedback(validMessage)}
+    </div>
+  );
+}
+
+ValidationFormGroup.propTypes = propTypes;
+ValidationFormGroup.defaultProps = defaultProps;
+
+export default ValidationFormGroup;

package/src/ValidationMessage/index.scss

@@ -1,5 +1,5 @@
 .form-control.is-invalid ~ .invalid-feedback-nodanger {
-  color: var(--pgn-color-body-base);
+  color: $body-color;
 }
 
 .fa-icon-spacing {

package/src/index.js

@@ -20,6 +20,8 @@ export {
 export {
   default as Carousel, CarouselItem, CAROUSEL_NEXT_LABEL_TEXT, CAROUSEL_PREV_LABEL_TEXT,
 } from './Carousel';
+export { default as CheckBox } from './CheckBox';
+export { default as CheckBoxGroup } from './CheckBoxGroup';
 export { default as Chip, CHIP_PGN_CLASS } from './Chip';
 export { default as ChipCarousel } from './ChipCarousel';
 export { default as CloseButton } from './CloseButton';
@@ -35,6 +37,7 @@ export {
   SplitButton,
 } from './Dropdown';
 export { default as Fade } from './Fade';
+export { default as Fieldset } from './Fieldset';
 export {
   default as Form,
   RadioControl,
@@ -61,12 +64,18 @@ export { default as Hyperlink, HYPER_LINK_EXTERNAL_LINK_ALT_TEXT, HYPER_LINK_EXT
 export { default as Icon } from './Icon';
 export { default as IconButton, IconButtonWithTooltip } from './IconButton';
 export { default as IconButtonToggle } from './IconButtonToggle';
+export { default as Input } from './Input';
+export { default as InputSelect } from './InputSelect';
+export { default as InputText } from './InputText';
 export { default as Image, Figure } from './Image';
+export { default as ListBox } from './ListBox';
+export { default as ListBoxOption } from './ListBoxOption';
 export { default as MailtoLink, MAIL_TO_LINK_EXTERNAL_LINK_ALTERNATIVE_TEXT, MAIL_TO_LINK_EXTERNAL_LINK_TITLE } from './MailtoLink';
 export { default as Media } from './Media';
 export { default as Menu } from './Menu';
 export { default as MenuItem } from './Menu/MenuItem';
 export { default as SelectMenu, SELECT_MENU_DEFAULT_MESSAGE } from './Menu/SelectMenu';
+export { default as Modal } from './Modal';
 export { default as ModalCloseButton } from './Modal/ModalCloseButton';
 export { default as FullscreenModal, FULLSCREEN_MODAL_CLOSE_LABEL } from './Modal/FullscreenModal';
 export { default as MarketingModal } from './Modal/MarketingModal';
@@ -101,6 +110,7 @@ export {
 export { default as Popover, PopoverTitle, PopoverContent } from './Popover';
 export { default as ProgressBar } from './ProgressBar';
 export { default as ProductTour } from './ProductTour';
+export { default as RadioButtonGroup, RadioButton } from './RadioButtonGroup';
 export { default as ResponsiveEmbed } from './ResponsiveEmbed';
 export {
   default as SearchField,
@@ -113,6 +123,8 @@ export { default as Sheet } from './Sheet';
 export { default as Spinner } from './Spinner';
 export { default as Stepper } from './Stepper';
 export { default as StatefulButton } from './StatefulButton';
+export { default as StatusAlert } from './StatusAlert';
+export { default as Table } from './Table';
 export {
   default as Tabs,
   Tab,
@@ -120,8 +132,10 @@ export {
   TabContent,
   TabPane,
 } from './Tabs';
+export { default as TextArea } from './TextArea';
 export { default as Toast, TOAST_CLOSE_LABEL_TEXT, TOAST_DELAY } from './Toast';
 export { default as Tooltip } from './Tooltip';
+export { default as ValidationFormGroup } from './ValidationFormGroup';
 export { default as TransitionReplace } from './TransitionReplace';
 export { default as ValidationMessage } from './ValidationMessage';
 export { default as DataTable } from './DataTable';

package/src/index.scss

@@ -14,6 +14,7 @@
 @import "./ChipCarousel";
 @import "./Code";
 @import "./Dropdown";
+@import "./Fieldset";
 @import "./Figure";
 @import "./Form";
 @import "./Hyperlink";
@@ -28,6 +29,7 @@
 @import "./Pagination";
 @import "./Popover";
 @import "./ProgressBar";
+@import "./OverflowScroll";
 @import "./SearchField";
 @import "./Scrollable";
 @import "./Sheet";
@@ -35,10 +37,12 @@
 @import "./Spinner";
 @import "./Stepper";
 @import "./StatefulButton";
+@import "./Table";
 @import "./Tooltip";
 @import "./DataTable";
 @import "./TransitionReplace";
 @import "./ValidationMessage";
+@import "./Tabs/deprecated/Tabs";
 @import "./IconButton";
 @import "./IconButtonToggle";
 @import "./Toast";

package/src/utils/breakpoints.js

@@ -1,4 +1,4 @@
-import breakpointSizes from '../../styles/scss/core/_exports.module.scss';
+import breakpointSizes from '../../scss/core/_exports.module.scss';
 
 const {
   sm, md, lg, xl, xxl,

package/src/utils/propTypes/utils.js

@@ -22,6 +22,16 @@ export const customPropTypeRequirement = (targetType, conditionFn, filterString)
   }
 );
 
+/**
+ * Checks if all specified properties are defined in the `props` object.
+ *
+ * @param {Object} props - The object in which the properties are checked.
+ * @param {string[]} otherPropNames - An array of strings representing the property names to be checked.
+ * @returns {boolean} `true` if all properties are defined and not equal to `undefined`, `false` otherwise.
+ */
+export const isEveryPropDefined = (props, otherPropNames) => otherPropNames
+  .every(propName => props[propName] !== undefined);
+
 /**
  * Returns a PropType entry with the given propType that is required if otherPropName
  * is truthy.
@@ -34,8 +44,13 @@ export const customPropTypeRequirement = (targetType, conditionFn, filterString)
 export const requiredWhen = (propType, otherPropName) => (
   customPropTypeRequirement(
     propType,
-    (props) => props[otherPropName] === true,
-    `${otherPropName} is truthy`,
+    (props) => {
+      if (Array.isArray(otherPropName)) {
+        return isEveryPropDefined(props, otherPropName);
+      }
+      return props[otherPropName] === true;
+    },
+    `${otherPropName} ${Array.isArray(otherPropName) ? 'are defined' : 'is truthy'}`,
   )
 );
 

package/dist/Annotation/_mixins.scss

@@ -1,104 +0,0 @@
-@mixin annotation-triangle($triangle-color, $triangle-direction) {
-  content: "";
-  height: 0;
-  width: 0;
-  position: absolute;
-  border: solid transparent;
-
-  @if $triangle-direction == top {
-    border-bottom-color: $triangle-color;
-    border-width: 0 var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width);
-    right: 0;
-    left: 0;
-    top: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: 0 auto;
-  }
-
-  @else if $triangle-direction == right {
-    border-left-color: $triangle-color;
-    border-width:
-      var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width)
-      var(--pgn-size-annotation-arrow-border-width);
-    top: 0;
-    bottom: 0;
-    right: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: auto 0;
-  }
-
-  @else if $triangle-direction == bottom {
-    border-top-color: $triangle-color;
-    border-width: var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width) 0;
-    right: 0;
-    left: 0;
-    bottom: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: 0 auto;
-  }
-
-  @else if $triangle-direction == left {
-    border-right-color: $triangle-color;
-    border-width:
-      var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width)
-      var(--pgn-size-annotation-arrow-border-width) 0;
-    top: 0;
-    bottom: 0;
-    left: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-    margin: auto 0;
-  }
-
-  @else {
-    @error "Unknown direction #{$triangle-direction}.";
-  }
-}
-
-@mixin annotation-variant($bg-color, $text-color, $direction) {
-  background-color: $bg-color;
-  color: $text-color;
-
-  // set additional margin to arrow side of the Annotation
-  margin-#{$direction}:
-    calc(
-      var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
-    );
-
-  [dir="rtl"] & {
-    @if $direction == left {
-      margin-left: 0;
-      margin-right:
-        calc(
-          var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
-        );
-    }
-
-    @else if $direction == right {
-      margin-right: 0;
-      margin-left:
-        calc(
-          var(--pgn-size-annotation-arrow-border-width) + var(--pgn-spacing-annotation-arrow-side-margin)
-        );
-    }
-  }
-
-  &::after {
-    @include annotation-triangle($bg-color, $direction);
-
-    [dir="rtl"] & {
-      @if $direction == left {
-        left: initial;
-        right: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-        border-width:
-          var(--pgn-size-annotation-arrow-border-width) 0 var(--pgn-size-annotation-arrow-border-width)
-          var(--pgn-size-annotation-arrow-border-width);
-        border-left-color: $bg-color;
-      }
-
-      @else if $direction == right {
-        right: initial;
-        left: calc(var(--pgn-size-annotation-arrow-border-width) * -1);
-        border-width:
-          var(--pgn-size-annotation-arrow-border-width) var(--pgn-size-annotation-arrow-border-width)
-          var(--pgn-size-annotation-arrow-border-width) 0;
-        border-right-color: $bg-color;
-      }
-    }
-  }
-}

package/dist/Button/_mixins.scss

@@ -1,14 +0,0 @@
-// OVERRIDE FROM BOOTSTRAP
-// No changes made. We do this to keep all button related mixins together,
-//
-// Button sizes
-@mixin button-size($padding-y, $padding-x, $font-size, $line-height, $button-border-radius) {
-  padding: $padding-y $padding-x;
-
-  @include font-size($font-size);
-
-  line-height: $line-height;
-
-  // Manually declare to provide an override to the browser default
-  @include border-radius($button-border-radius, 0);
-}

package/dist/Button/button-group.scss

@@ -1,126 +0,0 @@
-.btn-group,
-.btn-group-vertical {
-  position: relative;
-  display: inline-flex;
-  vertical-align: middle;
-
-  > .btn {
-    position: relative;
-    flex: 1 1 auto;
-
-    &:hover {
-      z-index: 1;
-    }
-
-    &:focus,
-    &:active,
-    &.active {
-      z-index: 1;
-    }
-  }
-}
-
-.btn-toolbar {
-  display: flex;
-  flex-wrap: wrap;
-  justify-content: flex-start;
-
-  .input-group {
-    width: auto;
-  }
-}
-
-.btn-group {
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) {
-    margin-left: calc(var(--pgn-size-btn-border-width) * -1);
-  }
-
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-right-radius(0);
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
-    @include border-left-radius(0);
-  }
-}
-
-/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-.btn-group-sm > .btn { @extend .btn-sm; }
-/* stylelint-disable-next-line scss/at-extend-no-missing-placeholder */
-.btn-group-lg > .btn { @extend .btn-lg; }
-
-.dropdown-toggle-split {
-  padding-right: calc(var(--pgn-spacing-btn-padding-x-base) * .75);
-  padding-left: calc(var(--pgn-spacing-btn-padding-x-base) * .75);
-
-  &::after,
-  .dropup &::after,
-  .dropright &::after {
-    margin-left: 0;
-  }
-
-  .dropleft &::before {
-    margin-right: 0;
-  }
-}
-
-.btn-sm + .dropdown-toggle-split {
-  padding-right: calc(var(--pgn-spacing-btn-padding-x-sm) * .75);
-  padding-left: calc(var(--pgn-spacing-btn-padding-x-sm) * .75);
-}
-
-.btn-lg + .dropdown-toggle-split {
-  padding-right: calc(var(--pgn-spacing-btn-padding-x-lg) * .75);
-  padding-left: calc(var(--pgn-spacing-btn-padding-x-lg) * .75);
-}
-
-.btn-group.show .dropdown-toggle {
-  box-shadow: var(--pgn-elevation-btn-box-shadow-active);
-
-  &.btn-link {
-    box-shadow: none;
-  }
-}
-
-.btn-group-vertical {
-  flex-direction: column;
-  align-items: flex-start;
-  justify-content: center;
-
-  > .btn,
-  > .btn-group {
-    width: 100%;
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) {
-    margin-top: calc(var(--pgn-size-btn-border-width) * -1);
-  }
-
-  > .btn:not(:last-child):not(.dropdown-toggle),
-  > .btn-group:not(:last-child) > .btn {
-    @include border-bottom-radius(0);
-  }
-
-  > .btn:not(:first-child),
-  > .btn-group:not(:first-child) > .btn {
-    @include border-top-radius(0);
-  }
-}
-
-.btn-group-toggle {
-  > .btn,
-  > .btn-group > .btn {
-    margin-bottom: 0;
-
-    input[type="radio"],
-    input[type="checkbox"] {
-      position: absolute;
-      clip: rect(0, 0, 0, 0);
-      pointer-events: none;
-    }
-  }
-}

package/dist/Card/card-bootstrap.scss

@@ -1,168 +0,0 @@
-.card {
-  display: flex;
-  flex-direction: column;
-  min-width: 0;
-  word-wrap: break-word;
-  background-color: var(--pgn-color-card-bg-base);
-  background-clip: border-box;
-  border: var(--pgn-size-card-border-width) solid var(--pgn-color-card-border-base);
-  position: relative;
-
-  @include border-radius(calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)));
-
-  > hr {
-    margin-right: 0;
-    margin-left: 0;
-  }
-
-  > .list-group {
-    border-top: inherit;
-    border-bottom: inherit;
-
-    &:first-child {
-      border-top-width: 0;
-
-      @include border-top-radius(
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
-      );
-    }
-
-    &:last-child {
-      border-bottom-width: 0;
-
-      @include border-bottom-radius(
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
-      );
-    }
-  }
-
-  > .card-header + .list-group,
-  > .list-group + .card-footer {
-    border-top: 0;
-  }
-}
-
-.card-body {
-  flex: 1 1 auto;
-  min-height: 1px;
-  padding: var(--pgn-spacing-card-spacer-x);
-  color: var(--pgn-color-card-base);
-}
-
-// Card deck
-.card-deck {
-  .card {
-    margin-bottom: var(--pgn-spacing-card-margin-deck);
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-    margin-right: calc(var(--pgn-spacing-card-margin-deck) * -1);
-    margin-left: calc(var(--pgn-spacing-card-margin-deck) * -1);
-
-    .card {
-      flex: 1 0 0%;
-      margin-right: var(--pgn-spacing-card-margin-deck);
-      margin-bottom: 0; // Override the default
-      margin-left: var(--pgn-spacing-card-margin-deck);
-    }
-  }
-}
-
-// Card groups
-.card-group {
-  > .card {
-    margin-bottom: var(--pgn-spacing-card-margin-group);
-  }
-
-  @include media-breakpoint-up(sm) {
-    display: flex;
-    flex-flow: row wrap;
-
-    > .card {
-      flex: 1 0 0%;
-      margin-bottom: 0;
-
-      + .card {
-        margin-left: 0;
-        border-left: 0;
-      }
-
-      // Handle rounded corners
-      @if $enable-rounded {
-        &:not(:last-child) {
-          @include border-right-radius(0);
-
-          .card-img-top,
-          .card-header {
-            border-top-right-radius: 0;
-          }
-
-          .card-img-bottom,
-          .card-footer {
-            border-bottom-right-radius: 0;
-          }
-        }
-
-        &:not(:first-child) {
-          @include border-left-radius(0);
-
-          .card-img-top,
-          .card-header {
-            border-top-left-radius: 0;
-          }
-
-          .card-img-bottom,
-          .card-footer {
-            border-bottom-left-radius: 0;
-          }
-        }
-      }
-    }
-  }
-}
-
-// Columns
-.card-columns {
-  .card {
-    margin-bottom: var(--pgn-spacing-card-columns-margin);
-  }
-
-  @include media-breakpoint-up(sm) {
-    column-count: var(--pgn-spacing-card-columns-count);
-    column-gap: var(--pgn-spacing-card-columns-gap);
-    orphans: 1;
-    widows: 1;
-
-    .card {
-      display: inline-block;
-      width: 100%;
-    }
-  }
-}
-
-// Accordion
-.accordion {
-  overflow-anchor: none;
-
-  > .card {
-    overflow: hidden;
-
-    &:not(:last-of-type) {
-      border-bottom: 0;
-
-      @include border-bottom-radius(0);
-    }
-
-    &:not(:first-of-type) {
-      @include border-top-radius(0);
-    }
-
-    > .card-header {
-      @include border-radius(0);
-
-      margin-bottom: calc(var(--pgn-size-card-border-width) * -1);
-    }
-  }
-}