richie-education 2.29.3-dev41 → 2.29.3-dev50

package/js/components/Form/utils.ts

@@ -13,7 +13,8 @@ export const getLocalizedErrorMessage = (
     return intl.formatMessage(errorMessages[ErrorKeys.MIXED_INVALID]);
   }
 
-  return intl.formatMessage(errorMessages[error.key], error.values);
+  const message = intl.formatMessage(errorMessages[error.key], error.values);
+  return message as string | string[];
 };
 
 interface CunninghamErrorProp {

package/js/utils/test/factories/joanie.ts

@@ -254,7 +254,12 @@ export const CourseRunFactory = factory((): CourseRun => {
       call_to_action: 'enroll now',
       text: CourseStateTextEnum.ENROLLMENT_OPENED,
     }).one(),
-    languages: faker.helpers.multiple(faker.location.countryCode, { count: { min: 1, max: 5 } }),
+    languages: faker.helpers.multiple(() => faker.location.countryCode(), {
+      count: {
+        min: 1,
+        max: 5,
+      },
+    }),
   };
 });
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.29.3-dev41",
+  "version": "2.29.3-dev50",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -41,73 +41,73 @@
     "@babel/core": "7.25.2",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.24.8",
-    "@babel/preset-env": "7.25.3",
+    "@babel/preset-env": "7.25.4",
     "@babel/preset-react": "7.24.7",
     "@babel/preset-typescript": "7.24.7",
-    "@faker-js/faker": "8.4.1",
+    "@faker-js/faker": "9.0.3",
     "@formatjs/cli": "6.2.12",
     "@formatjs/intl-relativetimeformat": "11.2.14",
     "@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.26.0",
-    "@sentry/types": "8.26.0",
-    "@storybook/addon-actions": "8.2.9",
-    "@storybook/addon-essentials": "8.2.9",
-    "@storybook/addon-interactions": "8.2.9",
-    "@storybook/addon-links": "8.2.9",
-    "@storybook/react": "8.2.9",
-    "@storybook/react-webpack5": "8.2.9",
-    "@storybook/test": "8.2.9",
-    "@tanstack/query-core": "5.51.24",
-    "@tanstack/query-sync-storage-persister": "5.51.24",
-    "@tanstack/react-query": "5.51.24",
-    "@tanstack/react-query-devtools": "5.51.24",
-    "@tanstack/react-query-persist-client": "5.51.24",
+    "@sentry/browser": "8.33.0",
+    "@sentry/types": "8.32.0",
+    "@storybook/addon-actions": "8.3.4",
+    "@storybook/addon-essentials": "8.3.4",
+    "@storybook/addon-interactions": "8.3.4",
+    "@storybook/addon-links": "8.3.4",
+    "@storybook/react": "8.3.4",
+    "@storybook/react-webpack5": "8.3.4",
+    "@storybook/test": "8.3.4",
+    "@tanstack/query-core": "5.56.2",
+    "@tanstack/query-sync-storage-persister": "5.56.2",
+    "@tanstack/react-query": "5.56.2",
+    "@tanstack/react-query-devtools": "5.56.2",
+    "@tanstack/react-query-persist-client": "5.56.2",
     "@testing-library/dom": "10.4.0",
-    "@testing-library/jest-dom": "6.4.8",
-    "@testing-library/react": "16.0.0",
+    "@testing-library/jest-dom": "6.5.0",
+    "@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.12",
+    "@types/jest": "29.5.13",
     "@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.3",
+    "@types/react": "18.3.10",
     "@types/react-autosuggest": "10.1.11",
     "@types/react-dom": "18.3.0",
     "@types/react-modal": "3.16.3",
     "@types/uuid": "10.0.0",
-    "@typescript-eslint/eslint-plugin": "8.1.0",
-    "@typescript-eslint/parser": "8.1.0",
+    "@typescript-eslint/eslint-plugin": "8.7.0",
+    "@typescript-eslint/parser": "8.7.0",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.1.3",
+    "babel-loader": "9.2.1",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.38.0",
+    "core-js": "3.38.1",
     "downshift": "9.0.8",
     "eslint": ">=8.57.0 <9",
     "eslint-config-airbnb": "19.0.4",
     "eslint-config-airbnb-typescript": "18.0.0",
     "eslint-config-prettier": "9.1.0",
