Add search component

index.css

@@ -59,3 +59,12 @@ ts-list-item {
 	display: flex;
 	max-width: 350px;
 }
+
+.search-container {
+	display: flex;
+}
+
+.search-container div {
+	width: 400px;
+	margin: 5px;
+}

index.html

@@ -50,7 +50,8 @@
 						'progress-bar',
 						'help-text',
 						'note',
-						'spinner'
+						'spinner',
+						'search'
 					];
 					components.forEach(function(component) {
 						var el = document.createElement('script');
@@ -641,6 +642,37 @@ <h2>Typography</h2>
 				<h2>Spinner</h2>
 				<ts-spinner data-visible data-size="medium" data-color="mono"> </ts-spinner>
 			</article>
+			<article>
+				<h2>Search</h2>
+				<div class="search-container">
+					<div>
+						<ts-search placeholder="یا بخت یا اقبال" id="search" dir="rtl"></ts-search>
+					</div>
+					<div>
+						<ts-search placeholder="Press Enter to search..." id="search2"></ts-search>
+					</div>
+				</div>
+				<div class="search-container">
+					<div>
+						<div id="searchResult">No value</div>
+					</div>
+					<div>
+						<div id="searchResult2">No value</div>
+					</div>
+				</div>
+				<button id="searchButton">Set focus on the right search</button>
+			</article>
+			<script>
+				document.getElementById('search').addEventListener('idle', function(evt) {
+					document.getElementById('searchResult').innerHTML = 'Idle value: ' + evt.detail;
+				});
+				document.getElementById('search2').addEventListener('search', function(evt) {
+					document.getElementById('searchResult2').innerHTML = 'Search value: ' + evt.detail;
+				});
+				document.getElementById('searchButton').addEventListener('click', function(evt) {
+					document.getElementById('search2').focused = true;
+				});
+			</script>
 			<article>
 				<h2>Checkbox</h2>
 				<ts-checkbox data-label="Agree?" name="checkbox" value="yes" checked dir="rtl"></ts-checkbox>

package.json

@@ -95,6 +95,7 @@
     "@tradeshift/elements.note": "file:packages/components/note",
     "@tradeshift/elements.progress-bar": "file:packages/components/progress-bar",
     "@tradeshift/elements.root": "file:packages/components/root",
+    "@tradeshift/elements.search": "file:packages/components/search",
     "@tradeshift/elements.spinner": "file:packages/components/spinner",
     "@tradeshift/elements.tooltip": "file:packages/components/tooltip",
     "@tradeshift/elements.typography": "file:packages/components/typography"

packages/components/search/README.md

@@ -0,0 +1,156 @@
+<h1 align="center">
+    <a href="https://tradeshift.com/">
+      <img alt="Tradeshift" src="https://tradeshift.com/wp-content/themes/Tradeshift/img/brand/logo-black.png"/>
+    </a>
+</h1>
+
+<h1 align="center">Elements - search</h1>
+
+<p align="center">
+  Part of the reusable Tradeshift UI Components as Web Components.
+    <a href="https://tradeshift.github.io/elements/?path=/story/ts-search--default">
+      Demo
+    </a>
+</p>
+
+<p align="center">
+    <a href="https://www.npmjs.com/package/@tradeshift/elements.search">
+      <img alt="NPM Version" src="https://badgen.net/npm/v/@tradeshift/elements.search" height="20"/>
+    </a>
+    <a href="https://npmcharts.com/compare/@tradeshift/elements.search?minimal=true">
+		  <img alt="Downloads per month" src="https://badgen.net/npm/dm/@tradeshift/elements.search" height="20"/>
+		</a>
+		<a href="https://www.npmjs.com/browse/depended/@tradeshift/elements.search">
+		  <img alt="Dependent packages" src="https://badgen.net/npm/dependents/@tradeshift/elements.search" height="20"/>
+		</a>
+</p>
+
+<style>
+table {
+    width:100%;
+}
+</style>
+
+## ➤ Properties
+
+| Property    | Attribute   | Type    | Default     | Description                                       |
+| ----------- | ----------- | ------- | ----------- | ------------------------------------------------- |
+| autofocus   | autofocus   | boolean | false       | Shoud the search be auto focused once page loaded |
+| dir         | dir         | string  | ''          | Direction 'rtl' or 'ltr'                          |
+| focused     | focused     | boolean | false       | Set the focus on element                          |
+| idleTime    | idle-time   | number  | 300         | timeout in ms for the 'idle' event                |
+| placeholder | placeholder | string  | 'Search...' | Message when an input is empty                    |
+| value       | value       | string  | ''          | The current value                                 |
+
+## ➤ Events
+
+| Event Name | Payload | Description                                                         |
+| ---------- | ------- | ------------------------------------------------------------------- |
+| change     | string  | Emitted on every user's change in a search input                    |
+| idle       | string  | Emitted when the user not change input value for a provided timeout |
+| search     | string  | Emitted when the user press the 'Enter' key                         |
+
+## ➤ How to use it
+
+- Install the package of search
+
+```shell
+$ npm i @tradeshift/elements.search --save
+```
+
+- Import the component
+
+```js
+import '@tradeshift/elements.search';
+```
+
+or
+
+```html
+<script src="node_modules/@tradeshift/elements.search/lib/search.umd.js"></script>
+```
+
+- Use it like [demo]("https://tradeshift.github.io/elements/?path=/story/ts-search--default")
+
+- Our components rely on having the `Open Sans` available, You can see the `font-weight` and `font-style` you need to load [here](https://github.com/Tradeshift/elements/blob/master/packages/core/src/fonts.css), or you can just load it from our package (for now)
+
+```html
+<link rel="stylesheet" href="node_modules/@tradeshift/elements/src/fonts.css" />
+```
+
+## ➤ Polyfills
+
+For supporting IE11 you need to add couple of things
+
+- Don't shim CSS Custom Properties in IE11
+
+```html
+<!-- Place this in the <head>, before the Web Component polyfills are loaded -->
+<script>
+	if (!window.Promise) {
+		window.ShadyCSS = { nativeCss: true };
+	}
+</script>
+```
+
+##### You have two options for polyfills library:
+
+1. Use [`@open-wc/polyfills-loader`](https://github.com/open-wc/open-wc/tree/master/packages/polyfills-loader)
+
+- Installation
+
+```shell
+$ npm i @open-wc/polyfills-loader
+```
+
+- Load it
+
+```js
+import loadPolyfills from '@open-wc/polyfills-loader';
+
+loadPolyfills().then(() => import('./my-app.js'));
+```
+
+2. Use [`@webcomponents/webcomponentsjs`](https://github.com/webcomponents/polyfills/tree/master/packages/webcomponentsjs)
+
+- Installation
+
+```hell
+$ npm i @webcomponents/webcomponentsjs --save
+```
+
+- Enable ES5 class-less Custom Elements
+
+```html
+<script src="/node_modules/@webcomponents/webcomponentsjs/custom-elements-es5-adapter.js"></script>
+```
+
+- Load appropriate polyfills and shims with [`@webcomponents/webcomponentsjs`](https://github.com/webcomponents/webcomponentsjs)
+
+```html
+<script src="/node_modules/@webcomponents/webcomponentsjs/webcomponents-loader.js" defer></script>
+```
+
+## ➤ How to contribute
+
+Thanks for your interest and help!
+
+- First thing you need to do is read this [[Component Checklist](https://github.com/Tradeshift/elements/wiki/Component-checklist)] which contains lots of important information about what you need to consider when you are creating/changing components
+
+##### [General info](https://github.com/Tradeshift/elements/wiki/Useful-materials-starter)
+
+You can find some [links to useful materials](https://github.com/Tradeshift/elements/wiki/Useful-materials-starter) about what we are using and some tutorials and articles that can help you get started.
+
+## ➤ [Polyfill Limitations](https://github.com/Tradeshift/elements/wiki/Polyfill-Limitations)
+
+You can see a list of limitations that we should watch out for, [here](https://github.com/Tradeshift/elements/wiki/Polyfill-Limitations)
+
+## ➤ License
+
+- You can always create forks on GitHub, submit Issues and Pull Requests.
+- You can only use Tradeshift Elements to make apps on a Tradeshift platform, e.g. tradeshift.com.
+- You can fix a bug until the bugfix is deployed by Tradeshift.
+- You can host Tradeshift Elements yourself.
+- If you want to make a bigger change or just want to talk with us, reach out to our team here on GitHub.
+
+You can read the full license agreement in the [LICENSE.md](https://github.com/Tradeshift/elements/blob/master/LICENSE.md).

packages/components/search/package.json

@@ -0,0 +1,14 @@
+{
+  "name": "@tradeshift/elements.search",
+  "version": "0.5.0",
+  "src": "src/search.js",
+  "main": "lib/search.umd.js",
+  "browser": "lib/search.umd.js",
+  "files": [
+    "lib/*"
+  ],
+  "dependencies": {
+    "@tradeshift/elements": "^0.5.0",
+    "@tradeshift/elements.icon": "^0.5.0"
+  }
+}

packages/components/search/src/search.css

@@ -0,0 +1,46 @@
+/* General........................................................ */
+
+.search-container {
+	align-items: center;
+	background-color: var(--ts-color-white);
+	border: var(--ts-border);
+	border-radius: var(--ts-unit-double);
+	display: flex;
+	height: var(--ts-unit-double);
+
+	&.focused {
+		border: var(--ts-border-focus);
+	}
+}
+
+input {
+	border: 0;
+	flex: 1;
+	font-size: var(--ts-font-size-default);
+	line-height: var(--ts-unit);
+
+	/* hide a default clear input button in IE */
+	&::-ms-clear {
+		display: none;
+	}
+}
+
+.icon-container {
+	align-items: center;
+	display: flex;
+	height: var(--ts-unit-double);
+	margin: 0;
+	width: var(--ts-unit-double);
+}
+
+ts-icon {
+	margin: 0 auto;
+	--ts-icon-color: var(--ts-color-slate-lightest);
+}
+
+.close-icon {
+	cursor: pointer;
+	/* in IE 11 the 'circular' property not work, so we need to set it explicitly here */
+	background-color: var(--ts-color-slate-lightest);
+	border-radius: 50%;
+}