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'
`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
@ -19,11 +19,11 @@ npm i --save @lion/switch
```
```js
import '@lion/swith/lion-input-switch.js';
import '@lion/swith/lion-switch.js';
```
### Example
```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 { LionButtonSwitch } from './src/LionButtonSwitch.js';
export { LionSwitch } from './src/LionSwitch.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 { 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() {
return [
super.styles,
@ -19,7 +19,7 @@ export class LionInputSwitch extends ChoiceInputMixin(LionField) {
get slots() {
return {
...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';
export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
export class LionSwitchButton extends DisabledWithTabIndexMixin(LitElement) {
static get properties() {
return {
role: {
@ -36,13 +36,13 @@ export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
outline: 2px solid #bde4ff;
}
.button-switch__track {
.switch-button__track {
background: #eee;
width: 100%;
height: 100%;
}
.button-switch__thumb {
.switch-button__thumb {
background: #ccc;
width: 50%;
height: 100%;
@ -50,7 +50,7 @@ export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
top: 0;
}
:host([checked]) .button-switch__thumb {
:host([checked]) .switch-button__thumb {
right: 0;
}
`,
@ -60,8 +60,8 @@ export class LionButtonSwitch extends DisabledWithTabIndexMixin(LitElement) {
render() {
return html`
<div class="btn">
<div class="button-switch__track"></div>
<div class="button-switch__thumb"></div>
<div class="switch-button__track"></div>
<div class="switch-button__thumb"></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 '../lion-input-switch.js';
import '../lion-button-switch.js';
import '../lion-switch.js';
import '../lion-switch-button.js';
import '@lion/form/lion-form.js';
storiesOf('Forms|Switch', module)
storiesOf('Buttons|Switch', module)
.add(
'All text slots',
() => html`
<lion-input-switch label="Label" help-text="Help text"> </lion-input-switch>
<lion-switch label="Label" help-text="Help text"> </lion-switch>
`,
)
.add(
'Disabled',
() => html`
<lion-input-switch label="Disabled label" disabled> </lion-input-switch>
<lion-switch label="Disabled label" disabled> </lion-switch>
`,
)
.add('Validation', () => {
@ -52,18 +52,16 @@ storiesOf('Forms|Switch', module)
return html`
<lion-form id="postsForm" @submit="${this.submit}">
<form>
<lion-input-switch name="emailAddress" label="Share email address">
</lion-input-switch>
<lion-input-switch name="subjectField" label="Show subject field" checked>
</lion-input-switch>
<lion-input-switch name="characterCount" label="Character count">
</lion-input-switch>
<lion-input-switch
<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-input-switch>
</lion-switch>
<button type="submit">
Submit
</button>
@ -88,6 +86,6 @@ storiesOf('Forms|Switch', module)
.add(
'Button',
() => 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 sinon from 'sinon';
import '../lion-button-switch.js';
import '../lion-switch-button.js';
describe('lion-button-switch', () => {
describe('lion-switch-button', () => {
let el;
beforeEach(async () => {
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 '../lion-input-switch.js';
import '../lion-switch.js';
describe('lion-input-switch', () => {
describe('lion-switch', () => {
it('should have default "input" element', async () => {
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 () => {
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.hasAttribute('disabled')).to.be.true;
@ -24,10 +24,10 @@ describe('lion-input-switch', () => {
it('should sync its "checked" state to child button', async () => {
const uncheckedEl = await fixture(html`
<lion-input-switch></lion-input-switch>
<lion-switch></lion-switch>
`);
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(checkedEl.inputElement.checked).to.be.true;
@ -41,7 +41,7 @@ describe('lion-input-switch', () => {
it('should sync "checked" state received from child button', async () => {
const el = await fixture(html`
<lion-input-switch></lion-input-switch>
<lion-switch></lion-switch>
`);
const button = el.inputElement;
expect(el.checked).to.be.false;
@ -53,7 +53,7 @@ describe('lion-input-switch', () => {
it('synchronizes modelValue to checked state and vice versa', async () => {
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.modelValue).to.deep.equal({