@hashicorp/react-components 0.0.0 → 1.0.0

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

@@ -1,103 +0,0 @@
-{
-  "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

@@ -1,18 +0,0 @@
-{
-  "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

@@ -1,125 +0,0 @@
-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

@@ -1,152 +0,0 @@
-.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

@@ -1,58 +0,0 @@
-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

@@ -1,28 +0,0 @@
-.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

@@ -1,7 +0,0 @@
-<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

@@ -1,148 +0,0 @@
-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>
-  )
-}