@lion/choice-input - npm Package Compare versions

Comparing version 0.3.1 to 0.4.0

CHANGELOG.md

		@@ -6,2 +6,13 @@ # Change Log

		# [0.4.0](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.3.1...@lion/choice-input@0.4.0) (2019-11-18)


		### Features

		* finalize validation and adopt it everywhere ([396deb2](https://github.com/ing-bank/lion/commit/396deb2e3b4243f102a5c98e9b0518fa0f31a6b1))





		## [0.3.1](https://github.com/ing-bank/lion/compare/@lion/choice-input@0.3.0...@lion/choice-input@0.3.1) (2019-11-15)
		@@ -8,0 +19,0 @@

package.json

		{
		"name": "@lion/choice-input",
		"version": "0.3.1",
		"version": "0.4.0",
		"description": "Base for all choise inputs like checkbox/radio",
		@@ -36,6 +36,7 @@ "author": "ing-bank",
		"@lion/core": "^0.3.0",
		"@lion/field": "^0.4.1"
		"@lion/field": "^0.5.0"
		},
		"devDependencies": {
		"@lion/input": "^0.2.1",
		"@lion/input": "^0.3.0",
		"@lion/validate": "^0.4.0",
		"@open-wc/demoing-storybook": "^0.2.0",
		@@ -45,3 +46,3 @@ "@open-wc/testing": "^2.3.4",
		},
		"gitHead": "e1485188a03c063819623288f3231cfecca023ec"
		"gitHead": "da30ee3bb13d26f873d633ed960163bec9cba164"
		}

README.md

		@@ -1,2 +0,2 @@
		# Choice Input
		# ChoiceInputMixin

		@@ -13,2 +13,13 @@ > ## 🛠 Status: Pilot Phase

		We still need help writing better documentation - care to help?
		`lion-choice-input` mixin is a fundamental building block of form controls which return a checked-state. It is used in:

		- [lion-checkbox](https://github.com/ing-bank/lion/blob/master/packages/checkbox)
		- [lion-option](https://github.com/ing-bank/lion/blob/master/packages/option/))
		- [lion-radio](https://github.com/ing-bank/lion/blob/master/packages/radio/))
		- [lion-switch](https://github.com/ing-bank/lion/blob/master/packages/switch/))

		## Features

		- Get or set the value of the choice - `choiceValue()`
		- Get or set the modelValue (value and checked-state) of the choice - `.modelValue`
		- Pre-select an option by setting the `checked` boolean attribute

src/ChoiceInputMixin.js

		@@ -31,3 +31,3 @@ /* eslint-disable class-methods-use-this */
		/**
		* The value property of the modelValue. It provides an easy inteface for storing
		* The value property of the modelValue. It provides an easy interface for storing
		* (complex) values in the modelValue
		@@ -204,9 +204,6 @@ */
		/**
		* @override
		* Overridden from Field, since a different modelValue is used for choice inputs.
		* Used for required validator.
		*/
		__isRequired(modelValue) {
		return {
		required: !!modelValue.checked,
		};
		_isEmpty() {
		return !this.checked;
		}
		@@ -213,0 +210,0 @@

test/ChoiceInputMixin.test.js

		import { expect, fixture } from '@open-wc/testing';
		import { html } from '@lion/core';
		import sinon from 'sinon';
		import { Required } from '@lion/validate';

		@@ -89,8 +90,11 @@ import { LionInput } from '@lion/input';
		const el = await fixture(html`
		<choice-input .choiceValue=${'foo'} .errorValidators=${[['required']]}></choice-input>
		<choice-input .choiceValue=${'foo'} .validators=${[new Required()]}></choice-input>
		`);

		expect(el.error.required).to.be.true;
		expect(el.hasFeedbackFor).to.include('error');
		expect(el.validationStates).to.have.a.property('error');
		expect(el.validationStates.error).to.have.a.property('Required');
		el.checked = true;
		expect(el.error.required).to.be.undefined;
		expect(el.hasFeedbackFor).not.to.include('error');
		expect(el.validationStates).to.have.a.property('error');
		expect(el.validationStates.error).not.to.have.a.property('Required');
		});
		@@ -164,3 +168,3 @@

		// not changeing values should not trigger any updates
		// not changing values should not trigger any updates
		el.checked = false;
		@@ -182,4 +186,4 @@ el.modelValue = { value: 'foo', checked: false };
		// Initial values
		expect(hasAttr(el)).to.equal(false, 'inital unchecked element');
		expect(hasAttr(elChecked)).to.equal(true, 'inital checked element');
		expect(hasAttr(el)).to.equal(false, 'initial unchecked element');
		expect(hasAttr(elChecked)).to.equal(true, 'initial checked element');

		@@ -186,0 +190,0 @@ // Programmatically via checked

New alerts