@hashicorp/react-components 0.0.0

package/packages/product-downloader/package-lock.json

@@ -0,0 +1,103 @@
+{
+  "name": "@hashicorp/react-product-downloader",
+  "version": "7.0.0",
+  "lockfileVersion": 1,
+  "requires": true,
+  "dependencies": {
+    "@hashicorp/react-button": {
+      "version": "2.2.8",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.2.8.tgz",
+      "integrity": "sha512-dEn1L/q4OEB35ttc/MmfewXm/SWSD8S3lVTum67GHoaQdxxIU5DFI1GzE+7soQJuIkAqoqMk6s5BvBUW966ksQ==",
+      "requires": {
+        "@hashicorp/react-global-styles": "^4.6.1",
+        "@hashicorp/react-inline-svg": "^1.0.2",
+        "slugify": "^1.3.6"
+      }
+    },
+    "@hashicorp/react-global-styles": {
+      "version": "4.6.1",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.6.1.tgz",
+      "integrity": "sha512-a2eWgjLwGAC2LjUHE7Xt6sRGGjyTWfrc4N+qVxsyZw4eE0EiNhMIKDYHWjmtb+tGh8r8j+ca3tSjsuOUePVPUw=="
+    },
+    "@hashicorp/react-inline-svg": {
+      "version": "1.0.2",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-inline-svg/-/react-inline-svg-1.0.2.tgz",
+      "integrity": "sha512-AAFnBslSTgnEr++dTbMn3sybAqvn7myIj88ijGigF6u11eSRiV64zqEcyYLQKWTV6dF4AvYoxiYC6GSOgiM0Yw=="
+    },
+    "@hashicorp/react-tabs": {
+      "version": "1.0.0",
+      "resolved": "https://registry.npmjs.org/@hashicorp/react-tabs/-/react-tabs-1.0.0.tgz",
+      "integrity": "sha512-o3pYDnEpZGWEviNKN3M/v1rCDn7ZP304oaP7pCNJthHxxDIzjlV0XdmVZLWCkXTxO+d2OHtQ/K5Y6nLvzlygGw==",
+      "requires": {
+        "@hashicorp/react-global-styles": "^4.5.0",
+        "@hashicorp/react-inline-svg": "^1.0.2",
+        "@tippy.js/react": "^3.1.1"
+      }
+    },
+    "@tippy.js/react": {
+      "version": "3.1.1",
+      "resolved": "https://registry.npmjs.org/@tippy.js/react/-/react-3.1.1.tgz",
+      "integrity": "sha512-KF45vW/jKh/nBXk/2zzTFslv/T46zOMkIoDJ56ymZ+M00yHttk58J5wZ29oqGqDIUnobWSZD+cFpbR4u/UUvgw==",
+      "requires": {
+        "prop-types": "^15.6.2",
+        "tippy.js": "^5.1.1"
+      }
+    },
+    "js-tokens": {
+      "version": "4.0.0",
+      "resolved": "https://registry.npmjs.org/js-tokens/-/js-tokens-4.0.0.tgz",
+      "integrity": "sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ=="
+    },
+    "loose-envify": {
+      "version": "1.4.0",
+      "resolved": "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz",
+      "integrity": "sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==",
+      "requires": {
+        "js-tokens": "^3.0.0 || ^4.0.0"
+      }
+    },
+    "object-assign": {
+      "version": "4.1.1",
+      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
+      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
+    },
+    "popper.js": {
+      "version": "1.16.1",
+      "resolved": "https://registry.npmjs.org/popper.js/-/popper.js-1.16.1.tgz",
+      "integrity": "sha512-Wb4p1J4zyFTbM+u6WuO4XstYx4Ky9Cewe4DWrel7B0w6VVICvPwdOpotjzcf6eD8TsckVnIMNONQyPIUFOUbCQ=="
+    },
+    "prop-types": {
+      "version": "15.7.2",
+      "resolved": "https://registry.npmjs.org/prop-types/-/prop-types-15.7.2.tgz",
+      "integrity": "sha512-8QQikdH7//R2vurIJSutZ1smHYTcLpRWEOlHnzcWHmBYrOGUysKwSsrC89BCiFj3CbrfJ/nXFdJepOVrY1GCHQ==",
+      "requires": {
+        "loose-envify": "^1.4.0",
+        "object-assign": "^4.1.1",
+        "react-is": "^16.8.1"
+      }
+    },
+    "react-is": {
+      "version": "16.13.1",
+      "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",
+      "integrity": "sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ=="
+    },
+    "semver": {
+      "version": "7.3.2",
+      "resolved": "https://registry.npmjs.org/semver/-/semver-7.3.2.tgz",
+      "integrity": "sha512-OrOb32TeeambH6UrhtShmF7CRDqhL6/5XpPNp2DuRH6+9QLw/orhp72j87v8Qa1ScDkvrrBNpZcDejAirJmfXQ=="
+    },
+    "slugify": {
+      "version": "1.4.5",
+      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
+      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
+    },
+    "tippy.js": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/tippy.js/-/tippy.js-5.2.1.tgz",
+      "integrity": "sha512-66UT6JRVn3dXNCORE+0UvUK3JZqV/VhLlU6HTDm3FmrweUUFUxUGvT8tUQ7ycMp+uhuLAwQw6dBabyC+iKf/MA==",
+      "requires": {
+        "popper.js": "^1.16.0"
+      }
+    }
+  }
+}

