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

package/dist/TopicSearch.es5.js

@@ -52,18 +52,17 @@ function _inherits(subClass, superClass) {
 }
 
 function _getPrototypeOf(o) {
-  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf : function _getPrototypeOf(o) {
+  _getPrototypeOf = Object.setPrototypeOf ? Object.getPrototypeOf.bind() : function _getPrototypeOf(o) {
     return o.__proto__ || Object.getPrototypeOf(o);
   };
   return _getPrototypeOf(o);
 }
 
 function _setPrototypeOf(o, p) {
-  _setPrototypeOf = Object.setPrototypeOf || function _setPrototypeOf(o, p) {
+  _setPrototypeOf = Object.setPrototypeOf ? Object.setPrototypeOf.bind() : function _setPrototypeOf(o, p) {
     o.__proto__ = p;
     return o;
   };
-
   return _setPrototypeOf(o, p);
 }
 

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/x-topic-search",
-  "version": "8.0.1",
+  "version": "8.0.4",
   "description": "",
   "main": "dist/TopicSearch.cjs.js",
   "module": "dist/TopicSearch.esm.js",
@@ -16,8 +16,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
-    "@financial-times/x-engine": "^8.0.1",
-    "@financial-times/x-follow-button": "^8.0.1",
+    "@financial-times/x-engine": "^8.0.4",
+    "@financial-times/x-follow-button": "^8.0.4",
     "debounce-promise": "^3.1.0"
   },
   "devDependencies": {

package/rollup.js

@@ -0,0 +1,4 @@
+const xRollup = require('@financial-times/x-rollup');
+const pkg = require('./package.json');
+
+xRollup({ input: './src/TopicSearch.jsx', pkg });

package/src/NoSuggestions.jsx

@@ -0,0 +1,18 @@
+import { h } from '@financial-times/x-engine'
+
+export default ({ searchTerm }) => (
+	<div className="x-topic-search-no-suggestions" aria-live="polite">
+		<h2 className="x-topic-search-no-suggestions__title">
+			No topics matching <b>{searchTerm}</b>
+		</h2>
+
+		<p>Suggestions:</p>
+
+		<ul className="x-topic-search-no-suggestions__message">
+			<li>Make sure that all words are spelled correctly.</li>
+			<li>Try different keywords.</li>
+			<li>Try more general keywords.</li>
+			<li>Try fewer keywords.</li>
+		</ul>
+	</div>
+)

package/src/SuggestionList.jsx

@@ -0,0 +1,40 @@
+import { h } from '@financial-times/x-engine'
+import { FollowButton } from '@financial-times/x-follow-button'
+
+const defaultFollowButtonRender = (concept, csrfToken, followedTopicIds) => (
+	<FollowButton
+		conceptId={concept.id}
+		conceptName={concept.prefLabel}
+		csrfToken={csrfToken}
+		isFollowed={followedTopicIds.includes(concept.id)}
+	/>
+)
+
+export default ({ suggestions, renderFollowButton, searchTerm, csrfToken, followedTopicIds = [] }) => {
+	renderFollowButton =
+		typeof renderFollowButton === 'function' ? renderFollowButton : defaultFollowButtonRender
+
+	return (
+		<ul className="x-topic-search-suggestions" aria-live="polite">
+			{suggestions.map((suggestion) => (
+				<li
+					className="x-topic-search-suggestions__suggestion"
+					key={suggestion.id}
+					data-trackable="myft-topic"
+					data-concept-id={suggestion.id}
+					data-trackable-meta={'{"search-term":"' + searchTerm + '"}'}
+				>
+					<a
+						data-trackable="topic-link"
+						className="x-topic-search-suggestions__suggestion-name"
+						href={suggestion.url || `/stream/${suggestion.id}`}
+					>
+						{suggestion.prefLabel}
+					</a>
+
+					{renderFollowButton(suggestion, csrfToken, followedTopicIds)}
+				</li>
+			))}
+		</ul>
+	)
+}

package/src/TopicSearch.jsx

@@ -0,0 +1,134 @@
+import { h, Component } from '@financial-times/x-engine'
+import getSuggestions from './lib/get-suggestions.js'
+import debounce from 'debounce-promise'
+import SuggestionList from './SuggestionList'
+import NoSuggestions from './NoSuggestions'
+
+class TopicSearch extends Component {
+	constructor(props) {
+		super(props)
+
+		this.minSearchLength = props.minSearchLength || 2
+		this.maxSuggestions = props.maxSuggestions || 5
+		this.apiUrl = props.apiUrl
+		this.getSuggestions = debounce(getSuggestions, 150)
+		this.outsideEvents = ['focusout', 'focusin', 'click']
+		this.handleInputChange = this.handleInputChange.bind(this)
+		this.handleInputClick = this.handleInputClick.bind(this)
+		this.handleInputFocus = this.handleInputFocus.bind(this)
+		this.handleInteractionOutside = this.handleInteractionOutside.bind(this)
+
+		this.state = {
+			followedTopicIds: props.followedTopicIds || [],
+			searchTerm: '',
+			showResult: false
+		}
+	}
+
+	componentDidMount() {
+		this.outsideEvents.forEach((action) => {
+			document.body.addEventListener(action, this.handleInteractionOutside)
+		})
+	}
+
+	componentWillUnmount() {
+		this.outsideEvents.forEach((action) => {
+			document.body.removeEventListener(action, this.handleInteractionOutside)
+		})
+	}
+
+	handleInputChange(event) {
+		const searchTerm = event.target.value.trim()
+
+		this.setState({ searchTerm })
+
+		if (searchTerm.length >= this.minSearchLength) {
+			this.getSuggestions(searchTerm, this.maxSuggestions, this.apiUrl)
+				.then(({ suggestions }) => {
+					this.setState({
+						suggestions,
+						showResult: true
+					})
+				})
+				.catch(() => {
+					this.setState({
+						showResult: false
+					})
+				})
+		} else {
+			this.setState({
+				showResult: false
+			})
+		}
+	}
+
+	handleInteractionOutside(event) {
+		if (!this.rootEl.contains(event.target)) {
+			this.setState({
+				showResult: false
+			})
+		}
+	}
+
+	handleInputClick() {
+		if (this.state.searchTerm.length >= this.minSearchLength) {
+			this.setState({
+				showResult: true
+			})
+		}
+	}
+
+	handleInputFocus(event) {
+		event.target.select()
+		this.handleInputClick()
+	}
+
+	render() {
+		const { csrfToken, followedTopicIds, renderFollowButton } = this.props
+		const { searchTerm, showResult, suggestions } = this.state
+
+		return (
+			<div className="x-topic-search" ref={(el) => (this.rootEl = el)}>
+				<h2 className="o-normalise-visually-hidden">
+					Search for topics, authors, companies, or other areas of interest
+				</h2>
+
+				<label className="o-normalise-visually-hidden" htmlFor="topic-search-input">
+					Search and add topics
+				</label>
+				<div className="x-topic-search__input-wrapper">
+					<i className="x-topic-search__search-icon" />
+					<input
+						type="search"
+						id="topic-search-input"
+						placeholder="Search and add topics"
+						className="x-topic-search__input"
+						data-trackable="topic-search"
+						autoComplete="off"
+						onInput={this.handleInputChange}
+						onClick={this.handleInputClick}
+						onFocus={this.handleInputFocus}
+					/>
+				</div>
+
+				{showResult && searchTerm.length >= this.minSearchLength && (
+					<div className="x-topic-search__result-container">
+						{suggestions.length > 0 ? (
+							<SuggestionList
+								csrfToken={csrfToken}
+								followedTopicIds={followedTopicIds}
+								searchTerm={searchTerm}
+								suggestions={suggestions}
+								renderFollowButton={renderFollowButton}
+							/>
+						) : (
+							<NoSuggestions searchTerm={searchTerm} />
+						)}
+					</div>
+				)}
+			</div>
+		)
+	}
+}
+
+export { TopicSearch }

package/src/TopicSearch.scss

@@ -0,0 +1,125 @@
+$system-code: 'github:Financial-Times/x-dash' !default;
+
+@import '@financial-times/o-icons/main';
+@import '@financial-times/o-colors/main';
+@import '@financial-times/o-typography/main';
+@import '@financial-times/o-editorial-typography/main';
+
+@import '@financial-times/x-follow-button/src/styles/main';
+
+.x-topic-search {
+	position: relative;
+	text-align: center;
+	background-color: oColorsByName('claret-70');
+	color: oColorsByName('white');
+	width: 100%;
+}
+
+.x-topic-search__input-wrapper {
+	position: relative;
+}
+
+.x-topic-search__search-icon {
+	@include oIconsContent($icon-name: 'search', $color: oColorsByName('white'), $size: 32);
+	position: absolute;
+	top: 4px;
+	left: -7px;
+}
+
+.x-topic-search__input {
+	@include oTypographySans($scale: 0);
+	-webkit-appearance: none;
+	width: 100%;
+	min-height: 40px;
+	margin: 0;
+	border: none;
+	border-bottom: 2px solid oColorsByName('white');
+	padding: 0 9px 0 24px;
+	max-width: none;
+	color: oColorsByName('white');
+	background: transparent;
+
+	&::placeholder {
+		color: oColorsByName('white');
+	}
+
+	&::-webkit-search-cancel-button {
+		@include oIconsContent($icon-name: 'cross', $color: oColorsByName('white'), $size: 26);
+		-webkit-appearance: none;
+	}
+
+	&::-webkit-search-decoration,
+	&::-webkit-search-results-button,
+	&::-webkit-search-results-decoration {
+		display: none;
+	}
+}
+
+.x-topic-search__result-container {
+	position: absolute;
+	background: oColorsByName('white');
+	top: 48px;
+	padding: 10px;
+	z-index: 1;
+	width: calc(100% - 20px);
+}
+
+.x-topic-search-suggestions {
+	list-style: none;
+	padding: 0;
+	text-align: left;
+	margin: 0;
+}
+
+.x-topic-search-suggestions__suggestion {
+	display: flex;
+	justify-content: space-between;
+	align-items: center;
+	clear: right;
+	padding: 5px 0;
+	border-bottom: 1px solid oColorsByName('black-5');
+
+	&:last-child {
+		border-bottom: 0;
+		padding-bottom: 0;
+	}
+
+	&:first-child {
+		padding-top: 0;
+	}
+}
+
+.x-topic-search-suggestions__suggestion-name {
+	@include oTypographySans($scale: 0, $weight: 'semibold');
+	@include oEditorialTypographyTag($type: 'topic');
+	padding: 5px 0;
+	max-width: 50%;
+	word-wrap: break-word;
+	overflow-wrap: break-word;
+}
+
+.x-topic-search-no-suggestions {
+	@include oTypographySans($scale: 1);
+	color: oColorsByName('black-70');
+	text-align: left;
+	padding: 0 0 5px 0;
+	margin: 0;
+	p {
+		margin: 0;
+	}
+}
+
+.x-topic-search-no-suggestions__title {
+	@include oTypographySans($scale: 3);
+	font-weight: normal;
+	overflow-wrap: break-word;
+	margin: 0;
+	padding: 0 0 20px;
+}
+
+.x-topic-search-no-suggestions__message {
+	margin-top: 12px;
+	margin-bottom: 0;
+	padding-left: 20px;
+	list-style-type: disc;
+}

package/src/lib/get-suggestions.js

@@ -0,0 +1,20 @@
+const addQueryParamToUrl = (name, value, url, append = true) => {
+	const queryParam = `${name}=${value}`;
+
+	return append === true ? `${url}&${queryParam}` : `${url}?${queryParam}`;
+};
+
+export default (searchTerm, maxSuggestions, apiUrl) => {
+	const dataSrc = addQueryParamToUrl('count', maxSuggestions, apiUrl, false);
+	const url = addQueryParamToUrl('partial', searchTerm.replace(' ', '+'), dataSrc);
+
+	return fetch(url)
+		.then(response => {
+			if (!response.ok) {
+				throw new Error(response.statusText);
+			}
+
+			return response.json();
+		})
+		.then(suggestions => ({ suggestions }));
+};