@hashicorp/react-components 0.0.0

package/packages/featured-slider/index.js

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

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

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

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

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

@@ -0,0 +1,204 @@
+.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%;
+  }
+}