richie-education 2.34.1-dev2 → 2.34.1-dev21

package/js/components/ContractFrame/AbstractContractFrame.spec.tsx

@@ -27,7 +27,7 @@ jest.mock('settings', () => ({
   CONTRACT_SETTINGS: {
     ...jest.requireActual('settings').CONTRACT_SETTINGS,
     pollInterval: 10,
-    dummySignatureSignTimeout: 10,
+    dummySignatureSignTimeout: 50,
   },
 }));
 
@@ -204,12 +204,10 @@ describe('<AbstractContractFrame />', () => {
     await user.click(button);
 
     // The dummy interface should be loading
-    screen.getByRole('heading', { name: 'Signing the contract ...' });
+    await screen.findByRole('heading', { name: 'Signing the contract ...' });
 
     // Then the signature check polling should be started
-    await waitFor(() => {
-      expect(screen.getByRole('heading', { name: 'Verifying signature ...' })).toBeInTheDocument();
-    });
+    await screen.findByRole('heading', { name: 'Verifying signature ...' });
     expect(
       screen.getByText(
         'We are waiting for the signature to be validated from our signature platform. It can take up to few minutes. Do not close this page.',

package/js/hooks/useCreditCards/index.spec.tsx

@@ -208,8 +208,9 @@ describe('useCreditCards', () => {
     await act(async () => {
       responseDeferred.resolve({});
     });
-
-    expect(result.current.states.updating).toBe(false);
+    await waitFor(() => {
+      expect(result.current.states.updating).toBe(false);
+    });
     expect(result.current.states.isPending).toBe(false);
     expect(result.current.states.error).toBe(undefined);
   });

package/js/pages/DashboardCreditCardsManagement/DashboardEditCreditCard.spec.tsx

@@ -181,7 +181,7 @@ describe('<DahsboardEditCreditCard/>', () => {
     await screen.findByText('Credit cards');
 
     // The title is correctly updated.
-    screen.getByRole('heading', {
+    await screen.findByRole('heading', {
       level: 6,
       name: creditCardUpdated.title,
     });

package/js/types/index.ts

@@ -35,6 +35,11 @@ export interface CourseRun {
   title?: string;
   snapshot?: string;
   display_mode: CourseRunDisplayMode;
+  price?: number;
+  price_currency?: string;
+  offer?: string;
+  certificate_price?: number;
+  certificate_offer?: string;
 }
 
 export enum Priority {

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

@@ -45,7 +45,27 @@ export const CourseStateFutureOpenFactory = factory<CourseState>(() => {
   };
 });
 
+enum OfferType {
+  PAID = 'PAID',
+  FREE = 'FREE',
+  PARTIALLY_FREE = 'PARTIALLY_FREE',
+  SUBSCRIPTION = 'SUBSCRIPTION',
+}
+
 export const CourseRunFactory = factory<CourseRun>(() => {
+  const offerValues = Object.values(OfferType);
+  const offer = offerValues[Math.floor(Math.random() * offerValues.length)];
+  const certificateOfferValues = [OfferType.PAID, OfferType.FREE, OfferType.SUBSCRIPTION];
+  const certificateOffer =
+    certificateOfferValues[Math.floor(Math.random() * certificateOfferValues.length)];
+  const currency = faker.finance.currency().code;
+  const price = [OfferType.FREE, OfferType.PARTIALLY_FREE].includes(offer)
+    ? 0
+    : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
+  const certificatePrice =
+    certificateOffer === OfferType.FREE
+      ? 0
+      : parseFloat(faker.finance.amount({ min: 1, max: 100, symbol: currency, autoFormat: true }));
   return {
     id: faker.number.int(),
     resource_link: FactoryHelper.unique(faker.internet.url),
@@ -58,6 +78,11 @@ export const CourseRunFactory = factory<CourseRun>(() => {
     dashboard_link: null,
     title: faker.lorem.sentence(3),
     display_mode: CourseRunDisplayMode.DETAILED,
+    price,
+    price_currency: currency,
+    offer,
+    certificate_price: certificatePrice,
+    certificate_offer: certificateOffer,
   };
 });
 

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/EnrollableCourseRunList.tsx

@@ -139,11 +139,12 @@ const EnrollableCourseRunList = ({ courseRuns, order }: Props) => {
         <ol className="course-runs-list">
           {Children.toArray(
             courseRuns.map((courseRun) => (
-              <li className="course-runs-item form-field">
+              <li key={`${order.id}|${courseRun.id}`} className="course-runs-item form-field">
                 <input
                   className="form-field__radio-input"
                   type="radio"
                   id={`${order.id}|${courseRun.id}`}
+                  data-testid={`radio-input-${order.id}-${courseRun.id}`}
                   name={order.id}
                   disabled={needsSignature}
                   aria-label={intl.formatMessage(messages.ariaSelectCourseRun, {

package/js/widgets/SyllabusCourseRunsList/components/CourseProductItem/components/CourseProductCourseRuns/index.spec.tsx

@@ -166,11 +166,13 @@ describe('CourseProductCourseRuns', () => {
         );
 
         // - A radio input
-        screen.getByRole('radio', {
-          name: `Select course run from ${dateFormatter.format(
+        const $input = screen.getByTestId(`radio-input-${order.id}-${courseRun.id}`);
+        expect($input).toHaveAttribute('type', 'radio');
+        expect($input).toHaveAccessibleName(
+          `Select course run from ${dateFormatter.format(
             new Date(courseRun.start),
           )} to ${dateFormatter.format(new Date(courseRun.end))}.`,
-        });
+        );
       });
 
       // A call to action should be displayed
@@ -215,7 +217,7 @@ describe('CourseProductCourseRuns', () => {
       });
 
       // A spinner should be displayed
-      screen.getByRole('status', { name: 'Enrolling...' });
+      await screen.findByRole('status', { name: 'Enrolling...' });
 
       await act(async () => {
         enrollmentDeferred.resolve(HttpStatusCode.OK);

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

@@ -46,6 +46,51 @@ const messages = defineMessages({
     description: 'Course date of an opened course run block',
     defaultMessage: 'From {startDate} {endDate, select, undefined {} other {to {endDate}}}',
   },
+  coursePrice: {
+    id: 'components.SyllabusCourseRun.coursePrice',
+    description: 'Title of the course enrollment price section of an opened course run block',
+    defaultMessage: 'Enrollment price',
+  },
+  certificationPrice: {
+    id: 'components.SyllabusCourseRun.certificationPrice',
+    description: 'Title of the certification price section of an opened course run block',
+    defaultMessage: 'Certification price',
+  },
+  coursePaidOffer: {
+    id: 'components.SyllabusCourseRun.coursePaidOffer',
+    description: 'Message for the paid course offer of an opened course run block',
+    defaultMessage: 'The course content is paid.',
+  },
+  courseFreeOffer: {
+    id: 'components.SyllabusCourseRun.courseFreeOffer',
+    description: 'Message for the free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  coursePartiallyFree: {
+    id: 'components.SyllabusCourseRun.coursePartiallyFree',
+    description: 'Message for the partially free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  courseSubscriptionOffer: {
+    id: 'components.SyllabusCourseRun.courseSubscriptionOffer',
+    description: 'Message for the subscription course offer of an opened course run block',
+    defaultMessage: 'Subscribe to access the course content.',
+  },
+  certificatePaidOffer: {
+    id: 'components.SyllabusCourseRun.certificatePaidOffer',
+    description: 'Messagge for the paid certification offer of an opened course run block',
+    defaultMessage: 'The certification process is paid.',
+  },
+  certificateFreeOffer: {
+    id: 'components.SyllabusCourseRun.certificateFreeOffer',
+    description: 'Message for the free certification offer of an opened course run block',
+    defaultMessage: 'The certification process is free.',
+  },
+  certificateSubscriptionOffer: {
+    id: 'components.SyllabusCourseRun.certificateSubscriptionOffer',
+    description: 'Message for the subscription certification offer of an opened course run block',
+    defaultMessage: 'The certification process is offered through subscription.',
+  },
 });
 
 const OpenedCourseRun = ({
@@ -63,6 +108,44 @@ const OpenedCourseRun = ({
   const enrollmentEnd = courseRun.enrollment_end ? formatDate(courseRun.enrollment_end) : '...';
   const start = courseRun.start ? formatDate(courseRun.start) : '...';
   const end = courseRun.end ? formatDate(courseRun.end) : '...';
+  let courseOfferMessage = null;
+  let certificationOfferMessage = null;
+  let enrollmentPrice = '';
+  let certificatePrice = '';
+
+  if (courseRun.offer) {
+    const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
+    courseOfferMessage = {
+      PAID: messages.coursePaidOffer,
+      FREE: messages.courseFreeOffer,
+      PARTIALLY_FREE: messages.coursePartiallyFree,
+      SUBSCRIPTION: messages.courseSubscriptionOffer,
+    }[offer];
+
+    if ((courseRun.price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
+  if (courseRun.certificate_offer) {
+    const certificationOffer = courseRun.certificate_offer.toUpperCase().replaceAll(' ', '');
+    certificationOfferMessage = {
+      PAID: messages.certificatePaidOffer,
+      FREE: messages.certificateFreeOffer,
+      SUBSCRIPTION: messages.certificateSubscriptionOffer,
+    }[certificationOffer];
+
+    if ((courseRun.certificate_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -99,6 +182,30 @@ const OpenedCourseRun = ({
             <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
           </>
         )}
+        {courseOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.coursePrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...courseOfferMessage} />
+              <br />
+              {enrollmentPrice}
+            </dd>
+          </>
+        )}
+        {certificationOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.certificationPrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...certificationOfferMessage} />
+              <br />
+              {certificatePrice}
+            </dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />

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

@@ -41,6 +41,51 @@ const messages = defineMessages({
     description: 'Self paced course run block with no end date',
     defaultMessage: 'Available',
   },
+  coursePrice: {
+    id: 'components.SyllabusCourseRunCompacted.coursePrice',
+    description: 'Title of the course enrollment price section of an opened course run block',
+    defaultMessage: 'Enrollment price',
+  },
+  certificationPrice: {
+    id: 'components.SyllabusCourseRunCompacted.certificationPrice',
+    description: 'Title of the certification price section of an opened course run block',
+    defaultMessage: 'Certification price',
+  },
+  coursePaidOffer: {
+    id: 'components.SyllabusCourseRunCompacted.coursePaidOffer',
+    description: 'Message for the paid course offer of an opened course run block',
+    defaultMessage: 'The course content is paid.',
+  },
+  courseFreeOffer: {
+    id: 'components.SyllabusCourseRunCompacted.courseFreeOffer',
+    description: 'Message for the free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  coursePartiallyFree: {
+    id: 'components.SyllabusCourseRunCompacted.coursePartiallyFree',
+    description: 'Message for the partially free course offer of an opened course run block',
+    defaultMessage: 'The course content is free.',
+  },
+  courseSubscriptionOffer: {
+    id: 'components.SyllabusCourseRunCompacted.courseSubscriptionOffer',
+    description: 'Message for the subscription course offer of an opened course run block',
+    defaultMessage: 'Subscribe to access the course content.',
+  },
+  certificatePaidOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificatePaidOffer',
+    description: 'Messagge for the paid certification offer of an opened course run block',
+    defaultMessage: 'The certification process is paid.',
+  },
+  certificateFreeOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificateFreeOffer',
+    description: 'Message for the free certification offer of an opened course run block',
+    defaultMessage: 'The certification process is free.',
+  },
+  certificateSubscriptionOffer: {
+    id: 'components.SyllabusCourseRunCompacted.certificateSubscriptionOffer',
+    description: 'Message for the subscription certification offer of an opened course run block',
+    defaultMessage: 'The certification process is offered through subscription.',
+  },
 });
 
 const OpenedSelfPacedCourseRun = ({
@@ -54,6 +99,44 @@ const OpenedSelfPacedCourseRun = ({
   const intl = useIntl();
   const end = courseRun.end ? formatDate(courseRun.end) : '...';
   const hasEndDate = end !== '...';
+  let courseOfferMessage = null;
+  let certificationOfferMessage = null;
+  let enrollmentPrice = '';
+  let certificatePrice = '';
+
+  if (courseRun.offer) {
+    const offer = courseRun.offer.toUpperCase().replaceAll(' ', '_');
+    courseOfferMessage = {
+      PAID: messages.coursePaidOffer,
+      FREE: messages.courseFreeOffer,
+      PARTIALLY_FREE: messages.coursePartiallyFree,
+      SUBSCRIPTION: messages.courseSubscriptionOffer,
+    }[offer];
+
+    if ((courseRun.price ?? -1) >= 0) {
+      enrollmentPrice = intl.formatNumber(courseRun.price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
+  if (courseRun.certificate_offer) {
+    const certificationOffer = courseRun.certificate_offer.toUpperCase().replaceAll(' ', '');
+    certificationOfferMessage = {
+      PAID: messages.certificatePaidOffer,
+      FREE: messages.certificateFreeOffer,
+      SUBSCRIPTION: messages.certificateSubscriptionOffer,
+    }[certificationOffer];
+
+    if ((courseRun.certificate_price ?? -1) >= 0) {
+      certificatePrice = intl.formatNumber(courseRun.certificate_price!, {
+        style: 'currency',
+        currency: courseRun.price_currency,
+      });
+    }
+  }
+
   return (
     <>
       {courseRun.title && <h3>{StringHelper.capitalizeFirst(courseRun.title)}</h3>}
@@ -83,6 +166,30 @@ const OpenedSelfPacedCourseRun = ({
             <dd>{IntlHelper.getLocalizedLanguages(courseRun.languages, intl)}</dd>
           </>
         )}
+        {courseOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.coursePrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...courseOfferMessage} />
+              <br />
+              {enrollmentPrice}
+            </dd>
+          </>
+        )}
+        {certificationOfferMessage && (
+          <>
+            <dt>
+              <FormattedMessage {...messages.certificationPrice} />
+            </dt>
+            <dd>
+              <FormattedMessage {...certificationOfferMessage} />
+              <br />
+              {certificatePrice}
+            </dd>
+          </>
+        )}
       </dl>
       {findLmsBackend(courseRun.resource_link) ? (
         <CourseRunEnrollment courseRun={courseRun} />

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

@@ -30,6 +30,8 @@ import { computeStates } from 'utils/CourseRuns';
 import { IntlHelper } from 'utils/IntlHelper';
 import { render } from 'utils/test/render';
 import { setupJoanieSession } from 'utils/test/wrappers/JoanieAppWrapper';
+import { SyllabusCourseRunCompacted } from './components/SyllabusCourseRunCompacted';
+import { SyllabusCourseRun } from './components/SyllabusCourseRun';
 
 jest.mock('utils/context', () => {
   const mock = mockRichieContextFactory().one();
@@ -127,7 +129,6 @@ describe('<SyllabusCourseRunsList/>', () => {
     const languagesContainer = languagesNode.nextSibling! as HTMLElement;
     getByText(languagesContainer, IntlHelper.getLocalizedLanguages(courseRun.languages, intl));
 
-    expect(languagesContainer.nextSibling).toBeNull();
     getByRole(runContainer, 'link', {
       name: StringHelper.capitalizeFirst(courseRun.state.call_to_action)!,
     });
@@ -568,7 +569,7 @@ describe('<SyllabusCourseRunsList/>', () => {
 
     const portalContainer = getPortalContainer();
 
-    // Expect that "is-hidden" class is set only to course runs in (MAX_ARCHIVED_COURSE_RUNS)nth-plus position.
+    // Expect that 'is-hidden' class is set only to course runs in (MAX_ARCHIVED_COURSE_RUNS)nth-plus position.
     expect(portalContainer.querySelectorAll('li').length).toBe(MAX_ARCHIVED_COURSE_RUNS * 2);
     portalContainer.querySelectorAll('li').forEach((listElement, i) => {
       expectCourseRunInList(listElement, courseRuns[i]);
@@ -585,7 +586,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     // click on view more.
     await act(async () => user.click(button));
 
-    // expect that "is-hidden" are removed.
+    // expect that 'is-hidden' are removed.
     portalContainer.querySelectorAll('li').forEach((listElement, i) => {
       expectCourseRunInList(listElement, courseRuns[i]);
       expect(listElement.classList).not.toContain('is-hidden');
@@ -615,7 +616,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     const portalContainer = getPortalContainer();
     expect(screen.queryByRole('button', { name: 'View more' })).not.toBeInTheDocument();
 
-    // expect that "is-hidden" is not set.
+    // expect that 'is-hidden' is not set.
     expect(portalContainer.querySelectorAll('li').length).toBe(MAX_ARCHIVED_COURSE_RUNS - 1);
     portalContainer.querySelectorAll('li').forEach((listElement, i) => {
       expectCourseRunInList(listElement, courseRuns[i]);
@@ -1009,7 +1010,7 @@ describe('<SyllabusCourseRunsList/>', () => {
     const listElements = screen.getAllByRole('listitem');
     expect(listElements.length).toBe(4);
 
-    // Assert there is only one link, one label "Enrolled" and one request to retrieve enrollment.
+    // Assert there is only one link, one label 'Enrolled' and one request to retrieve enrollment.
     expect(await screen.findAllByText('Enrolled')).toHaveLength(1);
 
     const links = screen.getAllByRole('link');
@@ -1024,4 +1025,448 @@ describe('<SyllabusCourseRunsList/>', () => {
       `https://demo.endpoint/api/enrollment/v1/enrollment/${user.username},${onGoingCourseRun.resource_link}`,
     );
   });
+
+  it('renders price information as paid and paid on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as subscription on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Subscription',
+      certificate_offer: 'Subscription',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Subscribe to access the course content.<br>€49.99</dd>');
+    expect(content).toContain(
+      '<dd>The certification process is offered through subscription.<br>€59.99</dd>',
+    );
+  });
+
+  it('renders price information as Partially free on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Partially free',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as paid and free on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render price information on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: undefined,
+      certificate_offer: undefined,
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render course price information on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      offer: undefined,
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid.');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('does not render certificate price information on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render prices but only offers on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br></dd>');
+    expect(content).toContain('<dd>The certification process is free.<br></dd>');
+  });
+
+  it('renders prices as zero on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render invalid offers on SyllabusCourseRunCompacted', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'invalid',
+      certificate_offer: 'invalid',
+      price_currency: 'EUR',
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRunCompacted courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is');
+    expect(content).not.toContain('The certification process is');
+    expect(content).not.toContain('<br>€59.99');
+  });
+
+  it('renders price information as paid and paid on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as subscription on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Subscription',
+      certificate_offer: 'Subscription',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>Subscribe to access the course content.<br>€49.99</dd>');
+    expect(content).toContain(
+      '<dd>The certification process is offered through subscription.<br>€59.99</dd>',
+    );
+  });
+
+  it('renders price information as Partially free on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'Partially free',
+      certificate_offer: 'paid',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('renders price information as paid and free on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'paid',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 49.99,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render price information on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: undefined,
+      certificate_offer: undefined,
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render course price information on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: undefined,
+      price: 59.99,
+      price_currency: 'EUR',
+      certificate_offer: 'paid',
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is paid.');
+    expect(content).toContain('<dd>The certification process is paid.<br>€59.99</dd>');
+  });
+
+  it('does not render certificate price information on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      price_currency: 'EUR',
+      offer: 'paid',
+      price: 49.99,
+      certificate_offer: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is paid.<br>€49.99</dd>');
+    expect(content).not.toContain('The certification process is paid.');
+  });
+
+  it('does not render prices but only offers on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: undefined,
+      certificate_price: undefined,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br></dd>');
+    expect(content).toContain('<dd>The certification process is free.<br></dd>');
+  });
+
+  it('renders prices as zero on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'free',
+      certificate_offer: 'free',
+      price_currency: 'EUR',
+      price: 0,
+      certificate_price: 0,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).toContain('<dd>The course content is free.<br>€0.00</dd>');
+    expect(content).toContain('<dd>The certification process is free.<br>€0.00</dd>');
+  });
+
+  it('does not render invalid offers on SyllabusCourseRun', async () => {
+    const course = PacedCourseFactory().one();
+    const courseRun: CourseRun = CourseRunFactoryFromPriority(Priority.ONGOING_OPEN)({
+      languages: ['en'],
+      offer: 'invalid',
+      certificate_offer: 'invalid',
+      price_currency: 'EUR',
+      price: 59.99,
+      certificate_price: 59.99,
+    }).one();
+
+    render(
+      <div className="course-detail__row course-detail__runs course-detail__runs--open">
+        <SyllabusCourseRun courseRun={courseRun} course={course} showLanguages={false} />
+      </div>,
+    );
+
+    const content = getHeaderContainer().innerHTML;
+    expect(content).not.toContain('The course content is');
+    expect(content).not.toContain('The certification process is');
+    expect(content).not.toContain('<br>€59.99');
+  });
 });

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.34.1-dev2",
+  "version": "2.34.1-dev21",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {
@@ -38,75 +38,75 @@
     "not dead"
   ],
   "dependencies": {
-    "@babel/core": "7.26.0",
+    "@babel/core": "7.26.9",
     "@babel/plugin-syntax-dynamic-import": "7.8.3",
     "@babel/plugin-transform-modules-commonjs": "7.26.3",
-    "@babel/preset-env": "7.26.0",
+    "@babel/preset-env": "7.26.9",
     "@babel/preset-react": "7.26.3",
     "@babel/preset-typescript": "7.26.0",
-    "@faker-js/faker": "9.3.0",
-    "@formatjs/cli": "6.3.14",
-    "@formatjs/intl-relativetimeformat": "11.4.8",
-    "@hookform/resolvers": "3.9.1",
+    "@faker-js/faker": "9.6.0",
+    "@formatjs/cli": "6.6.1",
+    "@formatjs/intl-relativetimeformat": "11.4.10",
+    "@hookform/resolvers": "4.1.3",
     "@lyracom/embedded-form-glue": "1.4.2",
     "@openfun/cunningham-react": "3.0.0",
     "@openfun/cunningham-tokens": "2.2.0",
-    "@sentry/browser": "8.42.0",
-    "@sentry/types": "8.42.0",
-    "@storybook/addon-actions": "8.4.7",
-    "@storybook/addon-essentials": "8.4.7",
-    "@storybook/addon-interactions": "8.4.7",
-    "@storybook/addon-links": "8.4.7",
-    "@storybook/react": "8.4.7",
-    "@storybook/react-webpack5": "8.4.7",
-    "@storybook/test": "8.4.7",
-    "@tanstack/query-core": "5.62.3",
-    "@tanstack/query-sync-storage-persister": "5.62.3",
-    "@tanstack/react-query": "5.62.3",
-    "@tanstack/react-query-devtools": "5.62.3",
-    "@tanstack/react-query-persist-client": "5.62.3",
+    "@sentry/browser": "9.5.0",
+    "@sentry/types": "9.5.0",
+    "@storybook/addon-actions": "8.6.4",
+    "@storybook/addon-essentials": "8.6.4",
+    "@storybook/addon-interactions": "8.6.4",
+    "@storybook/addon-links": "8.6.4",
+    "@storybook/react": "8.6.4",
+    "@storybook/react-webpack5": "8.6.4",
+    "@storybook/test": "8.6.4",
+    "@tanstack/query-core": "5.67.2",
+    "@tanstack/query-sync-storage-persister": "5.67.2",
+    "@tanstack/react-query": "5.67.2",
+    "@tanstack/react-query-devtools": "5.67.2",
+    "@tanstack/react-query-persist-client": "5.67.2",
     "@testing-library/dom": "10.4.0",
     "@testing-library/jest-dom": "6.6.3",
-    "@testing-library/react": "16.1.0",
-    "@testing-library/user-event": "14.5.2",
-    "@types/fetch-mock": "7.3.8",
-    "@types/iframe-resizer": "3.5.13",
+    "@testing-library/react": "16.2.0",
+    "@testing-library/user-event": "14.6.1",
+    "@types/fetch-mock": "9.2.2",
+    "@types/iframe-resizer": "4.0.0",
     "@types/jest": "29.5.14",
     "@types/js-cookie": "3.0.6",
     "@types/lodash-es": "4.17.12",
     "@types/node-fetch": "2.6.12",
     "@types/query-string": "6.3.0",
-    "@types/react": "19.0.1",
+    "@types/react": "19.0.10",
     "@types/react-autosuggest": "10.1.11",
-    "@types/react-dom": "19.0.1",
+    "@types/react-dom": "19.0.4",
     "@types/react-modal": "3.16.3",
-    "@typescript-eslint/eslint-plugin": "8.17.0",
-    "@typescript-eslint/parser": "8.17.0",
+    "@typescript-eslint/eslint-plugin": "8.26.0",
+    "@typescript-eslint/parser": "8.26.0",
     "babel-jest": "29.7.0",
-    "babel-loader": "9.2.1",
+    "babel-loader": "10.0.0",
     "babel-plugin-react-intl": "8.2.25",
     "bootstrap": ">=4.6.0 <5",
     "classnames": "2.5.1",
     "cljs-merge": "1.1.1",
-    "core-js": "3.39.0",
+    "core-js": "3.41.0",
     "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.9",
-    "eslint-plugin-compat": "6.0.1",
-    "eslint-plugin-formatjs": "5.2.8",
+    "eslint-config-prettier": "10.1.1",
+    "eslint-import-resolver-webpack": "0.13.10",
+    "eslint-plugin-compat": "6.0.2",
+    "eslint-plugin-formatjs": "5.2.14",
     "eslint-plugin-import": "2.31.0",
     "eslint-plugin-jsx-a11y": "6.10.2",
-    "eslint-plugin-prettier": "5.2.1",
-    "eslint-plugin-react": "7.37.2",
-    "eslint-plugin-react-hooks": "5.1.0",
-    "eslint-plugin-storybook": "0.11.1",
+    "eslint-plugin-prettier": "5.2.3",
+    "eslint-plugin-react": "7.37.4",
+    "eslint-plugin-react-hooks": "5.2.0",
+    "eslint-plugin-storybook": "0.11.4",
     "fetch-mock": "<10",
     "file-loader": "6.2.0",
-    "glob": "11.0.0",
-    "i18n-iso-countries": "7.13.0",
+    "glob": "11.0.1",
+    "i18n-iso-countries": "7.14.0",
     "iframe-resizer": "<5",
     "intl-pluralrules": "2.0.1",
     "jest": "29.7.0",
@@ -114,35 +114,35 @@
     "js-cookie": "3.0.5",
     "lodash-es": "4.17.21",
     "mdn-polyfills": "5.20.0",
-    "msw": "2.6.8",
+    "msw": "2.7.3",
     "node-fetch": ">2.6.6 <3",
-    "nodemon": "3.1.7",
-    "prettier": "3.4.2",
+    "nodemon": "3.1.9",
+    "prettier": "3.5.3",
     "query-string": "9.1.1",
     "react": "19.0.0",
     "react-autosuggest": "10.1.0",
     "react-dom": "19.0.0",
-    "react-hook-form": "7.54.0",
-    "react-intl": "7.0.4",
-    "react-modal": "3.16.1",
-    "react-router": "7.0.2",
-    "sass": "1.82.0",
+    "react-hook-form": "7.54.2",
+    "react-intl": "7.1.6",
+    "react-modal": "3.16.3",
+    "react-router": "7.3.0",
+    "sass": "1.85.1",
     "source-map-loader": "5.0.0",
-    "storybook": "8.4.7",
+    "storybook": "8.6.4",
     "tsconfig-paths-webpack-plugin": "4.2.0",
-    "typescript": "5.7.2",
-    "uuid": "11.0.3",
-    "webpack": "5.97.1",
-    "webpack-cli": "5.1.4",
+    "typescript": "5.8.2",
+    "uuid": "11.1.0",
+    "webpack": "5.98.0",
+    "webpack-cli": "6.0.1",
     "whatwg-fetch": "3.6.20",
     "xhr-mock": "2.5.1",
     "yargs": "17.7.2",
-    "yup": "1.5.0"
+    "yup": "1.6.1"
   },
   "resolutions": {
     "@testing-library/dom": "10.4.0",
-    "@types/react": "19.0.1",
-    "@types/react-dom": "19.0.1",
+    "@types/react": "19.0.10",
+    "@types/react-dom": "19.0.4",
     "react": "19.0.0",
     "react-dom": "19.0.0"
   },
@@ -154,7 +154,7 @@
     "yarn": "1.22.22"
   },
   "devDependencies": {
-    "@storybook/addon-mdx-gfm": "8.4.7",
-    "@storybook/addon-webpack5-compiler-babel": "3.0.3"
+    "@storybook/addon-mdx-gfm": "8.6.4",
+    "@storybook/addon-webpack5-compiler-babel": "3.0.5"
   }
 }

package/scss/colors/_theme.scss

@@ -47,6 +47,14 @@ $r-theme: (
     item-cta-hollow-background: transparent,
     item-cta-hollow-border: transparent,
     item-divider-border: r-color('light-grey'),
+    dropdown-border-radius: 8px,
+    dropdown-padding: 0.5rem,
+    dropdown-gap: 0.5rem,
+    dropdown-background-color: r-color('azure2'),
+    dropdown-item-background-color: r-color('indianred3'),
+    dropdown-item-text-color: r-color('white'),
+    dropdown-item-border-radius: 4px,
+    dropdown-item-padding: 0.5rem 1rem,
   ),
   body-content: (
     base-color: r-color('black'),

package/scss/components/_header.scss

@@ -168,6 +168,10 @@
       flex-wrap: nowrap;
     }
 
+    & > .topbar__list {
+      position: relative;
+    }
+
     // Aside menu variation
     &--aside {
       @include sv-flex(1, 0, auto);
@@ -197,6 +201,76 @@
   // Menu item element
   &__item {
     $item-selector: &;
+    &.dropdown {
+      display: block;
+      position: static;
+
+      & > button {
+        width: 100%;
+
+        & > .icon {
+          height: 1rem;
+          margin-left: 0.5rem;
+          width: 1rem;
+        }
+      }
+
+      & ul[role='menu'] {
+        padding-left: 0.5rem;
+      }
+    }
+
+    @include media-breakpoint-up($r-topbar-breakpoint) {
+      &.dropdown {
+        // See header_menu.html for the definition of the variables
+        --active-background-color: #{r-theme-val(topbar, dropdown-item-background-color)};
+        --active-text-color: #{r-theme-val(topbar, dropdown-item-text-color)};
+
+        & > button[aria-expanded='true'] {
+          background-color: r-theme-val(topbar, dropdown-background-color);
+        }
+
+        & > button[aria-expanded='true'] + .topbar__sublist {
+          display: block;
+        }
+
+        & > .topbar__sublist {
+          background: r-theme-val(topbar, dropdown-background-color);
+          box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
+          border-radius: r-theme-val(topbar, dropdown-border-radius);
+          display: none;
+          position: absolute;
+          transform: translateX(-8px);
+          max-width: 100%;
+
+          &--full-width {
+            left: 0;
+            transform: inherit;
+          }
+
+          & > ul[role='menu'] {
+            display: flex;
+            flex-wrap: wrap;
+            gap: r-theme-val(topbar, dropdown-gap);
+            padding: r-theme-val(topbar, dropdown-padding);
+          }
+
+          & .topbar__item > a {
+            background-color: #fff;
+            border-radius: r-theme-val(topbar, dropdown-item-border-radius);
+            padding: r-theme-val(topbar, dropdown-item-padding);
+            &::after {
+              display: none;
+            }
+
+            &:is(:focus, :hover) {
+              background-color: var(--active-background-color);
+              color: var(--active-text-color);
+            }
+          }
+        }
+      }
+    }
 
     @include sv-flex(1, 0, auto);
     display: flex;
@@ -213,15 +287,23 @@
       --r--menu--item--hover--color: #{r-theme-val(topbar, item-hover-color)};
     }
 
-    & > a {
+    & > button {
+      @include button-reset-style();
+      --radius: #{r-theme-val(topbar, dropdown-border-radius)};
+      border-radius: var(--radius) var(--radius) 0 0;
+    }
+
+    & > a,
+    & > button {
       @include sv-flex(1, 0, 100%);
+      align-items: center;
+      color: inherit;
       display: flex;
-      padding: 1rem 0.2rem 1rem 1rem;
       flex-direction: row;
-      align-items: center;
       font-family: inherit;
       font-weight: inherit;
-      color: inherit;
+      justify-content: space-between;
+      padding: 1rem 0.2rem 1rem 1rem;
 
       @include media-breakpoint-up($r-topbar-breakpoint) {
         padding: 1rem 1rem;
@@ -235,18 +317,22 @@
 
           // If there is no default hover color we assume there is also no variant
           @if r-theme-val(topbar, item-hover-color) {
-            &::after {
-              content: '';
-              position: absolute;
-              bottom: 0;
-              left: 0;
-              right: 0;
-              height: 8px;
+            &:is(a)::after {
               background-color: var(--r--menu--item--hover--color);
               border-top-left-radius: 0.2rem;
               border-top-right-radius: 0.2rem;
+              bottom: 0;
+              content: '';
+              height: 8px;
+              left: 0;
+              position: absolute;
+              right: 0;
             }
           }
+
+          &:is(button) {
+            background-color: r-theme-val(topbar, dropdown-background-color);
+          }
         }
       }
     }
@@ -257,8 +343,10 @@
 
     // Current page item or current ancestor
     &--selected,
-    &--ancestor {
-      & > a {
+    &--ancestor,
+    &:has(.topbar__sublist .topbar__item.topbar__item--selected) {
+      & > a,
+      & > button {
         position: relative;
         color: r-theme-val(topbar, item-active-color);
 
@@ -328,7 +416,8 @@
     }
 
     // Item divider
-    & + #{$item-selector} {
+    & + #{$item-selector},
+    & > .topbar__list #{$item-selector} {
       @if r-theme-val(topbar, item-divider-border) {
         border-top: $onepixel solid r-theme-val(topbar, item-divider-border);
       }

package/scss/components/_styleguide.scss

@@ -5,7 +5,8 @@
 // Draw a background grid in pure CSS
 @mixin draw-grid($line-color: null, $border-color: null) {
   @if $line-color {
-    background: linear-gradient(-90deg, $line-color $onepixel, transparent $onepixel),
+    background:
+      linear-gradient(-90deg, $line-color $onepixel, transparent $onepixel),
       linear-gradient($line-color $onepixel, transparent $onepixel),
       linear-gradient(-90deg, $line-color $onepixel, transparent $onepixel),
       linear-gradient($line-color $onepixel, transparent $onepixel),

package/scss/objects/_selector.scss

@@ -1,5 +1,6 @@
 .selector {
   position: relative;
+  z-index: 200;
 
   &__button {
     appearance: none;