Add tour to ccdb

dist/ccdb5.min.js.LICENSE.txt

@@ -22,8 +22,20 @@ object-assign
  * http://api.jqueryui.com/category/ui-core/
  */
 
+/*!
+ * Intro.js v6.0.0
+ * https://introjs.com
+ *
+ * Copyright (C) 2012-2022 Afshin Mehrabani (@afshinmeh).
+ * https://introjs.com
+ *
+ * Date: Sun, 10 Jul 2022 10:05:59 GMT
+ */
+
 /*! http://mths.be/base64 v0.1.0 by @mathias | MIT license */
 
+/*! regenerator-runtime -- Copyright (c) 2014-present, Facebook, Inc. -- license (MIT): https://github.com/facebook/regenerator/blob/main/LICENSE */
+
 /** @license React v0.19.1
  * scheduler.production.min.js
  *
@@ -42,6 +54,15 @@ object-assign
  * LICENSE file in the root directory of this source tree.
  */
 
+/** @license React v16.14.0
+ * react-dom-server.browser.production.min.js
+ *
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+
 /** @license React v16.14.0
  * react-dom.production.min.js
  *

package.json

@@ -95,6 +95,8 @@
     "http-proxy-middleware": "^0.20.0",
     "identity-obj-proxy": "3.0.0",
     "ignore-loader": "^0.1.2",
+    "intro.js": "^6.0.0",
+    "intro.js-react": "0.6.0",
     "is-wsl": "^1.1.0",
     "jest": "27.4.5",
     "jest-cli": "27.4.5",

src/__tests__/__snapshots__/App.spec.jsx.snap

@@ -1268,7 +1268,7 @@ exports[`initial state renders without crashing 1`] = `
             </div>
           </section>
           <section
-            className="cf-select"
+            className="cf-select cf-select__lens"
           >
             <label
               className="u-visually-hidden"
@@ -1308,7 +1308,7 @@ exports[`initial state renders without crashing 1`] = `
             className="separator"
           />
           <section
-            className="cf-select"
+            className="cf-select cf-select__interval"
           >
             <label
               className="u-visually-hidden"
@@ -1461,5 +1461,20 @@ exports[`initial state renders without crashing 1`] = `
       </section>
     </div>
   </div>
+  <button
+    className="tour-button"
+    onClick={[Function]}
+  >
+    <svg
+      className="cf-icon-svg"
+      viewBox="0 0 1000 1200"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M500 105.2c-276.1 0-500 223.9-500 500s223.9 500 500 500 500-223.9 500-500-223.9-500-500-500zm59.5 816.2c-6.5 15.2-18.6 27.3-33.7 33.7l-.3.1c-7.7 3.2-15.9 4.9-24.2 4.9-25.8.2-49.2-15.1-59.3-38.9-10.2-23.7-4.8-51.2 13.6-69.3 6-5.7 12.9-10.3 20.6-13.4 7.9-3.3 16.5-5 25.1-5 8.3 0 16.5 1.7 24.2 5l.2.1c7.5 3.2 14.3 7.7 20.2 13.4 18.3 18.2 23.6 45.6 13.6 69.4zm115.7-430.5c-4.1 15.2-10.1 29.9-17.7 43.7-7 12.4-15.1 24.2-24.2 35.1-8.8 10.4-17.3 20.3-25.4 29.5-.4.4-.8.8-1.2 1.3-7.6 8-14.6 15.6-20.8 22.9-6.6 7.6-12.4 15.9-17.4 24.7-5.2 9.2-9.1 19.1-11.8 29.3-2.8 10.7-4.3 23.2-4.3 37.2v2.2c0 27.4-22.4 49.8-50 49.8s-50-22.4-50-50v-2.2c0-22.7 2.6-43.8 7.6-62.9 4.9-18.6 12.1-36.4 21.6-53.2 8.2-14.3 17.7-27.8 28.5-40.3 7.1-8.3 15.1-17 23.6-26 7.3-8.3 15.1-17.3 23.1-26.8 5.2-6.3 9.8-13 13.8-20.1 3.6-6.7 6.4-13.8 8.4-21.2 1.4-5.1 3.1-14.1 3.1-28.4a80.7 80.7 0 0 0-6.2-32.5c-4.1-10.1-10.1-19.2-17.7-27-7.5-7.6-16.5-13.7-26.4-17.8-9.7-4.2-20.1-6.2-30.7-6-10.9-.2-21.7 1.9-31.7 6.2-20.5 8.5-36.7 24.8-45.2 45.3-4.3 10-6.4 20.9-6.2 31.8v1.2c0 27.6-22.4 50-50 50s-50-22.4-50-50v-1.3c0-25.5 4.7-48.8 14.3-71.2 18.5-44 53.5-79 97.4-97.6 22.4-9.7 45.8-14.4 71.3-14.4 24.2-.2 48.3 4.7 70.5 14.4 43.7 18.7 78.3 53.7 96.4 97.6 9.5 22.5 14.1 45.8 14.1 71.4 0 20.5-2.3 39.1-6.8 55.3z"
+      />
+    </svg>
+    Take a tour
+  </button>
 </main>
 `;

src/actions/trends.jsx

@@ -107,6 +107,7 @@ export function removeFocus() {
   }
 }
 
+
 /**
  * Notifies the application that the toolTip for stacked area chart has changed
  *

src/actions/view.jsx

@@ -6,6 +6,10 @@ export const PRINT_MODE_OFF = 'PRINT_MODE_OFF'
 export const ROW_COLLAPSED = 'ROW_COLLAPSED'
 export const ROW_EXPANDED = 'ROW_EXPANDED'
 export const SCREEN_RESIZED = 'SCREEN_RESIZED'
+export const HIDE_ADVANCED_SEARCH_TIPS = 'HIDE_ADVANCED_SEARCH_TIPS'
+export const SHOW_ADVANCED_SEARCH_TIPS = 'SHOW_ADVANCED_SEARCH_TIPS'
+export const HIDE_TOUR = 'HIDE_TOUR'
+export const SHOW_TOUR = 'SHOW_TOUR'
 export const TAB_CHANGED = 'TAB_CHANGED'
 export const TOGGLE_FILTER_VISIBILITY = 'TOGGLE_FILTER_VISIBILITY'
 export const TRENDS_DATE_WARNING_DISMISSED = 'TRENDS_DATE_WARNING_DISMISSED'
@@ -60,6 +64,31 @@ export function printModeOff() {
   }
 }
 
+
+/**
+ * Notifies the application that advanced tips shown
+ *
+ * @returns {string} a packaged payload to be used by Redux reducers
+ */
+export function showAdvancedTips() {
+  return {
+    type: SHOW_ADVANCED_SEARCH_TIPS,
+    requery: REQUERY_NEVER
+  }
+}
+
+/**
+ * Notifies the application that advanced tips hidden
+ *
+ * @returns {string} a packaged payload to be used by Redux reducers
+ */
+export function hideAdvancedTips() {
+  return {
+    type: HIDE_ADVANCED_SEARCH_TIPS,
+    requery: REQUERY_NEVER
+  }
+}
+
 /**
  * Indicates a bar in row chart has been collapsed
  *
@@ -115,6 +144,30 @@ export function tabChanged( tab ) {
   }
 }
 
+/**
+ * Notifies the application that the tour was toggled OFF
+ *
+ * @returns {string} a packaged payload to be used by Redux reducers
+ */
+export function tourHidden() {
+  return {
+    type: HIDE_TOUR,
+    requery: REQUERY_NEVER
+  }
+}
+
+/**
+ * Notifies the application that the tour was toggled on
+ *
+ * @returns {string} a packaged payload to be used by Redux reducers
+ */
+export function tourShown() {
+  return {
+    type: SHOW_TOUR,
+    requery: REQUERY_NEVER
+  }
+}
+
 /**
  * Notifies the application that user dismissed trends date warning
  *

src/components/Charts/TileMap/__tests__/TileMap.spec.jsx

@@ -218,24 +218,6 @@ describe( 'Tile map', () => {
       '<span class="value">10,000</span></div>' );
   } );
 
-  it( 'formats a map tile in Internet Explorer', () => {
-    sut.point = {
-      className: 'selected',
-      displayValue: 10000,
-      name: 'FA'
-    };
-
-    Object.defineProperty( window.navigator, 'userAgent',
-      { value: 'MSIE' } )
-
-    const result = sut.tileFormatter();
-    expect( result )
-      .toEqual( '<div class="highcharts-data-label-state tile-FA selected ">' +
-        '<span class="abbr">FA</span>' +
-        '<br />' +
-        '<span class="value">10,000</span></div>' );
-  } );
-
   it( 'formats the map tooltip w/ missing data', () => {
     sut.fullName = 'Another Name';
     sut.value = 10000;

src/components/Charts/TileMap/index.js

@@ -217,17 +217,10 @@ export function mouseoverPoint() {
  * @returns {string} html output
  */
 export function tileFormatter() {
-  let iePatch = ''
-  if ( navigator.userAgent.indexOf( 'MSIE' ) !== -1 ||
-    navigator.appVersion.indexOf( 'Trident/' ) > -1 ) {
-    iePatch = '<br />'
-  }
-
   const value = this.point.displayValue.toLocaleString();
   return '<div class="highcharts-data-label-state tile-' + this.point.name +
     ' ' + this.point.className + ' ">' +
     '<span class="abbr">' + this.point.name + '</span>' +
-    iePatch +
     '<span class="value">' + value + '</span>' +
     '</div>';
 }

