feat!: upgrade to Ulmo

.gitignore

@@ -20,3 +20,4 @@ temp/babel-plugin-react-intl
 
 # Local environment overrides
 .env.private
+env.config.js

.nvmrc

@@ -1 +1 @@
-20
+24

README.rst

@@ -63,6 +63,12 @@ Follow these steps to set up the Learning Paths MFE with Tutor:
 
       tutor plugins enable learning_paths
 
+#. Build the Learning Paths image:
+
+   .. code-block:: bash
+
+      tutor images build learning-paths-dev
+
 #. Build the MFE image:
 
    .. code-block:: bash
@@ -121,6 +127,12 @@ After completing the Tutor setup, prepare the repository for local development:
 
 #. Make changes to the code and see them reflected in real-time.
 
+#. If you want to use footer slots defined in tutor plugins, use the following command (change the image tag if needed):
+
+   .. code-block:: bash
+
+      docker run --rm overhangio/openedx-learning-paths-dev:21.0.0 cat env.config.jsx > env.config.js
+
 Local Development
 -----------------
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-craft/frontend-app-learning-paths",
-  "version": "0.1.5",
+  "version": "0.2.0",
   "description": "Frontend application template",
   "repository": {
     "type": "git",
@@ -37,16 +37,17 @@
   },
   "dependencies": {
     "@edx/brand": "npm:@openedx/brand-openedx@^1.2.3",
-    "@edx/frontend-component-header": "^6.3.0",
-    "@edx/frontend-platform": "^8.3.4",
+    "@edx/frontend-component-footer": "^14.6.0",
+    "@edx/frontend-component-header": "^8.0.0",
+    "@edx/frontend-platform": "^8.4.0",
     "@edx/openedx-atlas": "^0.7.0",
     "@fortawesome/fontawesome-svg-core": "1.2.36",
     "@fortawesome/free-brands-svg-icons": "5.15.4",
     "@fortawesome/free-regular-svg-icons": "5.15.4",
     "@fortawesome/free-solid-svg-icons": "5.15.4",
     "@fortawesome/react-fontawesome": "0.2.2",
-    "@openedx/frontend-slot-footer": "^1.2.0",
-    "@openedx/paragon": "^22.17.0",
+    "@openedx/frontend-plugin-framework": "^1.7.0",
+    "@openedx/paragon": "^23.4.5",
     "@tanstack/react-query": "^5.72.1",
     "@tanstack/react-query-devtools": "^5.72.1",
     "core-js": "3.41.0",
@@ -62,7 +63,7 @@
   "devDependencies": {
     "@edx/browserslist-config": "^1.5.0",
     "@edx/reactifex": "^2.2.0",
-    "@openedx/frontend-build": "14.4.2",
+    "@openedx/frontend-build": "^14.6.2",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^14.3.1",
     "glob": "7.2.3",

src/learningpath/index.css → src/index.css

@@ -4,6 +4,50 @@
   --icon-blue: #293352;
 }
 
+button {
+  &.btn-primary {
+    background-color: var(--crimson) !important;
+    border-color: var(--crimson) !important;
+    color: white !important;
+  }
+
+  &.btn-tertiary {
+    color: #373737 !important;
+    background-color: transparent !important;
+
+    &:hover {
+      background-color: #f4f4f4 !important;
+      color: unset !important;
+    }
+  }
+
+  &.btn-secondary {
+    background-color: transparent !important;
+    border-color: #0a3055 !important;
+    color: #0a3055 !important;
+
+    &:hover {
+      background-color: #f4f4f4 !important;
+    }
+  }
+
+  &.btn-brand {
+    background-color: #0a3055 !important;
+    border-color: #0a3055 !important;
+    color: white !important;
+
+    &:hover:not(:disabled) {
+      background-color: #082644 !important;
+      border-color: #082644 !important;
+    }
+
+    &:disabled {
+      background-color: #454545 !important;
+      border-color: #454545 !important;
+    }
+  }
+}
+
 #root {
   /* Make the footer stick to the bottom when there is not enough content. */
   height: 100%;
@@ -114,10 +158,6 @@
       margin-top: 1rem;
       margin-bottom: 20px;
 
-      &.filter-button, &.filter-button:hover, &.filter-button:active, &.page-link.btn-primary {
-        background-color: var(--crimson) !important;
-      }
-
       &.page-link {
         border-radius: 0;
       }
@@ -131,11 +171,6 @@
       .dropdown-toggle {
         padding-right: 8px;
       }
-
-      .page-item > .btn-icon-primary:hover {
-        color: unset;
-        background-color: #E1DDDB;
-      }
     }
   }
 }
