BD-39 modernize paragon for edx-platform

cms/envs/common.py

@@ -1357,6 +1357,8 @@
     # Load Bootstrap and supporting libraries
     'common/js/vendor/popper.js',
     'common/js/vendor/bootstrap.js',
+    'common/js/vendor/react.min.js',
+    'common/js/vendor/react-dom.min.js',
 
     # Finally load RequireJS
     'common/js/vendor/require.js'

cms/static/sass/_build.scss

@@ -3,9 +3,17 @@
 // Studio theme
 @import 'cms/theme/variables';
 
+// ----- Before BD-39 -----
 // Core Bootstrap functions, variables and mixins
-@import 'bootstrap/variables';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
-@import 'bootstrap/scss/mixins/grid';
+// @import 'bootstrap/variables';
+// @import 'bootstrap/scss/functions';
+// @import 'bootstrap/scss/variables';
+// @import 'bootstrap/scss/mixins/breakpoints';
+// @import 'bootstrap/scss/mixins/grid';
+// ----- After BD-39 -----
+// Paragon SASS framework
+@import 'paragon';
+
+// Legacy variables file
+@import './bootstrap/variables';
+// -----------------------

cms/static/sass/_paragon.scss

@@ -0,0 +1,14 @@
+// Paragon SASS framework plus variables that LMS expects.
+@import '@edx/paragon-new/scss/core/core';
+
+// Fill in variable gaps
+
+$inverse: $white !default;
+$pink: pink !default;
+
+$theme-colors: map-merge(
+  (
+    "inverse":    $inverse,
+  ),
+  $theme-colors
+);

cms/static/sass/bootstrap/_components.scss

