From 60929342fb27478053b21798635142a0f01bf3b4 Mon Sep 17 00:00:00 2001
From: Alejandro Celaya <alejandrocelaya@gmail.com>
Date: Sat, 5 Feb 2022 10:46:46 +0100
Subject: [PATCH] Added some feedback to know which cardsin overview pages are
 clickable

---
 src/servers/helpers/HighlightCard.scss      | 7 +++++++
 src/servers/helpers/HighlightCard.tsx       | 7 ++++++-
 test/servers/helpers/HighlightCard.test.tsx | 3 +++
 3 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/src/servers/helpers/HighlightCard.scss b/src/servers/helpers/HighlightCard.scss
index ddb11b6b..beb6fe5b 100644
--- a/src/servers/helpers/HighlightCard.scss
+++ b/src/servers/helpers/HighlightCard.scss
@@ -7,6 +7,13 @@
   text-decoration: none;
 }
 
+.highlight-card__link-icon {
+  position: absolute;
+  right: 5px;
+  bottom: 5px;
+  opacity: 0.1;
+}
+
 .highlight-card__title {
   text-transform: uppercase;
   color: $textPlaceholder;
diff --git a/src/servers/helpers/HighlightCard.tsx b/src/servers/helpers/HighlightCard.tsx
index 85988a7f..e46782a7 100644
--- a/src/servers/helpers/HighlightCard.tsx
+++ b/src/servers/helpers/HighlightCard.tsx
@@ -1,6 +1,8 @@
 import { FC } from 'react';
 import { Card, CardText, CardTitle } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import { faLink as linkIcon } from '@fortawesome/free-solid-svg-icons';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import './HighlightCard.scss';
 
 export interface HighlightCardProps {
@@ -8,8 +10,11 @@ export interface HighlightCardProps {
   link?: string;
 }
 
+const buildExtraProps = (link?: string) => !link ? {} : { tag: Link, to: link };
+
 export const HighlightCard: FC<HighlightCardProps> = ({ children, title, link }) => (
-  <Card className="highlight-card" body {...(link && { tag: Link, to: link })}>
+  <Card className="highlight-card" body {...buildExtraProps(link)}>
+    {link && <FontAwesomeIcon size="3x" className="highlight-card__link-icon" icon={linkIcon} />}
     <CardTitle tag="h5" className="highlight-card__title">{title}</CardTitle>
     <CardText tag="h2">{children}</CardText>
   </Card>
diff --git a/test/servers/helpers/HighlightCard.test.tsx b/test/servers/helpers/HighlightCard.test.tsx
index b166c1de..94426bb2 100644
--- a/test/servers/helpers/HighlightCard.test.tsx
+++ b/test/servers/helpers/HighlightCard.test.tsx
@@ -2,6 +2,7 @@ import { shallow, ShallowWrapper } from 'enzyme';
 import { ReactNode } from 'react';
 import { Card, CardText, CardTitle } from 'reactstrap';
 import { Link } from 'react-router-dom';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { HighlightCard, HighlightCardProps } from '../../../src/servers/helpers/HighlightCard';
 
 describe('<HighlightCard />', () => {
@@ -20,6 +21,7 @@ describe('<HighlightCard />', () => {
     expect(wrapper.find(Card)).toHaveLength(1);
     expect(wrapper.find(CardTitle)).toHaveLength(1);
     expect(wrapper.find(CardText)).toHaveLength(1);
+    expect(wrapper.find(FontAwesomeIcon)).toHaveLength(0);
     expect(wrapper.prop('tag')).not.toEqual(Link);
     expect(wrapper.prop('to')).not.toBeDefined();
   });
@@ -53,6 +55,7 @@ describe('<HighlightCard />', () => {
   ])('adds extra props when a link is provided', (link) => {
     const wrapper = createWrapper({ title: 'foo', link });
 
+    expect(wrapper.find(FontAwesomeIcon)).toHaveLength(1);
     expect(wrapper.prop('tag')).toEqual(Link);
     expect(wrapper.prop('to')).toEqual(link);
   });