@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/Spinner/index.scss

@@ -1,2 +1,57 @@
-@import "variables";
-@import "~bootstrap/scss/spinners";
+@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;
+    }
+  }
+}
+

package/src/Stack/index.scss

@@ -1,10 +1,8 @@
-@import "variables";
-
 .pgn__vstack,
 .pgn__hstack {
   display: flex;
   align-self: stretch;
-  gap: $stack-gap;
+  gap: var(--pgn-size-stack-gap);
 
   @each $level, $space in $spacers {
     &.pgn__stack-gap--#{$level} {

package/src/Stepper/index.scss

@@ -1,43 +1,43 @@
-@import "variables";
-
 .pgn__stepper-header {
   display: flex;
   justify-content: center;
   align-items: center;
-  background: $stepper-header-bg;
-  padding: $stepper-header-padding-y $stepper-header-padding-x;
-  min-height: $stepper-header-min-height;
+  background: var(--pgn-color-stepper-header-bg-base);
+  padding: var(--pgn-spacing-stepper-header-padding-y) var(--pgn-spacing-stepper-header-padding-x);
+  min-height: var(--pgn-size-stepper-header-height-min);
 
   .pgn__stepper-header-step-list {
     list-style: none;
-    padding: $stepper-header-step-list-padding-y $stepper-header-step-list-padding-x;
+    padding:
+      var(--pgn-spacing-stepper-header-step-list-padding-y)
+      var(--pgn-spacing-stepper-header-step-list-padding-x);
     display: flex;
     align-items: center;
-    margin: $stepper-header-step-list-margin;
+    margin: var(--pgn-spacing-stepper-header-step-list-margin);
     flex-grow: 1;
     justify-content: center;
 
     .pgn__stepper-header-line {
       display: block;
-      height: $stepper-header-line-height;
-      background: $stepper-header-line-bg;
+      height: var(--pgn-typography-spacer-line-height);
+      background: var(--pgn-color-stepper-header-bg-line);
       flex-basis: 80px;
       margin: 0 .5rem;
     }
 
     button.pgn__stepper-header-step {
-      border: $stepper-header-step-border;
-      background-color: $stepper-header-step-bg;
+      border: var(--pgn-color-stepper-header-step-border);
+      background-color: var(--pgn-color-stepper-header-bg-base);
     }
   }
 
   .pgn__stepper-header-step {
     display: flex;
     align-items: center;
-    color: $stepper-header-step-color;
+    color: var(--pgn-color-stepper-header-step-base);
     flex-shrink: 1;
-    min-width: $stepper-header-step-min-width;
-    padding: $stepper-header-step-padding;
+    min-width: var(--pgn-size-stepper-step-width-min);
+    padding: var(--pgn-spacing-stepper-header-step-padding);
 
     .pgn__bubble {
       margin-inline-end: .5rem;
@@ -56,11 +56,11 @@
     }
 
     .pgn__stepper-header-step-description {
-      font-size: $x-small-font-size;
+      font-size: var(--pgn-typography-font-size-small-x);
     }
 
     &.pgn__stepper-header-step-active ~ .pgn__stepper-header-step {
-      color: $stepper-header-active-step-bg;
+      color: var(--pgn-color-stepper-header-step-bg-active);
     }
 
     &.pgn__stepper-header-step-has-error {
@@ -68,16 +68,16 @@
         background: transparent;
         box-shadow:
           inset 0 0 0
-          $stepper-header-step-error-bubble-shadow-width
-          $stepper-header-step-error-bubble-color;
+          var(--pgn-size-stepper-step-bubble-error-shadow-width)
+          var(--pgn-color-stepper-header-step-bubble-error);
 
         * {
-          color: $stepper-header-step-error-bubble-color;
+          color: var(--pgn-color-stepper-header-step-bubble-error);
         }
       }
 
       .pgn__stepper-header-step-description {
-        color: $stepper-header-step-error-description-color;
+        color: var(--pgn-color-stepper-header-step-description-error);
       }
     }
   }

package/src/Sticky/index.scss

@@ -1,5 +1,3 @@
-@import "variables";
-
 .pgn__sticky {
   display: flex;
   width: 100%;
@@ -7,7 +5,7 @@
 
   &.pgn__sticky-top {
     align-self: self-start;
-    top: $sticky-offset;
+    top: var(--pgn-spacing-sticky-offset);
 
     @each $level, $offset in $spacers {
       &.pgn__sticky-offset--#{$level} {
@@ -16,13 +14,13 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow: $sticky-shadow-bottom;
+      box-shadow: var(--pgn-elevation-sticky-shadow-bottom);
     }
   }
 
   &.pgn__sticky-bottom {
     align-self: self-end;
-    bottom: $sticky-offset;
+    bottom: var(--pgn-spacing-sticky-offset);
 
     @each $level, $offset in $spacers {
       &.pgn__sticky-offset--#{$level} {
@@ -31,7 +29,7 @@
     }
 
     &.pgn__sticky-shadow {
-      box-shadow: $sticky-shadow-top;
+      box-shadow: var(--pgn-elevation-sticky-shadow-top);
     }
   }
 }

package/src/Tabs/README.md

@@ -8,9 +8,7 @@ categories:
 - Navigation
 status: 'Stable'
 designStatus: 'Done'
-devStatus: 'TO DO'
-notes: |
-  TODO: Remove subcomponent of deprecated implementation soon
+devStatus: 'Done'
 ---
 
 <p>
@@ -281,23 +279,3 @@ notes: |
 ```
 
 ***
-
-## Tabs.Deprecated
-
-<br/>
-
-### (Deprecated) basic usage
-
-```jsx live
-<Tabs.Deprecated
-  labels={[
-    'Panel 1',
-    'Panel 2',
-    'Panel 3'
-  ]}
->
-  <div>Hello I am the first panel</div>
-  <div>Hello I am the second panel</div>
-  <div>Hello I am the third panel</div>
-</Tabs.Deprecated>
-```

package/src/Tabs/index.jsx

@@ -8,7 +8,6 @@ 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';
@@ -210,8 +209,6 @@ 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,5 +1,3 @@
-@import "variables";
-
 .pgn__tabs {
   flex-wrap: nowrap;
 
@@ -11,9 +9,9 @@
     position: absolute;
     top: 0;
     right: 0;
-    min-height: $tab-notification-height;
-    min-width: $tab-notification-width;
-    font-size: $tab-notification-font-size;
+    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);
   }
 
   .pgn__tab_more.nav-link {
@@ -32,28 +30,30 @@
       margin: 0;
 
       .dropdown .dropdown-toggle {
-        padding: $tab-more-link-dropdown-toggle-padding-x $tab-more-link-dropdown-toggle-padding-y;
+        padding:
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-x)
+          var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
 
         &: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;
+          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);
 
           &.btn.btn-link {
-            color: $tab-more-link-dropdown-toggle-btn-focus-color;
-            border-color: $tab-more-link-dropdown-toggle-btn-focus-border-color;
+            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);
           }
         }
       }
 
       &.active {
         .dropdown .dropdown-toggle {
-          color: $tab-more-link-dropdown-toggle-active-color;
+          color: var(--pgn-color-tab-more-link-dropdown-toggle-text-active);
         }
 
         &:hover {
           .dropdown .dropdown-toggle {
-            background-color: $tab-more-link-dropdown-toggle-hover-color;
+            background-color: var(--pgn-color-tab-more-link-dropdown-toggle-text-hover);
           }
         }
       }
@@ -63,28 +63,30 @@
   // Nav inverse pills
   &.nav-inverse-pills .pgn__tab_more.nav-link {
     .dropdown .dropdown-toggle {
-      padding: $tab-inverse-pills-link-dropdown-toggle-padding-x $tab-inverse-pills-link-dropdown-toggle-padding-y;
+      padding:
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-x)
+        var(--pgn-spacing-tab-inverse-pills-link-dropdown-toggle-padding-y);
       border: none;
 
       &:focus {
-        background-color: $tab-inverse-pills-link-dropdown-toggle-focus-bg;
-        color: $tab-inverse-pills-link-dropdown-toggle-focus-color;
+        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);
       }
     }
 
     &.active .dropdown .dropdown-toggle {
-      color: $tab-inverse-pills-link-dropdown-toggle-active-color;
+      color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-text-active);
 
       &:hover {
-        color: $tab-inverse-pills-link-dropdown-toggle-active-hover-color;
-        background-color: $tab-inverse-pills-link-dropdown-toggle-active-hover-bg;
+        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);
       }
 
       &:focus {
         @include nav-tabs-link-focus(
-          $tab-inverse-pills-link-dropdown-toggle-focus-border-color,
-          $nav-tabs-border-radius,
-          $tab-inverse-pills-link-dropdown-distance
+          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)
         );
       }
     }
@@ -92,15 +94,17 @@
 
   // Nav tabs
   &.nav-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    padding: .563rem $tab-more-link-dropdown-toggle-padding-y;
+    padding: .563rem var(--pgn-spacing-tab-more-link-dropdown-toggle-padding-y);
   }
 
   // Nav inverse tabs
   &.nav-inverse-tabs .pgn__tab_more.nav-link .dropdown .dropdown-toggle {
-    padding: $tab-inverse-tabs-link-dropdown-toggle-padding-x $tab-inverse-tabs-link-dropdown-toggle-padding-y;
+    padding:
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-x)
+      var(--pgn-spacing-tab-inverse-tabs-link-dropdown-toggle-padding-y);
 
     &:hover {
-      background-color: $tab-inverse-tabs-link-dropdown-toggle-hover-bg;
+      background-color: var(--pgn-color-tab-inverse-pills-link-dropdown-toggle-bg-hover);
     }
   }
 

package/src/Toast/ToastContainer.scss

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

package/src/Toast/bootstrap-toast.scss

@@ -0,0 +1,46 @@
+.toast {
+  flex-basis: var(--pgn-size-toast-max-width);
+  max-width: var(--pgn-size-toast-max-width);
+  color: var(--pgn-color-toast-base);
+  background-color: var(--pgn-color-toast-bg);
+  background-clip: padding-box;
+  border: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-border);
+  box-shadow: var(--pgn-elevation-toast-box-shadow);
+  opacity: 0;
+
+  @include font-size(var(--pgn-typography-toast-font-size));
+  @include border-radius(var(--pgn-size-toast-border-radius));
+
+  &:not(:last-child) {
+    margin-bottom: var(--pgn-spacing-toast-padding-x);
+  }
+
+  &.showing {
+    opacity: 1;
+  }
+
+  &.show {
+    display: block;
+    opacity: 1;
+  }
+
+  &.hide {
+    display: none;
+  }
+}
+
+.toast-header {
+  display: flex;
+  align-items: center;
+  padding: var(--pgn-spacing-toast-padding-y) var(--pgn-spacing-toast-padding-x);
+  color: var(--pgn-color-toast-header-text);
+  background-color: var(--pgn-color-toast-header-bg);
+  background-clip: padding-box;
+  border-bottom: var(--pgn-size-toast-border-width) solid var(--pgn-color-toast-header-border);
+
+  @include border-top-radius(subtract(var(--pgn-size-toast-border-radius), var(--pgn-size-toast-border-width)));
+}
+
+.toast-body {
+  padding: var(--pgn-spacing-toast-padding-x);
+}

package/src/Toast/index.scss

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

package/src/Tooltip/index.scss

@@ -1,37 +1,163 @@
-@import "variables";
-@import "~bootstrap/scss/tooltip";
-
+// Base class
 .tooltip {
-  filter: $tooltip-box-shadow;
+  position: absolute;
+  z-index: var(--pgn-elevation-tooltip-zindex);
+  display: block;
+  margin: var(--pgn-spacing-tooltip-margin);
+  // Our parent element can be arbitrary since tooltips are by default inserted as a sibling of their target element.
+  // So reset our font and text properties to avoid inheriting weird values.
+  @include reset-text();
+  @include font-size(var(--pgn-typography-tooltip-font-size));
+  // Allow breaking very long words so they don't overflow the tooltip's bounds
+  word-wrap: break-word;
+  opacity: 0;
+  filter: var(--pgn-elevation-tooltip-box-shadow);
+
+  &.show {
+    opacity: var(--pgn-other-tooltip-opacity);
+  }
+
+  .arrow {
+    position: absolute;
+    display: block;
+    width: var(--pgn-size-tooltip-arrow-width);
+    height: var(--pgn-size-tooltip-arrow-height);
+
+    &::before {
+      position: absolute;
+      content: "";
+      border-color: transparent;
+      border-style: solid;
+    }
+  }
+}
+
+.bs-tooltip-top {
+  padding: var(--pgn-size-tooltip-arrow-height) 0;
+
+  .arrow {
+    bottom: 0;
+
+    &::before {
+      top: 0;
+      border-width: var(--pgn-size-tooltip-arrow-height) calc(var(--pgn-size-tooltip-arrow-width) * .5) 0;
+      border-top-color: var(--pgn-color-tooltip-arrow-base);
+    }
+  }
+}
+
+.bs-tooltip-right {
+  padding: 0 var(--pgn-size-tooltip-arrow-height);
+
+  .arrow {
+    left: 0;
+    width: var(--pgn-size-tooltip-arrow-height);
+    height: var(--pgn-size-tooltip-arrow-width);
+
+    &::before {
+      right: 0;
+      border-width:
+        calc(var(--pgn-size-tooltip-arrow-width) * .5)
+        var(--pgn-size-tooltip-arrow-height)
+        calc(var(--pgn-size-tooltip-arrow-width) * .5) 0;
+      border-right-color: var(--pgn-color-tooltip-arrow-base);
+    }
+  }
+}
+
+.bs-tooltip-bottom {
+  padding: var(--pgn-size-tooltip-arrow-height) 0;
+
+  .arrow {
+    top: 0;
+
+    &::before {
+      bottom: 0;
+      border-width: 0 calc(var(--pgn-size-tooltip-arrow-width) * .5) var(--pgn-size-tooltip-arrow-height);
+      border-bottom-color: var(--pgn-color-tooltip-arrow-base);
+    }
+  }
+}
+
+.bs-tooltip-left {
+  padding: 0 var(--pgn-size-tooltip-arrow-height);
+
+  .arrow {
+    right: 0;
+    width: var(--pgn-size-tooltip-arrow-height);
+    height: var(--pgn-size-tooltip-arrow-width);
+
+    &::before {
+      left: 0;
+      border-width:
+        calc(var(--pgn-size-tooltip-arrow-width) * .5) 0
+        calc(var(--pgn-size-tooltip-arrow-width) * .5)
+        var(--pgn-size-tooltip-arrow-height);
+      border-left-color: var(--pgn-color-tooltip-arrow-base);
+    }
+  }
+}
+
+.bs-tooltip-auto {
+  &[x-placement^="top"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+    @extend .bs-tooltip-top;
+  }
+
+  &[x-placement^="right"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+    @extend .bs-tooltip-right;
+  }
+
+  &[x-placement^="bottom"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+    @extend .bs-tooltip-bottom;
+  }
+
+  &[x-placement^="left"] {
+    // stylelint-disable-next-line scss/at-extend-no-missing-placeholder
+    @extend .bs-tooltip-left;
+  }
+}
+
+// Wrapper for the tooltip content
+.tooltip-inner {
+  max-width: var(--pgn-size-tooltip-max-width);
+  padding: var(--pgn-spacing-tooltip-padding-y) var(--pgn-spacing-tooltip-padding-x);
+  color: var(--pgn-color-tooltip-text);
+  text-align: center;
+  background-color: var(--pgn-color-tooltip-bg-base);
+
+  @include border-radius(var(--pgn-size-tooltip-border-radius));
 }
 
 .tooltip-light {
   .tooltip-inner {
-    color: $tooltip-color-light;
-    background-color: $tooltip-bg-light;
+    color: var(--pgn-color-tooltip-light);
+    background-color: var(--pgn-color-tooltip-bg-light);
   }
 
   &.bs-tooltip-top .arrow {
     &::before {
-      border-top-color: $tooltip-arrow-color-light;
+      border-top-color: var(--pgn-color-tooltip-arrow-light);
     }
   }
 
   &.bs-tooltip-right .arrow {
     &::before {
-      border-right-color: $tooltip-arrow-color-light;
+      border-right-color: var(--pgn-color-tooltip-arrow-light);
     }
   }
 
   &.bs-tooltip-bottom .arrow {
     &::before {
-      border-bottom-color: $tooltip-arrow-color-light;
+      border-bottom-color: var(--pgn-color-tooltip-arrow-light);
     }
   }
 
   &.bs-tooltip-left .arrow {
     &::before {
-      border-left-color: $tooltip-arrow-color-light;
+      border-left-color: var(--pgn-color-tooltip-arrow-light);
     }
   }
 }