refactor(ScoreSummary): add optional colorfulIcons prop

add optional colorfulIcons prop to ScoreSummary component
Codecademy · Jan 6, 2023 · ea21712 · ea21712
1 parent e1b84ee
commit ea21712
Show file tree

Hide file tree

Showing 5 changed files with 118 additions and 26 deletions.
diff --git a/packages/gamut-labs/src/QuizScore/index.tsx b/packages/gamut-labs/src/QuizScore/index.tsx
@@ -1,24 +1,23 @@
 import { Box, FlexBox, GridBox, Text } from '@codecademy/gamut';
 import { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';
-import { Colors } from '@codecademy/gamut-styles';
 import * as React from 'react';
 
 interface QuizScoreProps {
   correctCount: number;
   total: number;
-  borderColor?: Colors;
   layout?: 'row' | 'column';
   smallerFont?: boolean;
   numOfRows?: number;
+  colorfulIcons?: boolean;
 }
 
 export const QuizScore: React.FC<QuizScoreProps> = ({
-  borderColor = 'white',
   correctCount,
   layout = 'row',
   smallerFont,
   total,
   numOfRows,
+  colorfulIcons,
 }) => {
   const isRowLayout = layout === 'row';
   const moreThan5Rows = !isRowLayout && numOfRows && numOfRows > 5;
@@ -44,10 +43,11 @@ export const QuizScore: React.FC<QuizScoreProps> = ({
         <Text fontSize={14}>{affirmation}</Text>
       </FlexBox>
       <Box
-        bg={borderColor}
-        width={isRowLayout ? '1px' : ''}
-        height={isRowLayout ? '' : '1px'}
-        display={['none', , 'block']}
+        borderRight={1}
+        borderBottom={1}
+        width="100%"
+        height="100%"
+        display={{ _: 'none', xs: 'block' }}
       />
       <GridBox
         gridTemplateColumns={
@@ -63,13 +63,21 @@ export const QuizScore: React.FC<QuizScoreProps> = ({
         justifyContent="center"
         display={total === correctCount ? 'flex' : 'grid'}
       >
-        <CheckFilledIcon aria-hidden size={24} />
+        <CheckFilledIcon
+          color={colorfulIcons ? 'feedback-success' : 'inherit'}
+          aria-hidden
+          size={24}
+        />
         <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>
           {correctCount} correct
         </Text>
         {correctCount < total && (
           <>
-            <DeleteFilledIcon aria-hidden size={24} />
+            <DeleteFilledIcon
+              color={colorfulIcons ? 'feedback-error' : 'inherit'}
+              aria-hidden
+              size={24}
+            />
             <Text fontSize={smallerFont ? 16 : 22} lineHeight={2 as any}>{`${
               total - correctCount
             } to work on`}</Text>

diff --git a/packages/gamut-labs/src/ScoreSummary/index.tsx b/packages/gamut-labs/src/ScoreSummary/index.tsx
@@ -1,4 +1,5 @@
 import { Anchor, Box, FlexBox, GridBox, Text } from '@codecademy/gamut';
+import { CheckFilledIcon, DeleteFilledIcon } from '@codecademy/gamut-icons';
 import { Colors, pxRem } from '@codecademy/gamut-styles';
 import { UserClickData } from '@codecademy/tracking';
 import * as React from 'react';
@@ -14,27 +15,32 @@ export interface ScoreSummaryProps {
   pathSlug: string;
   trackSlug?: string;
   trackingData?: UserClickData;
-  borderColor?: Colors;
   lighterBorderColor?: Colors;
   layout?: 'column' | 'row';
   untestedSubContent?: UntestedSubContent[];
   trackUserClick?: (data: UserClickData) => void;
   description?: string;
   noMaxWidth?: boolean;
+  colorfulIcons?: boolean;
 }
 
+const SHOW_REVIEW_SCORE = 0.6;
+const PASSING_SCORE = 0.7;
+
 const renderSubScores = ({
   subScores,
   pathSlug,
   trackSlug,
   trackingData,
   trackUserClick,
+  colorfulIcons,
 }: {
   subScores: CorrectAnswerCountsBySubContent;
   pathSlug: string;
   trackSlug?: string;
   trackingData?: UserClickData;
   trackUserClick?: (data: UserClickData) => void;
+  colorfulIcons?: boolean;
 }) =>
   Object.entries(subScores).map(
     (
@@ -63,10 +69,36 @@ const renderSubScores = ({
           px={16}
           py={8}
           justifyContent="space-between"
+          alignItems="center"
         >
-          <Text fontWeight="bold">{subContentTitle}</Text>
-          <FlexBox fontSize={14} minWidth="11rem" justifyContent="flex-end">
-            {subContentPercentCorrect <= 0.6 && trackSlug && (
+          <FlexBox alignItems="center">
+            {colorfulIcons ? (
+              subContentPercentCorrect >= PASSING_SCORE ? (
+                <CheckFilledIcon
+                  minWidth={16}
+                  mr={12}
+                  color="feedback-success"
+                />
+              ) : (
+                <DeleteFilledIcon
+                  minWidth={16}
+                  mr={12}
+                  color="feedback-error"
+                />
+              )
+            ) : null}
+            <Text fontWeight="bold">{subContentTitle}</Text>
+          </FlexBox>
+          <FlexBox
+            fontSize={14}
+            minWidth={
+              subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug
+                ? '11rem'
+                : '3rem'
+            }
+            justifyContent="flex-end"
+          >
+            {subContentPercentCorrect < SHOW_REVIEW_SCORE && trackSlug && (
               <>
                 <Anchor
                   aria-label={`Review concepts for ${subContentTitle}`}
@@ -149,12 +181,12 @@ export const ScoreSummary: React.FC<ScoreSummaryProps> = ({
   trackSlug,
   trackingData,
   untestedSubContent,
-  borderColor = 'white',
   lighterBorderColor = 'navy-400',
   layout = 'row',
   trackUserClick,
   description,
   noMaxWidth = false,
+  colorfulIcons = false,
 }) => {
   let numOfRows = Object.entries(subScores).length;
   if (untestedSubContent) {
@@ -163,9 +195,10 @@ export const ScoreSummary: React.FC<ScoreSummaryProps> = ({
   const isRowLayout = layout === 'row';
   return (
     <GridBox gridTemplateColumns={isRowLayout ? { _: '', md: '2fr 3fr' } : ''}>
-      <GridBox
+      <Box
         zIndex={1}
         bg="transparent"
+        display="inline"
         maxWidth={
           noMaxWidth
             ? ''
@@ -185,12 +218,12 @@ export const ScoreSummary: React.FC<ScoreSummaryProps> = ({
           border={1}
         >
           <QuizScore
-            borderColor={borderColor}
             correctCount={totalCorrect}
             layout={isRowLayout ? 'column' : 'row'}
             total={totalQuestions}
             smallerFont
             numOfRows={numOfRows}
+            colorfulIcons={colorfulIcons}
           />
         </Box>
         {description && (
@@ -211,7 +244,7 @@ export const ScoreSummary: React.FC<ScoreSummaryProps> = ({
             <Text fontSize={14}>{description}</Text>
           </Box>
         )}
-      </GridBox>
+      </Box>
       <FlexBox flexDirection="column" maxWidth={noMaxWidth ? '' : pxRem(705)}>
         <FlexBox
           flexDirection="column"
@@ -225,6 +258,7 @@ export const ScoreSummary: React.FC<ScoreSummaryProps> = ({
             trackSlug,
             trackingData,
             trackUserClick,
+            colorfulIcons,
           })}
         </FlexBox>
         <GridBox bg="transparent">

diff --git a/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap b/packages/gamut-styles/src/themes/__tests__/__snapshots__/theme.test.ts.snap
@@ -526,7 +526,7 @@ Object {
         "danger": "#E85D7F",
         "danger-hover": "#DC5879",
         "feedback-error": "#E85D7F",
-        "feedback-success": "#F5FFE3",
+        "feedback-success": "#AEE938",
         "feedback-warning": "#FFFAE5",
         "interface": "#FFD300",
         "interface-hover": "#CCA900",
@@ -824,7 +824,7 @@ monospace",
       "danger": "red-0",
       "danger-hover": "red-100",
       "feedback-error": "red-0",
-      "feedback-success": "green-0",
+      "feedback-success": "green-400",
       "feedback-warning": "yellow-0",
       "interface": "yellow-500",
       "interface-hover": "yellow-400",
@@ -1002,7 +1002,7 @@ Object {
         "editor-value": "#FFD300",
         "editor-variable": "#AEE938",
         "feedback-error": "#E85D7F",
-        "feedback-success": "#F5FFE3",
+        "feedback-success": "#AEE938",
         "feedback-warning": "#FFFAE5",
         "interface": "#FFD300",
         "interface-hover": "#CCA900",
@@ -1107,7 +1107,7 @@ Object {
       "--color-editor-value": "var(--color-yellow-500)",
       "--color-editor-variable": "var(--color-green-400)",
       "--color-feedback-error": "var(--color-red-0)",
-      "--color-feedback-success": "var(--color-green-0)",
+      "--color-feedback-success": "var(--color-green-400)",
       "--color-feedback-warning": "var(--color-yellow-0)",
       "--color-interface": "var(--color-yellow-500)",
       "--color-interface-hover": "var(--color-yellow-400)",
@@ -1420,7 +1420,7 @@ monospace",
       "editor-value": "yellow-500",
       "editor-variable": "green-400",
       "feedback-error": "red-0",
-      "feedback-success": "green-0",
+      "feedback-success": "green-400",
       "feedback-warning": "yellow-0",
       "interface": "yellow-500",
       "interface-hover": "yellow-400",

diff --git a/packages/gamut-styles/src/themes/core.ts b/packages/gamut-styles/src/themes/core.ts
@@ -70,7 +70,7 @@ export const coreTheme = createTheme({
       text: { _: 'white', accent: 'beige', disabled: 'navy-200' },
       feedback: {
         error: 'red-0',
-        success: 'green-0',
+        success: 'green-400',
         warning: 'yellow-0',
       },
       background: {

diff --git a/packages/styleguide/stories/Brand Labs/Organisms/ScoreSummary.stories.mdx b/packages/styleguide/stories/Brand Labs/Organisms/ScoreSummary.stories.mdx
@@ -65,18 +65,30 @@ This is for use on the syllabus
       <ScoreSummary
         {...args}
         subScores={{
-          'id-2': {
+          'id-1': {
             correct: 5,
             slug: 'becp-22-learn-html-elements-and-structure',
             title: 'Learn HTML: Elements and Structure',
             total: 24,
           },
-          'id-3': {
+          'id-2': {
             correct: 4,
             slug: 'wdcp-22-learn-css-selectors-and-visual-roles',
             title: 'Learn CSS: Selectors and Visual Rules',
             total: 20,
           },
+          'id-3': {
+            correct: 2,
+            slug: 'wdcp-22-learn-javascript-syntax-objects',
+            title: 'Learn JavaScript Syntax: Objects',
+            total: 17,
+          },
+          'id-4': {
+            correct: 2,
+            slug: 'wdcp-22-learn-javascript-syntax-arrays',
+            title: 'Learn JavaScript Syntax: Arrays',
+            total: 5,
+          },
         }}
         totalCorrect={9}
         totalQuestions={44}
@@ -183,7 +195,7 @@ Add noMaxWidth prop if you don't want a max width, for example, for use on the c
         }}
         totalCorrect={9}
         totalQuestions={44}
-        trackSlug="becp-22-website-development-fundamentals"
+        trackSlug=""
         untestedSubContent={[
           {
             id: 'id-5',
@@ -329,3 +341,41 @@ Optional description text - shown here in column layout
     )}
   </Story>
 </Canvas>
+
+## Colorful Icons
+
+<Canvas>
+  <Story name="Colorful Icons">
+    {(args) => (
+      <ScoreSummary
+        {...args}
+        colorfulIcons
+        totalCorrect={18}
+        totalQuestions={26}
+        layout="column"
+        subScores={{
+          'id-2': {
+            correct: 5,
+            slug: 'becp-22-learn-html-elements-and-structure',
+            title: 'Learn HTML: Elements and Structure',
+            total: 10,
+          },
+          'id-3': {
+            correct: 5,
+            slug: 'wdcp-22-learn-css-selectors-and-visual-roles',
+            title: 'Learn CSS: Selectors and Visual Rules',
+            total: 6,
+          },
+          'id-1': {
+            correct: 8,
+            slug: 'wdcp-22-learn-javascript-syntax-objects',
+            title: 'Learn JavaScript Syntax: Objects',
+            total: 10,
+          },
+        }}
+        trackSlug={undefined}
+        untestedSubContent={[]}
+      />
+    )}
+  </Story>
+</Canvas>