@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/ChipCarousel/_variables.scss

@@ -0,0 +1,3 @@
+$chip-carousel-controls-top-offset:    .375rem !default;
+$chip-carousel-container-padding-x:    .625rem !default;
+$chip-carousel-container-padding-y:    .313rem !default;

package/src/ChipCarousel/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .pgn__chip-carousel {
   position: relative;
 
@@ -9,6 +11,7 @@
     &.pgn__chip-carousel-gap__#{$level} {
       .pgn__overflow-scroll-overflow-container {
         column-gap: $space;
+        padding: $chip-carousel-container-padding-x $chip-carousel-container-padding-y;
       }
     }
   }
@@ -17,7 +20,7 @@
   .pgn__chip-carousel__left-control {
     position: absolute;
     z-index: 2;
-    top: calc(var(--pgn-spacing-chip-carousel-controls-top-offset) * -1);
+    top: $chip-carousel-controls-top-offset;
   }
 
   .pgn__chip-carousel__right-control {

package/src/CloseButton/_variables.scss

@@ -0,0 +1,6 @@
+// Close
+
+$close-font-size:                   $font-size-base * 1.5 !default;
+$close-font-weight:                 $font-weight-bold !default;
+$close-color:                       $black !default;
+$close-text-shadow:                 0 1px 0 $white !default;

package/src/CloseButton/index.scss

@@ -1,31 +1,2 @@
-.close {
-  float: right;
-  font-weight: var(--pgn-typography-close-button-font-weight);
-  line-height: 1;
-  color: var(--pgn-color-close-button);
-  text-shadow: var(--pgn-elevation-close-button-text-shadow);
-  opacity: .5;
-
-  @include font-size(var(--pgn-typography-close-button-font-size));
-
-  @include hover() {
-    color: var(--pgn-color-close-button);
-    text-decoration: none;
-  }
-
-  &:not(:disabled):not(.disabled) {
-    @include hover-focus() {
-      opacity: .75;
-    }
-  }
-}
-
-button.close {
-  padding: 0;
-  background-color: transparent;
-  border: 0;
-}
-
-a.close.disabled {
-  pointer-events: none;
-}
+@import "variables";
+@import "~bootstrap/scss/close";

package/src/Code/_variables.scss

@@ -0,0 +1,17 @@
+// Code
+
+$code-font-size:                    87.5% !default;
+$code-color:                        #E83E8C !default;
+
+$kbd-box-shadow:              inset 0 -.1rem 0 rgba($black, .25) !default;
+$nested-kbd-font-weight:      $font-weight-bold !default;
+
+// HTML Keyboard Input element (<kbd>) styles
+$kbd-padding-y:                     .2rem !default;
+$kbd-padding-x:                     .4rem !default;
+$kbd-font-size:                     $code-font-size !default;
+$kbd-color:                         $white !default;
+$kbd-bg:                            theme-color("gray", "hover") !default;
+
+$pre-color:                         theme-color("gray", "dark-text") !default;
+$pre-scrollable-max-height:         340px !default;

package/src/Code/index.scss

@@ -1,47 +1,2 @@
-code {
-  color: var(--pgn-color-code-base);
-  word-wrap: break-word;
-
-  @include font-size(var(--pgn-typography-code-font-size));
-
-  a > & {
-    color: inherit;
-  }
-}
-
-kbd {
-  padding: var(--pgn-spacing-code-kbd-padding-y) var(--pgn-spacing-code-kbd-padding-x);
-  color: var(--pgn-color-code-kbd-base);
-  background-color: var(--pgn-color-code-kbd-bg);
-  box-shadow: var(--pgn-elevation-code-kbd-box-shadow);
-
-  @include font-size(var(--pgn-typography-code-kbd-font-size));
-  @include border-radius(var(--pgn-size-border-radius-sm));
-
-  kbd {
-    padding: 0;
-    font-weight: var(--pgn-typography-code-kbd-nested-font-weight);
-    box-shadow: none;
-
-    @include font-size(100%);
-  }
-}
-
-pre {
-  display: block;
-  color: var(--pgn-color-code-pre);
-
-  @include font-size(var(--pgn-typography-code-font-size));
-
-  code {
-    @include font-size(inherit);
-
-    color: inherit;
-    word-break: normal;
-  }
-}
-
-.pre-scrollable {
-  max-height: var(--pgn-size-code-pre-scrollable-max-height);
-  overflow-y: scroll;
-}
+@import "variables";
+@import "~bootstrap/scss/code";

package/src/Collapsible/_variables.scss

@@ -0,0 +1,12 @@
+// Collapsible
+
+$collapsible-card-spacer-y:               .5rem !default;
+$collapsible-card-spacer-x:               .5rem !default;
+$collapsible-card-spacer-y-lg:         $card-spacer-y !default;
+$collapsible-card-spacer-x-lg:         $card-spacer-x !default;
+$collapsible-card-body-spacer-left:        .75rem !default;
+$collapsible-card-spacer-icon:             2.5rem !default;
+
+$collapsible-basic-spacer-y:               .5rem !default;
+$collapsible-basic-spacer-x:               .5rem !default;
+$collapsible-basic-spacer-icon:            .625rem !default;

package/src/Collapsible/index.scss

@@ -1,3 +1,5 @@
+@import "variables";
+
 .collapsible-card {
   // stylelint-disable-next-line
   @extend .card;
@@ -5,9 +7,9 @@
   border-radius: 0;
 
   .collapsible-trigger {
-    padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
-    border-radius: calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width));
-    border-bottom: var(--pgn-size-card-border-width) solid transparent;
+    padding: $collapsible-card-spacer-y $collapsible-card-spacer-x;
+    border-radius: $card-inner-border-radius;
+    border-bottom: $card-border-width solid transparent;
     transition: border-color 100ms ease 150ms;
     cursor: pointer;
     display: flex;
@@ -21,10 +23,8 @@
     }
 
     &[aria-expanded="true"] {
-      border-radius:
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width))
-        calc(var(--pgn-size-card-border-radius-base) - var(--pgn-size-card-border-width)) 0 0;
-      border-color: var(--pgn-color-card-border-base);
+      border-radius: $card-inner-border-radius $card-inner-border-radius 0 0;
+      border-color: $card-border-color;
       transition: none;
       text-align: start;
     }
