@hashicorp/react-components 0.0.0 → 1.0.0

package/packages/consent-manager/dialog.js

@@ -1,286 +0,0 @@
-/*
-  dialog.js
-  Managing preferences dialog
-*/
-
-import { Component } from 'react'
-import getIntegrations from './integrations'
-import Button from '@hashicorp/react-button'
-import Toggle from '@hashicorp/react-toggle'
-import CloseButton from './icn_close'
-
-export default class ConsentPreferences extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      version: props.version || 0,
-      showConfirmationDialog: false,
-      groupedIntegrations: {}, // Integrations object grouped by category
-      consent: props.preferences, // Consent preferences object
-      categories: props.categories.reduce((obj, category) => {
-        obj[category.name] = category.description
-        return obj
-      }, {}), // Transform categories description array to object
-      showCategories: {}, // Category toggle state object
-    }
-
-    this.handleFold = this.handleFold.bind(this)
-    this.getCategoryToggle = this.getCategoryToggle.bind(this)
-  }
-
-  componentDidMount() {
-    // Set up integrations
-    getIntegrations(
-      this.props.segmentServices,
-      this.props.additionalServices,
-      this.props.segmentWriteKey,
-      this.props.utilServerRoot
-    ).then((groupedIntegrations) => {
-      this.setState({ groupedIntegrations })
-    })
-  }
-
-  // Handler for when user toggles a category or individual integration
-  handleToggle(integrationName, integrationOrigin, newValue) {
-    let currentConsent = this.state.consent || {}
-
-    // If user has { loadAll: true } and they toggle, make sure to preserve
-    // the loadAll settings by setting everything to true first. This setting
-    // gets reset at the end of the function.
-    if (currentConsent.loadAll) {
-      Object.keys(this.state.groupedIntegrations).forEach((category) => {
-        this.state.groupedIntegrations[category].forEach((tool) => {
-          currentConsent[tool.origin] = currentConsent[tool.origin] || {}
-          currentConsent[tool.origin][tool.name] = true
-        })
-      })
-    }
-
-    if (integrationOrigin === 'categories') {
-      // User toggled a category toggle
-      // Go through list of groupedIntegrations
-      this.state.groupedIntegrations[integrationName].forEach((tool) => {
-        currentConsent[tool.origin] = currentConsent[tool.origin] || {}
-        currentConsent[tool.origin][tool.name] = newValue
-      })
-    } else {
-      // User toggled an individual tool toggle
-      currentConsent[integrationOrigin] =
-        currentConsent[integrationOrigin] || {}
-      currentConsent[integrationOrigin][integrationName] = newValue
-    }
-
-    delete currentConsent.loadAll
-
-    this.setState({ consent: currentConsent })
-  }
-
-  // Handler for folding categories
-  handleFold(categoryName) {
-    const categories = this.state.showCategories
-    categories[categoryName] = !categories[categoryName]
-    this.setState({ showCategories: categories })
-  }
-
-  // Calculate value of category toggle
-  getCategoryToggle(category) {
-    return this.state.groupedIntegrations[category].some((tool) => {
-      return (
-        this.state.consent &&
-        this.state.consent.hasOwnProperty(tool.origin) &&
-        this.state.consent[tool.origin].hasOwnProperty(tool.name) &&
-        this.state.consent[tool.origin][tool.name]
-      )
-    })
-  }
-
-  // Build each individual category and integration row
-  buildCategory(items, name) {
-    const categoryItems = items.map((item) => {
-      return (
-        <div className="category-item flex-column" key={item.name}>
-          <div className="item-title">{item.name}</div>
-          <div className="flex-centered-row">
-            <div className="item-description">{item.description}</div>
-            <div className="consent-toggle">
-              <Toggle
-                onChange={this.handleToggle.bind(this, item.name, item.origin)}
-                enabled={Boolean(
-                  this.state.consent.loadAll ||
-                    (this.state.consent &&
-                      this.state.consent[item.origin] &&
-                      this.state.consent[item.origin][item.name])
-                )}
-              />
-            </div>
-          </div>
-        </div>
-      )
-    })
-
-    return (
-      <div className="category" key={name}>
-        <div className="category-title">{name}</div>
-        <div className="flex-centered-row">
-          <div className="category-description">
-            {this.state.categories[name]}
-          </div>
-          <div className="consent-toggle">
-            {!this.state.showCategories[name] && (
-              <Toggle
-                onChange={this.handleToggle.bind(this, name, 'categories')}
-                enabled={
-                  this.state.consent.loadAll || this.getCategoryToggle(name)
-                }
-              />
-            )}
-          </div>
-        </div>
-        <div className="category-fold">
-          <a
-            onClick={() => {
-              this.handleFold(name)
-            }}
-          >
-            {!this.state.showCategories[name] && 'See more'}
-            {this.state.showCategories[name] && 'See less'}
-            <svg
-              width="14"
-              height="8"
-              xmlns="http://www.w3.org/2000/svg"
-              className={!this.state.showCategories[name] ? 'down' : 'up'}
-            >
-              <path
-                d="M12.293.293L7 5.586 1.707.293A1 1 0 1 0 .293 1.707l6 6a.997.997 0 0 0 1.414 0l6-6A1 1 0 0 0 12.293.293"
-                fill="#1563FF"
-                fillRule="evenodd"
-              />
-            </svg>
-          </a>
-        </div>
-        {this.state.showCategories[name] && (
-          <div className="category-items flex-column">{categoryItems}</div>
-        )}
-      </div>
-    )
-  }
-
-  render() {
-    let categories = Object.keys(this.state.groupedIntegrations)
-    categories = categories.map((category) => {
-      return this.buildCategory(
-        this.state.groupedIntegrations[category],
-        category
-      )
-    })
-
-    return (
-      <div className="g-consent-dialog" data-testid="consent-mgr-dialog">
-        {/* Manage preferences dialog */}
-        {!this.state.showConfirmationDialog && (
-          <div className="g-consent-visible-dialog flex-column">
-            <div className="dialog-title flex-centered-row">
-              <span>Data Collection Preferences</span>
-              <div
-                className="clickable flex-centered-row"
-                onClick={() => {
-                  this.setState({ showConfirmationDialog: true })
-                }}
-              >
-                <CloseButton />
-              </div>
-            </div>
-            <div className="dialog-body">
-              <p>
-                HashiCorp uses data collected by cookies and JavaScript
-                libraries to improve your browsing experience, analyze site
-                traffic, and increase the overall performance of our site. By
-                using our website, you’re agreeing to our{' '}
-                <a
-                  href={this.props.privacyPolicyLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                  data-testid="privacy-policy-link"
-                >
-                  Privacy Policy
-                </a>
-                .
-              </p>
-              <p>
-                The categories below outline which companies and tools we use
-                for collecting data. To opt out of a category of data
-                collection, set the toggle to “Off” and save your preferences.
-              </p>
-              <div id="outline">{categories}</div>
-            </div>
-            <div className="dialog-footer">
-              <Button
-                title="Cancel"
-                className="button-cancel"
-                theme={{
-                  variant: 'secondary',
-                  brand: 'neutral',
-                  background: 'light',
-                }}
-                onClick={() => {
-                  this.setState({ showConfirmationDialog: true })
-                }}
-              />
-              <Button
-                className="button-save"
-                title="Save Preferences"
-                onClick={() => {
-                  this.props.saveAndLoadAnalytics(this.state.consent)
-                }}
-              />
-            </div>
-          </div>
-        )}
-        {/* Cancellation confirmation dialog */}
-        {this.state.showConfirmationDialog && (
-          <div className="g-consent-visible-dialog">
-            <div className="dialog-title flex-centered-row">
-              <span>Are you sure?</span>
-            </div>
-            <div className="dialog-body">
-              <p>
-                Your preferences have not been saved. To continue using our
-                website, you must either set individual preferences or agree to{' '}
-                <a
-                  href={this.props.privacyPolicyLink}
-                  target="_blank"
-                  rel="noopener noreferrer"
-                >
-                  our privacy policy
-                </a>
-                .
-              </p>
-            </div>
-            <div className="dialog-footer">
-              <Button
-                title="Back to Preferences"
-                theme={{
-                  variant: 'secondary',
-                  brand: 'neutral',
-                  background: 'light',
-                }}
-                className="button-cancel"
-                onClick={() => {
-                  this.setState({ showConfirmationDialog: false })
-                }}
-              />
-              <Button
-                title="Agree & Close"
-                className="button-save"
-                onClick={() => {
-                  this.props.saveAndLoadAnalytics({ loadAll: true })
-                }}
-              />
-            </div>
-          </div>
-        )}
-      </div>
-    )
-  }
-}

