From 28d93b3c25e1cbca3baea992a299d626ca823570 Mon Sep 17 00:00:00 2001
From: doprz <52579214+doprz@users.noreply.github.com>
Date: Wed, 6 Mar 2024 12:52:56 -0600
Subject: [PATCH] feat: add tailwind version of Button component

---
 package.json                                  |  1 +
 pnpm-lock.yaml                                | 11 ++++-
 src/stories/components/Button.stories.tsx     | 47 ++++++++++++++-----
 src/views/components/common/Button/Button.tsx | 29 ++++++------
 .../common/ExtensionRoot/ExtensionRoot.tsx    |  1 +
 .../CourseButtons/CourseButtons.tsx           |  8 ++--
 .../components/injected/TableRow/TableRow.tsx |  2 +-
 7 files changed, 65 insertions(+), 34 deletions(-)

diff --git a/package.json b/package.json
index 86490fea..8d54869a 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,7 @@
     "dependencies": {
         "@hello-pangea/dnd": "^16.5.0",
         "@types/sql.js": "^1.4.9",
+        "@unocss/reset": "^0.58.5",
         "@vitejs/plugin-react": "^4.2.1",
         "chrome-extension-toolkit": "^0.0.51",
         "clsx": "^2.1.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index a4947671..24c2958f 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -19,6 +19,9 @@ dependencies:
   '@types/sql.js':
     specifier: ^1.4.9
     version: 1.4.9
+  '@unocss/reset':
+    specifier: ^0.58.5
+    version: 0.58.5
   '@vitejs/plugin-react':
     specifier: ^4.2.1
     version: 4.2.1(vite@5.1.2)
@@ -5427,8 +5430,12 @@ packages:
     resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==}
     dev: true
 
-  /@unocss/rule-utils@0.58.5:
-    resolution: {integrity: sha512-w0sGJoeUGwMWLVFLEE9PDiv/fQcQqZnTIIQLYNCjTdqXDRlwTp9ACW0h47x/hAAIXdOtEOOBuTfjGD79GznUmA==}
+  /@unocss/reset@0.58.5:
+    resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==}
+    dev: false
+
+  /@unocss/rule-utils@0.58.4:
+    resolution: {integrity: sha512-52Jp4I+joGTaDm7ehB/7uZ2kJL+9BZcYRDUVk4IDacDH5W9yxf1F75LzYT8jJVWXD/HIhiS0r9V6qhcBq2OWZw==}
     engines: {node: '>=14'}
     dependencies:
       '@unocss/core': 0.58.5
diff --git a/src/stories/components/Button.stories.tsx b/src/stories/components/Button.stories.tsx
index 1a6b993e..b095168e 100644
--- a/src/stories/components/Button.stories.tsx
+++ b/src/stories/components/Button.stories.tsx
@@ -1,6 +1,7 @@
 import { Button } from 'src/views/components/common/Button/Button';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import ImagePlaceholderIcon from '~icons/material-symbols/image';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -39,15 +40,37 @@ export const Grid: Story = {
     render: props => (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
             <div style={{ display: 'flex' }}>
-                <Button {...props} type='filled' />
-                <Button {...props} type='outline' />
-                <Button {...props} type='single' />
+                <Button {...props} variant='filled' className='bg-ut-black' />
+                <Button {...props} variant='outline' className='text-ut-black' />
+                <Button {...props} variant='single' className='text-ut-black' />
             </div>
             <div style={{ display: 'flex' }}>
-                <Button {...props} type='filled' disabled />
-                <Button {...props} type='outline' disabled />
-                <Button {...props} type='single' disabled />
+                <Button {...props} variant='filled' className='bg-ut-black' useScss />
+                <Button {...props} variant='outline' className='text-ut-black' useScss />
+                <Button {...props} variant='single' className='text-ut-black' useScss />
             </div>
+
+            <hr />
+            <div style={{ display: 'flex' }}>
+                <Button {...props} variant='filled' className='bg-ut-black' disabled />
+                <Button {...props} variant='outline' className='text-ut-black' disabled />
+                <Button {...props} variant='single' className='text-ut-black' disabled />
+            </div>
+            <div style={{ display: 'flex' }}>
+                <Button {...props} variant='filled' className='bg-ut-black' disabled useScss />
+                <Button {...props} variant='outline' className='text-ut-black' disabled useScss />
+                <Button {...props} variant='single' className='text-ut-black' disabled useScss />
+            </div>
+        </div>
+    ),
+};
+
+export const Icons: Story = {
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
+            <Button {...props} variant='filled' icon={ImagePlaceholderIcon} />
+            <Button {...props} variant='outline' icon={ImagePlaceholderIcon} />
+            <Button {...props} variant='single' icon={ImagePlaceholderIcon} />
         </div>
     ),
 };
