⬆️(funmooc) upgrade to richie v2.27.0

https://github.com/openfun/richie/releases/tag/v2.27.0

sites/funmooc/CHANGELOG.md

@@ -8,6 +8,10 @@ Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## [Unreleased]
 
+### Changed
+
+- Upgrade to richie 2.27.0
+
 ## [1.32.1] - 2024-05-23
 
 ### Fixed

sites/funmooc/requirements/base.txt

@@ -6,5 +6,5 @@ dockerflow==2024.4.2
 factory-boy==3.3.0
 gunicorn==22.0.0
 psycopg2-binary==2.9.9
-richie==2.26.0
+richie==2.27.0
 sentry-sdk==2.2.1

sites/funmooc/src/frontend/package.json

@@ -36,7 +36,7 @@
   },
   "homepage": "https://github.com/openfun/fun-richie-site-factory#readme",
   "dependencies": {
-    "richie-education": "2.26.0",
+    "richie-education": "2.27.0",
     "tarteaucitronjs": "1.14.0"
   },
   "devDependencies": {

sites/funmooc/src/frontend/scss/_main.scss

@@ -1,71 +1,71 @@
 // Basic functions must be loaded before settings to be able to use them from
 // settings and objects
-@import "richie-education/scss/tools/rem";
-@import "richie-education/scss/tools/colors";
+@import 'richie-education/scss/tools/rem';
+@import 'richie-education/scss/tools/colors';
 
 // Our variables must be imported before Bootstrap code so they can override it
-@import "richie-education/scss/settings/fonts";
+@import 'richie-education/scss/settings/fonts';
 
-@import "bootstrap/scss/functions";
-@import "bootstrap/scss/variables";
+@import 'bootstrap/scss/functions';
+@import 'bootstrap/scss/variables';
 
 // Import Cunningham tokens and icons
-@import "@openfun/cunningham-react/dist/icons";
-@import "@openfun/cunningham-react/dist/style";
+@import '@openfun/cunningham-react/dist/icons';
+@import '@openfun/cunningham-react/dist/style';
 
 // Override default Richie settings variables
-@import "richie-education/scss/vendors/cunningham-tokens";
-@import "richie-education/scss/vendors/css/cunningham-tokens";
-@import "richie-education/scss/colors/palette";
-@import "./vendors/cunningham-tokens";
-@import "./vendors/css/cunningham-tokens";
-@import "./extras/colors/palette";
+@import 'richie-education/scss/vendors/cunningham-tokens';
+@import 'richie-education/scss/vendors/css/cunningham-tokens';
+@import 'richie-education/scss/colors/palette';
+@import './vendors/cunningham-tokens';
+@import './vendors/css/cunningham-tokens';
+@import './extras/colors/palette';
 
-@import "richie-education/scss/colors/gradients";
-@import "./extras/colors/gradients";
-@import "richie-education/scss/colors/schemes";
-@import "./extras/colors/schemes";
+@import 'richie-education/scss/colors/gradients';
+@import './extras/colors/gradients';
+@import 'richie-education/scss/colors/schemes';
+@import './extras/colors/schemes';
 
-@import "richie-education/scss/colors/theme";
-@import "./extras/colors/theme";
+@import 'richie-education/scss/colors/theme';
+@import './extras/colors/theme';
 
-@import "richie-education/scss/settings/variables";
-@import "./extras/settings/variables";
+@import 'richie-education/scss/settings/variables';
+@import './extras/settings/variables';
 
 // TWITTER BOOTSTRAP V4
 // Required
-@import "bootstrap/scss/bootstrap-reboot.scss";
+@import 'bootstrap/scss/bootstrap-reboot.scss';
 
 // Only what we use
-@import "richie-education/scss/settings/bootstrap";
+@import 'richie-education/scss/settings/bootstrap';
 
 // Internal addons (import order does matter due to some mixin usage from
 // deeper mixins)
-@import "richie-education/scss/tools/index";
+@import 'richie-education/scss/tools/index';
 
 // Generic stuff
-@import "richie-education/scss/generic/index";
+@import 'richie-education/scss/generic/index';
 
 // Shared object styles
-@import "richie-education/scss/objects/index";
+@import 'richie-education/scss/objects/index';
 
 // Page component styles
-@import "richie-education/scss/components/index";
+@import 'richie-education/scss/components/index';
 
 // Page component overrides
-@import "./components/subheader";
-@import "./components/templates/courses/cms/homepage";
-@import "./components/templates/richie/large_banner/large_banner";
-@import "./components/templates/richie/section/section";
+@import './components/subheader';
+@import './components/templates/courses/cms/homepage';
+@import './components/templates/richie/large_banner/large_banner';
+@import './components/templates/richie/section/section';
 
 // Libs
-@import "./components/libs/tarteaucitron";
+@import './components/libs/tarteaucitron';
 
 // Cunningham patchs
-@import "./trumps/cunningham";
+@import './trumps/cunningham';
 // CMS patchs
-@import "richie-education/scss/trumps/cms";
+@import 'richie-education/scss/trumps/cms';
 // IE11 patchs
-@import "richie-education/scss/trumps/ie11-fixes";
+@import 'richie-education/scss/trumps/ie11-fixes';
 // Bootstrap patchs
-@import "richie-education/scss/trumps/bootstrap";
+@import 'richie-education/scss/trumps/bootstrap';

sites/funmooc/src/frontend/scss/components/_subheader.scss

@@ -1,10 +1,7 @@
 .subheader {
   .category-badge-list {
     .category-badge {
-      @include r-button-colors(
-        r-theme-val(subheader, category-badge),
-        $apply-border: true
-      );
+      @include r-button-colors(r-theme-val(subheader, category-badge), $apply-border: true);
     }
   }
 }

sites/funmooc/src/frontend/scss/components/libs/_tarteaucitron.scss

@@ -44,8 +44,7 @@ div#tarteaucitronRoot {
     border-radius: 100vw !important;
   }
 
