@hashicorp/react-components 0.0.0

package/packages/subnav/partials/CtaLinks/github-stars-link/style.css

@@ -0,0 +1,78 @@
+.g-subnav .cta-links .github-button {
+  position: relative;
+  color: var(--black);
+  border: 1px solid rgba(29, 30, 35, 0.2);
+  background: none;
+  transition: background 0.2s, border-color 0.2s;
+  display: flex;
+  align-items: center;
+
+  /* Scrim used in most hover effects */
+  &::before {
+    content: '';
+    position: absolute;
+    top: -1px;
+    left: -1px;
+    right: -1px;
+    bottom: -1px;
+    border-radius: 1px;
+    transition: opacity 0.25s ease, background 0.25s ease;
+    z-index: 0;
+    opacity: 0;
+    background-color: var(--black);
+  }
+
+  & > .github {
+    display: flex;
+    align-items: center;
+    padding: 9px 10px;
+    & > svg {
+      width: 20px;
+      height: 20px;
+    }
+    & .hidden-text {
+      height: 1px;
+      width: 1px;
+      position: absolute;
+      overflow: hidden;
+      left: -10000px;
+      top: auto;
+    }
+  }
+
+  & > .stars {
+    display: flex;
+    align-items: center;
+    height: 100%;
+    border-left: 1px solid rgba(29, 30, 35, 0.2);
+    padding: 6px 12px 7px 10px;
+    transition: border-color 0.2s;
+    z-index: 1;
+    & > svg {
+      width: 16px;
+      height: 16px;
+      margin-right: 4px;
+      margin-top: 1px;
+    }
+  }
+
+  &:hover {
+    border-color: transparent;
+    &::before {
+      opacity: 0.1;
+    }
+    & > .stars {
+      border-color: transparent;
+    }
+  }
+
+  &:active {
+    border-color: transparent;
+    &::before {
+      opacity: 0.16;
+    }
+    & > .stars {
+      border-color: transparent;
+    }
+  }
+}

package/packages/subnav/partials/CtaLinks/icons/github-logo.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function GithubIcon(props) {
+  return (
+    <svg width={16} height={16} viewBox="0 0 16 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M8 0C3.58 0 0 3.58 0 8c0 3.54 2.29 6.53 5.47 7.59.4.07.55-.17.55-.38 0-.19-.01-.82-.01-1.49-2.01.37-2.53-.49-2.69-.94-.09-.23-.48-.94-.82-1.13-.28-.15-.68-.52-.01-.53.63-.01 1.08.58 1.23.82.72 1.21 1.87.87 2.33.66.07-.52.28-.87.51-1.07-1.78-.2-3.64-.89-3.64-3.95 0-.87.31-1.59.82-2.15-.08-.2-.36-1.02.08-2.12 0 0 .67-.21 2.2.82.64-.18 1.32-.27 2-.27.68 0 1.36.09 2 .27 1.53-1.04 2.2-.82 2.2-.82.44 1.1.16 1.92.08 2.12.51.56.82 1.27.82 2.15 0 3.07-1.87 3.75-3.65 3.95.29.25.54.73.54 1.48 0 1.07-.01 1.93-.01 2.2 0 .21.15.46.55.38A8.013 8.013 0 0016 8c0-4.42-3.58-8-8-8z"
+      />
+    </svg>
+  )
+}
+
+export default GithubIcon

package/packages/subnav/partials/CtaLinks/icons/github.svg.js