@@ -60,14 +83,14 @@ export const CourseButtons: Story = {
     render: props => (
         <div style={{ display: 'flex', flexDirection: 'column' }}>
             <div style={{ display: 'flex' }}>
-                <Button {...props} type='filled' />
-                <Button {...props} type='outline' />
-                <Button {...props} type='single' />
+                <Button {...props} variant='filled' />
+                <Button {...props} variant='outline' />
+                <Button {...props} variant='single' />
             </div>
             <div style={{ display: 'flex' }}>
-                <Button {...props} type='filled' disabled />
-                <Button {...props} type='outline' disabled />
-                <Button {...props} type='single' disabled />
+                <Button {...props} variant='filled' disabled />
+                <Button {...props} variant='outline' disabled />
+                <Button {...props} variant='single' disabled />
             </div>
         </div>
     ),
diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx
index 598c0fa7..893b26b5 100644
--- a/src/views/components/common/Button/Button.tsx
+++ b/src/views/components/common/Button/Button.tsx
@@ -5,18 +5,18 @@ import styles from './Button.module.scss';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
-    type?: 'filled' | 'outline' | 'single';
+    variant?: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    iconOnly?: boolean;
-    showSymbol?: boolean;
-    symbol?: React.ReactNode;
+    icon?: React.ReactNode;
     disabled?: boolean;
     title?: string;
     testId?: string;
-    primaryColor?: string;
-    secondaryColor?: string;
+    useScss?: boolean;
 }
 
+const BUTTON_BASE_CLASS =
+    'm-2.5 h-10 w-auto flex cursor-pointer content-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 font-500 leading-normal font-sans btn-transition';
+
 /**
  * A reusable button component that follows the design system of the extension.
  * @returns
@@ -24,25 +24,22 @@ interface Props {
 export function Button({
     className,
     style,
-    type,
+    variant,
     onClick,
-    iconOnly,
-    showSymbol,
-    symbol,
+    icon,
     disabled,
     title,
     testId,
-    primaryColor,
-    secondaryColor,
     children,
+    useScss = false,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
         <button
             style={
                 {
                     ...style,
-                    '--color-primary': primaryColor ?? '#333F48',
-                    '--color-secondary': secondaryColor ?? '#FFFFFF',
+                    '--color-primary': '#333F48',
+                    '--color-secondary': '#FFFFFF',
                 } as React.CSSProperties
             }
             data-testid={testId}
@@ -50,9 +47,11 @@ export function Button({
                 [styles.disabled]: disabled,
             })}
             title={title}
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {!iconOnly && children}
+            {icon}
+            {children}
         </button>
     );
 }
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
index bb2fd081..d2a4c533 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -3,6 +3,7 @@ import styles from './ExtensionRoot.module.scss';
 
 import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
+import '@unocss/reset/tailwind-compat.css';
 
 interface Props {
     testId?: string;
diff --git a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx b/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
index 5f83b836..87a8fc6a 100644
--- a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
+++ b/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
@@ -83,7 +83,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 onClick={openRateMyProfessorURL}
                 disabled={!course.instructors.length}
-                type='primary'
+                variant='primary'
                 className={styles.button}
                 title='Search for this professor on RateMyProfessor'
             >
@@ -94,7 +94,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             </Button>
             <Button
                 onClick={openSyllabiURL}
-                type='secondary'
+                variant='secondary'
                 className={styles.button}
                 title='Search for syllabi for this course'
             >
@@ -105,7 +105,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             </Button>
             <Button
                 onClick={openTextbookURL}
-                type='tertiary'
+                variant='tertiary'
                 className={styles.button}
                 title='Search for textbooks for this course'
             >
@@ -118,7 +118,7 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
                 disabled={!activeSchedule}
                 onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
                 title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
-                type={isCourseSaved ? 'danger' : 'success'}
+                variant={isCourseSaved ? 'danger' : 'success'}
                 className={styles.button}
             >
 
diff --git a/src/views/components/injected/TableRow/TableRow.tsx b/src/views/components/injected/TableRow/TableRow.tsx
index 2058d925..e9c6796e 100644
--- a/src/views/components/injected/TableRow/TableRow.tsx
+++ b/src/views/components/injected/TableRow/TableRow.tsx
@@ -84,7 +84,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     return ReactDOM.createPortal(
         <>
-            <Button className={styles.rowButton} onClick={onClick} type='secondary'>
+            <Button className={styles.rowButton} onClick={onClick} variant='secondary'>
                 <Icon name='bar_chart' color='white' size='medium' />
             </Button>
             {conflicts.length > 0 && (