@hashicorp/react-components 0.0.0 → 1.0.1

package/packages/hero/carousel.js

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

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

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

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