package/packages/product-downloader/package.json

@@ -0,0 +1,18 @@
+{
+  "name": "@hashicorp/react-product-downloader",
+  "description": "Interface for downloading HashiCorp products",
+  "version": "7.0.0",
+  "author": "HashiCorp",
+  "contributors": [
+    "Zack Tanner"
+  ],
+  "dependencies": {
+    "@hashicorp/react-button": "^2.2.8",
+    "@hashicorp/react-tabs": "^2.0.0",
+    "semver": "^7.3.2"
+  },
+  "license": "MPL-2.0",
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/packages/product-downloader/partials/download-cards/index.jsx

@@ -0,0 +1,125 @@
+import Tabs from '@hashicorp/react-tabs'
+
+import { prettyOs, prettyArch } from '../../utils/downloader'
+import styles from './style.module.css'
+
+export default function DownloadTabs({
+  defaultTabIdx,
+  tabData,
+  downloads,
+  version,
+  merchandisingSlot,
+  brand,
+  logo,
+  tutorialLink,
+}) {
+  return (
+    <Tabs
+      key={defaultTabIdx}
+      centered
+      fullWidthBorder
+      theme={brand}
+      className={styles.tabs}
+      defaultTabIdx={defaultTabIdx}
+      items={tabData.map(({ os, packageManagers }) => ({
+        heading: prettyOs(os),
+        tabChildren: function TabChildren() {
+          return (
+            <div className={styles.cards}>
+              <Cards
+                key={os}
+                os={os}
+                downloads={downloads}
+                packageManagers={packageManagers}
+                version={version}
+                theme={brand}
+                logo={logo}
+                tutorialLink={tutorialLink}
+              />
+              {merchandisingSlot}
+            </div>
+          )
+        },
+      }))}
+    />
+  )
+}
+
+function Cards({
+  os,
+  downloads,
+  packageManagers,
+  version,
+  theme,
+  logo,
+  tutorialLink,
+}) {
+  const arches = downloads[os]
+  const hasPackageManager = packageManagers.length > 0
+  const hasMultiplePackageManagers = packageManagers.length > 1
+
+  return (
+    <>
+      <div
+        data-testid="download-cards"
+        className={
+          hasMultiplePackageManagers
+            ? styles.downloadCardsSingle
+            : styles.downloadCards
+        }
+      >
+        {hasPackageManager && (
+          <div className={styles.packageManagers}>
+            <span className={styles.cardTitle}>Package Manager</span>
+            {hasMultiplePackageManagers ? (
+              <Tabs
+                theme={theme}
+                items={packageManagers.map(({ label, commands }) => ({
+                  heading: label,
+                  tabChildren: function TabChildren() {
+                    return (
+                      <div className={styles.install}>
+                        {commands.map((command) => (
+                          <pre key={command}>{command}</pre>
+                        ))}
+                      </div>
+                    )
+                  },
+                }))}
+              />
+            ) : (
+              <div className={styles.install}>
+                {packageManagers[0].commands.map((command) => (
+                  <pre key={command}>{command}</pre>
+                ))}
+              </div>
+            )}
+            {tutorialLink && (
+              <div>
+                <a href={tutorialLink.href}>{tutorialLink.label}</a>
+              </div>
+            )}
+          </div>
+        )}
+        <div className={hasPackageManager ? styles.card : styles.soloCard}>
+          <span className={styles.cardTitle}>Binary Download</span>
+          <div>
+            <div className={styles.logoWrapper}>
+              {logo}
+              <span className={styles.version}>{version}</span>
+            </div>
+            {Object.entries(arches).map(([arch, url]) => (
+              <a href={url} key={arch} className={styles.downloadLink}>
+                {prettyArch(arch)}
+              </a>
+            ))}
+          </div>
+          <div className={styles.fastly}>
+            Bandwidth courtesy of
+            <img src={require('../logos/fastly.svg')} alt="Fastly" />
+          </div>
+        </div>
+      </div>
+    </>
+  )
+}

package/packages/product-downloader/partials/download-cards/style.module.css

@@ -0,0 +1,152 @@
+.cards {
+  max-width: 880px;
+  margin: 0 auto;
+}
+
+.logoWrapper {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin-bottom: 10px;
+}
+
+.version {
+  margin-left: 8px;
+}
+
+.downloadCards {
+  justify-content: center;
+  margin: 54px 0 24px;
+
+  & a {
+    color: var(--gray-2);
+  }
+
+  @media (--medium-up) {
+    margin: 64px 0;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-column-gap: 48px;
+    justify-items: center;
+  }
+
+  & .downloadLink {
+    color: var(--brand);
+    margin-right: 16px;
+  }
+}
+
+.downloadCardsSingle {
+  composes: downloadCards;
+
+  & .card {
+    max-width: unset;
+  }
+
+  @media (--medium-up) {
+    grid-template-columns: 1fr;
+
+    & .card:first-child {
+      margin-bottom: 48px;
+    }
+  }
+}
+
+.card {
+  width: 100%;
+  min-height: 278px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  justify-content: space-between;
+  padding: 40px 32px;
+  color: var(--gray-2);
+  border: 1px solid var(--gray-6);
+
+  &:first-child {
+    border-bottom: none;
+
+    @media (--medium-up) {
+      border-bottom: 1px solid var(--gray-6);
+    }
+  }
+}
+
+.packageManagers {
+  composes: card;
+
+  & a {
+    color: var(--brand);
+  }
+
+  & :global {
+    & .g-tabs {
+      width: 100%;
+
+      @media (--medium-up) {
+        width: initial;
+      }
+    }
+  }
+}
+
+.soloCard {
+  composes: card;
+  grid-column: span 2;
+
+  &:first-child {
+    border-bottom: 1px solid var(--gray-6);
+  }
+}
+
+.install {
+  color: var(--white);
+  background-color: var(--black);
+  padding: 16px 24px;
+  border-radius: 3px;
+  text-align: left;
+  margin: 32px 0;
+
+  & pre {
+    margin: 0;
+    padding: 0;
+    background-color: inherit;
+    white-space: normal;
+
+    &::before {
+      color: #e93471;
+      content: '$';
+      margin-right: 8px;
+    }
+
+    @media (--medium-up) {
+      white-space: pre;
+    }
+  }
+}
+
+.cardTitle {
+  font-family: var(--font-display);
+  font-size: 12px;
+  line-height: 18px;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--gray-4);
+  font-weight: bold;
+}
+
+.fastly {
+  display: flex;
+  align-items: center;
+  flex-direction: column;
+
+  & svg path {
+    fill: var(--black);
+  }
+
+  & img {
+    margin-top: 12px;
+    width: 48px;
+  }
+}

