feat: buttons with icons in tailwind

i am not proud of some of this code
2024-02-11 23:24:24 -06:00
parent 2eaf1b3c36
commit 000682b4db
6 changed files with 195 additions and 88 deletions
--- a/src/shared/util/themeColors.ts
+++ b/src/shared/util/themeColors.ts
@@ -0,0 +1,60 @@
+export const colors = {
+    ut: {
+        'burnt-orange': '#BF5700',
+        black: '#333F48',
+        orange: '#f8971f',
+        yellow: '#ffd600',
+        'light-green': '#a6cd57',
+        green: '#579d42',
+        teal: '#00a9b7',
+        blue: '#005f86',
+        gray: '#9cadb7',
+        'off-white': '#d6d2c4',
+        concrete: '#95a5a6',
+    },
+    theme: {
+        red: '#af2e2d',
+        black: '#1a2024',
+    },
+} as const;
+
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends Record<string, any> ? `${string & K}-${string & keyof T[K]}` : never;
+}[keyof T];
+
+/**
+ * A union of all colors in the theme
+ */
+export type ThemeColor = NestedKeys<typeof colors>;
+
+export const colorsFlattened = Object.entries(colors).reduce(
+    (acc, [prefix, group]) => {
+        for (const [name, hex] of Object.entries(group)) {
+            acc[`${prefix}-${name}`] = hex;
+        }
+        return acc;
+    },
+    {} as Record<ThemeColor, string>
+);
+
+const hexToRgb = (hex: string) =>
+    hex.match(/[0-9a-f]{2}/gi).map(partialHex => parseInt(partialHex, 16)) as [number, number, number];
+
+const colorsFlattenedRgb = Object.fromEntries(
+    Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRgb(hex)])
+) as Record<ThemeColor, ReturnType<typeof hexToRgb>>;
+
+/**
+ * Retrieves the hexadecimal color value by name from the theme.
+ *
+ * @param name - The name of the theme color.
+ * @returns The hexadecimal color value.
+ */
+export const getThemeColorHexByName = (name: ThemeColor): string => colorsFlattened[name];
+
+/**
+ *
+ * @param name - The name of the theme color.
+ * @returns An array of the red, green, and blue values, respectively
+ */
+export const getThemeColorRgbByName = (name: ThemeColor) => colorsFlattenedRgb[name];
--- a/src/stories/components/Button.stories.tsx
+++ b/src/stories/components/Button.stories.tsx
@@ -1,7 +1,14 @@
 import { Button } from 'src/views/components/common/Button/Button';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { colorsFlattened } from 'src/shared/util/themeColors';
 import ImagePlaceholderIcon from '~icons/material-symbols/image';
+import AddIcon from '~icons/material-symbols/add';
+import RemoveIcon from '~icons/material-symbols/remove';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+import ReviewsIcon from '~icons/material-symbols/reviews';
+import HappyFaceIcon from '~icons/material-symbols/mood';
+import DescriptionIcon from '~icons/material-symbols/description';

 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
@@ -16,6 +23,7 @@ const meta = {
    // More on argTypes: https://storybook.js.org/docs/api/argtypes
    args: {
        children: 'Button',
+        icon: ImagePlaceholderIcon,
    },
    argTypes: {
        children: { control: 'text' },
@@ -27,71 +35,79 @@ type Story = StoryObj<typeof meta>;

 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
-    args: {},
+    args: {
+        variant: 'filled',
+        color: 'ut-black',
+    },
 };

 export const Disabled: Story = {
    args: {
+        variant: 'filled',
+        color: 'ut-black',
        disabled: true,
    },
 };

 export const Grid: Story = {
    render: props => (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <div style={{ display: 'flex' }}>
-                <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} 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 style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' />
+                <Button {...props} variant='outline' color='ut-black' />
+                <Button {...props} variant='single' color='ut-black' />
            </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 style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' disabled />
+                <Button {...props} variant='outline' color='ut-black' disabled />
+                <Button {...props} variant='single' color='ut-black' disabled />
            </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>
-    ),
-};
-
-// TODO: Actually show the buttons as they appear in the design
-export const CourseButtons: Story = {
+export const PrettyColors: Story = {
    args: {
-        children: 'Add Course',
+        children: '',
    },
+    render: props => {
+        const colorsNames = Object.keys(colorsFlattened) as (keyof typeof colorsFlattened)[];
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                {colorsNames.map(color => (
+                    <div style={{ display: 'flex', gap: '15px' }} key={color}>
+                        <Button {...props} variant='filled' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='outline' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='single' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='filled' color={color} />
+                        <Button {...props} variant='outline' color={color} />
+                        <Button {...props} variant='single' color={color} />
+                    </div>
+                ))}
+            </div>
+        );
+    },
+};
+
+export const CourseButtons: Story = {
    render: props => (
-        <div style={{ display: 'flex', flexDirection: 'column' }}>
-            <div style={{ display: 'flex' }}>
-                <Button {...props} variant='filled' />
-                <Button {...props} variant='outline' />
-                <Button {...props} variant='single' />
-            </div>
-            <div style={{ display: 'flex' }}>
-                <Button {...props} variant='filled' disabled />
-                <Button {...props} variant='outline' disabled />
-                <Button {...props} variant='single' disabled />
-            </div>
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center' }}>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+            <Button {...props} variant='filled' color='theme-red' icon={RemoveIcon}>
+                Remove Course
+            </Button>
        </div>
    ),
    parameters: {
@@ -101,3 +117,26 @@ export const CourseButtons: Story = {
        },
    },
 };
