@openedx/paragon 22.0.0-alpha.23 → 22.0.0

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);
 }

package/src/DataTable/selection/BaseSelectionStatus.jsx

@@ -22,11 +22,11 @@ function BaseSelectionStatus({
 }) {
   const {
     itemCount, filteredRows, isPaginated, state,
-    isSelectable, maxSelectedRows,
+    isSelectable, maxSelectedRows, manualFilters,
   } = useContext(DataTableContext);
   const hasAppliedFilters = state?.filters?.length > 0;
   const isAllRowsSelected = numSelectedRows === itemCount;
-  const filteredItems = filteredRows?.length || itemCount;
+  const filteredItems = manualFilters ? itemCount : (filteredRows?.length || itemCount);
   const hasMaxSelectedRows = isSelectable && maxSelectedRows;
 
   const intlAllSelectedText = allSelectedText || (

package/src/DataTable/tablefilters.mdx

@@ -14,18 +14,18 @@ devStatus: 'In progress'
 ---
 
 
-The ``DataTable`` component is a wrapper that uses the <a href="https://react-table.tanstack.com/docs">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.
 
 ## Filtering and sorting
 Paragon currently provides a variety of filter types, and you can also define your own filter types.
 
 In the example below, a default ``TextFilter`` component is used as the default filter for all columns. A default filter can be passed in,
-or a filter component can be defined on the column using the ``Filter`` attribute. 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 using the ``Filter`` attribute. 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.
 
 ## Available filter functions
-A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://react-table.tanstack.com/docs/api/useFilters#column-options">react-table filters documentation</a>
+A filtering function can be defined on the column as well as the filter component. Custom filtering functions can also be defined, see <a href="https://github.com/TanStack/table/blob/v7/docs/src/pages/docs/api/useFilters.md#column-options" target="_blank" rel="noopener noreferrer">react-table filters documentation</a>
 for more information.
 Filter functions are defined on the column as the ``filter`` attribute.
 <dl>

package/src/DataTable/tests/DataTable.test.jsx

@@ -6,6 +6,8 @@ import { IntlProvider } from 'react-intl';
 
 import DataTable from '..';
 import DataTableContext from '../DataTableContext';
+import { TextFilter } from '../..';
+import { SELECT_ALL_TEST_ID } from '../selection/data/constants';
 
 const additionalColumns = [
   {
@@ -198,6 +200,35 @@ describe('<DataTable />', () => {
 
     expect(spinner).toBeTruthy();
   });
+  it('displays the total number of items when applying filter and selecting all items', async () => {
+    const propsWithSelection = {
+      ...props,
+      isSelectable: true,
+      isFilterable: true,
+      manualFilters: true,
+      defaultColumnValues: { Filter: TextFilter },
+      isPaginated: true,
+      initialState: { pageSize: 3, pageIndex: 0 },
+      pageCount: 3,
+      fetchData: jest.fn(),
+    };
+
+    render(<DataTableWrapper {...propsWithSelection} />);
+    const filtersButton = screen.getByRole('button', { name: 'Filters' });
+
+    await userEvent.click(filtersButton);
+
+    const searchFormControl = screen.getByPlaceholderText('Search coat color');
+    await userEvent.type(searchFormControl, 'brown tabby');
+
+    const selectAllCheckBox = screen.getByTitle('Toggle All Current Page Rows Selected');
+    await userEvent.click(selectAllCheckBox);
+
+    const selectAllButton = screen.getByTestId(SELECT_ALL_TEST_ID);
+    // A filtered array is returned from the backend,
+    // and the element counter displays its length.
+    expect(selectAllButton).toHaveTextContent('Select all 7');
+  });
 
   describe('[legacy] controlled table selections', () => {
     it('passes initial controlledTableSelections to context', async () => {

package/src/DataTable/tests/TablePagination.test.jsx

@@ -1,5 +1,5 @@
 import React from 'react';
-import { render, act } from '@testing-library/react';
+import { render, act, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
 
 import TablePagination from '../TablePagination';
@@ -29,21 +29,21 @@ describe('<TablePagination />', () => {
   it(
     'Shows dropdown button with the page count as label and performs actions when dropdown items are clicked',
     async () => {
-      const { getAllByTestId, getByRole } = render(<PaginationWrapper value={instance} />);
-      const dropdownButton = getByRole('button', { name: /2 of 3/i });
+      render(<PaginationWrapper value={instance} />);
+      const dropdownButton = screen.getByRole('button', { name: /2 of 3/i });
       expect(dropdownButton).toBeInTheDocument();
       await act(async () => {
         await userEvent.click(dropdownButton);
       });
 
-      const dropdownChoices = getAllByTestId('pagination-dropdown-item');
+      const dropdownChoices = screen.getAllByTestId('pagination-dropdown-item');
       expect(dropdownChoices.length).toEqual(instance.pageCount);
       await act(async () => {
-        await userEvent.click(dropdownChoices[1], undefined, { skipPointerEventsCheck: true });
+        await userEvent.click(dropdownChoices[2], undefined, { skipPointerEventsCheck: true });
       });
 
       expect(instance.gotoPage).toHaveBeenCalledTimes(1);
-      expect(instance.gotoPage).toHaveBeenCalledWith(1);
+      expect(instance.gotoPage).toHaveBeenCalledWith(2);
     },
   );
 });

package/src/Dropdown/README.md

@@ -14,6 +14,8 @@ categories:
 status: 'Stable'
 designStatus: 'Done'
 devStatus: 'Done'
+notes: |
+  TODO: Remove subcomponent of deprecated implementation soon
 ---
 
 <p className="lead">
@@ -120,3 +122,94 @@ You can use `Dropdown.Toggle` with [IconButton](/components/iconbutton) componen
   </Dropdown.Menu>
 </Dropdown>
 ```
+
+***
+
+## Dropdown.Deprecated
+
+```jsx live
+<Dropdown.Deprecated>
+  <Dropdown.Deprecated.Button>
+    Search Engines
+  </Dropdown.Deprecated.Button>
+  <Dropdown.Deprecated.Menu>
+    <Dropdown.Deprecated.Item href="https://google.com">Google</Dropdown.Deprecated.Item>
+    <Dropdown.Deprecated.Item href="https://duckduckgo.com">DuckDuckGo</Dropdown.Deprecated.Item>
+    <Dropdown.Deprecated.Item href="https://yahoo.com">Yahoo</Dropdown.Deprecated.Item>
+  </Dropdown.Deprecated.Menu>
+</Dropdown.Deprecated>
+```
+
+### (Deprecated) with icon element
+
+```jsx live
+<Dropdown.Deprecated>
+  <Dropdown.Deprecated.Button>
+    <Icon className="fa fa-user pr-3" alt="" />
+    Search Engines
+  </Dropdown.Deprecated.Button>
+  <Dropdown.Deprecated.Menu>
+    <Dropdown.Deprecated.Item href="https://google.com">Google</Dropdown.Deprecated.Item>
+    <Dropdown.Deprecated.Item href="https://duckduckgo.com">DuckDuckGo</Dropdown.Deprecated.Item>
+    <Dropdown.Deprecated.Item href="https://yahoo.com">Yahoo</Dropdown.Deprecated.Item>
+  </Dropdown.Deprecated.Menu>
+</Dropdown.Deprecated>
+```
+
+### (Deprecated) basic usage
+
+```jsx live
+<Dropdown.Deprecated
+  title="Search Engines"
+  menuItems={[
+    {
+      label: 'Google',
+      href: 'https://google.com',
+    },
+    {
+      label: 'DuckDuckGo',
+      href: 'https://duckduckgo.com',
+    },
+    {
+      label: 'Yahoo',
+      href: 'https://yahoo.com',
+    },
+  ]}
+/>
+```
+
+### (Deprecated) menu items as elements
+
+```jsx live
+<Dropdown.Deprecated
+  title="Search Engines"
+  menuItems={[
+    <a href="http://www.google.com">Google</a>,
+    <a href="http://www.duckduckgo.com">DuckDuckGo</a>,
+    <a href="http://www.yahoo.com">Yahoo</a>,
+  ]}
+/>
+```
+
+### (Deprecated) with icon element
+
+```jsx live
+<Dropdown.Deprecated
+  title="Search Engines"
+  iconElement={<Icon className="fa fa-user pr-3" />}
+  menuItems={[
+    {
+      label: 'Google',
+      href: 'https://google.com',
+    },
+    {
+      label: 'DuckDuckGo',
+      href: 'https://duckduckgo.com',
+    },
+    {
+      label: 'Yahoo',
+      href: 'https://yahoo.com',
+    },
+  ]}
+/>
+```

package/src/Dropdown/_variables.scss

@@ -0,0 +1,33 @@
+// Dropdowns
+//
+// Dropdown menu container and contents.
+
+$dropdown-min-width:                18rem !default;
+$dropdown-padding-x:                0 !default;
+$dropdown-padding-y:                .5rem !default;
+$dropdown-spacer:                   .125rem !default;
+$dropdown-font-size:                $font-size-base !default;
+$dropdown-color:                    $body-color !default;
+$dropdown-bg:                       $white !default;
+$dropdown-border-color:             rgba($black, .15) !default;
+$dropdown-border-radius:            $border-radius !default;
+$dropdown-border-width:             $border-width !default;
+$dropdown-inner-border-radius:      calc(#{$dropdown-border-radius} - #{$dropdown-border-width}) !default;
+$dropdown-divider-bg:               theme-color("gray", "background") !default;
+$dropdown-divider-margin-y:         calc($spacer / 2) !default;
+$dropdown-box-shadow:               0 .5rem 1rem rgba($black, .175) !default;
+
+$dropdown-link-color:               theme-color("gray", "dark-text") !default;
+$dropdown-link-hover-color:         darken(theme-color("gray", "dark-text"), 5%) !default;
+$dropdown-link-hover-bg:            $light-300 !default;
+
+$dropdown-link-active-color:        $component-active-color !default;
+$dropdown-link-active-bg:           $component-active-bg !default;
+
+$dropdown-link-disabled-color:      theme-color("gray", "light-text") !default;
+
+$dropdown-item-padding-y:           .25rem !default;
+$dropdown-item-padding-x:           1rem !default;
+
+$dropdown-header-color:             theme-color("gray", "light-text") !default;
+$dropdown-header-padding:           $dropdown-padding-y $dropdown-item-padding-x !default;