@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/tabs/partials/TabTriggers/index.js

@@ -1,143 +0,0 @@
-import InlineSvg from '@hashicorp/react-inline-svg'
-import TabTrigger from './partials/TabTrigger/index.js'
-import SvgChevronRight from './icons/chevron-right_black.svg.js'
-import smoothScroll from './helpers/smoothScroll.js'
-
-class TabTriggers extends React.Component {
-  constructor(props) {
-    super(props)
-    this.parentRef = React.createRef()
-    this.handleResize = this.handleResize.bind(this)
-    this.getScrollOffset = this.getScrollOffset.bind(this)
-    this.updateScrollOffset = this.updateScrollOffset.bind(this)
-  }
-
-  componentWillUnmount() {
-    const scrollWrapper = this.parentRef.current.querySelector('.inner')
-    scrollWrapper.removeEventListener('scroll', this.handleResize)
-    const windowElem = scrollWrapper.closest('html').parentNode.defaultView
-    windowElem.removeEventListener('resize', this.handleResize)
-  }
-
-  componentDidMount() {
-    this.handleResize()
-    const scrollWrapper = this.parentRef.current.querySelector('.inner')
-    scrollWrapper.addEventListener('scroll', this.handleResize)
-    const windowElem = scrollWrapper.closest('html').parentNode.defaultView
-    windowElem.addEventListener('resize', this.handleResize)
-  }
-
-  handleResize() {
-    const parentElem = this.parentRef.current
-    const elems = {
-      scrollWrapper: parentElem.querySelector('.inner'),
-      sizeReference: parentElem.querySelector('.size-reference'),
-      tabTriggers: parentElem.querySelectorAll('.g-tab-trigger'),
-      prevArrow: parentElem.querySelector('.arrow.prev'),
-      nextArrow: parentElem.querySelector('.arrow.next'),
-    }
-    //  Determine combined width of contained items
-    let contentWidth = 0
-    elems.tabTriggers.forEach((t) => (contentWidth += t.offsetWidth))
-    //  Determine width of available space
-    //  using the .g-grid-container.size-reference element
-    const availableSpace = elems.sizeReference.offsetWidth
-    //  If more content width than available space, set to overflow-friendly styling
-    //  (note: overflow-friendly styling may not immediately cause actual overflow / scrolling,
-    //  as it increases space for nav links slightly)
-    const hasOverflow = contentWidth > availableSpace
-    //  Add attribute to parent and scroll container
-    parentElem.setAttribute('data-overflow', hasOverflow.toString())
-    elems.scrollWrapper.setAttribute('data-overflow', hasOverflow.toString())
-    //  Determine if there is area left to scroll,
-    //  Set visibility of next / prev arrows based on that
-    const scrollWidth = elems.scrollWrapper.scrollWidth
-    const outerWidth = parentElem.offsetWidth
-    const hidePrev = elems.scrollWrapper.scrollLeft === 0
-    elems.prevArrow.setAttribute('data-overflow', hasOverflow.toString())
-    elems.prevArrow.setAttribute('data-invisible', hidePrev.toString())
-    const hideNext = elems.scrollWrapper.scrollLeft + outerWidth >= scrollWidth
-    elems.nextArrow.setAttribute('data-overflow', hasOverflow.toString())
-    elems.nextArrow.setAttribute('data-invisible', hideNext.toString())
-  }
-
-  updateScrollOffset(activeFilterIdx) {
-    const newScrollLeft = this.getScrollOffset(activeFilterIdx)
-    const scrollWrapper = this.parentRef.current.querySelector('.inner')
-    const windowElem = scrollWrapper.closest('html').parentNode.defaultView
-    smoothScroll(windowElem, scrollWrapper, { x: newScrollLeft })
-    this.setState({ activeIdx: activeFilterIdx })
-  }
-
-  getScrollOffset(targetIdx) {
-    if (targetIdx === 0) return -1 // Scroll to start of container
-    const scrollWrapper = this.parentRef.current.querySelector('.inner')
-    const targetSelector = `.g-tab-trigger[data-tabindex='${targetIdx}']`
-    const targetElem = scrollWrapper.querySelector(targetSelector)
-    const targetMidpoint = targetElem.offsetLeft + targetElem.offsetWidth / 2
-    const newScrollLeft = targetMidpoint - scrollWrapper.offsetWidth / 2
-    return newScrollLeft
-  }
-
-  render() {
-    const { items, setActiveTabIdx, activeTabIdx } = this.props
-    return (
-      <div className="g-tab-triggers" ref={this.parentRef}>
-        <div className="g-grid-container">
-          <div className="size-reference"></div>
-        </div>
-        <div className="inner-wrapper">
-          <div className="inner">
-            <div className="content-container g-grid-container">
-              <div className="tooltip-space-overflow">
-                {items.map((item, stableIdx) => (
-                  <TabTrigger
-                    key={stableIdx}
-                    activeTabIdx={activeTabIdx}
-                    setActiveTabIdx={(targetIdx) => {
-                      setActiveTabIdx(targetIdx)
-                      this.updateScrollOffset(targetIdx)
-                    }}
-                    item={item}
-                  />
-                ))}
-              </div>
-            </div>
-          </div>
-          <div
-            className="arrow prev"
-            onClick={() => {
-              if (activeTabIdx > 0) {
-                setActiveTabIdx(activeTabIdx - 1)
-                this.updateScrollOffset(activeTabIdx - 1)
-              } else {
-                this.updateScrollOffset(activeTabIdx)
-              }
-            }}
-          >
-            <InlineSvg src={SvgChevronRight} />
-          </div>
-          <div
-            className="arrow next"
-            onClick={() => {
-              if (activeTabIdx < items.length - 1) {
-                setActiveTabIdx(activeTabIdx + 1)
-                this.updateScrollOffset(activeTabIdx + 1)
-              } else {
-                this.updateScrollOffset(activeTabIdx)
-              }
-            }}
-          >
-            <InlineSvg src={SvgChevronRight} />
-          </div>
-        </div>
-        <div className="g-grid-container">
-          <div className="bottom-border default"></div>
-        </div>
-        <div className="bottom-border for-overflow"></div>
-      </div>
-    )
-  }
-}
-
-export default TabTriggers