-    "eslint-import-resolver-webpack": "0.13.8",
-    "eslint-plugin-compat": "6.0.0",
-    "eslint-plugin-formatjs": "4.13.3",
-    "eslint-plugin-import": "2.29.1",
-    "eslint-plugin-jsx-a11y": "6.9.0",
+    "eslint-import-resolver-webpack": "0.13.9",
+    "eslint-plugin-compat": "6.0.1",
+    "eslint-plugin-formatjs": "5.0.0",
+    "eslint-plugin-import": "2.30.0",
+    "eslint-plugin-jsx-a11y": "6.10.0",
     "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.35.0",
+    "eslint-plugin-react": "7.37.0",
     "eslint-plugin-react-hooks": "4.6.2",
-    "eslint-plugin-storybook": "0.8.0",
+    "eslint-plugin-storybook": "0.9.0",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
     "glob": "11.0.0",
-    "i18n-iso-countries": "7.11.3",
+    "i18n-iso-countries": "7.12.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
@@ -115,25 +115,25 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.3.5",
+    "msw": "2.4.9",
     "node-fetch": ">2.6.6 <3",
-    "nodemon": "3.1.4",
+    "nodemon": "3.1.7",
     "prettier": "3.3.3",
     "query-string": "9.1.0",
     "react": "18.3.1",
     "react-autosuggest": "10.1.0",
     "react-dom": "18.3.1",
-    "react-hook-form": "7.52.2",
-    "react-intl": "6.6.8",
+    "react-hook-form": "7.53.0",
+    "react-intl": "6.7.0",
     "react-modal": "3.16.1",
-    "react-router-dom": "6.26.1",
-    "sass": "1.77.8",
+    "react-router-dom": "6.26.2",
+    "sass": "1.79.4",
     "source-map-loader": "5.0.0",
-    "storybook": "8.2.9",
+    "storybook": "8.3.4",
     "tsconfig-paths-webpack-plugin": "4.1.0",
-    "typescript": "5.5.4",
+    "typescript": "5.6.2",
     "uuid": "10.0.0",
-    "webpack": "5.93.0",
+    "webpack": "5.95.0",
     "webpack-cli": "5.1.4",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
@@ -142,7 +142,7 @@
   },
   "resolutions": {
     "@testing-library/dom": "10.4.0",
-    "@types/react": "18.3.3",
+    "@types/react": "18.3.10",
     "@types/react-dom": "18.3.0"
   },
   "msw": {
@@ -152,7 +152,7 @@
     "node": "20.11.0"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.2.9",
+    "@storybook/addon-mdx-gfm": "8.3.4",
     "@storybook/addon-webpack5-compiler-babel": "3.0.3"
   }
 }

package/scss/colors/_theme.scss

@@ -128,6 +128,18 @@ $r-theme: (
     cta-color: r-color('firebrick6'),
     cta-border: r-color('white'),
   ),
+  compacted-banner: (
+    title-color: r-color('charcoal'),
+    title-alt-color: r-color('firebrick6'),
+    content-color: r-color('black'),
+    search-input-background: rgba(r-color('white'), 0.7),
+    search-btn-background: r-color('firebrick6'),
+    search-icon-fill: r-color('white'),
+    cta-variant-from: rgba(r-color('white'), 0.8),
+    cta-variant-to: rgba(r-color('white'), 0.8),
+    cta-color: r-color('firebrick6'),
+    cta-border: r-color('white'),
+  ),
   section-plugin: (
     title-emphased-color: r-color('firebrick6'),
   ),

package/scss/components/_content.scss

@@ -28,6 +28,20 @@ body {
       background-size: 100% 100%;
     }
   }
+
+  // Apply the top padding behavior with topbar over mode only on the first child which
+  // is the only variant that can be exposed to issue with topbar over
+  .compacted-banner:first-child {
+    .compacted-banner__inner {
+      @include media-breakpoint-up(lg) {
+        @if $r-topbar-height {
+          padding: $r-topbar-height 0 1rem;
+        } @else {
+          padding: 1rem 0 1rem;
+        }
+      }
+    }
+  }
 }
 
 // Container relative to some modal components

package/scss/components/_index.scss

