@lion/switch - npm Package Compare versions

Comparing version 0.1.7 to 0.2.0

CHANGELOG.md

@@ -6,2 +6,18 @@ # Change Log
 
+# [0.2.0](https://github.com/ing-bank/lion/compare/@lion/switch@0.1.7...@lion/switch@0.2.0) (2019-11-13)
+
+
+### Bug Fixes
+
+* **switch:** make switch more accessible ([83f9564](https://github.com/ing-bank/lion/commit/83f9564ae0c7f6f6ed552a63efa268dbe4ff4ec5))
+
+
+### Features
+
+* remove all deprecations from lion ([66d3d39](https://github.com/ing-bank/lion/commit/66d3d390aebeaa61b6effdea7d5f7eea0e89c894))
+
+
+
+
+
 ## [0.1.7](https://github.com/ing-bank/lion/compare/@lion/switch@0.1.6...@lion/switch@0.1.7) (2019-11-12)
@@ -8,0 +24,0 @@

package.json

 {
   "name": "@lion/switch",
-  "version": "0.1.7",
+  "version": "0.2.0",
   "description": "A Switch is used for switching a property or feature on and off",
@@ -35,11 +35,11 @@ "author": "ing-bank",
   "dependencies": {
-    "@lion/button": "^0.3.34",
-    "@lion/choice-input": "^0.2.44",
-    "@lion/core": "^0.2.1",
-    "@lion/field": "^0.3.7"
+    "@lion/button": "^0.3.35",
+    "@lion/choice-input": "^0.3.0",
+    "@lion/core": "^0.3.0",
+    "@lion/field": "^0.4.0"
   },
   "devDependencies": {
-    "@lion/form": "^0.1.73",
-    "@lion/localize": "^0.4.20",
-    "@lion/validate": "^0.2.40",
+    "@lion/form": "^0.2.0",
+    "@lion/localize": "^0.5.0",
+    "@lion/validate": "^0.3.0",
     "@open-wc/demoing-storybook": "^0.2.0",
@@ -49,3 +49,3 @@ "@open-wc/testing": "^2.3.4",
   },
-  "gitHead": "64b76de801dd7f7adb47fcc45b657336a34e9bab"
+  "gitHead": "90e6b4ef36bb5c49cfe7e4b2b8a00128334c84ab"
 }

README.md

@@ -17,5 +17,5 @@ # Switch
 
-- Get or set the checked state (boolean) - `choiceChecked()`
+- Get or set the checked state (boolean) - `checked` boolean attribute
+- Pre-select an option by setting the `checked` boolean attribute
 - Get or set the value of the choice - `choiceValue()`
-- Pre-select an option by setting the `checked` boolean attribute
 
@@ -22,0 +22,0 @@ ## How to use

src/LionSwitch.js

@@ -37,3 +37,3 @@ import { html, css } from '@lion/core';
     super.connectedCallback();
-    this.inputElement.addEventListener(
+    this._inputNode.addEventListener(
       'checked-changed',
@@ -53,9 +53,9 @@ this.__handleButtonSwitchCheckedChanged.bind(this),
     // https://github.com/ing-bank/lion/blob/master/packages/field/src/FormControlMixin.js#L78
-    this.checked = this.inputElement.checked;
+    this.checked = this._inputNode.checked;
   }
 
   _syncButtonSwitch() {
-    this.inputElement.checked = this.checked;
-    this.inputElement.disabled = this.disabled;
+    this._inputNode.checked = this.checked;
+    this._inputNode.disabled = this.disabled;
   }
 }

src/LionSwitchButton.js

@@ -34,3 +34,3 @@ import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core';
 
-        :host(:focus) .btn {
+        :host(:focus:not([disabled])) .btn {
           /* if you extend, please overwrite */
@@ -37,0 +37,0 @@ outline: 2px solid #bde4ff;

stories/index.stories.js

@@ -12,5 +12,5 @@ import { storiesOf, html } from '@open-wc/demoing-storybook';
   .add(
-    'All text slots',
+    'Button',
     () => html`
-      <lion-switch label="Label" help-text="Help text"> </lion-switch>
+      <lion-switch-button aria-label="Toggle button"></lion-switch-button>
     `,
@@ -21,5 +21,12 @@ )
     () => html`
-      <lion-switch label="Disabled label" disabled> </lion-switch>
+      <lion-switch-button aria-label="Toggle button" disabled></lion-switch-button>
     `,
   )
+  .add(
+    'With input slots',
+    () => html`
+      <lion-switch label="Label" help-text="Help text"></lion-switch>
+    `,
+  )
+
   .add('Validation', () => {
@@ -87,8 +94,2 @@ const isTrue = value => value && value.checked && value.checked === true;
     `;
-  })
-  .add(
-    'Button',
-    () => html`
-      <lion-switch-button></lion-switch-button>
-    `,
-  );
+  });

test/lion-switch.test.js

@@ -17,8 +17,8 @@ import { expect, fixture, html } from '@open-wc/testing';
     `);
-    expect(el.inputElement.disabled).to.be.true;
-    expect(el.inputElement.hasAttribute('disabled')).to.be.true;
+    expect(el._inputNode.disabled).to.be.true;
+    expect(el._inputNode.hasAttribute('disabled')).to.be.true;
     el.disabled = false;
     await el.updateComplete;
-    expect(el.inputElement.disabled).to.be.false;
-    expect(el.inputElement.hasAttribute('disabled')).to.be.false;
+    expect(el._inputNode.disabled).to.be.false;
+    expect(el._inputNode.hasAttribute('disabled')).to.be.false;
   });
@@ -33,4 +33,4 @@
     `);
-    expect(uncheckedEl.inputElement.checked).to.be.false;
-    expect(checkedEl.inputElement.checked).to.be.true;
+    expect(uncheckedEl._inputNode.checked).to.be.false;
+    expect(checkedEl._inputNode.checked).to.be.true;
     uncheckedEl.checked = true;
@@ -40,4 +40,4 @@ checkedEl.checked = false;
     await checkedEl.updateComplete;
-    expect(uncheckedEl.inputElement.checked).to.be.true;
-    expect(checkedEl.inputElement.checked).to.be.false;
+    expect(uncheckedEl._inputNode.checked).to.be.true;
+    expect(checkedEl._inputNode.checked).to.be.false;
   });
@@ -49,3 +49,3 @@
     `);
-    const button = el.inputElement;
+    const button = el._inputNode;
     expect(el.checked).to.be.false;
@@ -52,0 +52,0 @@ button.click();

No alert changes

Improved metrics

Total package byte prevSize

18047

increased by2.56%

Dependency changes

• + Added@lion/choice-input@0.3.1(transitive)

• + Added@lion/field@0.4.1(transitive)

• + Added@lion/localize@0.5.0(transitive)

• + Added@lion/validate@0.3.1(transitive)

• - Removed@lion/choice-input@0.2.44(transitive)

• - Removed@lion/core@0.2.1(transitive)

• - Removed@lion/field@0.3.7(transitive)

• - Removed@lion/localize@0.4.21(transitive)

• - Removed@lion/validate@0.2.40(transitive)

• Updated@lion/button@^0.3.35

• Updated@lion/choice-input@^0.3.0

• Updated@lion/core@^0.3.0

• Updated@lion/field@^0.4.0