From 1e5f72ebcc79b0f463cf06f761e97fce460093c4 Mon Sep 17 00:00:00 2001
From: sam-keen <samuel.kleinmann@gmail.com>
Date: Tue, 22 Mar 2022 15:25:45 +0000
Subject: [PATCH] Created a button that looks like an inline-link

---
 .../src/components/button/button.stories.tsx  | 10 +++-
 .../src/components/button/button.tsx          | 49 +++++++++++++------
 2 files changed, 41 insertions(+), 18 deletions(-)

diff --git a/libs/ui-toolkit/src/components/button/button.stories.tsx b/libs/ui-toolkit/src/components/button/button.stories.tsx
index 324759938..f2161ca90 100644
--- a/libs/ui-toolkit/src/components/button/button.stories.tsx
+++ b/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">
diff --git a/libs/ui-toolkit/src/components/button/button.tsx b/libs/ui-toolkit/src/components/button/button.tsx
index e53d0fef0..6324c7a91 100644
--- a/libs/ui-toolkit/src/components/button/button.tsx
+++ b/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;
@@ -37,18 +37,27 @@ const getClassName = (
       'box-border',
       'h-28',
       'text-ui',
-      'no-underline',
       'hover:underline',
       'disabled:no-underline',
       'transition-all',
     ],
     {
-      'pl-28': !(paddingLeftProvided || variant === 'inline'),
-      'pr-28': !(paddingRightProvided || variant === 'inline'),
+      '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',
+      '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',
@@ -72,7 +81,9 @@ const getClassName = (
       uppercase: variant === 'accent',
       'bg-vega-yellow dark:bg-vega-yellow': variant === 'accent',
       'border-transparent dark:border-transparent':
-        variant === 'accent' || variant === 'inline',
+        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',
@@ -80,22 +91,28 @@ const getClassName = (
 
       'pl-4': variant === 'inline' && !paddingLeftProvided,
       'pr-4': variant === 'inline' && !paddingRightProvided,
-      'border-0': variant === 'inline' && !borderWidthProvided,
-      underline: variant === 'inline',
+      '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' || variant === 'inline-link',
       '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',
+        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',
+      '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' && variant !== 'inline-link',
       'disabled:border-black-25 dark:disabled:border-white-25':
-        variant !== 'inline',
+        variant !== 'inline' && variant !== 'inline-link',
     },
     className
   );