@openedx/paragon 22.0.0-alpha.23 → 22.0.0

package/src/Popover/README.md

@@ -3,7 +3,6 @@ title: 'Popover'
 type: 'component'
 components:
 - Popover
-- WrapperPopover
 - PopoverTitle
 - PopoverContent
 categories:

package/src/Popover/_variables.scss

@@ -0,0 +1,36 @@
+// Popovers
+
+$popover-font-size:                 $font-size-sm !default;
+$popover-bg:                        $white !default;
+$popover-max-width:                 480px !default;
+$popover-border-width:              $border-width !default;
+$popover-border-color:              rgba($black, .2) !default;
+$popover-border-radius:             $border-radius-sm !default;
+$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width) !default;
+$popover-box-shadow:                drop-shadow(0 2px 4px rgba(0, 0, 0, .15))
+  drop-shadow(0 2px 8px rgba(0, 0, 0, .15)) !default;
+$popover-icon-margin-right:         .5rem;
+$popover-icon-height:               1rem;
+$popover-icon-width:                1rem;
+
+$popover-header-bg:                 $white !default;
+$popover-header-color:              $headings-color !default;
+$popover-header-padding-y:          .5rem !default;
+$popover-header-padding-x:          1rem !default;
+
+$popover-body-color:                $body-color !default;
+$popover-body-padding-y:            $popover-header-padding-y !default;
+$popover-body-padding-x:            $popover-header-padding-x !default;
+
+$popover-arrow-width:               1rem !default;
+$popover-arrow-height:              .5rem !default;
+$popover-arrow-color:               $popover-bg !default;
+
+$popover-arrow-outer-color:         fade-in($popover-border-color, .05) !default;
+
+$popover-success-bg:                $success-100 !default;
+$popover-success-icon-color:        $success-500 !default;
+$popover-warning-bg:                $warning-100 !default;
+$popover-warning-icon-color:        $warning-500 !default;
+$popover-danger-bg:                 $danger-100 !default;
+$popover-danger-icon-color:         $danger-500 !default;

package/src/Popover/index.jsx

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
-import Popover from 'react-bootstrap/Popover';
+import BasePopover from 'react-bootstrap/Popover';
 import BasePopoverTitle from 'react-bootstrap/PopoverTitle';
 import BasePopoverContent from 'react-bootstrap/PopoverContent';
 
@@ -13,18 +13,18 @@ const PLACEMENT_VARIANTS = [
   'right',
 ];
 