+
+export const CourseCatalogActionButtons: Story = {
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', gap: '15px' }}>
+            <Button {...props} variant='filled' color='ut-burnt-orange' icon={CalendarMonthIcon} />
+            <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
+                RateMyProf
+            </Button>
+            <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+                CES
+            </Button>
+            <Button {...props} variant='outline' color='ut-yellow' icon={DescriptionIcon}>
+                Past Syllabi
+            </Button>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+        </div>
+    ),
+};
--- a/src/views/components/common/Button/Button.tsx
+++ b/src/views/components/common/Button/Button.tsx
@@ -1,22 +1,20 @@
 import clsx from 'clsx';
 import React from 'react';
-import styles from './Button.module.scss';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
+import type IconComponent from '~icons/material-symbols';
+import Text from '../Text/Text';

 interface Props {
    className?: string;
    style?: React.CSSProperties;
-    variant?: 'filled' | 'outline' | 'single';
+    variant: 'filled' | 'outline' | 'single';
    onClick?: () => void;
-    icon?: React.ReactNode;
+    icon?: typeof IconComponent;
    disabled?: boolean;
    title?: string;
-    testId?: string;
-    useScss?: boolean;
+    color: ThemeColor;
 }

-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
@@ -29,34 +27,49 @@ export function Button({
    icon,
    disabled,
    title,
-    testId,
+    color,
    children,
-    useScss = false,
 }: React.PropsWithChildren<Props>): JSX.Element {
+    const Icon = icon;
+    const isIconOnly = !children && !!icon;
+    const colorHex = getThemeColorHexByName(color);
+    const colorRgb = getThemeColorRgbByName(color).join(' ');
+
    return (
        <button
            style={
                {
                    ...style,
-                    '--color-primary': '#333F48',
-                    '--color-secondary': '#FFFFFF',
+                    '--color': colorHex,
+                    '--bg-color-8': `rgba(${colorRgb} / 0.08)`,
+                    '--shadow-color-15': `rgba(${colorRgb} / 0.15)`,
+                    '--shadow-color-30': `rgba(${colorRgb} / 0.3)`,
                } as React.CSSProperties
            }
-            data-testid={testId}
-            className={clsx(useScss ? styles.button : BUTTON_BASE_CLASS, className, {
-                [styles[variant]]: useScss,
-                [styles.disabled]: disabled && useScss,
-                'disabled:(cursor-not-allowed opacity-50)': disabled && !useScss,
-                'color-white border-none': variant === 'filled' && !useScss,
-                'border-current border-solid border-1 bg-white': variant === 'outline' && !useScss,
-                'bg-white border-none': variant === 'single' && !useScss,
-            })}
+            className={clsx(
+                'btn',
+                {
+                    'disabled:(cursor-not-allowed opacity-50)': disabled,
+                    'color-white bg-[var(--color)] border-[var(--color)] hover:btn-shadow': variant === 'filled',
+                    'color-[var(--color)] bg-white border-current hover:btn-shade border border-solid':
+                        variant === 'outline',
+                    'color-[var(--color)] bg-white border-white hover:btn-shade': variant === 'single', // settings is the only "single"
+                    'px-2 py-1.25': isIconOnly && variant !== 'outline',
+                    'px-1.75 py-1.25': isIconOnly && variant === 'outline',
+                    'px-3.75': variant === 'outline' && !isIconOnly,
+                },
+                className
+            )}
            title={title}
            disabled={disabled}
            onClick={disabled ? undefined : onClick}
        >
-            {icon}
+            {icon && <Icon className='size-6' />}
+            {!isIconOnly && (
+                <Text variant='h4' className='translate-y-0.08'>
                    {children}
+                </Text>
+            )}
        </button>
    );
 }
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss
@@ -1,7 +1,7 @@
@import 'src/views/styles/base.module.scss';

 .extensionRoot {
-    font-family: 'Inter' !important;
+    @apply font-sans;
    color: #303030;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -3,7 +3,6 @@ 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;
--- a/unocss.config.ts
+++ b/unocss.config.ts
@@ -3,10 +3,23 @@ import presetWebFonts from '@unocss/preset-web-fonts';
 import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
 import { defineConfig } from 'unocss';
+import { colors } from './src/shared/util/themeColors';

 export default defineConfig({
    rules: [
        ['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
+        [
+            'btn-shadow',
+            {
+                'box-shadow': '0px 1px 3px 1px var(--shadow-color-15), 0px 1px 2px 0px var(--shadow-color-30);',
+            },
+        ],
+        [
+            'btn-shade',
+            {
+                'background-color': 'var(--bg-color-8)',
+            },
+        ],
        [
            'ring-offset-0',
            {
@@ -16,31 +29,14 @@ export default defineConfig({
    ],
    shortcuts: {
        focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
+        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition',
    },
    theme: {
        easing: {
            'in-out-expo': 'cubic-bezier(.46, 0, .21, 1)',
            'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
        },
-        colors: {
-            ut: {
-                'burnt-orange': '#BF5700',
-                black: '#333F48',
-                orange: '#f8971f',
-                yellow: '#ffd600',
-                'light-green': '#a6cd57',
-                green: '#579d42',
-                teal: '#00a9b7',
-                blue: '#005f86',
-                gray: '#9cadb7',
-                'off-white': '#d6d2c4',
-                concrete: '#95a5a6',
-            },
-            theme: {
-                red: '#af2e2d',
-                black: '#1a2024',
-            },
-        },
+        colors,
    },

    presets: [