deprecate · jbalsas · Jan 15, 2018 · Jan 12, 2018 · Jan 12, 2018 · Jan 12, 2018
diff --git a/packages/clay-dropdown/src/ClayDropdownBase.js b/packages/clay-dropdown/src/ClayDropdownBase.js
@@ -208,6 +208,15 @@ ClayDropdownBase.STATE = {
 	 */
 	caption: Config.string(),
 
+	/**
+	 * Content Renderer name of items.
+	 * @instance
+	 * @memberof ClayDropdownBase
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	contentRenderer: Config.string(),
+
 	/**
 	 * CSS classes to be applied to the element.
 	 * @instance

diff --git a/packages/clay-dropdown/src/ClayDropdownBase.soy b/packages/clay-dropdown/src/ClayDropdownBase.soy
@@ -8,6 +8,7 @@
 	{@param label: html|string}
 	{@param? button: ?}
 	{@param? caption: string}
+	{@param? contentRenderer: string}
 	{@param? elementClasses: string}
 	{@param? expanded: bool}
 	{@param? handleButtonClick_: any}
@@ -48,6 +49,7 @@
 		{call .sections}
 			{param button: $button /}
 			{param caption: $caption /}
+			{param contentRenderer: $contentRenderer /}
 			{param expanded: $expanded /}
 			{param handleButtonClick_: $handleButtonClick_ /}
 			{param handleItemClick_: $handleItemClick_ /}
@@ -61,36 +63,6 @@
 	</div>
 {/template}
 
-/**
- * Renders a list of items
- */
-{template .items}
-	{@param items: list<?>}
-	{@param? handleItemClick_: any}
-	{@param? isInList: bool}
-	{@param? itemsIconAlignment: string}
-	{@param? spritemap: string}
-
-	{foreach $item in $items}
-		{delcall ClayDropdownBase.Item variant="$item.type ?: 'item'"}
-			{param active: $item.active /}
-			{param checked: $item.checked /}
-			{param disabled: $item.disabled /}
-			{param handleItemClick_: $handleItemClick_ /}
-			{param href: $item.href /}
-			{param icon: $item.icon /}
-			{param inputName: $item.inputName /}
-			{param inputValue: $item.inputValue /}
-			{param isInList: $isInList /}
-			{param items: $item.items /}
-			{param itemsIconAlignment: $itemsIconAlignment /}
-			{param label: $item.label ?: '' /}
-			{param separator: $item.separator /}
-			{param spritemap: $spritemap /}
-		{/delcall}
-	{/foreach}
-{/template}
-
 /**
  * Renders a search input
  */
@@ -121,6 +93,7 @@
 	{@param items: list<?>}
 	{@param? button: ?}
 	{@param? caption: string}
+	{@param? contentRenderer: string}
 	{@param? expanded: bool}
 	{@param? handleButtonClick_: any}
 	{@param? handleItemClick_: any}
@@ -159,13 +132,13 @@
 			{/if}
 
 			{let $itemList kind="html"}
-				{call .items}
+				{delcall ClayDropdownBase.Items variant="$contentRenderer"}
 					{param handleItemClick_: $handleItemClick_ /}
 					{param isInList: $type == 'list' /}
 					{param items: $items /}
 					{param itemsIconAlignment: $itemsIconAlignment /}
 					{param spritemap: $spritemap /}
-				{/call}
+				{/delcall}
 			{/let}
 
 			{if $type == 'list'}
@@ -422,13 +395,13 @@
 	{/if}
 
 	{if $items}
-		{call ClayDropdownBase.items}
+		{delcall ClayDropdownBase.Items}
 			{param handleItemClick_: $handleItemClick_ /}
 			{param isInList: $isInList /}
 			{param items: $items /}
 			{param itemsIconAlignment: $itemsIconAlignment /}
 			{param spritemap: $spritemap /}
-		{/call}
+		{/delcall}
 	{/if}
 
 	{if $separator}
@@ -495,3 +468,33 @@
 			<div class="dropdown-divider"></div>
 	{/if}
 {/deltemplate}
+
+/**
+ * Renders a list of items
+ */
+{deltemplate ClayDropdownBase.Items}
+	{@param items: list<?>}
+	{@param? handleItemClick_: any}
+	{@param? isInList: bool}
+	{@param? itemsIconAlignment: string}
+	{@param? spritemap: string}
+
+	{foreach $item in $items}
+		{delcall ClayDropdownBase.Item variant="$item.type ?: 'item'"}
+			{param active: $item.active /}
+			{param checked: $item.checked /}
+			{param disabled: $item.disabled /}
+			{param handleItemClick_: $handleItemClick_ /}
+			{param href: $item.href /}
+			{param icon: $item.icon /}
+			{param inputName: $item.inputName /}
+			{param inputValue: $item.inputValue /}
+			{param isInList: $isInList /}
+			{param items: $item.items /}
+			{param itemsIconAlignment: $itemsIconAlignment /}
+			{param label: $item.label ?: '' /}
+			{param separator: $item.separator /}
+			{param spritemap: $spritemap /}
+		{/delcall}
+	{/foreach}
+{/deltemplate}
diff --git a/packages/clay-pagination-bar/LICENSE.md b/packages/clay-pagination-bar/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-pagination-bar/README.md b/packages/clay-pagination-bar/README.md
@@ -0,0 +1,26 @@
+# clay-pagination-bar
+
+Clay PaginationBar Component
+
+## 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-pagination-bar/demos/a11y.html b/packages/clay-pagination-bar/demos/a11y.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayPaginationBar</title>
+
+	<link rel="stylesheet" href="../../../node_modules/clay/build/css/atlas.css">
+
+	<style>
+		body {
+			background-color: #FFF;
+		}
+
+		.row {
+			margin-bottom: 20px;
+		}
+	</style>
+
+	<script src="../build/globals/clay-pagination-bar.js"></script>
+</head>
+<body class="container">
+	<div class="row row-spacing">
+			<h1>ClayPaginationBar</h1>
+		</div>
+
+		<div class="row row-spacing">
+			<div class="col">
+				<div id="container1"></div>
+			</div>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+		const spritemap = '../../../node_modules/clay/build/images/icons/icons.svg';
+
+		new metal.ClayPaginationBar({
+			baseHref: '#mySite?curPage=',
+			currentPage: 2,
+			entries: [
+				{
+					href: '#mySite?entries=5',
+					label: '5',
+				},
+				{
+					active: true,
+					href: '#mySite?entries=10',
+					label: '10',
+				},
+				{
+					href: '#mySite?entries=15',
+					label: '15',
+				},
+				{
+					href: '#mySite?entries=20',
+					label: '20',
+				},
+			],
+			selectedEntry: 1,
+			spritemap: spritemap,
+			totalEntries: 21,
+		}, '#container1');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-pagination-bar/demos/index.html b/packages/clay-pagination-bar/demos/index.html
@@ -0,0 +1,66 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayPaginationBar</title>
+
+	<link rel="stylesheet" href="../../../node_modules/clay/build/css/atlas.css">
+
+	<style>
+		body {
+			background-color: #FFF;
+		}
+
+		.row {
+			margin-bottom: 20px;
+		}
+	</style>
+
+	<script src="../build/globals/clay-pagination-bar.js"></script>
+</head>
+<body class="container">
+	<div class="row row-spacing">
+			<h1>ClayPaginationBar</h1>
+		</div>
+
+		<div class="row row-spacing">
+			<div class="col">
+				<div id="container1"></div>
+			</div>
+		</div>
+	</div>
+
+	<script type="text/javascript">
+		const spritemap = '../../../node_modules/clay/build/images/icons/icons.svg';
+
+		new metal.ClayPaginationBar({
+			baseHref: '#mySite?curPage=',
+			currentPage: 2,
+			entries: [
+				{
+					href: '#mySite?entries=5',
+					label: '5',
+				},
+				{
+					active: true,
+					href: '#mySite?entries=10',
+					label: '10',
+				},
+				{
+					href: '#mySite?entries=15',
+					label: '15',
+				},
+				{
+					href: '#mySite?entries=20',
+					label: '20',
+				},
+			],
+			selectedEntry: 1,
+			spritemap: spritemap,
+			totalEntries: 21,
+		}, '#container1');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-pagination-bar/package.json b/packages/clay-pagination-bar/package.json
@@ -0,0 +1,53 @@
+{
+  "name": "clay-pagination-bar",
+  "version": "1.0.0-alpha.8",
+  "description": "Metal ClayPaginationBar component",
+  "license": "BSD",
+  "repository": "https://github.com/metal/metal-clay-components/tree/master/packages/clay-pagination-bar",
+  "engines": {
+    "node": ">=0.12.0",
+    "npm": ">=3.0.0"
+  },
+  "main": "lib/ClayPaginationBar.js",
+  "esnext:main": "src/ClayPaginationBar.js",
+  "jsnext:main": "src/ClayPaginationBar.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-+(button|checkbox|dropdown|icon|link|pagination|radio)/src/**/*.soy'"
+  },
+  "keywords": [
+    "clay",
+    "metal"
+  ],
+  "dependencies": {
+    "clay-dropdown": "^1.0.0-alpha.12",
+    "clay-pagination": "^1.0.0-alpha.14",
+    "metal": "^2.14.0",
+    "metal-component": "^2.14.0",
+    "metal-soy": "^2.14.0",
+    "metal-state": "^2.15.0",
+    "metal-web-component": "^2.14.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-components": "^1.0.0-alpha.2",
+    "clay": "^2.0.0-beta.5",
+    "metal-dom": "^2.13.2",
+    "metal-tools-soy": "^4.2.1",
+    "webpack": "^3.0.0"
+  },
+  "browserslist": [
+    "extends browserslist-config-clay-components"
+  ]
+}