Merge branch 'develop' into fix/asset-size

Author: lindapaiste

client/common/ButtonOrLink.jsx

@@ -0,0 +1,48 @@
+import React from 'react';
+import { Link } from 'react-router';
+import PropTypes from 'prop-types';
+
+/**
+ * Helper for switching between <button>, <a>, and <Link>
+ */
+const ButtonOrLink = ({ href, children, ...props }) => {
+  if (href) {
+    if (href.startsWith('http')) {
+      return (
+        <a href={href} target="_blank" rel="noopener noreferrer" {...props}>
+          {children}
+        </a>
+      );
+    }
+    return (
+      <Link to={href} {...props}>
+        {children}
+      </Link>
+    );
+  }
+  return <button {...props}>{children}</button>;
+};
+
+/**
+ * Accepts all the props of an HTML <a> or <button> tag.
+ */
+ButtonOrLink.propTypes = {
+  /**
+   * If providing an href, will render as a link instead of a button.
+   * Can be internal or external.
+   * Internal links will use react-router.
+   * External links should start with 'http' or 'https' and will open in a new window.
+   */
+  href: PropTypes.string,
+  /**
+   * Content of the button/link.
+   * Can be either a string or a complex element.
+   */
+  children: PropTypes.node.isRequired
+};
+
+ButtonOrLink.defaultProps = {
+  href: null
+};
+
+export default ButtonOrLink;

client/common/ButtonOrLink.test.jsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import { render, screen, fireEvent } from '../test-utils';
+import ButtonOrLink from './ButtonOrLink';
+
+describe('ButtonOrLink', () => {
+  const clickHandler = jest.fn();
+
+  afterEach(() => {
+    clickHandler.mockClear();
+  });
+
+  it('can render a clickable button', () => {
+    render(<ButtonOrLink onClick={clickHandler}>Text</ButtonOrLink>);
+    const button = screen.getByRole('button');
+    expect(button).toBeInstanceOf(HTMLButtonElement);
+    expect(button).toContainHTML('<button>Text</button>');
+    fireEvent.click(button);
+    expect(clickHandler).toHaveBeenCalled();
+  });
+
+  it('can render an external link', () => {
+    render(<ButtonOrLink href="https://p5js.org">p5</ButtonOrLink>);
+    const link = screen.getByRole('link');
+    expect(link).toBeInstanceOf(HTMLAnchorElement);
+    expect(link).toHaveAttribute('href', 'https://p5js.org');
+  });
+
+  it('can render an internal link with react-router', () => {
+    render(<ButtonOrLink href="/about">About</ButtonOrLink>);
+    // TODO: how can this be tested? Needs a router provider?
+  });
+});