-const WrapperPopover = React.forwardRef(({
+const Popover = React.forwardRef(({
   children,
   variant,
   ...props
 }, ref) => (
-  <Popover
+  <BasePopover
     {...props}
     className={classNames({ [`popover-${variant}`]: !!variant }, props.className)}
     ref={ref}
   >
     {children}
-  </Popover>
+  </BasePopover>
 ));
 
 function PopoverTitle(props) {
@@ -44,8 +44,8 @@ const commonPropTypes = {
 PopoverTitle.propTypes = commonPropTypes;
 PopoverContent.propTypes = commonPropTypes;
 
-WrapperPopover.propTypes = {
-  ...Popover.propTypes,
+Popover.propTypes = {
+  ...BasePopover.propTypes,
   /** An html id attribute, necessary for accessibility. */
   id: PropTypes.string.isRequired,
   /**
@@ -88,8 +88,8 @@ WrapperPopover.propTypes = {
   variant: PropTypes.string,
 };
 
-WrapperPopover.defaultProps = {
-  ...Popover.defaultProps,
+Popover.defaultProps = {
+  ...BasePopover.defaultProps,
   placement: 'right',
   title: undefined,
   arrowProps: undefined,
@@ -111,8 +111,8 @@ PopoverContent.defaultProps = {
   bsPrefix: 'popover-body',
 };
 
-WrapperPopover.Title = PopoverTitle;
-WrapperPopover.Content = PopoverContent;
+Popover.Title = PopoverTitle;
+Popover.Content = PopoverContent;
 
 export { PopoverTitle, PopoverContent };
-export default WrapperPopover;
+export default Popover;

package/src/Popover/index.scss

@@ -1,30 +1,31 @@
+@import "variables";
 @import "mixins";
-@import "popover-bootstrap";
+@import "~bootstrap/scss/popover";
 
 .popover {
-  filter: var(--pgn-elevation-popover-box-shadow);
+  filter: $popover-box-shadow;
 
   .popover-header {
     display: flex;
     align-items: center;
-    font-size: var(--pgn-typography-font-size-h5);
+    font-size: $h5-font-size;
   }
 
   .pgn__icon {
-    margin-inline-end: var(--pgn-spacing-popover-icon-margin-right);
-    height: var(--pgn-size-popover-icon-height);
-    width: var(--pgn-size-popover-icon-width);
+    margin-inline-end: $popover-icon-margin-right;
+    height: $popover-icon-height;
+    width: $popover-icon-width;
   }
 }
 
 .popover-success {
-  @include get-popover-variant(var(--pgn-color-popover-success-bg), var(--pgn-color-popover-success-icon));
+  @include get-popover-variant($popover-success-bg, $popover-success-icon-color);
 }
 
 .popover-warning {
-  @include get-popover-variant(var(--pgn-color-popover-warning-bg), var(--pgn-color-popover-warning-icon));
+  @include get-popover-variant($popover-warning-bg, $popover-warning-icon-color);
 }
 
 .popover-danger {
-  @include get-popover-variant(var(--pgn-color-popover-danger-bg), var(--pgn-color-popover-danger-icon));
+  @include get-popover-variant($popover-danger-bg, $popover-danger-icon-color);
 }

package/src/ProductTour/Checkpoint.jsx

@@ -10,6 +10,7 @@ import CheckpointActionRow from './CheckpointActionRow';
 import CheckpointBody from './CheckpointBody';
 import CheckpointBreadcrumbs from './CheckpointBreadcrumbs';
 import CheckpointTitle from './CheckpointTitle';
+import messages from './messages';
 
 const Checkpoint = React.forwardRef(({
   body,
@@ -99,10 +100,8 @@ const Checkpoint = React.forwardRef(({
     >
       <span className="sr-only">
         <FormattedMessage
-          id="pgn.ProductTour.Checkpoint.position-text"
-          defaultMessage="Top of step {step}"
-          value={{ step: index + 1 }}
-          description="Screen-reader message to indicate the user's position in a sequence of checkpoints."
+          {...messages.topPositionText}
+          values={{ step: index + 1 }}
         />
       </span>
       {(title || !isOnlyCheckpoint) && (
@@ -118,8 +117,12 @@ const Checkpoint = React.forwardRef(({
         {...props}
       />
       <div id="pgn__checkpoint-arrow" data-popper-arrow />
-      {/* This text is not translated due to Paragon's lack of i18n support */}
-      <span className="sr-only">Bottom of step {index + 1}</span>
+      <span className="sr-only">
+        <FormattedMessage
+          {...messages.bottomPositionText}
+          values={{ step: index + 1 }}
+        />
+      </span>
     </div>
   );
 });

package/src/ProductTour/Checkpoint.scss

@@ -1,16 +1,20 @@
+@import "variables";
+
+$checkpoint-arrow-top-color: solid $checkpoint-arrow-width $checkpoint-border-color;
+$checkpoint-arrow-default-color: solid $checkpoint-arrow-width $checkpoint-background-color;
+$checkpoint-arrow-transparent: solid $checkpoint-arrow-width transparent;
+
 .pgn__checkpoint {
   position: absolute;
-  background: var(--pgn-color-product-tour-checkpoint-bg);
-  border-top:
-    var(--pgn-size-product-tour-checkpoint-width-border)
-    solid var(--pgn-color-product-tour-checkpoint-border);
-  border-radius: var(--pgn-size-border-radius-base);
-  padding: var(--pgn-spacing-spacer-4);
-  box-shadow: 0 .25rem .5rem var(--pgn-color-product-tour-checkpoint-box-shadow);
-  z-index: var(--pgn-elevation-product-tour-checkpoint-zindex);
-  max-width: var(--pgn-size-product-tour-checkpoint-width-max);
-
-  @media (--pgn-size-breakpoint-max-width-sm) {
+  background: $checkpoint-background-color;
+  border-top: $checkpoint-border-width solid $checkpoint-border-color;
+  border-radius: $border-radius;
+  padding: map_get($spacers, 4);
+  box-shadow: 0 .25rem .5rem rgba(0, 0, 0, .3);
+  z-index: $checkpoint-z-index;
+  max-width: $checkpoint-max-width;
+
+  @media (max-width: map-get($grid-breakpoints, "md")) {
     min-width: 90%;
     max-width: 90%;
   }
@@ -34,12 +38,12 @@
 
   #pgn__checkpoint-arrow::before,
   #pgn__checkpoint-arrow::after {
-    content: "";
     visibility: visible;
+    content: "";
   }
 
   .pgn__checkpoint-button_dismiss {
-    margin-inline-end: var(--pgn-spacing-spacer-2);
+    margin-inline-end: map_get($spacers, 2);
   }
 
   .pgn__checkpoint-breadcrumb {
@@ -48,11 +52,11 @@
     border-radius: 50%;
 
     &.pgn__checkpoint-breadcrumb_active {
-      background: var(--pgn-color-product-tour-checkpoint-breadcrumb);
+      background: $checkpoint-breadcrumb-color;
     }
 
     &.pgn__checkpoint-breadcrumb_inactive {
-      border: 1px solid var(--pgn-color-product-tour-checkpoint-breadcrumb);
+      border: 1px solid $checkpoint-breadcrumb-color;
       background: transparent;
     }
 
@@ -76,7 +80,7 @@
   }
 
   .pgn__checkpoint-body {
-    color: var(--pgn-color-product-tour-checkpoint-body);
+    color: $checkpoint-body-color;
     margin-bottom: map_get($spacers, 3\.5);
     text-align: start;
   }
@@ -88,33 +92,25 @@
   }
 
   #pgn__checkpoint-title {
-    font-size: var(--pgn-typography-font-size-h3);
+    font-size: $h3-font-size;
     margin-inline-end: map_get($spacers, 2\.5);
     margin-bottom: 0;
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="top"] > #pgn__checkpoint-arrow {
-  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
+  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
   bottom: 1px;
 
   [dir="rtl"] & {
-    left: var(--pgn-size-product-tour-checkpoint-width-arrow) !important;
+    left: $checkpoint-arrow-width !important;
   }
 
   &::after {
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-bottom: $checkpoint-arrow-transparent;
+    border-top: $checkpoint-arrow-default-color;
+    border-left: $checkpoint-arrow-transparent;
+    border-right: $checkpoint-arrow-transparent;
     filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
     -webkit-filter: drop-shadow(0 4px 2px rgba(0, 0, 0, .1));
   }
@@ -122,63 +118,39 @@
 
 .pgn__checkpoint[data-popper-placement^="bottom"] > #pgn__checkpoint-arrow {
   top: -36px;
-  left: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important;
+  left: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
 
   &::after {
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-border);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-bottom: $checkpoint-arrow-top-color;
+    border-top: $checkpoint-arrow-transparent;
+    border-left: $checkpoint-arrow-transparent;
+    border-right: $checkpoint-arrow-transparent;
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="left"] > #pgn__checkpoint-arrow {
-  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
+  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
   right: 1px;
 
   &::after {
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
+    border-bottom: $checkpoint-arrow-transparent;
+    border-top: $checkpoint-arrow-transparent;
+    border-left: $checkpoint-arrow-default-color;
+    border-right: $checkpoint-arrow-transparent;
     filter: drop-shadow(3px 1px 2px rgba(0, 0, 0, .1));
   }
 }
 
 .pgn__checkpoint[data-popper-placement^="right"] > #pgn__checkpoint-arrow {
