Added an implementation of a 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

@@ -42,14 +42,16 @@
 						'button',
 						'button-group',
 						'card',
+						'checkbox',
 						'cover',
 						'file-card',
 						'file-size',
 						'file-uploader-input',
 						'progress-bar',
 						'help-text',
 						'note',
-						'spinner'
+						'spinner',
+						'search'
 					];
 					components.forEach(function(component) {
 						var el = document.createElement('script');
@@ -640,6 +642,41 @@ <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>
+			</article>
 			<ts-aside data-title="hello" id="my-aside">
 				<ts-note slot="note">
 					Takimata gubergren sadipscing sed consetetur gubergren , nonumy diam clita aliquyam consetetur sadipscing,

lerna.json

@@ -1,4 +1,4 @@
 {
 	"packages": ["packages/components/*", "packages/core"],
-	"version": "0.4.5"
+	"version": "0.5.0"
 }

package.json

@@ -29,8 +29,8 @@
     "build-storybook": "build-storybook -s ./static -o .out",
     "build:prod": "cross-env PRODUCTION=true npm run build",
     "clean": "cross-env-shell lerna exec -- rm -f ./lib/*",
-    "clean-install": "run-s clean clean-node-modules lerna:bootstrap:no-ci",
-    "clean-node-modules": "cross-env-shell rm -rf node_modules/ packages/**/**/node_modules/",
+    "lerna-clean": "cross-env-shell lerna clean",
+    "clean-install": "run-s clean lerna-clean lerna:bootstrap:no-ci",
     "component-gen": "plop",
     "copy:static": "./tasks/copy-static.sh",
     "dev": "run-p watch server-reload",
@@ -84,6 +84,7 @@
     "@tradeshift/elements.button": "file:packages/components/button",
     "@tradeshift/elements.button-group": "file:packages/components/button-group",
     "@tradeshift/elements.card": "file:packages/components/card",
+    "@tradeshift/elements.checkbox": "file:packages/components/checkbox",
     "@tradeshift/elements.cover": "file:packages/components/cover",
     "@tradeshift/elements.file-card": "file:packages/components/file-card",
     "@tradeshift/elements.file-size": "file:packages/components/file-size",
@@ -94,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/aside/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@tradeshift/elements.aside",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "src": "src/aside.js",
   "main": "lib/aside.umd.js",
   "browser": "lib/aside.umd.js",
   "files": [
     "lib/*"
   ],
   "dependencies": {
-    "@tradeshift/elements": "^0.4.5",
-    "@tradeshift/elements.button": "^0.4.5",
-    "@tradeshift/elements.cover": "^0.4.5"
+    "@tradeshift/elements": "^0.5.0",
+    "@tradeshift/elements.button": "^0.5.0",
+    "@tradeshift/elements.cover": "^0.5.0"
   }
 }

packages/components/aside/src/aside.css

@@ -19,6 +19,24 @@
 	display: none;
 }
 