@@ -0,0 +1,2 @@
+export default `<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.9633 0.325439C5.3578 0.325439 0 5.68324 0 12.2887C0 17.5731 3.44954 22.0502 8.14679 23.6649C8.73394 23.7383 8.95413 23.3713 8.95413 23.0777C8.95413 22.7842 8.95413 22.0502 8.95413 21.0227C5.65138 21.7566 4.91743 19.408 4.91743 19.408C4.40367 18.0135 3.59633 17.6465 3.59633 17.6465C2.49541 16.9126 3.66972 16.9126 3.66972 16.9126C4.84404 16.986 5.50459 18.1603 5.50459 18.1603C6.6055 19.9952 8.29358 19.4814 8.95413 19.1878C9.02752 18.3805 9.3945 17.8667 9.68807 17.5731C7.04587 17.2796 4.25688 16.252 4.25688 11.6282C4.25688 10.3071 4.69725 9.27957 5.50459 8.39883C5.43119 8.17865 4.99083 6.93094 5.65138 5.31627C5.65138 5.31627 6.6789 5.02269 8.95413 6.56397C9.90826 6.27039 10.9358 6.197 11.9633 6.197C12.9908 6.197 14.0183 6.34379 14.9725 6.56397C17.2477 5.02269 18.2752 5.31627 18.2752 5.31627C18.9358 6.93094 18.4954 8.17865 18.422 8.47223C19.156 9.27957 19.6697 10.3805 19.6697 11.7016C19.6697 16.3254 16.8807 17.2796 14.2385 17.5731C14.6789 17.9401 15.0459 18.6741 15.0459 19.775C15.0459 21.3897 15.0459 22.6374 15.0459 23.0777C15.0459 23.3713 15.2661 23.7383 15.8532 23.6649C20.6239 22.0502 24 17.5731 24 12.2887C23.9266 5.68324 18.5688 0.325439 11.9633 0.325439Z" fill="#252937"/>
+</svg>`

package/packages/subnav/partials/CtaLinks/icons/star.js

@@ -0,0 +1,14 @@
+import React from 'react'
+
+function StarIcon(props) {
+  return (
+    <svg width={14} height={16} viewBox="0 0 14 16" {...props}>
+      <path
+        fillRule="evenodd"
+        d="M14 6l-4.9-.64L7 1 4.9 5.36 0 6l3.6 3.26L2.67 14 7 11.67 11.33 14l-.93-4.74L14 6z"
+      />
+    </svg>
+  )
+}
+
+export default StarIcon

package/packages/subnav/partials/CtaLinks/index.js

@@ -0,0 +1,48 @@
+import Button from '@hashicorp/react-button'
+import svgGithub from './icons/github.svg.js'
+import GithubStarsLink from './github-stars-link/index.js'
+
+function CtaLinks(props) {
+  const { links, brand, isInDropdown, hideGithubStars } = props
+  return (
+    <div className={`cta-links ${isInDropdown ? 'is-in-dropdown' : ''}`}>
+      {links.map((link, stableIdx) => {
+        const textKey = link.text.toLowerCase()
+        const isDownload = textKey === 'download'
+        const isGithub = textKey === 'github'
+        if (isGithub && !isInDropdown)
+          return (
+            <GithubStarsLink
+              // eslint-disable-next-line react/no-array-index-key
+              key={stableIdx}
+              url={link.url}
+              hideGithubStars={hideGithubStars}
+            />
+          )
+        const isLastButton = stableIdx === links.length - 1
+        const iconDownload = {
+          isAnimated: true,
+          position: 'left',
+        }
+        const iconGithub = {
+          svg: svgGithub,
+          position: 'left',
+        }
+        return (
+          <Button
+            // eslint-disable-next-line react/no-array-index-key
+            key={stableIdx}
+            size="small"
+            title={link.text}
+            url={link.url}
+            icon={isDownload ? iconDownload : isGithub ? iconGithub : undefined}
+            theme={{ brand, variant: isLastButton ? 'primary' : 'secondary' }}
+            linkType={isDownload ? 'download' : undefined}
+          />
+        )
+      })}
+    </div>
+  )
+}
+
+export default CtaLinks

package/packages/subnav/partials/CtaLinks/style.css

