ayo/lion
1
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

chore(switch): rename

Browse source
This commit is contained in:
Alex Ghiu 2019-10-30 15:45:34 +01:00 committed by CubLion
parent c76b320e2a
commit 4b27ef5623
11 changed files with 44 additions and 46 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

6
packages/switch/README.md
View file

@ -2,7 +2,7 @@
[//]: # 'AUTO INSERT HEADER PREPUBLISH' [//]: # 'AUTO INSERT HEADER PREPUBLISH'
`lion-input-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.
## Features ## Features
@ -19,11 +19,11 @@ npm i --save @lion/switch
``` ```
```js ```js
import '@lion/swith/lion-input-switch.js'; import '@lion/swith/lion-switch.js';
``` ```
### Example ### Example
```html ```html
<lion-input-switch name="airplaneMode" label="Airplane mode" checked></lion-input-switch> <lion-switch name="airplaneMode" label="Airplane mode" checked></lion-switch>
``` ```

4
packages/switch/index.js
View file

@ -1,2 +1,2 @@
export { LionInputSwitch } from './src/LionInputSwitch.js'; export { LionSwitch } from './src/LionSwitch.js';
export { LionButtonSwitch } from './src/LionButtonSwitch.js'; export { LionSwitchButton } from './src/LionSwitchButton.js';

3
packages/switch/lion-button-switch.js
View file

@ -1,3 +0,0 @@
import { LionButtonSwitch } from './src/LionButtonSwitch.js';
customElements.define('lion-button-switch', LionButtonSwitch);

3
packages/switch/lion-input-switch.js
View file

@ -1,3 +0,0 @@
import { LionInputSwitch } from './src/LionInputSwitch.js';
customElements.define('lion-input-switch', LionInputSwitch);

3
packages/switch/lion-switch-button.js Normal file
View file

@ -0,0 +1,3 @@
import { LionSwitchButton } from './src/LionSwitchButton.js';
customElements.define('lion-switch-button', LionSwitchButton);

3
packages/switch/lion-switch.js Normal file
View file

@ -0,0 +1,3 @@
import { LionSwitch } from './src/LionSwitch.js';
customElements.define('lion-switch', LionSwitch);

6
packages/switch/src/LionInputSwitch.js → packages/switch/src/LionSwitch.js
View file

@ -2,9 +2,9 @@ import { html, css } from '@lion/core';
import { LionField } from '@lion/field'; import { LionField } from '@lion/field';
import { ChoiceInputMixin } from '@lion/choice-input'; import { ChoiceInputMixin } from '@lion/choice-input';
import '../lion-button-switch.js'; import '../lion-switch-button.js';
export class LionInputSwitch extends ChoiceInputMixin(LionField) { export class LionSwitch extends ChoiceInputMixin(LionField) {
static get styles() { static get styles() {
return [ return [
super.styles, super.styles,
@ -19,7 +19,7 @@ export class LionInputSwitch extends ChoiceInputMixin(LionField) {
get slots() { get slots() {
return { return {
...super.slots, ...super.slots,
input: () => document.createElement('lion-button-switch'), input: () => document.createElement('lion-switch-button'),
}; };
} }

12
packages/switch/src/LionButtonSwitch.js → packages/switch/src/LionSwitchButton.js
View file

@ -1,6 +1,6 @@
import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core'; import { html, css, LitElement, DisabledWithTabIndexMixin } from '@lion/core';
export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) { export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
static get properties() { static get properties() {
return { return {
role: { role: {
@ -36,13 +36,13 @@ export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
outline: 2px solid #bde4ff; outline: 2px solid #bde4ff;
} }
.button-switch__track { .switch-button__track {
background: #eee; background: #eee;
width: 100%; width: 100%;
height: 100%; height: 100%;
} }
.button-switch__thumb { .switch-button__thumb {
background: #ccc; background: #ccc;
width: 50%; width: 50%;
height: 100%; height: 100%;
@ -50,7 +50,7 @@ export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
top: 0; top: 0;
} }
:host([checked]) .button-switch__thumb { :host([checked]) .switch-button__thumb {
right: 0; right: 0;
} }
`, `,
@ -60,8 +60,8 @@ export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
render() { render() {
return html` return html`
<div class="btn"> <div class="btn">
<div class="button-switch__track"></div> <div class="switch-button__track"></div>
<div class="button-switch__thumb"></div> <div class="switch-button__thumb"></div>
</div> </div>
`; `;
} }

26
packages/switch/stories/index.stories.js
View file

@ -3,21 +3,21 @@ import { LitElement } from '@lion/core';
import { LocalizeMixin } from '@lion/localize'; import { LocalizeMixin } from '@lion/localize';
import '../lion-input-switch.js'; import '../lion-switch.js';
import '../lion-button-switch.js'; import '../lion-switch-button.js';
import '@lion/form/lion-form.js'; import '@lion/form/lion-form.js';
storiesOf('Forms|Switch', module) storiesOf('Buttons|Switch', module)
.add( .add(
'All text slots', 'All text slots',
() => html` () => html`
<lion-input-switch label="Label" help-text="Help text"> </lion-input-switch> <lion-switch label="Label" help-text="Help text"> </lion-switch>
`, `,
) )
.add( .add(
'Disabled', 'Disabled',
() => html` () => html`
<lion-input-switch label="Disabled label" disabled> </lion-input-switch> <lion-switch label="Disabled label" disabled> </lion-switch>
`, `,
) )
.add('Validation', () => { .add('Validation', () => {
@ -52,18 +52,16 @@ storiesOf('Forms|Switch', module)
return html` return html`
<lion-form id="postsForm" @submit="${this.submit}"> <lion-form id="postsForm" @submit="${this.submit}">
<form> <form>
<lion-input-switch name="emailAddress" label="Share email address"> <lion-switch name="emailAddress" label="Share email address"> </lion-switch>
</lion-input-switch> <lion-switch name="subjectField" label="Show subject field" checked>
<lion-input-switch name="subjectField" label="Show subject field" checked> </lion-switch>
</lion-input-switch> <lion-switch name="characterCount" label="Character count"> </lion-switch>
<lion-input-switch name="characterCount" label="Character count"> <lion-switch
</lion-input-switch>
<lion-input-switch
name="newsletterCheck" name="newsletterCheck"
label="* Subscribe to newsletter" label="* Subscribe to newsletter"
.infoValidators="${[isTrueValidator()]}" .infoValidators="${[isTrueValidator()]}"
> >
</lion-input-switch> </lion-switch>
<button type="submit"> <button type="submit">
Submit Submit
</button> </button>
@ -88,6 +86,6 @@ storiesOf('Forms|Switch', module)
.add( .add(
'Button', 'Button',
() => html` () => html`
<lion-button-switch></lion-button-switch> <lion-switch-button></lion-switch-button>
`, `,
); );

6
packages/switch/test/lion-button-switch.test.js → packages/switch/test/lion-switch-button.test.js
View file

@ -1,13 +1,13 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import sinon from 'sinon'; import sinon from 'sinon';
import '../lion-button-switch.js'; import '../lion-switch-button.js';
describe('lion-button-switch', () => { describe('lion-switch-button', () => {
let el; let el;
beforeEach(async () => { beforeEach(async () => {
el = await fixture(html` el = await fixture(html`
<lion-button-switch></lion-button-switch> <lion-switch-button></lion-switch-button>
`); `);
}); });

18
packages/switch/test/lion-input-switch.test.js → packages/switch/test/lion-switch.test.js
View file

@ -1,18 +1,18 @@
import { expect, fixture, html } from '@open-wc/testing'; import { expect, fixture, html } from '@open-wc/testing';
import '../lion-input-switch.js'; import '../lion-switch.js';
describe('lion-input-switch', () => { describe('lion-switch', () => {
it('should have default "input" element', async () => { it('should have default "input" element', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-input-switch></lion-input-switch> <lion-switch></lion-switch>
`); `);
expect(el.querySelector('[slot="input"]')).not.to.be.null; expect(el.querySelector('[slot="input"]')).not.to.be.false;
}); });
it('should sync its "disabled" state to child button', async () => { it('should sync its "disabled" state to child button', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-input-switch disabled></lion-input-switch> <lion-switch disabled></lion-switch>
`); `);
expect(el.inputElement.disabled).to.be.true; expect(el.inputElement.disabled).to.be.true;
expect(el.inputElement.hasAttribute('disabled')).to.be.true; expect(el.inputElement.hasAttribute('disabled')).to.be.true;
@ -24,10 +24,10 @@ describe('lion-input-switch', () => {
it('should sync its "checked" state to child button', async () => { it('should sync its "checked" state to child button', async () => {
const uncheckedEl = await fixture(html` const uncheckedEl = await fixture(html`
<lion-input-switch></lion-input-switch> <lion-switch></lion-switch>
`); `);
const checkedEl = await fixture(html` const checkedEl = await fixture(html`
<lion-input-switch checked></lion-input-switch> <lion-switch checked></lion-switch>
`); `);
expect(uncheckedEl.inputElement.checked).to.be.false; expect(uncheckedEl.inputElement.checked).to.be.false;
expect(checkedEl.inputElement.checked).to.be.true; expect(checkedEl.inputElement.checked).to.be.true;
@ -41,7 +41,7 @@ describe('lion-input-switch', () => {
it('should sync "checked" state received from child button', async () => { it('should sync "checked" state received from child button', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-input-switch></lion-input-switch> <lion-switch></lion-switch>
`); `);
const button = el.inputElement; const button = el.inputElement;
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
@ -53,7 +53,7 @@ describe('lion-input-switch', () => {
it('synchronizes modelValue to checked state and vice versa', async () => { it('synchronizes modelValue to checked state and vice versa', async () => {
const el = await fixture(html` const el = await fixture(html`
<lion-input-switch .choiceValue=${'foo'}></lion-input-switch> <lion-switch .choiceValue=${'foo'}></lion-switch>
`); `);
expect(el.checked).to.be.false; expect(el.checked).to.be.false;
expect(el.modelValue).to.deep.equal({ expect(el.modelValue).to.deep.equal({