feat: add core curriculum chips to injected popup (#372)

* feat: add core curriculum chips to injected popup

* fix: add VP and MAcore indicators

* feat: core now defined in constructor

* fix: make core and flags closer together

* fix: stop empty core chip from showing when no core requirements

* fix: remove optional chaining for core chips

* feat: generalize Chip for both flags and core classes

* fix: change types for storybook and add new story for CoreChip

* fix: remove labelMap prop from Chip, chore: clean up imports

* feat: change tooltip for core curriculum requirement

---------

Co-authored-by: Derek Chen <derex1987@gmail.com>

src/views/components/common/Chip.tsx

@@ -1,4 +1,5 @@
 import Text from '@views/components/common/Text/Text';
+import clsx from 'clsx';
 import React from 'react';
 
 /**
@@ -14,26 +15,60 @@ export const flagMap = {
     'Independent Inquiry': 'II',
 } as const satisfies Record<string, Flag>;
 
-interface Props {
-    label: Flag;
-}
+/**
+ * A type that represents the core curriculum aspects that a course can satisfy.
+ */
+export type Core = 'ID' | 'C1' | 'HU' | 'GO' | 'HI' | 'SB' | 'MA' | 'N1' | 'N2' | 'VP';
+export const coreMap = {
+    'First-Year Signature Course': 'ID',
+    'English Composition': 'C1',
+    Humanities: 'HU',
+    'American and Texas Government': 'GO',
+    'U.S. History': 'HI',
+    'Social and Behavioral Sciences': 'SB',
+    'Natural Science and Technology, Part I': 'N1',
+    'Natural Science and Technology, Part II': 'N2',
+    Mathematics: 'MA',
+    'Visual and Performing Arts': 'VP',
+} as const satisfies Record<string, Core>;
+
+type Props =
+    | {
+          variant: 'core';
+          label: Core;
+      }
+    | {
+          variant: 'flag';
+          label: Flag;
+      };
 
 /**
  * A reusable chip component that follows the design system of the extension.
  * @returns
  */
-export function Chip({ label }: React.PropsWithChildren<Props>): JSX.Element {
-    const longFlagName = Object.entries(flagMap).find(([full, short]) => short === label)?.[0] ?? label;
+export function Chip({ variant, label }: React.PropsWithChildren<Props>): JSX.Element {
+    let labelMap;
+    switch (variant) {
+        case 'core':
+            labelMap = coreMap;
+            break;
+        case 'flag':
+            labelMap = flagMap;
+            break;
+        default:
+            labelMap = {};
+    }
+    const longName = Object.entries(labelMap).find(([full, short]) => short === label)?.[0] ?? label;
 
     return (
         <Text
             as='div'
             variant='h4'
-            className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1.5 py-0.5'
-            style={{
-                backgroundColor: '#FFD600',
-            }}
-            title={`${longFlagName} flag`}
+            className={clsx('min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1.5 py-0.5', {
+                'bg-ut-yellow text-black': variant === 'flag',
+                'bg-ut-blue text-white': variant === 'core',
+            })}
+            title={variant === 'flag' ? `${longName} flag` : `${longName} core curriculum requirement`}
         >
             {label}
         </Text>

src/views/components/injected/CourseCatalogInjectedPopup/HeadingAndActions.tsx

@@ -3,7 +3,7 @@ import type { Course } from '@shared/types/Course';
 import type Instructor from '@shared/types/Instructor';
 import type { UserSchedule } from '@shared/types/UserSchedule';
 import { Button } from '@views/components/common/Button';
-import { Chip, flagMap } from '@views/components/common/Chip';
+import { Chip, coreMap, flagMap } from '@views/components/common/Chip';
 import Divider from '@views/components/common/Divider';
 import Link from '@views/components/common/Link';
 import Text from '@views/components/common/Text/Text';
@@ -49,7 +49,7 @@ const capitalizeString = (str: string) => str.charAt(0).toUpperCase() + str.slic
  * @returns {JSX.Element} The rendered component.
  */
 export default function HeadingAndActions({ course, activeSchedule, onClose }: HeadingAndActionProps): JSX.Element {
-    const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule } = course;
+    const { courseName, department, number: courseNumber, uniqueId, instructors, flags, schedule, core } = course;
     const courseAdded = activeSchedule.courses.some(ourCourse => ourCourse.uniqueId === uniqueId);
     const formattedUniqueId = uniqueId.toString().padStart(5, '0');
     const isInCalendar = useCalendar();
@@ -152,6 +152,14 @@ export default function HeadingAndActions({ course, activeSchedule, onClose }: H
                             <Chip
                                 key={flagMap[flag as keyof typeof flagMap]}
                                 label={flagMap[flag as keyof typeof flagMap]}
+                                variant='flag'
+                            />
+                        ))}
+                        {core.map((coreVal: string) => (
+                            <Chip
+                                key={coreMap[coreVal as keyof typeof coreMap]}
+                                label={coreMap[coreVal as keyof typeof coreMap]}
+                                variant='core'
                             />
                         ))}
                     </div>