@openedx/paragon 22.0.0-alpha.24 → 22.1.0

package/src/Pagination/index.scss

@@ -1,12 +1,4 @@
-@import "pagination-bootstrap";
-
-.pagination {
-  align-items: center;
-
-  .dropdown {
-    z-index: 4;
-  }
-}
+@import "variables";
 
 %pagination-icon-button-right {
   border-top-right-radius: 50%;
@@ -18,291 +10,193 @@
   border-bottom-left-radius: 50%;
 }
 
-.pagination-icon-button-right {
-  @extend %pagination-icon-button-right;
-}
-
-.pagination-icon-button-left {
-  @extend %pagination-icon-button-left;
-}
+.pagination {
+  display: flex;
+  margin: 0;
 
-.pagination-default {
-  .page-link {
-    &.previous .pgn__icon {
-      margin-inline-start: 0;
-      margin-inline-end: var(--pgn-spacing-pagination-margin-x);
-    }
+  .dropdown {
+    z-index: 4;
+  }
 
-    &.next .pgn__icon {
-      margin-inline-start: var(--pgn-spacing-pagination-margin-x);
-      margin-inline-end: 0;
-    }
+  .page-of-count {
+    margin: 0 .5rem;
+    border: 0;
   }
 
   .page-item {
     &:first-child .page-link {
-      [dir="rtl"] & {
-        border-radius: 0 var(--pgn-size-pagination-border-radius-lg) var(--pgn-size-pagination-border-radius-lg) 0;
-      }
+      margin-left: 0;
+
+      @include border-left-radius($border-radius);
     }
 
     &:last-child .page-link {
-      [dir="rtl"] & {
-        border-radius: var(--pgn-size-pagination-border-radius-lg) 0 0 var(--pgn-size-pagination-border-radius-lg);
-      }
+      @include border-right-radius($border-radius);
     }
-  }
-}
 
-.page-link {
-  border: none;
-
-  &.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: var(--pgn-color-pagination-bg-base);
-    color: var(--pgn-color-pagination-focus-text);
-  }
-
-  &:focus {
-    box-shadow: none;
-  }
-
-  &.btn-primary:focus::before {
-    border: var(--pgn-size-pagination-focus-border-width) solid var(--pgn-color-pagination-focus-base);
-
-    @include button-size(
-      var(--pgn-spacing-btn-padding-y-base),
-      var(--pgn-spacing-btn-padding-x-base),
-      var(--pgn-typography-btn-font-size-base),
-      var(--pgn-typography-btn-line-height-base),
-      var(--pgn-size-btn-border-radius-base)
-    );
-  }
-
-  div {
-    display: flex;
-  }
+    &:first-child .btn-icon.page-link {
+      @extend %pagination-icon-button-left;
+    }
 
-  [dir="rtl"] & {
-    svg {
-      transform: scale(-1);
+    &:last-child .btn-icon.page-link {
+      @extend %pagination-icon-button-right;
     }
-  }
 
-  &:focus::before,
-  &.focus::before {
-    border-radius: 0;
-  }
-}
+    &.active .page-link {
+      z-index: 3;
+    }
 
-.page-item {
-  > .btn {
-    transition: none;
-    line-height: var(--pgn-typography-pagination-line-height);
+    > .btn {
+      transition: none;
+      line-height: $pagination-line-height;
+    }
   }
 
-  &.active .page-link.btn-primary:not(:disabled):not(.disabled):focus {
-    background-color: var(--pgn-color-pagination-focus-base);
-    color: var(--pgn-color-pagination-bg-base);
-  }
-}
+  @include list-unstyled();
+  @include border-radius();
 
-.pagination-small {
-  .page-link {
-    font-size: var(--pgn-typography-pagination-font-size-sm);
-    line-height: var(--pgn-typography-pagination-line-height);
-    padding: .375rem .78rem;
+  &-small {
+    .page-link {
+      font-size: $pagination-font-size-sm;
+      line-height: $pagination-line-height;
+      padding: .375rem .78rem;
 
-    &.previous,
-    &.next {
-      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-      line-height: var(--pgn-size-pagination-secondary-height-sm);
+      &.previous,
+      &.next {
+        padding: 0 $pagination-padding-y;
+        line-height: $pagination-secondary-height-sm;
 
-      div {
-        display: flex;
-        align-items: center;
+        div {
+          display: flex;
+          align-items: center;
+        }
       }
     }
-  }
 
-  &:not(.pagination-default) {
-    .page-link {
+    &:not(.pagination-default) .page-link {
       &.previous,
       &.next {
         padding: 0;
-        width: var(--pgn-size-pagination-icon-width);
+        width: $pagination-icon-width;
       }
     }
   }
-}
-
-.pagination-secondary {
-  button.next,
-  button.previous {
-    height: var(--pgn-size-pagination-secondary-height-base);
-    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-  }
 
-  &.pagination-small {
+  &-secondary {
     button.next,
     button.previous {
-      height: var(--pgn-size-pagination-secondary-height-sm);
-      line-height: var(--pgn-typography-pagination-line-height);
+      height: $pagination-secondary-height;
+      padding: 0 $pagination-padding-y;
     }
-  }
-
-  .page-item:first-child .page-link {
-    @extend %pagination-icon-button-left;
-  }
-
-  .page-item:last-child .page-link {
-    @extend %pagination-icon-button-right;
-  }
-}
 
-.pagination-inverse {
-  %dark-styles {
-    background-color: transparent;
-    color: var(--pgn-color-white);
+    &.pagination-small {
+      button.next,
+      button.previous {
+        height: $pagination-secondary-height-sm;
+        line-height: $pagination-line-height;
+      }
+    }
   }
 
-  .pgn__dark-styles {
-    @extend %dark-styles;
+  .ellipsis {
+    border: 0;
+    margin-left: 0;
   }
 
-  .page-item {
-    &.disabled .page-link {
-      @extend %dark-styles;
+  &-inverse {
+    .ellipsis {
+      color: $white;
     }
 
-    &.active button.page-link {
-      background-color: var(--pgn-color-pagination-bg-base);
-      color: var(--pgn-color-pagination-text-base);
+    .dropdown .dropdown-toggle::after {
+      border-top: $pagination-toggle-border solid $pagination-dropdown-color-inverse;
     }
+  }
 
-    button.page-link {
-      @extend %dark-styles;
+  &-reduced {
+    &-dropdown-menu {
+      overflow-y: auto;
+      max-height: $pagination-reduced-dropdown-max-height;
+      min-width: $pagination-reduced-dropdown-min-width;
 
-      &:focus {
-        box-shadow: none;
+      a {
+        text-align: center;
       }
     }
 
-    &:not(.active):focus {
-      box-shadow: var(--pgn-elevation-box-shadow-level-1);
+    .dropdown-toggle::after {
+      width: 0;
+      height: 0;
+      border-left: $pagination-toggle-border solid transparent;
+      border-right: $pagination-toggle-border solid transparent;
+      border-top: $pagination-toggle-border solid $gray-700;
+      transform: rotate(0);
+      inset-inline-start: .5rem;
+      top: 0;
+      margin-inline-end: 1rem;
     }
-  }
 
-  .page-link {
-    &:focus::before,
-    &.focus::before {
-      display: none;
+    button.next,
+    button.previous {
+      height: $pagination-secondary-height;
+      padding: 0 $pagination-padding-y;
     }
-  }
-
-  .dropdown {
-    .btn-tertiary {
-      color: var(--pgn-color-pagination-text-inverse);
 
-      &::after {
-        border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-pagination-text-inverse);
-      }
+    &.pagination-small {
+      .btn.dropdown-toggle {
+        font-size: $pagination-font-size-sm;
 
-      &:active,
-      &:hover {
-        background-color: transparent;
+        &::after {
+          border-left-width: $pagination-toggle-border-sm;
+          border-right-width: $pagination-toggle-border-sm;
+          border-top-width: $pagination-toggle-border-sm;
+        }
       }
 
-      &:not(:disabled):not(.disabled):active {
-        color: var(--pgn-color-pagination-text-inverse);
+      button.previous,
+      button.next {
+        line-height: $pagination-icon-height;
+        height: $pagination-icon-height;
       }
     }
   }
 
-  .show > .dropdown-toggle {
-    background-color: transparent;
-  }
-}
-
-.pgn__reduced-pagination-dropdown {
-  overflow-y: auto;
-  max-height: var(--pgn-size-pagination-reduced-dropdown-max-height);
-  min-width: var(--pgn-size-pagination-reduced-dropdown-min-width);
-
-  a {
-    text-align: center;
-  }
-}
-
-.pagination-reduced {
-  .dropdown-toggle::after {
-    width: 0;
-    height: 0;
-    border-left: var(--pgn-size-pagination-toggle-border-base) solid transparent;
-    border-right: var(--pgn-size-pagination-toggle-border-base) solid transparent;
-    border-top: var(--pgn-size-pagination-toggle-border-base) solid var(--pgn-color-gray-700);
-    transform: rotate(0);
-    inset-inline-start: .5rem;
-    top: 0;
-    margin-inline-end: 1rem;
-  }
-
-  button.next,
-  button.previous {
-    height: var(--pgn-size-pagination-secondary-height-base);
-    padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-  }
-
-  &.pagination-small {
-    .btn.dropdown-toggle {
-      font-size: var(--pgn-typography-pagination-font-size-sm);
-
-      &::after {
-        border-left-width: var(--pgn-size-pagination-toggle-border-sm);
-        border-right-width: var(--pgn-size-pagination-toggle-border-sm);
-        border-top-width: var(--pgn-size-pagination-toggle-border-sm);
-      }
+  &-minimal {
+    .page-item:first-child {
+      margin-inline-end: .3rem;
     }
 
-    button.previous,
-    button.next {
-      line-height: var(--pgn-size-pagination-icon-height);
-      height: var(--pgn-size-pagination-icon-height);
+    button.next,
+    button.previous {
+      padding: $pagination-padding-y;
+      height: $pagination-secondary-height;
     }
-  }
 
-  .page-item:first-child .page-link {
-    @extend %pagination-icon-button-left;
-  }
-
-  .page-item:last-child .page-link {
-    @extend %pagination-icon-button-right;
+    &.pagination-small {
+      button.next,
+      button.previous {
+        padding: 0 $pagination-padding-y;
+        height: $pagination-secondary-height-sm;
+      }
+    }
   }
 }
 
-.pagination-minimal {
-  .page-item:first-child {
-    margin-inline-end: .3rem;
-  }
-
-  button.next,
-  button.previous {
-    padding: var(--pgn-spacing-pagination-padding-y-base);
-    height: var(--pgn-size-pagination-secondary-height-base);
-  }
+.page-link {
+  border: none;
+  margin-left: -$pagination-border-width;
 
-  &.pagination-small {
-    button.next,
-    button.previous {
-      padding: 0 var(--pgn-spacing-pagination-padding-y-base);
-      height: var(--pgn-size-pagination-secondary-height-sm);
-    }
+  &:focus {
+    z-index: 3;
   }
 
-  .page-item:first-child .page-link {
-    @extend %pagination-icon-button-left;
+  div {
+    display: flex;
   }
 
-  .page-item:last-child .page-link {
-    @extend %pagination-icon-button-right;
+  [dir="rtl"] & {
+    svg {
+      transform: scale(-1);
+    }
   }
 }

package/src/Pagination/subcomponents/Ellipsis.jsx

@@ -0,0 +1,13 @@
+import React from 'react';
+import classNames from 'classnames';
+import { ELLIPSIS } from '../constants';
+
+export default function Ellipsis() {
+  return (
+    <li className={classNames('page-item', 'disabled')}>
+      <span className={classNames('btn', 'page-link', 'ellipsis')}>
+        {ELLIPSIS}
+      </span>
+    </li>
+  );
+}

package/src/Pagination/subcomponents/NextPageButton.jsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT } from '../constants';
+import PaginationContext from '../PaginationContext';
+import Button from '../../Button';
+import IconButton from '../../IconButton';
+import Icon from '../../Icon';
+
+export default function NextPageButton() {
+  const {
+    invertColors,
+    getPageButtonVariant,
+    isDefaultVariant,
+    isOnLastPage,
+    getAriaLabelForNextButton,
+    handleNextButtonClick,
+    getNextButtonIcon,
+    buttonLabels,
+    nextButtonRef,
+  } = useContext(PaginationContext);
+
+  const isDisabled = isOnLastPage();
+  const icon = getNextButtonIcon();
+
+  if (isDefaultVariant()) {
+    return (
+      <li className={classNames('page-item', { disabled: isDisabled })}>
+        <Button
+          className="previous page-link"
+          variant={getPageButtonVariant()}
+          aria-label={getAriaLabelForNextButton()}
+          tabIndex={isDisabled ? '-1' : undefined}
+          onClick={handleNextButtonClick}
+          ref={nextButtonRef}
+          disabled={isDisabled}
+          iconAfter={icon}
+        >
+          {buttonLabels.next}
+        </Button>
+      </li>
+    );
+  }
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <li className={classNames('page-item', { disabled: isDisabled })}>
+      <IconButton
+        invertColors={invertColors}
+        src={getNextButtonIcon()}
+        iconAs={Icon}
+        className="previous page-link"
+        aria-label={getAriaLabelForNextButton()}
+        tabIndex={isDisabled ? '-1' : undefined}
+        onClick={handleNextButtonClick}
+        ref={nextButtonRef}
+        disabled={isDisabled}
+        alt={PAGINATION_BUTTON_ICON_BUTTON_NEXT_ALT}
+      />
+    </li>
+  );
+}

package/src/Pagination/subcomponents/PageButton.jsx

@@ -0,0 +1,33 @@
+import React, { useContext } from 'react';
+import PropTypes from 'prop-types';
+import classNames from 'classnames';
+import Button from '../../Button';
+import PaginationContext from '../PaginationContext';
+
+export default function PageButton({ pageNum }) {
+  const {
+    isPageButtonActive,
+    getAriaLabelForPageButton,
+    getPageButtonVariant,
+    handlePageSelect,
+    getPageButtonRefHandler,
+  } = useContext(PaginationContext);
+
+  return (
+    <li className={classNames('page-item', { active: isPageButtonActive(pageNum) })}>
+      <Button
+        className="page-link"
+        aria-label={getAriaLabelForPageButton(pageNum)}
+        variant={getPageButtonVariant(pageNum)}
+        ref={getPageButtonRefHandler(pageNum)}
+        onClick={() => handlePageSelect(pageNum)}
+      >
+        {pageNum}
+      </Button>
+    </li>
+  );
+}
+
+PageButton.propTypes = {
+  pageNum: PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired,
+};

package/src/Pagination/subcomponents/PageOfCountButton.jsx

@@ -0,0 +1,25 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import PaginationContext from '../PaginationContext';
+
+export default function PageOfCountButton() {
+  const { getAriaLabelForPageOfCountButton, getPageOfText } = useContext(PaginationContext);
+
+  const ariaLabel = getAriaLabelForPageOfCountButton();
+  const label = getPageOfText();
+
+  return (
+    <li className={classNames('page-item', 'disabled')}>
+      <span
+        className={classNames(
+          'btn',
+          'page-link',
+          'page-of-count',
+        )}
+        aria-label={ariaLabel}
+      >
+        {label}
+      </span>
+    </li>
+  );
+}

package/src/Pagination/subcomponents/PaginationDropdown.jsx

@@ -0,0 +1,37 @@
+import React, { useContext } from 'react';
+import PaginationContext from '../PaginationContext';
+import Dropdown from '../../Dropdown';
+
+export default function PaginationDropdown() {
+  const {
+    getPageOfText,
+    pageCount,
+    handlePageSelect,
+    getPageButtonVariant,
+  } = useContext(PaginationContext);
+
+  if (pageCount <= 1) {
+    return null;
+  }
+
+  return (
+    <li>
+      <Dropdown>
+        <Dropdown.Toggle variant={getPageButtonVariant()} id="Pagination dropdown">
+          {getPageOfText()}
+        </Dropdown.Toggle>
+        <Dropdown.Menu className="pagination-reduced-dropdown-menu">
+          {[...Array(pageCount).keys()].map(pageNum => (
+            <Dropdown.Item
+              onClick={() => handlePageSelect(pageNum + 1)}
+              key={pageNum}
+              data-testid="pagination-dropdown-item"
+            >
+              {pageNum + 1}
+            </Dropdown.Item>
+          ))}
+        </Dropdown.Menu>
+      </Dropdown>
+    </li>
+  );
+}

package/src/Pagination/subcomponents/PreviousPageButton.jsx

@@ -0,0 +1,64 @@
+import React, { useContext } from 'react';
+import classNames from 'classnames';
+import { PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT } from '../constants';
+import Button from '../../Button';
+import IconButton from '../../IconButton';
+import Icon from '../../Icon';
+import PaginationContext from '../PaginationContext';
+
+export default function PreviousPageButton() {
+  const {
+    invertColors,
+    getPageButtonVariant,
+    isDefaultVariant,
+    isOnFirstPage,
+    getAriaLabelForPreviousButton,
+    handlePreviousButtonClick,
+    getPrevButtonIcon,
+    buttonLabels,
+    previousButtonRef,
+  } = useContext(PaginationContext);
+
+  const isDisabled = isOnFirstPage();
+  const icon = getPrevButtonIcon();
+
+  if (isDefaultVariant()) {
+    return (
+      <li className={classNames('page-item', { disabled: isDisabled })}>
+        <Button
+          className="previous page-link"
+          variant={getPageButtonVariant()}
+          aria-label={getAriaLabelForPreviousButton()}
+          tabIndex={isDisabled ? '-1' : undefined}
+          onClick={handlePreviousButtonClick}
+          ref={previousButtonRef}
+          disabled={isDisabled}
+          iconBefore={icon}
+        >
+          {buttonLabels.previous}
+        </Button>
+      </li>
+    );
+  }
+
+  if (!icon) {
+    return null;
+  }
+
+  return (
+    <li className={classNames('page-item', { disabled: isDisabled })}>
+      <IconButton
+        invertColors={invertColors}
+        src={getPrevButtonIcon()}
+        iconAs={Icon}
+        className="previous page-link"
+        aria-label={getAriaLabelForPreviousButton()}
+        tabIndex={isDisabled ? '-1' : undefined}
+        onClick={handlePreviousButtonClick}
+        ref={previousButtonRef}
+        disabled={isDisabled}
+        alt={PAGINATION_BUTTON_ICON_BUTTON_PREV_ALT}
+      />
+    </li>
+  );
+}

package/src/Pagination/subcomponents/ScreenReaderText.jsx

@@ -0,0 +1,17 @@
+import React, { useContext } from 'react';
+import PaginationContext from '../PaginationContext';
+
+export default function PaginationScreenReaderText() {
+  const { getScreenReaderText } = useContext(PaginationContext);
+
+  return (
+    <div
+      className="sr-only"
+      aria-live="polite"
+      aria-relevant="text"
+      aria-atomic
+    >
+      {getScreenReaderText()}
+    </div>
+  );
+}

package/src/Pagination/subcomponents/index.js

@@ -0,0 +1,7 @@
+export { default as Ellipsis } from './Ellipsis';
+export { default as NextPageButton } from './NextPageButton';
+export { default as PageButton } from './PageButton';
+export { default as PageOfCountButton } from './PageOfCountButton';
+export { default as PaginationDropdown } from './PaginationDropdown';
+export { default as PreviousPageButton } from './PreviousPageButton';
+export { default as ScreenReaderText } from './ScreenReaderText';