Fixes #1285 - Create ClayLabelsInputField component

liferay · Nov 7, 2018 · 045baef · 045baef
1 parent 3d63d96
commit 045baef
Show file tree

Hide file tree

Showing 11 changed files with 1,141 additions and 0 deletions.
diff --git a/packages/clay-labels-input-field/LICENSE.md b/packages/clay-labels-input-field/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-labels-input-field/README.md b/packages/clay-labels-input-field/README.md
@@ -0,0 +1,25 @@
+# clay-labels-input-field
+
+
+## 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-labels-input-field/demos/a11y.html b/packages/clay-labels-input-field/demos/a11y.html
@@ -0,0 +1,141 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayLabelsInputField</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-labels-input-field.js"></script>
+</head>
+<body class="container" role="main">
+	<h1 class="page-title" id="pageTitle">
+		ClayLabelsInputField
+	</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 autocomplete</h2>
+			<div id="autocomplete-block"></div>
+		</div>
+	</div>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>With autocomplete and interaction</h2>
+			<div id="interaction-block"></div>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+
+		const spritemap = '../../../node_modules/clay-css/lib/images/icons/icons.svg';
+		const selectedLabels = [
+			{
+				label: 'bread'
+			},
+			{
+				label: 'ammonia cookie'
+			}
+		];
+		const dataProvider = [
+			'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.ClayLabelsInputField({
+			helpText: 'You can use a comma to enter tags',
+			label: 'Tags',
+			selectedLabels,
+			spritemap,
+		}, '#default-block');
+
+		// With autocomplete
+		new metal.ClayLabelsInputField({
+			events: {
+				queryChange: (event) => {
+					const query = event.data.value;
+
+					if (query) {
+						const filterAutocomplete = event.target.filterAutocomplete;
+						event.target.filteredItems = filterAutocomplete(dataProvider, query);
+					} else {
+						event.target.filteredItems = [];
+					}
+				}
+			},
+			helpText: 'You can use a comma to enter tags',
+			label: 'Tags',
+			selectedLabels,
+			spritemap,
+		}, '#autocomplete-block');
+
+		// With autocomplete and interaction
+		new metal.ClayLabelsInputField({
+			label: 'Tags',
+			selectedLabels,
+			spritemap,
+			events: {
+				labelAdded: (event) => {
+					selectedLabels.push({label: event.data.value});
+					event.target.selectedLabels = selectedLabels;
+					event.target.clearInput();
+					event.target.filteredItems = [];
+				},
+				labelRemoved: (event) => {
+					selectedLabels.splice(Number(event.data.index), 1);
+					event.target.selectedLabels = selectedLabels;
+				},
+				queryChange: (event) => {
+					const query = event.data.value;
+
+					if (query) {
+						const filterAutocomplete = event.target.filterAutocomplete;
+						event.target.filteredItems = filterAutocomplete(dataProvider, query);
+					} else {
+						event.target.filteredItems = [];
+					}
+				}
+			},
+			helpText: 'You can use a comma to enter tags',
+		}, '#interaction-block');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-labels-input-field/demos/index.html b/packages/clay-labels-input-field/demos/index.html
@@ -0,0 +1,151 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayLabelsInputField</title>
+
+	<link rel="stylesheet" href="../../../node_modules/clay-css/lib/css/atlas.css">
+
+	<style>
+		body {
+			background-color: #FFF;
+		}
+
+		.row {
+			margin-bottom: 20px;
+		}
+
+		.label-focus {
+			background-color: #0B5FFF;
+			border-color: #0B5FFF;
+			color: #FFF;
+		}
+
+		.dropdown-full {
+			position: relative;
+		}
+	</style>
+
+	<script src="../build/globals/clay-labels-input-field.js"></script>
+</head>
+<body class="container" role="main">
+	<h1 class="page-title" id="pageTitle">
+		ClayLabelsInputField
+	</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 autocomplete</h2>
+			<div id="autocomplete-block"></div>
+		</div>
+	</div>
+
+	<div class="row row-spacing">
+		<div class="col">
+			<h2>With autocomplete and interaction</h2>
+			<div id="interaction-block"></div>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+
+		const spritemap = '../../../node_modules/clay-css/lib/images/icons/icons.svg';
+		const selectedLabels = [
+			{
+				label: 'bread'
+			},
+			{
+				label: 'ammonia cookie'
+			}
+		];
+		const dataProvider = [
+			'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.ClayLabelsInputField({
+			helpText: 'You can use a comma to enter tags',
+			label: 'Tags',
+			selectedLabels,
+			spritemap,
+		}, '#default-block');
+
+		// With autocomplete
+		new metal.ClayLabelsInputField({
+			events: {
+				queryChange: (event) => {
+					const query = event.data.value;
+
+					if (query) {
+						const filterAutocomplete = event.target.filterAutocomplete;
+						event.target.filteredItems = filterAutocomplete(dataProvider, query);
+					} else {
+						event.target.filteredItems = [];
+					}
+				}
+			},
+			helpText: 'You can use a comma to enter tags',
+			label: 'Tags',
+			selectedLabels,
+			spritemap,
+		}, '#autocomplete-block');
+
+		// With autocomplete and interaction
+		new metal.ClayLabelsInputField({
+			label: 'Tags',
+			selectedLabels,
+			spritemap,
+			events: {
+				labelAdded: (event) => {
+					selectedLabels.push({label: event.data.value});
+					event.target.selectedLabels = selectedLabels;
+					event.target.clearInput();
+					event.target.filteredItems = [];
+				},
+				labelRemoved: (event) => {
+					selectedLabels.splice(Number(event.data.index), 1);
+					event.target.selectedLabels = selectedLabels;
+				},
+				queryChange: (event) => {
+					const query = event.data.value;
+
+					if (query) {
+						const filterAutocomplete = event.target.filterAutocomplete;
+						event.target.filteredItems = filterAutocomplete(dataProvider, query);
+					} else {
+						event.target.filteredItems = [];
+					}
+				}
+			},
+			helpText: 'You can use a comma to enter tags',
+		}, '#interaction-block');
+
+	</script>
+</body>
+</html>