package/packages/consent-manager/icn_close.js

@@ -1,19 +0,0 @@
-export default function CloseIcon() {
-  return (
-    <svg
-      width="16"
-      height="16"
-      viewBox="0 0 16 16"
-      xmlns="http://www.w3.org/2000/svg"
-    >
-      <title>Close Button</title>
-      <path
-        d="M1.778 1.778l12.541 12.541m-.097-12.541L1.681 14.319"
-        stroke="#FFF"
-        strokeWidth="2"
-        fill="none"
-        strokeLinecap="square"
-      />
-    </svg>
-  )
-}

package/packages/consent-manager/index.js

@@ -1,119 +0,0 @@
-import { Component } from 'react'
-import { render } from 'react-dom'
-import EventEmitter from 'events'
-import inEU from '@segment/in-eu'
-import ConsentBanner from './banner'
-import ConsentPreferences from './dialog'
-import { loadPreferences, savePreferences } from './cookies'
-import loadAnalytics from './load'
-
-const emitter = new EventEmitter()
-
-// TODO: remove this
-export function init(props) {
-  render(<ConsentManager {...props} />, document.querySelector(props.container))
-}
-
-export function open() {
-  emitter.emit('openDialog')
-}
-
-export default class ConsentManager extends Component {
-  constructor(props) {
-    super(props)
-
-    this.state = {
-      showDialog: props.showDialog || false,
-      showBanner: false,
-      preferences: loadPreferences() || {},
-    }
-    this.saveAndLoadAnalytics = this.saveAndLoadAnalytics.bind(this)
-    this.openDialog = this.openDialog.bind(this)
-  }
-
-  saveAndLoadAnalytics(preferences) {
-    if (typeof preferences === 'undefined') {
-      preferences = { All: false, 'Segment.io': false }
-    }
-    savePreferences(preferences, this.props.version)
-
-    loadAnalytics(
-      preferences,
-      this.props.segmentWriteKey,
-      this.props.additionalServices
-    )
-
-    // Close all dialogs
-    document.body.classList.remove('g-noscroll')
-    this.setState({
-      showDialog: false,
-      showBanner: false,
-      preferences: loadPreferences(),
-    })
-  }
-
-  shouldRequireConsent() {
-    // 1. Check cookies
-    if (
-      this.state.preferences &&
-      this.state.preferences.version === this.props.version
-    ) {
-      // Load segment and custom integrations
-      loadAnalytics(
-        this.state.preferences,
-        this.props.segmentWriteKey,
-        this.props.additionalServices
-      )
-      return false
-    }
-    // 2. Check inEU. If in-eu, show consent. If not, show nothing. Load all.
-    if (inEU() || this.props.forceShow) {
-      return true
-    } else {
-      // Load all analytics
-      this.saveAndLoadAnalytics({ loadAll: true })
-      return false
-    }
-  }
-
-  componentDidMount() {
-    this.setState({ showBanner: this.shouldRequireConsent() })
-    emitter.on('openDialog', this.openDialog)
-  }
-
-  openDialog() {
-    document.body.classList.add('g-noscroll')
-    this.setState({ showDialog: true, showBanner: false })
-  }
-
-  render() {
-    return (
-      <div id="g-consent-manager">
-        {/*  Consent banner at the bottom */}
-        {this.state.showBanner && (
-          <ConsentBanner
-            privacyPolicyLink={this.props.privacyPolicyLink}
-            onManagePreferences={this.openDialog}
-            onAccept={() => {
-              this.saveAndLoadAnalytics({ loadAll: true })
-            }}
-          />
-        )}
-        {/*  Consent manager preferences dialog */}
-        {this.state.showDialog && (
-          <ConsentPreferences
-            version={this.props.version}
-            segmentWriteKey={this.props.segmentWriteKey}
-            utilServerRoot={this.props.utilServerRoot}
-            segmentServices={this.props.segmentServices}
-            additionalServices={this.props.additionalServices}
-            preferences={this.state.preferences}
-            categories={this.props.categories}
-            privacyPolicyLink={this.props.privacyPolicyLink}
-            saveAndLoadAnalytics={this.saveAndLoadAnalytics}
-          />
-        )}
-      </div>
-    )
-  }
-}

