From e1c23fa4b318a482c4dff49c62a86fc1268ccb38 Mon Sep 17 00:00:00 2001
From: Samira Mokaram <samiram@spotify.com>
Date: Mon, 16 Nov 2020 16:36:03 +0100
Subject: [PATCH] add action prop to support buttons

---
 .../IconLinkVertical/IconLinkVertical.tsx     | 26 +++++++++++++++++--
 plugins/catalog/src/index.ts                  |  1 +
 2 files changed, 25 insertions(+), 2 deletions(-)

diff --git a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx b/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
index 580dcff0f5..63df4feaf9 100644
--- a/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
+++ b/plugins/catalog/src/components/AboutCard/IconLinkVertical/IconLinkVertical.tsx
@@ -23,9 +23,10 @@ export type IconLinkVerticalProps = {
   href?: string;
   disabled?: boolean;
   label: string;
+  action?: React.ReactNode;
 };
 
-const useIconStyles = makeStyles({
+const useIconStyles = makeStyles(theme => ({
   link: {
     display: 'grid',
     justifyItems: 'center',
@@ -41,12 +42,16 @@ const useIconStyles = makeStyles({
     fontWeight: 600,
     letterSpacing: 1.2,
   },
-});
+  linkStyle: {
+    color: theme.palette.secondary.main,
+  },
+}));
 
 export function IconLinkVertical({
   icon = <LinkIcon />,
   href = '#',
   disabled = false,
+  action,
   ...props
 }: IconLinkVerticalProps) {
   const classes = useIconStyles();
@@ -64,6 +69,23 @@ export function IconLinkVertical({
     );
   }
 
+  if (action) {
+    return (
+      <Link
+        className={
+          disabled
+            ? classnames(classes.link, classes.linkStyle, classes.disabled)
+            : classnames(classes.link, classes.linkStyle)
+        }
+        href={href}
+        {...props}
+      >
+        {icon}
+        {action}
+      </Link>
+    );
+  }
+
   return (
     <Link className={classes.link} href={href} {...props}>
       {icon}
diff --git a/plugins/catalog/src/index.ts b/plugins/catalog/src/index.ts
index 762f4924c0..101680c552 100644
--- a/plugins/catalog/src/index.ts
+++ b/plugins/catalog/src/index.ts
@@ -23,3 +23,4 @@ export { Router } from './components/Router';
 export { useEntity, EntityContext } from './hooks/useEntity';
 export { AboutCard } from './components/AboutCard';
 export { EntityPageLayout } from './components/EntityPageLayout';
+export { IconLinkVertical } from './components/AboutCard/IconLinkVertical';