package/packages/product-downloader/partials/dropdown/index.jsx

@@ -0,0 +1,58 @@
+import { useState, useRef, useEffect } from 'react'
+import Button from '@hashicorp/react-button'
+import styles from './style.module.css'
+
+export default function Dropdown({ options, onChange, title, brand }) {
+  const [open, setOpen] = useState(false)
+  const buttonRef = useRef()
+
+  useEffect(() => {
+    function handleClickOutside(event) {
+      if (buttonRef.current.contains(event.target)) return
+
+      setOpen(false)
+    }
+    document.addEventListener('mousedown', handleClickOutside)
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside)
+    }
+  }, [])
+
+  return (
+    <div className={styles.root} ref={buttonRef}>
+      <Button
+        className="trigger"
+        theme={{ brand }}
+        onClick={() => setOpen((open) => !open)}
+        aria-expanded={open}
+        aria-controls="menu-list"
+        aria-haspopup="true"
+        title={title}
+        icon={{
+          position: 'right',
+          svg:
+            '<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M5 7.5L10 12.5L15 7.5" stroke="white" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/></svg>',
+        }}
+      />
+      {open && (
+        <ul className={styles.menu} id="menu-list" role="menu">
+          {options.map((option) => (
+            <li
+              className={`${styles.option} ${brand}`}
+              tabIndex={0}
+              role="menuitem"
+              key={option.value}
+              onClick={() => {
+                onChange(option.value)
+                setOpen(false)
+              }}
+            >
+              {option.label}
+            </li>
+          ))}
+        </ul>
+      )}
+    </div>
+  )
+}