@@ -616,7 +651,7 @@
 }
 
 .filter-panel.sidebar {
-  top: 4.3rem;
+  top: 4rem;
   left: -350px;
   width: 350px;
   background-color: white;
@@ -649,11 +684,6 @@
 
   .filter-content-buttons .btn {
     border-color: #E0E0E0;
-
-    &.active {
-      background-color: var(--crimson);
-      color: white;
-    }
   }
 
   .filter-actions {
@@ -662,7 +692,6 @@
     .btn {
       /* This is !important to override edges in the middle of the button group. */
       border-radius: 0.25rem !important;
-      border-color: var(--icon-blue);
     }
   }
 }

src/index.jsx

@@ -10,15 +10,15 @@ import { Routes, Route } from 'react-router-dom';
 import { QueryClientProvider } from '@tanstack/react-query';
 import { ReactQueryDevtools } from '@tanstack/react-query-devtools';
 
-import { LearningHeader as Header } from '@edx/frontend-component-header';
-import FooterSlot from '@openedx/frontend-slot-footer';
+import Header from '@edx/frontend-component-header';
+import { FooterSlot } from '@edx/frontend-component-footer';
 import messages from './i18n';
 import queryClient from './queryClient';
 import Dashboard from './learningpath/Dashboard';
 import LearningPathDetailPage from './learningpath/LearningPathDetails';
 import CourseDetailPage from './learningpath/CourseDetails';
 
