Merge pull request #1410 from carloslancha/issue-1399_Clay_Component_…

…Extend Fixes #1399 - All components extend from ClayComponent
liferay · Dec 19, 2018 · b5fc2ac · b5fc2ac
2 parents 96da5f5 + 95d3741
commit b5fc2ac
Show file tree

Hide file tree

Showing 57 changed files with 717 additions and 69 deletions.
diff --git a/packages/clay-alert/package.json b/packages/clay-alert/package.json
@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "clay-button": "^2.5.0",
+    "clay-component": "^2.5.0",
     "clay-icon": "^2.5.0",
     "metal": "^2.16.0",
     "metal-component": "^2.16.0",

diff --git a/packages/clay-alert/src/ClayAlert.js b/packages/clay-alert/src/ClayAlert.js
@@ -1,5 +1,5 @@
 import './ClayAlertBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -8,9 +8,9 @@ import templates from './ClayAlert.soy.js';
 
 /**
  * Metal Clay Alert component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayAlert extends Component {
+class ClayAlert extends ClayComponent {
 	/**
 	 * @inheritDoc
 	 */
@@ -52,6 +52,25 @@ ClayAlert.STATE = {
 	 */
 	closeable: Config.bool().value(false),
 
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAlert
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAlert
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * Flag to indicate if the alert should be destroyen when close.
 	 * @default false

diff --git a/packages/clay-alert/src/ClayAlertBase.js b/packages/clay-alert/src/ClayAlertBase.js
@@ -1,6 +1,6 @@
 import 'clay-button';
 import 'clay-icon';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -10,9 +10,9 @@ import templates from './ClayAlertBase.soy.js';
 
 /**
  * Metal Clay Alert Base component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayAlertBase extends Component {
+class ClayAlertBase extends ClayComponent {
 	/**
 	 * @inheritDoc
 	 */
@@ -165,6 +165,25 @@ ClayAlertBase.STATE = {
 	 */
 	closeable: Config.bool().value(false),
 
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAlertBase
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAlertBase
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * Flag to indicate if the alert should be destroyen when close.
 	 * @default false
@@ -178,7 +197,7 @@ ClayAlertBase.STATE = {
 	 * CSS classes to be applied to the element.
 	 * @default undefined
 	 * @instance
-	 * @memberof ClayAlert
+	 * @memberof ClayAlertBase
 	 * @type {?(string|undefined)}
 	 */
 	elementClasses: Config.string(),
@@ -187,7 +206,7 @@ ClayAlertBase.STATE = {
 	 * Id to be applied to the element.
 	 * @default undefined
 	 * @instance
-	 * @memberof ClayAlert
+	 * @memberof ClayAlertBase
 	 * @type {?(string|undefined)}
 	 */
 	id: Config.string(),

diff --git a/packages/clay-alert/src/ClayStripe.js b/packages/clay-alert/src/ClayStripe.js
@@ -1,5 +1,5 @@
 import './ClayAlertBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -8,9 +8,9 @@ import templates from './ClayStripe.soy.js';
 
 /**
  * Metal Clay Stripe component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayStripe extends Component {
+class ClayStripe extends ClayComponent {
 	/**
 	 * @inheritDoc
 	 */
@@ -61,6 +61,25 @@ ClayStripe.STATE = {
 	 */
 	autoClose: Config.oneOfType([Config.bool(), Config.number()]).value(false),
 
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayStripe
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayStripe
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * Flag to indicate if the alert should be destroyen when close.
 	 * @default false

diff --git a/packages/clay-alert/src/ClayToast.js b/packages/clay-alert/src/ClayToast.js
@@ -1,5 +1,5 @@
 import './ClayAlertBase';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -8,9 +8,9 @@ import templates from './ClayToast.soy.js';
 
 /**
  * Metal Clay Toast component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayToast extends Component {
+class ClayToast extends ClayComponent {
 	/**
 	 * @inheritDoc
 	 */
@@ -61,6 +61,25 @@ ClayToast.STATE = {
 	 */
 	autoClose: Config.oneOfType([Config.bool(), Config.number()]).value(false),
 
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayToast
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayToast
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * Flag to indicate if the alert should be destroyen when close.
 	 * @default false

diff --git a/packages/clay-autocomplete/src/ClayAutocomplete.js b/packages/clay-autocomplete/src/ClayAutocomplete.js
@@ -232,6 +232,15 @@ ClayAutocomplete.STATE = {
 	 */
 	contentRenderer: Config.string(),
 
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
 	/**
 	 * The array of data items that the data source contains or
 	 * the URL for the data provider to request.
@@ -246,6 +255,16 @@ ClayAutocomplete.STATE = {
 		Config.array(),
 	]).required(),
 
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayAutocomplete
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * CSS classes to be applied to the element.
 	 * @default undefined

diff --git a/packages/clay-badge/package.json b/packages/clay-badge/package.json
@@ -28,6 +28,7 @@
     "metal"
   ],
   "dependencies": {
+    "clay-component": "^2.5.0",
     "metal": "^2.16.0",
     "metal-component": "^2.16.0",
     "metal-soy": "^2.16.0",

diff --git a/packages/clay-badge/src/ClayBadge.js b/packages/clay-badge/src/ClayBadge.js
@@ -1,4 +1,4 @@
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 import {Config} from 'metal-state';
@@ -7,16 +7,35 @@ import templates from './ClayBadge.soy.js';
 
 /**
  * Metal Clay Badge component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayBadge extends Component {}
+class ClayBadge extends ClayComponent {}
 
 /**
  * State definition.
  * @static
  * @type {!Object}
  */
 ClayBadge.STATE = {
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayBadge
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayBadge
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * CSS classes to be applied to the element.
 	 * @default undefined

diff --git a/packages/clay-button/src/ClayButton.js b/packages/clay-button/src/ClayButton.js
@@ -45,6 +45,16 @@ ClayButton.STATE = {
 	 */
 	data: Config.object(),
 
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayButton
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * The button disabled attribute.
 	 * @default false

diff --git a/packages/clay-card-grid/package.json b/packages/clay-card-grid/package.json
@@ -29,6 +29,7 @@
   ],
   "dependencies": {
     "clay-card": "^2.5.0",
+    "clay-component": "^2.5.0",
     "metal": "^2.16.0",
     "metal-component": "^2.16.0",
     "metal-soy": "^2.16.0",

diff --git a/packages/clay-card-grid/src/ClayCardGrid.js b/packages/clay-card-grid/src/ClayCardGrid.js
@@ -1,4 +1,4 @@
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
 /* eslint-disable */
@@ -16,9 +16,9 @@ import templates from './ClayCardGrid.soy.js';
 
 /**
  * Metal ClayCardGrid component.
- * @extends Component
+ * @extends ClayComponent
  */
-class ClayCardGrid extends Component {
+class ClayCardGrid extends ClayComponent {
 	/**
 	 * Continues the propagation of the checkbox changed event
 	 * @param {!Event} event
@@ -35,6 +35,25 @@ class ClayCardGrid extends Component {
  * @type {!Object}
  */
 ClayCardGrid.STATE = {
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayCardGrid
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
+	/**
+	 * Object that wires events with default listeners
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayCardGrid
+	 * @review
+	 * @type {?(object|undefined)}
+	 */
+	defaultEventHandler: Config.object(),
+
 	/**
 	 * CSS classes to be applied to the element.
 	 * @default undefined

diff --git a/packages/clay-card/src/ClayCardBase.js b/packages/clay-card/src/ClayCardBase.js
@@ -14,7 +14,7 @@ import templates from './ClayCardBase.soy.js';
 
 /**
  * Metal ClayCardBase component.
- * @extends Component
+ * @extends ClayComponent
  */
 class ClayCardBase extends ClayComponent {
 	/**
@@ -61,6 +61,15 @@ ClayCardBase.STATE = {
 	 */
 	contentRenderer: Config.oneOf(['image', 'file', 'user']).value('image'),
 
+	/**
+	 * Data to add to the element.
+	 * @default undefined
+	 * @instance
+	 * @memberof ClayCardBase
+	 * @type {?object}
+	 */
+	data: Config.object(),
+
 	/**
 	 * Object that wires events with default listeners
 	 * @default undefined