diff --git a/src/components/FilesTable/FilesTable.jsx b/src/components/FilesTable/FilesTable.jsx
index 2c5c55b..874e3bd 100644
--- a/src/components/FilesTable/FilesTable.jsx
+++ b/src/components/FilesTable/FilesTable.jsx
@@ -34,6 +34,7 @@ const FilesTable = ({ addClass, files }) => {
diff --git a/src/components/Link/Link.jsx b/src/components/Link/Link.jsx
index 0b49f2c..76bdeb9 100644
--- a/src/components/Link/Link.jsx
+++ b/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 }) => (
-
- {icon && (
- 0 && 'me-2'}`} />
- )}
- {label}
-
-)
+const Link = ({ addClass, href, icon, label, style, ...props }) => {
+ return (
+
+ {icon && (
+
+ )}
+ {label && label}
+
+ )
+}
+/**
+ * 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: {},
}
diff --git a/src/components/Link/Link.stories.jsx b/src/components/Link/Link.stories.jsx
index 4a4078b..182070d 100644
--- a/src/components/Link/Link.stories.jsx
+++ b/src/components/Link/Link.stories.jsx
@@ -13,18 +13,26 @@ const Template = (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: {},
}
|