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>