From eb6a72742565d36ef71f9dfe207a08873e7bb127 Mon Sep 17 00:00:00 2001
From: Wahyu Kurniawan <ayungavis@gmail.com>
Date: Thu, 22 Feb 2024 09:17:22 +0700
Subject: [PATCH] [T-4862: feat] Link component (#88)

---
 .../components/shared/Button/Button.theme.ts  | 23 +++++++++++++++++++
 .../frontend/src/pages/components/index.tsx   | 16 ++++++++++++-
 .../src/pages/components/renders/button.tsx   | 16 +++++++++++++
 3 files changed, 54 insertions(+), 1 deletion(-)

diff --git a/packages/frontend/src/components/shared/Button/Button.theme.ts b/packages/frontend/src/components/shared/Button/Button.theme.ts
index 897fdfbc..6c9614c6 100644
--- a/packages/frontend/src/components/shared/Button/Button.theme.ts
+++ b/packages/frontend/src/components/shared/Button/Button.theme.ts
@@ -118,6 +118,29 @@ export const buttonTheme = tv(
           'disabled:border-transparent',
           'disabled:shadow-none',
         ],
+        link: [
+          'p-0',
+          'gap-1.5',
+          'text-elements-link',
+          'rounded',
+          'focus-ring',
+          'hover:underline',
+          'hover:text-elements-link-hovered',
+          'disabled:text-controls-disabled',
+          'disabled:hover:no-underline',
+        ],
+        'link-emphasized': [
+          'p-0',
+          'gap-1.5',
+          'text-elements-high-em',
+          'rounded',
+          'underline',
+          'focus-ring',
+          'hover:text-elements-link-hovered',
+          'disabled:text-controls-disabled',
+          'disabled:hover:no-underline',
+          'dark:text-elements-on-high-contrast',
+        ],
         unstyled: [],
       },
     },
diff --git a/packages/frontend/src/pages/components/index.tsx b/packages/frontend/src/pages/components/index.tsx
index c1c46f6c..507563a0 100644
--- a/packages/frontend/src/pages/components/index.tsx
+++ b/packages/frontend/src/pages/components/index.tsx
@@ -7,7 +7,11 @@ import {
 } from './renders/checkbox';
 import { avatars, avatarsFallback } from './renders/avatar';
 import { renderBadges } from './renders/badge';
-import { renderButtonIcons, renderButtons } from './renders/button';
+import {
+  renderButtonIcons,
+  renderButtons,
+  renderLinks,
+} from './renders/button';
 import {
   renderTabWithBadges,
   renderTabs,
@@ -112,6 +116,16 @@ const Page = () => {
             <h1 className="text-2xl font-bold">Vertical Tabs</h1>
             {renderVerticalTabs()}
           </div>
+
+          <div className="w-full h border border-gray-200 px-20 my-10" />
+
+          {/* Link */}
+          <div className="flex flex-col gap-10 items-center justify-between">
+            <h1 className="text-2xl font-bold">Link</h1>
+            <div className="flex gap-4 items-center justify-center">
+              {renderLinks()}
+            </div>
+          </div>
         </div>
       </div>
     </div>
diff --git a/packages/frontend/src/pages/components/renders/button.tsx b/packages/frontend/src/pages/components/renders/button.tsx
index c1c69c48..f5272d3e 100644
--- a/packages/frontend/src/pages/components/renders/button.tsx
+++ b/packages/frontend/src/pages/components/renders/button.tsx
@@ -47,3 +47,19 @@ export const renderButtonIcons = () => {
     </div>
   ));
 };
+
+export const renderLinks = () => {
+  return ['link', 'link-emphasized', 'disabled'].map((variant) => (
+    <Button
+      variant={
+        variant !== 'disabled' ? (variant as ButtonTheme['variant']) : 'link'
+      }
+      key={variant}
+      leftIcon={<PlusIcon />}
+      rightIcon={<PlusIcon />}
+      disabled={variant === 'disabled'}
+    >
+      Link
+    </Button>
+  ));
+};