@@ -61,6 +61,7 @@
 @import './templates/courses/plugins/licence_plugin';
 @import './templates/richie/section/section';
 @import './templates/richie/large_banner/large_banner';
+@import './templates/richie/large_banner/compacted_banner';
 @import './templates/richie/nesteditem/nesteditem';
 @import './templates/richie/glimpse/glimpse';
 

package/scss/components/templates/richie/large_banner/_compacted_banner.scss

@@ -0,0 +1,149 @@
+// A compact banner without image contents
+// Opposed to 'hero-intro' this variant delegates the top padding for topbar in 'over'
+// mode in content component
+//
+.compacted-banner {
+  position: relative;
+  padding: 0;
+
+  &__inner {
+    padding: 1rem 0;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+    }
+  }
+
+  &__body {
+    @include make-container();
+    @include make-container-max-widths();
+    padding: 1rem;
+    text-align: center;
+
+    @include media-breakpoint-up(lg) {
+      display: flex;
+      padding: 2rem;
+      flex-direction: column;
+      justify-content: space-between;
+    }
+  }
+
+  // NOTE: Force disabling of hardcoded hero title class from some already save
+  // contents. Sadly we can not disable the huge font size
+  .hero-intro__title {
+    margin-bottom: 1rem !important;
+    width: auto;
+    color: inherit;
+
+    strong {
+      color: inherit;
+      font-weight: inherit;
+    }
+  }
+
+  // NOTE: Apply the color+weight behavior with 'strong' element alike in
+  // 'hero-intro__title' but naturally on title elements without any class
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    color: r-theme-val(compacted-banner, title-color);
+    margin-bottom: 0.5em;
+
+    strong {
+      color: r-theme-val(compacted-banner, title-alt-color);
+      font-weight: inherit;
+    }
+  }
+
+  // NOTE: Implement again the 'hero-intro__title' equivalent behavior
+  &__title {
+    @include responsive-spacer('margin-bottom', 1);
+    @include font-size($extra-font-size);
+    color: r-theme-val(compacted-banner, title-color);
+
+    strong {
+      color: r-theme-val(compacted-banner, title-alt-color);
+      font-weight: inherit;
+    }
+  }
+
+  &__content {
+    @include font-size($h5-font-size);
+    color: r-theme-val(compacted-banner, content-color);
+  }
+
+  &__search {
+    display: flex;
+    flex-wrap: wrap;
+    align-items: center;
+    justify-content: center;
+
+    .richie-react--root-search-suggest-field {
+      @include sv-flex(1, 0, 100%);
+      position: relative;
+
+      @include media-breakpoint-up(lg) {
+        @include sv-flex(1, 0, 320px);
+      }
+
+      .react-autosuggest__container {
+        margin-bottom: 0;
+      }
+
+      input {
+        background: r-theme-val(compacted-banner, search-input-background);
+      }
+
+      .search-input {
+        &__btn {
+          background: r-theme-val(compacted-banner, search-btn-background);
+          border-top-right-radius: 3rem;
+          border-bottom-right-radius: 3rem;
+
+          &__icon {
+            fill: r-theme-val(compacted-banner, search-icon-fill);
+          }
+        }
+      }
+    }
+  }
+
+  &__cta {
+    @include sv-flex(0, 0, auto);
+    @include button-size(
+      $btn-padding-y,
+      $btn-padding-x,
+      $btn-font-size,
+      $btn-line-height,
+      $btn-border-radius
+    );
+    @include button-variant(
+      r-theme-val(compacted-banner, cta-variant-from),
+      r-theme-val(compacted-banner, cta-variant-to)
+    );
+    margin: 1.2rem 0 0;
+    font-size: $font-size-base;
+    color: r-theme-val(compacted-banner, cta-color);
+    border-radius: 2rem;
+    @if r-theme-val(compacted-banner, cta-border) {
+      border: 1px solid r-theme-val(compacted-banner, cta-border);
+    }
+
+    @include media-breakpoint-up(lg) {
+      margin-top: 0;
+      @include responsive-spacer('margin-left', 0, $breakpoints: ('lg': 3));
+    }
+
+    &:after {
+      content: '→';
+      margin-left: 1rem;
+    }
+
+    &:hover {
+      text-decoration: none;
+    }
+  }
+}