@hashicorp/react-components 0.0.0

package/packages/hashi-stack-menu/index.jsx

@@ -0,0 +1,51 @@
+import styles from './hashi-stack-menu.module.css'
+import { useEffect, useState } from 'react'
+import InlineSvg from '@hashicorp/react-inline-svg'
+import LogoSvg from './assets/logo.svg?include'
+import NavItem from './nav-item'
+import slugify from 'slugify'
+import HASHI_STACK_MENU_ITEMS from './data'
+
+export default function HashiStackMenu({ onPanelChange }) {
+  const [activePanelKey, setActivePanelKey] = useState('')
+  const isActive = (a) => activePanelKey === a
+
+  useEffect(() => {
+    if (onPanelChange) {
+      onPanelChange(activePanelKey)
+    }
+  }, [activePanelKey])
+
+  return (
+    <header className={styles.hashiStackMenu}>
+      <nav className={styles.nav}>
+        <a href="https://www.hashicorp.com/" className={styles.logoLink}>
+          <Logo />
+        </a>
+        <NavMenu>
+          {HASHI_STACK_MENU_ITEMS?.map((item) => (
+            <NavItem
+              key={slugifyToKey(item.title)}
+              item={item}
+              panelOpen={isActive(slugifyToKey(item.title)) || false}
+              onPanelOpen={() => setActivePanelKey(slugifyToKey(item.title))}
+              onPanelClose={() => setActivePanelKey('')}
+            />
+          ))}
+        </NavMenu>
+      </nav>
+    </header>
+  )
+}
+
+function slugifyToKey(title) {
+  return slugify(title, { lower: true })
+}
+
+function NavMenu({ children }) {
+  return <menu className={styles.menu}>{children}</menu>
+}
+
+function Logo() {
+  return <InlineSvg src={LogoSvg} />
+}

package/packages/hashi-stack-menu/nav-item/index.jsx

@@ -0,0 +1,100 @@
+import styles from './nav-item.module.css'
+import DropdownCarat from '../assets/icon-dropdown.svg?include'
+import InlineSvg from '@hashicorp/react-inline-svg'
+import { useRef, useEffect } from 'react'
+import BrowsePanel from '../browse-panel'
+import StackMenuSection from '../stack-menu-section'
+import useOnClickOutsideDropdown from '../use-on-click-outside-dropdown'
+
+export default function NavItem({
+  item,
+  panelOpen,
+  onPanelOpen,
+  onPanelClose,
+}) {
+  return item.sections ? (
+    <NavItemElement
+      title={item.title}
+      active={panelOpen}
+      toggleBrowsePanel={panelOpen === false ? onPanelOpen : onPanelClose}
+    >
+      <BrowsePanel isOpen={panelOpen} closeFn={onPanelClose}>
+        {item.sections.map((section, stableIdx) => (
+          <StackMenuSection
+            // eslint-disable-next-line react/no-array-index-key
+            key={stableIdx}
+            visiblyNewSection={
+              stableIdx > 0 &&
+              item.sections[stableIdx - 1].type !== section.type
+            }
+            groups={section.groups}
+          />
+        ))}
+      </BrowsePanel>
+    </NavItemElement>
+  ) : (
+    <NavItemElement title={item.title} linkUrl={item.linkUrl} />
+  )
+}
+
+function NavItemElement({
+  active,
+  toggleBrowsePanel,
+  children,
+  linkUrl,
+  title,
+}) {
+  // The <li> is the parent of <BrowsePanel /> which will slot into here as {children}
+  // Becuase the <li> is a parent it makes it ideal to handle the outside click hook which relies on a ref + the DOM element heirarchy
+  const parentItemRef = useRef(null)
+
+  useOnClickOutsideDropdown(parentItemRef, active, toggleBrowsePanel)
+  return (
+    <li ref={parentItemRef} className={styles.navItem}>
+      {toggleBrowsePanel ? (
+        <DropdownButton active={active} onClick={toggleBrowsePanel}>
+          {title}
+        </DropdownButton>
+      ) : (
+        <AnchorLink url={linkUrl}>{title}</AnchorLink>
+      )}
+      {children}
+    </li>
+  )
+}
+
+function DropdownButton({ active, onClick, children }) {
+  return (
+    <button
+      type="button"
+      className={`${styles.buttonReset} ${styles.link} ${
+        active ? ` ${styles.buttonActive}` : ''
+      }`}
+      onClick={onClick}
+    >
+      {children}
+      <span className={styles.visuallyHidden}>
+        {active ? 'Close this menu' : 'Open this menu'}
+      </span>
+      <InlineSvg src={DropdownCarat} />
+    </button>
+  )
+}
+
+function AnchorLink({ url, children }) {
+  const linkRef = useRef()
+  useEffect(() => {
+    if (typeof window !== 'undefined' && window.analytics) {
+      window.analytics.trackLink(
+        linkRef.current,
+        'Clicked HashiStackMenu Link',
+        { url }
+      )
+    }
+  }, [linkRef])
+  return (
+    <a ref={linkRef} className={styles.link} href={url}>
+      {children}
+    </a>
+  )
+}

