@openedx/paragon 22.0.0-alpha.23 → 22.0.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/ColorPicker.test.jsx

@@ -29,13 +29,35 @@ describe('picker works as expected', () => {
   const color = 'wassap';
   const setColor = jest.fn();
   it('validates hex color', async () => {
-    const { rerender } = render(<ColorPicker color={color} setColor={setColor} />);
+    render(<ColorPicker color={color} setColor={setColor} />);
+
     await act(async () => {
       await userEvent.click(screen.getByRole('button'));
     });
+    expect(screen.queryByTestId('hex-input').value).toEqual('#wassap');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
 
-    rerender(<ColorPicker color="#32116c" setColor={setColor} />);
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), '32116c');
+    });
+    expect(screen.queryByTestId('hex-input').value).toEqual('#32116c');
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), 'yuk');
+    });
+
+    expect(screen.queryByTestId('hex-input').value).toEqual('#yuk');
+    expect(screen.queryByText('Colors must be in hexadecimal format.')).toBeInTheDocument();
+
+    await act(async () => {
+      await userEvent.clear(screen.getByTestId('hex-input'));
+      await userEvent.paste(screen.getByTestId('hex-input'), '#fad');
+    });
+
+    expect(screen.queryByTestId('hex-input').value).toEqual('#fad');
     expect(screen.queryByText('Colors must be in hexadecimal format.')).not.toBeInTheDocument();
   });
 });

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.jsx

@@ -1,4 +1,4 @@
-import React, { useCallback, useEffect } from 'react';
+import React from 'react';
 import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { HexColorPicker } from 'react-colorful';
