Add tour to ccdb

cypress/integration/common/filters-spec.js

@@ -237,7 +237,7 @@ describe( 'Filter Panel', () => {
 
       cy.get( '.list-panel .card-container' )
         .should( 'have.length', 25 );
-      cy.get( '#choose-size' )
+      cy.get( '#select-size' )
         .select( '10 results' )
       cy.wait( '@get10Complaints' )
       cy.get( '.list-panel .card-container' )

cypress/integration/document/document-spec.js

@@ -61,7 +61,7 @@ describe( 'Document View', () => {
         '?searchText=pizza&has_narrative=true&size=10&sort=relevance_desc&tab=List'
       )
 
-      cy.get( '#choose-sort' )
+      cy.get( '#select-sort' )
         .should( 'have.value', 'relevance_desc' )
 
       cy.contains( '.pill', 'Has narrative' )
@@ -73,7 +73,7 @@ describe( 'Document View', () => {
       request = `${ccdbApiUrl.dev}3146099`;
       fixture = { fixture: 'document/get-detail.json' };
       cy.intercept( request, fixture ).as( 'getDetail' );
-  
+
       cy.get( '.cards-panel .card-container a' )
         .first()
         .click()
@@ -90,7 +90,7 @@ describe( 'Document View', () => {
       cy.wait( '@getAggsResults' )
       cy.wait( '@getResults' )
 
-      cy.get( '#choose-sort' )
+      cy.get( '#select-sort' )
         .should( 'have.value', 'relevance_desc' )
 
       cy.contains( '.pill', 'Has narrative' )

cypress/integration/list/list-spec.js

@@ -51,7 +51,7 @@ describe( 'List View', () => {
       fixture = { fixture: 'list/get-10-complaints.json' };
       cy.intercept( 'GET', request, fixture ).as( 'get10Complaints' );
 
-      cy.get( '#choose-size' ).select( '10 results' )
+      cy.get( '#select-size' ).select( '10 results' )
 
       cy.wait( '@get10Complaints' );
 
@@ -76,7 +76,7 @@ describe( 'List View', () => {
 
       cy.url().should( 'contain', 'page=2' )
 
-      cy.get( '#choose-sort' ).select( 'relevance_desc' )
+      cy.get( '#select-sort' ).select( 'relevance_desc' )
       cy.wait( '@getRelevanceComplaints' );
 
       cy.url().should( 'contain', 'sort=relevance_desc' )

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

@@ -1198,6 +1198,7 @@ exports[`initial state renders without crashing 1`] = `
         </div>
         <div
           className="tabbed-navigation"
+          data-tour="tabbed-navigation"
         >
           <section>
             <button
@@ -1269,18 +1270,19 @@ exports[`initial state renders without crashing 1`] = `
           </section>
           <section
             className="cf-select"
+            data-tour="select-lens"
           >
             <label
               className="u-visually-hidden"
-              htmlFor="choose-lens"
+              htmlFor="select-lens"
             >
               Aggregate complaints by
             </label>
             <p>
               Aggregate by
             </p>
             <select
-              id="choose-lens"
+              id="select-lens"
               onChange={[Function]}
               value="Product"
             >
@@ -1309,18 +1311,19 @@ exports[`initial state renders without crashing 1`] = `
           />
           <section
             className="cf-select"
+            data-tour="select-interval"
           >
             <label
               className="u-visually-hidden"
-              htmlFor="choose-interval"
+              htmlFor="select-interval"
             >
               Choose the Date interval
             </label>
             <p>
               Date interval
             </p>
             <select
-              id="choose-interval"
+              id="select-interval"
               onChange={[Function]}
               value="Month"
             >
@@ -1461,5 +1464,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

@@ -44,19 +44,21 @@ export class Select extends React.Component {
   }
 
   render() {
-    const id = 'choose-' + this.props.id
+    const id = 'select-' + this.props.id
     const values = this.getValues()
 
     return (
-      <section className="cf-select">
+      <section className={ 'cf-select' }
+               data-tour={ id }>
         <label className="u-visually-hidden"
                htmlFor={ id }>
           { this.props.label }
         </label>
         <p>
           { this.props.title }
         </p>
-        <select value={ this.props.value } id={ id }
+        <select value={ this.props.value }
+                id={ id }
                 onChange={ this.props.handleChange }>
 
           { values.map( x =>