@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/case-study-slider/index.js

@@ -1,229 +0,0 @@
-import React, { Component } from 'react'
-import Logo from './Logo'
-import StatusBar from './StatusBar'
-import marked from 'marked'
-import Button from '@hashicorp/react-button'
-import Image from '@hashicorp/react-image'
-import fragment from './fragment.graphql'
-
-class CaseStudySlider extends Component {
-  constructor(props) {
-    super(props)
-    this.data = this.props.data
-    const timing = this.props.timing ? parseInt(this.props.timing) : 10
-    this.state = {
-      active: 0,
-      timing: timing,
-      numFrames: this.data.caseStudies.length,
-      measure: true,
-      containerWidth: 0
-    }
-
-    this.frames = []
-
-    this.handleClick = this.handleClick.bind(this)
-    this.throttledResize = this.throttledResize.bind(this)
-    this.measureFrameSize = this.measureFrameSize.bind(this)
-    this.resetTimer = this.resetTimer.bind(this)
-    this.resizeTimeout = null
-  }
-
-  componentDidMount() {
-    if (this.state.numFrames > 1) {
-      this.timer = setInterval(() => this.tick(), this.state.timing * 1000)
-      this.measureFrameSize()
-    }
-    window.addEventListener('resize', this.throttledResize, false)
-  }
-
-  componentWillUnmount() {
-    clearInterval(this.timer)
-    window.removeEventListener('resize', this.throttledResize)
-  }
-
-  componentDidUpdate(prevProps, prevState) {
-    if (this.props.data !== prevProps.data) {
-      this.data = this.props.data
-      if (this.data.caseStudies.length != prevState.numFrames) {
-        this.setState(
-          {
-            numFrames: this.data.caseStudies.length,
-            measure: true
-          },
-          () => {
-            if (this.data.caseStudies.length === 1) {
-              clearInterval(this.timer)
-              window.removeEventListener('resize', this.throttledResize)
-            }
-          }
-        )
-      }
-      if (prevState.active > this.data.caseStudies.length - 1) {
-        this.setState({ active: 0 })
-      }
-    }
-
-    if (this.props.timing && parseInt(this.props.timing) != prevState.timing) {
-      this.setState(
-        {
-          timing: parseInt(this.props.timing),
-          active: 0
-        },
-        this.resetTimer
-      )
-    }
-    // If we're measuring on this update get the width
-    if (!prevState.measure && this.state.measure && this.state.numFrames > 1) {
-      this.measureFrameSize()
-    }
-  }
-
-  resetTimer() {
-    clearInterval(this.timer)
-    this.timer = setInterval(() => this.tick(), this.state.timing * 1000)
-  }
-
-  throttledResize() {
-    this.resizeTimeout && clearTimeout(this.resizeTimeout)
-    this.resizeTimeout = setTimeout(() => {
-      this.resizeTimeout = null
-      this.setState({ measure: true })
-    }, 250)
-  }
-
-  tick() {
-    const nextSlide =
-      this.state.active === this.state.numFrames - 1 ? 0 : this.state.active + 1
-    this.setState({ active: nextSlide })
-  }
-
-  handleClick(i) {
-    if (i === this.state.active) return
-    this.setState({ active: i }, this.resetTimer)
-  }
-
-  measureFrameSize() {
-    // All frames are the same size, so we measure the first one
-    if (this.frames[0]) {
-      const { width } = this.frames[0].getBoundingClientRect()
-      this.setState({
-        frameSize: width,
-        containerWidth: width * this.state.numFrames,
-        measure: false
-      })
-    }
-  }
-
-  render() {
-    // Clear our frames array so we don't keep old refs around
-    this.frames = []
-    const { caseStudies, brand } = this.data
-
-    const { measure, active, timing, numFrames, containerWidth } = this.state
-    const { dark } = this.props
-
-    const single = numFrames === 1
-
-    // Create inline styling for slide container
-    // If we're measuring, or have a single slide then no inline styles should be applied
-    const containerStyle =
-      measure || single
-        ? {}
-        : {
-            width: `${containerWidth}px`,
-            transform: `translateX(-${(containerWidth / numFrames) * active}px`
-          }
-
-    // Create inline styling to apply to each frame
-    // If we're measuring or have a single slide then no inline styles should be applied
-    const frameStyle =
-      measure || single ? {} : { float: 'left', width: `${100 / numFrames}%` }
-
-    return (
-      <div className="g-case-study-slider">
-        {!single && (
-          <div
-            className={`logo-bar-container${numFrames === 2 ? ' double' : ''}`}
-          >
-            {caseStudies.map(({ company }, i) => (
-              <div
-                className="logo-bar"
-                onClick={() => this.handleClick(i)}
-                key={company.monochromeLogo.url}
-              >
-                <div className="logo-container">
-                  <Logo dark={dark} image={company} />
-                </div>
-                <StatusBar
-                  dark={dark}
-                  active={active === i}
-                  timing={timing}
-                  brand={brand}
-                />
-              </div>
-            ))}
-          </div>
-        )}
-        <div className="case-study-container">
-          <div className="slider-container" style={containerStyle}>
-            {/* React pushes a null ref the first time, so we're filtering those out. */}
-            {/* see https://reactjs.org/docs/refs-and-the-dom.html#caveats-with-callback-refs */}
-            {caseStudies.map(caseStudy => {
-              const caseStudyLink =
-                caseStudy.caseStudyLink ||
-                `/resources/${caseStudy.caseStudyResource.slug}`
-              return (
-                <div
-                  className={`slider-frame${single ? ' single' : ''}`}
-                  style={frameStyle}
-                  ref={el => el && this.frames.push(el)}
-                  key={caseStudy.headline}
-                >
-                  <div className="case-study">
-                    <div className="feature-image">
-                      <a href={caseStudyLink}>
-                        <Image
-                          {...(caseStudy.caseStudyImage ||
-                            caseStudy.caseStudyResource.image)}
-                          aspectRatio={single ? [16, 10, 500] : [16, 9, 500]}
-                        />
-                      </a>
-                    </div>
-                    <div className="feature-content g-type-body">
-                      {single && (
-                        <div className="single-logo">
-                          <Logo dark={dark} image={caseStudy.company} />
-                        </div>
-                      )}
-                      <h3
-                        className="g-type-display-4"
-                        dangerouslySetInnerHTML={{
-                          __html: marked.inlineLexer(caseStudy.headline, [])
-                        }}
-                      />
-                      <p
-                        className="g-type-body"
-                        dangerouslySetInnerHTML={{
-                          __html: marked.inlineLexer(caseStudy.description, [])
-                        }}
-                      />
-                      <Button
-                        theme={dark ? 'light-outline' : 'dark-outline'}
-                        title={caseStudy.buttonLabel || 'Read Case Study'}
-                        url={caseStudyLink}
-                      />
-                    </div>
-                  </div>
-                </div>
-              )
-            })}
-          </div>
-        </div>
-      </div>
-    )
-  }
-}
-
-CaseStudySlider.fragmentSpec = { fragment, dependencies: [Image] }
-
-export default CaseStudySlider