package/packages/product-downloader/partials/dropdown/style.module.css

@@ -0,0 +1,28 @@
+.root {
+  display: inline-block;
+  position: relative;
+}
+
+.menu {
+  position: absolute;
+  list-style: none;
+  max-height: 250px;
+  overflow-y: auto;
+  top: 35px;
+  width: 100%;
+  padding: 0;
+  background-color: var(--white);
+  box-shadow: 0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
+    0 1px 3px 0 rgba(0, 0, 0, 0.12);
+}
+
+.option {
+  padding: 8px 16px;
+  cursor: pointer;
+  background-color: var(--brand);
+  color: var(--white);
+
+  &:hover {
+    background-color: var(--brand-d1);
+  }
+}

package/packages/product-downloader/partials/logos/fastly.svg

@@ -0,0 +1,7 @@
+<svg width="156" height="61" viewBox="0 0 156 61" xmlns="http://www.w3.org/2000/svg">
+	<path
+    d="M106.167 6.237v40.95h12.226V40.93h-4.04V0h-8.187v6.237zM0 40.93h4.156V21.174H0V15.74l4.156-.687v-5.5C4.156 2.891 5.597 0 14.042 0c1.824 0 3.986.271 5.879.614l-1.122 6.697c-1.283-.204-1.918-.24-2.728-.24-2.976 0-3.728.298-3.728 3.222v4.76h6.177v6.12h-6.177V40.93h4.113v6.255L0 47.187V40.93zm102.002-1.977c-1.28.272-2.4.239-3.211.259-3.368.083-3.077-1.03-3.077-4.226V21.174h6.41v-6.121h-6.41V0h-8.187v36.694c0 7.204 1.767 10.492 9.469 10.492 1.824 0 4.33-.472 6.223-.88l-1.217-7.353zm-24.695-17.79v-1.096c-2.477-.455-4.937-.461-6.27-.461-3.811 0-4.276 2.032-4.276 3.134 0 1.56.53 2.402 4.657 3.31 6.033 1.363 12.093 2.784 12.093 10.31 0 7.139-3.652 10.826-11.338 10.826-5.143 0-10.134-1.11-13.941-2.082v-6.151h6.2l-.004 1.092c2.668.519 5.465.467 6.926.467 4.064 0 4.721-2.198 4.721-3.367 0-1.622-1.165-2.4-4.975-3.178-7.177-1.234-12.873-3.699-12.873-11.033 0-6.943 4.616-9.666 12.302-9.666 5.207 0 9.166.812 12.976 1.785v6.11h-6.198zm-41.475 17.77v-.967h-.98v.965c-4.395-.257-7.91-3.81-8.139-8.237h.975v-.987h-.97c.26-4.397 3.761-7.915 8.133-8.171v.97h.981v-.973c4.31.232 7.782 3.633 8.157 7.928v.283h-.983v.987h.983v.27c-.373 4.298-3.846 7.701-8.157 7.933zm16.347.02l-.006-25.632h-8.186v2.404a16.673 16.673 0 00-5.567-2.119h.046v-2.844h1V8.671H31.22v2.091h1v2.845h.056c-7.83 1.45-13.764 8.348-13.764 16.646 0 9.35 7.534 16.93 16.828 16.93a16.674 16.674 0 008.672-2.419l1.474 2.423h8.648v-8.234h-1.957.001zm86.935-23.9H156v6.115h-4.037L141.607 46.8c-2.967 7.2-7.843 13.977-15.266 13.977-1.826 0-4.257-.203-5.942-.61l.74-7.476c1.082.203 2.499.337 3.242.337 3.443 0 7.326-2.146 8.541-5.883L122.43 21.168h-4.036v-6.115h16.895v6.115h-4.036l5.945 14.713 5.944-14.713h-4.027v-6.115zM39.639 26.569l-.623-.627-3.164 2.774a1.494 1.494 0 00-.51-.09c-.853 0-1.544.716-1.544 1.598 0 .883.69 1.598 1.545 1.598.853 0 1.546-.715 1.546-1.598 0-.168-.025-.33-.071-.481l2.82-3.174z"
+    fill="#000"
+    fill-rule="nonzero"
+  />
+</svg>