@@ -0,0 +1,32 @@
+@import './github-stars-link/style.css';
+
+.g-subnav .cta-links {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+  white-space: nowrap;
+
+  & > * + * {
+    /* Spaces consecutive buttons horizontally on desktop */
+    margin-left: 16px;
+  }
+
+  &.is-in-dropdown {
+    /* Allows consecutive buttons to wrap */
+    flex-wrap: wrap;
+    white-space: wrap;
+
+    & > * {
+      /* Forces full width so we have 1 button per line */
+      display: block;
+      width: 100%;
+      /* Spaces consecutive buttons vertically */
+      margin-left: 0px;
+      margin-top: 16px;
+
+      &:last-of-type {
+        margin-bottom: 24px;
+      }
+    }
+  }
+}

package/packages/subnav/partials/DropdownTrigger/index.js

@@ -0,0 +1,20 @@
+import InlineSvg from '@hashicorp/react-inline-svg'
+import SvgChevronDown from '../../icons/chevron-down.svg.js'
+
+function DropdownTrigger(props) {
+  const { onClick, isCollapsed, text, brand, isActive } = props
+  return (
+    <button
+      className={`dropdown-trigger g-type-body-small-strong brand-${brand} style-menu-item ${
+        isCollapsed ? 'is-collapsed' : ''
+      } ${isActive ? 'is-active' : ''}`}
+      onMouseDown={(e) => e.preventDefault()}
+      onClick={onClick}
+    >
+      <span className={`text brand-${brand}`}>{text}</span>
+      <InlineSvg src={SvgChevronDown} />
+    </button>
+  )
+}
+
+export default DropdownTrigger

package/packages/subnav/partials/DropdownTrigger/style.css

@@ -0,0 +1,27 @@
+.g-subnav .dropdown-trigger {
+  position: relative;
+  display: flex;
+  align-items: center;
+  height: 100%;
+  white-space: nowrap;
+  line-height: 2.5rem;
+  padding-left: 16px;
+  padding-right: 16px;
+
+  & svg {
+    margin-top: 1px;
+    margin-bottom: -1px;
+    margin-left: 6px;
+    width: 12px;
+    height: 12px;
+    transition: transform 0.3s;
+    transform: rotate(-180deg);
+    & [stroke] {
+      stroke-width: 2.5;
+    }
+  }
+
+  &.is-collapsed svg {
+    transform: rotate(0deg);
+  }
+}

package/packages/subnav/partials/MenuItemsDefault/index.js