package/packages/case-study-slider/index.test.js

@@ -1,279 +0,0 @@
-import { render } from '@testing-library/react'
-import CaseStudySlider from './'
-import props from './props'
-import { getTestValues } from 'swingset/testing'
-
-const defaultProps = getTestValues(props)
-
-describe('<CaseStudySlider />', () => {
-  test('renders properly', () => {
-    const { container } = render(<CaseStudySlider {...defaultProps} />)
-    const rootElem = container.firstChild
-    expect(rootElem).toHaveClass('g-case-study-slider')
-  })
-
-  test('should render the appropriate number of frames and logos', () => {
-    const { container } = render(<CaseStudySlider {...defaultProps} />)
-    const rootElem = container.firstChild
-    const numStudies = defaultProps.data.caseStudies.length
-
-    expect(rootElem.querySelectorAll('.slider-frame').length).toEqual(
-      numStudies
-    )
-    if (numStudies > 1) {
-      expect(rootElem.querySelectorAll('.progress-bar').length).toEqual(
-        numStudies
-      )
-    } else {
-      expect(rootElem.querySelector('.progress-bar').exists()).toEqual(false)
-    }
-  })
-
-  test('should adapt the button to the theme', () => {
-    const darkElem = render(<CaseStudySlider {...defaultProps} dark={true} />)
-      .container.firstChild
-    expect(darkElem.querySelector('.g-btn')).toHaveClass('background-dark')
-
-    const lightElem = render(<CaseStudySlider {...defaultProps} dark={false} />)
-      .container.firstChild
-    expect(lightElem.querySelector('.g-btn')).toHaveClass('background-light')
-  })
-
-  test('should use provided custom button label', () => {
-    const { container } = render(<CaseStudySlider {...defaultProps} />)
-    const rootElem = container.firstChild
-
-    expect(rootElem.querySelector('.g-btn')).toHaveTextContent('Custom Label')
-    expect(rootElem.querySelectorAll('.g-btn')[1]).toHaveTextContent(
-      'Read Case Study'
-    )
-  })
-
-  test('should add class `single` to `slider-frame` when there is only 1 frame', () => {
-    const { container } = render(
-      <CaseStudySlider
-        {...defaultProps}
-        data={{
-          ...defaultProps.data,
-          caseStudies: defaultProps.data.caseStudies.slice(0, 1),
-        }}
-      />
-    )
-
-    const rootElem = container.firstChild
-
-    expect(rootElem.querySelector('.slider-frame')).toHaveClass('single')
-  })
-
-  test('should add class `double` to `logo-bar-container` when there are only 2 frames', () => {
-    const { container } = render(
-      <CaseStudySlider
-        {...defaultProps}
-        data={{
-          ...defaultProps.data,
-          caseStudies: defaultProps.data.caseStudies.slice(0, 2),
-        }}
-      />
-    )
-
-    const rootElem = container.firstChild
-    expect(rootElem.querySelector('.logo-bar-container')).toHaveClass('double')
-  })
-})
-
-// TODO Add these Enzyme/Sinon-centric tests back
-
-// test('default timing should be 10', () => {
-//   expect(render(<CaseStudySlider {...defaultProps} timing={undefined} />).state('timing')).toEqual(10)
-// })
-
-// test('should be able to reparse data changes', async () => {
-//   const rootElem = render(<CaseStudySlider {...defaultProps} />)
-//   expect(rootElem.state('numFrames')).toEqual(data.caseStudies.length)
-
-//   // when data doesn't change, don't do anything
-//   rootElem.setProps({ data })
-//   expect(rootElem.state('numFrames')).toEqual(data.caseStudies.length)
-
-//   // when data changes, update the state
-//   data = { ...defaultProps.data, caseStudies: [data.caseStudies[0]] }
-//   rootElem.setProps({ data })
-//   expect(rootElem.state('numFrames')).toEqual(data.caseStudies.length)
-// })
-
-// test('should be able to reparse a changing timing prop', async () => {
-//   let timing = defaultProps.timing
-//   const wrapper = render(<CaseStudySlider {...defaultProps} />)
-//   expect(wrapper.state('timing')).toEqual(timing)
-
-//   timing++
-//   wrapper.setProps({ timing })
-//   await sleep(100)
-//   expect(wrapper.state('timing')).toEqual(timing)
-// })
-
-// test('should advance the active slide, cycling at the end, on calls to tick()', async () => {
-//   const wrapper = render(<CaseStudySlider {...defaultProps} />)
-//   const frames = defaultProps.data.caseStudies
-
-//   for (let i = 0; i < frames.length - 1; i++) {
-//     wrapper.instance().tick()
-//     await sleep(100)
-//     expect(wrapper.state('active')).toEqual(i + 1)
-//   }
-
-//   wrapper.instance().tick()
-//   await sleep(100)
-//   expect(wrapper.state('active')).toEqual(0)
-// })
-
-// test('should reset the active slide state when the new data has less frames', async () => {
-//   const wrapper = render(<CaseStudySlider {...defaultProps} />)
-//   wrapper.setState({ active: 2 })
-
-//   data = { ...data, caseStudies: [data.caseStudies[0]] }
-//   wrapper.setProps({ data })
-//   expect(wrapper.state('numFrames')).toEqual(data.caseStudies.length)
-
-//   await sleep(100)
-//   expect(wrapper.state('active')).toEqual(0)
-// })
-
-//  test('should use different image aspect ratios for singles', () => {
-//   expect(
-//     render(<CaseStudySlider {...defaultProps} />)
-//       .find(Image)
-//       .first()
-//       .prop('aspectRatio')
-//   ).toEqual('16,10,500')
-// })
-
-// test('should use different image aspect ratios for singles', () => {
-//   expect(
-//     render(<CaseStudySlider {...defaultProps} />)
-//       .find(Image)
-//       .first()
-//       .prop('aspectRatio')
-//   ).toEqual('16,9,500')
-// })
-
-// test('should use custom image alt when provided new image node', () => {
-//   expect(
-//     renderDeep(<CaseStudySlider {...defaultProps}  />)
-//       .find('img')
-//       .first()
-//       .render()
-//       .attr('alt')
-//   ).toEqual('Case Study image override')
-// })
-
-// testComponent(
-//   () => CaseStudySlider,
-//   { sets: [], props: defaultProps },
-//   ({ render, testTagAndClass, propValue, sinon }) => {
-//     testTagAndClass('div', 'g-case-study-slider')
-
-//     it('should clean up before it unmounts', () => {
-//       const clock = sinon.useFakeTimers()
-//       const stub = sinon.stub(clock, 'clearInterval')
-//       const wrapper = render()
-//       wrapper.unmount()
-//       expect(stub).to.have.been.calledOnce
-//     })
-
-//     it('should call the right functions when a logo is clicked', () => {
-//       const handleClickStub = sinon.stub(
-//         CaseStudySlider.prototype,
-//         'handleClick'
-//       )
-
-//       const wrapper = render({ handleClick: handleClickStub })
-
-//       wrapper
-//         .find('.logo-bar-container')
-//         .find('.logo-bar')
-//         .first()
-//         .simulate('click')
-//       expect(handleClickStub).to.have.been.calledOnce
-//     })
-
-//     it('should call tick() event %timing% if there is more than one case study', () => {
-//       const clock = sinon.useFakeTimers()
-//       const tickStub = sinon.stub(CaseStudySlider.prototype, 'tick')
-//       render()
-//       clock.runToLast()
-//       expect(tickStub).to.have.been.calledOnce
-//     })
-
-//     it('should reset the timer on resetTimer()', () => {
-//       const clock = sinon.useFakeTimers()
-//       const clearIntervalStub = sinon.stub(clock, 'clearInterval')
-//       const tickStub = sinon.stub(CaseStudySlider.prototype, 'tick')
-//       const wrapper = render()
-//       wrapper.instance().timer = 1234
-//       wrapper.instance().resetTimer()
-//       clock.runToLast()
-//       expect(clearIntervalStub).to.have.been.calledWith(1234)
-//       expect(tickStub).to.have.been.called
-//     })
-
-//     it('should throttle calls to throttledResize()', () => {
-//       const clock = sinon.useFakeTimers()
-//       const setTimeoutSpy = sinon.spy(clock, 'setTimeout')
-//       const clearTimeoutStub = sinon.stub(clock, 'clearTimeout')
-//       const wrapper = render()
-
-//       // test initial call
-//       wrapper.instance().throttledResize()
-//       expect(setTimeoutSpy).to.have.been.called
-//       expect(clearTimeoutStub).to.not.have.been.called
-
-//       // test debounced calls
-//       setTimeoutSpy.resetHistory()
-//       wrapper.instance().throttledResize()
-//       expect(clearTimeoutStub).to.have.been.called
-//       expect(setTimeoutSpy).to.have.been.called
-
-//       // test timer callback
-//       expect(wrapper.instance().resizeTimeout).to.be.a('number')
-//       clock.runToLast()
-//       wrapper.rerender()
-//       expect(wrapper.instance().resizeTimeout).to.equal(null)
-//       expect(wrapper.state('measure')).to.equal(true)
-//     })
-
-//     it('should handle clicks when a different logo is pressed, restting the timer too', async () => {
-//       const resetTimerStub = sinon.stub(CaseStudySlider.prototype, 'resetTimer')
-//       const wrapper = render()
-
-//       wrapper.setState({ active: 1 })
-//       wrapper.instance().handleClick(1)
-//       await sleep(100)
-//       expect(resetTimerStub).to.not.have.been.called
-
-//       wrapper.instance().handleClick(2)
-//       await sleep(100)
-//       expect(wrapper.state('active')).to.equal(2)
-//       expect(resetTimerStub).to.have.been.calledOnce
-//     })
-
-//     it('should call measureFrameSize when measure is true', async () => {
-//       const measureFrameSizeStub = sinon.stub(
-//         CaseStudySlider.prototype,
-//         'measureFrameSize'
-//       )
-//       const wrapper = render()
-//       expect(measureFrameSizeStub).to.have.been.calledOnce
-//       measureFrameSizeStub.resetHistory()
-//       await sleep(100)
-
-//       wrapper.setState({ measure: false })
-//       expect(measureFrameSizeStub).to.not.have.been.calledOnce
-//       measureFrameSizeStub.resetHistory()
-//       await sleep(100)
-
-//       wrapper.setState({ measure: true })
-//       expect(measureFrameSizeStub).to.have.been.calledOnce
-//     })
-//   }
-// )