@@ -34,8 +34,8 @@
     // stylelint-disable-next-line
     @extend .card-body;
 
-    padding: var(--pgn-spacing-collapsible-card-spacer-y-base) var(--pgn-spacing-collapsible-card-spacer-x-base);
-    padding-left: var(--pgn-spacing-collapsible-card-spacer-left-body);
+    padding: $collapsible-card-spacer-y $collapsible-card-spacer-x;
+    padding-left: $collapsible-card-body-spacer-left;
     text-align: start;
 
     & > *:last-child {
@@ -44,7 +44,7 @@
   }
 
   .collapsible-icon {
-    margin-inline-start: var(--pgn-spacing-collapsible-card-spacer-icon);
+    margin-inline-start: $collapsible-card-spacer-icon;
   }
 }
 
@@ -53,11 +53,11 @@
   @extend .collapsible-card;
 
   .collapsible-trigger {
-    padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg);
+    padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg;
   }
 
   .collapsible-body {
-    padding: var(--pgn-spacing-collapsible-card-spacer-y-lg) var(--pgn-spacing-collapsible-card-spacer-x-lg);
+    padding: $collapsible-card-spacer-y-lg $collapsible-card-spacer-x-lg;
   }
 }
 
@@ -68,11 +68,11 @@
     align-items: center;
     text-decoration: underline;
     color: theme-color("primary", "default");
-    padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
+    padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x;
   }
 
   .collapsible-body {
-    padding: var(--pgn-spacing-collapsible-card-spacer-basic-y) var(--pgn-spacing-collapsible-card-spacer-basic-x);
+    padding: $collapsible-basic-spacer-y $collapsible-basic-spacer-x;
     text-align: start;
 
     &.collapsing {
@@ -81,6 +81,6 @@
   }
 
   .collapsible-icon {
-    margin-left: var(--pgn-spacing-collapsible-card-spacer-basic-icon);
+    margin-left: $collapsible-basic-spacer-icon;
   }
 }

package/src/ColorPicker/_variables.scss

@@ -0,0 +1,2 @@
+$picker-size-sm:                     2rem !default;
+$picker-size-md:                     calc(1.3333em + 1.125rem + 2px) !default;

package/src/ColorPicker/index.scss

