feat: updated Button to v2 design

wip commit

src/stories/components/Button.stories.tsx

@@ -4,21 +4,21 @@ import React from 'react';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/Common/Button',
+    title: 'Components/Common/Button',
-  component: Button,
+    component: Button,
-  parameters: {
+    parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+        layout: 'centered',
-  },
+    },
-  // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
-  tags: ['autodocs'],
+    tags: ['autodocs'],
-  // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
-  args: {
+    args: {
-    children: 'Button',
+        children: 'Button',
-  },
+    },
-  argTypes: {
+    argTypes: {
-    children: { control: 'text' },
+        children: { control: 'text' },
-  },
+    },
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -26,72 +26,55 @@ 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: {},
 };
 
 export const Disabled: Story = {
-  args: {
+    args: {
-    disabled: true,
+        disabled: true,
-  },
+    },
 };
 
 export const Grid: Story = {
-  render: props => (
+    render: props => (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
+            <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' />
+                <Button {...props} type='filled' />
-        <Button {...props} type='secondary' />
+                <Button {...props} type='outline' />
-        <Button {...props} type='tertiary' />
+                <Button {...props} type='single' />
-        <Button {...props} type='danger' />
+            </div>
-        <Button {...props} type='warning' />
+            <div style={{ display: 'flex' }}>
-        <Button {...props} type='success' />
+                <Button {...props} type='filled' disabled />
-        <Button {...props} type='info' />
+                <Button {...props} type='outline' disabled />
-      </div>
+                <Button {...props} type='single' disabled />
-      <div style={{ display: 'flex' }}>
+            </div>
-        <Button {...props} type='primary' disabled />
+        </div>
-        <Button {...props} type='secondary' disabled />
+    ),
-        <Button {...props} type='tertiary' disabled />
-        <Button {...props} type='danger' disabled />
-        <Button {...props} type='warning' disabled />
-        <Button {...props} type='success' disabled />
-        <Button {...props} type='info' disabled />
-      </div>
-    </div>
-  ),
 };
 
-
 // TODO: Actually show the buttons as they appear in the design
 export const CourseButtons: Story = {
-  args: {
+    args: {
-    children: 'Add Course',
+        children: 'Add Course',
-  },
+    },
-  render: props => (
+    render: props => (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
+        <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
+            <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' />
+                <Button {...props} type='filled' />
-        <Button {...props} type='secondary' />
+                <Button {...props} type='outline' />
-        <Button {...props} type='tertiary' />
+                <Button {...props} type='single' />
-        <Button {...props} type='danger' />
+            </div>
-        <Button {...props} type='warning' />
+            <div style={{ display: 'flex' }}>
-        <Button {...props} type='success' />
+                <Button {...props} type='filled' disabled />
-        <Button {...props} type='info' />
+                <Button {...props} type='outline' disabled />
-      </div>
+                <Button {...props} type='single' disabled />
-      <div style={{ display: 'flex' }}>
+            </div>
-        <Button {...props} type='primary' disabled />
+        </div>
-        <Button {...props} type='secondary' disabled />
+    ),
-        <Button {...props} type='tertiary' disabled />
+    parameters: {
-        <Button {...props} type='danger' disabled />
+        design: {
-        <Button {...props} type='warning' disabled />
+            type: 'figma',
-        <Button {...props} type='success' disabled />
+            url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
-        <Button {...props} type='info' disabled />
+        },
-      </div>
-    </div>
-  ),
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
     },
-  },
 };

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

@@ -2,15 +2,18 @@
 @use 'src/views/styles/colors.module.scss';
 
 .button {
-    background-color: #000;
+    padding: 0px 16px;
-    color: #fff;
+    height: 40px;
-    padding: 10px;
     margin: 10px;
-    border-radius: 8px;
+    border-radius: 4px;
     border: none;
     cursor: pointer;
     transition: all 0.1s ease-in-out;
-    font-family: 'Inter';
+    font-family: 'Roboto';
+    font-size: 18px;
+    font-style: normal;
+    font-weight: 500;
+    line-height: normal;
 
     display: flex;
     align-items: center;
@@ -34,34 +37,19 @@
         }
     }
 
-    @each $color,
+    &.filled {
-        $value
+        background-color: var(--color-primary);
-            in (
+        color: var(--color-secondary);
-                primary: colors.$burnt_orange,
+    }
-                secondary: colors.$charcoal,
-                tertiary: colors.$bluebonnet,
-                danger: colors.$speedway_brick,
-                warning: colors.$tangerine,
-                success: colors.$turtle_pond,
-                info: colors.$turquoise
-            )
-    {
-        &.#{$color} {
-            background-color: $value;
-            color: #fff;
 
-            &:hover {
+    &.outline {
-                background-color: color.adjust($value, $lightness: 10%);
+        background-color: var(--color-secondary);
-            }
+        color: var(--color-primary);
+        border: 1px solid var(--color-primary);
+    }
 
-            &:focus-visible,
+    &.single {
-            &:active {
+        background-color: var(--color-secondary);
-                background-color: color.adjust($value, $lightness: -10%);
+        color: var(--color-primary);
-            }
-
-            &.disabled {
-                background-color: $value !important;
-            }
-        }
     }
 }

src/views/components/common/Button/Button.tsx

@@ -5,11 +5,16 @@ import styles from './Button.module.scss';
 interface Props {
     className?: string;
     style?: React.CSSProperties;
+    type?: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    iconOnly?: boolean;
+    showSymbol?: boolean;
+    symbol?: React.ReactNode;
     disabled?: boolean;
     title?: string;
     testId?: string;
+    primaryColor?: string;
+    secondaryColor?: string;
 }
 
 /**
@@ -17,26 +22,37 @@ interface Props {
  * @returns
  */
 export function Button({
-    style,
     className,
+    style,
     type,
-    testId,
+    onClick,
-    children,
+    iconOnly,
+    showSymbol,
+    symbol,
     disabled,
     title,
-    onClick,
+    testId,
+    primaryColor,
+    secondaryColor,
+    children,
 }: React.PropsWithChildren<Props>): JSX.Element {
     return (
         <button
-            style={style}
+            style={
+                {
+                    ...style,
+                    '--color-primary': primaryColor ?? '#333F48',
+                    '--color-secondary': secondaryColor ?? '#FFFFFF',
+                } as React.CSSProperties
+            }
             data-testid={testId}
-            className={classNames(styles.button, className, styles[type ?? 'primary'], {
+            className={classNames(styles.button, className, styles[type ?? 'filled'], {
                 [styles.disabled]: disabled,
             })}
             title={title}
             onClick={disabled ? undefined : onClick}
         >
-            {children}
+            {!iconOnly && children}
         </button>
     );
 }

src/views/styles/fonts.module.scss

@@ -1,10 +1,20 @@
-@each $weights in '100' '200' '300' '400' '500' '600' '700' '800' '900' {
+@each $weight in '100' '200' '300' '400' '500' '600' '700' '800' '900' {
     @font-face {
         font-family: 'Inter';
-        src: url('@public/fonts/inter-#{$weights}.woff2') format('woff2');
+        src: url('@public/fonts/inter-#{$weight}.woff2') format('woff2');
         font-display: auto;
         font-style: normal;
-        font-weight: #{$weights};
+        font-weight: #{$weight};
+    }
+}
+
+@each $weight in '100' '300' '400' '500' '700' '900' {
+    @font-face {
+        font-family: 'Roboto';
+        src: url('@public/fonts/roboto-#{$weight}.woff2') format('woff2');
+        font-display: auto;
+        font-style: normal;
+        font-weight: #{$weight};
     }
 }