package/packages/hashi-stack-menu/nav-item/nav-item.module.css

@@ -0,0 +1,64 @@
+.navItem {
+  display: flex;
+  flex-direction: column;
+  color: var(--brand);
+  list-style: none;
+  position: relative;
+  white-space: nowrap;
+}
+
+.buttonReset {
+  background-color: transparent;
+  border-style: none;
+  cursor: pointer;
+  padding: 0;
+  margin-right: 0.5rem;
+  & svg {
+    transition: 0.3s transform;
+  }
+}
+
+.link {
+  composes: g-type-body-small-strong from global;
+  position: relative;
+  color: var(--gray-4);
+  padding: 1rem 1.25rem 1rem 1rem;
+  transition: color 0.1s;
+  & svg {
+    position: absolute;
+    right: 0.25rem;
+    top: 0;
+    height: 100%;
+    & path {
+      stroke: var(--gray-4);
+    }
+  }
+  &:hover {
+    color: var(--gray-1);
+    & svg {
+      & path {
+        stroke: var(--gray-1);
+      }
+    }
+  }
+}
+.buttonActive {
+  color: var(--gray-1);
+  & svg {
+    transform: rotate(-180deg);
+    & path {
+      stroke: var(--black);
+    }
+  }
+}
+
+.visuallyHidden {
+  /* .visuallyHidden courtesy of https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/ */
+  clip: rect(0 0 0 0);
+  clip-path: inset(50%);
+  height: 1px;
+  overflow: hidden;
+  position: absolute;
+  white-space: nowrap;
+  width: 1px;
+}

package/packages/hashi-stack-menu/package-lock.json

@@ -0,0 +1,18 @@
+{
+	"name": "@hashicorp/react-hashi-stack-menu",
+	"version": "1.0.10",
+	"lockfileVersion": 1,
+	"requires": true,
+	"dependencies": {
+		"@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=="
+		},
+		"slugify": {
+			"version": "1.3.4",
+			"resolved": "https://registry.npmjs.org/slugify/-/slugify-1.3.4.tgz",
+			"integrity": "sha512-KP0ZYk5hJNBS8/eIjGkFDCzGQIoZ1mnfQRYS5WM3273z+fxGWXeN0fkwf2ebEweydv9tioZIHGZKoF21U07/nw=="
+		}
+	}
+}

package/packages/hashi-stack-menu/package.json

@@ -0,0 +1,17 @@
+{
+  "name": "@hashicorp/react-hashi-stack-menu",
+  "description": "A menu for displaying the entire HashiCorp stack",
+  "version": "1.0.10",
+  "author": "HashiCorp",
+  "contributors": [
+    "Jimmy Merritello"
+  ],
+  "dependencies": {
+    "@hashicorp/react-inline-svg": "^1.0.2",
+    "slugify": "1.3.4"
+  },
+  "peerDependencies": {
+    "react": "^16.9.0"
+  },
+  "license": "MPL-2.0"
+}

package/packages/hashi-stack-menu/stack-group/index.jsx

@@ -0,0 +1,16 @@
+import styles from './stack-group.module.css'
+import StackItem from '../stack-item'
+
+export default function StackGroup({ heading, items }) {
+  return (
+    <li className={styles.stackGroup}>
+      <h5 className={styles.stackGroupHeading}>{heading}</h5>
+      <ul className={styles.stackGroupLinkList}>
+        {items.map((item, stableIdx) => (
+          // eslint-disable-next-line react/no-array-index-key
+          <StackItem key={stableIdx} item={item} />
+        ))}
+      </ul>
+    </li>
+  )
+}

package/packages/hashi-stack-menu/stack-group/stack-group.module.css

@@ -0,0 +1,29 @@
+.stackGroup {
+  padding: 0;
+  list-style: none;
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  flex: 1 0 50%;
+  margin-bottom: 1rem;
+  & + .stackGroup {
+    margin-bottom: 0;
+  }
+}
+
+.stackGroupHeading {
+  composes: g-type-display-6 from global;
+  text-transform: uppercase;
+  font-size: 12px;
+  letter-spacing: 0.06rem;
+  margin: 0;
+  width: 100%;
+  color: var(--gray-2);
+}
+
+.stackGroupLinkList {
+  padding: 1.25rem 0;
+  margin: 0;
+  width: 100%;
+  height: 100%;
+}

package/packages/hashi-stack-menu/stack-item/index.jsx