package/packages/consent-manager/integrations.js

@@ -1,92 +0,0 @@
-/*
-  integrations.js
-  Fetches integrations from Segment given write key and applies user-defined
-  overrides. Combines with custom scripts to give a complete view into
-  scripts that the site is trying to load. Finally, groups it all by category.
-*/
-
-export default function getIntegrations(
-  segmentServices,
-  additionalServices,
-  segmentWriteKey,
-  utilServerRoot
-) {
-  return fetchIntegrationsFromSegment(segmentWriteKey, utilServerRoot)
-    .then(zipIntegrations.bind(this, segmentServices, additionalServices))
-    .then(groupByCategory)
-}
-
-// Get integrations from Segment by write key
-function fetchIntegrationsFromSegment(segmentWriteKey, utilServerRoot) {
-  return fetch(`${utilServerRoot}/seg_integrations/${segmentWriteKey}`).then(
-    (res) => {
-      if (!res.ok) {
-        throw new Error(
-          `Failed to fetch integrations: HTTP ${res.status} ${res.statusText}`
-        )
-      }
-
-      return res.json()
-    }
-  )
-}
-
-// Include developer overrides for fetched Segment integrations
-function zipIntegrations(
-  segmentOverrides,
-  additionalServices,
-  segmentOriginated
-) {
-  // Create Segment integration object with name as key for quick retrieval
-  let segmentObj = segmentOriginated.reduce((obj, segment) => {
-    obj[segment.name] = segment
-    obj[segment.name].origin = 'segment'
-    return obj
-  }, {})
-
-  // Go through each developer-defined segment service and update
-  // segmentObj with any overrides
-  for (var i = 0; i < segmentOverrides.length; i++) {
-    if (segmentObj.hasOwnProperty(segmentOverrides[i].name)) {
-      segmentObj[segmentOverrides[i].name] = Object.assign(
-        segmentObj[segmentOverrides[i].name],
-        segmentOverrides[i]
-      )
-    } else {
-      /* eslint-disable-next-line */
-      console.warn(
-        `Unmatched integration config for ${segmentOverrides[i].name}`
-      )
-    }
-  }
-
-  // Include additional (non-Segment) services
-  let allIntegrations = additionalServices
-    ? additionalServices.map((integration) => {
-        integration.origin = 'custom'
-        return integration
-      })
-    : []
-
-  for (const key in segmentObj) {
-    allIntegrations.push(segmentObj[key])
-  }
-
-  // Returns array with all integrations, with origin key (segment or custom)
-  return allIntegrations
-}
-
-// Group by category for display purposes
-function groupByCategory(integrations) {
-  let grouped = {}
-
-  integrations.forEach((integration) => {
-    if (grouped.hasOwnProperty(integration.category)) {
-      grouped[integration.category].push(integration)
-    } else {
-      grouped[integration.category] = [integration]
-    }
-  })
-
-  return grouped
-}

