Merge pull request #117 from vegaprotocol/feat/75-link-like-button

UI toolkit - create a 'link-like' button and use in block explorer

apps/explorer/src/app/components/blocks/blocks-refetch.tsx

@@ -1,15 +1,18 @@
+import { Button } from '@vegaprotocol/ui-toolkit';
+
 interface BlocksRefetchProps {
   refetch: () => void;
 }
 
 export const BlocksRefetch = ({ refetch }: BlocksRefetchProps) => {
   return (
-    <button
+    <Button
       onClick={() => refetch()}
-      className="underline mb-28"
+      variant="inline-link"
+      className="mb-28"
       data-testid="refresh"
     >
       Refresh to see latest blocks
-    </button>
+    </Button>
   );
 };

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

@@ -38,7 +38,13 @@ Inline.args = {
   variant: 'inline',
 };
 
-export const NavAccent: Story = (args) => (
+export const InlineLink = Template.bind({});
+InlineLink.args = {
+  children: 'Inline link',
+  variant: 'inline-link',
+};
+
+export const NavAccent: Story = () => (
   <>
     <div className="mb-8">
       <Button variant="accent" className="px-4">
@@ -58,7 +64,7 @@ export const NavAccent: Story = (args) => (
   </>
 );
 
-export const NavInline: Story = (args) => (
+export const NavInline: Story = () => (
   <>
     <div className="mb-8">
       <Button variant="inline" className="uppercase">

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

@@ -9,7 +9,7 @@ import {
 
 interface CommonProps {
   children?: React.ReactNode;
-  variant?: 'primary' | 'secondary' | 'accent' | 'inline';
+  variant?: 'primary' | 'secondary' | 'accent' | 'inline' | 'inline-link';
   className?: string;
   prependIconName?: IconName;
   appendIconName?: IconName;
@@ -22,81 +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(
-    [
+    getClasses(
-      'inline-flex',
+      variant,
-      'items-center',
+      paddingLeftProvided,
-      'justify-center',
+      paddingRightProvided,
-      'box-border',
+      borderWidthProvided
-      'h-28',
+    ),
-      'text-ui',
-      'no-underline',
-      'hover:underline',
-      'disabled:no-underline',
-      'transition-all',
-    ],
-    {
-      'pl-28': !(paddingLeftProvided || variant === 'inline'),
-      'pr-28': !(paddingRightProvided || variant === 'inline'),
-
-      border: !borderWidthProvided,
-
-      'hover:border-black dark:hover:border-white': variant !== 'inline',
-      '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',
-      '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' && !borderWidthProvided,
-      underline: variant === 'inline',
-      'hover:no-underline': variant === 'inline',
-      'hover:border-transparent dark:hover:border-transparent':
-        variant === 'inline',
-      'active:border-transparent dark:active:border-transparent':
-        variant === 'inline',
-      'active:text-black dark:active:text-vega-yellow': variant === 'inline',
-      'text-black-95 dark:text-white-95': variant === 'inline',
-      'hover:text-black hover:dark:text-white': variant === 'inline',
-
-      'disabled:bg-black-10 dark:disabled:bg-white-10': variant !== 'inline',
-      'disabled:text-black-60 dark:disabled:text-white-60':
-        variant !== 'inline',
-      'disabled:border-black-25 dark:disabled:border-white-25':
-        variant !== 'inline',
-    },
     className
   );
 };
@@ -140,7 +185,7 @@ export const Button = forwardRef<HTMLButtonElement, ButtonProps>(
     return (
       <button
         ref={ref}
-        className={getClassName(className, variant)}
+        className={classes(className, variant)}
         type={type}
         {...props}
       >
@@ -163,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>
     );