From 306d4fb039d3d449b091273385428ada965b0868 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Fri, 9 Feb 2024 11:29:38 -0600 Subject: [PATCH 1/6] CourseStatus Component implemented --- .../components/CourseStatus.stories.tsx | 26 ++++++++++ .../common/CourseStatus/CourseStatus.tsx | 47 +++++++++++++++++++ 2 files changed, 73 insertions(+) create mode 100644 src/stories/components/CourseStatus.stories.tsx create mode 100644 src/views/components/common/CourseStatus/CourseStatus.tsx diff --git a/src/stories/components/CourseStatus.stories.tsx b/src/stories/components/CourseStatus.stories.tsx new file mode 100644 index 000000000..ee3f4614a --- /dev/null +++ b/src/stories/components/CourseStatus.stories.tsx @@ -0,0 +1,26 @@ +import { Meta, StoryObj } from '@storybook/react'; +import CourseStatus from "@views/components/common/CourseStatus/CourseStatus" +import { Status } from "@shared/types/Course" + +const meta = { + title: 'Components/Common/CourseStatus', + component: CourseStatus, + parameters: { + layout: 'centered', + }, + tags: ['autodocs'], + argTypes: { + status: { control: 'object' }, + size: { control: 'text' } + }, +} satisfies Meta; +export default meta; + +type Story = StoryObj; + +export const Default: Story = { + args: { + status: Status.WAITLISTED, + size: 'small' + }, +}; \ No newline at end of file diff --git a/src/views/components/common/CourseStatus/CourseStatus.tsx b/src/views/components/common/CourseStatus/CourseStatus.tsx new file mode 100644 index 000000000..414a57230 --- /dev/null +++ b/src/views/components/common/CourseStatus/CourseStatus.tsx @@ -0,0 +1,47 @@ +import React from 'react'; +import { Status } from '@shared/types/Course'; +import { StatusIcon } from '@shared/util/icons'; +import clsx from 'clsx'; +import Text from '../Text/Text'; + +type SizeType = 'small' | 'mini'; + + + + +/** + * Props for CourseStatus + */ +export interface CourseStatusProps { + status: Status, + size: SizeType +} + +/** + * The "course block" to be used in the extension popup. + * + * @param props CourseStatusProps + */ +export default function CourseStatus({ status, size }: CourseStatusProps): JSX.Element { + const statusIconSizeClass = clsx({ + 'h-5 w-5': size === 'small', + 'h-4 w-4': size === 'mini', + }); + + return ( +
+ + + {status} + +
+ ); +} From 3bcc0aaa1f3d22f776d799424c153d75cf172969 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Fri, 9 Feb 2024 11:35:32 -0600 Subject: [PATCH 2/6] Update CourseStatus.tsx --- src/views/components/common/CourseStatus/CourseStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/common/CourseStatus/CourseStatus.tsx b/src/views/components/common/CourseStatus/CourseStatus.tsx index 414a57230..83cb31c4d 100644 --- a/src/views/components/common/CourseStatus/CourseStatus.tsx +++ b/src/views/components/common/CourseStatus/CourseStatus.tsx @@ -18,7 +18,7 @@ export interface CourseStatusProps { } /** - * The "course block" to be used in the extension popup. + * The CourseStatus component as part of the Labels and Details Figma section * * @param props CourseStatusProps */ From 80cd31b3bf0148a539ab2e559a37cf95de634ed5 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Fri, 9 Feb 2024 11:35:49 -0600 Subject: [PATCH 3/6] Update CourseStatus.tsx --- src/views/components/common/CourseStatus/CourseStatus.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/views/components/common/CourseStatus/CourseStatus.tsx b/src/views/components/common/CourseStatus/CourseStatus.tsx index 83cb31c4d..52d19a02b 100644 --- a/src/views/components/common/CourseStatus/CourseStatus.tsx +++ b/src/views/components/common/CourseStatus/CourseStatus.tsx @@ -18,7 +18,7 @@ export interface CourseStatusProps { } /** - * The CourseStatus component as part of the Labels and Details Figma section + * The CourseStatus component as per the Labels and Details Figma section * * @param props CourseStatusProps */ From 9295bb8e26c807fbcf0fe31c90cfd431fd085513 Mon Sep 17 00:00:00 2001 From: knownotunknown <78577376+knownotunknown@users.noreply.github.com> Date: Fri, 9 Feb 2024 11:40:16 -0600 Subject: [PATCH 4/6] Updated with Tailwind --- src/views/components/common/CourseStatus/CourseStatus.tsx | 8 +------- 1 file changed, 1 insertion(+), 7 deletions(-) diff --git a/src/views/components/common/CourseStatus/CourseStatus.tsx b/src/views/components/common/CourseStatus/CourseStatus.tsx index 52d19a02b..1b6bf40e2 100644 --- a/src/views/components/common/CourseStatus/CourseStatus.tsx +++ b/src/views/components/common/CourseStatus/CourseStatus.tsx @@ -29,13 +29,7 @@ export default function CourseStatus({ status, size }: CourseStatusProps): JSX.E }); return ( -
+
Date: Sat, 10 Feb 2024 18:55:45 -0600 Subject: [PATCH 5/6] tweak to match figma designs --- .../common/CourseStatus/CourseStatus.tsx | 25 ++++++++----------- 1 file changed, 10 insertions(+), 15 deletions(-) diff --git a/src/views/components/common/CourseStatus/CourseStatus.tsx b/src/views/components/common/CourseStatus/CourseStatus.tsx index 1b6bf40e2..8615fbd03 100644 --- a/src/views/components/common/CourseStatus/CourseStatus.tsx +++ b/src/views/components/common/CourseStatus/CourseStatus.tsx @@ -1,20 +1,17 @@ -import React from 'react'; import { Status } from '@shared/types/Course'; import { StatusIcon } from '@shared/util/icons'; import clsx from 'clsx'; +import React from 'react'; import Text from '../Text/Text'; type SizeType = 'small' | 'mini'; - - - /** * Props for CourseStatus */ export interface CourseStatusProps { - status: Status, - size: SizeType + status: Status; + size: SizeType; } /** @@ -24,18 +21,16 @@ export interface CourseStatusProps { */ export default function CourseStatus({ status, size }: CourseStatusProps): JSX.Element { const statusIconSizeClass = clsx({ - 'h-5 w-5': size === 'small', - 'h-4 w-4': size === 'mini', + 'h-5 w-5': size === 'small', + 'h-4 w-4': size === 'mini', }); return ( -
- - - {status} - +
+
+ +
+ {status}
); } From da9b1b08cdaf0d5a045843b7bbf8922aeb9dedbf Mon Sep 17 00:00:00 2001 From: Razboy20 Date: Sat, 10 Feb 2024 18:55:54 -0600 Subject: [PATCH 6/6] tweak storybook rendering --- .../components/CourseStatus.stories.tsx | 42 ++++++++++++++----- 1 file changed, 32 insertions(+), 10 deletions(-) diff --git a/src/stories/components/CourseStatus.stories.tsx b/src/stories/components/CourseStatus.stories.tsx index ee3f4614a..0e35fd26f 100644 --- a/src/stories/components/CourseStatus.stories.tsx +++ b/src/stories/components/CourseStatus.stories.tsx @@ -1,6 +1,8 @@ +import React from 'react'; + +import { Status } from '@shared/types/Course'; import { Meta, StoryObj } from '@storybook/react'; -import CourseStatus from "@views/components/common/CourseStatus/CourseStatus" -import { Status } from "@shared/types/Course" +import CourseStatus from '@views/components/common/CourseStatus/CourseStatus'; const meta = { title: 'Components/Common/CourseStatus', @@ -9,18 +11,38 @@ const meta = { layout: 'centered', }, tags: ['autodocs'], + args: { + status: Status.WAITLISTED, + size: 'small', + }, argTypes: { - status: { control: 'object' }, - size: { control: 'text' } + status: { + options: Object.values(Status), + mapping: Object.values(Status), + control: { + type: 'select', + labels: Object.keys(Status), + }, + }, + size: { + options: ['small', 'mini'], + control: { + type: 'radio', + }, + }, }, } satisfies Meta; export default meta; type Story = StoryObj; -export const Default: Story = { - args: { - status: Status.WAITLISTED, - size: 'small' - }, -}; \ No newline at end of file +export const Default: Story = {}; + +export const Variants: Story = { + render: args => ( +
+ + +
+ ), +};