-import './index.scss';
+import './index.css';
 import './setupConsoleOverride';
 
 subscribe(APP_READY, () => {

src/learningpath/CourseCard.jsx

@@ -147,16 +147,16 @@ export const CourseCard = ({
             </Col>
             <div className="d-flex align-self-end ml-auto">
               {onClickViewButton && (
-                <Button variant="outline-primary" onClick={onClickViewButton} className="mr-2 text-nowrap">More Info</Button>
+                <Button variant="secondary" onClick={onClickViewButton} className="mr-2 text-nowrap">More Info</Button>
               )}
               {showStartButton && (
                 onClick ? (
-                  <Button variant="outline-primary" onClick={onClick} disabled={disableStartButton}>
+                  <Button variant="secondary" onClick={onClick} disabled={disableStartButton}>
                     {buttonText}
                   </Button>
                 ) : (
                   <Link to={linkTo}>
-                    <Button variant="outline-primary" disabled={disableStartButton}>{buttonText}</Button>
+                    <Button variant="secondary" disabled={disableStartButton}>{buttonText}</Button>
                   </Link>
                 )
               )}

src/learningpath/CourseDetails.jsx

@@ -73,7 +73,7 @@ const CourseDetailContent = ({
     <>
       <div className="hero">
         {isModalView && (
-          <Row className="p-0 m-0 d-flex align-items-center modal-header">
+          <Row className="p-0 m-0 d-flex align-items-center modal-header justify-content-between">
             <Col xs={10}>
               <h4 className="mb-0 pl-4 text-muted font-weight-normal text-truncate">
                 <b>Learning Path:</b> {learningPathTitle}

src/learningpath/Dashboard.jsx

@@ -332,7 +332,7 @@ const Dashboard = () => {
               )}
               <div className="d-flex justify-content-between align-items-center">
                 {!showFilters && !isSmall && (
-                  <Button onClick={() => setShowFilters(true)} variant="secondary" className="filter-button border-0">
+                  <Button onClick={() => setShowFilters(true)} variant="primary" className="filter-button border-0">
                     <Icon src={FilterAlt} /> Filter
                   </Button>
                 )}

src/learningpath/FilterPanel.jsx

@@ -48,21 +48,21 @@ const FilterPanel = ({
     <div className="my-3">
       <ButtonGroup className="filter-content-buttons">
         <Button
-          variant={selectedContentType === 'All' ? 'primary' : 'outline-secondary'}
+          variant={selectedContentType === 'All' ? 'primary' : 'tertiary'}
           onClick={() => onSelectContentType('All')}
           active={selectedContentType === 'All'}
         >
           All
         </Button>
         <Button
-          variant={selectedContentType === 'course' ? 'primary' : 'outline-secondary'}
+          variant={selectedContentType === 'course' ? 'primary' : 'tertiary'}
           onClick={() => onSelectContentType('course')}
           active={selectedContentType === 'course'}
         >
           Courses
         </Button>
         <Button
-          variant={selectedContentType === 'learning_path' ? 'primary' : 'outline-secondary'}
+          variant={selectedContentType === 'learning_path' ? 'primary' : 'tertiary'}
           onClick={() => onSelectContentType('learning_path')}
           active={selectedContentType === 'learning_path'}
         >
@@ -80,9 +80,9 @@ const FilterPanel = ({
           onChange={e => onChangeStatus(e.target.value, e.target.checked)}
           value={selectedStatuses}
         >
-          <Form.Checkbox value="In progress" className="font-weight-light">In progress</Form.Checkbox>
-          <Form.Checkbox value="Not started" className="font-weight-light">Not started</Form.Checkbox>
-          <Form.Checkbox value="Completed" className="font-weight-light">Completed</Form.Checkbox>
+          <Form.Checkbox value="In progress" className="text-muted">In progress</Form.Checkbox>
+          <Form.Checkbox value="Not started" className="text-muted">Not started</Form.Checkbox>
+          <Form.Checkbox value="Completed" className="text-muted">Completed</Form.Checkbox>
         </Form.CheckboxSet>
       </Form.Group>
     </div>
@@ -96,9 +96,9 @@ const FilterPanel = ({
           onChange={e => onChangeDateStatus(e.target.value, e.target.checked)}
           value={selectedDateStatuses}
         >
-          <Form.Checkbox value="Open" className="font-weight-light">Open</Form.Checkbox>
-          <Form.Checkbox value="Upcoming" className="font-weight-light">Upcoming</Form.Checkbox>
-          <Form.Checkbox value="Ended" className="font-weight-light">Ended</Form.Checkbox>
+          <Form.Checkbox value="Open" className="text-muted">Open</Form.Checkbox>
+          <Form.Checkbox value="Upcoming" className="text-muted">Upcoming</Form.Checkbox>
+          <Form.Checkbox value="Ended" className="text-muted">Ended</Form.Checkbox>
         </Form.CheckboxSet>
       </Form.Group>
     </div>
@@ -114,7 +114,7 @@ const FilterPanel = ({
             value={selectedOrgs}
           >
             {organizations.map(org => (
-              <Form.Checkbox key={org.shortName} value={org.shortName} className="font-weight-light">
+              <Form.Checkbox key={org.shortName} value={org.shortName} className="text-muted">
                 {org.name || org.shortName}
               </Form.Checkbox>
             ))}

src/learningpath/LearningPathCard.jsx

@@ -138,7 +138,7 @@ const LearningPathCard = ({ learningPath, showFilters = false }) => {
           </Card.Section>
           <div className="d-flex align-self-end ml-auto">
             <Link to={`/learningpath/${key}`}>
-              <Button variant="outline-primary">{buttonText}</Button>
+              <Button variant="secondary">{buttonText}</Button>
             </Link>
           </div>
         </Card.Footer>

src/learningpath/LearningPathDetails.jsx

@@ -257,7 +257,7 @@ const LearningPathDetailPage = () => {
               )}
             </Nav>
             <Button
-              variant={enrollmentDate ? 'secondary' : 'primary'}
+              variant="brand"
               className="ml-auto rounded-0 px-5.5 align-self-stretch"
               onClick={handleEnrollClick}
               disabled={enrolling || !!enrollmentDate}