-  top: calc(var(--pgn-size-product-tour-checkpoint-width-arrow) * -1) !important; // Override PopperJS arrow placement
+  top: -$checkpoint-arrow-width !important; // Override PopperJS arrow placement
   left: 1px;
 
   &::after {
-    left: calc(-2 * var(--pgn-size-product-tour-checkpoint-width-arrow));
-    border-bottom:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-top:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-left:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-transparent)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-transparent);
-    border-right:
-      solid var(--pgn-size-product-tour-checkpoint-arrow-top)
-      var(--pgn-color-product-tour-checkpoint-arrow-border-top);
+    left: -2 * $checkpoint-arrow-width;
+    border-bottom: $checkpoint-arrow-transparent;
+    border-top: $checkpoint-arrow-transparent;
+    border-left: $checkpoint-arrow-transparent;
+    border-right: $checkpoint-arrow-default-color;
     filter: drop-shadow(-3px 1px 2px rgba(0, 0, 0, .1));
   }
 }

package/src/ProductTour/_variables.scss

@@ -0,0 +1,15 @@
+// Checkpoints
+
+$checkpoint-background-color:       $light-300 !default;
+
+$checkpoint-body-color:             $gray-700;
+
+$checkpoint-border-color:           $brand !default;
+$checkpoint-border-width:           8px !default;
+
+$checkpoint-breadcrumb-color:       $primary !default;
+
+$checkpoint-arrow-width:            15px !default;
+$checkpoint-max-width:              480px !default;
+
+$checkpoint-z-index:                1060 !default;

