@lion/switch - npm Package Compare versions

Comparing version 0.2.1 to 0.3.0

CHANGELOG.md

@@ -6,2 +6,13 @@ # Change Log
 
+# [0.3.0](https://github.com/ing-bank/lion/compare/@lion/switch@0.2.1...@lion/switch@0.3.0) (2019-11-18)
+
+
+### Features
+
+* finalize validation and adopt it everywhere ([396deb2](https://github.com/ing-bank/lion/commit/396deb2e3b4243f102a5c98e9b0518fa0f31a6b1))
+
+
+
+
+
 ## [0.2.1](https://github.com/ing-bank/lion/compare/@lion/switch@0.2.0...@lion/switch@0.2.1) (2019-11-15)
@@ -8,0 +19,0 @@

package.json

 {
   "name": "@lion/switch",
-  "version": "0.2.1",
+  "version": "0.3.0",
   "description": "A Switch is used for switching a property or feature on and off",
@@ -35,11 +35,10 @@ "author": "ing-bank",
   "dependencies": {
-    "@lion/button": "^0.3.36",
-    "@lion/choice-input": "^0.3.1",
+    "@lion/button": "^0.3.37",
+    "@lion/choice-input": "^0.4.0",
     "@lion/core": "^0.3.0",
-    "@lion/field": "^0.4.1"
+    "@lion/field": "^0.5.0"
   },
   "devDependencies": {
-    "@lion/form": "^0.2.1",
     "@lion/localize": "^0.5.0",
-    "@lion/validate": "^0.3.1",
+    "@lion/validate": "^0.4.0",
     "@open-wc/demoing-storybook": "^0.2.0",
@@ -49,3 +48,3 @@ "@open-wc/testing": "^2.3.4",
   },
-  "gitHead": "e1485188a03c063819623288f3231cfecca023ec"
+  "gitHead": "da30ee3bb13d26f873d633ed960163bec9cba164"
 }

README.md

@@ -13,3 +13,3 @@ # Switch
 
-`lion-switch` is a component that is used to toggle a property or feature on or off.
+`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.
 
@@ -31,3 +31,3 @@ ## Features
 ```js
-import '@lion/swith/lion-switch.js';
+import '@lion/switch/lion-switch.js';
 ```
@@ -34,0 +34,0 @@

src/LionSwitch.js

@@ -42,2 +42,3 @@ import { html, css } from '@lion/core';
     this._syncButtonSwitch();
+    this.submitted = true;
   }
@@ -50,2 +51,8 @@
 
+  /**
+   * Override this function from ChoiceInputMixin
+   */
+  // eslint-disable-next-line class-methods-use-this
+  _isEmpty() {}
+
   __handleButtonSwitchCheckedChanged() {
@@ -52,0 +59,0 @@ // TODO: should be replaced by "_inputNode" after the next breaking change

src/LionSwitchButton.js

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

stories/index.stories.js

 import { storiesOf, html } from '@open-wc/demoing-storybook';
-import { LitElement } from '@lion/core';
+import { Validator } from '@lion/validate';
 
-import { LocalizeMixin } from '@lion/localize';
-
 import '../lion-switch.js';
 import '../lion-switch-button.js';
-import '@lion/form/lion-form.js';
 
 storiesOf('Buttons|Switch', module)
   .add(
-    'Button',
+    'Default',
     () => html`
-      <lion-switch-button aria-label="Toggle button"></lion-switch-button>
+      <lion-switch label="Label" help-text="Help text"></lion-switch>
     `,
   )
   .add(
-    'Disabled',
+    'Disabeld',
     () => html`
-      <lion-switch-button aria-label="Toggle button" disabled></lion-switch-button>
+      <lion-switch label="Label" disabled></lion-switch>
     `,
   )
-  .add(
-    'With input slots',
-    () => html`
-      <lion-switch label="Label" help-text="Help text"></lion-switch>
-    `,
-  )
-
   .add('Validation', () => {
-    const isTrue = value => value && value.checked && value.checked === true;
-    const isTrueValidator = (...factoryParams) => [
-      (...params) => ({
-        isTrue: isTrue(...params),
-      }),
-      ...factoryParams,
-    ];
-    const tagName = 'lion-switch-validation-demo';
-    if (!customElements.get(tagName)) {
-      customElements.define(
-        tagName,
-        class extends LocalizeMixin(LitElement) {
-          static get localizeNamespaces() {
-            const result = [
-              {
-                'lion-validate+isTrue': () =>
-                  Promise.resolve({
-                    info: {
-                      isTrue: 'You will not get the latest news!',
-                    },
-                  }),
-              },
-              ...super.localizeNamespaces,
-            ];
-            return result;
-          }
+    class IsTrue extends Validator {
+      constructor() {
+        super();
+        this.name = 'IsTrue';
+      }
 
-          render() {
-            return html`
-              <lion-form id="postsForm" @submit="${this.submit}">
-                <form>
-                  <lion-switch name="emailAddress" label="Share email address"> </lion-switch>
-                  <lion-switch name="subjectField" label="Show subject field" checked>
-                  </lion-switch>
-                  <lion-switch name="characterCount" label="Character count"> </lion-switch>
-                  <lion-switch
-                    name="newsletterCheck"
-                    label="* Subscribe to newsletter"
-                    .infoValidators="${[isTrueValidator()]}"
-                  >
-                  </lion-switch>
-                  <button type="submit">
-                    Submit
-                  </button>
-                </form>
-              </lion-form>
-            `;
-          }
+      execute(value) {
+        return !value.checked;
+      }
 
-          submit() {
-            const form = this.shadowRoot.querySelector('#postsForm');
-            if (form.errorState === false) {
-              console.log(form.serializeGroup());
-            }
-          }
-        },
-      );
+      static async getMessage() {
+        return "You won't get the latest news!";
+      }
     }
     return html`
-      <lion-switch-validation-demo></lion-switch-validation-demo>
+      <lion-switch
+        id="newsletterCheck"
+        name="newsletterCheck"
+        label="Subscribe to newsletter"
+        .validators="${[new IsTrue(null, { type: 'info' })]}"
+      ></lion-switch>
     `;
-  });
+  })
+  .add(
+    'Button',
+    () => html`
+      <lion-switch-button aria-label="Toggle button"></lion-switch-button>
+    `,
+  );

test/lion-switch.test.js

@@ -70,2 +70,9 @@ import { expect, fixture, html } from '@open-wc/testing';
   });
+
+  it('is submitted by default', async () => {
+    const el = await fixture(html`
+      <lion-switch></lion-switch>
+    `);
+    expect(el.submitted).to.be.true;
+  });
 });

No alert changes

Improved metrics

Dev dependency count

5

decreased by-16.67%

Worsened metrics

Total package byte prevSize

17498

decreased by-4.5%

Lines of code

382

decreased by-7.06%

Dependency changes

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

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

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

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

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

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

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

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

• Updated@lion/button@^0.3.37

• Updated@lion/choice-input@^0.4.0

• Updated@lion/field@^0.5.0