@openedx/paragon 22.6.0 → 23.0.0-alpha.2

package/src/DataTable/CollapsibleButtonGroup.jsx

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

package/src/DataTable/index.scss

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

package/src/Dropdown/README.md

@@ -14,8 +14,6 @@ categories:
 status: 'Stable'
 designStatus: 'Done'
 devStatus: 'Done'
-notes: |
-  TODO: Remove subcomponent of deprecated implementation soon
 ---
 
 <p className="lead">
@@ -122,94 +120,3 @@ 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/dropdown-bootstrap.scss

@@ -0,0 +1,181 @@
+.dropup,
+.dropright,
+.dropdown,
+.dropleft {
+  position: relative;
+}
+
+.dropdown-toggle {
+  white-space: nowrap;
+
+  @include caret();
+}
+
+.dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  z-index: var(--pgn-elevation-dropdown-zindex);
+  display: none;
+  float: left;
+  min-width: var(--pgn-size-dropdown-min-width);
+  padding: var(--pgn-spacing-dropdown-padding-y-base) var(--pgn-spacing-dropdown-padding-x-base);
+  margin: var(--pgn-spacing-dropdown-spacer) 0 0;
+  color: var(--pgn-color-dropdown-text);
+  text-align: left;
+  list-style: none;
+  background-color: var(--pgn-color-dropdown-bg);
+  background-clip: padding-box;
+  border: var(--pgn-size-dropdown-border-width) solid var(--pgn-color-dropdown-border);
+  box-shadow: var(--pgn-elevation-dropdown-box-shadow);
+
+  @include font-size(var(--pgn-typography-dropdown-font-size));
+  @include border-radius(var(--pgn-size-dropdown-border-radius-base));
+
+  &[x-placement^="top"],
+  &[x-placement^="right"],
+  &[x-placement^="bottom"],
+  &[x-placement^="left"] {
+    right: auto;
+    bottom: auto;
+  }
+}
+
+@each $breakpoint in map-keys($grid-breakpoints) {
+  @include media-breakpoint-up($breakpoint) {
+    $infix: breakpoint-infix($breakpoint, $grid-breakpoints);
+
+    .dropdown-menu#{$infix}-left {
+      right: auto;
+      left: 0;
+    }
+
+    .dropdown-menu#{$infix}-right {
+      right: 0;
+      left: auto;
+    }
+  }
+}
+
+.dropup {
+  .dropdown-menu {
+    top: auto;
+    bottom: 100%;
+    margin-top: 0;
+    margin-bottom: var(--pgn-spacing-dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(up);
+  }
+}
+
+.dropright {
+  .dropdown-menu {
+    top: 0;
+    right: auto;
+    left: 100%;
+    margin-top: 0;
+    margin-left: var(--pgn-spacing-dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(right);
+
+    &::after {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropleft {
+  .dropdown-menu {
+    top: 0;
+    right: 100%;
+    left: auto;
+    margin-top: 0;
+    margin-right: var(--pgn-spacing-dropdown-spacer);
+  }
+
+  .dropdown-toggle {
+    @include caret(left);
+
+    &::before {
+      vertical-align: 0;
+    }
+  }
+}
+
+.dropdown-divider {
+  @include nav-divider(var(--pgn-color-dropdown-divider-bg), var(--pgn-spacing-dropdown-divider-margin-y), true);
+}
+
+.dropdown-item {
+  display: block;
+  width: 100%;
+  padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
+  clear: both;
+  font-weight: var(--pgn-typography-font-weight-normal);
+  color: var(--pgn-color-dropdown-link-base);
+  text-align: inherit;
+  text-decoration: var(--pgn-typography-dropdown-item-text-decoration);
+  white-space: nowrap;
+  background-color: transparent;
+  border: 0;
+
+  @if var(--pgn-spacing-dropdown-padding-y-base) == 0 {
+    &:first-child {
+      @include border-top-radius(var(--pgn-size-dropdown-border-radius-inner));
+    }
+
+    &:last-child {
+      @include border-bottom-radius(var(--pgn-size-dropdown-border-radius-inner));
+    }
+  }
+
+  @include hover-focus() {
+    color: var(--pgn-color-dropdown-link-hover-base);
+    text-decoration: none;
+
+    @include gradient-bg(var(--pgn-color-dropdown-link-hover-bg));
+  }
+
+  &.active,
+  &:active {
+    color: var(--pgn-color-dropdown-link-active-base);
+    text-decoration: none;
+
+    @include gradient-bg(var(--pgn-color-dropdown-link-active-bg));
+  }
+
+  &.disabled,
+  &:disabled {
+    color: var(--pgn-color-dropdown-link-disabled);
+    pointer-events: none;
+    background-color: transparent;
+
+    @if $enable-gradients {
+      background-image: none;
+    }
+  }
+}
+
+.dropdown-menu.show {
+  display: block;
+}
+
+.dropdown-header {
+  display: block;
+  padding: var(--pgn-spacing-dropdown-padding-header);
+  margin-bottom: 0;
+  color: var(--pgn-color-dropdown-header);
+  white-space: nowrap;
+
+  @include font-size(var(--pgn-typography-font-size-sm));
+}
+
+.dropdown-item-text {
+  display: block;
+  padding: var(--pgn-spacing-dropdown-padding-y-item) var(--pgn-spacing-dropdown-padding-x-item);
+  color: var(--pgn-color-dropdown-link-base);
+}

package/src/Dropdown/index.jsx

@@ -5,7 +5,6 @@ import BaseDropdown from 'react-bootstrap/Dropdown';
 import DropdownMenu from 'react-bootstrap/DropdownMenu';
 import BaseDropdownItem from 'react-bootstrap/DropdownItem';
 import BaseDropdownToggle from 'react-bootstrap/DropdownToggle';
-import DropdownDeprecated from './deprecated';
 import Button from '../Button';
 import IconButton from '../IconButton';
 
@@ -138,7 +137,6 @@ Dropdown.Item.defaultProps = {
   className: undefined,
 };
 
-Dropdown.Deprecated = DropdownDeprecated;
 Dropdown.Toggle = DropdownToggle;
 Dropdown.Menu = DropdownMenu;
 Dropdown.Header = BaseDropdown.Header;

package/src/Dropdown/index.scss

@@ -1,47 +1,46 @@
-@import "variables";
-@import "~bootstrap/scss/dropdown";
+@import "dropdown-bootstrap";
 
 .pgn__dropdown-dark {
   .dropdown-menu {
-    background-color: $dark-300;
-    color: $white;
+    background-color: var(--pgn-color-dark-300);
+    color: var(--pgn-color-white);
 
     .pgn__dropdown-item {
-      color: $white;
+      color: var(--pgn-color-white);
       font-weight: 400;
 
       &:hover {
-        background-color: $dark-200;
+        background-color: var(--pgn-color-dark-200);
       }
 
       &.active {
-        background-color: $light-300;
-        color: $primary-700;
+        background-color: var(--pgn-color-light-300);
+        color: var(--pgn-color-primary-700);
         font-weight: 700;
       }
 
       &:focus {
-        border: 2px solid $white;
+        border: 2px solid var(--pgn-color-white);
         background-color: inherit;
       }
     }
 
     .dropdown-header {
-      color: $light-700;
+      color: var(--pgn-color-light-700);
     }
 
 
     .dropdown-divider {
-      border-color: $dark-200;
+      border-color: var(--pgn-color-dark-200);
     }
   }
 }
 
 .dropdown-toggle::after {
+  content: "";
   border: 0;
   border-style: solid;
   border-width: .15rem .15rem 0 0;
-  content: "";
   height: .45rem;
   margin-inline-start: .5em;
   position: relative;