richie-education 3.1.3-dev31 → 3.1.3-dev35

package/js/settings/index.ts

@@ -29,4 +29,5 @@ export const {
   MOCK_SERVICE_WORKER_ENABLED,
   DEBUG_UNION_RESOURCES_HOOK,
   CURRENT_JOANIE_DEV_DEMO_USER,
+  SLIDER_SETTINGS,
 } = settings;

package/js/settings/settings.prod.ts

@@ -61,3 +61,4 @@ export const PER_PAGE = {
 
 export const MOCK_SERVICE_WORKER_ENABLED = false;
 export const DEBUG_UNION_RESOURCES_HOOK = false;
+export const SLIDER_SETTINGS = { autoplayDelay: 3000 };

package/js/widgets/Slider/components/SlidePanel.tsx

@@ -20,6 +20,8 @@ type SlidePanelProps = {
   activeSlideIndex: number;
   isTransitioning: boolean;
   onBulletClick: (index: number) => void;
+  toggleAutoplay: () => void;
+  isAutoplaying: boolean;
 };
 
 /**
@@ -31,6 +33,8 @@ const SlidePanel = ({
   activeSlideIndex,
   onBulletClick,
   isTransitioning,
+  toggleAutoplay,
+  isAutoplaying,
 }: SlidePanelProps) => {
   const intl = useIntl();
   const hasSlideContent = slides.some((slide) => slide.content);
@@ -75,6 +79,11 @@ const SlidePanel = ({
             </span>
           </button>
         ))}
+        <div className="slider__autoplay">
+          <button type="button" onClick={toggleAutoplay}>
+            {isAutoplaying ? '⏸' : '⏵'}
+          </button>
+        </div>
       </div>
     </section>
   );

package/js/widgets/Slider/index.stories.tsx

@@ -0,0 +1,53 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { IntlProvider } from 'react-intl';
+import { Slide } from './types';
+import Slider from '.';
+
+const slides: Slide[] = [
+  {
+    pk: '1',
+    title: 'Slide 1',
+    content: 'Content for slide 1',
+    image: '/static/course_cover_image.jpg',
+    link_url: 'https://example.com/1',
+    link_open_blank: true,
+  },
+  {
+    pk: '2',
+    title: 'Slide 2',
+    content: 'Content for slide 2',
+    image: '/static/course_cover_image.jpg',
+    link_url: 'https://example.com/2',
+    link_open_blank: true,
+  },
+  {
+    pk: '3',
+    title: 'Slide 3',
+    content: 'Content for slide 3',
+    image: '/static/course_cover_image.jpg',
+    link_url: 'https://example.com/3',
+    link_open_blank: true,
+  },
+];
+
+export default {
+  component: Slider,
+  title: 'Widgets/Slider',
+  decorators: [
+    (Story) => (
+      <IntlProvider locale="en">
+        <Story />
+      </IntlProvider>
+    ),
+  ],
+} as Meta<typeof Slider>;
+
+type Story = StoryObj<typeof Slider>;
+
+export const Default: Story = {
+  args: {
+    pk: 'slider-1',
+    title: 'Example Slider',
+    slides,
+  },
+};

package/js/widgets/Slider/index.tsx

@@ -1,7 +1,9 @@
 import useEmblaCarousel from 'embla-carousel-react';
-import { useCallback, useEffect, useState } from 'react';
+import { useCallback, useEffect, useRef, useState } from 'react';
 import { WheelGesturesPlugin } from 'embla-carousel-wheel-gestures';
+import Autoplay from 'embla-carousel-autoplay';
 import { defineMessages, FormattedMessage } from 'react-intl';
+import { SLIDER_SETTINGS } from 'settings';
 import { Slide as SlideType } from './types';
 import SlidePanel from './components/SlidePanel';
 import Slideshow from './components/Slideshow';
@@ -22,9 +24,24 @@ type SliderProps = {
 };
 
 const Slider = ({ slides, title }: SliderProps) => {
-  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [WheelGesturesPlugin()]);
+  const autoplay = useRef(Autoplay({ delay: SLIDER_SETTINGS.autoplayDelay }));
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: true }, [
+    WheelGesturesPlugin(),
+    autoplay.current,
+  ]);
   const [activeSlideIndex, setActiveSlideIndex] = useState(0);
   const [isTransitioning, setIsTransitioning] = useState(false);
+  const [isAutoplaying, setIsAutoplaying] = useState(true);
+
+  const toggleAutoplay = () => {
+    if (!autoplay.current) return;
+    if (isAutoplaying) {
+      autoplay.current.stop();
+    } else {
+      autoplay.current.play();
+    }
+    setIsAutoplaying(!isAutoplaying);
+  };
 
   const handleBulletClick = useCallback(
     (index: number) => {
@@ -101,6 +118,8 @@ const Slider = ({ slides, title }: SliderProps) => {
         activeSlideIndex={activeSlideIndex}
         onBulletClick={handleBulletClick}
         isTransitioning={isTransitioning}
+        toggleAutoplay={toggleAutoplay}
+        isAutoplaying={isAutoplaying}
       />
       <span className="offscreen" role="presentation" aria-live="polite" aria-atomic="true">
         <FormattedMessage

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

@@ -111,7 +111,9 @@ const OpenedCourseRun = ({
   let courseOfferMessage = null;
   let certificationOfferMessage = null;
   let enrollmentPrice = '';
+  let enrollmentDiscountedPrice = '';
   let certificatePrice = '';
+  let certificateDiscountedPrice = '';
 
   if (courseRun.offer) {
     const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
@@ -130,7 +132,7 @@ const OpenedCourseRun = ({
     }
 
     if ((courseRun.discounted_price ?? -1) >= 0) {
-      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+      enrollmentDiscountedPrice = intl.formatNumber(courseRun.discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -153,7 +155,7 @@ const OpenedCourseRun = ({
     }
 
     if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
-      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+      certificateDiscountedPrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -204,7 +206,16 @@ const OpenedCourseRun = ({
             <dd>
               <FormattedMessage {...courseOfferMessage} />
               <br />
-              {enrollmentPrice}
+              {enrollmentDiscountedPrice ? (
+                <>
+                  <del>{enrollmentPrice}</del>
+                  <span>&nbsp;({courseRun.discount})</span>
+                  <br />
+                  <strong>{enrollmentDiscountedPrice}</strong>
+                </>
+              ) : (
+                enrollmentPrice
+              )}
             </dd>
           </>
         )}
@@ -216,7 +227,16 @@ const OpenedCourseRun = ({
             <dd>
               <FormattedMessage {...certificationOfferMessage} />
               <br />
-              {certificatePrice}
+              {certificateDiscountedPrice ? (
+                <>
+                  <del>{certificatePrice}</del>
+                  <span>&nbsp;({courseRun.certificate_discount})</span>
+                  <br />
+                  <strong>{certificateDiscountedPrice}</strong>
+                </>
+              ) : (
+                certificatePrice
+              )}
             </dd>
           </>
         )}

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

@@ -102,7 +102,9 @@ const OpenedSelfPacedCourseRun = ({
   let courseOfferMessage = null;
   let certificationOfferMessage = null;
   let enrollmentPrice = '';
+  let enrollmentDiscountedPrice = '';
   let certificatePrice = '';
+  let certificateDiscountedPrice = '';
 
   if (courseRun.offer) {
     const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
@@ -121,7 +123,7 @@ const OpenedSelfPacedCourseRun = ({
     }
 
     if ((courseRun.discounted_price ?? -1) >= 0) {
-      enrollmentPrice = intl.formatNumber(courseRun.discounted_price!, {
+      enrollmentDiscountedPrice = intl.formatNumber(courseRun.discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -144,7 +146,7 @@ const OpenedSelfPacedCourseRun = ({
     }
 
     if ((courseRun.certificate_discounted_price ?? -1) >= 0) {
-      certificatePrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
+      certificateDiscountedPrice = intl.formatNumber(courseRun.certificate_discounted_price!, {
         style: 'currency',
         currency: courseRun.price_currency,
       });
@@ -188,7 +190,16 @@ const OpenedSelfPacedCourseRun = ({
             <dd>
               <FormattedMessage {...courseOfferMessage} />
               <br />
-              {enrollmentPrice}
+              {enrollmentDiscountedPrice ? (
+                <>
+                  <del>{enrollmentPrice}</del>
+                  <span>&nbsp;({courseRun.discount})</span>
+                  <br />
+                  <strong>{enrollmentDiscountedPrice}</strong>
+                </>
+              ) : (
+                enrollmentPrice
+              )}
             </dd>
           </>
         )}
@@ -200,7 +211,16 @@ const OpenedSelfPacedCourseRun = ({
             <dd>
               <FormattedMessage {...certificationOfferMessage} />
               <br />
-              {certificatePrice}
+              {certificateDiscountedPrice ? (
+                <>
+                  <del>{certificatePrice}</del>
+                  <span>&nbsp;({courseRun.certificate_discount})</span>
+                  <br />
+                  <strong>{certificateDiscountedPrice}</strong>
+                </>
+              ) : (
+                certificatePrice
+              )}
             </dd>
           </>
         )}

package/js/widgets/SyllabusCourseRunsList/index.spec.tsx

@@ -1486,7 +1486,9 @@ describe('<SyllabusCourseRunsList/>', () => {
     );
 
     const content = getHeaderContainer().innerHTML;
-    expect(content).toContain('<dd>Paid access<br>€30.00</dd>');
+    expect(content).toContain(
+      '<dd>Paid access<br><del>€49.99</del><span>&nbsp;(-20%)</span><br><strong>€30.00</strong></dd>',
+    );
   });
 
   it('renders certificate discount on SyllabusCourseRun', async () => {
@@ -1509,6 +1511,8 @@ describe('<SyllabusCourseRunsList/>', () => {
     );
 
     const content = getHeaderContainer().innerHTML;
-    expect(content).toContain('<dd>Paid certificate<br>€70.00</dd>');
+    expect(content).toContain(
+      '<dd>Paid certificate<br><del>€100.00</del><span>&nbsp;(-30%)</span><br><strong>€70.00</strong></dd>',
+    );
   });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "3.1.3-dev31",
+  "version": "3.1.3-dev35",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -90,6 +90,7 @@
     "cljs-merge": "1.1.1",
     "core-js": "3.41.0",
     "downshift": "9.0.9",
+    "embla-carousel-autoplay": "8.6.0",
     "embla-carousel-react": "8.5.2",
     "embla-carousel-wheel-gestures": "8.0.1",
     "eslint": ">=8.57.0 <9",

package/scss/colors/_theme.scss

@@ -166,6 +166,9 @@ $r-theme: (
     index-color: r-color('battleship-grey'),
     index-hover-color: r-color('indianred3'),
     index-active-color: r-color('firebrick6'),
+    autoplay-color: r-color('white'),
+    autoplay-background-color: r-color('battleship-grey'),
+    autoplay-background-hover-color: r-color('charcoal'),
   ),
   blogpost-glimpse: (
     card-background: r-color('white'),

package/scss/components/templates/richie/slider/_slider.scss

@@ -155,6 +155,25 @@ $r-slider-content-line-clamp: 4 !default;
   }
 }
 
+.slider__autoplay {
+  display: flex;
+  justify-content: flex-end;
+  font-weight: bold;
+  margin-top: 0.5rem;
+  button {
+    cursor: pointer;
+    border-radius: 50px;
+    padding: 0.25rem 0.5rem;
+    border: none;
+    color: r-theme-val(slider-plugin, autoplay-color);
+    background-color: r-theme-val(slider-plugin, autoplay-background-color);
+    &:hover,
+    &:focus {
+      background-color: r-theme-val(slider-plugin, autoplay-background-hover-color);
+    }
+  }
+}
+
 .slide__content {
   max-width: 680px;
 

package/scss/objects/_blogpost_glimpses.scss

@@ -55,6 +55,11 @@ $glimpse-gutter: 0.6rem;
       align-self: flex-end;
     }
   }
+  .section__grid--33x33x33 > &:nth-child(0n + 2) {
+    @include media-breakpoint-up(lg) {
+      align-self: unset;
+    }
+  }
 
   // Apply card styles for elements
   @include m-o-card(