richie-education 2.33.1-dev6 → 2.33.1-dev8

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

@@ -11,6 +11,16 @@ import CourseRunEnrollment from '../CourseRunEnrollment';
 import CourseProductItem from '../CourseProductItem';
 
 const messages = defineMessages({
+  enrollNow: {
+    id: 'components.SyllabusCourseRun.enrollNow',
+    description: 'CTA for users to enroll on ongoing of future open course.',
+    defaultMessage: 'Enroll now',
+  },
+  studyNow: {
+    id: 'components.SyllabusCourseRun.studyNow',
+    description: 'CTA for users to enroll on archived course.',
+    defaultMessage: 'Study now',
+  },
   enrollment: {
     id: 'components.SyllabusCourseRun.enrollment',
     description: 'Title of the enrollment dates section of an opened course run block',
@@ -94,7 +104,12 @@ const OpenedCourseRun = ({
         <CourseRunEnrollment courseRun={courseRun} />
       ) : (
         <Button className="course-run-enrollment__cta" href={courseRun.resource_link} fullWidth>
-          {StringHelper.capitalizeFirst(courseRun.state.call_to_action)}
+          {courseRun.state.call_to_action === 'enroll now' ? (
+            <FormattedMessage {...messages.enrollNow} />
+          ) : null}
+          {courseRun.state.call_to_action === 'study now' ? (
+            <FormattedMessage {...messages.studyNow} />
+          ) : null}
         </Button>
       )}
     </>

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

@@ -11,6 +11,16 @@ import CourseRunEnrollment from '../CourseRunEnrollment';
 import CourseProductItem from '../CourseProductItem';
 
 const messages = defineMessages({
+  enrollNow: {
+    id: 'components.SyllabusCourseRunCompacted.enrollNow',
+    description: 'CTA for users to enroll on ongoing of future open course.',
+    defaultMessage: 'Enroll now',
+  },
+  studyNow: {
+    id: 'components.SyllabusCourseRunCompacted.studyNow',
+    description: 'CTA for users to enroll on archived course.',
+    defaultMessage: 'Study now',
+  },
   course: {
     id: 'components.SyllabusCourseRunCompacted.course',
     description: 'Title of the course dates section of an opened course run block',
@@ -78,7 +88,12 @@ const OpenedSelfPacedCourseRun = ({
         <CourseRunEnrollment courseRun={courseRun} />
       ) : (
         <Button className="course-run-enrollment__cta" href={courseRun.resource_link} fullWidth>
-          {StringHelper.capitalizeFirst(courseRun.state.call_to_action)}
+          {courseRun.state.call_to_action === 'enroll now' ? (
+            <FormattedMessage {...messages.enrollNow} />
+          ) : null}
+          {courseRun.state.call_to_action === 'study now' ? (
+            <FormattedMessage {...messages.studyNow} />
+          ) : null}
         </Button>
       )}
     </>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "richie-education",
-  "version": "2.33.1-dev6",
+  "version": "2.33.1-dev8",
   "description": "A CMS to build learning portals for Open Education",
   "main": "sandbox/manage.py",
   "scripts": {

package/scss/components/_header.scss

@@ -208,6 +208,11 @@
       @include sv-flex(0, 0, auto);
     }
 
+    // Define color variable for default item color on hover then available variants
+    @if r-theme-val(topbar, item-hover-color) {
+      --r--menu--item--hover--color: #{r-theme-val(topbar, item-hover-color)};
+    }
+
     & > a {
       @include sv-flex(1, 0, 100%);
       display: flex;
@@ -228,6 +233,7 @@
         @include media-breakpoint-up($r-topbar-breakpoint) {
           position: relative;
 
+          // If there is no default hover color we assume there is also no variant
           @if r-theme-val(topbar, item-hover-color) {
             &::after {
               content: '';
@@ -236,7 +242,7 @@
               left: 0;
               right: 0;
               height: 8px;
-              background-color: r-theme-val(topbar, item-hover-color);
+              background-color: var(--r--menu--item--hover--color);
               border-top-left-radius: 0.2rem;
               border-top-right-radius: 0.2rem;
             }