package/packages/consent-manager/load.js

@@ -1,139 +0,0 @@
-/*
-  load.js
-  Responsible for loading scripts, whether they are Segment-originated or
-  custom defined.
-*/
-
-export default function loadAnalytics(
-  preferences,
-  segmentWriteKey,
-  additionalServices
-) {
-  // If analytics have already been added to page, it's likely you're updating your preferences
-  // We reload the page to re-initiate the script with the updated integrations
-  // TODO: Investigate alternatives to full page reload approach
-  if (window.analytics && window.analytics.initialized) {
-    window.location.reload()
-    return
-  }
-
-  if (preferences.loadAll) {
-    loadSegment(segmentWriteKey, { All: true })
-    loadCustom(additionalServices)
-    return
-  }
-
-  if (preferences.segment) {
-    loadSegment(segmentWriteKey, preferences.segment)
-  }
-
-  if (preferences.custom) {
-    loadCustom(additionalServices, preferences.custom)
-  }
-}
-
-function loadSegment(writeKey, userPreferences = {}) {
-  const integrations = Object.assign(
-    { All: false, 'Segment.io': true },
-    userPreferences
-  )
-
-  // Exit early if Segment snippet is already present on page
-  if (window.analytics) return
-
-  // Otherwise, construct and append script to <body>
-  insertScript({
-    body: constructSegmentSnippet(writeKey, integrations),
-    addToBody: true,
-  })
-}
-
-function loadCustom(services, userPreferences) {
-  if (!services || services.length === 0) return
-
-  if (userPreferences) {
-    // Load according to user preferences
-    const integrationNames = Object.keys(userPreferences)
-    let service
-    integrationNames.forEach((name) => {
-      service = services.find((service) => {
-        return userPreferences[name] && service.name === name
-      })
-      if (service) {
-        insertScript(service)
-      }
-    })
-  } else {
-    // Load everything
-    services.forEach((service) => {
-      insertScript(service)
-    })
-  }
-}
-
-function insertScript(script) {
-  const scriptElement = document.createElement('script')
-  scriptElement.type = 'text/javascript'
-
-  if (script.async) {
-    scriptElement.setAttribute('async', '')
-  }
-
-  if (script.dataAttrs) {
-    script.dataAttrs.forEach((attr) => {
-      scriptElement.dataset[attr.name] = attr.value
-    })
-  }
-
-  if (script.body) {
-    scriptElement.text = script.body
-  } else if (script.url) {
-    scriptElement.src = script.url
-  }
-
-  if (script.addToBody) {
-    document.body.appendChild(scriptElement)
-  } else {
-    document.head.appendChild(scriptElement)
-  }
-}
-
-function constructSegmentSnippet(writeKey, integrations) {
-  // Define a function that's responsible for sending Segment-related properties to Heap
-  // We pass this callback function to Segment's ready method (https://segment.com/docs/sources/website/analytics.js/#ready)
-  const readyCb = function passSegmentKeysToHeap() {
-    if (!window.heap) return
-
-    // Send XID
-    if (!localStorage.getItem('seg_heap_xid')) {
-      const xId = localStorage.getItem('seg_xid')
-
-      if (xId) {
-        window.heap.addUserProperties({
-          'Segment Cross Origin ID': JSON.parse(xId),
-        })
-        localStorage.setItem('seg_heap_xid', Date.now())
-      }
-    }
-
-    // Send Anonymous ID
-    if (!localStorage.getItem('seg_heap_anonymous_id')) {
-      const anonId = localStorage.getItem('ajs_anonymous_id')
-
-      if (anonId) {
-        window.heap.addUserProperties({
-          'Segment Dotcom Anonymous ID': JSON.parse(anonId),
-        })
-        localStorage.setItem('seg_heap_anonymous_id', Date.now())
-      }
-    }
-  }
-
-  return `!function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";
-analytics.load("${writeKey}", ${
-    integrations ? JSON.stringify({ integrations }) : {}
-  });
-analytics.page();
-analytics.ready(${readyCb});
-}}();`
-}

