clay-button - npm Package Compare versions

Comparing version 1.0.0-alpha.4 to 1.0.0-alpha.5

lib/ClayButton.js

@@ -10,5 +10,5 @@ 'use strict';
 
-var _metalComponent = require('metal-component');
+var _clayComponent = require('clay-component');
 
-var _metalComponent2 = _interopRequireDefault(_metalComponent);
+var _clayComponent2 = _interopRequireDefault(_clayComponent);
 
@@ -40,4 +40,4 @@ var _metalWebComponent = require('metal-web-component');
  */
-var ClayButton = function (_Component) {
-	_inherits(ClayButton, _Component);
+var ClayButton = function (_ClayComponent) {
+	_inherits(ClayButton, _ClayComponent);
 
@@ -51,3 +51,3 @@ function ClayButton() {
 	return ClayButton;
-}(_metalComponent2.default);
+}(_clayComponent2.default);
 
@@ -81,2 +81,11 @@ /**
 	/**
+  * Data to add to the element.
+  * @instance
+  * @memberof ClayButton
+  * @type {?object}
+  * @default undefined
+  */
+	data: _metalState.Config.object(),
+
+	/**
   * The button disabled attribute.
@@ -91,2 +100,11 @@ * @instance
 	/**
+  * CSS classes to be applied to the element.
+  * @instance
+  * @memberof ClayButton
+  * @type {?string|undefined}
+  * @default undefined
+  */
+	elementClasses: _metalState.Config.string(),
+
+	/**
   * Render ClayIcon in the ClayButton element.
@@ -109,3 +127,3 @@ * @instance
   * @type {?string|undefined}
-  * default undefined
+  * @default undefined
   */
@@ -112,0 +130,0 @@ id: _metalState.Config.string(),

package.json

 {
   "name": "clay-button",
-  "version": "1.0.0-alpha.4",
+  "version": "1.0.0-alpha.5",
   "description": "Metal Clay Button component.",
@@ -30,3 +30,4 @@ "license": "BSD",
   "dependencies": {
-    "clay-icon": "^1.0.0-alpha.4",
+    "clay-component": "^1.0.0-alpha.5",
+    "clay-icon": "^1.0.0-alpha.5",
     "metal": "^2.14.0",
@@ -45,3 +46,3 @@ "metal-component": "^2.14.0",
     "browserslist-config-clay-components": "^1.0.0-alpha.2",
-    "clay": "^2.0.0-beta.2",
+    "clay": "^2.0.0-beta.4",
     "metal-tools-soy": "^4.2.1",
@@ -48,0 +49,0 @@ "webpack": "^3.0.0"

src/__tests__/ClayButton.js

@@ -12,3 +12,3 @@ import ClayButton from '../ClayButton';
 
-	it('should generate the default markup', function() {
+	it('should render the default markup', function() {
 		button = new ClayButton();
@@ -19,2 +19,18 @@
 
+	it('should render a button with classes', function() {
+		button = new ClayButton({
+			elementClasses: 'my-custom-class',
+		});
+
+		expect(button).toMatchSnapshot();
+	});
+
+	it('should render a button with id', function() {
+		button = new ClayButton({
+			id: 'myId',
+		});
+
+		expect(button).toMatchSnapshot();
+	});
+
 	it('should render a submit button', function() {
@@ -133,17 +149,13 @@ button = new ClayButton({
 
-	it('should render a button with id', function() {
+	it('should render a button with customData attributes', function() {
 		button = new ClayButton({
-			id: 'myButton',
+			data: {
+				'my-attribute': 'myValue',
+			},
 		});
 
-		expect(button).toMatchSnapshot();
+		expect(button.element.getAttribute('data-my-attribute')).toEqual(
+			'myValue'
+		);
 	});
-
-	it('should render a button with custom classes', function() {
-		button = new ClayButton({
-			elementClasses: 'my-custom-class',
-		});
-
-		expect(button).toMatchSnapshot();
-	});
 });

src/ClayButton.js

 import 'clay-icon';
-import Component from 'metal-component';
+import ClayComponent from 'clay-component';
 import defineWebComponent from 'metal-web-component';
@@ -12,3 +12,3 @@ import Soy from 'metal-soy';
  */
-class ClayButton extends Component {}
+class ClayButton extends ClayComponent {}
 
@@ -40,2 +40,11 @@ /**
 	/**
+	 * Data to add to the element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?object}
+	 * @default undefined
+	 */
+	data: Config.object(),
+
+	/**
 	 * The button disabled attribute.
@@ -50,2 +59,11 @@ * @instance
 	/**
+	 * CSS classes to be applied to the element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	elementClasses: Config.string(),
+
+	/**
 	 * Render ClayIcon in the ClayButton element.
@@ -68,3 +86,3 @@ * @instance
 	 * @type {?string|undefined}
-	 * default undefined
+	 * @default undefined
 	 */
@@ -71,0 +89,0 @@ id: Config.string(),

New alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Fixed alerts

License Policy Violation

License

This package is not allowed per your license policy. Review the package's license to ensure compliance.

Found 1 instance in 1 package

Improved metrics

Total package byte prevSize

99175

increased by1.49%

Lines of code

1034

increased by4.23%

Worsened metrics

Dependency count

7

increased by16.67%

Dependency changes

• + Addedclay-component@^1.0.0-alpha.5

• + Addedclay-component@1.0.0-alpha.15(transitive)

• Updatedclay-icon@^1.0.0-alpha.5