@@ -70,8 +70,8 @@
     list-style: none;
 
     .cta-show-sock {
-      @extend %ui-btn-pill;
-      @extend %t-action4;
+      @extend %ui-btn-pill !optional;
+      @extend %t-action4 !optional;
 
       background: theme-color("light");
       padding: ($baseline/2) $baseline;
@@ -145,7 +145,7 @@
             display: block;
 
             .icon {
-              @extend %t-icon4;
+              @extend %t-icon4 !optional;
 
               vertical-align: middle;
               margin-right: $baseline/4;

cms/static/sass/bootstrap/_footer.scss

@@ -13,7 +13,7 @@
   padding: $baseline;
 
   footer.primary {
-    @extend %t-copy-sub2;
+    @extend %t-copy-sub2 !optional;
 
     @include clearfix();
 

cms/static/sass/bootstrap/_header.scss

@@ -74,8 +74,8 @@
   // basic layout - nav items
   nav {
     > ol > .nav-item {
-      @extend %t-action3;
-      @extend %t-strong;
+      @extend %t-action3 !optional;
+      @extend %t-strong !optional;
 
       display: inline-block;
       vertical-align: middle;
@@ -163,8 +163,8 @@
     }
 
     .course-title {
-      @extend %t-action2;
-      @extend %t-strong;
+      @extend %t-action2 !optional;
+      @extend %t-strong !optional;
 
       display: block;
       width: 100%;
@@ -422,8 +422,8 @@
     }
 
     .nav-item {
-      @extend %t-action3;
-      @extend %t-regular;
+      @extend %t-action3 !optional;
+      @extend %t-regular !optional;
 
       display: block;
       margin: 0 0 ($baseline/4) 0;

cms/static/sass/bootstrap/_layouts.scss

@@ -119,8 +119,8 @@
 
         // buttons
         .button {
-          @extend %btn-primary-blue;
-          @extend %sizing;
+          @extend %btn-primary-blue !optional;
+          @extend %sizing !optional;
 
           .action-button-text {
             display: inline-block;
@@ -135,8 +135,8 @@
           // CASE: new/create button
           &.new-button,
           &.button-new {
-            @extend %btn-primary-green;
-            @extend %sizing;
+            @extend %btn-primary-green !optional;
+            @extend %sizing !optional;
           }
         }
       }
@@ -164,7 +164,7 @@
         color: $body-color;
 
         &.navigation-current {
-          @extend %ui-disabled;
+          @extend %ui-disabled !optional;
 
           color: color("gray");
           max-width: 250px;
@@ -199,7 +199,7 @@
   // CASE: wizard-based mast
   .mast-wizard {
     .page-header-sub {
-      @extend %t-title4;
+      @extend %t-title4 !optional;
 
       color: color("gray");
       font-weight: 300;
@@ -247,15 +247,15 @@
     padding-bottom: ($baseline/2);
 
     .title-sub {
-      @extend %t-copy-sub1;
+      @extend %t-copy-sub1 !optional;
 
       display: block;
       margin: 0;
       color: $gray-500;
     }
 
     .title-1 {
-      @extend %t-title3;
+      @extend %t-title3 !optional;
       @extend %t-strong;
 
       margin: 0;
@@ -283,7 +283,7 @@
   }
 
   .title-3 {
-    @extend %t-title6;
+    @extend %t-title6 !optional;
 
     margin: 0 0 ($baseline/2) 0;
   }

cms/static/sass/bootstrap/_paragon.scss

@@ -0,0 +1,14 @@
+// Paragon SASS framework plus variables that Studio expects.
+@import '@edx/paragon-new/scss/core/core';
+
+// Fill in variable gaps
+
+$inverse: $white !default;
+$pink: pink !default;
+
+$theme-colors: map-merge(
+  (
+    "inverse":    $inverse,
+  ),
+  $theme-colors
+);

cms/static/sass/bootstrap/studio-main.scss

@@ -5,8 +5,13 @@
 // Studio theme variables
 @import 'cms/theme/variables';
 
+// ----- Before BD-39 -----
 // Bootstrap
-@import 'bootstrap/scss/bootstrap';
+// @import 'bootstrap/scss/bootstrap';
+// ----- After BD-39 -----
+// Paragon SASS framework
+@import '../paragon';
+// -----------------------
 
 // Legacy support
 @import 'legacy';

cms/static/sass/partials/cms/theme/_variables.scss

@@ -2,4 +2,4 @@
 
 $body-bg: #f5f5f5 !default;
 
-@import 'edx-bootstrap/sass/open-edx/theme';
+// @import 'edx-bootstrap/sass/open-edx/theme';

cms/static/sass/views/_updates.scss

@@ -196,7 +196,7 @@
   padding: 20px 30px;
   margin: 0;
 
-  @include border-radius(0, 3px, 3px, 0);
+  @include border-radius(0 3px 3px 0);
   @include border-left(none);
 
   background: $uxpl-light-blue-base;

common/static/sass/bourbon/addons/_triangle.scss

@@ -1,4 +1,4 @@
-@mixin triangle ($size, $color, $direction) {
+@mixin edx-triangle ($size, $color, $direction) {
   height: 0;
   width: 0;
 

lms/envs/common.py

@@ -2285,7 +2285,9 @@ def _make_locale_paths(settings):  # pylint: disable=missing-function-docstring
     'common/js/vendor/require.js',
     'js/RequireJS-namespace-undefine.js',
     'js/vendor/URI.min.js',
-    'common/js/vendor/backbone.js'
+    'common/js/vendor/backbone.js',
+    'common/js/vendor/react.min.js',
+    'common/js/vendor/react-dom.min.js',
 ]
 
 main_vendor_js = base_vendor_js + [
@@ -2677,7 +2679,9 @@ def _make_locale_paths(settings):  # pylint: disable=missing-function-docstring
     'js/groups/discussions_management/discussions_dashboard_factory':
         'js/discussions_management/views/discussions_dashboard_factory.js',
     'draggabilly': 'js/vendor/draggabilly.js',
-    'hls': 'common/js/vendor/hls.js'
+    'hls': 'common/js/vendor/hls.js',
+    'react': 'common/js/vendor/react.min.js',
+    'react-dom': 'common/js/vendor/react-dom.min.js',
 }
 
 ########################## DJANGO WEBPACK LOADER ##############################

lms/envs/devstack.py

@@ -455,7 +455,8 @@ def should_show_debug_toolbar(request):  # lint-amnesty, pylint: disable=missing
 # from .common import _make_mako_template_dirs
 # ENABLE_COMPREHENSIVE_THEMING = True
 # COMPREHENSIVE_THEME_DIRS = [
-#     "/edx/app/edxapp/edx-platform/themes/"
+#     "/edx/app/edxapp/edx-platform/themes/",
+#     "/edx/src/edx-themes/edx-platform",
 # ]
 # TEMPLATES[1]["DIRS"] = _make_mako_template_dirs
 # derive_settings(__name__)

lms/static/certificates/sass/main-ltr.scss

@@ -7,9 +7,14 @@
 // It should mirror main-rtl w/ the exception of bi-app references.
 
 @import '../sass/vendor/bi-app/bi-app-ltr';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+// ----- Before BD-39 -----
+// @import 'bootstrap/scss/functions';
+// @import 'bootstrap/scss/variables';
+// @import 'bootstrap/scss/mixins';
+// ----- After BD-39 -----
+// Paragon SASS Framework
+@import 'paragon';
+// -----------------------
 
 // Load the shared build
 @import 'build';

lms/static/certificates/sass/main-rtl.scss

@@ -7,9 +7,14 @@
 // It should mirror main-ltr w/ the exception of bi-app references.
 
 @import '../sass/vendor/bi-app/bi-app-rtl';
-@import 'bootstrap/scss/functions';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins';
+// ----- Before BD-39 -----
+// @import 'bootstrap/scss/functions';
+// @import 'bootstrap/scss/variables';
+// @import 'bootstrap/scss/mixins';
+// ----- After BD-39 -----
+// Paragon SASS Framework
+@import 'paragon';
+// -----------------------
 
 // Load the shared build
 @import 'build';

lms/static/js/accessible_components/StatusBarAlert.jsx

@@ -4,7 +4,7 @@ Wrapper for React/Paragon accessible status bar
 
 import React from 'react';
 import ReactDOM from 'react-dom';
-import { StatusAlert } from '@edx/paragon/static';
+import { StatusAlert } from '@edx/paragon';
 
 export class StatusAlertRenderer {
   constructor(message, selector, afterselector) {

lms/static/js/student_account/components/PasswordResetConfirmation.jsx

@@ -4,7 +4,7 @@ import 'whatwg-fetch';
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { Button, StatusAlert } from '@edx/paragon/static';
+import { Button, StatusAlert } from '@edx/paragon';
 
 import PasswordResetInput from './PasswordResetInput';
 

lms/static/js/student_account/components/PasswordResetInput.jsx

@@ -3,7 +3,7 @@
 import PropTypes from 'prop-types';
 import React from 'react';
 
-import { InputText } from '@edx/paragon/static';
+import { InputText } from '@edx/paragon';
 
 function PasswordResetInput(props) {
   return (

lms/static/js/student_account/components/StudentAccountDeletion.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger, import/prefer-default-export */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Icon, StatusAlert } from '@edx/paragon/static';
+import { Button, Icon, StatusAlert } from '@edx/paragon';
 import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 import StudentAccountDeletionModal from './StudentAccountDeletionModal';
 

lms/static/js/student_account/components/StudentAccountDeletionModal.jsx

@@ -2,7 +2,7 @@
 /* eslint-disable react/no-danger */
 import React from 'react';
 import PropTypes from 'prop-types';
-import { Button, Modal, Icon, InputText, StatusAlert } from '@edx/paragon/static';
+import { Button, Modal, Icon, InputText, StatusAlert } from '@edx/paragon';
 import StringUtils from 'edx-ui-toolkit/js/utils/string-utils';
 
 import { deactivate } from '../AccountsClient';

lms/static/sass/_build-footer-edx.scss

@@ -2,8 +2,14 @@
 // LMS edx.org Footer: Shared Build Compile
 @import 'lms/theme/variables';
 @import 'bootstrap/variables';
-@import 'bootstrap/scss/variables';
-@import 'bootstrap/scss/mixins/breakpoints';
+// ----- Before BD-39 -----
+// @import 'bootstrap/scss/variables';
+// @import 'bootstrap/scss/mixins/breakpoints';
+// ----- After BD-39 -----
+// Paragon SASS Framework
+@import 'paragon';
+// -----------------------
+
 @import '../variables';
 @import 'lms/theme/variables-v1';
 @import 'base/mixins';

lms/static/sass/_paragon.scss

@@ -0,0 +1,14 @@
+// Paragon SASS framework plus variables that LMS expects.
+@import '@edx/paragon-new/scss/core/core';
+
+// Fill in variable gaps
+
+$inverse: $white !default;
+$pink: pink !default;
+
+$theme-colors: map-merge(
+  (
+    "inverse":    $inverse,
+  ),
+  $theme-colors
+);

lms/static/sass/_variables.scss

@@ -5,5 +5,6 @@ $text-width-readability-max: 1080px;
 // LMS-only colors
 $audit-mode-color: rgb(74, 74, 74) !default;
 $honor-mode-color: theme-color("primary") !default;
-$verified-mode-color: theme-color("purchase") !default;
+$verified-mode-color: theme-color("success") !default;
 $professional-certificate-color: #9a1f60 !default;
+$pink: pink !default;