@@ -0,0 +1,35 @@
+import styles from './stack-item.module.css'
+import InlineSvg from '@hashicorp/react-inline-svg'
+
+export default function StackItem({ item }) {
+  const { product, platform, url, iconSrc, badge } = item
+
+  if (product)
+    return (
+      <li className={styles.stackItem}>
+        <a href={url} className={styles.itemLink}>
+          {iconSrc && (
+            <InlineSvg className={styles.productIcon} src={iconSrc} />
+          )}
+          <span className={styles.productName}>{product}</span>
+          {badge && <span className={getBadgeClassName(badge)}>{badge}</span>}
+        </a>
+      </li>
+    )
+  if (platform)
+    return (
+      <li className={styles.stackItem}>
+        <a className={styles.itemLink} href={url}>
+          <span className={styles.itemName}>{platform}</span>
+          {badge && <span className={getBadgeClassName(badge)}>{badge}</span>}
+        </a>
+      </li>
+    )
+}
+
+// This will need to be adjusted if we ever need more specific badge styles but for now it achieves the expected design
+function getBadgeClassName(badgeText) {
+  return badgeText.toLowerCase().includes('new')
+    ? styles.badgeTypeNew
+    : styles.badge
+}

package/packages/hashi-stack-menu/stack-item/stack-item.module.css

@@ -0,0 +1,58 @@
+.stackItem {
+  list-style: none;
+  display: flex;
+  flex-wrap: nowrap;
+  width: 100%;
+  justify-content: space-between;
+  align-items: center;
+  padding-bottom: 0.25rem;
+}
+
+.itemLink {
+  display: flex;
+  justify-content: space-between;
+  color: var(--gray-1);
+  align-items: center;
+  position: relative;
+}
+
+.itemName {
+  composes: g-type-body-small-strong from global;
+}
+.productName {
+  composes: itemName;
+  text-transform: capitalize;
+}
+
+.productIcon {
+  margin-right: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+}
+
+.badge {
+  position: absolute;
+  text-align: center;
+  left: calc(100% + 10px);
+  top: 4px;
+  padding: 1.5px 4px 1.5px 6px;
+  border-radius: 2px;
+  display: block;
+  font-family: var(--font-display);
+  font-weight: 700;
+  font-size: 10px;
+  line-height: 1.272727273em;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  background: var(--white);
+  color: var(--gray-4);
+  border: 1px solid var(--gray-5);
+}
+
+.badgeTypeNew {
+  composes: badge;
+  background: var(--gray-2);
+  color: var(--white);
+  border-color: var(--gray-2);
+}

package/packages/hashi-stack-menu/stack-menu-section/index.jsx

@@ -0,0 +1,18 @@
+import styles from './stack-menu-section.module.css'
+import StackGroup from '../stack-group'
+
+export default function StackMenuSection({ groups, visiblyNewSection }) {
+  return (
+    <menu
+      className={
+        visiblyNewSection // If this is a `visiblyNewSection`, a divider (as `:before` psuedoelement) + increased padding are added to the left side
+          ? styles.stackMenuSectionPlusDivider
+          : styles.stackMenuSection
+      }
+    >
+      {groups.map((g) => (
+        <StackGroup key={g.title} heading={g.title} items={g.items} />
+      ))}
+    </menu>
+  )
+}

package/packages/hashi-stack-menu/stack-menu-section/stack-menu-section.module.css

@@ -0,0 +1,26 @@
+.stackMenuSection {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  justify-content: space-between;
+  padding: 0;
+  margin: 0;
+  flex: 1 1 125px;
+}
+
+.stackMenuSectionPlusDivider {
+  composes: stackMenuSection;
+  padding: 0;
+  margin-left: 80px;
+  position: relative;
+  flex: 1 0 260px;
+
+  &:before {
+    position: absolute;
+    content: '';
+    width: 1px;
+    height: 100%;
+    background: var(--gray-6);
+    left: -64px;
+  }
+}

package/packages/hashi-stack-menu/use-on-click-outside-dropdown.js

@@ -0,0 +1,22 @@
+import { useEffect } from 'react'
+
+export default function useOnClickOutsideDropdown(ref, shouldListen, handler) {
+  useEffect(() => {
+    const listener = (event) => {
+      // Do nothing if clicking ref's element or descendent elements
+      if (!ref.current || ref.current.contains(event.target)) return
+      handler(event)
+    }
+    // listen for touchstart or click events; but only when this dropdown is active via shouldListen
+    if (shouldListen) {
+      document.addEventListener('mousedown', listener)
+      document.addEventListener('touchstart', listener)
+    }
+
+    // remove listeners upon unmounting
+    return () => {
+      document.removeEventListener('mousedown', listener)
+      document.removeEventListener('touchstart', listener)
+    }
+  }, [ref, handler])
+}