From 66ad38b68d49d5985794e6c351a449ba01e94d0c Mon Sep 17 00:00:00 2001
From: rudouglas <ruairidouglas@gmail.com>
Date: Wed, 2 Jun 2021 11:43:45 +0100
Subject: [PATCH] feat: added Install component

This includes an Install button and Dropdown button with list of options. These are just samples for now to showcase functionality
---
 src/components/InstallButton.js | 63 +++++++++++++++++++++++++++++++++
 1 file changed, 63 insertions(+)
 create mode 100644 src/components/InstallButton.js

diff --git a/src/components/InstallButton.js b/src/components/InstallButton.js
new file mode 100644
index 000000000..93bc95ee7
--- /dev/null
+++ b/src/components/InstallButton.js
@@ -0,0 +1,63 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { Button, Dropdown, Link } from '@newrelic/gatsby-theme-newrelic';
+import { css } from '@emotion/react';
+
+const sampleItems = new Array(10).fill().map((_, i) => i + 1);
+
+const createMenuItems = (children, items) => {
+  const menuItems = [];
+  for (const item of items) {
+    menuItems.push(<Dropdown.MenuItem>{item}</Dropdown.MenuItem>);
+  }
+  return menuItems;
+};
+
+const createInstallLink = () => {
+  return `https://one.newrelic.com/launcher/nr1-core.explorer`;
+};
+
+const InstallButton = ({ children, title, ...props }) => {
+  return (
+    <div
+      css={css`
+        display: flex;
+        flex-direction: row;
+        float: right;
+      `}
+    >
+      <Button
+        {...props}
+        as={Link}
+        to={createInstallLink()}
+        variant={Button.VARIANT.PRIMARY}
+        css={css`
+          border-bottom-right-radius: 0px;
+          border-top-right-radius: 0px;
+          margin-right: 2px;
+        `}
+      >
+        Install
+      </Button>
+      <Dropdown>
+        <Dropdown.Toggle
+          variant={Button.VARIANT.PRIMARY}
+          css={css`
+            border-bottom-left-radius: 0px;
+            border-top-left-radius: 0px;
+            padding: 5px;
+          `}
+        />
+        <Dropdown.Menu>{createMenuItems(children, sampleItems)}</Dropdown.Menu>
+      </Dropdown>
+    </div>
+  );
+};
+
+InstallButton.propTypes = {
+  children: PropTypes.node,
+  title: PropTypes.string,
+  guid: PropTypes.string,
+};
+
+export default InstallButton;