package/src/ProductTour/messages.js

@@ -0,0 +1,16 @@
+import { defineMessages } from 'react-intl';
+
+const messages = defineMessages({
+  topPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.top-position-text',
+    defaultMessage: 'Top of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+  bottomPositionText: {
+    id: 'pgn.ProductTour.Checkpoint.bottom-position-text',
+    defaultMessage: 'Bottom of step {step}',
+    description: 'Screen-reader message to notify user that they are located at the bottom of the product tour step.',
+  },
+});
+
+export default messages;

package/src/ProgressBar/_variables.scss

@@ -0,0 +1,23 @@
+// Progress bars
+
+$progress-height:                   1rem !default;
+$annotated-progress-height:         .3125rem !default;
+$progress-font-size:                $font-size-base * .75 !default;
+$progress-bg:                       transparent !default;
+$progress-border-radius:            0 !default;
+$progress-box-shadow:               none !default;
+$progress-bar-color:                $white !default;
+$progress-bar-bg:                   theme-color("accent-a") !default;
+$annotated-progress-bar-bg:         theme-color("dark") !default;
+$progress-bar-animation-timing:     1s linear infinite !default;
+$progress-bar-transition:           width .6s ease !default;
+$progress-bar-border-width:         1px !default;
+$progress-bar-border-color:         $gray-500 !default;
+$progress-threshold-circle:         .5625rem !default;
+$progress-hint-annotation-gap:      .5rem !default;
+$progress-colors: (
+  "dark":    $primary-500,
+  "success": $success-500,
+  "error":   $danger-500,
+  "warning": $accent-b,
+) !default;

package/src/ProgressBar/index.scss

