@hashicorp/react-components 0.0.0

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

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

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

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

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

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

@@ -0,0 +1,67 @@
+@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;
+  }
+}