richie-education 2.30.0 → 2.30.1-dev3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.30.0",
+  "version": "2.30.1-dev3",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,35 +38,35 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.25.7",
+    "@babel/core": "7.25.8",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.25.7",
-    "@babel/preset-env": "7.25.7",
+    "@babel/preset-env": "7.25.8",
     "@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",
+    "@formatjs/cli": "6.3.0",
+    "@formatjs/intl-relativetimeformat": "11.2.16",
     "@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.13",
+    "@tanstack/query-sync-storage-persister": "5.59.13",
+    "@tanstack/react-query": "5.59.15",
+    "@tanstack/react-query-devtools": "5.59.15",
+    "@tanstack/react-query-persist-client": "5.59.15",
     "@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",
@@ -78,11 +78,11 @@
     "@types/query-string": "6.3.0",
     "@types/react": "18.3.11",
     "@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.10.0",
+    "@typescript-eslint/parser": "8.10.0",
     "babel-jest": "29.7.0",
     "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
@@ -97,13 +97,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.1",
     "eslint-plugin-import": "2.31.0",
-    "eslint-plugin-jsx-a11y": "6.10.0",
+    "eslint-plugin-jsx-a11y": "6.10.1",
     "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-hooks": "5.0.0",
+    "eslint-plugin-storybook": "0.10.1",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.0.0",
@@ -115,7 +115,7 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.4.9",
+    "msw": "2.4.11",
     "node-fetch": ">2.6.6 <3",
     "nodemon": "3.1.7",
     "prettier": "3.3.3",
@@ -123,13 +123,13 @@
     "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.0",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.26.2",
-    "sass": "1.79.4",
+    "react-router-dom": "6.27.0",
+    "sass": "1.80.3",
     "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",
@@ -143,7 +143,7 @@
   "resolutions": {
     "@testing-library/dom": "10.4.0",
     "@types/react": "18.3.11",
-    "@types/react-dom": "18.3.0"
+    "@types/react-dom": "18.3.1"
   },
   "msw": {
     "workerDirectory": "../richie/static/richie/js"
@@ -152,7 +152,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';