@@ -0,0 +1,131 @@
+import LinkWrap from '@hashicorp/react-link-wrap'
+import DropdownTrigger from '../DropdownTrigger/index.js'
+
+function MenuItemsDefault(props) {
+  const { menuItems, brand, Link, menuItemsAlign } = props
+  return (
+    <ul className={`menu-items-default menu-items-align-${menuItemsAlign}`}>
+      {menuItems.map((menuItem, stableIdx) => {
+        if (menuItem === 'divider') {
+          // eslint-disable-next-line react/no-array-index-key
+          return <VerticalDivider key={stableIdx} />
+        }
+        const { text, url, submenu, _isActiveUrl } = menuItem
+        return menuItem.submenu ? (
+          // eslint-disable-next-line react/no-array-index-key
+          <NavLinkWithDropdown
+            key={stableIdx}
+            text={text}
+            submenu={submenu}
+            brand={brand}
+            Link={Link}
+          />
+        ) : (
+          // eslint-disable-next-line react/no-array-index-key
+          <NavLink
+            key={stableIdx}
+            text={text}
+            url={url}
+            isActive={_isActiveUrl}
+            brand={brand}
+            Link={Link}
+          />
+        )
+      })}
+    </ul>
+  )
+}
+
+function VerticalDivider() {
+  return <span className="vertical-divider" />
+}
+
+function NavLink(props) {
+  const { text, url, brand, isActive, Link } = props
+  return (
+    <li>
+      <LinkWrap
+        Link={Link}
+        className={`nav-link g-type-body-small-strong style-menu-item ${
+          isActive ? 'is-active' : ''
+        }`}
+        href={url}
+      >
+        <span className={`text brand-${brand}`}>{text}</span>
+      </LinkWrap>
+    </li>
+  )
+}
+
+class NavLinkWithDropdown extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { isCollapsed: true }
+    this.toggleCollapsed = this.toggleCollapsed.bind(this)
+    this.parentRef = React.createRef()
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  toggleCollapsed() {
+    this.setState({ isCollapsed: !this.state.isCollapsed })
+  }
+
+  handleClick(event) {
+    //  If already collapsed, clicks outside the modal don't matter
+    if (this.state.isCollapsed) return true
+    //  If we're not collapsed, and the click is outside the component,
+    //  we should ensure that the modal closes
+    const isClickOutside = !this.parentRef.current.contains(event.target)
+    if (isClickOutside) this.setState({ isCollapsed: true })
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClick)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick)
+  }
+
+  render() {
+    const { text, submenu, brand, Link } = this.props
+    const { isCollapsed } = this.state
+    const hasActiveChild = submenu.reduce((acc, s) => {
+      return s._isActiveUrl || acc
+    }, false)
+    return (
+      <li ref={this.parentRef}>
+        <DropdownTrigger
+          onClick={this.toggleCollapsed}
+          isCollapsed={isCollapsed}
+          text={text}
+          brand={brand}
+          isActive={hasActiveChild}
+        />
+        <ul
+          className={`submenu-modal style-dropdown ${
+            isCollapsed ? 'is-collapsed' : ''
+          }`}
+        >
+          {submenu.map((submenuItem, stableIdx) => {
+            const { text, url } = submenuItem
+            return (
+              // eslint-disable-next-line react/no-array-index-key
+              <li key={stableIdx}>
+                <LinkWrap
+                  Link={Link}
+                  className="g-type-body-small-strong style-menu-item"
+                  href={url}
+                >
+                  <span className={`text brand-${brand}`}>{text}</span>
+                </LinkWrap>
+              </li>
+            )
+          })}
+        </ul>
+      </li>
+    )
+  }
+}
+
+export default MenuItemsDefault

package/packages/subnav/partials/MenuItemsDefault/style.css

@@ -0,0 +1,63 @@
+.g-subnav .menu-items-default {
+  display: flex;
+  padding-left: 32px;
+  padding-right: 32px;
+  margin-left: auto;
+  margin-right: auto;
+  align-items: center;
+
+  &.menu-items-align-right {
+    margin-right: 0;
+    padding-right: 16px;
+  }
+
+  & > li {
+    position: relative;
+    white-space: nowrap;
+    margin: 0;
+    padding: 0;
+
+    & .nav-link {
+      display: block;
+      position: relative;
+      padding-left: 16px;
+      padding-right: 16px;
+      line-height: 2.5rem;
+      display: flex;
+      align-items: center;
+      white-space: nowrap;
+    }
+
+    & .submenu-modal {
+      display: block;
+      position: absolute;
+      top: 100%;
+      margin-top: 8px;
+      padding: 24px;
+      left: 50%;
+      transform: translateX(-50%);
+
+      & li {
+        & a:hover .text {
+          text-decoration: underline;
+        }
+
+        & + li {
+          margin-top: 6px;
+        }
+      }
+
+      &.is-collapsed {
+        display: none;
+      }
+    }
+  }
+
+  & > .vertical-divider {
+    background: var(--gray-6);
+    height: 1.75rem;
+    width: 1px;
+    margin-left: 8px;
+    margin-right: 8px;
+  }
+}

package/packages/subnav/partials/MenuItemsOverflow/index.js

