richie-education 2.30.0 → 2.30.1-dev11

package/jest.config.js

@@ -15,7 +15,7 @@ module.exports = {
   },
   resolver: '<rootDir>/jest/resolver.js',
   transformIgnorePatterns: [
-    'node_modules/(?!(lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
+    'node_modules/(?!(react-intl|lodash-es|@hookform/resolvers|query-string|decode-uri-component|split-on-first|filter-obj|@openfun/cunningham-react)/)',
   ],
   globals: {
     RICHIE_VERSION: 'test',

package/js/widgets/SyllabusCourseRunsList/components/SyllabusCourseRunCompacted/index.tsx

@@ -1,3 +1,4 @@
+import { Button } from '@openfun/cunningham-react';
 import { defineMessages, FormattedMessage, useIntl } from 'react-intl';
 import { CourseRun, CourseRunDisplayMode, PacedCourse } from 'types';
 import useDateFormat from 'hooks/useDateFormat';
@@ -76,9 +77,9 @@ const OpenedSelfPacedCourseRun = ({
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />
       ) : (
-        <a className="course-run-enrollment__cta" href={courseRun.resource_link}>
+        <Button className="course-run-enrollment__cta" href={courseRun.resource_link} fullWidth>
           {StringHelper.capitalizeFirst(courseRun.state.call_to_action)}
-        </a>
+        </Button>
       )}
     </>
   );

package/js/widgets/SyllabusCourseRunsList/index.tsx

