@hashicorp/react-components 0.0.0

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

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

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

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

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