dropdown and calendar schedules storybook

pnpm-lock.yaml

@@ -12337,6 +12337,20 @@ packages:
     resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==}
     dev: false
 
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 10.3.10
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+    dev: false
+
   /sumchecker@3.0.1:
     resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
     engines: {node: '>= 8.0'}

src/stories/components/Dropdown.stories.tsx

@@ -62,7 +62,7 @@ const schedules = [
                 instructionMode: 'In Person',
                 semester: {
                     year: 2024,
-                    season: 'Fall'
+                    season: 'Fall',
                 },
             }),
         ],
@@ -99,7 +99,7 @@ const schedules = [
                 instructionMode: 'In Person',
                 semester: {
                     year: 2024,
-                    season: 'Fall'
+                    season: 'Fall',
                 },
             }),
             new Course({
@@ -130,7 +130,7 @@ const schedules = [
                 instructionMode: 'In Person',
                 semester: {
                     year: 2024,
-                    season: 'Fall'
+                    season: 'Fall',
                 },
             }),
         ],
@@ -151,9 +151,7 @@ export const Hidden: Story = {
         dummySchedules: schedules,
         dummyActiveIndex: 0,
         scheduleComponents: schedules.map((schedule, index) => (
-            <div onClick={() => {}} className='p-l-3'>
-                <ScheduleListItem active={index === 0} name={schedule.name} />
-            </div>
+            <ScheduleListItem active={index === 0} name={schedule.name} />
         )),
     },
-};
+};

src/views/components/common/CalendarSchedules/CalendarSchedules.tsx

@@ -16,9 +16,7 @@ export function CalendarSchedules(props: Props) {
     const [schedules, setSchedules] = useState(props.dummySchedules || []);
 
     const scheduleComponents = schedules.map((schedule, index) => (
-        <div onClick={() => setActiveScheduleIndex(index)}>
             <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
-        </div>
     ));
 
     return (

src/views/components/common/ScheduleListItem/ScheduleListItem.tsx

@@ -1,36 +1,38 @@
 import clsx from 'clsx';
 import React from 'react';
-import DropdownDrag from '~icons/material-symbols/drag-indicator';
+import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 import Text from '../Text/Text';
 
-
 export type Props = {
     style?: React.CSSProperties;
     active?: boolean;
     name: string;
+    dragHandleProps?: any;
 };
 
-
-
 /**
  * This is a reusable dropdown component that can be used to toggle the visiblity of information
  */
 export default function ScheduleListItem(props: Props) {
-
+    const { dragHandleProps } = props;
+    console.log(props);
     return (
         <div style={{ ...props.style }} className='items-center'>
-            <li
-            className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'
-            >
+            <li className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'>
                 <div className='group flex justify-center'>
-                    <DropdownDrag className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
+                    <div 
+                        className='flex cursor-move items-center self-stretch rounded rounded-r-0'
+                        {...dragHandleProps}  
+                    >
+                        <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
+                    </div>
                     <div className='inline-flex items-center justify-center gap-1.5'>
                         <div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
                             <div
                                 className={clsx(
                                     'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
                                     {
-                                        'scale-0! opacity-0 ease-in-out! duration-200!': !props.active
+                                        'scale-0! opacity-0 ease-in-out! duration-200!': !props.active,
                                     }
                                 )}
                             />