@hashicorp/react-components 0.0.0

package/packages/hero/carousel.js

@@ -0,0 +1,153 @@
+import { Component } from 'react'
+
+export default class HeroCarousel extends Component {
+  constructor(props) {
+    super(props)
+
+    this.state = {
+      active: null,
+      deactivating: null,
+    }
+  }
+
+  switchToVideo(index) {
+    // if switching to already active item, return out
+    if (this.state.active === index) return
+
+    // deactivate currently active item
+    this.setState({
+      deactivating: this.state.active,
+    })
+
+    // after deactivation animation finishes
+    setTimeout(() => {
+      // reset videos
+      const video = this.videos[this.state.active]
+      video.currentTime = 0
+      video.pause()
+
+      // play next video
+      this.initVideo(index)
+    }, 750)
+  }
+
+  initVideo(index) {
+    const video = this.videos[index]
+    const bar = this.progressBars[index]
+
+    this.setState({
+      active: index,
+      deactivating: null,
+    })
+
+    // set video playback rate
+    video.playbackRate = this.props.videos[index].playbackRate || 1
+
+    // play video
+    this.playVideo(video)
+
+    // sync playback bars to video.currentTime
+    setInterval(() => {
+      if (!isNaN(video.duration)) {
+        bar.style.width = `${(video.currentTime / video.duration) * 100}%`
+      }
+    }, 200)
+  }
+
+  playVideo(video) {
+    const promise = video.play()
+
+    if (promise !== undefined) {
+      promise
+        .then(() => {
+          // video successfully played, controls won't be necessary
+          video.removeAttribute('controls')
+        })
+        .catch((error) => {
+          // video play failed, make sure users have controls
+          video.setAttribute('controls', true)
+          /* eslint-disable-next-line no-console */
+          console.log('video autoplay failed: ', error)
+        })
+    }
+  }
+
+  componentDidMount() {
+    require('promise-polyfill').default
+    this.initVideo(0)
+  }
+
+  render() {
+    const videos = this.props.videos
+
+    this.videoWrappers = []
+    this.videos = []
+    this.progressBars = []
+
+    return (
+      <div className="carousel">
+        <div className="videos">
+          {videos.map((video, i) => (
+            <div
+              key={video.name}
+              className={`video-wrapper${
+                this.state.active === i ? ' is-active' : ''
+              }${this.state.deactivating === i ? ' is-deactivating' : ''}`}
+              ref={(el) => el !== null && this.videoWrappers.push(el)}
+            >
+              <div className="bar">
+                <span />
+                <span />
+                <span />
+              </div>
+              <div className={`video ${video.name.toLowerCase()}`}>
+                <video
+                  muted
+                  playsInline
+                  ref={(el) => el !== null && this.videos.push(el)}
+                  onEnded={() => {
+                    this.switchToVideo(
+                      i < this.props.videos.length - 1 ? i + 1 : 0
+                    )
+                  }}
+                >
+                  {video.src.map(
+                    (src) =>
+                      typeof src.url != 'undefined' &&
+                      src.url != '' && (
+                        <source
+                          key={src.url}
+                          src={src.url}
+                          type={`video/${src.srcType}`}
+                        />
+                      )
+                  )}
+                </video>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className="controls g-type-buttons-and-standalone-links">
+          {videos.map((control, index) => (
+            <div
+              className="control"
+              key={control.name || index}
+              onClick={() => {
+                this.switchToVideo(index)
+              }}
+            >
+              <div className="control-hover">
+                {control.name ? control.name : ''}
+                <div className="progress-bar">
+                  <span
+                    ref={(el) => el !== null && this.progressBars.push(el)}
+                  />
+                </div>
+              </div>
+            </div>
+          ))}
+        </div>
+      </div>
+    )
+  }
+}

package/packages/hero/fragment.graphql

@@ -0,0 +1,55 @@
+fragment heroFields on HeroSectionRecord {
+  id
+  _modelApiKey
+  videos {
+    id
+    name
+    src {
+      url
+      srcType
+    }
+    playbackRate
+  }
+  image {
+    url
+    alt
+    size
+  }
+  title
+  titleLogo {
+    url
+    alt
+    height
+    format
+    id
+    size
+    title
+    width
+  }
+  alert {
+    ...alertFields
+  }
+  description
+  centered
+  backgroundTheme
+  backgroundImage {
+    width
+    size
+    url
+    alt
+  }
+  buttons {
+    id
+    title
+    position
+    external
+    url
+  }
+  formLeadInput {
+    destinationUrl
+    buttonText
+  }
+  helpText
+  smallTextTag
+  theme
+}

package/packages/hero/heroLeadForm.js

@@ -0,0 +1,107 @@
+import { useState, useEffect } from 'react'
+import { Formik, Field } from 'formik'
+import Button from '@hashicorp/react-button'
+import TextInput from '@hashicorp/react-text-input'
+import queryString from 'query-string'
+
+const EMAIL_STORAGE_KEY = 'prevVal_emailValue'
+
+function HeroLeadForm(props) {
+  const [storedEmail, setStoredEmail] = useState('')
+  const [submitStatus, setSubmitStatus] = useState(false)
+
+  //  On mount only, try to retrieve a stored email
+  useEffect(() => {
+    require('@hashicorp/localstorage-polyfill/dist')
+    let retrievedEmail = window.localStorage.getItem(EMAIL_STORAGE_KEY)
+    if (retrievedEmail !== null) setStoredEmail(retrievedEmail)
+  }, [])
+
+  //  Submit function for use with Formik
+  async function handleSubmit(values, formikBag) {
+    const { submitRedirectUrl } = props
+    const { setSubmitting } = formikBag
+    setSubmitting(true)
+
+    // Save submitted email for future use in other forms
+    // (Note: done here rather than after onChange to ensure privacy consent)
+    window.localStorage.setItem(EMAIL_STORAGE_KEY, values.email)
+
+    setSubmitting(false)
+
+    setSubmitStatus(true)
+
+    // Submission redirects the user to the appropriate form page where the values will be plucked & placed in field from the query string we set here
+    if (window && submitRedirectUrl) {
+      window.location = `${submitRedirectUrl}?${queryString.stringify(values, {
+        encode: true,
+      })}`
+    }
+  }
+
+  const { placeholder, buttonText, theme } = props
+  return (
+    <Formik
+      enableReinitialize={true}
+      initialValues={{ email: storedEmail }}
+      validate={validate}
+      onSubmit={handleSubmit}
+    >
+      {(formikProps) => (
+        <form
+          onSubmit={formikProps.handleSubmit}
+          data-submitting={(!!formikProps.isSubmitting).toString()}
+          data-submitted={(!!submitStatus).toString()}
+        >
+          <div className="form-elements">
+            <div className="inputs">
+              <Field
+                type="email"
+                name="email"
+                component={TextInput}
+                placeholder={placeholder}
+                theme={theme}
+              />
+            </div>
+            <Button
+              type="submit"
+              onClick={formikProps.submitForm}
+              disabled={formikProps.isSubmitting}
+              title={buttonText}
+              theme={{
+                brand: theme.brand || 'hashicorp',
+                variant: theme.variant || 'primary',
+                background: theme.background || 'light',
+              }}
+            />
+          </div>
+        </form>
+      )}
+    </Formik>
+  )
+}
+
+function validate(values) {
+  let errors = {}
+  if (!values.email || isValidEmail(values.email)) {
+    errors.email = 'Please enter a valid email address.'
+  }
+  return errors
+}
+
+function isValidEmail(string) {
+  return !/^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i.test(string)
+}
+
+HeroLeadForm.defaultProps = {
+  placeholder: 'Enter work email',
+  buttonText: 'Submit',
+  submitRedirectUrl: 'https://www.hashicorp.com/contact/general',
+  theme: {
+    background: 'light',
+    brand: 'hashicorp',
+    variant: 'primary',
+  },
+}
+
+export default HeroLeadForm

package/packages/hero/index.js

@@ -0,0 +1,129 @@
+import marked from 'marked'
+import Image from '@hashicorp/react-image'
+import Alert from '@hashicorp/react-alert'
+import Button from '@hashicorp/react-button'
+import { eliminateOrphans } from '@hashicorp/js-utils'
+import VideoCarousel from './carousel'
+import ArrowIcon from './arrow-icon'
+import HeroLeadForm from './heroLeadForm'
+import fragment from './fragment.graphql'
+
+const normalizeThemeBrand = {
+  'vagrant-blue': 'hashicorp',
+  'terraform-purple': 'terraform',
+  'vault-gray': 'vault',
+  'consul-pink': 'consul',
+  'nomad-green': 'nomad',
+}
+
+function Hero({ data, centered, gaPrefix }) {
+  const hasVideos = data.videos && data.videos.length > 0
+  const backgroundTheme = data.backgroundTheme || 'dark'
+  const h1OrphanCount = 9
+
+  return (
+    <div
+      className={`g-hero ${data.theme || ''} ${backgroundTheme} ${
+        centered || data.centered ? 'centered' : ''
+      } ${hasVideos ? 'has-videos' : ''}`}
+    >
+      {data.backgroundImage && (
+        <Image className="bg" {...data.backgroundImage} />
+      )}
+      <div className="g-container">
+        <div className="headline">
+          {data.smallTextTag && <div className="tag">{data.smallTextTag}</div>}
+          {data.titleLogo && <Image className="logo" {...data.titleLogo} />}
+          {data.alert && (
+            <Alert
+              url={data.alert.url}
+              tag={data.alert.tag}
+              tagColor={data.alert.tagColor}
+              text={data.alert.text}
+            />
+          )}
+          {data.title && (
+            <h1
+              className="g-type-display-1"
+              dangerouslySetInnerHTML={{
+                __html: eliminateOrphans(
+                  marked.inlineLexer(data.title, []),
+                  h1OrphanCount
+                ),
+              }}
+            />
+          )}
+          {data.description && (
+            <p
+              className="g-type-body-large"
+              dangerouslySetInnerHTML={{
+                __html: eliminateOrphans(
+                  marked.inlineLexer(data.description, [])
+                ),
+              }}
+            />
+          )}
+          {data.formLeadInput && (
+            <div className="form-lead">
+              <HeroLeadForm
+                submitRedirectUrl={data.formLeadInput.destinationUrl}
+                buttonText={data.formLeadInput.buttonText}
+                theme={{
+                  background: backgroundTheme,
+                  brand: normalizeThemeBrand[data.theme],
+                  variant: 'primary',
+                }}
+              />
+            </div>
+          )}
+          {!data.formLeadInput && data.buttons && data.buttons.length > 0 && (
+            <div className="buttons">
+              {data.buttons.map((button, idx) => {
+                if (gaPrefix) button.gaPrefix = gaPrefix
+                return (
+                  <Button
+                    key={button.title}
+                    {...button}
+                    theme={{
+                      brand:
+                        idx === 0
+                          ? normalizeThemeBrand[data.theme] || 'hashicorp'
+                          : 'neutral',
+                      variant: idx === 0 ? 'primary' : 'secondary',
+                      background:
+                        idx === 0
+                          ? 'light'
+                          : normalizeThemeBrand[data.theme]
+                          ? backgroundTheme
+                          : 'dark',
+                    }}
+                  />
+                )
+              })}
+            </div>
+          )}
+          {data.helpText && (
+            <div className="help-text g-type-buttons-and-standalone-links">
+              <div
+                dangerouslySetInnerHTML={{ __html: marked(data.helpText) }}
+              />
+              <ArrowIcon />
+            </div>
+          )}
+        </div>
+        {data.image && (
+          <div className="image">
+            <Image {...data.image} />
+          </div>
+        )}
+        {!data.image && data.videos && data.videos.length > 0 && (
+          <VideoCarousel videos={data.videos} />
+        )}
+      </div>
+    </div>
+  )
+}
+
+Hero.fragmentSpec = { fragment, dependencies: [Alert] }
+
+export default Hero