Merge branch 'hackathon' of https://github.com/ut-developers/UT-Registration-Plus into hackathon

src/stories/components/Settings.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Settings from 'src/views/components/Settings';
+
+const meta = {
+    title: 'Components/Common/Settings',
+    component: Settings,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof Settings>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

src/stories/injected/CoursePopup.stories.ts

@@ -3,6 +3,7 @@ import { CourseMeeting } from 'src/shared/types/CourseMeeting';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
 import CoursePopup from 'src/views/components/injected/CoursePopup/CoursePopup';
 import type { Meta, StoryObj } from '@storybook/react';
+import Instructor from 'src/shared/types/Instructor';
 
 const exampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
@@ -18,7 +19,20 @@ const exampleCourse: Course = new Course({
     flags: ['Quantitative Reasoning'],
     fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
     instructionMode: 'Online',
-  instructors: [],
+    instructors: [
+        new Instructor({
+            firstName: 'William',
+            lastName: 'Young',
+            middleInitial: 'D',
+            fullName: 'William D Young',
+        }),
+        new Instructor({
+            firstName: 'William',
+            lastName: 'Young',
+            middleInitial: 'D',
+            fullName: 'William D Young',
+        }),
+    ],
     isReserved: false,
     number: '303E',
     schedule: {

src/views/components/Settings.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+    className?: string;
+};
+
+/**
+ * Component to hold everything for the settings page
+ * @param props className
+ * @returns The content for the settings page
+ */
+export default function Settings({ className }: Props) {
+    return <div className={className}>this will be finished laterrrrrrr</div>;
+}

src/views/components/injected/CoursePopup/CourseHeader/CourseHeader.tsx

@@ -5,8 +5,11 @@ import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Link from '@views/components/common/Link/Link';
 import Text from '@views/components/common/Text/Text';
-//  import CourseButtons from './CourseButtons/CourseButtons';
+import { Button } from 'src/views/components/common/Button/Button';
+import CourseButtons from './CourseButtons/CourseButtons';
 import styles from './CourseHeader.module.scss';
+import CopyIcon from '~icons/material-symbols/content-copy';
+import CloseIcon from '~icons/material-symbols/close';
 
 type Props = {
     course: Course;
@@ -19,86 +22,112 @@ type Props = {
  * It displays the course name, unique id, instructors, and schedule, all formatted nicely.
  */
 export default function CourseHeader({ course, activeSchedule, onClose }: Props) {
-    const getBuildingUrl = (building?: string): string | undefined => {
+    // const getBuildingUrl = (building?: string): string | undefined => {
-        if (!building) return undefined;
+    //     if (!building) return undefined;
-        return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
+    //     return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
-    };
+    // };
 
     return (
-        <Card className={styles.header}>
+        <div className='mx-6 my-5'>
-            <Icon className={styles.close}  /*  size='large'    */ name='close' onClick={onClose} />
+            <div className='flex items-center justify-start'>
-            <div className={styles.title}>
+                <Text variant='h1' className='shrink truncate'>
-                <Text className={styles.courseName} /* size='large' weight='bold' color='black' */>
+                    {course.courseName}
-                    {course.courseName} ({course.department} {course.number})
                 </Text>
-                <Link
+                <Text variant='h1' className='ml-1 shrink-0'>
-                    url={course.url}
+                    {`(${course.department} ${course.number})`}
-                    className={styles.uniqueId}
+                </Text>
-                    /* size='medium' 
+                <div className='ml-auto min-w-fit flex shrink-0 gap-0'>
-                    weight='semi_bold' */
+                    <Button icon={CopyIcon} variant='single' className='mr-1 px-2' color='ut-burntorange'>
-                    color='burnt_orange'
+                        {course.uniqueId}
-                    title='View course details on UT Course Schedule'
+                    </Button>
-                >
+                    <button className='btn bg-transparent p-0'>
-                    #{course.uniqueId}
+                        <CloseIcon className='h-7 w-7' />
-                </Link>
+                    </button>
                 </div>
-            <Text /*    size='medium' className={styles.instructors}    */>
+            </div>
-                {`with ${!course.instructors.length ? 'TBA' : ''}`}
+            <div>
-                {course.instructors.map((instructor, index) => {
+                <Text variant='p'>
-                    const name = instructor.toString({
+                    with{' '}
-                        format: 'first_last',
+                    {course.instructors.map(instructor => (
-                        case: 'capitalize',
+                        <span className=''>{instructor.lastName}</span>
-                    });
-
-                    const url = instructor.getDirectoryUrl();
-                    const numInstructors = course.instructors.length;
-                    const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
-                    return (
-                        <span key={name}>
-                            {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
-                            <Link
-                                key={name}
-                                /*  size='medium'    
-                                weight='normal' */
-                                url={url}
-                                title="View instructor's directory page"
-                            >
-                                {name}
-                            </Link>
-                            {numInstructors > 2 && !isLast ? ', ' : ''}
-                        </span>
-                    );
-                })}
-            </Text>
-            {course.schedule.meetings.map(meeting => (
-                <Text /*    size='medium'   */ className={styles.meeting} key={meeting.startTime}>
-                    <Text as='span' /*  size='medium'    weight='bold'  */ color='black'>
-                        {meeting.getDaysString({
-                            format: 'long',
-                            separator: 'short',
-                        })}
-                    </Text>
-                    {' at '}
-                    <Text as='span' /*  size='medium'  */>
-                        {meeting.getTimeString({
-                            separator: 'to',
-                            capitalize: true,
-                        })}
-                    </Text>
-                    {' in '}
-                    <Link
-                        /*  size='medium'
-                        weight='normal' */
-                        title='View building on UT Map'
-                        url={getBuildingUrl(meeting.location?.building)}
-                        disabled={!meeting.location?.building}
-                    >
-                        {meeting.location?.building ?? 'TBA'}
-                    </Link>
-                </Text>
                     ))}
+                </Text>
+            </div>
+        </div>
+        // <Card className={styles.header}>
+        //     <Icon className={styles.close} /*  size='large'    */ name='close' onClick={onClose} />
+        //     <div className={styles.title}>
+        //         <Text className={styles.courseName} /* size='large' weight='bold' color='black' */>
+        //             {course.courseName} ({course.department} {course.number}) blahhhhh
+        //         </Text>
+        //         <Link
+        //             url={course.url}
+        //             className={styles.uniqueId}
+        //             /* size='medium'
+        //             weight='semi_bold' */
+        //             color='burnt_orange'
+        //             title='View course details on UT Course Schedule'
+        //         >
+        //             #{course.uniqueId}
+        //         </Link>
+        //     </div>
+        //     <Text /*    size='medium' className={styles.instructors}    */>
+        //         {`with ${!course.instructors.length ? 'TBA' : ''}`}
+        //         {course.instructors.map((instructor, index) => {
+        //             const name = instructor.toString({
+        //                 format: 'first_last',
+        //                 case: 'capitalize',
+        //             });
 
-            {/* <CourseButtons course={course} activeSchedule={activeSchedule} />   */}
+        //             const url = instructor.getDirectoryUrl();
-        </Card>
+        //             const numInstructors = course.instructors.length;
+        //             const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
+        //             return (
+        //                 <span key={name}>
+        //                     {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
+        //                     <Link
+        //                         key={name}
+        //                         /*  size='medium'
+        //                         weight='normal' */
+        //                         url={url}
+        //                         title="View instructor's directory page"
+        //                     >
+        //                         {name}
+        //                     </Link>
+        //                     {numInstructors > 2 && !isLast ? ', ' : ''}
+        //                 </span>
+        //             );
+        //         })}
+        //     </Text>
+        //     {course.schedule.meetings.map(meeting => (
+        //         <Text /*    size='medium'   */ className={styles.meeting} key={meeting.startTime}>
+        //             <Text as='span' /*  size='medium'    weight='bold'  */ color='black'>
+        //                 {meeting.getDaysString({
+        //                     format: 'long',
+        //                     separator: 'short',
+        //                 })}
+        //             </Text>
+        //             {' at '}
+        //             <Text as='span' /*  size='medium'  */>
+        //                 {meeting.getTimeString({
+        //                     separator: 'to',
+        //                     capitalize: true,
+        //                 })}
+        //             </Text>
+        //             {' in '}
+        //             <Link
+        //                 /*  size='medium'
+        //                 weight='normal' */
+        //                 title='View building on UT Map'
+        //                 url={getBuildingUrl(meeting.location?.building)}
+        //                 disabled={!meeting.location?.building}
+        //             >
+        //                 {meeting.location?.building ?? 'TBA'}
+        //             </Link>
+        //         </Text>
+        //     ))}
+
+        //     <CourseButtons course={course} activeSchedule={activeSchedule} />
+        // </Card>
     );
 }