package/packages/tabs/partials/TabTriggers/partials/TabTrigger/icons/tooltip.svg.js

@@ -1 +0,0 @@
-export default `<svg width="24" height="24" viewBox="0 -1 24 24" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M9.09 9a3 3 0 015.83 1c0 2-3 3-3 3" stroke="#bdbec2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path clip-rule="evenodd" d="M12 22c5.523 0 10-4.477 10-10S17.523 2 12 2 2 6.477 2 12s4.477 10 10 10z" stroke="#bdbec2" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"/><path d="M12 17.387a.379.379 0 100-.758.379.379 0 000 .758z" fill="#bdbec2" stroke="#bdbec2" stroke-width="1.5" stroke-linejoin="round"/></svg>`

package/packages/tabs/partials/TabTriggers/partials/TabTrigger/index.js

@@ -1,37 +0,0 @@
-import Tippy from '@tippy.js/react'
-import TooltipIcon from './icons/tooltip.svg.js'
-
-const TabTrigger = (props) => {
-  const { item, activeTabIdx, setActiveTabIdx } = props
-  const isActiveTab = item.tabIndex === activeTabIdx
-  return (
-    <button
-      className={`g-tab-trigger ${isActiveTab ? ' active' : ''}`}
-      data-tabindex={item.tabIndex}
-      onMouseDown={(e) => e.preventDefault()}
-      onClick={() => setActiveTabIdx(item.tabIndex)}
-    >
-      <span className="inner">
-        <span className="g-type-body-strong">{item.heading}</span>
-        {item.tooltip && (
-          <Tippy
-            className="g-tab-trigger-tippy-tooltip"
-            content={item.tooltip}
-            animation="fade"
-            arrow={true}
-            placement="top"
-            hideOnClick={false}
-          >
-            <span
-              data-testid="tooltip-icon"
-              className="tooltip"
-              dangerouslySetInnerHTML={{ __html: TooltipIcon }}
-            />
-          </Tippy>
-        )}
-      </span>
-    </button>
-  )
-}
-
-export default TabTrigger

package/packages/tabs/partials/TabTriggers/partials/TabTrigger/style.css

@@ -1,75 +0,0 @@
-.g-tab-trigger {
-  display: flex;
-  align-items: center;
-  background: none;
-  border: none;
-  outline: none;
-  padding: 0;
-  padding-left: 16px;
-  padding-right: 16px;
-
-  @media (--medium-up) {
-    padding-left: 24px;
-    padding-right: 24px;
-  }
-
-  &:first-of-type {
-    padding-left: 0;
-  }
-
-  &:last-of-type {
-    padding-right: 0;
-  }
-
-  & .inner {
-    display: flex;
-    align-items: center;
-    padding-top: 19px;
-    padding-bottom: 16px;
-    border-bottom: 3px solid transparent;
-    color: var(--gray-4);
-    transition: color 0.2s;
-    white-space: nowrap;
-  }
-
-  &:hover {
-    cursor: pointer;
-  }
-
-  &:hover {
-    & .inner {
-      color: var(--gray-1);
-    }
-  }
-
-  &.active {
-    & .inner {
-      color: var(--gray-1);
-      border-bottom-color: var(--brand);
-    }
-  }
-
-  &:focus {
-    & .inner {
-      color: var(--brand);
-      text-decoration: underline;
-    }
-  }
-
-  & .tooltip {
-    margin-left: 0.5rem;
-    width: 1.125rem;
-
-    & svg {
-      width: 100%;
-    }
-  }
-}
-
-/* Override tooltip styles */
-.g-tab-trigger-tippy-tooltip {
-  max-width: 75vw !important;
-  @media (min-width: 380px) {
-    max-width: 350px !important;
-  }
-}

