@openedx/paragon 22.0.0-alpha.24 → 22.1.0

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.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.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/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>
+```

package/src/RadioButtonGroup/RadioButtonGroup.test.jsx

@@ -0,0 +1,127 @@
+import React from 'react';
+import { render, screen } from '@testing-library/react';
+import userEvent from '@testing-library/user-event';
+
+import RadioButtonGroup, { RadioButton } from '.';
+
+describe('<RadioButton />', () => {
+  const text = 'text';
+  const index = 0;
+  const isChecked = false;
+  const name = 'name';
+  const onBlur = jest.fn();
+  const onClick = jest.fn();
+  const onFocus = jest.fn();
+  const onKeyDown = jest.fn();
+  const value = 'value';
+  const props = {
+    index,
+    isChecked,
+    name,
+    onBlur,
+    onClick,
+    onFocus,
+    onKeyDown,
+    value,
+  };
+  describe('correct rendering', () => {
+    it('renders RadioButton', () => {
+      render(
+        <RadioButton {...props}>
+          {text}
+        </RadioButton>,
+      );
+
+      const radioButton = screen.getByRole('radio');
+      expect(radioButton).toBeInTheDocument();
+      expect(radioButton).toHaveAttribute('name', name);
+      expect(radioButton).toHaveAttribute('value', value);
+      expect(radioButton).toHaveAttribute('aria-checked', isChecked.toString());
+      expect(radioButton).toHaveAttribute('data-index', index.toString());
+    });
+  });
+
+  describe('event handlers correctly triggered', () => {
+    let spy;
+
+    beforeEach(() => {
+      spy = jest.fn();
+    });
+
+    afterEach(() => {
+      spy.mockClear();
+    });
+
+    it('should fire onBlur', async () => {
+      render((<RadioButton {...props} onBlur={spy} />));
+      const radioButton = screen.getByRole('radio');
+      radioButton.focus();
+      await userEvent.tab();
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should fire onClick', async () => {
+      render((<RadioButton {...props} onClick={spy} />));
+      const radioButton = screen.getByRole('radio');
+      await userEvent.click(radioButton);
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should fire onFocus', async () => {
+      render((<RadioButton {...props} onFocus={spy} />));
+      const radioButton = screen.getByRole('radio');
+      radioButton.focus();
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+    it('should fire onKeyDown', async () => {
+      render((<RadioButton {...props} onKeyDown={spy} />));
+      const radioButton = screen.getByRole('radio');
+      radioButton.focus();
+      await userEvent.keyboard('{enter}');
+      expect(spy).toHaveBeenCalledTimes(1);
+    });
+  });
+});
+
+describe('<RadioButtonGroup />', () => {
+  const firstText = 'firstText';
+  const secondText = 'secondText';
+  const name = 'name';
+  const label = 'label';
+  const onBlur = jest.fn();
+  const onChange = jest.fn();
+  const onClick = jest.fn();
+  const onFocus = jest.fn();
+  const onKeyDown = jest.fn();
+  const firstValue = 'firstValue';
+  const secondValue = 'secondValue';
+  const props = {
+    name,
+    label,
+    onBlur,
+    onChange,
+    onClick,
+    onFocus,
+    onKeyDown,
+  };
+
+  it('renders RadioButtonGroup', () => {
+    render(
+      <RadioButtonGroup {...props}>
+        <RadioButton value={firstValue}>{firstText}</RadioButton>
+        <RadioButton value={secondValue}>{secondText}</RadioButton>
+      </RadioButtonGroup>,
+    );
+
+    const radioButtons = screen.getAllByRole('radio');
+    expect(radioButtons.length).toBe(2);
+
+    radioButtons.forEach((radioButton, index) => {
+      expect(radioButton).toHaveAttribute('name', name);
+      expect(radioButton).toHaveAttribute('value', index === 0 ? firstValue : secondValue);
+    });
+
+    const radioButtonGroupDiv = screen.getByRole('radiogroup');
+    expect(radioButtonGroupDiv).toBeInTheDocument();
+    expect(radioButtonGroupDiv).toHaveAttribute('aria-label', label);
+    expect(radioButtonGroupDiv).toHaveAttribute('tabIndex', '-1');
+  });
+});