@@ -15,24 +15,63 @@ function ColorPicker({
 }) {
   const [isOpen, open, close] = useToggle(false);
   const [target, setTarget] = React.useState(null);
-  const [hexValid, setHexValid] = React.useState(true);
 
-  const validateHex = useCallback((input) => {
+  const colorIsValid = (colorToValidate) => {
     const hexRegex = /^#([A-Fa-f0-9]{6}|[A-Fa-f0-9]{3})$/;
-    if (input.length > 1 && !input.startsWith('#')) {
-      setColor(`#${input}`);
-    } else {
-      setColor(input);
+    return hexRegex.test(colorToValidate);
+  };
+
+  const formatHexColorString = (colorString) => {
+    if (!colorString.startsWith('#')) {
+      return `#${colorString}`.slice(0, 7);
+    }
+
+    return colorString.slice(0, 7);
+  };
+
+  const [hexValid, setHexValid] = React.useState(() => (color === '' || colorIsValid(formatHexColorString(color))));
+
+  const [hexColorString, setHexColorString] = React.useState(() => {
+    if (color === '') {
+      return '';
+    }
+
+    return formatHexColorString(color);
+  });
+  const [colorToDisplay, setColorToDisplay] = React.useState(() => {
+    const formattedColor = formatHexColorString(color);
+    if (colorIsValid(formattedColor)) {
+      return formattedColor;
     }
-    if (input === '' || hexRegex.test(input) === true) {
+
+    return '#fff';
+  });
+
+  const setValidatedColor = (newColor) => {
+    if (newColor === '') {
       setHexValid(true);
-    } else {
-      setHexValid(false);
+      setColor('');
+      setHexColorString('');
+      setColorToDisplay('#fff');
+      return;
     }
-  }, [setColor]);
 
-  // this is needed for when a user changes the color through the sliders
-  useEffect(() => validateHex(color), [validateHex, color]);
+    const formattedColor = formatHexColorString(newColor);
+
+    if (colorIsValid(formattedColor)) {
+      setHexValid(true);
+      setColor(formattedColor);
+      setHexColorString(formattedColor);
+      setColorToDisplay(formattedColor);
+      return;
+    }
+
+    setHexValid(false);
+    setHexColorString(formattedColor);
+
+    // ensure the picker value stays in sync with the textbox
+    setColor(formattedColor);
+  };
 
   return (
     <>
@@ -65,16 +104,17 @@ function ColorPicker({
           className="pgn__color-modal rounded shadow"
           style={{ textAlign: 'start' }}
         >
-          <HexColorPicker color={color || ''} onChange={setColor} />
+          <HexColorPicker color={colorToDisplay} onChange={setValidatedColor} />
           <Form.Group className="pgn__hex-form" size="sm">
             <div>
               <Form.Label className="pgn__hex-label">Hex</Form.Label>
               <Form.Control
                 className="pgn__hex-field"
                 isInvalid={!hexValid}
-                value={color}
-                onChange={(e) => validateHex(e.target.value)}
+                value={hexColorString}
+                onChange={(e) => setValidatedColor(e.target.value)}
                 data-testid="hex-input"
+                spellCheck="false"
               />
             </div>
             {!hexValid && (

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/Container/index.jsx

@@ -28,11 +28,14 @@ Container.propTypes = {
   ...RBContainer.propTypes,
   /** Override the base element */
   as: PropTypes.elementType,
+  /** Specifies the contents of the container */
   children: PropTypes.node,
   /** Fill all available space at any breakpoint */
   fluid: PropTypes.bool,
   /** Set the maximum width for the container */
   size: PropTypes.oneOf(Object.keys(SIZE_CLASS_NAMES)),
+  /** Overrides underlying component base CSS class name */
+  bsPrefix: PropTypes.string,
 };
 
 Container.defaultProps = {
@@ -40,6 +43,7 @@ Container.defaultProps = {
   children: undefined,
   fluid: true,
   size: undefined,
+  bsPrefix: 'container',
 };
 
 export default Container;

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/README.md

@@ -28,11 +28,11 @@ designStatus: 'Done'
 devStatus: 'In progress'
 ---
 
-The DataTable component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs/overview">react-table</a> library to
+The DataTable component is a wrapper that uses the <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs" target="_blank" rel="noopener noreferrer">react-table</a> library to
 create tables. It can be used as is, or its subcomponents can be used on their own, allowing the developer full control.
 
 Paragon also exports all React hooks from ``react-table`` allowing the developers to use them and make customizations more freely without adding ``react-table`` as a separate dependency to their project.
-For full list of available hooks view <a href="https://react-table.tanstack.com/docs/api/overview">react-table API reference</a>.
+For full list of available hooks view <a href="https://github.com/TanStack/table/tree/v7/docs/src/pages/docs/api" target="_blank" rel="noopener noreferrer">react-table API reference</a>.
 
 ## How children get information
 
@@ -49,7 +49,7 @@ const instance = useContext(DataTableContext)
 For small tables (less than ~10,000 rows), filtering, sorting and pagination can be done quickly and easily on the frontend.
 
 In this example, a default TextFilter component is used for all columns. A default filter can be passed in,
-or a filter component can be defined on the column. See <a href="https://react-table.tanstack.com/docs/api/useFilters">react-table filters documentation</a>
+or a filter component can be defined on the column. See <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 
 ```jsx live

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.jsx

@@ -187,6 +187,7 @@ function DataTable({
 
   const enhancedInstance = {
     ...instance,
+    manualFilters,
     itemCount,
     numBreakoutFilters,
     bulkActions,
@@ -329,7 +330,7 @@ DataTable.propTypes = {
   /** Function that will fetch table data. Called when page size, page index or filters change.
     * Meant to be used with manual filters and pagination */
   fetchData: PropTypes.func,
-  /** Initial state passed to react-table's documentation https://react-table.tanstack.com/docs/api/useTable */
+  /** Initial state passed to react-table's documentation https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useTable.md */
   initialState: PropTypes.shape({
     pageSize: requiredWhen(PropTypes.number, 'isPaginated'),
     pageIndex: requiredWhen(PropTypes.number, 'isPaginated'),