liferay · jbalsas · Jan 22, 2018 · Jan 22, 2018 · Jan 22, 2018 · Jan 22, 2018
diff --git a/packages/clay-portal/LICENSE.md b/packages/clay-portal/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-portal/README.md b/packages/clay-portal/README.md
@@ -0,0 +1,26 @@
+# clay-portal
+
+Component which renders content to portal element
+
+## 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-portal/demos/a11y.html b/packages/clay-portal/demos/a11y.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayPortal</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-portal.js"></script>
+</head>
+<body class="container">
+	<h1 class="page-title">
+		ClayPortal
+	</h1>
+
+	<div id="container"></div>
+
+	<script type="text/javascript">
+
+		var comp = new metal.ClayPortal({
+			content: function() {
+				IncrementalDOM.elementOpen('div');
+				IncrementalDOM.text('Portal');
+				IncrementalDOM.elementClose('div');
+			}
+		}, '#container');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-portal/demos/index.html b/packages/clay-portal/demos/index.html
@@ -0,0 +1,41 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<meta name="viewport" content="width=device-width, initial-scale=1.0">
+	<title>Demo: ClayPortal</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-portal.js"></script>
+</head>
+<body class="container">
+	<h1 class="page-title">
+		ClayPortal
+	</h1>
+
+	<div id="container"></div>
+
+	<script type="text/javascript">
+
+		var comp = new metal.ClayPortal({
+			content: function() {
+				IncrementalDOM.elementOpen('div');
+				IncrementalDOM.text('Portal');
+				IncrementalDOM.elementClose('div');
+			}
+		}, '#container');
+
+	</script>
+</body>
+</html>
diff --git a/packages/clay-portal/package.json b/packages/clay-portal/package.json
@@ -0,0 +1,50 @@
+{
+  "name": "clay-portal",
+  "version": "1.0.0-alpha.8",
+  "description": "Metal ClayPortal component",
+  "license": "BSD",
+  "repository": "https://github.com/metal/metal-clay-components/tree/master/packages/clay-portal",
+  "engines": {
+    "node": ">=0.12.0",
+    "npm": ">=3.0.0"
+  },
+  "main": "lib/ClayPortal.js",
+  "esnext:main": "src/ClayPortal.js",
+  "jsnext:main": "src/ClayPortal.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"
+  },
+  "keywords": [
+    "clay",
+    "metal"
+  ],
+  "dependencies": {
+    "metal": "^2.14.0",
+    "metal-component": "^2.14.0",
+    "metal-soy": "^2.14.0",
+    "metal-state": "^2.15.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.4",
+    "metal-dom": "^2.13.2",
+    "metal-tools-soy": "^4.2.1",
+    "webpack": "^3.0.0"
+  },
+  "browserslist": [
+    "extends browserslist-config-clay-components"
+  ]
+}
diff --git a/packages/clay-portal/src/ClayPortal.js b/packages/clay-portal/src/ClayPortal.js
@@ -0,0 +1,31 @@
+import Component from 'metal-component';
+import Soy from 'metal-soy';
+import {Config} from 'metal-state';
+
+import templates from './ClayPortal.soy.js';
+
+/**
+ * Metal ClayPortal component.
+ */
+class ClayPortal extends Component {}
+
+/**
+ * State definition.
+ * @static
+ * @type {!Object}
+ */
+ClayPortal.STATE = {
+	/**
+	 * CSS classes to be applied to the element.
+	 * @instance
+	 * @memberof ClayPortal
+	 * @type {!html|string}
+	 * @default undefined
+	 */
+	content: Config.required(),
+};
+
+Soy.register(ClayPortal, templates);
+
+export {ClayPortal};
+export default ClayPortal;
diff --git a/packages/clay-portal/src/ClayPortal.soy b/packages/clay-portal/src/ClayPortal.soy
@@ -0,0 +1,10 @@
+{namespace ClayPortal}
+
+/**
+ * This renders the component's whole content.
+ */
+{template .render}
+	{@param content: html}
+
+	{$content}
+{/template}
diff --git a/packages/clay-portal/src/__tests__/.eslintrc b/packages/clay-portal/src/__tests__/.eslintrc
@@ -0,0 +1,5 @@
+{
+	"globals": {
+		"IncrementalDOM": true
+	}
+}
diff --git a/packages/clay-portal/src/__tests__/ClayPortal.js b/packages/clay-portal/src/__tests__/ClayPortal.js
@@ -0,0 +1,23 @@
+import ClayPortal from '../ClayPortal';
+
+let component;
+
+describe('ClayPortal', function() {
+	afterEach(() => {
+		if (component) {
+			component.dispose();
+		}
+	});
+
+	it('should render the content', () => {
+		component = new ClayPortal({
+			content: function() {
+				IncrementalDOM.elementOpen('div');
+				IncrementalDOM.text('Portal');
+				IncrementalDOM.elementClose('div');
+			},
+		});
+
+		expect(component).toMatchSnapshot();
+	});
+});
diff --git a/packages/clay-portal/src/__tests__/__snapshots__/ClayPortal.js.snap b/packages/clay-portal/src/__tests__/__snapshots__/ClayPortal.js.snap
@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`ClayPortal should render the content 1`] = `<div>Portal</div>`;
diff --git a/packages/clay-portal/webpack.config.js b/packages/clay-portal/webpack.config.js
@@ -0,0 +1,32 @@
+const path = require('path');
+const webpack = require('webpack');
+
+module.exports = {
+	entry: './src/ClayPortal.js',
+	module: {
+		rules: [
+			{
+				test: /\.js$/,
+				exclude: /(node_modules|bower_components)/,
+				use: {
+					loader: 'babel-loader',
+					options: {
+						compact: false,
+						presets: ['babel-preset-env'],
+						plugins: ['babel-plugin-transform-node-env-inline'],
+					},
+				},
+			},
+		],
+	},
+	devtool: 'cheap-module-source-map',
+	output: {
+		library: 'metal',
+		libraryTarget: 'this',
+		filename: './build/globals/clay-portal.js',
+	},
+	plugins: [new webpack.optimize.ModuleConcatenationPlugin()],
+	resolve: {
+		mainFields: ['esnext:main', 'main'],
+	},
+};
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		// Jest Snapshot v1, https://goo.gl/fbAQLP

		exports[`ClayPortal should render the content 1`] = `<div>Portal</div>`;