clay-button - npm Package Compare versions

Comparing version 1.0.0-alpha.2 to 1.0.0-alpha.3

package.json

 {
   "name": "clay-button",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Metal Clay Button component.",
@@ -28,7 +28,8 @@ "license": "BSD",
   "dependencies": {
-    "clay-icon": "^1.0.0-alpha.2",
-    "metal": "^2.13.2",
-    "metal-component": "^2.13.2",
-    "metal-soy": "^2.13.2",
-    "metal-state": "^2.13.2"
+    "clay-icon": "^1.0.0-alpha.3",
+    "metal": "^2.14.0",
+    "metal-component": "^2.14.0",
+    "metal-soy": "^2.14.0",
+    "metal-state": "^2.14.0",
+    "metal-web-component": "^2.14.0"
   },
@@ -35,0 +36,0 @@ "devDependencies": {

src/__tests__/ClayButton.js

@@ -6,142 +6,142 @@ import ClayButton from '../ClayButton';
 describe('ClayButton', function() {
-  afterEach(() => {
-    if (button) {
-      button.dispose();
-    }
-  });
+	afterEach(() => {
+		if (button) {
+			button.dispose();
+		}
+	});
 
-  it('should generate the default markup', function() {
-    button = new ClayButton();
+	it('should generate the default markup', function() {
+		button = new ClayButton();
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a submit button', function() {
-    button = new ClayButton({
-      type: 'submit',
-    });
+	it('should render a submit button', function() {
+		button = new ClayButton({
+			type: 'submit',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a disabled button', function() {
-    button = new ClayButton({
-      disabled: true,
-    });
+	it('should render a disabled button', function() {
+		button = new ClayButton({
+			disabled: true,
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a secondary button', function() {
-    button = new ClayButton({
-      style: 'secondary',
-    });
+	it('should render a secondary button', function() {
+		button = new ClayButton({
+			style: 'secondary',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with label', function() {
-    button = new ClayButton({
-      label: 'Label',
-    });
+	it('should render a button with label', function() {
+		button = new ClayButton({
+			label: 'Label',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with name', function() {
-    button = new ClayButton({
-      name: 'myButton',
-    });
+	it('should render a button with name', function() {
+		button = new ClayButton({
+			name: 'myButton',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with label and ariaLabel', function() {
-    button = new ClayButton({
-      ariaLabel: 'My Description',
-      label: 'Visit Liferay.com',
-    });
+	it('should render a button with label and ariaLabel', function() {
+		button = new ClayButton({
+			ariaLabel: 'My Description',
+			label: 'Visit Liferay.com',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a small button', function() {
-    button = new ClayButton({
-      size: 'sm',
-    });
+	it('should render a small button', function() {
+		button = new ClayButton({
+			size: 'sm',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a block button', function() {
-    button = new ClayButton({
-      block: true,
-    });
+	it('should render a block button', function() {
+		button = new ClayButton({
+			block: true,
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with icon', function() {
-    button = new ClayButton({
-      icon: {
-        spritemap: 'icons.svg',
-        symbol: 'plus',
-      },
-    });
+	it('should render a button with icon', function() {
+		button = new ClayButton({
+			icon: {
+				spritemap: 'icons.svg',
+				symbol: 'plus',
+			},
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with icon and monospaced true', function() {
-    button = new ClayButton({
-      icon: {
-        spritemap: 'icons.svg',
-        symbol: 'plus',
-      },
-      monospaced: true,
-    });
+	it('should render a button with icon and monospaced true', function() {
+		button = new ClayButton({
+			icon: {
+				spritemap: 'icons.svg',
+				symbol: 'plus',
+			},
+			monospaced: true,
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with icon and label', function() {
-    button = new ClayButton({
-      icon: {
-        spritemap: 'icons.svg',
-        symbol: 'plus',
-      },
-      label: 'Label',
-    });
+	it('should render a button with icon and label', function() {
+		button = new ClayButton({
+			icon: {
+				spritemap: 'icons.svg',
+				symbol: 'plus',
+			},
+			label: 'Label',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with label and icon', function() {
-    button = new ClayButton({
-      icon: {
-        alignment: 'right',
-        spritemap: 'icons.svg',
-        symbol: 'plus',
-      },
-      label: 'Label',
-    });
+	it('should render a button with label and icon', function() {
+		button = new ClayButton({
+			icon: {
+				alignment: 'right',
+				spritemap: 'icons.svg',
+				symbol: 'plus',
+			},
+			label: 'Label',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with id', function() {
-    button = new ClayButton({
-      id: 'myButton',
-    });
+	it('should render a button with id', function() {
+		button = new ClayButton({
+			id: 'myButton',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 
-  it('should render a button with custom classes', function() {
-    button = new ClayButton({
-      elementClasses: 'my-custom-class',
-    });
+	it('should render a button with custom classes', function() {
+		button = new ClayButton({
+			elementClasses: 'my-custom-class',
+		});
 
-    expect(button).toMatchSnapshot();
-  });
+		expect(button).toMatchSnapshot();
+	});
 });

src/ClayButton.js

 import 'clay-icon';
 import Component from 'metal-component';
+import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
@@ -19,122 +20,124 @@ import {Config} from 'metal-state';
 ClayButton.STATE = {
-  /**
-   * Aria label attribute for the button element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  ariaLabel: Config.string(),
+	/**
+	 * Aria label attribute for the button element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	ariaLabel: Config.string(),
 
-  /**
-   * Renders the button as a block element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?boolean}
-   * @default false
-   */
-  block: Config.bool().value(false),
+	/**
+	 * Renders the button as a block element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?boolean}
+	 * @default false
+	 */
+	block: Config.bool().value(false),
 
-  /**
-   * The button disabled attribute.
-   * @instance
-   * @memberof ClayButton
-   * @type {?boolean}
-   * @default false
-   */
-  disabled: Config.bool().value(false),
+	/**
+	 * The button disabled attribute.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?boolean}
+	 * @default false
+	 */
+	disabled: Config.bool().value(false),
 
-  /**
-   * Render ClayIcon in the ClayButton element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?Object|undefined}
-   * @default undefined
-   */
-  icon: Config.shapeOf({
-    alignment: Config.oneOf(['left', 'right']),
-    spritemap: Config.string().required(),
-    symbol: Config.string().required(),
-  }),
+	/**
+	 * Render ClayIcon in the ClayButton element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?Object|undefined}
+	 * @default undefined
+	 */
+	icon: Config.shapeOf({
+		alignment: Config.oneOf(['left', 'right']),
+		spritemap: Config.string().required(),
+		symbol: Config.string().required(),
+	}),
 
-  /**
-   * Id to be applied to the element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * default undefined
-   */
-  id: Config.string(),
+	/**
+	 * Id to be applied to the element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * default undefined
+	 */
+	id: Config.string(),
 
-  /**
-   * The label of the button content.
-   * @instance
-   * @memberof ClayButton
-   * @type {?html|string|undefined}
-   * @default undefined
-   */
-  label: Config.any(),
+	/**
+	 * The label of the button content.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?html|string|undefined}
+	 * @default undefined
+	 */
+	label: Config.any(),
 
-  /**
-   * Flag to indicate if button should be monospaced.
-   * @instance
-   * @memberof ClayButton
-   * @type {?bool}
-   * @default false
-   */
-  monospaced: Config.bool().value(false),
+	/**
+	 * Flag to indicate if button should be monospaced.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?bool}
+	 * @default false
+	 */
+	monospaced: Config.bool().value(false),
 
-  /**
-   * The name attribute value of the element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  name: Config.string(),
+	/**
+	 * The name attribute value of the element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	name: Config.string(),
 
-  /**
-   * The name that will make the CSS class name that will represent the
-   * button size.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  size: Config.oneOf(['sm']),
+	/**
+	 * The name that will make the CSS class name that will represent the
+	 * button size.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	size: Config.oneOf(['sm']),
 
-  /**
-   * The css class that colors the button.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * @default primary
-   */
-  style: Config.oneOf([
-    'borderless',
-    'link',
-    'primary',
-    'secondary',
-    'unstyled',
-  ]).value('primary'),
+	/**
+	 * The css class that colors the button.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default primary
+	 */
+	style: Config.oneOf([
+		'borderless',
+		'link',
+		'primary',
+		'secondary',
+		'unstyled',
+	]).value('primary'),
 
-  /**
-   * The type attribute value of the element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  type: Config.oneOf(['button', 'reset', 'submit']),
+	/**
+	 * The type attribute value of the element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	type: Config.oneOf(['button', 'reset', 'submit']),
 
-  /**
-   * The value attribute value of the element.
-   * @instance
-   * @memberof ClayButton
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  value: Config.string(),
+	/**
+	 * The value attribute value of the element.
+	 * @instance
+	 * @memberof ClayButton
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	value: Config.string(),
 };
 
+defineWebComponent('clay-button', ClayButton);
+
 Soy.register(ClayButton, templates);
@@ -141,0 +144,0 @@

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

33970

increased by136.86%

Number of package files

8

increased by14.29%

Lines of code

536

increased by123.33%

Worsened metrics

Dependency count

6

increased by20%

Dependency changes

• + Addedmetal-web-component@^2.14.0

• Updatedclay-icon@^1.0.0-alpha.3

• Updatedmetal@^2.14.0

• Updatedmetal-component@^2.14.0

• Updatedmetal-soy@^2.14.0

• Updatedmetal-state@^2.14.0