Improved how button classes are applied

libs/ui-toolkit/src/components/button/button.tsx

@@ -22,98 +22,126 @@ export interface AnchorButtonProps
   extends AnchorHTMLAttributes<HTMLAnchorElement>,
     CommonProps {}
 
-const getClassName = (
+const getClasses = (
+  variant: CommonProps['variant'],
+  paddingLeftProvided: boolean,
+  paddingRightProvided: boolean,
+  borderWidthProvided: boolean
+) => {
+  // Add classes into variables if there are multiple classes shared in multiple button styles
+  const sharedClasses =
+    'inline-flex items-center justify-center box-border h-28 transition-all disabled:no-underline';
+  const underlineOnHover = 'no-underline hover:underline';
+  const commonHoverAndActiveBorder =
+    'hover:border-black dark:hover:border-white active:border-black dark:active:border-white';
+  const commonDisabled =
+    'disabled:bg-black-10 dark:disabled:bg-white-10 disabled:text-black-60 dark:disabled:text-white-60 disabled:border-black-25 dark:disabled:border-white-25';
+  const inlineTextColour =
+    'text-black-95 dark:text-white-95 hover:text-black hover:dark:text-white active:text-black dark:active:text-vega-yellow';
+
+  const standardButtonPaddingLeft = `${
+    paddingLeftProvided ? paddingLeftProvided : 'pl-28'
+  }`;
+  const standardButtonPaddingRight = `${
+    paddingRightProvided ? paddingRightProvided : 'pr-28'
+  }`;
+  const inlineButtonPaddingLeft = `${
+    paddingLeftProvided ? paddingLeftProvided : 'pl-4'
+  }`;
+  const inlineButtonPaddingRight = `${
+    paddingRightProvided ? paddingRightProvided : 'pr-4'
+  }`;
+  const standardButtonBorderWidth = `${
+    borderWidthProvided ? borderWidthProvided : 'border'
+  }`;
+
+  const primaryClasses = [
+    sharedClasses,
+    commonHoverAndActiveBorder,
+    underlineOnHover,
+    commonDisabled,
+    standardButtonPaddingLeft,
+    standardButtonPaddingRight,
+    standardButtonBorderWidth,
+    'bg-black dark:bg-white hover:bg-black-80 dark:hover:bg-white-80 active:bg-white dark:active:bg-black',
+    'text-ui text-white dark:text-black active:text-black dark:active:text-white',
+  ];
+
+  const secondaryClasses = [
+    sharedClasses,
+    commonHoverAndActiveBorder,
+    underlineOnHover,
+    commonDisabled,
+    standardButtonPaddingLeft,
+    standardButtonPaddingRight,
+    standardButtonBorderWidth,
+    'bg-white dark:bg-black hover:bg-black-25 dark:hover:bg-white-25 active:bg-black dark:active:bg-white',
+    'text-ui text-black dark:text-white active:text-white dark:active:text-black',
+    'border-black-60 dark:border-white-60 hover:border-black',
+  ];
+
+  const accentClasses = [
+    sharedClasses,
+    commonHoverAndActiveBorder,
+    underlineOnHover,
+    commonDisabled,
+    standardButtonPaddingLeft,
+    standardButtonPaddingRight,
+    standardButtonBorderWidth,
+    'bg-vega-yellow dark:bg-vega-yellow hover:bg-vega-yellow-dark dark:hover:bg-vega-yellow/30 active:bg-white dark:active:bg-black',
+    'text-ui uppercase text-black dark:text-black hover:text-white dark:hover:text-white active:text-black dark:active:text-white',
+    'border-transparent dark:border-transparent',
+  ];
+
+  const inlineClasses = [
+    sharedClasses,
+    inlineButtonPaddingLeft,
+    inlineButtonPaddingRight,
+    inlineTextColour,
+    'border-none',
+    'text-ui',
+  ];
+
+  const inlineLinkClasses = [
+    sharedClasses,
+    inlineButtonPaddingLeft,
+    inlineButtonPaddingRight,
+    inlineTextColour,
+    'underline hover:underline',
+    'border-none',
+  ];
+
+  switch (variant) {
+    case 'primary':
+      return primaryClasses;
+    case 'secondary':
+      return secondaryClasses;
+    case 'accent':
+      return accentClasses;
+    case 'inline':
+      return inlineClasses;
+    case 'inline-link':
+      return inlineLinkClasses;
+    default:
+      return '';
+  }
+};
+
+const classes = (
   className: CommonProps['className'],
   variant: CommonProps['variant']
 ) => {
   const paddingLeftProvided = includesLeftPadding(className);
   const paddingRightProvided = includesRightPadding(className);
   const borderWidthProvided = includesBorderWidth(className);
+
   return classNames(
-    [
-      'inline-flex',
-      'items-center',
-      'justify-center',
-      'box-border',
-      'h-28',
-      'hover:underline',
-      'disabled:no-underline',
-      'transition-all',
-    ],
-    {
-      'text-ui': variant !== 'inline-link',
-      'no-underline': variant !== 'inline-link',
-      'pl-28': !(
-        paddingLeftProvided ||
-        variant === 'inline' ||
-        variant === 'inline-link'
-      ),
-      'pr-28': !(
-        paddingRightProvided ||
-        variant === 'inline' ||
-        variant === 'inline-link'
-      ),
-
-      border: !borderWidthProvided,
-
-      'hover:border-black dark:hover:border-white':
-        variant !== 'inline' && variant !== 'inline-link',
-      'active:border-black dark:active:border-white': true,
-
-      'bg-black dark:bg-white': variant === 'primary',
-      'border-black-60 dark:border-white-60':
-        variant === 'primary' || variant === 'secondary',
-      'text-white dark:text-black': variant === 'primary',
-      'hover:bg-black-80 dark:hover:bg-white-80': variant === 'primary',
-      'active:bg-white dark:active:bg-black':
-        variant === 'primary' || variant === 'accent',
-      'active:text-black dark:active:text-white':
-        variant === 'primary' || variant === 'accent',
-
-      'bg-white dark:bg-black': variant === 'secondary',
-      'text-black dark:text-white': variant === 'secondary',
-      'hover:bg-black-25 dark:hover:bg-white-25': variant === 'secondary',
-      'hover:text-black dark:hover:text-white':
-        variant === 'secondary' || variant === 'accent',
-      'active:bg-black dark:active:bg-white': variant === 'secondary',
-      'active:text-white dark:active:text-black': variant === 'secondary',
-
-      uppercase: variant === 'accent',
-      'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent',
-      'border-transparent dark:border-transparent':
-        variant === 'accent' ||
-        variant === 'inline' ||
-        variant === 'inline-link',
-      'hover:bg-vega-yellow-dark dark:hover:bg-vega-yellow/30':
-        variant === 'accent',
-      'text-black dark:text-black': variant === 'accent',
-      'hover:text-white dark:hover:text-white': variant === 'accent',
-
-      'pl-4': variant === 'inline' && !paddingLeftProvided,
-      'pr-4': variant === 'inline' && !paddingRightProvided,
-      'border-0':
-        (variant === 'inline' || variant === 'inline-link') &&
-        !borderWidthProvided,
-      underline: variant === 'inline' || variant === 'inline-link',
-      'hover:no-underline': variant === 'inline',
-      'hover:border-transparent dark:hover:border-transparent':
-        variant === 'inline' || variant === 'inline-link',
-      'active:border-transparent dark:active:border-transparent':
-        variant === 'inline' || variant === 'inline-link',
-      'active:text-black dark:active:text-vega-yellow':
-        variant === 'inline' || variant === 'inline-link',
-      'text-black-95 dark:text-white-95':
-        variant === 'inline' || variant === 'inline-link',
-      'hover:text-black hover:dark:text-white':
-        variant === 'inline' || variant === 'inline-link',
-
-      'disabled:bg-black-10 dark:disabled:bg-white-10':
-        variant !== 'inline' && variant !== 'inline-link',
-      'disabled:text-black-60 dark:disabled:text-white-60':
-        variant !== 'inline' && variant !== 'inline-link',
-      'disabled:border-black-25 dark:disabled:border-white-25':
-        variant !== 'inline' && variant !== 'inline-link',
-    },
+    getClasses(
+      variant,
+      paddingLeftProvided,
+      paddingRightProvided,
+      borderWidthProvided
+    ),
     className
   );
 };
@@ -157,7 +185,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         ref={ref}
-        className={getClassName(className, variant)}
+        className={classes(className, variant)}
         type={type}
         {...props}
       >
@@ -180,7 +208,7 @@ export const AnchorButton = forwardRef<HTMLAnchorElement, AnchorButtonProps>(
     ref
   ) => {
     return (
-      <a ref={ref} className={getClassName(className, variant)} {...prosp}>
+      <a ref={ref} className={classes(className, variant)} {...prosp}>
         {getContent(children, prependIconName, appendIconName)}
       </a>
     );