@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/featured-slider/index.js

@@ -1,231 +0,0 @@
-import { Component } from 'react'
-import StatusBar from './StatusBar'
-import Button from '@hashicorp/react-button'
-import Image from '@hashicorp/react-image'
-
-export default class FeaturedSlider extends Component {
-  constructor(props) {
-    super(props)
-    const timing = this.props.timing ? parseInt(this.props.timing) : 10
-    this.state = {
-      active: 0,
-      timing: timing,
-      numFrames: this.props.features.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.features !== prevProps.features) {
-      if (this.props.features.length != prevState.numFrames) {
-        this.setState(
-          {
-            numFrames: this.props.features.length,
-            measure: true,
-          },
-          () => {
-            if (this.props.features.length === 1) {
-              clearInterval(this.timer)
-              window.removeEventListener('resize', this.throttledResize)
-            }
-          }
-        )
-      }
-      if (prevState.active > this.props.features.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(x) {
-    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 { heading, theme, brand, features } = this.props
-    const { measure, active, timing, numFrames, containerWidth } = this.state
-
-    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 (
-      <section
-        className={`g-featured-slider-section theme-${theme ? theme : 'dark'}`}
-      >
-        <div className="g-grid-container">
-          <h2 className="g-type-display-2">{heading}</h2>
-
-          <div className="g-featured-slider">
-            {!single && (
-              <div
-                className={`logo-bar-container${
-                  numFrames === 2 ? ' double' : ''
-                }`}
-              >
-                {features.map((feature, i) => (
-                  <div
-                    className="logo-bar"
-                    onClick={() => this.handleClick(i)}
-                    key={feature.logo.url}
-                  >
-                    <div className="logo-container">
-                      <Image url={feature.logo.url} alt={feature.logo.alt} />
-                    </div>
-                    <StatusBar
-                      theme={theme}
-                      active={active === i}
-                      timing={timing}
-                      brand={brand}
-                    />
-                  </div>
-                ))}
-              </div>
-            )}
-            <div className="feature-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 */}
-                {features.map((feature) => (
-                  <div
-                    className={`slider-frame${single ? ' single' : ''}`}
-                    style={frameStyle}
-                    ref={(el) => el && this.frames.push(el)}
-                    key={feature.heading}
-                  >
-                    <div className="feature">
-                      <div className="feature-image">
-                        <a href={feature.link.url}>
-                          <Image
-                            url={feature.image.url}
-                            alt={feature.image.alt}
-                            aspectRatio={single ? [16, 10, 500] : [16, 9, 500]}
-                          />
-                        </a>
-                      </div>
-                      <div className="feature-content g-type-body">
-                        {single && (
-                          <div className="single-logo">
-                            <Image
-                              url={feature.logo.url}
-                              alt={feature.logo.alt}
-                            />
-                          </div>
-                        )}
-                        <h3
-                          className="g-type-display-4"
-                          dangerouslySetInnerHTML={{
-                            __html: feature.heading,
-                          }}
-                        />
-                        <p
-                          className="g-type-body"
-                          dangerouslySetInnerHTML={{
-                            __html: feature.content,
-                          }}
-                        />
-                        <Button
-                          theme={{
-                            brand,
-                            variant: 'secondary',
-                            background: theme,
-                          }}
-                          linkType={feature.link.type}
-                          title={feature.link.text}
-                          url={feature.link.url}
-                        />
-                      </div>
-                    </div>
-                  </div>
-                ))}
-              </div>
-            </div>
-          </div>
-        </div>
-      </section>
-    )
-  }
-}

package/packages/featured-slider/index.test.js

@@ -1,59 +0,0 @@
-import { render } from '@testing-library/react'
-import FeaturedSlider from './'
-
-const propsBase = {
-  heading: 'Use Cases',
-  theme: 'dark',
-  brand: 'nomad',
-  features: [
-    {
-      logo: {
-        url: 'https://www.datocms-assets.com/2885/1582161366-deluxe-logo.svg',
-        alt: 'Deluxe',
-      },
-      image: {
-        url:
-          'https://www.nomadproject.io/_next/static/images/deluxe-4e1ac6e68d5d4f30f3c3ed20cf03f308.png?fit=crop&fm=webp&h=843.75&q=80&w=1500',
-        alt: 'Deluxe Case Study',
-      },
-      heading: 'Deluxe',
-      content:
-        'Disrupt the traditional media supply chain with a digital platform powered by Nomad, Consul and Vault.',
-      link: {
-        text: 'Learn More',
-        url:
-          'https://www.hashicorp.com/resources/deluxe-hashistack-video-production',
-        type: 'outbound',
-      },
-    },
-    {
-      logo: {
-        url: 'https://www.datocms-assets.com/2885/1582161581-seatgeek.svg',
-        alt: 'SeatGeek',
-      },
-      image: {
-        url:
-          'https://www.nomadproject.io/_next/static/images/seatgeek-d3f29290e414b2935a5a047e09321596.png?fit=crop&fm=webp&h=843.75&q=80&w=1500',
-        alt: 'Seat Geek Case Study',
-      },
-      heading: 'SeatGeek',
-      content:
-        'A team of 5 engineers built a infrastructure platform with Nomad, Consul, and Vault to provide tickets to millions of customers.',
-      link: {
-        text: 'Learn More',
-        url:
-          'https://www.hashicorp.com/resources/seatgeek-and-the-hashistack-a-tooling-and-automation-love-story',
-        type: 'outbound',
-      },
-    },
-  ],
-}
-
-describe('<FeaturedSlider />', () => {
-  it('should render a `.g-featured-slider-section` root element', () => {
-    const { container } = render(<FeaturedSlider {...propsBase} />)
-    const rootElem = container.firstChild
-    expect(rootElem.tagName).toBe('SECTION')
-    expect(rootElem).toHaveClass('g-featured-slider-section')
-  })
-})

package/packages/featured-slider/package-lock.json

@@ -1,66 +0,0 @@
-{
-  "name": "@hashicorp/react-featured-slider",
-  "version": "1.1.10",
-  "lockfileVersion": 1,
-  "requires": true,
-  "dependencies": {
-    "@hashicorp/react-button": {
-      "version": "2.3.0",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-button/-/react-button-2.3.0.tgz",
-      "integrity": "sha512-1C6V8OxadkdDAkwgItDfNxx7ns9EB6znK39V94RBiPvElmsNLCEG7zujcQX71V2n+HMSv1JPgDvXp4WLICzK+Q==",
-      "requires": {
-        "@hashicorp/react-inline-svg": "^1.0.0",
-        "slugify": "^1.3.6"
-      }
-    },
-    "@hashicorp/react-image": {
-      "version": "2.0.4",
-      "resolved": "https://registry.npmjs.org/@hashicorp/react-image/-/react-image-2.0.4.tgz",
-      "integrity": "sha512-rJCx74lxQE9l9LpFhlxSjQ0yjrzjce5uzEGmMgPvMsNiQtgetjNyeg1p5N8k7xRGYXNapt8uY2kZiE69OyL9cQ==",
-      "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": "1.0.0",
-      "resolved": "https://registry.npmjs.org/marked/-/marked-1.0.0.tgz",
-      "integrity": "sha512-Wo+L1pWTVibfrSr+TTtMuiMfNzmZWiOPeO7rZsQUY5bgsxpHesBEcIWJloWVTFnrMXnf/TL30eTFSGJddmQAng=="
-    },
-    "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/featured-slider/package.json

@@ -1,22 +0,0 @@
-{
-  "name": "@hashicorp/react-featured-slider",
-  "description": "featured slider for case studies",
-  "version": "1.1.10",
-  "author": "HashiCorp",
-  "contributors": [
-    "Nicole Forrester"
-  ],
-  "main": "index.js",
-  "license": "MPL-2.0",
-  "peerDependencies": {
-    "react": "^16.9.0"
-  },
-  "publishConfig": {
-    "access": "public"
-  },
-  "dependencies": {
-    "@hashicorp/react-button": "^2.2.6",
-    "@hashicorp/react-image": "^2.0.3",
-    "marked": "^1.0.0"
-  }
-}

package/packages/featured-slider/props.js

@@ -1,82 +0,0 @@
-const image = {
-  url: {
-    type: 'string',
-    description: 'url of the image',
-  },
-  alt: {
-    type: 'string',
-    description: 'alt text for the image',
-  },
-  format: {
-    type: 'string',
-    description: 'format of the image, like "jpg" or "svg"',
-  },
-}
-
-module.exports = {
-  heading: {
-    type: 'string',
-    description: 'text displayed in the primary heading',
-    control: { type: 'text' },
-  },
-  theme: {
-    type: 'string',
-    description:
-      'used to control whether the component appears on a light or dark background',
-    control: { type: 'select' },
-    options: ['light', 'dark'],
-  },
-  brand: {
-    type: 'string',
-    description: 'product-centric brand accents, if necessary',
-    control: { type: 'select' },
-    options: [
-      'hashicorp',
-      'terraform',
-      'vault',
-      'consul',
-      'nomad',
-      'packer',
-      'vagrant',
-    ],
-  },
-  features: {
-    type: 'array',
-    description: 'The actual "features" rendered by the component',
-    properties: [
-      {
-        type: 'object',
-        properties: {
-          heading: { type: 'string', description: 'title of the feature' },
-          content: {
-            type: 'string',
-            description: 'text content of the feature, html accepted',
-          },
-          logo: {
-            type: 'object',
-            description: 'company logo',
-            properties: image,
-          },
-          image: {
-            type: 'object',
-            description: 'featured image',
-            properties: image,
-          },
-          link: {
-            type: 'object',
-            description: 'controls a link to a resource with further details',
-            properties: {
-              text: { type: 'string', description: 'link text' },
-              url: { type: 'string', description: 'link url' },
-              type: {
-                type: 'string',
-                description: 'link type',
-                options: ['internal', 'external', 'anchor'],
-              },
-            },
-          },
-        },
-      },
-    ],
-  },
-}

package/packages/featured-slider/style.css

@@ -1,204 +0,0 @@
-.g-featured-slider-section {
-  padding-top: 128px;
-  padding-bottom: 128px;
-
-  & h2 {
-    margin-top: 0px;
-    text-align: center;
-  }
-
-  &.theme-light {
-    background: var(--white);
-    color: var(--black);
-
-    & h2 {
-      color: var(--black);
-    }
-  }
-
-  &.theme-dark {
-    background: var(--black);
-    color: var(--white);
-
-    & h2 {
-      color: var(--white);
-    }
-  }
-}
-
-.g-featured-slider {
-  & .logo-bar-container {
-    display: flex;
-    padding: 32px 0;
-    align-items: center;
-    justify-content: center;
-
-    & .logo-bar {
-      flex-basis: 33.333%;
-      cursor: pointer;
-      position: relative;
-      transition: transform 0.2s ease;
-      margin-right: 32px;
-
-      &:last-child {
-        margin-right: 0;
-      }
-
-      & .logo-container {
-        height: 84px;
-        text-align: center;
-        display: flex;
-        flex-direction: column;
-        justify-content: center;
-        align-items: center;
-        padding: 24px;
-
-        & picture,
-        & img {
-          object-fit: contain;
-          width: 100%;
-          height: 100%;
-        }
-
-        @media (min-width: 768px) {
-          height: 92px;
-          padding: 32px;
-        }
-      }
-
-      & .progress-bar {
-        width: 100%;
-        height: 2px;
-        display: block;
-        background-color: var(--DEPRECATED-gray-9);
-
-        &.dark {
-          background-color: var(--DEPRECATED-gray-3);
-        }
-
-        & span {
-          width: 0;
-          background-color: var(--brand);
-          height: 100%;
-          display: block;
-          animation-duration: 10s;
-          &.nomad {
-            background-color: var(--nomad);
-          }
-          &.consul {
-            background-color: var(--consul);
-          }
-          &.terraform {
-            background-color: var(--terraform);
-          }
-          &.active {
-            animation-name: case-study-bar;
-            animation-timing-function: linear;
-          }
-        }
-      }
-
-      &:hover {
-        transform: translateY(-4px);
-      }
-    }
-
-    /* When there are two case studies */
-    &.double {
-      & .logo-bar {
-        flex-basis: 50%;
-      }
-    }
-
-    @media (min-width: 768px) {
-      padding: 0 0 48px;
-    }
-  }
-
-  & .feature-container {
-    overflow: hidden;
-
-    & .slider-container {
-      transition: transform 400ms ease-out;
-
-      & .slider-frame {
-        & .feature {
-          & .feature-image {
-            margin-bottom: 2rem;
-
-            & img,
-            & picture {
-              width: 100%;
-              height: auto;
-            }
-          }
-
-          & .feature-content {
-            text-align: center;
-
-            & h3 {
-              margin: 0 0 8px;
-            }
-
-            & .single-logo {
-              margin-bottom: 32px;
-              width: 100%;
-              height: 65px;
-
-              & picture,
-              & img {
-                height: 100%;
-                width: auto;
-              }
-            }
-
-            & .g-btn {
-              margin-top: 32px;
-            }
-          }
-
-          @media (min-width: 768px) {
-            display: flex;
-            flex-direction: row;
-            flex-wrap: nowrap;
-            align-items: center;
-
-            & .feature-image {
-              margin-bottom: 0;
-              flex-basis: 60%;
-              margin-right: 64px;
-            }
-
-            & .feature-content {
-              flex-basis: 40%;
-              text-align: left;
-
-              & p {
-                margin: 0;
-
-                & + p {
-                  margin-top: 1em;
-                }
-              }
-            }
-          }
-        }
-
-        &.single {
-          & .case-study {
-            align-items: flex-start;
-          }
-        }
-      }
-    }
-  }
-}
-
-@keyframes case-study-bar {
-  0% {
-    width: 0;
-  }
-  100% {
-    width: 100%;
-  }
-}