@hashicorp/react-components 0.0.0 → 1.0.0

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

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

@@ -1,14 +0,0 @@
-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/star.js

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

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

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

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

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

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

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

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

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

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

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

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

@@ -1,22 +0,0 @@
-.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%;
-}