clay-sticker - npm Package Compare versions

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

package.json

 {
   "name": "clay-sticker",
-  "version": "1.0.0-alpha.2",
+  "version": "1.0.0-alpha.3",
   "description": "Clay Sticker 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__/ClaySticker.js

@@ -6,204 +6,204 @@ import ClaySticker from '../ClaySticker';
 describe('ClaySticker', function() {
-  afterEach(() => {
-    if (sticker) {
-      sticker.dispose();
-    }
-  });
+	afterEach(() => {
+		if (sticker) {
+			sticker.dispose();
+		}
+	});
 
-  it('should generate the default markup', () => {
-    sticker = new ClaySticker();
+	it('should generate the default markup', () => {
+		sticker = new ClaySticker();
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a sticker with icon', () => {
-    sticker = new ClaySticker({
-      icon: {
-        spritemap: 'icons.svg',
-        symbol: 'plus',
-      },
-    });
+	it('should render a sticker with icon', () => {
+		sticker = new ClaySticker({
+			icon: {
+				spritemap: 'icons.svg',
+				symbol: 'plus',
+			},
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a sticker with id', () => {
-    sticker = new ClaySticker({
-      id: 'mySticker',
-    });
+	it('should render a sticker with id', () => {
+		sticker = new ClaySticker({
+			id: 'mySticker',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a sticker with label', () => {
-    sticker = new ClaySticker({
-      label: '<span>Doc E. Brown</span>',
-    });
+	it('should render a sticker with label', () => {
+		sticker = new ClaySticker({
+			label: '<span>Doc E. Brown</span>',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a small sticker', () => {
-    sticker = new ClaySticker({
-      size: 'sm',
-    });
+	it('should render a small sticker', () => {
+		sticker = new ClaySticker({
+			size: 'sm',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a large sticker', () => {
-    sticker = new ClaySticker({
-      size: 'lg',
-    });
+	it('should render a large sticker', () => {
+		sticker = new ClaySticker({
+			size: 'lg',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a extra large sticker', () => {
-    sticker = new ClaySticker({
-      size: 'xl',
-    });
+	it('should render a extra large sticker', () => {
+		sticker = new ClaySticker({
+			size: 'xl',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a circle sticker', () => {
-    sticker = new ClaySticker({
-      shape: 'circle',
-    });
+	it('should render a circle sticker', () => {
+		sticker = new ClaySticker({
+			shape: 'circle',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a bottom left positioned sticker', () => {
-    sticker = new ClaySticker({
-      position: 'bottom-left',
-    });
+	it('should render a bottom left positioned sticker', () => {
+		sticker = new ClaySticker({
+			position: 'bottom-left',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a bottom right positioned sticker', () => {
-    sticker = new ClaySticker({
-      position: 'bottom-right',
-    });
+	it('should render a bottom right positioned sticker', () => {
+		sticker = new ClaySticker({
+			position: 'bottom-right',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a top left positioned sticker', () => {
-    sticker = new ClaySticker({
-      position: 'top-left',
-    });
+	it('should render a top left positioned sticker', () => {
+		sticker = new ClaySticker({
+			position: 'top-left',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a top right positioned sticker', () => {
-    sticker = new ClaySticker({
-      position: 'top-right',
-    });
+	it('should render a top right positioned sticker', () => {
+		sticker = new ClaySticker({
+			position: 'top-right',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render an outside bottom left positioned sticker', () => {
-    sticker = new ClaySticker({
-      outside: true,
-      position: 'bottom-left',
-    });
+	it('should render an outside bottom left positioned sticker', () => {
+		sticker = new ClaySticker({
+			outside: true,
+			position: 'bottom-left',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render an outside bottom right positioned sticker', () => {
-    sticker = new ClaySticker({
-      outside: true,
-      position: 'bottom-right',
-    });
+	it('should render an outside bottom right positioned sticker', () => {
+		sticker = new ClaySticker({
+			outside: true,
+			position: 'bottom-right',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render an outside top left positioned sticker', () => {
-    sticker = new ClaySticker({
-      outside: true,
-      position: 'top-left',
-    });
+	it('should render an outside top left positioned sticker', () => {
+		sticker = new ClaySticker({
+			outside: true,
+			position: 'top-left',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render an outside top right positioned sticker', () => {
-    sticker = new ClaySticker({
-      outside: true,
-      position: 'top-right',
-    });
+	it('should render an outside top right positioned sticker', () => {
+		sticker = new ClaySticker({
+			outside: true,
+			position: 'top-right',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `danger color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'danger',
-    });
+	it('should render a `danger color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'danger',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `dark color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'dark',
-    });
+	it('should render a `dark color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'dark',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `info color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'info',
-    });
+	it('should render a `info color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'info',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `light color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'light',
-    });
+	it('should render a `light color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'light',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `primary color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'primary',
-    });
+	it('should render a `primary color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'primary',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `secondary color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'secondary',
-    });
+	it('should render a `secondary color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'secondary',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `success color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'success',
-    });
+	it('should render a `success color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'success',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 
-  it('should render a `warning color` sticker', () => {
-    sticker = new ClaySticker({
-      style: 'warning',
-    });
+	it('should render a `warning color` sticker', () => {
+		sticker = new ClaySticker({
+			style: 'warning',
+		});
 
-    expect(sticker).toMatchSnapshot();
-  });
+		expect(sticker).toMatchSnapshot();
+	});
 });

src/ClaySticker.js

 import 'clay-icon';
 import Component from 'metal-component';
+import defineWebComponent from 'metal-web-component';
 import Soy from 'metal-soy';
@@ -19,95 +20,97 @@ import {Config} from 'metal-state';
 ClaySticker.STATE = {
-  /**
-   * Render ClayIcon in the ClaySticker element.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?Object|undefined}
-   * @default undefined
-   */
-  icon: Config.shapeOf({
-    spritemap: Config.string().required(),
-    symbol: Config.string().required(),
-  }),
+	/**
+	 * Render ClayIcon in the ClaySticker element.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?Object|undefined}
+	 * @default undefined
+	 */
+	icon: Config.shapeOf({
+		spritemap: Config.string().required(),
+		symbol: Config.string().required(),
+	}),
 
-  /**
-   * Id to be applied to the sticker element.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  id: Config.string(),
+	/**
+	 * Id to be applied to the sticker element.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	id: Config.string(),
 
-  /**
-   * Sets the text or HTML to be rendered inside sticker.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?html|string|undefined}
-   * @default undefined
-   */
-  label: Config.any(),
+	/**
+	 * Sets the text or HTML to be rendered inside sticker.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?html|string|undefined}
+	 * @default undefined
+	 */
+	label: Config.any(),
 
-  /**
-   * Flag to indicate if the sticker should be positioned on the outside
-   * corners when position is defined.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?bool}
-   * @default false
-   */
-  outside: Config.bool().value(false),
+	/**
+	 * Flag to indicate if the sticker should be positioned on the outside
+	 * corners when position is defined.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?bool}
+	 * @default false
+	 */
+	outside: Config.bool().value(false),
 
-  /**
-   * Sticker position if not static. Available positions are `bottom-left`,
-   * `bottom-right`, `top-right`.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  position: Config.oneOf([
-    'bottom-left',
-    'bottom-right',
-    'top-left',
-    'top-right',
-  ]),
+	/**
+	 * Sticker position if not static. Available positions are `bottom-left`,
+	 * `bottom-right`, `top-right`.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	position: Config.oneOf([
+		'bottom-left',
+		'bottom-right',
+		'top-left',
+		'top-right',
+	]),
 
-  /**
-   * Sticker size. Available sizes are `sm`, `lg`, `xl`.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?string|undefined}
-   * @default undefined
-   */
-  size: Config.oneOf(['lg', 'sm', 'xl']),
+	/**
+	 * Sticker size. Available sizes are `sm`, `lg`, `xl`.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default undefined
+	 */
+	size: Config.oneOf(['lg', 'sm', 'xl']),
 
-  /**
-   * Shape of the sticker. Available shapes are `circle`, `rounded`.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?string|undefined}
-   * @default rounded
-   */
-  shape: Config.oneOf(['circle', 'rounded']).value('rounded'),
+	/**
+	 * Shape of the sticker. Available shapes are `circle`, `rounded`.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default rounded
+	 */
+	shape: Config.oneOf(['circle', 'rounded']).value('rounded'),
 
-  /**
-   * Sticker style. Available sizes are: `danger`, `dark`, `info`, `light`,
-   * `primary`, `secondary`, `success`, `warning`.
-   * @instance
-   * @memberof ClaySticker
-   * @type {?string|undefined}
-   * @default default
-   */
-  style: Config.oneOf([
-    'danger',
-    'dark',
-    'info',
-    'light',
-    'primary',
-    'secondary',
-    'success',
-    'warning',
-  ]).value('primary'),
+	/**
+	 * Sticker style. Available sizes are: `danger`, `dark`, `info`, `light`,
+	 * `primary`, `secondary`, `success`, `warning`.
+	 * @instance
+	 * @memberof ClaySticker
+	 * @type {?string|undefined}
+	 * @default default
+	 */
+	style: Config.oneOf([
+		'danger',
+		'dark',
+		'info',
+		'light',
+		'primary',
+		'secondary',
+		'success',
+		'warning',
+	]).value('primary'),
 };
 
+defineWebComponent('clay-sticker', ClaySticker);
+
 Soy.register(ClaySticker, templates);
@@ -114,0 +117,0 @@

No alert changes

Improved metrics

Total package byte prevSize

20054

increased by40.81%

Number of package files

8

increased by14.29%

Lines of code

362

increased by38.7%

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