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>
+    ),
+};

src/views/components/common/Divider/Divider.module.scss

@@ -1,5 +0,0 @@
-@use 'src/views/styles/colors.module.scss';
-
-hr {
-    border: 1px solid colors.$limestone;
-}

src/views/components/common/Divider/Divider.tsx

@@ -1,25 +1,47 @@
 import clsx from 'clsx';
 import React from 'react';
-import { Color } from '@views/styles/colors.module.scss';
-import styles from './Divider.module.scss';
 
-export type Props = {
-    color?: Color | React.CSSProperties['borderColor'];
-    type?: 'solid' | 'dashed' | 'dotted';
-    style?: React.CSSProperties;
+/**
+ * Props for the Divider component
+ *
+ * @param orientation - Orientation of the divider (horizontal or vertical)
+ * @param size - Size of the divider (forwards to width or height in CSS)
+ * @param className - Additional classes to be added to the divider
+ * @param testId - Test id for the divider
+ */
+export type DividerProps = {
+    orientation: 'horizontal' | 'vertical';
+    size: React.CSSProperties['width' | 'height'];
     className?: string;
     testId?: string;
 };
 
 /**
  * This is a reusable divider component that can be used to separate content
+ *
+ * @returns A divider component
+ *
+ * @example
+ * ```tsx
+ * <Divider size="2.5rem" orientation="vertical" />
+ * ```
+ *
+ * @example
+ * ```tsx
+ * <Divider size="19px" orientation="horizontal" />
+ * ```
  */
-export default function Divider(props: Props) {
-    const style = {
-        ...props.style,
-        borderColor: props.color,
-        borderStyle: props.type,
-    };
+export default function Divider({ className, testId, size, orientation }: DividerProps) {
+    const style: React.CSSProperties =
+        orientation === 'horizontal'
+            ? { width: size, borderBottomWidth: '1px' }
+            : { height: size, borderRightWidth: '1px' };
 
-    return <hr data-testid={props.testId} style={style} className={clsx(styles.divider, props.className)} />;
+    return (
+        <div
+            style={style}
+            data-testid={testId}
+            className={clsx('border-solid border-ut-offwhite w-0 h-0', className)}
+        />
+    );
 }