Merge branch 'main' of https://github.com/scientist-softserv/webstore-component-library into 137-accept-sow

Author: summer-cook

package-lock.json

@@ -1,6 +1,6 @@
 {
   "name": "@scientist-softserv/webstore-component-library",
-  "version": "0.1.14",
+  "version": "0.1.15",
   "description": "A React component library intended for use with WebStore applications",
   "main": "dist/index.js",
   "module": "dist/index.es.js",
@@ -13,7 +13,10 @@
     "watch-lib": "rollup -c --watch",
     "release": "release-it"
   },
-  "repository": "https://github.com/scientist-softserv/webstore-component-library.git",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/scientist-softserv/webstore-component-library.git"
+  },
   "keywords": [
     "webstore",
     "component",
@@ -88,7 +91,6 @@
     }
   },
   "publishConfig": {
-    "registry": "https://npm.pkg.github.com",
     "ignore": [
       ".eslintrc"
     ]

package.json

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

src/components/FilesTable/FilesTable.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.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: {},
 }

src/components/Link/Link.stories.jsx

@@ -25,7 +25,7 @@ const ButtonLinkWrapper = React.forwardRef(({ ...props }, ref) => {
   const { addClass, buttonProps, href } = props
 
   return (
-    <a href={href} ref={ref} className={addClass}>
+    <a href={href} ref={ref} className={addClass} data-cy='linked-button'>
       <Button {...buttonProps} />
     </a>
   )