package/packages/case-study-slider/package-lock.json

@@ -1,72 +0,0 @@
-{
-  "name": "@hashicorp/react-case-study-slider",
-  "version": "3.0.3",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@hashicorp/react-button": {
-      "version": "2.2.4",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.2.4.tgz",
-      "integrity": "sha512-jEjoN31nAI9K/4FDkUORjRhRHsH8rFIukR15wTmL72x7T0fZiBzNkB4OBAnLh2HQExLPKJzTGv+RaepJgQru/Q==",
-      "requires": {
-        "@hashicorp/react-global-styles": "^4.4.2",
-        "@hashicorp/react-inline-svg": "^1.0.2",
-        "slugify": "^1.3.6"
-      }
-    },
-    "@hashicorp/react-global-styles": {
-      "version": "4.4.2",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-global-styles/-/react-global-styles-4.4.2.tgz",
-      "integrity": "sha512-EprEFwymJJbrbIQmzMCODM6eYwew2OsgVa9EtWNE984/KFk71QWvbjKVjebqNB0vWdpwSt6+127kfOQsx8JolA=="
-    },
-    "@hashicorp/react-image": {
-      "version": "2.0.3",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-image/-/react-image-2.0.3.tgz",
-      "integrity": "sha512-au1X6xUVG/Oad2MUAzJzCbzPi/Rcq/uhaVRrcDjaLya2wUaL5gS/aJVDwLRtV26qqjI81BVmz4gH6Lfpc4T1eQ==",
-      "requires": {
-        "object-assign": "^4.1.1",
-        "query-string": "5.1.1"
-      }
-    },
-    "@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=="
-    },
-    "decode-uri-component": {
-      "version": "0.2.0",
-      "resolved": "https://registry.npmjs.org/decode-uri-component/-/decode-uri-component-0.2.0.tgz",
-      "integrity": "sha1-6zkTMzRYd1y4TNGh+uBiEGu4dUU="
-    },
-    "marked": {
-      "version": "0.7.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-0.7.0.tgz",
-      "integrity": "sha512-c+yYdCZJQrsRjTPhUx7VKkApw9bwDkNbHUKo1ovgcfDjb2kc8rLuRbIFyXL5WOEUwzSSKo3IXpph2K6DqB/KZg=="
-    },
-    "object-assign": {
-      "version": "4.1.1",
-      "resolved": "https://registry.npmjs.org/object-assign/-/object-assign-4.1.1.tgz",
-      "integrity": "sha1-IQmtx5ZYh8/AXLvUQsrIv7s2CGM="
-    },
-    "query-string": {
-      "version": "5.1.1",
-      "resolved": "https://registry.npmjs.org/query-string/-/query-string-5.1.1.tgz",
-      "integrity": "sha512-gjWOsm2SoGlgLEdAGt7a6slVOk9mGiXmPFMqrEhLQ68rhQuBnpfs3+EmlvqKyxnCo9/PPlF+9MtY02S1aFg+Jw==",
-      "requires": {
-        "decode-uri-component": "^0.2.0",
-        "object-assign": "^4.1.0",
-        "strict-uri-encode": "^1.0.0"
-      }
-    },
-    "slugify": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
-      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
-    },
-    "strict-uri-encode": {
-      "version": "1.1.0",
-      "resolved": "https://registry.npmjs.org/strict-uri-encode/-/strict-uri-encode-1.1.0.tgz",
-      "integrity": "sha1-J5siXfHVgrH1TmWt3UNS4Y+qBxM="
-    }
-  }
-}

package/packages/case-study-slider/package.json

@@ -1,20 +0,0 @@
-{
-  "name": "@hashicorp/react-case-study-slider",
-  "description": "displays up to three case studies",
-  "version": "3.0.3",
-  "author": "HashiCorp",
-  "contributors": [
-    "Mike Wickett"
-  ],
-  "dependencies": {
-    "@hashicorp/react-button": "^2.2.4",
-    "@hashicorp/react-image": "^2.0.3",
-    "marked": "^0.7.0"
-  },
-  "peerDependencies": {
-    "react": "^16.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  }
-}