src/components/RefineBar/PerCapita.jsx

@@ -32,7 +32,7 @@ export const PerCapita = () => {
   }
 
   return (
-    <section className="m-btn-group">
+    <section className="m-btn-group map-shading">
       <p>Map shading</p>
       <button
         className={ 'a-btn toggle-button raw ' + _getRawButtonClass() }

src/components/RefineBar/Select.jsx

@@ -48,7 +48,7 @@ export class Select extends React.Component {
     const values = this.getValues()
 
     return (
-      <section className="cf-select">
+      <section className={'cf-select cf-select__' + this.props.id}>
         <label className="u-visually-hidden"
                htmlFor={ id }>
           { this.props.label }

src/components/Search/SearchBar.jsx

@@ -1,4 +1,5 @@
 import './SearchBar.less'
+import { hideAdvancedTips, showAdvancedTips } from '../../actions/view';
 import { searchFieldChanged, searchTextChanged } from '../../actions/search'
 import Typeahead, { MODE_OPEN } from '../Typeahead'
 import AdvancedTips from '../Dialogs/AdvancedTips'
@@ -7,6 +8,7 @@ import HighlightingOption from '../Typeahead/HighlightingOption'
 import PropTypes from 'prop-types'
 import React from 'react'
 
+
 const searchFields = {
   all: 'All data',
   company: 'Company name',
@@ -19,8 +21,7 @@ export class SearchBar extends React.Component {
     super( props )
     this.state = {
       inputValue: props.searchText,
-      searchField: props.searchField,
-      advancedShown: false
+      searchField: props.searchField
     }
 
     // This binding is necessary to make `this` work in the callback
@@ -98,15 +99,15 @@ export class SearchBar extends React.Component {
               <div className="advanced-container flex-fixed">
                 <button className="a-btn a-btn__link"
                         onClick={ this._onAdvancedClicked }>
-                  {this.state.advancedShown ? 'Hide ' : 'Show '}
+                  {this.props.showAdvancedSearchTips ? 'Hide ' : 'Show '}
                   advanced search tips
                 </button>
               </div>
             </div>
           </form>
         </div>
         {
-         this.state.advancedShown ?
+         this.props.showAdvancedSearchTips ?
            <AdvancedTips /> :
            null
          }
@@ -128,9 +129,7 @@ export class SearchBar extends React.Component {
 
   _onAdvancedClicked( event ) {
     event.preventDefault()
-    this.setState( {
-      advancedShown: !this.state.advancedShown
-    } )
+    this.props.onSearchTipToggle( this.props.showAdvancedSearchTips )
   }
 
   _updateLocalState( searchField, searchText ) {
@@ -195,7 +194,8 @@ SearchBar.defaultProps = {
 
 export const mapStateToProps = state => ( {
   searchText: state.query.searchText,
-  searchField: state.query.searchField
+  searchField: state.query.searchField,
+  showAdvancedSearchTips: state.view.showAdvancedSearchTips
 } )
 
 export const mapDispatchToProps = dispatch => ( {
@@ -204,7 +204,15 @@ export const mapDispatchToProps = dispatch => ( {
   },
   onSearchText: text => {
     dispatch( searchTextChanged( text ) )
+  },
+  onSearchTipToggle: isOn => {
+    if ( isOn ) {
+      dispatch( hideAdvancedTips() )
+    } else {
+      dispatch( showAdvancedTips() );
+    }
   }
+
 } )
 
 export default connect( mapStateToProps, mapDispatchToProps )( SearchBar )

src/components/Search/SearchComponents.jsx

@@ -6,6 +6,7 @@ import RefinePanel from '../RefinePanel'
 import ResultsPanel from '../ResultsPanel'
 import RootModal from '../Dialogs/RootModal'
 import SearchPanel from './SearchPanel'
+import { Tour } from '../Tour/Tour';
 import UrlBarSynch from '../UrlBarSynch'
 import WindowSize from '../WindowSize'
 
@@ -23,6 +24,7 @@ export class SearchComponents extends React.Component {
             <RefinePanel />
             <ResultsPanel />
           </div>
+          <Tour />
           <RootModal />
         </main>
       </IntlProvider>