Button widget embeddable in markdown. #958.

gatsby-config.js

@@ -109,6 +109,7 @@ module.exports = {
                         resolve: `gatsby-remark-component-parent2div`,
                         options: {
                             components: [
+                                "button-cta",
                                 "internal-link",
                                 "data-lifecycle-diagram",
                                 "link-to-browser",

src/components/button-cta/button-cta.js

@@ -0,0 +1,61 @@
+/*
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * HCA Data Portal button cta component.
+ * Provides styling to a call to action button.
+ * Use of this component within markdown is possible.
+ *
+ * Children
+ * --------
+ * Children should have the following format:
+ * <button-cta>Button Text</button-cta>
+ *
+ * For example,
+ * <button-cta href="https://data.humancellatlas.org/explore" target="_blank">Explore</button-cta>
+ *
+ * Note
+ * ----
+ * - `href` and `target` are both required props of <button-cta> component.
+ *
+ * - `href` is the URL that the hyperlink points to e.g. "/guides" for an internal link or "https://data.humancellatlas.org/explore" for an external link.
+ * - `target` is where to display the linked URL. Its value could be either: "_self" for internal links or "_blank" for external links.
+ * - `spacer` is an additional prop (not required for use within markdown).
+ *      The prop provides an additional 18px margin to the component bounds.
+ *      This ensures there is adequate separation between component rendering and subsequent markdown text.
+ *
+ * - `href` undefined will default to "/".
+ * - `target` undefined will default to "_self".
+ * - `spacer` undefined will default to true.
+ */
+
+// Core dependencies
+import {Link} from "gatsby";
+import React from "react";
+
+// App dependencies
+import {Relationship} from "../../utils/anchor/relationship.model";
+import {Target} from "../../utils/anchor/target.model";
+
+// Styles
+import buttonStyles from "../button/button.module.css";
+
+const classNames = require("classnames");
+
+function ButtonCta(props) {
+
+  const {children, href = "/", spacer = true, target = Target.SELF} = props;
+  const classNameButton = classNames(buttonStyles.buttonUnelevatedSecondary, {[buttonStyles.buttonSpacer]: spacer});
+  const externalLink = target === Target.BLANK;
+
+  return (
+      externalLink ?
+      <a className={classNameButton}
+         href={href}
+         rel={Relationship.NOOPENER_NOREFERRER}
+         target={target}>{children}</a> :
+      <Link className={classNameButton} to={href}>{children}</Link>
+  );
+}
+
+export default ButtonCta;

src/components/button/button.js

@@ -16,7 +16,7 @@ const classNames = require("classnames");
 function Button(props) {
 
     const {children, clickAction, icon} = props;
-    const classNamesButton = classNames(compStyles.button, {[compStyles.icon]:icon});
+    const classNamesButton = classNames(compStyles.button, {[compStyles.buttonIcon]:icon});
 
     const onHandleClickAction = () => {
 

src/components/button/button.module.css

@@ -9,29 +9,56 @@
 .button {
     align-items: center;
     border: none;
-    border-radius: 3px;
     cursor: pointer;
     display: flex;
     flex-shrink: 0;
-    font-family: "Montserrat",sans-serif;
-    font-size: 14px;
-    font-weight: 600;
     height: 38px;
     justify-content: center;
     margin: 0;
     min-width: 84px;
     padding: 0 12px;
     white-space: nowrap;
+    width: max-content;
+}
+
+/* Button - focus. */
+.button:focus {
+    outline: none;
 }
 
-/* Button - icon. */
-.button.icon {
+/* Button icon. */
+.buttonIcon {
     background-color: transparent;
     min-width: unset;
     padding: 8px;
 }
 
-/* Button - focus. */
-.button:focus {
-    outline: none;
+/* Button unelevated. */
+.buttonUnelevated {
+    border-radius: 3px;
+    box-sizing: border-box;
+    font-family: "Montserrat", sans-serif;
+    font-size: 14px;
+    font-weight: 600;
+    letter-spacing: 0.21px;
+    transition: background-color 400ms cubic-bezier(0.25, 0.8, 0.25, 1);
+}
+
+/* Button unelevated secondary. */
+.buttonUnelevatedSecondary {
+    composes: button; /* Button styles. */
+    composes: buttonUnelevated; /* Unelevated button. */
+    background-color: var(--secondary);
+    color: var(--white);
+}
+
+/* Button unelevated secondary - hover. */
+.buttonUnelevatedSecondary:hover {
+    background-color: var(--secondary-hover);
+}
+
+/* Button spacer. */
+/* Typically used by <ButtonCta/> in markdown - adds margin below button. */
+.buttonSpacer {
+    margin-bottom: 18px;
 }

src/components/markdown/markdown.js

@@ -10,6 +10,7 @@ import React, {useCallback, useEffect, useRef} from "react";
 import rehypeReact from "rehype-react";
 
 // App dependencies
+import ButtonCta from "../button-cta/button-cta";
 import DataLifecycleDiagram from '../dataLifecycleDiagram/dataLifecycleDiagram';
 import InternalLink from '../internal-link/internalLink';
 import LinkToBrowser from "../linkToBrowser/linkToBrowser";
@@ -25,6 +26,7 @@ function Markdown(props) {
     const renderAst = new rehypeReact({
         createElement: React.createElement,
         components: {
+            "button-cta": ButtonCta,
             "data-lifecycle-diagram": DataLifecycleDiagram,
             "internal-link": InternalLink,
             "link-to-browser": LinkToBrowser,

src/utils/anchor/relationship.model.js

@@ -0,0 +1,10 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Possible values of anchor relationship attribute.
+ */
+
+export const Relationship = {
+    "NOOPENER_NOREFERRER": "noopener noreferrer",
+};

src/utils/anchor/target.model.js

@@ -0,0 +1,11 @@
+/**
+ * Human Cell Atlas
+ * https://www.humancellatlas.org/
+ *
+ * Possible values of anchor target attribute.
+ */
+
+export const Target = {
+    "BLANK": "_blank",
+    "SELF": "_self",
+};