feat: course-catalog-injected-popup (#98)

* some work

* some work on course popup

update the stories and create the header component

* use chip component in header

* complete CourseHeaderAndActions Component

added course buttons, using proper subcomponents now.

* Change test course to 314

* Add rmp callback

* some unocss updates

* add course button onclick handlers

* add todo for calendar button

* Rename CoursePopup

Old one to "Old", remove "2" from new one

* description stuff done

* Modify story to use proper course info

* Add Grade Distribution Stuff

* Minor tweaks

change style in header

* Add TODO

replace current grade colors with a tailwind palette

* Fix syllabi url

Remove unused variable and unnecessary args to url

* Bunch of renaming

* Kinda complete the handlers

* change grade distribution colors to match updated figma

* change from reducer pattern to state variables, remove chartData from state

* add additional story

* disabled add when course is not open

* use array fill

* Some changes with the instructor names

* trying to get the CES stuff to work

* CES button is working

* remove a todo

* add actual color for dminus

* fix description, start no distribution state

* post merge fixes

* small fixes

* fix: import as type

* fix: some better typescript stuff i think

* fix: manifest.ts

* fix: pr feedback

* Apply suggestions from code review

---------

Co-authored-by: doprz <52579214+doprz@users.noreply.github.com>

src/stories/injected/CourseCatalogInjectedPopup.stories.ts

@@ -9,6 +9,51 @@ const exampleSchedule: UserSchedule = new UserSchedule({
     name: 'Example Schedule',
     hours: 0,
 });
+// TODO (achadaga): import this after 
+// https://github.com/Longhorn-Developers/UT-Registration-Plus/pull/106 is merged
+const bevoCourse: Course = new Course({
+    uniqueId: 47280,
+    number: '311C',
+    fullName: "BVO 311C BEVO'S SEMINAR LONGHORN CARE",
+    courseName: "BEVO'S SEMINAR LONGHORN CARE",
+    department: 'BVO',
+    creditHours: 3,
+    status: Status.OPEN,
+    instructors: [new Instructor({ fullName: 'BEVO', firstName: '', lastName: 'BEVO', middleInitial: '' })],
+    isReserved: false,
+    description: [
+        'Restricted to Students in the School of Longhorn Enthusiasts',
+        'Immerse yourself in the daily routine of a longhorn—sunrise pasture walks and the best shady spots for a midday siesta. Understand the behavioral science behind our mascot’s stoic demeanor during games.',
+        'BVO 311C and 312H may not both be counted.',
+        'Prerequisite: Grazing 311 or 311H.',
+        'May be counted toward the Independent Inquiry flag requirement. May be counted toward the Writing flag requirement',
+        'Offered on the letter-grade basis only.',
+    ],
+    schedule: new CourseSchedule({
+        meetings: [
+            new CourseMeeting({
+                days: ['Tuesday', 'Thursday'],
+                startTime: 480,
+                endTime: 570,
+                location: { building: 'UTC', room: '123' },
+            }),
+            new CourseMeeting({
+                days: ['Thursday'],
+                startTime: 570,
+                endTime: 630,
+                location: { building: 'JES', room: '123' },
+            }),
+        ],
+    }),
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+    flags: ['Independent Inquiry', 'Writing'],
+    instructionMode: 'In Person',
+    semester: {
+        code: '12345',
+        year: 2024,
+        season: 'Spring',
+    },
+});
 
 const meta = {
     title: 'Components/Injected/CourseCatalogInjectedPopup',
@@ -40,10 +85,25 @@ const meta = {
 export default meta;
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
+export const OpenCourse: Story = {
     args: {
         course: exampleCourse,
         activeSchedule: exampleSchedule,
         onClose: () => {},
     },
 };
+
+export const ClosedCourse: Story = {
+    args: {
+        course: {
+            ...exampleCourse,
+            status: Status.CLOSED,
+        } satisfies Course,
+    },
+};
+
+export const CourseWithNoData: Story = {
+    args: {
+        course: bevoCourse,
+    },
+};