package/packages/consent-manager/package-lock.json

@@ -1,45 +0,0 @@
-{
-  "name": "@hashicorp/react-consent-manager",
-  "version": "3.0.1",
-  "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-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=="
-    },
-    "@segment/in-eu": {
-      "version": "0.2.1",
-      "resolved": "https://registry.npmjs.org/@segment/in-eu/-/in-eu-0.2.1.tgz",
-      "integrity": "sha512-7JKBw/l3S9J0ldo/n6XPfd3sT89f300KOCvmZsd8sryVZOWlE4L2LMKT538I34bjRdaOd1aJ52TsOAZUOLqxiQ==",
-      "requires": {
-        "jstz": "^2.0.0"
-      }
-    },
-    "js-cookie": {
-      "version": "2.2.1",
-      "resolved": "https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz",
-      "integrity": "sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ=="
-    },
-    "jstz": {
-      "version": "2.1.1",
-      "resolved": "https://registry.npmjs.org/jstz/-/jstz-2.1.1.tgz",
-      "integrity": "sha512-8hfl5RD6P7rEeIbzStBz3h4f+BQHfq/ABtoU6gXKQv5OcZhnmrIpG7e1pYaZ8hS9e0mp+bxUj08fnDUbKctYyA=="
-    },
-    "slugify": {
-      "version": "1.4.5",
-      "resolved": "https://registry.npmjs.org/slugify/-/slugify-1.4.5.tgz",
-      "integrity": "sha512-WpECLAgYaxHoEAJ8Q1Lo8HOs1ngn7LN7QjXgOLbmmfkcWvosyk4ZTXkTzKyhngK640USTZUlgoQJfED1kz5fnQ=="
-    }
-  }
-}