Merge 9a2c5d7 into 54ab80e

package.json

@@ -9,7 +9,7 @@
     "jest": "jest",
     "lerna": "lerna bootstrap -- --no-optional --no-package-lock",
     "lint": "eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js && npm run mcritic",
-    "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,generator-metal-clay,clay-dropdown,clay-alert,clay-list,clay-management-toolbar,clay-card,node_modules}/**'",
+    "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,generator-metal-clay,clay-dropdown,clay-alert,clay-grid,clay-list,clay-management-toolbar,clay-card,node_modules}/**'",
     "precommit": "lint-staged",
     "prettier": "prettier-eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js",
     "start": "http-server . -p 4000",

packages/clay-card/src/ClayCard.js

@@ -14,7 +14,16 @@ import templates from './ClayCard.soy.js';
 /**
  * Metal ClayCard component.
  */
-class ClayCard extends Component {}
+class ClayCard extends Component {
+	/**
+	 * Continues the propagation of the checkbox changed event
+	 * @param {!Event} event
+	 * @private
+	 */
+	handleItemCheckboxClick_(event) {
+		this.emit('itemToggled', event);
+	}
+}
 
 /**
  * State definition.

packages/clay-card/src/ClayCard.soy

@@ -15,6 +15,7 @@
 	{@param? elementClasses: string}
 	{@param? fileType: string}
 	{@param? fileTypeStyle: string}
+	{@param? handleItemCheckboxClick_: any}
 	{@param? href: string}
 	{@param? icon: string}
 	{@param? id: string}
@@ -78,6 +79,7 @@
 					{call ClayCheckbox.render}
 						{param checked: $selected /}
 						{param disabled: $disabled /}
+						{param events: ['change': $handleItemCheckboxClick_] /}
 						{param labelContent kind="html"}
 							{$visualArea}
 						{/param}

packages/clay-card/src/ClayFileCard.js

@@ -12,7 +12,16 @@ import templates from './ClayFileCard.soy.js';
 /**
  * Metal ClayFileCard component.
  */
-class ClayFileCard extends Component {}
+class ClayFileCard extends Component {
+	/**
+	 * Continues the propagation of the checkbox changed event
+	 * @param {!Event} event
+	 * @private
+	 */
+	handleItemToggled_(event) {
+		this.emit('itemToggled', event);
+	}
+}
 
 /**
  * State definition.

packages/clay-card/src/ClayFileCard.soy

@@ -15,6 +15,7 @@
     {@param? elementClasses: string}
     {@param? fileType: string}
     {@param? fileTypeStyle: string}
+    {@param? handleItemToggled_: any}
     {@param? href: string}
     {@param? icon: string}
     {@param? id: string}
@@ -40,6 +41,7 @@
         {param contentRenderer: 'file' /}
         {param disabled: $disabled /}
         {param elementClasses: $classes /}
+        {param events: ['itemToggled': $handleItemToggled_ ] /}
         {param fileType: $fileType /}
         {param fileTypeStyle: $fileTypeStyle /}
         {param icon: $icon ?: 'documents-and-media' /}

packages/clay-card/src/ClayHorizontalCard.js

@@ -13,7 +13,16 @@ import templates from './ClayHorizontalCard.soy.js';
 /**
  * Metal ClayHorizontalCard component.
  */
-class ClayHorizontalCard extends Component {}
+class ClayHorizontalCard extends Component {
+	/**
+	 * Continues the propagation of the checkbox changed event
+	 * @param {!Event} event
+	 * @private
+	 */
+	handleItemCheckboxClick_(event) {
+		this.emit('itemToggled', event);
+	}
+}
 
 /**
  * State definition.

packages/clay-card/src/ClayHorizontalCard.soy

@@ -13,6 +13,7 @@
 	]>}
 	{@param? disabled: bool}
 	{@param? elementClasses: string}
+	{@param? handleItemCheckboxClick_: any}
 	{@param? href: string}
 	{@param? icon: string}
 	{@param? id: string}
@@ -54,6 +55,7 @@
 			{call ClayCheckbox.render}
 				{param checked: $selected /}
 				{param disabled: $disabled /}
+				{param events: ['change': $handleItemCheckboxClick_] /}
 				{param labelContent kind="html"}
 					<div class="card card-horizontal">
 						{$descriptiveArea}

packages/clay-card/src/ClayImageCard.js

@@ -12,7 +12,16 @@ import templates from './ClayImageCard.soy.js';
 /**
  * Metal ClayImageCard component.
  */