-  #tarteaucitronAlertBig
-    button:not(.tarteaucitronAllow):not(.tarteaucitronDeny),
+  #tarteaucitronAlertBig button:not(.tarteaucitronAllow):not(.tarteaucitronDeny),
   #tarteaucitronInfo button {
     background: none;
     text-decoration: underline;
@@ -67,7 +66,7 @@ div#tarteaucitronRoot {
 
       &:after {
         color: r-theme-val(cookie-consent, light-color);
-        content: "×";
+        content: '×';
         font-size: 2rem;
       }
 
@@ -120,7 +119,7 @@ div#tarteaucitronRoot {
       &:after {
         @include button-base();
         color: r-theme-val(cookie-consent, light-color);
-        content: "×";
+        content: '×';
         font-size: 1.5rem;
         line-height: 1em;
         padding: 1rem;

sites/funmooc/src/frontend/scss/components/templates/richie/section/_section.scss

@@ -14,7 +14,7 @@
     padding-bottom: calc(5vw + 1.5rem) !important;
 
     &:before {
-      content: "";
+      content: '';
       display: block;
       margin-top: 4.5rem;
       margin-bottom: 2rem;
@@ -28,7 +28,7 @@
 
     // Insert bottom curves
     &::after {
-      content: "";
+      content: '';
       display: block;
       width: 100%;
       height: 5vw;
@@ -51,7 +51,7 @@
 
     // Insert bottom curves
     &::after {
-      content: "";
+      content: '';
       display: block;
       width: 100%;
       height: 5vw;
@@ -71,16 +71,13 @@
   &.section--gradient-dark {
     .button-caesura {
       a {
-        @include r-button-colors(
-          r-theme-val(button-caesura, alternative),
-          $apply-border: true
-        );
+        @include r-button-colors(r-theme-val(button-caesura, alternative), $apply-border: true);
 
         &:hover {
           @include r-button-colors(
             r-theme-val(button-caesura, alternative),
             $apply-border: true,
-            $prefix: "hover"
+            $prefix: 'hover'
           );
         }
       }

sites/funmooc/src/frontend/scss/extras/colors/_gradients.scss

@@ -2,41 +2,37 @@
 // ---------
 $neutral-gradient: linear-gradient(
   to top,
-  r-color("silver") 0,
-  r-color("white-three") 13rem,
-  r-color("white") 14rem,
-  r-color("white")
+  r-color('silver') 0,
+  r-color('white-three') 13rem,
+  r-color('white') 14rem,
+  r-color('white')
 );
 $light-gradient: linear-gradient(
   79deg,
-  r-color("robin-egg-blue") 0%,
-  r-color("robin-egg-blue") 10%,
-  r-color("turquoise-blue") 56%
+  r-color('robin-egg-blue') 0%,
+  r-color('robin-egg-blue') 10%,
+  r-color('turquoise-blue') 56%
 );
 $middle-gradient: linear-gradient(
   271deg,
-  r-color("turquoise-blue") 0%,
-  r-color("ocean-blue") 59%,
-  r-color("darkish-blue") 99%
-);
-$dark-gradient: linear-gradient(
-  295deg,
-  r-color("darkish-blue") 1%,
-  r-color("ocean-blue") 96%
+  r-color('turquoise-blue') 0%,
+  r-color('ocean-blue') 59%,
+  r-color('darkish-blue') 99%
 );
+$dark-gradient: linear-gradient(295deg, r-color('darkish-blue') 1%, r-color('ocean-blue') 96%);
 $white-mask-gradient: (
   linear-gradient(
     to right,
-    r-color("white") 0%,
-    rgba(r-color("white"), 0.85) 15%,
-    rgba(r-color("white"), 0.15) 60%,
-    rgba(r-color("white"), 0) 70%
+    r-color('white') 0%,
+    rgba(r-color('white'), 0.85) 15%,
+    rgba(r-color('white'), 0.15) 60%,
+    rgba(r-color('white'), 0) 70%
   ),
   linear-gradient(
     to left,
-    r-color("white") 0%,
-    rgba(r-color("white"), 0.85) 15%,
-    rgba(r-color("white"), 0.15) 60%,
-    rgba(r-color("white"), 0) 70%
+    r-color('white') 0%,
+    rgba(r-color('white'), 0.85) 15%,
+    rgba(r-color('white'), 0.15) 60%,
+    rgba(r-color('white'), 0) 70%
   )
 );

sites/funmooc/src/frontend/scss/extras/colors/_palette.scss

@@ -5,9 +5,6 @@
 // Named colors
 // ---------
 
-@use "../../vendors/cunningham-tokens" as tokens;
+@use '../../vendors/cunningham-tokens' as tokens;
 
-$palette: recursive-map-merge(
-  $palette,
-  map-get(tokens.$themes, "default", "theme", "colors")
-);
+$palette: recursive-map-merge($palette, map-get(tokens.$themes, 'default', 'theme', 'colors'));