@@ -1,5 +1,7 @@
+@import "variables";
+
 .pgn__color-picker {
-  box-shadow: 0 0 3px 1px var(--pgn-color-gray-300);
+  box-shadow: 0 0 3px 1px $gray-300;
   border: none;
   background:
     linear-gradient(to bottom right,
@@ -13,20 +15,20 @@
   );
 
   &.pgn__color-picker-sm {
-    height: var(--pgn-size-color-picker-sm);
-    width: var(--pgn-size-color-picker-sm);
+    height: $picker-size-sm;
+    width: $picker-size-sm;
   }
 
   &.pgn__color-picker-md {
-    height: var(--pgn-size-color-picker-md);
-    width: var(--pgn-size-color-picker-md);
+    height: $picker-size-md;
+    width: $picker-size-md;
   }
 }
 
 .pgn__color-modal {
-  background: var(--pgn-color-white);
+  background: $white;
   padding-bottom: .1rem;
-  margin-bottom: var(--pgn-spacing-spacer-base);
+  margin-bottom: 1rem;
 }
 
 .pgn__color-error {
@@ -37,7 +39,7 @@
 
 .pgn__hex-label {
   font-weight: bold;
-  font-size: var(--pgn-typography-font-size-mobile-h5);
+  font-size: $h5-mobile-font-size;
   padding: .5rem;
   margin-bottom: 0 !important;
 }
@@ -53,7 +55,7 @@
   }
 
   .pgn__hex-field {
-    @media (--pgn-size-breakpoint-min-width-sm) {
+    @media (min-width: map-get($grid-breakpoints, "sm")) {
       margin-inline-end: 0;
     }
   }

package/src/Container/_variables.scss

@@ -0,0 +1,5 @@
+$max-width-xs: 464px !default;
+$max-width-sm: 708px !default;
+$max-width-md: 952px !default;
+$max-width-lg: 1192px !default;
+$max-width-xl: 1440px !default;

package/src/DataTable/CollapsibleButtonGroup.jsx

@@ -78,7 +78,7 @@ function CollapsibleButtonGroup({
             placement="bottom-end"
             isOpen={isOverflowMenuOpen}
           >
-            <div className="pgn__data-table__overflow-actions-menu">
+            <div className="pgn__datatable__overflow-actions-menu">
               <Stack gap={2}>
                 {dropdownActions.map(cloneAction)}
               </Stack>
@@ -86,7 +86,7 @@ function CollapsibleButtonGroup({
           </ModalPopup>
         </>
       )}
-      <div className="pgn__data-table__visible-actions">
+      <div className="pgn__datatable__visible-actions">
         {visibleActions.map(cloneAction)}
       </div>
     </div>

package/src/DataTable/TablePagination.jsx

@@ -14,10 +14,15 @@ function TablePagination() {
   const pageIndex = state?.pageIndex;
 
   return (
-    <Pagination.Reduced
+    <Pagination
+      variant="reduced"
       currentPage={pageIndex + 1}
-      handlePageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
       pageCount={pageCount}
+      icons={{
+        leftIcon: null,
+        rightIcon: null,
+      }}
     />
   );
 }

package/src/DataTable/TablePaginationMinimal.jsx

@@ -1,6 +1,7 @@
 import React, { useContext } from 'react';
 import DataTableContext from './DataTableContext';
 import Pagination from '../Pagination';
+import { ArrowBackIos, ArrowForwardIos } from '../../icons';
 
 function TablePaginationMinimal() {
   const {
@@ -21,6 +22,10 @@ function TablePaginationMinimal() {
       pageCount={pageCount}
       paginationLabel="table pagination"
       onPageSelect={(pageNum) => gotoPage(pageNum - 1)}
+      icons={{
+        leftIcon: ArrowBackIos,
+        rightIcon: ArrowForwardIos,
+      }}
     />
   );
 }

package/src/DataTable/_variables.scss

@@ -0,0 +1,11 @@
+$data-table-background-color: $white !default;
+$data-table-border: 2px solid $light-300 !default;
+$data-table-box-shadow: $box-shadow-sm !default;
+$data-table-padding-x: .75rem !default;
+$data-table-padding-y: .75rem !default;
+$data-table-padding-small: .5rem !default;
+$data-table-cell-padding: .5rem .75rem !default;
+$data-table-footer-position: center !default;
+$data-table-pagination-dropdown-max-height: 60vh !default;
+$data-table-pagination-dropdown-min-width: 6rem !default;
+$data-table-layout-sidebar-width: 12rem !default;

package/src/DataTable/filters/TextFilter.jsx

@@ -1,6 +1,6 @@
 import React, { useRef } from 'react';
 import PropTypes from 'prop-types';
-import Form, { FormLabel, FormControl } from '../../Form';
+import Form from '../../Form';
 import { newId } from '../../utils';
 
 const formatHeaderForLabel = (header) => {
@@ -22,10 +22,9 @@ function TextFilter({
   const formattedHeader = formatHeaderForLabel(Header);
   const inputText = React.isValidElement(formattedHeader) ? formattedHeader : `Search ${formattedHeader}`;
   return (
-    <Form.Group>
-      <FormLabel id={ariaLabel.current} className="sr-only">{inputText}</FormLabel>
-      <FormControl
-        aria-labelledby={ariaLabel.current}
+    <Form.Group controlId={ariaLabel.current}>
+      <Form.Label className="sr-only">{inputText}</Form.Label>
+      <Form.Control
         value={filterValue || ''}
         type="text"
         onChange={e => {

package/src/DataTable/index.scss

@@ -1,21 +1,23 @@
+@import "variables";
+
 .pgn__data-table-wrapper {
-  font-size: var(--pgn-typography-font-size-sm);
-  border-radius: var(--pgn-size-border-radius-base);
-  background-color: var(--pgn-color-data-table-bg-base);
-  box-shadow: var(--pgn-elevation-data-table-box-shadow);
+  font-size: $font-size-sm;
+  border-radius: $border-radius;
+  background-color: $data-table-background-color;
+  box-shadow: $data-table-box-shadow;
 
   &.hide-shadow {
     box-shadow: none;
   }
 
   > :first-child {
-    border-top-left-radius: var(--pgn-size-border-radius-base);
-    border-top-right-radius: var(--pgn-size-border-radius-base);
+    border-top-left-radius: $border-radius;
+    border-top-right-radius: $border-radius;
   }
 
   > :last-child {
-    border-bottom-left-radius: var(--pgn-size-border-radius-base);
-    border-bottom-right-radius: var(--pgn-size-border-radius-base);
+    border-bottom-left-radius: $border-radius;
+    border-bottom-right-radius: $border-radius;
   }
 }
 
@@ -23,11 +25,11 @@
 .pgn__table-actions {
   display: flex;
 
-  .pgn__data-table__visible-actions {
-    margin-inline-start: var(--pgn-spacing-spacer-2);
+  .pgn__datatable__visible-actions {
+    margin-inline-start: map_get($spacers, 2);
 
     .btn {
-      margin-inline-start: var(--pgn-spacing-spacer-2);
+      margin-inline-start: map_get($spacers, 2);
 
       &:first-child {
         margin-inline-start: 0;
@@ -55,7 +57,7 @@
     width: 100%;
     display: flex;
     align-items: center;
-    margin-top: var(--pgn-spacing-spacer-4);
+    margin-top: map_get($spacers, 4);
   }
 
   .pgn__icon-button-toggle__container {
@@ -77,7 +79,7 @@
     left: 0;
     width: 100%;
     height: 100%;
-    background-color: var(--pgn-color-data-table-bg-is-loading);
+    background-color: rgba($white, .7);
     z-index: 1;
   }
 }
@@ -86,27 +88,27 @@
   display: flex;
   align-items: flex-start;
 
-  @media (--pgn-size-breakpoint-max-width-xl) {
+  @media (max-width: $max-width-xl) {
     overflow-x: scroll;
   }
 
   .pgn__data-table-layout-sidebar {
-    background-color: var(--pgn-color-data-table-bg-base);
-    border-radius: var(--pgn-size-border-radius-base);
-    box-shadow: var(--pgn-elevation-data-table-box-shadow);
-    padding: var(--pgn-spacing-data-table-padding-small);
-    margin-right: var(--pgn-spacing-spacer-4);
-    flex: 0 0 var(--pgn-size-data-table-layout-sidebar-width);
+    background-color: $data-table-background-color;
+    border-radius: $border-radius;
+    box-shadow: $data-table-box-shadow;
+    padding: $data-table-padding-small;
+    margin-right: map_get($spacers, 4);
+    flex: 0 0 $data-table-layout-sidebar-width;
   }
 
   .pgn__data-table-side-filters {
     .pgn__data-table-side-filters-title {
-      margin-bottom: var(--pgn-spacing-spacer-3);
+      margin-bottom: map_get($spacers, 3);
       text-align: start;
     }
 
     .pgn__data-table-side-filters-status {
-      margin-bottom: var(--pgn-spacing-spacer-2);
+      margin-bottom: map_get($spacers, 2);
       display: flex;
       justify-content: flex-end;
     }
@@ -127,23 +129,23 @@
   width: 100%;
 
   &.is-striped tr:nth-child(even) {
-    background-color: var(--pgn-color-light-200);
+    background-color: $light-200;
   }
 
   th {
-    background-color: var(--pgn-color-light-300);
-    padding: var(--pgn-spacing-data-table-padding-cell);
+    background-color: $light-300;
+    padding: $data-table-cell-padding;
     text-align: start;
   }
 
   td {
-    padding: var(--pgn-spacing-data-table-padding-cell);
+    padding: $table-cell-padding;
     line-height: 24px;
     text-align: start;
   }
 
   & tr.is-selected {
-    background-color: var(--pgn-color-info-100) !important;
+    background-color: $info-100 !important;
   }
 }
 
@@ -155,17 +157,17 @@
 }
 
 .pgn__data-table-empty {
-  padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y);
+  padding: $data-table-padding-x $data-table-padding-y;
 }
 
 .pgn__data-table-actions {
   display: flex;
   justify-content: space-between;
-  padding-bottom: var(--pgn-spacing-data-table-padding-small);
+  padding-bottom: $data-table-padding-small;
 }
 
 .pgn__data-table-status-bar {
-  padding: var(--pgn-spacing-data-table-padding-y) var(--pgn-spacing-data-table-padding-x);
+  padding: $data-table-padding-y $data-table-padding-x;
 }
 
 .pgn__data-table-filters {
@@ -173,11 +175,11 @@
 }
 
 .pgn__data-table-filters-breakout-filter {
-  margin-inline-end: var(--pgn-spacing-spacer-2);
+  margin-inline-end: map_get($spacers, 2);
 }
 
 .pgn__data-table-filters-dropdown-item {
-  padding: var(--pgn-spacing-data-table-padding-small) 14px;
+  padding: $data-table-padding-small 14px;
   min-width: 15em;
 
   .pgn__form-checkbox {
@@ -194,9 +196,9 @@
 .pgn__data-table-footer {
   display: flex;
   justify-content: space-between;
-  padding: var(--pgn-spacing-data-table-padding-x) var(--pgn-spacing-data-table-padding-y);
+  padding: $data-table-padding-x $data-table-padding-y;
   align-items: center;
-  border-top: var(--pgn-size-data-table-border) solid var(--pgn-color-data-table-border);
+  border-top: $data-table-border;
 
   .btn-icon .pgn__icon {
     [dir="rtl"] & {
@@ -209,14 +211,14 @@
   display: flex;
 
   .pgn__page-count {
-    align-self: var(--pgn-spacing-data-table-footer-position);
+    align-self: $data-table-footer-position;
   }
 }
 
 .pgn__data-table-pagination-dropdown {
   overflow-y: auto;
-  max-height: var(--pgn-size-data-table-dropdown-pagination-max-height);
-  min-width: var(--pgn-size-data-table-dropdown-pagination-min-width);
+  max-height: $data-table-pagination-dropdown-max-height;
+  min-width: $data-table-pagination-dropdown-min-width;
 
   a {
     text-align: center;
@@ -224,7 +226,7 @@
 }
 
 .pgn__checkbox-filter-label {
-  font-weight: var(--pgn-typography-font-weight-bold);
+  font-weight: $font-weight-bold;
 }
 
 .pgn__checkbox-filter {
@@ -259,15 +261,15 @@
 }
 
 .pgn__data-table-card-view {
-  padding: 0 var(--pgn-spacing-data-table-padding-x);
+  padding: 0 $data-table-padding-x;
 
   .pgn__data-table-card-view-default-skeleton-card-section {
-    margin-top: var(--pgn-spacing-spacer-2);
+    margin-top: map_get($spacers, 2);
   }
 }
 
 .pgn__data-table__action-btn {
-  margin-left: var(--pgn-spacing-spacer-2);
+  margin-left: map_get($spacers, 2);
 
   &:first-child {
     margin-left: 0;
@@ -283,10 +285,10 @@
   overflow: hidden;
 }
 
-.pgn__data-table__overflow-actions-menu {
-  background: var(--pgn-color-white);
-  padding: var(--pgn-spacing-spacer-2);
-  box-shadow: var(--pgn-elevation-box-shadow-level-1);
+.pgn__datatable__overflow-actions-menu {
+  background: #FFFFFF;
+  padding: map_get($spacers, 2);
+  box-shadow: $level-1-box-shadow;
   border-radius: 4px;
 }
 
@@ -307,10 +309,10 @@
 
   &.selection-right {
     > :first-child {
-      margin-right: var(--pgn-spacing-spacer-2);
+      margin-right: map_get($spacers, 2);
 
       [dir="rtl"] & {
-        margin-left: var(--pgn-spacing-spacer-2);
+        margin-left: map_get($spacers, 2);
         margin-right: 0;
       }
     }
@@ -324,5 +326,5 @@
 .pgn__data-table__controlled-select {
   display: flex;
   align-content: center;
-  padding: var(--pgn-spacing-spacer-1);
+  padding: map_get($spacers, 1);
 }