Add ButtonLink component (#742)

src/shared/components/button-link/ButtonLink.scss

+@import 'src/styles/common';
+
+.buttonLink {
+  display: inline-block;
+  padding: var(--button-link-padding, 7px 18px);
+  border-radius: var(--button-link-border-radius, 4px);
+  border: var(--button-link-border, 1px solid #{$blue});
+  background-color: var(--button-link-background-color, #{$blue});
+  color: var(--button-link-color, #{$white});
+  font-weight: var(--button-link-font-weight, #{$bold});
+  user-select: none;
+}
+
+.buttonLinkActive {
+  border: var(--button-link-active-border, 1px solid #{$black});
+  background-color: var(--button-link-active-background-color, #{$black});
+  pointer-events: none;
+  cursor: default;
+}
+
+.buttonLinkDisabled {
+  border: var(--button-link-disabled-border, 1px solid #{$grey});
+  background-color: var(--button-link-disabled-background-color, #{$grey});
+  pointer-events: none;
+  cursor: default;
+}

src/shared/components/button-link/ButtonLink.tsx

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { NavLink, NavLinkProps } from 'react-router-dom';
+import classNames from 'classnames';
+
+import styles from './ButtonLink.scss';
+
+/**
+ * This is a link that looks like a button.
+ * Using React-Router's Link component
+ */
+
+type Props = NavLinkProps & {
+  isDisabled?: boolean;
+};
+
+const ButtonLink = (props: Props) => {
+  const { className, isDisabled, children, ...otherProps } = props;
+
+  const inactiveLinkClasses = classNames(
+    styles.buttonLink,
+    { [styles.buttonLinkDisabled]: isDisabled },
+    className
+  );
+
+  const activeLinkClasses = classNames(
+    styles.buttonLink,
+    styles.buttonLinkActive,
+    className
+  );
+
+  return isDisabled ? (
+    <span className={inactiveLinkClasses}>{children}</span>
+  ) : (
+    <NavLink
+      {...otherProps}
+      className={({ isActive }) =>
+        isActive ? activeLinkClasses : inactiveLinkClasses
+      }
+    >
+      {children}
+    </NavLink>
+  );
+};
+
+export default ButtonLink;

stories/shared-components/button-link/ButtonLink.stories.scss

+.wrapper {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 1em;
+}

stories/shared-components/button-link/ButtonLink.stories.tsx

+/**
+ * See the NOTICE file distributed with this work for additional information
+ * regarding copyright ownership.
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import React from 'react';
+import { MemoryRouter } from 'react-router';
+
+import ButtonLink from 'src/shared/components/button-link/ButtonLink';
+
+import styles from './ButtonLink.stories.scss';
+
+export default {
+  title: 'Components/Shared Components/ButtonLink'
+};
+
+export const ButtonLinkStory = () => (
+  <MemoryRouter initialEntries={['/foo']}>
+    <div className={styles.wrapper}>
+      <ButtonLink to="/foo">I am a link</ButtonLink>
+      <ButtonLink to="/">I am a link</ButtonLink>
+      <ButtonLink to="/bar" isDisabled={true}>
+        I am disabled
+      </ButtonLink>
+    </div>
+  </MemoryRouter>
+);
+
+ButtonLinkStory.storyName = 'default';