diff --git a/src/stories/components/UpdateText.stories.tsx b/src/stories/components/UpdateText.stories.tsx new file mode 100644 index 000000000..66a8d7489 --- /dev/null +++ b/src/stories/components/UpdateText.stories.tsx @@ -0,0 +1,32 @@ +import type { Meta, StoryObj } from '@storybook/react'; +import type { UpdateTextProps } from '@views/components/common/UpdateText'; +import UpdateText from '@views/components/common/UpdateText'; +import React from 'react'; + +const meta = { + title: 'Components/Common/UpdateText', + component: UpdateText, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + courses: { control: 'object' }, + }, +} satisfies Meta; + +export default meta; + +type Story = StoryObj; + +const Template = (args: React.JSX.IntrinsicAttributes & UpdateTextProps) => ; + +export const Default: Story = { + render: Template, + args: { + courses: ['12345', '23456', '34567', '45678', '56789'], + }, +}; +Default.args = { + courses: ['12345', '23456', '34567', '45678', '56789'], +}; diff --git a/src/views/components/common/UpdateText.tsx b/src/views/components/common/UpdateText.tsx new file mode 100644 index 000000000..f815aa29f --- /dev/null +++ b/src/views/components/common/UpdateText.tsx @@ -0,0 +1,40 @@ +import Text from '@views/components/common/Text/Text'; +import React from 'react'; + +/** + * Props for the Update Text + */ +export type UpdateTextProps = { + courses: string[]; +}; + +/** + * UpdateText component displays a message indicating that the extension has been updated + * and lists the unique course numbers from the old version. + * + * @param props - The properties object. + * @param props.courses - An array of course unique numbers to be displayed. + * @returns The rendered UpdateText component. + */ +export default function UpdateText({ courses }: UpdateTextProps): JSX.Element { + return ( +
+
+ + This extension has updated! + + + You may have already began planning your Spring 2025 schedule. Here are the Unique Numbers you had + from the old version: (Please open each link and re-add course to your new schedule) + +
+
+ {courses.map(course => ( + + {course} + + ))} +
+
+ ); +}