package/packages/product-downloader/partials/release-information/index.jsx

@@ -0,0 +1,148 @@
+import { useState, Fragment } from 'react'
+
+import Dropdown from '../dropdown'
+import {
+  prettyArch,
+  prettyOs,
+  trackDownload,
+  getVersionLabel,
+} from '../../utils/downloader'
+import styles from './style.module.css'
+
+export default function ReleaseInformation({
+  productId,
+  releases,
+  productName,
+  latestVersion,
+  packageManagers,
+  containers,
+  tutorials,
+  changelog,
+  brand,
+}) {
+  const [selectedVersionId, setSelectedVersionId] = useState(latestVersion)
+  const { version, ...selectedVersion } =
+    releases.find((release) => release.version === selectedVersionId) || {}
+
+  return (
+    <div className={styles.root}>
+      <div className="g-container">
+        <h2>Release Information</h2>
+        <div className={styles.grid}>
+          {releases.length > 0 && (
+            <>
+              <div className={styles.releases}>Releases:</div>
+              <div>
+                <Dropdown
+                  title={`${productName} ${getVersionLabel(
+                    version,
+                    latestVersion
+                  )}`}
+                  brand={brand}
+                  options={releases.map((releaseData) => ({
+                    label: `${productName} ${getVersionLabel(
+                      releaseData.version,
+                      latestVersion
+                    )}`,
+                    value: releaseData.version,
+                  }))}
+                  onChange={(release) => setSelectedVersionId(release)}
+                />
+                <a
+                  href={
+                    changelog ||
+                    `https://github.com/hashicorp/${productId}/blob/v${version}/CHANGELOG.md`
+                  }
+                  className={styles.changelog}
+                >
+                  Changelog
+                </a>
+              </div>
+            </>
+          )}
+          <div className={styles.latestDownloads}>Latest Downloads:</div>
+          <div>
+            Package downloads for {productName} {version}
+            <div className={styles.downloads}>
+              {Object.entries(selectedVersion).map(([os, release]) => (
+                <Fragment key={os}>
+                  <div className={styles.os}>{prettyOs(os)}</div>
+                  <div>
+                    {Object.entries(release).map(([arch, file]) => (
+                      <a
+                        href={file}
+                        key={arch}
+                        onClick={() =>
+                          trackDownload(productId, version, os, arch)
+                        }
+                      >
+                        {prettyArch(arch)}
+                      </a>
+                    ))}
+                  </div>
+                </Fragment>
+              ))}
+            </div>
+            <p>
+              You can find the{' '}
+              <a
+                href={`https://releases.hashicorp.com/${productId}/${version}/${productId}_${version}_SHA256SUMS`}
+              >
+                SHA256 checksums for {productName} {version}
+              </a>{' '}
+              online and you can{' '}
+              <a
+                href={`https://releases.hashicorp.com/${productId}/${version}/${productId}_${version}_SHA256SUMS.sig`}
+              >
+                verify the checksums signature file
+              </a>{' '}
+              which has been signed using{' '}
+              <a href="https://hashicorp.com/security">
+                HashiCorp&apos;s GPG key.
+              </a>
+            </p>
+          </div>
+
+          {packageManagers?.length > 0 && (
+            <>
+              <div className={styles.heading}>Package Managers</div>
+              <div className={styles.links}>
+                {packageManagers.map((packageManager) => (
+                  <div key={packageManager.label}>
+                    Install with{' '}
+                    <a href={packageManager.url}>{packageManager.label}</a>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+          {containers?.length > 0 && (
+            <>
+              <div className={styles.heading}>Containers</div>
+              <div className={styles.links}>
+                {containers.map((container) => (
+                  <div key={container.label}>
+                    Run with <a href={container.url}>{container.label}</a>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+
+          {tutorials?.length > 0 && (
+            <>
+              <div className={styles.heading}>Tutorials</div>
+              <div className={styles.links}>
+                {tutorials.map((tutorial) => (
+                  <div key={tutorial.label}>
+                    <a href={tutorial.url}>{tutorial.label}</a>
+                  </div>
+                ))}
+              </div>
+            </>
+          )}
+        </div>
+      </div>
+    </div>
+  )
+}