liferay · jbalsas · Dec 7, 2018 · Nov 5, 2018 · Nov 5, 2018 · Nov 7, 2018
diff --git a/jest-clay-lerna-resolver.js b/jest-clay-lerna-resolver.js
diff --git a/package.json b/package.json
@@ -30,19 +30,23 @@
     "http-server": "^0.9.0",
     "husky": "^0.14.2",
     "jest": "^20.0.4",
+    "jest-fetch-mock": "^2.0.1",
     "lerna": "^3.4.0",
     "metal-jest-serializer": "^2.0.0",
     "metal-soy-critic": "^2.4.0",
     "pa11y-ci": "^2.1.1",
     "prettier-eslint-cli": "^4.7.0"
   },
   "jest": {
+    "setupFiles": [
+      "./scripts/setupTests.js"
+    ],
     "collectCoverage": true,
     "coverageReporters": [
       "json",
       "lcov"
     ],
-    "resolver": "./jest-clay-lerna-resolver",
+    "resolver": "./scripts/jest-clay-lerna-resolver",
     "snapshotSerializers": [
       "metal-jest-serializer"
     ],
@@ -56,8 +60,12 @@
     ]
   },
   "workspaces": {
-    "packages": ["packages/*"],
-    "nohoist": ["**/clay-charts-shared"]
+    "packages": [
+      "packages/*"
+    ],
+    "nohoist": [
+      "**/clay-charts-shared"
+    ]
   },
   "resolutions": {
     "js-beautify": "1.7.5",

diff --git a/packages/clay-autocomplete/LICENSE.md b/packages/clay-autocomplete/LICENSE.md
@@ -0,0 +1,29 @@
+# Software License Agreement (BSD License)
+
+Copyright (c) 2014, Liferay Inc.
+All rights reserved.
+
+Redistribution and use of this software in source and binary forms, with or without modification, are
+permitted provided that the following conditions are met:
+
+* Redistributions of source code must retain the above
+  copyright notice, this list of conditions and the
+  following disclaimer.
+
+* 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.
+
+* The name of Liferay Inc. may not be used to endorse or promote products
+  derived from this software without specific prior
+  written permission of Liferay Inc.
+
+THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "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.
diff --git a/packages/clay-autocomplete/README.md b/packages/clay-autocomplete/README.md
@@ -0,0 +1,26 @@
+# ClayAutocomplete
+
+Autocomplete consumes local and remote data, you can use the `dataSource` API for this by passing the URL where your data is or the local data.
+
+## Setup
+
+1. Install NodeJS >= v0.12.0 and NPM >= v3.0.0, if you don't have it yet. You
+can find it [here](https://nodejs.org).
+
+2. Install local dependencies:
+
+  ```
+  npm install
+  ```
+
+3. Build the code:
+
+  ```
+  npm run build
+  ```
+
+4. Open the demo at demos/index.html on your browser.
+
+## Contribute
+
+We'd love to get contributions from you! Please, check our [Contributing Guidelines](CONTRIBUTING.md) to see how you can help us improve.
diff --git a/packages/clay-autocomplete/demos/a11y.html b/packages/clay-autocomplete/demos/a11y.html
@@ -0,0 +1,93 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayAutocomplete</title>
+
+	<link rel="stylesheet" href="../../../node_modules/clay-css/lib/css/atlas.css">
+
+	<style>
+		body {
+			background-color: #FFF;
+		}
+
+		.row {
+			margin-bottom: 20px;
+		}
+	</style>
+
+	<script src="../build/globals/clay-autocomplete.js"></script>
+</head>
+<body class="container" role="main">
+	<h1 class="page-title" id="pageTitle">
+		ClayAutocomplete
+	</h1>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>Default State</h2>
+			<div id="default-block"></div>
+		</div>
+	</div>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>With disabled autocomplete</h2>
+			<div id="disabled-autocomplete-block"></div>
+		</div>
+	</div>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>With data remote</h2>
+			<div id="data-remote-block"></div>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+		const dataSource = [
+			'Bread',
+			'Ammonia cookie',
+			'Cuisine of Antebellum America',
+			'Apple butter',
+			'Apple sauce',
+			'Baked potato',
+			'Barbecue',
+			'Bear claw',
+			'Beef Manhattan',
+			'Blue cheese dressing',
+			'Blue-plate special',
+			'Bookbinder soup',
+			'Breakfast burrito',
+			'Brunswick stew',
+			'Buffalo burger',
+			'Buffalo wing',
+			'Bull roast',
+			'Burnt ends',
+			'Butter cookie',
+		];
+
+		// Default State
+		new metal.ClayAutocomplete({
+			data: dataSource,
+			inputName: 'defaultState',
+		}, '#default-block');
+
+		// With disabled autocomplete
+		new metal.ClayAutocomplete({
+			data: dataSource,
+			enableAutocomplete: false,
+			inputName: 'disabledAutocomplete',
+		}, '#disabled-autocomplete-block');
+
+		// With data remote
+		new metal.ClayAutocomplete({
+			data: 'https://api.pro.coinbase.com/currencies',
+			extractData: (elem) => elem.name,
+			inputName: 'dataRemote',
+		}, '#data-remote-block');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-autocomplete/demos/index.html b/packages/clay-autocomplete/demos/index.html
@@ -0,0 +1,90 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayAutocomplete</title>
+
+	<link rel="stylesheet" href="../../../node_modules/clay-css/lib/css/atlas.css">
+
+	<style>
+		body {
+			background-color: #FFF;
+		}
+
+		.row {
+			margin-bottom: 20px;
+		}
+	</style>
+
+	<script src="../build/globals/clay-autocomplete.js"></script>
+</head>
+<body class="container" role="main">
+	<h1 class="page-title" id="pageTitle">
+		ClayAutocomplete
+	</h1>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>Default State</h2>
+			<div id="default-block"></div>
+		</div>
+	</div>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>With disabled autocomplete</h2>
+			<div id="disabled-autocomplete-block"></div>
+		</div>
+	</div>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>With data remote</h2>
+			<div id="data-remote-block"></div>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+		const dataSource = [
+			'Bread',
+			'Ammonia cookie',
+			'Cuisine of Antebellum America',
+			'Apple butter',
+			'Apple sauce',
+			'Baked potato',
+			'Barbecue',
+			'Bear claw',
+			'Beef Manhattan',
+			'Blue cheese dressing',
+			'Blue-plate special',
+			'Bookbinder soup',
+			'Breakfast burrito',
+			'Brunswick stew',
+			'Buffalo burger',
+			'Buffalo wing',
+			'Bull roast',
+			'Burnt ends',
+			'Butter cookie',
+		];
+
+		// Default State
+		new metal.ClayAutocomplete({
+			dataSource,
+		}, '#default-block');
+
+		// With disabled autocomplete
+		new metal.ClayAutocomplete({
+			dataSource,
+			enableAutocomplete: false,
+		}, '#disabled-autocomplete-block');
+
+		// With data remote
+		new metal.ClayAutocomplete({
+			dataSource: 'https://api.pro.coinbase.com/currencies',
+			extractData: (elem) => elem.name,
+		}, '#data-remote-block');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-autocomplete/package.json b/packages/clay-autocomplete/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "clay-autocomplete",
+  "version": "2.4.0",
+  "description": "Metal ClayAutocomplete component",
+  "license": "BSD",
+  "repository": "https://github.com/liferay/clay/tree/master/packages/clay-autocomplete",
+  "engines": {
+    "node": ">=0.12.0",
+    "npm": ">=3.0.0"
+  },
+  "main": "lib/ClayAutocomplete.js",
+  "esnext:main": "src/ClayAutocomplete.js",
+  "jsnext:main": "src/ClayAutocomplete.js",
+  "files": [
+    "lib",
+    "src",
+    "test"
+  ],
+  "scripts": {
+    "build": "npm run soy && webpack",
+    "compile": "babel -d lib/ src/ -s --ignore src/__tests__",
+    "prepublish": "npm run soy && npm run compile",
+    "soy": "metalsoy --soyDeps '../../node_modules/clay-data-provider/src/**/*.soy'"
+  },
+  "keywords": [
+    "clay",
+    "metal"
+  ],
+  "dependencies": {
+    "clay-data-provider": "^2.4.0",
+    "metal": "^2.16.0",
+    "metal-component": "^2.16.0",
+    "metal-soy": "^2.16.0",
+    "metal-state": "^2.16.0",
+    "metal-web-component": "^2.16.0"
+  },
+  "devDependencies": {
+    "babel-cli": "^6.24.1",
+    "babel-core": "^6.25.0",
+    "babel-loader": "^7.0.0",
+    "babel-plugin-transform-node-env-inline": "^0.1.1",
+    "babel-preset-env": "^1.6.0",
+    "browserslist-config-clay": "^2.1.12",
+    "clay-css": "^2.1.12",
+    "metal-dom": "^2.13.2",
+    "metal-tools-soy": "^6.0.0",
+    "webpack": "^3.0.0",
+    "webpack-config-clay": "^2.1.12"
+  },
+  "browserslist": [
+    "extends browserslist-config-clay"
+  ]
+}