@hashicorp/react-components 0.0.0 → 1.0.0

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

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

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

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

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

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

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

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

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

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

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

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

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