TextLink component

ui/src/components/TextLink/TextLink.jsx

@@ -0,0 +1,34 @@
+import React from 'react'
+import classes from './TextLink.module.scss'
+import { FiExternalLink } from 'react-icons/fi'
+import PropTypes from 'prop-types'
+
+const TextLink = ({ url, text, external }) => {
+  const handleClick = () => {
+    external ? window.open(url, '_blank') : window.location.href = url
+  }
+
+  return (
+    <a
+      href={url}
+      target={external ? '_blank' : '_self'}
+      rel={external ? 'noopener noreferrer' : ''}
+      onClick={handleClick}
+      className={`${classes.textLink} ${external ? 'external' : ''}`}
+    >
+      {text}
+      {external && <FiExternalLink className={classes.externalIcon}/>}
+    </a>
+  )
+}
+
+TextLink.propTypes = {
+  /** destination URL that the link you want to navigate to */
+  url: PropTypes.string.isRequired,
+  /** content that will be displayed in the link */
+  text: PropTypes.string.isRequired,
+  /** boolean that indicates whether the link is external or internal  */
+  external: PropTypes.bool
+}
+
+export default TextLink

ui/src/components/TextLink/TextLink.module.scss

@@ -0,0 +1,26 @@
+@import '../../assets/styles/abstracts/variables';
+
+.textLink {
+    text-decoration: underline;
+    color: $alternative-a500;
+    padding: 0.625em 0.25em 0em 0.25em;
+    border-radius: 2px;
+    transition: background-color 0.3s;
+
+    &:hover {
+        background-color: $base-white;
+    }
+
+    &:focus {
+        outline: none;
+        background-color: $primary-p100;
+    }
+
+}
+
+.externalIcon {
+    top: -3.2px;
+    margin-left: 4.8px;
+    vertical-align: text-bottom;
+    position: relative;
+}

ui/src/components/TextLink/TextLink.stories.jsx

@@ -0,0 +1,28 @@
+import React from 'react'
+import TextLink from './TextLink'
+
+export default {
+  title: 'Components/TextLink',
+  component: TextLink,
+  argTypes: {
+    external: {
+      control: 'boolean'
+    }
+  }
+}
+
+const Template = (args) => <TextLink {...args} />
+
+export const InternalLink = Template.bind({})
+InternalLink.args = {
+  url: '/page',
+  text: 'Internal Link',
+  external: false
+}
+
+export const ExternalLink = Template.bind({})
+ExternalLink.args = {
+  url: 'https://www.put.poznan.pl',
+  text: 'External Link',
+  external: true
+}