@financial-times/x-topic-search 7.0.0 → 8.0.1

package/dist/TopicSearch.cjs.js

@@ -5,12 +5,9 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var xEngine = require('@financial-times/x-engine');
-var classNames = _interopDefault(require('classnames'));
 var debounce = _interopDefault(require('debounce-promise'));
 var xFollowButton = require('@financial-times/x-follow-button');
 
-var styles = {"container":"TopicSearch_container__2VM2e","input-wrapper":"TopicSearch_input-wrapper__VeoLf","search-icon":"TopicSearch_search-icon__2proG","input":"TopicSearch_input__1Iq7K","o-typography--loading-sans":"TopicSearch_o-typography--loading-sans__1p8u2","result-container":"TopicSearch_result-container__34uXy","suggestions":"TopicSearch_suggestions__2dZFW","suggestion":"TopicSearch_suggestion__2z7vY","suggestion__name":"TopicSearch_suggestion__name__3rwG-","o-typography--loading-sans-bold":"TopicSearch_o-typography--loading-sans-bold__nv2r4","no-suggestions":"TopicSearch_no-suggestions__11pFv","no-suggestions__title":"TopicSearch_no-suggestions__title__3vCy7","no-suggestions__message":"TopicSearch_no-suggestions__message__1B9c9"};
-
 const addQueryParamToUrl = (name, value, url, append = true) => {
   const queryParam = `${name}=${value}`;
   return append === true ? `${url}&${queryParam}` : `${url}?${queryParam}`;
@@ -46,17 +43,17 @@ var SuggestionList = (({
 }) => {
   renderFollowButton = typeof renderFollowButton === 'function' ? renderFollowButton : defaultFollowButtonRender;
   return xEngine.h("ul", {
-    className: classNames(styles["suggestions"]),
+    className: "x-topic-search-suggestions",
     "aria-live": "polite"
   }, suggestions.map(suggestion => xEngine.h("li", {
-    className: classNames(styles["suggestion"]),
+    className: "x-topic-search-suggestions__suggestion",
     key: suggestion.id,
     "data-trackable": "myft-topic",
     "data-concept-id": suggestion.id,
     "data-trackable-meta": '{"search-term":"' + searchTerm + '"}'
   }, xEngine.h("a", {
     "data-trackable": "topic-link",
-    className: classNames(styles["suggestion__name"]),
+    className: "x-topic-search-suggestions__suggestion-name",
     href: suggestion.url || `/stream/${suggestion.id}`
   }, suggestion.prefLabel), renderFollowButton(suggestion, csrfToken, followedTopicIds))));
 });
@@ -64,12 +61,12 @@ var SuggestionList = (({
 var NoSuggestions = (({
   searchTerm
 }) => xEngine.h("div", {
-  className: classNames(styles["no-suggestions"]),
+  className: "x-topic-search-no-suggestions",
   "aria-live": "polite"
 }, xEngine.h("h2", {
-  className: classNames(styles["no-suggestions__title"])
+  className: "x-topic-search-no-suggestions__title"
 }, "No topics matching ", xEngine.h("b", null, searchTerm)), xEngine.h("p", null, "Suggestions:"), xEngine.h("ul", {
-  className: classNames(styles["no-suggestions__message"])
+  className: "x-topic-search-no-suggestions__message"
 }, xEngine.h("li", null, "Make sure that all words are spelled correctly."), xEngine.h("li", null, "Try different keywords."), xEngine.h("li", null, "Try more general keywords."), xEngine.h("li", null, "Try fewer keywords."))));
 
 class TopicSearch extends xEngine.Component {
@@ -162,7 +159,7 @@ class TopicSearch extends xEngine.Component {
       suggestions
     } = this.state;
     return xEngine.h("div", {
-      className: classNames(styles['container']),
+      className: "x-topic-search",
       ref: el => this.rootEl = el
     }, xEngine.h("h2", {
       className: "o-normalise-visually-hidden"
@@ -170,21 +167,21 @@ class TopicSearch extends xEngine.Component {
       className: "o-normalise-visually-hidden",
       htmlFor: "topic-search-input"
     }, "Search and add topics"), xEngine.h("div", {
-      className: classNames(styles["input-wrapper"])
+      className: "x-topic-search__input-wrapper"
     }, xEngine.h("i", {
-      className: classNames(styles["search-icon"])
+      className: "x-topic-search__search-icon"
     }), xEngine.h("input", {
       type: "search",
       id: "topic-search-input",
       placeholder: "Search and add topics",
-      className: classNames(styles["input"]),
+      className: "x-topic-search__input",
       "data-trackable": "topic-search",
       autoComplete: "off",
       onInput: this.handleInputChange,
       onClick: this.handleInputClick,
       onFocus: this.handleInputFocus
     })), showResult && searchTerm.length >= this.minSearchLength && xEngine.h("div", {
-      className: classNames(styles['result-container'])
+      className: "x-topic-search__result-container"
     }, suggestions.length > 0 ? xEngine.h(SuggestionList, {
       csrfToken: csrfToken,
       followedTopicIds: followedTopicIds,

package/dist/TopicSearch.es5.js

@@ -5,7 +5,6 @@ Object.defineProperty(exports, '__esModule', { value: true });
 function _interopDefault (ex) { return (ex && (typeof ex === 'object') && 'default' in ex) ? ex['default'] : ex; }
 
 var xEngine = require('@financial-times/x-engine');
-var classNames = _interopDefault(require('classnames'));
 var debounce = _interopDefault(require('debounce-promise'));
 var xFollowButton = require('@financial-times/x-follow-button');
 
@@ -118,8 +117,6 @@ function _createSuper(Derived) {
   };
 }
 
-var styles = {"container":"TopicSearch_container__2VM2e","input-wrapper":"TopicSearch_input-wrapper__VeoLf","search-icon":"TopicSearch_search-icon__2proG","input":"TopicSearch_input__1Iq7K","o-typography--loading-sans":"TopicSearch_o-typography--loading-sans__1p8u2","result-container":"TopicSearch_result-container__34uXy","suggestions":"TopicSearch_suggestions__2dZFW","suggestion":"TopicSearch_suggestion__2z7vY","suggestion__name":"TopicSearch_suggestion__name__3rwG-","o-typography--loading-sans-bold":"TopicSearch_o-typography--loading-sans-bold__nv2r4","no-suggestions":"TopicSearch_no-suggestions__11pFv","no-suggestions__title":"TopicSearch_no-suggestions__title__3vCy7","no-suggestions__message":"TopicSearch_no-suggestions__message__1B9c9"};
-
 var addQueryParamToUrl = function addQueryParamToUrl(name, value, url) {
   var append = arguments.length > 3 && arguments[3] !== undefined ? arguments[3] : true;
   var queryParam = "".concat(name, "=").concat(value);
@@ -160,18 +157,18 @@ var SuggestionList = (function (_ref) {
       followedTopicIds = _ref$followedTopicIds === void 0 ? [] : _ref$followedTopicIds;
   renderFollowButton = typeof renderFollowButton === 'function' ? renderFollowButton : defaultFollowButtonRender;
   return xEngine.h("ul", {
-    className: classNames(styles["suggestions"]),
+    className: "x-topic-search-suggestions",
     "aria-live": "polite"
   }, suggestions.map(function (suggestion) {
     return xEngine.h("li", {
-      className: classNames(styles["suggestion"]),
+      className: "x-topic-search-suggestions__suggestion",
       key: suggestion.id,
       "data-trackable": "myft-topic",
       "data-concept-id": suggestion.id,
       "data-trackable-meta": '{"search-term":"' + searchTerm + '"}'
     }, xEngine.h("a", {
       "data-trackable": "topic-link",
-      className: classNames(styles["suggestion__name"]),
+      className: "x-topic-search-suggestions__suggestion-name",
       href: suggestion.url || "/stream/".concat(suggestion.id)
     }, suggestion.prefLabel), renderFollowButton(suggestion, csrfToken, followedTopicIds));
   }));
@@ -180,12 +177,12 @@ var SuggestionList = (function (_ref) {
 var NoSuggestions = (function (_ref) {
   var searchTerm = _ref.searchTerm;
   return xEngine.h("div", {
-    className: classNames(styles["no-suggestions"]),
+    className: "x-topic-search-no-suggestions",
     "aria-live": "polite"
   }, xEngine.h("h2", {
-    className: classNames(styles["no-suggestions__title"])
+    className: "x-topic-search-no-suggestions__title"
   }, "No topics matching ", xEngine.h("b", null, searchTerm)), xEngine.h("p", null, "Suggestions:"), xEngine.h("ul", {
-    className: classNames(styles["no-suggestions__message"])
+    className: "x-topic-search-no-suggestions__message"
   }, xEngine.h("li", null, "Make sure that all words are spelled correctly."), xEngine.h("li", null, "Try different keywords."), xEngine.h("li", null, "Try more general keywords."), xEngine.h("li", null, "Try fewer keywords.")));
 });
 
@@ -302,7 +299,7 @@ var TopicSearch = /*#__PURE__*/function (_Component) {
           showResult = _this$state.showResult,
           suggestions = _this$state.suggestions;
       return xEngine.h("div", {
-        className: classNames(styles['container']),
+        className: "x-topic-search",
         ref: function ref(el) {
           return _this5.rootEl = el;
         }
@@ -312,21 +309,21 @@ var TopicSearch = /*#__PURE__*/function (_Component) {
         className: "o-normalise-visually-hidden",
         htmlFor: "topic-search-input"
       }, "Search and add topics"), xEngine.h("div", {
-        className: classNames(styles["input-wrapper"])
+        className: "x-topic-search__input-wrapper"
       }, xEngine.h("i", {
-        className: classNames(styles["search-icon"])
+        className: "x-topic-search__search-icon"
       }), xEngine.h("input", {
         type: "search",
         id: "topic-search-input",
         placeholder: "Search and add topics",
-        className: classNames(styles["input"]),
+        className: "x-topic-search__input",
         "data-trackable": "topic-search",
         autoComplete: "off",
         onInput: this.handleInputChange,
         onClick: this.handleInputClick,
         onFocus: this.handleInputFocus
       })), showResult && searchTerm.length >= this.minSearchLength && xEngine.h("div", {
-        className: classNames(styles['result-container'])
+        className: "x-topic-search__result-container"
       }, suggestions.length > 0 ? xEngine.h(SuggestionList, {
         csrfToken: csrfToken,
         followedTopicIds: followedTopicIds,

package/dist/TopicSearch.esm.js

@@ -1,10 +1,7 @@
 import { h, Component } from '@financial-times/x-engine';
-import classNames from 'classnames';
 import debounce from 'debounce-promise';
 import { FollowButton } from '@financial-times/x-follow-button';
 
-var styles = {"container":"TopicSearch_container__2VM2e","input-wrapper":"TopicSearch_input-wrapper__VeoLf","search-icon":"TopicSearch_search-icon__2proG","input":"TopicSearch_input__1Iq7K","o-typography--loading-sans":"TopicSearch_o-typography--loading-sans__1p8u2","result-container":"TopicSearch_result-container__34uXy","suggestions":"TopicSearch_suggestions__2dZFW","suggestion":"TopicSearch_suggestion__2z7vY","suggestion__name":"TopicSearch_suggestion__name__3rwG-","o-typography--loading-sans-bold":"TopicSearch_o-typography--loading-sans-bold__nv2r4","no-suggestions":"TopicSearch_no-suggestions__11pFv","no-suggestions__title":"TopicSearch_no-suggestions__title__3vCy7","no-suggestions__message":"TopicSearch_no-suggestions__message__1B9c9"};
-
 const addQueryParamToUrl = (name, value, url, append = true) => {
   const queryParam = `${name}=${value}`;
   return append === true ? `${url}&${queryParam}` : `${url}?${queryParam}`;
@@ -40,17 +37,17 @@ var SuggestionList = (({
 }) => {
   renderFollowButton = typeof renderFollowButton === 'function' ? renderFollowButton : defaultFollowButtonRender;
   return h("ul", {
-    className: classNames(styles["suggestions"]),
+    className: "x-topic-search-suggestions",
     "aria-live": "polite"
   }, suggestions.map(suggestion => h("li", {
-    className: classNames(styles["suggestion"]),
+    className: "x-topic-search-suggestions__suggestion",
     key: suggestion.id,
     "data-trackable": "myft-topic",
     "data-concept-id": suggestion.id,
     "data-trackable-meta": '{"search-term":"' + searchTerm + '"}'
   }, h("a", {
     "data-trackable": "topic-link",
-    className: classNames(styles["suggestion__name"]),
+    className: "x-topic-search-suggestions__suggestion-name",
     href: suggestion.url || `/stream/${suggestion.id}`
   }, suggestion.prefLabel), renderFollowButton(suggestion, csrfToken, followedTopicIds))));
 });
@@ -58,12 +55,12 @@ var SuggestionList = (({
 var NoSuggestions = (({
   searchTerm
 }) => h("div", {
-  className: classNames(styles["no-suggestions"]),
+  className: "x-topic-search-no-suggestions",
   "aria-live": "polite"
 }, h("h2", {
-  className: classNames(styles["no-suggestions__title"])
+  className: "x-topic-search-no-suggestions__title"
 }, "No topics matching ", h("b", null, searchTerm)), h("p", null, "Suggestions:"), h("ul", {
-  className: classNames(styles["no-suggestions__message"])
+  className: "x-topic-search-no-suggestions__message"
 }, h("li", null, "Make sure that all words are spelled correctly."), h("li", null, "Try different keywords."), h("li", null, "Try more general keywords."), h("li", null, "Try fewer keywords."))));
 
 class TopicSearch extends Component {
@@ -156,7 +153,7 @@ class TopicSearch extends Component {
       suggestions
     } = this.state;
     return h("div", {
-      className: classNames(styles['container']),
+      className: "x-topic-search",
       ref: el => this.rootEl = el
     }, h("h2", {
       className: "o-normalise-visually-hidden"
@@ -164,21 +161,21 @@ class TopicSearch extends Component {
       className: "o-normalise-visually-hidden",
       htmlFor: "topic-search-input"
     }, "Search and add topics"), h("div", {
-      className: classNames(styles["input-wrapper"])
+      className: "x-topic-search__input-wrapper"
     }, h("i", {
-      className: classNames(styles["search-icon"])
+      className: "x-topic-search__search-icon"
     }), h("input", {
       type: "search",
       id: "topic-search-input",
       placeholder: "Search and add topics",
-      className: classNames(styles["input"]),
+      className: "x-topic-search__input",
       "data-trackable": "topic-search",
       autoComplete: "off",
       onInput: this.handleInputChange,
       onClick: this.handleInputClick,
       onFocus: this.handleInputFocus
     })), showResult && searchTerm.length >= this.minSearchLength && h("div", {
-      className: classNames(styles['result-container'])
+      className: "x-topic-search__result-container"
     }, suggestions.length > 0 ? h(SuggestionList, {
       csrfToken: csrfToken,
       followedTopicIds: followedTopicIds,

package/package.json

@@ -1,13 +1,12 @@
 {
   "name": "@financial-times/x-topic-search",
-  "version": "7.0.0",
+  "version": "8.0.1",
   "description": "",
   "main": "dist/TopicSearch.cjs.js",
   "module": "dist/TopicSearch.esm.js",
   "browser": "dist/TopicSearch.es5.js",
-  "style": "dist/TopicSearch.css",
+  "style": "src/TopicSearch.scss",
   "scripts": {
-    "prepare": "bower install",
     "build": "node rollup.js",
     "start": "node rollup.js --watch"
   },
@@ -17,16 +16,18 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^7.0.0",
-    "@financial-times/x-follow-button": "^7.0.0",
-    "classnames": "^2.2.6",
+    "@financial-times/x-engine": "^8.0.1",
+    "@financial-times/x-follow-button": "^8.0.1",
     "debounce-promise": "^3.1.0"
   },
   "devDependencies": {
+    "@financial-times/o-colors": "^6.4.2",
+    "@financial-times/o-editorial-typography": "^2.3.2",
+    "@financial-times/o-icons": "^7.2.1",
+    "@financial-times/o-typography": "^7.3.1",
     "@financial-times/x-rollup": "file:../../packages/x-rollup",
     "@financial-times/x-test-utils": "file:../../packages/x-test-utils",
-    "bower": "^1.7.9",
-    "node-sass": "^6.0.1"
+    "sass": "^1.49.0"
   },
   "repository": {
     "type": "git",
@@ -38,5 +39,14 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "volta": {
+    "extends": "../../package.json"
+  },
+  "peerDependencies": {
+    "@financial-times/o-colors": "^6.4.2",
+    "@financial-times/o-editorial-typography": "^2.3.2",
+    "@financial-times/o-icons": "^7.2.1",
+    "@financial-times/o-typography": "^7.3.1"
   }
 }

package/storybook/index.jsx

@@ -2,12 +2,11 @@ import React from 'react'
 import { TopicSearch } from '../src/TopicSearch'
 import BuildService from '../../../.storybook/build-service'
 
+import '../src/TopicSearch.scss'
+
 // Set up basic document styling using the Origami build service
 const dependencies = {
-	'o-normalise': '^2.0.0',
-	'o-typography': '^6.0.0',
-	'o-colors': '^5.0.0',
-	'o-icons': '^6.0.0'
+	'o-fonts': '^5.3.0'
 }
 
 export default {

package/.bowerrc

@@ -1,8 +0,0 @@
-{
-  "registry": {
-    "search": [
-      "https://origami-bower-registry.ft.com",
-      "https://registry.bower.io"
-    ]
-  }
-}

package/bower.json

@@ -1,11 +0,0 @@
-{
-  "name": "x-topic-search",
-  "main": "dist/TopicSearch.es5.js",
-  "private": true,
-  "dependencies": {
-    "o-icons": "^6.3.0",
-    "o-typography": "^6.4.6",
-    "o-editorial-typography": "^1.2.1",
-    "o-colors": "^5.4.1"
-  }
-}

package/bower_components/fontfaceobserver/.bower.json

@@ -1,32 +0,0 @@
-{
-  "name": "fontfaceobserver",
-  "description": "Fast and simple web font loading.",
-  "main": "fontfaceobserver.standalone.js",
-  "authors": [
-    "Bram Stein <b.l.stein@gmail.com> (http://www.bramstein.com/)"
-  ],
-  "license": "BSD-3-Clause",
-  "keywords": [
-    "fontloader",
-    "fonts",
-    "font",
-    "font-face",
-    "web",
-    "font",
-    "font",
-    "load",
-    "font",
-    "events"
-  ],
-  "homepage": "https://github.com/bramstein/fontfaceobserver",
-  "version": "2.1.0",
-  "_release": "2.1.0",
-  "_resolution": {
-    "type": "version",
-    "tag": "v2.1.0",
-    "commit": "7742d5d7f4e9d058bfbecd306d5047e56ca003d5"
-  },
-  "_source": "https://github.com/bramstein/fontfaceobserver.git",
-  "_target": "^2.0.9",
-  "_originalSource": "fontfaceobserver"
-}

package/bower_components/fontfaceobserver/.travis.yml

@@ -1,16 +0,0 @@
-sudo: false
-
-language: node_js
-
-before_install:
-  - npm install -g grunt-cli
-
-node_js:
-  - "4"
-
-matrix:
-  fast_finish: true
-
-cache:
-  directories:
-    - node_modules

package/bower_components/fontfaceobserver/Gruntfile.js

@@ -1,101 +0,0 @@
-var extend = require('extend');
-
-module.exports = function (grunt) {
-  require('google-closure-compiler').grunt(grunt);
-
-  var compilerOptions = {
-    compilation_level: 'ADVANCED_OPTIMIZATIONS',
-    warning_level: 'VERBOSE',
-    summary_detail_level: 3,
-    language_in: 'ECMASCRIPT5_STRICT',
-    output_wrapper: '(function(){%output%}());',
-    use_types_for_optimization: true,
-    externs: ['externs-commonjs.js']
-  };
-
-  var src = [
-    'node_modules/closure-dom/src/dom.js',
-    'src/descriptors.js',
-    'src/ruler.js',
-    'src/observer.js',
-    'exports.js'
-  ];
-
-  grunt.initConfig({
-    pkg: grunt.file.readJSON('package.json'),
-    clean: {
-      options: {
-        force: true
-      },
-      build: ['build']
-    },
-    exec: {
-      test: './node_modules/.bin/phantomjs node_modules/mocha-phantomjs-core/mocha-phantomjs-core.js test/index.html',
-      deps: 'calcdeps -i src -i exports.js -p src -p ./vendor/google/base.js -p node_modules/closure-dom/src/dom.js -o deps > test/deps.js'
-    },
-    jshint: {
-      all: ['src/**/*.js'],
-      options: {
-        // ... better written as dot notation
-        '-W069': true,
-
-        // type definitions
-        '-W030': true,
-
-        // Don't make functions within loops
-        '-W083': true,
-
-        // Wrap the /regexp/ literal in parens to disambiguate the slash operator
-        '-W092': true
-      }
-    },
-    'closure-compiler': {
-      dist: {
-        files: {
-          'fontfaceobserver.js': src
-        },
-        options: compilerOptions
-      },
-      compile: {
-        files: {
-          'build/fontfaceobserver.js': src
-        },
-        options: compilerOptions
-      },
-      debug: {
-        files: {
-          'build/fontfaceobserver.debug.js': src
-        },
-        options: extend({}, compilerOptions, {
-          debug: true,
-          formatting: ['PRETTY_PRINT', 'PRINT_INPUT_DELIMITER']
-        })
-      }
-    },
-    concat: {
-      options: {
-        banner: '/* Font Face Observer v<%= pkg.version %> - © Bram Stein. License: BSD-3-Clause */'
-      },
-      dist_promises: {
-        src: ['node_modules/promis/promise.js', 'build/fontfaceobserver.js'],
-        dest: 'fontfaceobserver.js'
-      },
-      dist: {
-        src: ['build/fontfaceobserver.js'],
-        dest: 'fontfaceobserver.standalone.js'
-      }
-    }
-  });
-
-  grunt.loadNpmTasks('grunt-closurecompiler');
-  grunt.loadNpmTasks('grunt-contrib-clean');
-  grunt.loadNpmTasks('grunt-contrib-jshint');
-  grunt.loadNpmTasks('grunt-contrib-concat');
-  grunt.loadNpmTasks('grunt-exec');
-
-  grunt.registerTask('compile', ['closure-compiler:compile']);
-  grunt.registerTask('debug', ['closure-compiler:debug']);
-  grunt.registerTask('default', ['compile']);
-  grunt.registerTask('test', ['jshint', 'exec:test']);
-  grunt.registerTask('dist', ['clean', 'closure-compiler:compile', 'concat:dist', 'concat:dist_promises']);
-};

package/bower_components/fontfaceobserver/LICENSE

@@ -1,23 +0,0 @@
-Copyright (c) 2014 - Bram Stein
-All rights reserved.
-
-Redistribution and use in source and binary forms, with or without 
-modification, are permitted provided that the following conditions 
-are met:
- 
- 1. Redistributions of source code must retain the above copyright
-    notice, this list of conditions and the following disclaimer. 
- 2. Redistributions in binary form must reproduce the above copyright 
-    notice, this list of conditions and the following disclaimer in the 
-    documentation and/or other materials provided with the distribution. 
-
-THIS SOFTWARE IS PROVIDED BY THE AUTHOR "AS IS" AND ANY EXPRESS OR IMPLIED 
-WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED WARRANTIES OF 
-MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE DISCLAIMED. IN NO 
-EVENT SHALL THE COPYRIGHT OWNER OR CONTRIBUTORS BE LIABLE FOR ANY DIRECT, 
-INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, 
-BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, 
-DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY 
-OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT (INCLUDING 
-NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS SOFTWARE, 
-EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.