+/* Spinner........................................................ */
+.spinner-overlay {
+	position: absolute;
+	top: var(--ts-unit-triple);
+	right: 0;
+	bottom: 0;
+	left: 0;
+	background-color: rgba(255, 255, 255, 0.7);
+}
+
+.aside-container ts-spinner {
+	position: absolute;
+	top: 50%;
+	left: 50%;
+	margin-top: calc(-0.5 * var(--spinner-size-large));
+	margin-left: calc(-0.5 * var(--spinner-size-large));
+}
+
 /* Header......................................................... */
 
 .aside-container header {

packages/components/aside/src/aside.js

@@ -2,6 +2,7 @@ import { TSElement, unsafeCSS, html, customElementDefineHelper } from '@tradeshi
 import css from './aside.css';
 import '@tradeshift/elements.button';
 import '@tradeshift/elements.cover';
+import '@tradeshift/elements.spinner';
 import { customEventNames } from './utils';
 
 customElementDefineHelper(
@@ -15,6 +16,7 @@ customElementDefineHelper(
 			return {
 				title: { type: String, attribute: 'data-title' },
 				visible: { type: Boolean, attribute: 'data-visible', reflect: true },
+				busy: { type: String, attribute: 'data-busy', reflect: true },
 				hasFoot: { type: Boolean },
 				hasPlatformObject: { type: Boolean }
 			};
@@ -53,6 +55,17 @@ customElementDefineHelper(
 			return `${pre}-${mid}-${dir}`;
 		}
 
+		get spinner() {
+			if (this.busy === undefined || this.busy === null) {
+				return '';
+			}
+			return html`
+				<div class="spinner-overlay">
+					<ts-spinner data-visible data-message="${this.busy}"></ts-spinner>
+				</div>
+			`;
+		}
+
 		render() {
 			return html`
 				<div dir="${this.direction}" class="aside-container ${this.slide} ${this.hasFoot ? 'has-footer' : ''}">
@@ -65,7 +78,7 @@ customElementDefineHelper(
 					<div class="aside-note">
 						<slot name="note" class="note-in-aside"></slot>
 					</div>
-					<div class="aside-platform-object ${this.hasPlatformObject ? '' : 'hidden'}"">
+					<div class="aside-platform-object ${this.hasPlatformObject ? '' : 'hidden'}">
 						<slot name="platform-object" @slotchange="${this.platformObjectSlot}"></slot>
 					</div>
 					<main class="aside-main">
@@ -74,6 +87,7 @@ customElementDefineHelper(
 					<footer>
 						<slot name="footer" @slotchange="${this.footerSlot}"></slot>
 					</footer>
+					${this.spinner}
 				</div>
 				<ts-cover class="ts-aside-cover" ?data-visible=${this.visible} @click="${this.close}"></ts-cover>
 			`;

packages/components/aside/stories/aside.stories.js

@@ -12,8 +12,9 @@ storiesOf('ts-aside', module)
 		() => {
 			const title = text('Title', 'Aside');
 			const visible = boolean('Visible', true);
+			const busy = boolean('Busy', false);
 			return html`
-				<ts-aside data-title="${title}" ?data-visible="${visible}">
+				<ts-aside data-title="${title}" ?data-busy="${busy}" ?data-visible="${visible}">
 					<ts-panel slot="main">
 						These oft shamed not mothernot now harolds tear congealed virtues. To hall riot awake parasites ye his
 						mirthful beyond. Such sighed his start glee had soon yes if, domestic days for labyrinth her within in
@@ -33,8 +34,9 @@ storiesOf('ts-aside', module)
 		() => {
 			const title = text('Title', 'Aside');
 			const visible = boolean('Visible', true);
+			const busy = boolean('Busy', false);
 			return html`
-				<ts-aside data-title="${title}" ?data-visible="${visible}">
+				<ts-aside data-title="${title}" ?data-busy="${busy}" ?data-visible="${visible}">
 					<ts-panel slot="main">
 						Forse donne speranza siamo esperienza mentre seguitando sé nostro l'uomo, dare e di da prestasse noi non.
 						Mentre di alcun vita forza siamo sua io in sogiacere, ciascheduna reputiamo primo forse porgiamo dovendo
@@ -52,8 +54,9 @@ storiesOf('ts-aside', module)
 		'With note',
 		() => {
 			const visible = boolean('Visible', true);
+			const busy = boolean('Busy', false);
 			return html`
-				<ts-aside data-title="Aside with note" ?data-visible="${visible}">
+				<ts-aside data-title="Aside with note" ?data-busy="${busy}" ?data-visible="${visible}">
 					<ts-note slot="note">
 						Takimata sed sea lorem kasd sit est.
 					</ts-note>

packages/components/button-group/package.json

@@ -1,15 +1,15 @@
 {
   "name": "@tradeshift/elements.button-group",
-  "version": "0.4.5",
+  "version": "0.5.0",
   "src": "src/button-group.js",
   "main": "lib/button-group.umd.js",
   "browser": "lib/button-group.umd.js",
   "files": [
     "lib/*"
   ],
   "dependencies": {
-    "@tradeshift/elements": "^0.4.5",
-    "@tradeshift/elements.button": "^0.4.5"
+    "@tradeshift/elements": "^0.5.0",
+    "@tradeshift/elements.button": "^0.5.0"
   },
   "gitHead": "e88391ca0cd629eac27ed1ca70ccdb64c1b31b7a"
 }

packages/components/button/package.json

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

packages/components/card/package.json

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