@@ -85,7 +85,7 @@ const SyllabusCourseRunsList = ({
         </div>
       )}
       {openedRuns.length === 1 &&
-        (course.is_self_paced && openedRuns[0].state.priority !== Priority.ARCHIVED_OPEN ? (
+        (course.is_self_paced && openedRuns[0].state.priority === Priority.ONGOING_OPEN ? (
           <div className="course-detail__row course-detail__runs course-detail__runs--open">
             <SyllabusCourseRunCompacted
               courseRun={openedRuns[0]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.0",
+  "version": "2.30.1-dev11",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,51 +38,50 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.25.7",
+    "@babel/core": "7.26.0",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
-    "@babel/plugin-transform-modules-commonjs": "7.25.7",
-    "@babel/preset-env": "7.25.7",
-    "@babel/preset-react": "7.25.7",
-    "@babel/preset-typescript": "7.25.7",
-    "@faker-js/faker": "9.0.3",
-    "@formatjs/cli": "6.2.14",
-    "@formatjs/intl-relativetimeformat": "11.2.15",
+    "@babel/plugin-transform-modules-commonjs": "7.25.9",
+    "@babel/preset-env": "7.26.0",
+    "@babel/preset-react": "7.25.9",
+    "@babel/preset-typescript": "7.26.0",
+    "@faker-js/faker": "9.1.0",
+    "@formatjs/cli": "6.3.5",
+    "@formatjs/intl-relativetimeformat": "11.4.1",
     "@hookform/resolvers": "3.9.0",
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "2.9.4",
     "@openfun/cunningham-tokens": "2.1.1",
-    "@sentry/browser": "8.33.1",
-    "@sentry/types": "8.33.1",
-    "@storybook/addon-actions": "8.3.5",
-    "@storybook/addon-essentials": "8.3.5",
-    "@storybook/addon-interactions": "8.3.5",
-    "@storybook/addon-links": "8.3.5",
-    "@storybook/react": "8.3.5",
-    "@storybook/react-webpack5": "8.3.5",
-    "@storybook/test": "8.3.5",
-    "@tanstack/query-core": "5.59.4",
-    "@tanstack/query-sync-storage-persister": "5.59.4",
-    "@tanstack/react-query": "5.59.4",
-    "@tanstack/react-query-devtools": "5.59.4",
-    "@tanstack/react-query-persist-client": "5.59.4",
+    "@sentry/browser": "8.35.0",
+    "@sentry/types": "8.35.0",
+    "@storybook/addon-actions": "8.3.6",
+    "@storybook/addon-essentials": "8.3.6",
+    "@storybook/addon-interactions": "8.3.6",
+    "@storybook/addon-links": "8.3.6",
+    "@storybook/react": "8.3.6",
+    "@storybook/react-webpack5": "8.3.6",
+    "@storybook/test": "8.3.6",
+    "@tanstack/query-core": "5.59.16",
+    "@tanstack/query-sync-storage-persister": "5.59.16",
+    "@tanstack/react-query": "5.59.16",
+    "@tanstack/react-query-devtools": "5.59.16",
+    "@tanstack/react-query-persist-client": "5.59.16",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.5.0",
+    "@testing-library/jest-dom": "6.6.2",
     "@testing-library/react": "16.0.1",
     "@testing-library/user-event": "14.5.2",
     "@types/fetch-mock": "7.3.8",
     "@types/iframe-resizer": "3.5.13",
-    "@types/jest": "29.5.13",
+    "@types/jest": "29.5.14",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.11",
     "@types/query-string": "6.3.0",
-    "@types/react": "18.3.11",
+    "@types/react": "18.3.12",
     "@types/react-autosuggest": "10.1.11",
-    "@types/react-dom": "18.3.0",
+    "@types/react-dom": "18.3.1",
     "@types/react-modal": "3.16.3",
-    "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.8.1",
-    "@typescript-eslint/parser": "8.8.1",
+    "@typescript-eslint/eslint-plugin": "8.11.0",
+    "@typescript-eslint/parser": "8.11.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
@@ -97,13 +96,13 @@
     "eslint-config-prettier": "9.1.0",
     "eslint-import-resolver-webpack": "0.13.9",
     "eslint-plugin-compat": "6.0.1",
-    "eslint-plugin-formatjs": "5.0.2",
+    "eslint-plugin-formatjs": "5.1.5",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.10.2",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.1",
-    "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.9.0",
+    "eslint-plugin-react": "7.37.2",
+    "eslint-plugin-react-hooks": "5.0.0",
+    "eslint-plugin-storybook": "0.10.1",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.0.0",
@@ -115,7 +114,7 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.4.9",
+    "msw": "2.5.2",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.1.7",
     "prettier": "3.3.3",
@@ -123,16 +122,16 @@
     "react": "18.3.1",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.53.0",
-    "react-intl": "6.7.2",
+    "react-hook-form": "7.53.1",
+    "react-intl": "6.8.4",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.26.2",
-    "sass": "1.79.4",
+    "react-router-dom": "6.27.0",
+    "sass": "1.80.4",
     "source-map-loader": "5.0.0",
-    "storybook": "8.3.5",
+    "storybook": "8.3.6",
     "tsconfig-paths-webpack-plugin": "4.1.0",
     "typescript": "5.6.3",
-    "uuid": "10.0.0",
+    "uuid": "11.0.2",
     "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
@@ -142,8 +141,8 @@
   },
   "resolutions": {
     "@testing-library/dom": "10.4.0",
-    "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0"
+    "@types/react": "18.3.12",
+    "@types/react-dom": "18.3.1"
   },
   "msw": {
     "workerDirectory": "../richie/static/richie/js"
@@ -152,7 +151,7 @@
     "node": "20.11.0"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.3.5",
+    "@storybook/addon-mdx-gfm": "8.3.6",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }

package/scss/components/templates/richie/section/_section.scss

@@ -1,3 +1,6 @@
+$r-section-grid-sizes: () !default;
+$r-section-grid-gutters: () !default;
+
 section {
   // Ensure caesura always takes full width with some space around
   // within flex grid
@@ -70,6 +73,9 @@ section {
       }
     }
   }
+
+  // Enable CSS grid
+  @include m-o-grid($r-section-grid-sizes, $r-section-grid-gutters);
 }
 
 //
@@ -127,6 +133,9 @@ section {
     }
   }
 
+  // Enable CSS grid
+  @include m-o-grid($r-section-grid-sizes, $r-section-grid-gutters);
+
   .category-glimpse {
     @include sv-flex(1, 0, calc(15% - 1rem));
     max-width: none;

package/scss/settings/_variables.scss

@@ -165,3 +165,20 @@ $r-search-filters-gutter: 0.2rem !default;
 $r-ease-in: cubic-bezier(0.5, 0, 0.75, 0) !default;
 $r-ease-out: cubic-bezier(0.25, 1, 0.5, 1) !default;
 $r-ease-in-out: cubic-bezier(0.76, 0, 0.24, 1) !default;
+
+// Define the grid column template for Section grid
+// Each item will be a variant to allow on grid
+$r-section-grid-sizes: (
+  '50x50': 1fr 1fr,
+  '33x33x33': 1fr 1fr 1fr,
+  '25x75': 25% 2fr,
+  '75x25': 2fr 25%,
+);
+
+// Define gutter size to apply on Section grid
+// Each item is a breakpoint where to apply the gutter, breakpoint 'sm' is used as
+// the default gutter size for minimal breakpoint if defined
+$r-section-grid-gutters: (
+  'sm': 0.5rem,
+  'xl': 1rem,
+);

package/scss/tools/_grids.scss

@@ -0,0 +1,50 @@
+// Basic CSS grid
+
+// Define CSS grid rules for content
+@mixin m-o-grid($grid-sizes, $grid-gutters) {
+  // CSS grid definition
+  &__grid {
+    display: grid;
+    grid-template-columns: 100%;
+
+    // Neutralize and adapt some rules that for content items that can define some
+    // rules which conflict with expected section grid behaviors
+    & > * {
+      min-width: auto !important;
+      max-width: none !important;
+    }
+
+    // Adjust button caesura
+    & > .button-caesura {
+      display: block;
+    }
+
+    // Enable column size only for large screen and up
+    @include media-breakpoint-up(lg) {
+      @each $key, $value in $r-section-grid-sizes {
+        &--#{$key} {
+          grid-template-columns: $value;
+        }
+      }
+    }
+
+    // Variants with a gutter between content items
+    &--with-gutter {
+      @if map-get($r-section-grid-gutters, 'sm') {
+        column-gap: map-get($r-section-grid-gutters, 'sm');
+        row-gap: map-get($r-section-grid-gutters, 'sm');
+      }
+      @each $key, $value in $r-section-grid-gutters {
+        @include media-breakpoint-up($key) {
+          column-gap: $value;
+          row-gap: $value;
+        }
+      }
+
+      // Disable contents margin in profit of grid gutter
+      & > * {
+        margin: 0 !important;
+      }
+    }
+  }
+}

package/scss/tools/_index.scss

@@ -7,6 +7,7 @@
 @import './empty';
 @import './features';
 @import './flexbox';
+@import './grids';
 @import './hero';
 @import './keyframes';
 @import './list-group';

package/webpack.config.js

@@ -21,7 +21,7 @@ module.exports = (env) => {
     ? require(path.join(process.cwd(), richieSettings)).overrides
     : {};
 
-  const babelCompileDeps = ['react-intl', 'react-modal', 'strict-uri-encode'];
+  const babelCompileDeps = ['react-modal'];
 
   // Get the version from package.json to make it available in the bundle
   let version;