feat(link): implement link component for utah design system

src/utah-design-system/Link.jsx

@@ -0,0 +1,34 @@
+import PropTypes from 'prop-types';
+import { twMerge } from 'tailwind-merge';
+import Icon from './Icon';
+
+export default function Link({ className, href, external, children }) {
+  return (
+    <a
+      href={href}
+      target={external ? '_blank' : '_self'}
+      rel={external ? 'noopener noreferrer' : ''}
+      className={twMerge(
+        'inline-flex cursor-pointer items-center text-sky-600 hover:bg-slate-100 hover:text-sky-800',
+        className
+      )}
+    >
+      <span className="underline">{children}</span>
+      {external ? (
+        <Icon
+          className="ml-1"
+          name={Icon.Names.externalLink}
+          label="more info"
+          size="xs"
+        />
+      ) : null}
+    </a>
+  );
+}
+
+Link.propTypes = {
+  className: PropTypes.string,
+  href: PropTypes.string.isRequired,
+  external: PropTypes.bool,
+  children: PropTypes.node.isRequired,
+};

src/utah-design-system/Link.stories.jsx

@@ -0,0 +1,16 @@
+import Link from './Link';
+
+export default {
+  title: 'Utah Design System/Link',
+  component: Link,
+};
+
+export const Default = () => (
+  <>
+    This is an external link{' '}
+    <Link href="https://www.google.com" external>
+      google
+    </Link>
+    . Internal links <Link href="./test.html">look like this</Link>.
+  </>
+);

tailwind.config.js

@@ -27,6 +27,7 @@ export default {
       error: colors.red,
       info: colors.sky,
       warning: colors.amber,
+      sky: colors.sky,
     },
     fontFamily: {
       sans: ['Source Sans Pro', 'Helvetica Neue', 'sans-serif'],