feat: updated divider component (#99)

* feat: updated divider component

* refactor: inlined Divider's classes, simplified stories

* fix: style to unocss in story

* style: renamed variant to orientation for buttons

* docs: updated comments in Divider after prop name change

src/stories/components/Button.stories.tsx

@@ -135,7 +135,7 @@ export const CourseCatalogActionButtons: Story = {
             <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
                 CES
             </Button>
-            <Button {...props} variant='outline' color='ut-yellow' icon={DescriptionIcon}>
+            <Button {...props} variant='outline' color='ut-orange' icon={DescriptionIcon}>
                 Past Syllabi
             </Button>
             <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>

src/stories/components/Divider.stories.ts

@@ -1,18 +0,0 @@
-import Divider from 'src/views/components/common/Divider/Divider';
-import type { Meta, StoryObj } from '@storybook/react';
-
-const meta = {
-  title: 'Components/Common/Divider',
-  component: Divider,
-  tags: ['autodocs'],
-  argTypes: {
-    color: {
-      control: 'color',
-    },
-  },
-} satisfies Meta<typeof Divider>;
-
-export default meta;
-type Story = StoryObj<typeof meta>;
-
-export const Default: Story = {};

src/stories/components/Divider.stories.tsx

@@ -0,0 +1,77 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import Divider from '@views/components/common/Divider/Divider';
+import { Button } from '@views/components/common/Button/Button';
+import AddIcon from '~icons/material-symbols/add';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+import DescriptionIcon from '~icons/material-symbols/description';
+import HappyFaceIcon from '~icons/material-symbols/mood';
+import ReviewsIcon from '~icons/material-symbols/reviews';
+
+const meta = {
+    title: 'Components/Common/Divider',
+    component: Divider,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof Divider>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Vertical: Story = {
+    args: {
+        size: '2.5rem',
+        orientation: 'vertical',
+    },
+    render: props => <Divider {...props} />,
+};
+
+export const Horizontal: Story = {
+    args: {
+        size: '2.5rem',
+        orientation: 'horizontal',
+    },
+    render: props => <Divider {...props} />,
+};
+
+export const IGotHorizontalIGotVerticalWhatYouWant: Story = {
+    args: {
+        size: '2.5rem',
+        orientation: 'vertical',
+    },
+
+    render: props => (
+        <div className='grid grid-cols-7 grid-rows-3 items-center justify-items-center gap-3.75'>
+            {Array.from({ length: 21 }).map((_, i) => (
+                <Divider {...props} orientation={i % 2 === 0 ? 'horizontal' : 'vertical'} />
+            ))}
+        </div>
+    ),
+};
+
+export const CourseCatalogActionButtons: Story = {
+    args: {
+        size: '1.75rem',
+        orientation: 'vertical',
+    },
+    render: props => (
+        <div className='flex items-center gap-3.75'>
+            <Button variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
+            <Divider {...props} />
+            <Button variant='outline' color='ut-blue' icon={ReviewsIcon}>
+                RateMyProf
+            </Button>
+            <Button variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+                CES
+            </Button>
+            <Button variant='outline' color='ut-orange' icon={DescriptionIcon}>
+                Past Syllabi
+            </Button>
+            <Button variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+        </div>
+    ),
+};