@@ -0,0 +1,117 @@
+import LinkWrap from '@hashicorp/react-link-wrap'
+import CtaLinks from '../CtaLinks/index.js'
+import DropdownTrigger from '../DropdownTrigger/index.js'
+
+class MenuItemsOverflow extends React.Component {
+  constructor(props) {
+    super(props)
+    this.state = { isCollapsed: true }
+    this.toggleCollapsed = this.toggleCollapsed.bind(this)
+    this.parentRef = React.createRef()
+    this.handleClick = this.handleClick.bind(this)
+  }
+
+  toggleCollapsed() {
+    this.setState({ isCollapsed: !this.state.isCollapsed })
+  }
+
+  handleClick(event) {
+    //  If already collapsed, clicks outside the modal don't matter
+    if (this.state.isCollapsed) return true
+    //  If we're not collapsed, and the click is outside the component,
+    //  we should ensure that the modal closes
+    const isClickOutside = !this.parentRef.current.contains(event.target)
+    if (isClickOutside) this.setState({ isCollapsed: true })
+  }
+
+  componentDidMount() {
+    document.addEventListener('click', this.handleClick)
+  }
+
+  componentWillUnmount() {
+    document.removeEventListener('click', this.handleClick)
+  }
+
+  render() {
+    const { menuItems, ctaLinks, brand, Link, hideGithubStars } = this.props
+    const { isCollapsed } = this.state
+    return (
+      <div className="menu-items-overflow" ref={this.parentRef}>
+        <DropdownTrigger
+          isCollapsed={isCollapsed}
+          onClick={this.toggleCollapsed}
+          text="Menu"
+          brand={brand}
+        />
+        <div
+          className={`dropdown style-dropdown ${
+            isCollapsed ? 'is-collapsed' : ''
+          }`}
+        >
+          <ul>
+            {menuItems.map((menuItem, stableIdx) => {
+              if (menuItem === 'divider') return null
+              const { text, url, submenu } = menuItem
+              if (submenu) {
+                //  If we have a submenu, we need to flatten it
+                return (
+                  // eslint-disable-next-line react/no-array-index-key
+                  <div key={stableIdx}>
+                    <div className="submenu-title g-type-label">{text}</div>
+                    <hr className="divider" />
+                    {submenu.map((subItem, subStableIdx) => (
+                      <SubmenuItem
+                        // eslint-disable-next-line react/no-array-index-key
+                        key={subStableIdx}
+                        url={subItem.url}
+                        text={subItem.text}
+                        brand={brand}
+                        Link={Link}
+                      />
+                    ))}
+                    <hr className="divider" />
+                  </div>
+                )
+              } else {
+                return (
+                  <SubmenuItem
+                    // eslint-disable-next-line react/no-array-index-key
+                    key={stableIdx}
+                    url={url}
+                    text={text}
+                    brand={brand}
+                    Link={Link}
+                  />
+                )
+              }
+            })}
+          </ul>
+          <CtaLinks
+            links={ctaLinks}
+            isInDropdown={true}
+            brand={brand}
+            hideGithubStars={hideGithubStars}
+          />
+        </div>
+      </div>
+    )
+  }
+}
+
+function SubmenuItem(props) {
+  const { url, text, brand, Link } = props
+  return (
+    <li>
+      <LinkWrap
+        Link={Link}
+        className="submenu-item g-type-body-small-strong style-menu-item"
+        href={url}
+        title={text}
+      >
+        <span className={`text brand-${brand}`}>{text}</span>
+      </LinkWrap>
+    </li>
+  )
+}
+
+export default MenuItemsOverflow

package/packages/subnav/partials/MenuItemsOverflow/style.css