package/packages/tabs/partials/TabTriggers/style.css

@@ -1,152 +0,0 @@
-@import './partials/TabTrigger/style.css';
-
-.g-tab-triggers {
-  background: var(--white);
-  position: relative;
-
-  & .size-reference {
-    /* This element has zero height, but is still "visible"" */
-    /* Its width is used to determine when to use [data-overflow='true'] */
-  }
-
-  & .bottom-border {
-    width: 100%;
-    display: block;
-    position: relative;
-    z-index: 0;
-    border-bottom: 1px solid var(--gray-6);
-    &.for-overflow {
-      display: none;
-    }
-  }
-
-  & .tooltip-space-overflow {
-    display: flex;
-    list-style: none;
-    overflow-x: scroll;
-    overflow-y: hidden;
-    margin-top: -100vw;
-    padding: 100vw 0;
-    width: 100%;
-    white-space: nowrap;
-    -webkit-overflow-scrolling: touch;
-  }
-
-  &[data-overflow='true'] {
-    & .bottom-border.default {
-      display: none;
-    }
-    & .bottom-border.for-overflow {
-      display: block;
-    }
-  }
-
-  & > .inner-wrapper {
-    position: relative;
-    margin-bottom: -1px;
-    z-index: 1;
-
-    & > .inner {
-      display: flex;
-      overflow: hidden;
-      overflow-x: scroll;
-      min-width: 100%;
-      -webkit-overflow-scrolling: touch;
-      scrollbar-width: none;
-      /* Restrict tooltip space overflow */
-      height: 65px;
-
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      & .content-container {
-        position: static;
-        flex-grow: 1;
-      }
-
-      &[data-overflow='true'] {
-        & .content-container {
-          max-width: none;
-          padding-left: 48px;
-          padding-right: 60px;
-        }
-      }
-    }
-
-    & > .arrow {
-      position: absolute;
-      top: 0;
-      bottom: 3px;
-      width: 56px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      user-select: none;
-      transition: opacity 0.6s;
-      opacity: 1;
-
-      &[data-invisible='true'] {
-        opacity: 0;
-      }
-
-      &[data-overflow='false'] {
-        display: none;
-      }
-
-      & svg {
-        display: block;
-        width: 20px;
-        height: 20px;
-        & [fill] {
-          fill: var(--gray-4);
-        }
-        & [stroke] {
-          stroke: var(--gray-4);
-        }
-      }
-
-      &:hover {
-        cursor: pointer;
-
-        & .g-svg svg {
-          & [fill] {
-            fill: var(--gray-1);
-          }
-          & [stroke] {
-            stroke: var(--gray-1);
-          }
-        }
-      }
-
-      &.prev {
-        left: 0;
-        background: linear-gradient(
-          90deg,
-          rgba(255, 255, 255, 1) 45.83%,
-          rgba(255, 255, 255, 0.855769) 59.37%,
-          rgba(255, 255, 255, 0) 100%
-        );
-
-        & svg {
-          transform: rotate(180deg);
-          margin-right: 20px;
-        }
-      }
-
-      &.next {
-        right: 0;
-        background: linear-gradient(
-          -90deg,
-          rgba(255, 255, 255, 1) 45.83%,
-          rgba(255, 255, 255, 0.855769) 59.37%,
-          rgba(255, 255, 255, 0) 100%
-        );
-
-        & svg {
-          margin-left: 20px;
-        }
-      }
-    }
-  }
-}

package/packages/tabs/style.css

@@ -1,67 +0,0 @@
-@import './partials/TabTriggers/style.css';
-
-.g-tabs {
-  &.consul {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--consul);
-    }
-  }
-
-  &.vault {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--vault);
-    }
-  }
-
-  &.terraform {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--terraform);
-    }
-  }
-
-  &.nomad {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--nomad);
-    }
-  }
-
-  &.packer {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--packer);
-    }
-  }
-
-  &.vagrant {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--vagrant);
-    }
-  }
-
-  &.boundary {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--boundary);
-    }
-  }
-
-  &.waypoint {
-    & .g-tab-triggers .active .inner {
-      border-bottom-color: var(--waypoint);
-    }
-  }
-}
-
-.g-tabs-full-border {
-  & .g-tab-triggers {
-    border-bottom: 1px solid var(--gray-6);
-
-    & .bottom-border {
-      display: none;
-    }
-  }
-}
-
-.g-tabs-centered {
-  & .tooltip-space-overflow {
-    justify-content: center;
-  }
-}