@@ -1,12 +1,12 @@
-@import "bootstrap-progress";
-@import "mixins";
+@import "variables";
+@import "~bootstrap/scss/progress";
 
 .progress {
-  border: var(--pgn-size-progress-bar-border-width) solid var(--pgn-color-progress-bar-border);
+  border: $progress-bar-border-width solid $progress-bar-border-color;
 }
 
 .progress-bar {
-  background-color: var(--pgn-color-progress-bar-bar-bg-base);
+  background-color: $progress-bar-bg;
 }
 
 .pgn__progress-annotated {
@@ -17,12 +17,12 @@
 
   .progress {
     overflow: visible;
-    background-color: var(--pgn-color-light-300);
-    height: var(--pgn-size-progress-bar-height-annotated);
+    background-color: $light-300;
+    height: $annotated-progress-height;
     border: none;
 
     .progress-bar {
-      background-color: var(--pgn-color-progress-bar-bar-bg-annotated);
+      background-color: $annotated-progress-bar-bg;
       overflow: visible;
       position: relative;
     }
@@ -31,33 +31,41 @@
     .pgn__progress-tick--black::after {
       content: "";
       position: absolute;
-      height: var(--pgn-size-progress-bar-height-annotated);
+      height: $annotated-progress-height;
       width: 1px;
       right: 0;
     }
 
     .pgn__progress-tick--white::after {
-      background: var(--pgn-color-light-300);
+      background: $light-300;
     }
 
     .pgn__progress-tick--black::after {
-      background: var(--pgn-color-primary-500);
+      background: $primary-500;
     }
 
-    .pgn__progress-bar--dark {
-      @include progress-bar-variant(var(--pgn-color-primary-500));
-    }
-
-    .pgn__progress-bar--success {
-      @include progress-bar-variant(var(--pgn-color-success-500));
-    }
-
-    .pgn__progress-bar--error {
-      @include progress-bar-variant(var(--pgn-color-danger-500));
-    }
-
-    .pgn__progress-bar--warning {
-      @include progress-bar-variant(var(--pgn-color-accent-b));
+    @each $name, $color in $progress-colors {
+      .pgn__progress-bar--#{$name} {
+        background-color: $color;
+
+        &::after {
+          content: "";
+          display: block;
+          background: $color;
+          position: absolute;
+          top: -(calc($progress-threshold-circle / 2) - calc($annotated-progress-height / 2));
+          right: -(calc($progress-threshold-circle / 2));
+          width: $progress-threshold-circle;
+          height: $progress-threshold-circle;
+          border-radius: calc($progress-threshold-circle / 2);
+          z-index: 1;
+
+          [dir="rtl"] & {
+            left: -(calc($progress-threshold-circle / 2));
+            right: auto;
+          }
+        }
+      }
     }
   }
 
@@ -65,9 +73,9 @@
   .progress::after {
     position: absolute;
     content: "";
-    height: var(--pgn-size-progress-bar-height-annotated);
+    height: $annotated-progress-height;
     width: 1px;
-    background: var(--pgn-color-primary-500);
+    background: $primary-500;
   }
 
   .progress::after {
@@ -86,7 +94,7 @@
 
   .pgn__progress-hint {
     box-sizing: border-box;
-    padding: 0 var(--pgn-spacing-progress-bar-hint-annotation-gap);
-    font-size: var(--pgn-typography-font-size-small-base);
+    padding: 0 $progress-hint-annotation-gap;
+    font-size: $small-font-size;
   }
 }

package/src/RadioButtonGroup/README.md

@@ -0,0 +1,50 @@
+---
+title: 'RadioButtonGroup'
+type: 'component'
+components:
+- RadioButtonGroup
+categories:
+- Forms (deprecated)
+status: 'Deprecate Soon'
+designStatus: 'To Do'
+devStatus: 'To Do'
+notes: |
+  Replaced by Form.Radio and From.RadioSet
+---
+
+## Unselected minimal usage
+
+```jsx live
+<RadioButtonGroup
+  name="rbg"
+  label="Radio Button Group"
+  onBlur={() => console.log('blurred')}
+  onChange={() => console.log('onChange')}
+  onClick={() => console.log('onClick')}
+  onFocus={() => console.log('onFocus')}
+  onKeyDown={() => console.log('onKeyDown')}
+>
+  <RadioButton value="jaebaebae">First Value</RadioButton>
+  <RadioButton value="value2">Second Value</RadioButton>
+  <RadioButton value="value3">Third Value</RadioButton>
+</RadioButtonGroup>
+```
+
+## Selected minimal usage
+
+```jsx live
+<RadioButtonGroup
+  name="rbg-2"
+  label="Radio Button Group"
+  onBlur={() => console.log('blurred')}
+  onChange={() => console.log('onChange')}
+  onClick={() => console.log('onClick')}
+  onFocus={() => console.log('onFocus')}
+  onKeyDown={() => console.log('onKeyDown')}
+  selectedIndex={1}
+>
+  <RadioButton value="jaebaebae">First Value</RadioButton>
+  <RadioButton value="value2">Second Value</RadioButton>
+  <RadioButton value="value3">Third Value</RadioButton>
+</RadioButtonGroup>
+```