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: {}, }