Merge pull request #170 from scientist-softserv/165-link-proptypes

165 link proptypes

Author: alishaevn

src/components/FilesTable/FilesTable.jsx

@@ -34,6 +34,7 @@ const FilesTable = ({ addClass, files }) => {
               <td className='text-center'>
                 <Link
                   icon='fa-download'
+                  label=''
                   href={href}
                   aria-label='download'
                 />

src/components/Link/Link.jsx

@@ -3,32 +3,39 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import PropTypes from 'prop-types'
 import './link.css'
 
-const Link = ({ addClass, href, icon, label, style, ...props }) => (
-  <a
-    href={href}
-    className={`link ${addClass}`}
-    style={style}
-    {...props}
-  >
-    {icon && (
-      <FontAwesomeIcon icon={icon} className={`small ${label.length > 0 && 'me-2'}`} />
-    )}
-    {label}
-  </a>
-)
+const Link = ({ addClass, href, icon, label, style, ...props }) => {
+  return (
+    <a
+      href={href}
+      className={`link ${addClass}`}
+      style={style}
+      {...props}
+    >
+      {icon && (
+        <FontAwesomeIcon icon={icon} className={`small ${label.length && 'me-2'}`} />
+      )}
+      {label && label}
+    </a>
+  )
+}
 
+/**
+ * there isn't an easy way to require either the icon OR the label. there are additional packages we could install that have the
+ * capability, but that would bloat the package unnecessarily. instead, we're requiring that the label be passed. the overwhelming
+ * majority of instances where a link is used, will want a label anyway. however, in the event a label isn't desired, passing the
+ * value as an empty string will satisfy prop types, while still only showing an icon.
+*/
 Link.propTypes = {
   addClass: PropTypes.string,
   href: PropTypes.string.isRequired,
   icon: PropTypes.string,
-  label: PropTypes.string,
+  label: PropTypes.string.isRequired,
   style: PropTypes.shape({}),
 }
 
 Link.defaultProps = {
   addClass: '',
   icon: '',
-  label: '',
   style: {},
 }
 

src/components/Link/Link.stories.jsx

@@ -13,18 +13,26 @@ const Template = (args) => <Link {...args} />
 
 export const Default = Template.bind({})
 Default.args = {
-  href: '',
+  href: '/',
   label: 'I am a link',
   style: {},
 }
 
 export const Alternate = Template.bind({})
 Alternate.args = {
-  href: '',
+  href: '/',
+  icon: 'fa-envelope',
   label: 'No underline!',
   style: {
     textDecoration: 'none',
     color: '#AB1289',
   },
-  icon: 'fa-envelope',
+}
+
+export const NoLabel = Template.bind({})
+NoLabel.args = {
+  href: '/',
+  icon: 'fa-download',
+  label: '',
+  style: {},
 }