Added stories / changed to CSS Modules / changed em to px

ui/src/components/TextLink/TextLink.jsx

@@ -1,5 +1,5 @@
 import React from 'react'
-import './TextLink.scss'
+import classes from './TextLink.module.scss'
 import { FiExternalLink } from 'react-icons/fi'
 import PropTypes from 'prop-types'
 
@@ -14,10 +14,10 @@ const TextLink = ({ url, text, external }) => {
       target={external ? '_blank' : '_self'}
       rel={external ? 'noopener noreferrer' : ''}
       onClick={handleClick}
-      className={`text-link ${external ? 'external' : ''}`}
+      className={`${classes.textLink} ${external ? 'external' : ''}`}
     >
       {text}
-      {external && <FiExternalLink className='external-icon'/>}
+      {external && <FiExternalLink className={classes.externalIcon}/>}
     </a>
   )
 }

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

@@ -1,9 +1,9 @@
 @import '../../assets/styles/abstracts/variables';
 
-.text-link {
+.textLink {
     text-decoration: underline;
     color: $alternative-a500;
-    padding: 10px 4px 0px 4px;
+    padding: 0.625em 0.25em 0em 0.25em;
     border-radius: 2px;
     transition: background-color 0.3s;
 
@@ -13,15 +13,14 @@
 
     &:focus {
         outline: none;
-        background-color: $primary-p100
-        ;
+        background-color: $primary-p100;
     }
 
 }
 
-.external-icon {
-    top: -0.2em;
-    margin-left: 0.3em;
+.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,
+};