feat: Colored grade segments extended from default 5 to default 12

src/grading-settings/grading-scale/GradingScale.jsx

@@ -227,6 +227,7 @@ const GradingScale = ({
             idx={idx}
             handleLetterChange={handleLetterChange}
             letters={letters}
+            totalSegments={gradingSegments.length}
           />
         ))}
         {handles.map(({ value, getHandleProps }, idx) => (

src/grading-settings/grading-scale/GradingScale.scss

@@ -58,12 +58,12 @@
         display: none;
       }
 
-      @each $key, $color in $grading-scale-segment-colors {
-        &.segment-#{$key} {
-          background-color: $color;
-          z-index: #{$key};
-        }
-      }
+      // @each $key, $color in $grading-scale-segment-colors {
+      //   &.segment-#{$key} {
+      //     background-color: $color;
+      //     z-index: #{$key};
+      //   }
+      // }
 
       &:hover .grading-scale-segment-btn-remove {
         display: block;

src/grading-settings/grading-scale/components/GradingScaleSegment.tsx

@@ -3,7 +3,7 @@ import { Button } from '@openedx/paragon';
 import React, { ChangeEvent } from 'react';
 import messages from '../messages';
 
-import { getLettersOnLongScale, getLettersOnShortScale } from '../utils';
+import { getLettersOnLongScale, getLettersOnShortScale, setGradeSegmentColor } from '../utils';
 
 interface RangeSegment {
   previous: number,
@@ -18,6 +18,7 @@ interface GradingScaleSegmentProps {
   letters: [string],
   gradingSegments: RangeSegment[],
   removeGradingSegment: (idx: number) => void,
+  totalSegments: number,
 }
 
 const GradingScaleSegment = ({
@@ -28,17 +29,22 @@ const GradingScaleSegment = ({
   letters,
   gradingSegments,
   removeGradingSegment,
+  totalSegments
 }: GradingScaleSegmentProps) => {
   const intl = useIntl();
   const prevValue = gradingSegments[idx === 0 ? 0 : idx - 1]?.previous ?? 0;
   const segmentRightMargin = (value - prevValue) < 6 ? '0.125rem' : '1.25rem';
   return (
-    <div
-      key={value}
-      className={`grading-scale-segment segment-${idx - 1}`}
-      data-testid="grading-scale-segment"
-      {...getSegmentProps()}
-    >
+      <div
+        key={value}
+        className={`grading-scale-segment`}
+        data-testid={`grading-scale-segment`}
+        {...getSegmentProps()}
+        style={{
+          ...getSegmentProps().style,
+          backgroundColor: setGradeSegmentColor(idx, totalSegments),
+        }}
+      >
       <div
         className="grading-scale-segment-content"
         style={{

src/grading-settings/grading-scale/utils.js

@@ -88,3 +88,16 @@ export const convertGradeData = (letters, gradingSegments, setConvertedResult) =
 
   setConvertedResult(convertedData);
 };
+
+/**
+ * Determines hue(range 0–130) and saturation value of grade segment
+ *
+ * @param {number} index - The current grade letter index.
+ * @param {number} total - Configured total number of grade letters.
+ * @returns {string} - css hsla function call with hue and saturation values set for a grade segment
+ */
+  export const setGradeSegmentColor = (index, total) => {
+    const hue = ((total-index) / (total - 1)) * 130;
+    const saturation = index % 2 === 0 ? 100 : 50;
+    return `hsla(${hue}, ${saturation}%, 50%, 1)`;
+  };

src/grading-settings/scss/_variables.scss

@@ -1,7 +1,22 @@
-$grading-scale-segment-colors: (
-  0: #87D771,
-  1: #FDE370,
-  2: #F6BF58,
-  3: #FF7E6A,
-  4: #E94949,
-);
+// $grading-scale-segment-colors: (
+//   0: #0099B1,
+//   1: #00B7D3,
+//   2: #95D4DC,
+//   3: #27B173,
+//   4: #2ED389,
+//   5: #93DBAF,
+//   6: #D4BE17,
+//   7: #F6DD1B,
+//   8: #FFF2BB,
+//   9: #F67B00,
+//   10: #FF9B3B,
+//   11: #E23900
+// );
+
+// $grading-scale-segment-colors: (
+//   0: #87D771,
+//   1: #FDE370,
+//   2: #F6BF58,
+//   3: #FF7E6A,
+//   4: #E94949,
+// );