@lion/switch
Advanced tools
@lion/switch - npm Package Compare versions
Comparing version 0.8.1 to 0.8.2
@@ -6,2 +6,13 @@ # Change Log | ||
| ## [0.8.2](https://github.com/ing-bank/lion/compare/@lion/switch@0.8.1...@lion/switch@0.8.2) (2020-04-29) | ||
| ### Bug Fixes | ||
| * add display:none for hidden ([#692](https://github.com/ing-bank/lion/issues/692)) ([9731771](https://github.com/ing-bank/lion/commit/9731771c23a5ed8661558e62cb5e34b62cc2b8b7)) | ||
| ## [0.8.1](https://github.com/ing-bank/lion/compare/@lion/switch@0.8.0...@lion/switch@0.8.1) (2020-04-02) | ||
@@ -8,0 +19,0 @@ |
| { | ||
| "name": "@lion/switch", | ||
| "version": "0.8.1", | ||
| "version": "0.8.2", | ||
| "description": "A Switch is used for switching a property or feature on and off", | ||
@@ -37,7 +37,7 @@ "author": "ing-bank", | ||
| "dependencies": { | ||
| "@lion/choice-input": "0.8.1", | ||
| "@lion/core": "0.5.1", | ||
| "@lion/field": "0.12.1" | ||
| "@lion/choice-input": "0.8.2", | ||
| "@lion/core": "0.5.2", | ||
| "@lion/field": "0.12.2" | ||
| }, | ||
| "gitHead": "b58aa65377d5e7a0cd4d87917980291c832e7120" | ||
| "gitHead": "2476211c21e3f785a909c71e8f94ff307fc6a4fc" | ||
| } |
| # Switch | ||
| > ## 🛠 Status: Pilot Phase | ||
| > Lion Web Components are still in an early alpha stage; they should not be considered production ready yet. | ||
| > | ||
| > The goal of our pilot phase is to gather feedback from a private group of users. | ||
| > Therefore, during this phase, we kindly ask you to: | ||
| > - not publicly promote or link us yet: (no tweets, blog posts or other forms of communication about Lion Web Components) | ||
| > - not publicly promote or link products derived from/based on Lion Web Components | ||
| > | ||
| > As soon as Pilot Phase ends we will let you know (feel free to subscribe to this issue https://github.com/ing-bank/lion/issues/1) | ||
| `lion-switch` is a component that is used to toggle a property or feature on or off. Toggling the component on or off should have immediate action and should not require pressing any additional buttons (submit) to confirm what just happened. The Switch is not a Checkbox in disguise and should not be used as part of a form. | ||
@@ -14,0 +4,0 @@ |
@@ -1,4 +0,4 @@ | ||
| import { html, css, ScopedElementsMixin } from '@lion/core'; | ||
| import { ChoiceInputMixin } from '@lion/choice-input'; | ||
| import { css, html, ScopedElementsMixin } from '@lion/core'; | ||
| import { LionField } from '@lion/field'; | ||
| import { ChoiceInputMixin } from '@lion/choice-input'; | ||
| import { LionSwitchButton } from './LionSwitchButton.js'; | ||
@@ -11,2 +11,6 @@ | ||
| css` | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| :host([disabled]) { | ||
@@ -49,11 +53,7 @@ color: #adadad; | ||
| _groupOneTemplate() { | ||
| return html` | ||
| ${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()} | ||
| `; | ||
| return html`${this._labelTemplate()} ${this._helpTextTemplate()} ${this._feedbackTemplate()}`; | ||
| } | ||
| _groupTwoTemplate() { | ||
| return html` | ||
| ${this._inputGroupTemplate()} | ||
| `; | ||
| return html`${this._inputGroupTemplate()}`; | ||
| } | ||
@@ -60,0 +60,0 @@ |
@@ -28,2 +28,6 @@ import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core'; | ||
| :host([hidden]) { | ||
| display: none; | ||
| } | ||
| .btn { | ||
@@ -30,0 +34,0 @@ position: relative; |
| import { expect, fixture, html } from '@open-wc/testing'; | ||
| import sinon from 'sinon'; | ||
| import '../lion-switch-button.js'; | ||
@@ -9,5 +8,3 @@ | ||
| beforeEach(async () => { | ||
| el = await fixture(html` | ||
| <lion-switch-button></lion-switch-button> | ||
| `); | ||
| el = await fixture(html`<lion-switch-button></lion-switch-button>`); | ||
| }); | ||
@@ -29,2 +26,8 @@ | ||
| it('is hidden when attribute hidden is true', async () => { | ||
| el.hidden = true; | ||
| await el.updateComplete; | ||
| expect(el).not.to.be.displayed; | ||
| }); | ||
| it('should toggle the value of "checked" on click', async () => { | ||
@@ -31,0 +34,0 @@ expect(el.checked).to.be.false; |
| import { expect, fixture, html } from '@open-wc/testing'; | ||
| import '../lion-switch.js'; | ||
@@ -7,5 +6,3 @@ | ||
| it('should have default "input" element', async () => { | ||
| const el = await fixture(html` | ||
| <lion-switch></lion-switch> | ||
| `); | ||
| const el = await fixture(html`<lion-switch></lion-switch>`); | ||
| expect(Array.from(el.children).find(child => child.slot === 'input')).not.to.be.false; | ||
@@ -15,5 +12,3 @@ }); | ||
| it('should sync its "disabled" state to child button', async () => { | ||
| const el = await fixture(html` | ||
| <lion-switch disabled></lion-switch> | ||
| `); | ||
| const el = await fixture(html`<lion-switch disabled></lion-switch>`); | ||
| expect(el._inputNode.disabled).to.be.true; | ||
@@ -27,9 +22,10 @@ expect(el._inputNode.hasAttribute('disabled')).to.be.true; | ||
| it('is hidden when attribute hidden is true', async () => { | ||
| const el = await fixture(html`<lion-switch hidden></lion-switch>`); | ||
| expect(el).not.to.be.displayed; | ||
| }); | ||
| it('should sync its "checked" state to child button', async () => { | ||
| const uncheckedEl = await fixture(html` | ||
| <lion-switch></lion-switch> | ||
| `); | ||
| const checkedEl = await fixture(html` | ||
| <lion-switch checked></lion-switch> | ||
| `); | ||
| const uncheckedEl = await fixture(html`<lion-switch></lion-switch>`); | ||
| const checkedEl = await fixture(html`<lion-switch checked></lion-switch>`); | ||
| expect(uncheckedEl._inputNode.checked).to.be.false; | ||
@@ -46,5 +42,3 @@ expect(checkedEl._inputNode.checked).to.be.true; | ||
| it('should sync "checked" state received from child button', async () => { | ||
| const el = await fixture(html` | ||
| <lion-switch></lion-switch> | ||
| `); | ||
| const el = await fixture(html`<lion-switch></lion-switch>`); | ||
| const button = el._inputNode; | ||
@@ -59,5 +53,3 @@ expect(el.checked).to.be.false; | ||
| it('synchronizes modelValue to checked state and vice versa', async () => { | ||
| const el = await fixture(html` | ||
| <lion-switch .choiceValue=${'foo'}></lion-switch> | ||
| `); | ||
| const el = await fixture(html`<lion-switch .choiceValue=${'foo'}></lion-switch>`); | ||
| expect(el.checked).to.be.false; | ||
@@ -77,7 +69,5 @@ expect(el.modelValue).to.deep.equal({ | ||
| it('is submitted by default', async () => { | ||
| const el = await fixture(html` | ||
| <lion-switch></lion-switch> | ||
| `); | ||
| const el = await fixture(html`<lion-switch></lion-switch>`); | ||
| expect(el.submitted).to.be.true; | ||
| }); | ||
| }); |
New alerts
License Policy Violation
LicenseThis 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
LicenseThis 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
- increased by0.07%
29012
Worsened metrics
- Lines of code
- decreased by-1.4%
352
- Number of lines in readme file
- decreased by-27.78%
26
Dependency changes
+ Added@lion/choice-input@0.8.2(transitive)
+ Added@lion/core@0.5.2(transitive)
+ Added@lion/field@0.12.2(transitive)
+ Added@lion/localize@0.9.2(transitive)
+ Added@lion/validate@0.9.2(transitive)
- Removed@lion/choice-input@0.8.1(transitive)
- Removed@lion/core@0.5.1(transitive)
- Removed@lion/field@0.12.1(transitive)
- Removed@lion/localize@0.9.1(transitive)
- Removed@lion/validate@0.9.1(transitive)
Updated@lion/choice-input@0.8.2
Updated@lion/core@0.5.2
Updated@lion/field@0.12.2