@@ -0,0 +1,38 @@
+.g-subnav .menu-items-overflow {
+  position: relative;
+  margin-left: auto;
+
+  & .dropdown {
+    position: absolute;
+    top: 100%;
+    right: 0;
+    margin-top: 8px;
+    padding: 12px 24px 0px 24px;
+    width: 256px;
+    max-height: calc(100vh - 300%);
+    overflow-y: auto;
+
+    & .submenu-title {
+      margin: 12px 0 8px 0;
+      color: var(--gray-4);
+    }
+
+    & hr.divider {
+      margin: 12px 0;
+      border: 0;
+      padding: 0;
+      height: 1px;
+      background: var(--gray-6);
+    }
+
+    & a.submenu-item {
+      display: block;
+      padding: 4px 0;
+      line-height: 1.6em;
+    }
+
+    &.is-collapsed {
+      display: none;
+    }
+  }
+}

package/packages/subnav/partials/TitleLink/index.js

@@ -0,0 +1,40 @@
+import LinkWrap from '@hashicorp/react-link-wrap'
+
+import SvgrConsulLogoColour from '../../icons/consul-logo-color.svgr.js'
+import SvgrHCPLogoBlackWhite from '../../icons/hcp-logo-black-white.svgr.js'
+import SvgrNomadLogoColour from '../../icons/nomad-logo-color.svgr.js'
+import SvgrPackerLogoColour from '../../icons/packer-logo-color.svgr.js'
+import SvgrTerraformLogoColour from '../../icons/terraform-logo-color.svgr.js'
+import SvgrVagrantLogoColour from '../../icons/vagrant-logo-color.svgr.js'
+import SvgrVaultLogoColour from '../../icons/vault-logo-color.svgr.js'
+import SvgrBoundaryLogoColour from '../../icons/boundary-logo-color.svgr.js'
+import SvgrWaypointLogoColour from '../../icons/waypoint-logo-color.svgr.js'
+
+const logoDict = {
+  consul: SvgrConsulLogoColour,
+  hcp: SvgrHCPLogoBlackWhite,
+  nomad: SvgrNomadLogoColour,
+  packer: SvgrPackerLogoColour,
+  terraform: SvgrTerraformLogoColour,
+  vagrant: SvgrVagrantLogoColour,
+  vault: SvgrVaultLogoColour,
+  boundary: SvgrBoundaryLogoColour,
+  waypoint: SvgrWaypointLogoColour,
+}
+
+function TitleLink(props) {
+  const { text, url, brand, Link } = props
+  const Logo = logoDict[text.toLowerCase()]
+  return (
+    <LinkWrap
+      Link={Link}
+      className={`title-link brand-${brand} ${!Logo ? 'is-text' : ''}`}
+      href={url}
+      title={text}
+    >
+      {Logo ? <Logo /> : text}
+    </LinkWrap>
+  )
+}
+
+export default TitleLink

package/packages/subnav/partials/TitleLink/style.css

@@ -0,0 +1,21 @@
+.g-subnav .title-link {
+  position: relative;
+  white-space: nowrap;
+  font-weight: var(--font-weight-bold);
+  color: var(--gray-1);
+  font-size: 1.25rem;
+  line-height: 2.5rem;
+
+  & .svg-sizer {
+    height: 28px;
+    width: auto;
+  }
+
+  &.brand-hcp .svg-sizer {
+    width: 200px;
+
+    @media (--medium-up) {
+      width: 220px;
+    }
+  }
+}

package/packages/subnav/style.css

@@ -0,0 +1,6 @@
+@import './partials/CtaLinks/style.css';
+@import './partials/DropdownTrigger/style.css';
+@import './partials/MenuItemsDefault/style.css';
+@import './partials/MenuItemsOverflow/style.css';
+@import './partials/TitleLink/style.css';
+@import './styles/index.css';

package/packages/subnav/styles/_temp-g-svg.css

@@ -0,0 +1,22 @@
+.g-svg {
+  position: relative;
+}
+
+/* .svg-sizer (img) controls size of .g-svg div */
+.g-svg > .svg-sizer {
+  display: block;
+  margin: 0;
+  padding: 0;
+  width: auto;
+  height: auto;
+}
+
+/* svg matches size of .g-svg div */
+.g-svg > svg {
+  display: block;
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+}