-class ClayImageCard extends Component {}
+class ClayImageCard extends Component {
+	/**
+	 * Continues the propagation of the checkbox changed event
+	 * @param {!Event} event
+	 * @private
+	 */
+	handleItemToggled_(event) {
+		this.emit('itemToggled', event);
+	}
+}
 
 /**
  * State definition.

packages/clay-card/src/ClayImageCard.soy

@@ -14,6 +14,7 @@
     {@param? elementClasses: string}
     {@param? fileType: string}
     {@param? fileTypeStyle: string}
+    {@param? handleItemToggled_: any}
     {@param? href: string}
     {@param? icon: string}
     {@param? id: string}
@@ -42,6 +43,7 @@
         {param contentRenderer: 'image' /}
         {param disabled: $disabled /}
         {param elementClasses: $classes /}
+        {param events: ['itemToggled': $handleItemToggled_ ] /}
         {param fileType: $fileType /}
         {param fileTypeStyle: $fileTypeStyle /}
         {param href: $href /}

packages/clay-card/src/ClayUserCard.js

@@ -13,7 +13,16 @@ import templates from './ClayUserCard.soy.js';
 /**
  * Metal ClayUserCard component.
  */
-class ClayUserCard extends Component {}
+class ClayUserCard extends Component {
+	/**
+	 * Continues the propagation of the checkbox changed event
+	 * @param {!Event} event
+	 * @private
+	 */
+	handleItemToggled_(event) {
+		this.emit('itemToggled', event);
+	}
+}
 
 /**
  * State definition.

packages/clay-card/src/ClayUserCard.soy

@@ -12,6 +12,7 @@
     ]>}
     {@param? disabled: bool}
     {@param? elementClasses: string}
+    {@param? handleItemToggled_: any}
     {@param? href: string}
     {@param? id: string}
     {@param? imageAlt: string}
@@ -37,6 +38,7 @@
         {param contentRenderer: 'user' /}
         {param disabled: $disabled /}
         {param elementClasses: $elementClasses /}
+        {param events: ['itemToggled': $handleItemToggled_ ] /}
         {param fileType: $initials /}
         {param fileTypeStyle: $userColor /}
         {param href: $href /}

packages/clay-card/src/__tests__/ClayFileCard.js

@@ -366,6 +366,21 @@ describe('ClayFileCard', function() {
 		expect(component).toMatchSnapshot();
 	});
 
+	it('should render a selectable ClayFileCard and emit an event on item toggle', () => {
+		component = new ClayFileCard({
+			selectable: true,
+			spritemap: spritemap,
+			title: 'My Title',
+		});
+
+		const spy = jest.spyOn(component, 'emit');
+
+		component.element.querySelector('input[type="checkbox"]').click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith('itemToggled', expect.any(Object));
+	});
+
 	it('should fail when no spritemap is passed', function() {
 		expect(() => {
 			component = new ClayFileCard({

packages/clay-card/src/__tests__/ClayHorizontalCard.js

@@ -133,6 +133,21 @@ describe('ClayHorizontalCard', function() {
 		expect(component).toMatchSnapshot();
 	});
 
+	it('should render a selectable ClayHorizontalCard and emit an event on item toggle', () => {
+		component = new ClayHorizontalCard({
+			selectable: true,
+			spritemap: spritemap,
+			title: 'My Title',
+		});
+
+		const spy = jest.spyOn(component, 'emit');
+
+		component.element.querySelector('input[type="checkbox"]').click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith('itemToggled', expect.any(Object));
+	});
+
 	it('should fail when no spritemap is passed', function() {
 		expect(() => {
 			component = new ClayHorizontalCard({

packages/clay-card/src/__tests__/ClayImageCard.js

@@ -386,6 +386,21 @@ describe('ClayImageCard', function() {
 		expect(component).toMatchSnapshot();
 	});
 
+	it('should render a selectable ClayImageCard and emit an event on item toggle', () => {
+		component = new ClayImageCard({
+			selectable: true,
+			spritemap: spritemap,
+			title: 'My Title',
+		});
+
+		const spy = jest.spyOn(component, 'emit');
+
+		component.element.querySelector('input[type="checkbox"]').click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith('itemToggled', expect.any(Object));
+	});
+
 	it('should fail when no title is passed', function() {
 		expect(() => {
 			component = new ClayImageCard();

packages/clay-card/src/__tests__/ClayUserCard.js

@@ -251,6 +251,21 @@ describe('ClayUserCard', function() {
 		expect(component).toMatchSnapshot();
 	});
 
+	it('should render a selectable ClayUserCard and emit an event on item toggle', () => {
+		component = new ClayUserCard({
+			name: 'User Name',
+			selectable: true,
+			spritemap: spritemap,
+		});
+
+		const spy = jest.spyOn(component, 'emit');
+
+		component.element.querySelector('input[type="checkbox"]').click();
+
+		expect(spy).toHaveBeenCalled();
+		expect(spy).toHaveBeenCalledWith('itemToggled', expect.any(Object));
+	});
+
 	it('should fail when no name is passed', function() {
 		expect(() => {
 			component = new ClayUserCard();

packages/clay-grid/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.

packages/clay-grid/README.md

@@ -0,0 +1,26 @@
+# clay-grid
+
+Metal ClayGrid 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.