make the label required on a link. however, it can be an empty string if the desire is to only show an icon

Author: alishaevn

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

@@ -21,10 +21,21 @@ Default.args = {
 export const Alternate = Template.bind({})
 Alternate.args = {
   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: {
+    textDecoration: 'none',
+    color: '#AS8908',
+  },
 }