Merge 41cd78d into 70c310b

.travis.yml

@@ -17,4 +17,8 @@ jdk:
 
 language: java
 
-script: npm run ci
+script: 
+  - npm run build
+  - npm run checkFormat
+  - npm run lint
+  - npm run jest

package.json

@@ -3,17 +3,17 @@
   "scripts": {
     "a11y": "metal-a11y --packages ./packages -c demos/index.html",
     "build": "lerna run build",
-    "ci": "npm run build && npm run checkFormat && npm run lint && npm run test",
     "checkFormat": "npm run prettier -- --list-different",
     "coveralls": "node node_modules/coveralls/bin/coveralls.js < coverage/lcov.info",
     "format": "npm run prettier -- --write",
+    "jest": "jest",
     "lerna": "lerna bootstrap -- --no-optional --no-package-lock",
     "lint": "eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js && npm run mcritic",
     "mcritic": "mcritic packages/ --ignore '**/{browserslist-config-clay-components,generator-metal-clay,clay-dropdown,clay-alert,clay-list-group,clay-management-toolbar,node_modules}/**'",
     "precommit": "lint-staged",
     "prettier": "prettier-eslint packages/clay-*/src/*.js packages/clay-*/src/**/*.js",
     "start": "http-server . -p 4000",
-    "test": "lerna run soy && jest && npm run a11y"
+    "test": "npm run build && npm run jest"
   },
   "devDependencies": {
     "babel-preset-metal": "^4.1.0",

packages/clay-checkbox/src/ClayCheckbox.js

@@ -90,10 +90,20 @@ ClayCheckbox.STATE = {
 	 * Label of the input. Required for accesibility.
 	 * @instance
 	 * @memberof ClayCheckbox
-	 * @type {!string|html}
+	 * @type {?string}
 	 * @default undefined
 	 */
-	label: Config.any().required(),
+	label: Config.string(),
+
+	/**
+	 * Custom content of the checkbox label. Use it to use your custom html.
+	 * If this is used label and hideLabel params are ignored.
+	 * @instance
+	 * @memberof ClayCheckbox
+	 * @type {?html}
+	 * @default undefined
+	 */
+	labelContent: Config.any(),
 
 	/**
 	 * Name to be applied to the element.

packages/clay-checkbox/src/ClayCheckbox.soy

@@ -4,14 +4,15 @@
  * This renders an icon element based on the Clay Checkbox definition.
  */
 {template .render}
-	{@param label: html | string}
 	{@param? checked: bool}
 	{@param? disabled: bool}
 	{@param? elementClasses: string}
 	{@param? hideLabel: bool}
 	{@param? id: string}
 	{@param? indeterminate: bool}
 	{@param? inline: bool}
+	{@param? label: string}
+	{@param? labelContent: html}
 	{@param? name: string}
 	{@param? value: string}
 
@@ -37,6 +38,7 @@
 			{param disabled: $disabled /}
 			{param hideLabel: $hideLabel /}
 			{param label: $label /}
+			{param labelContent: $labelContent /}
 			{param name: $name /}
 			{param value: $value /}
 		{/call}
@@ -47,10 +49,11 @@
  * This renders the checkbox input
  **/
 {template .input}
-	{@param label: html | string}
 	{@param? checked: bool}
 	{@param? disabled: bool}
 	{@param? hideLabel: bool}
+	{@param? label: string}
+	{@param? labelContent: html}
 	{@param? name: string}
 	{@param? value: string}
 
@@ -82,13 +85,17 @@
 
 		<span class="custom-control-indicator"></span>
 
-		{let $spanLabelClasses kind="text"}
-			custom-control-description
-			{if $hideLabel}
-				{sp}sr-only
-			{/if}
-		{/let}
-
-		<span class="{$spanLabelClasses}">{$label}</span>
+		{if $labelContent}
+			{$labelContent}
+		{else}
+			{let $spanLabelClasses kind="text"}
+				custom-control-description
+				{if $hideLabel}
+					{sp}sr-only
+				{/if}
+			{/let}
+
+			<span class="{$spanLabelClasses}">{$label}</span>
+		{/if}
 	</label>
-{/template}
+{/template}

packages/clay-checkbox/src/__tests__/ClayCheckbox.js

@@ -127,4 +127,12 @@ describe('ClayCheckbox', function() {
 
 		expect(clayCheckbox).toMatchSnapshot();
 	});
+
+	it('should render a checkbox with custom label content', () => {
+		clayCheckbox = new ClayCheckbox({
+			labelContent: '<div><h4>My Checkbox</h4></div>',
+		});
+
+		expect(clayCheckbox).toMatchSnapshot();
+	});
 });

packages/clay-checkbox/src/__tests__/__snapshots__/ClayCheckbox.js.snap

@@ -10,6 +10,18 @@ exports[`ClayCheckbox should render a checkbox with classes 1`] = `
 </div>
 `;
 
+exports[`ClayCheckbox should render a checkbox with custom label content 1`] = `
+<div class="custom-control custom-checkbox">
+  <label>
+    <input class="custom-control-input" ref="input" type="checkbox">
+    <span class="custom-control-indicator"></span>
+    <div>
+      <h4>My Checkbox</h4>
+    </div>
+  </label>
+</div>
+`;
+
 exports[`ClayCheckbox should render a checkbox with hidden label 1`] = `
 <div class="custom-control custom-checkbox">
   <label>