@lion/ui 0.0.1

package/components/progress-indicator/test/lion-progress-indicator.test.js

@@ -0,0 +1,211 @@
+import { html } from 'lit';
+import { expect, fixture as _fixture } from '@open-wc/testing';
+
+import '@lion/ui/define/lion-progress-indicator.js';
+
+/**
+ * @typedef {import('../src/LionProgressIndicator.js').LionProgressIndicator} LionProgressIndicator
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionProgressIndicator>} */ (_fixture);
+
+describe('lion-progress-indicator', () => {
+  describe('indeterminate', async () => {
+    it('is indeterminate when has no value attribute', async () => {
+      const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
+      expect(el.indeterminate).to.be.true;
+    });
+
+    it('adds a label by default', async () => {
+      const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
+      await el.localizeNamespacesLoaded;
+      expect(el.getAttribute('aria-label')).to.equal('Loading');
+    });
+
+    it('can override a label with "aria-label"', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
+      );
+      await el.localizeNamespacesLoaded;
+      expect(el.getAttribute('aria-label')).to.equal('foo');
+      el.setAttribute('aria-label', 'bar');
+      expect(el.getAttribute('aria-label')).to.equal('bar');
+      el.removeAttribute('aria-label');
+      await el.updateComplete;
+      expect(el.getAttribute('aria-label')).to.equal('Loading');
+    });
+
+    it('can override a label with "aria-labelledby"', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator aria-labelledby="foo-id"></lion-progress-indicator> `,
+      );
+      await el.localizeNamespacesLoaded;
+      expect(el.getAttribute('aria-labelledby')).to.equal('foo-id');
+      expect(el.hasAttribute('aria-label')).to.be.false;
+      el.setAttribute('aria-labelledby', 'bar-id');
+      expect(el.getAttribute('aria-labelledby')).to.equal('bar-id');
+      expect(el.hasAttribute('aria-label')).to.be.false;
+      el.removeAttribute('aria-labelledby');
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-labelledby')).to.be.false;
+      expect(el.getAttribute('aria-label')).to.equal('Loading');
+    });
+
+    it('loosses default aria-label when switch to determinate state', async () => {
+      const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
+      await el.localizeNamespacesLoaded;
+      expect(el.getAttribute('aria-label')).to.equal('Loading');
+      el.setAttribute('value', '30');
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-label')).to.be.false;
+    });
+
+    it('keeps own aria-label when switch to determinate state', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator aria-label="foo"></lion-progress-indicator> `,
+      );
+      expect(el.getAttribute('aria-label')).to.equal('foo');
+      el.setAttribute('value', '30');
+      await el.updateComplete;
+      expect(el.getAttribute('aria-label')).to.equal('foo');
+    });
+  });
+
+  describe('determinate', async () => {
+    it('is determinate when it has a value', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
+      );
+      expect(el.indeterminate).to.be.false;
+    });
+
+    it('can update value', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
+      );
+      expect(el.getAttribute('aria-valuenow')).to.equal('25');
+      el.value = 30;
+      await el.updateComplete;
+      expect(el.getAttribute('aria-valuenow')).to.equal('30');
+    });
+
+    it('can update min', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
+      );
+      expect(el.getAttribute('aria-valuemin')).to.equal('0');
+      el.min = 30;
+      await el.updateComplete;
+      expect(el.getAttribute('aria-valuemin')).to.equal('30');
+    });
+
+    it('can update max', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator value="50" aria-label="foo"></lion-progress-indicator> `,
+      );
+      expect(el.getAttribute('aria-valuemax')).to.equal('100');
+      el.max = 70;
+      await el.updateComplete;
+      expect(el.getAttribute('aria-valuemax')).to.equal('70');
+    });
+
+    it('min & max limits value', async () => {
+      const el = await fixture(
+        html` <lion-progress-indicator value="150" aria-label="foo"></lion-progress-indicator> `,
+      );
+      // sets to default max: 100
+      expect(el.getAttribute('aria-valuenow')).to.equal('100');
+      el.value = -20;
+      await el.updateComplete;
+      // sets to default min: 0
+      expect(el.getAttribute('aria-valuenow')).to.equal('0');
+    });
+
+    // TODO make this feature available
+    it.skip('supports valuetext', async () => {
+      const el = await fixture(
+        html`
+          <lion-progress-indicator
+            value="8"
+            value-text="{value}% (34 minutes) remaining"
+          ></lion-progress-indicator>
+        `,
+      );
+      expect(el.getAttribute('aria-valuetext')).to.equal('8% (34 minutes) remaining');
+    });
+
+    it('becomes indeterminate if value gets removed', async () => {
+      const el = await fixture(
+        html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
+      );
+      el.removeAttribute('value');
+      await el.updateComplete;
+      expect(el.indeterminate).to.be.true;
+      expect(el.getAttribute('aria-label')).to.equal('Loading');
+    });
+
+    it("becomes indeterminate if value ain't a number", async () => {
+      const el = await fixture(
+        html`<lion-progress-indicator value="30"></lion-progress-indicator> `,
+      );
+      el.setAttribute('value', '');
+      await el.updateComplete;
+      expect(el.indeterminate).to.be.true;
+      await el.updateComplete;
+      expect(el.hasAttribute('aria-valuenow')).to.be.false;
+      expect(el.hasAttribute('aria-valuemin')).to.be.false;
+      expect(el.hasAttribute('aria-valuemax')).to.be.false;
+      expect(el.getAttribute('aria-label')).to.equal('Loading');
+    });
+  });
+
+  describe('Subclasers', () => {
+    it('can use _progressPercentage getter to get the progress percentage', async () => {
+      const el = await fixture(
+        html`
+          <lion-progress-indicator max="50" value="10" aria-label="foo"></lion-progress-indicator>
+        `,
+      );
+      expect(el._progressPercentage).to.equal(20);
+    });
+  });
+
+  describe('Accessibility', () => {
+    it('by default', async () => {
+      const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
+      expect(el.getAttribute('role')).to.equal('progressbar');
+    });
+
+    describe('indeterminate', () => {
+      it('passes a11y test', async () => {
+        const el = await fixture(html` <lion-progress-indicator></lion-progress-indicator> `);
+        await expect(el).to.be.accessible();
+      });
+    });
+
+    describe('determinate', () => {
+      it('passes a11y test', async () => {
+        const el = await fixture(
+          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
+        );
+        await expect(el).to.be.accessible();
+      });
+
+      it('once value is set', async () => {
+        const el = await fixture(
+          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
+        );
+        expect(el.getAttribute('aria-valuenow')).to.equal('25');
+      });
+
+      it('allows to set min & max values', async () => {
+        const el = await fixture(
+          html` <lion-progress-indicator value="25" aria-label="foo"></lion-progress-indicator> `,
+        );
+        expect(el.getAttribute('aria-valuemin')).to.equal('0');
+        expect(el.getAttribute('aria-valuemax')).to.equal('100');
+      });
+    });
+  });
+});

package/components/progress-indicator/translations/bg.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Зареждане',
+};

package/components/progress-indicator/translations/cs.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Načítání',
+};

package/components/progress-indicator/translations/de.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Wird geladen',
+};

package/components/progress-indicator/translations/en.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Loading',
+};

package/components/progress-indicator/translations/es.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Cargando',
+};

package/components/progress-indicator/translations/fr.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Chargement',
+};

package/components/progress-indicator/translations/hu.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Betöltés',
+};

package/components/progress-indicator/translations/it.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Caricamento in corso',
+};

package/components/progress-indicator/translations/nl.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Laden',
+};

package/components/progress-indicator/translations/pl.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Ładuję',
+};

package/components/progress-indicator/translations/ro.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'Se incarca',
+};

package/components/progress-indicator/translations/ru.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'погрузка',
+};

package/components/progress-indicator/translations/sk.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'погрузка',
+};

package/components/progress-indicator/translations/uk.js

@@ -0,0 +1,3 @@
+export default {
+  loading: 'завантаження',
+};

package/components/progress-indicator/translations/zh.js

@@ -0,0 +1,3 @@
+export default {
+  loading: '载入中',
+};

package/components/radio-group/src/LionRadio.js

@@ -0,0 +1,28 @@
+import { ChoiceInputMixin } from '@lion/ui/form-core.js';
+import { LionInput } from '@lion/ui/input.js';
+
+/**
+ * Lion-radio can be used inside a lion-radio-group.
+ *
+ * <lion-radio-group name="radios">
+ *   <label slot="label">My Radio</label>
+ *   <lion-radio>
+ *     <label slot="label">Male</label>
+ *   </lion-radio>
+ *   <lion-radio>
+ *     <label slot="label">Female</label>
+ *   </lion-radio>
+ * </lion-radio-group>
+ *
+ * You can preselect an option by setting marking an lion-radio checked.
+ *   Example:
+ *   <lion-radio checked>
+ *
+ * @customElement lion-radio
+ */
+export class LionRadio extends ChoiceInputMixin(LionInput) {
+  connectedCallback() {
+    super.connectedCallback();
+    this.type = 'radio';
+  }
+}

package/components/radio-group/src/LionRadioGroup.js

@@ -0,0 +1,34 @@
+import { LitElement } from 'lit';
+import { ChoiceGroupMixin, FormGroupMixin } from '@lion/ui/form-core.js';
+
+/**
+ * A wrapper around multiple radios.
+ */
+export class LionRadioGroup extends ChoiceGroupMixin(FormGroupMixin(LitElement)) {
+  connectedCallback() {
+    super.connectedCallback();
+    this.setAttribute('role', 'radiogroup');
+  }
+
+  /**
+   * @override FormGroupMixin, during a reset if the current checked value is behind
+   * the initial checked value, they both got unchecked
+   */
+  resetGroup() {
+    let initValue;
+    this.formElements.forEach(child => {
+      if (typeof child.resetGroup === 'function') {
+        child.resetGroup();
+      } else if (typeof child.reset === 'function') {
+        child.reset();
+        // If the value was initially checked save this
+        if (child.checked) {
+          initValue = child.value;
+        }
+      }
+    });
+    this.modelValue = initValue;
+
+    this.resetInteractionState();
+  }
+}

package/components/radio-group/test/lion-radio-group-integrations.test.js

@@ -0,0 +1,9 @@
+import { runChoiceGroupMixinSuite } from '@lion/ui/form-core-test-suites.js';
+import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-radio.js';
+
+runChoiceGroupMixinSuite({
+  parentTagString: 'lion-radio-group',
+  childTagString: 'lion-radio',
+  choiceType: 'single',
+});

package/components/radio-group/test/lion-radio-group.test.js

@@ -0,0 +1,133 @@
+import { expect, fixture as _fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '@lion/ui/define/lion-radio-group.js';
+import '@lion/ui/define/lion-radio.js';
+
+/**
+ * @typedef {import('../src/LionRadioGroup.js').LionRadioGroup} LionRadioGroup
+ * @typedef {import('../src/LionRadio.js').LionRadio} LionRadio
+ * @typedef {import('lit').TemplateResult} TemplateResult
+ */
+const fixture = /** @type {(arg: TemplateResult) => Promise<LionRadioGroup>} */ (_fixture);
+
+describe('<lion-radio-group>', () => {
+  describe('resetGroup', () => {
+    // TODO move to FormGroupMixin test suite and let CheckboxGroup make use of them
+    it('restores to empty modelValue if changes were made', async () => {
+      const el = await fixture(html`
+        <lion-radio-group name="gender" label="Gender">
+          <lion-radio label="Male" .choiceValue=${'male'}></lion-radio>
+          <lion-radio label="Female" .choiceValue=${'female'}></lion-radio>
+        </lion-radio-group>
+      `);
+      el.formElements[0].checked = true;
+      expect(el.modelValue).to.deep.equal('male');
+
+      el.resetGroup();
+      expect(el.modelValue).to.deep.equal('');
+    });
+
+    it('restores default values if changes were made', async () => {
+      const el = await fixture(html`
+        <lion-radio-group name="gender" label="Gender">
+          <lion-radio label="Male" .choiceValue=${'male'}></lion-radio>
+          <lion-radio label="Female" .modelValue=${{ value: 'female', checked: true }}></lion-radio>
+          <lion-radio label="Other" .choiceValue=${'other'}></lion-radio>
+        </lion-radio-group>
+      `);
+      el.formElements[0].checked = true;
+      expect(el.modelValue).to.deep.equal('male');
+
+      el.resetGroup();
+      expect(el.modelValue).to.deep.equal('female');
+
+      el.formElements[2].checked = true;
+      expect(el.modelValue).to.deep.equal('other');
+
+      el.resetGroup();
+      await el.formElements[1].updateComplete;
+      await el.updateComplete;
+      expect(el.modelValue).to.deep.equal('female');
+    });
+  });
+
+  it('should have role = radiogroup', async () => {
+    const el = await fixture(html`
+      <lion-radio-group label="Gender" name="gender">
+        <lion-radio label="male" value="male"></lion-radio>
+        <lion-radio label="female" value="female" checked></lion-radio>
+      </lion-radio-group>
+    `);
+    expect(el.getAttribute('role')).to.equal('radiogroup');
+  });
+
+  it(`becomes "touched" once a single element of the group changes`, async () => {
+    const el = await fixture(html`
+      <lion-radio-group name="myGroup">
+        <lion-radio></lion-radio>
+        <lion-radio></lion-radio>
+      </lion-radio-group>
+    `);
+
+    el.formElements[1].focus();
+    expect(el.touched).to.equal(false, 'initially, touched state is false');
+    /** @type {LionRadio} */ (el.children[1]).checked = true;
+    expect(el.touched, `focused via a mouse click, group should be touched`).to.be.true;
+  });
+
+  it('allows selection of only one radio in a named group', async () => {
+    const el = await fixture(html`
+      <lion-radio-group name="gender">
+        <lion-radio .modelValue="${{ value: 'male', checked: false }}"></lion-radio>
+        <lion-radio .modelValue="${{ value: 'female', checked: false }}"></lion-radio>
+      </lion-radio-group>
+    `);
+    const male = el.formElements[0];
+    const maleInput = male.querySelector('input');
+    const female = el.formElements[1];
+    const femaleInput = female.querySelector('input');
+
+    expect(male.checked).to.equal(false);
+    expect(female.checked).to.equal(false);
+
+    maleInput.focus();
+    maleInput.click();
+    expect(male.checked).to.equal(true);
+    expect(female.checked).to.equal(false);
+
+    femaleInput.focus();
+    femaleInput.click();
+    expect(male.checked).to.equal(false);
+    expect(female.checked).to.equal(true);
+  });
+
+  it('is accessible', async () => {
+    const el = await fixture(html`
+      <lion-radio-group label="My group" name="gender">
+        <lion-radio label="male" value="male"></lion-radio>
+        <lion-radio label="female" value="female" checked></lion-radio>
+      </lion-radio-group>
+    `);
+    await expect(el).to.be.accessible();
+  });
+
+  it('is accessible when the group is disabled', async () => {
+    const el = await fixture(html`
+      <lion-radio-group label="My group" name="gender" disabled>
+        <lion-radio label="male" value="male"></lion-radio>
+        <lion-radio label="female" value="female" checked></lion-radio>
+      </lion-radio-group>
+    `);
+    await expect(el).to.be.accessible();
+  });
+
+  it('is accessible when an option is disabled', async () => {
+    const el = await fixture(html`
+      <lion-radio-group label="My group" name="gender">
+        <lion-radio label="male" value="male" disabled></lion-radio>
+        <lion-radio label="female" value="female" checked></lion-radio>
+      </lion-radio-group>
+    `);
+    await expect(el).to.be.accessible();
+  });
+});

package/components/radio-group/test/lion-radio-integrations.test.js

@@ -0,0 +1,4 @@
+import '@lion/ui/define/lion-radio.js';
+import { runChoiceInputMixinSuite } from '@lion/ui/form-core-test-suites.js';
+
+runChoiceInputMixinSuite({ tagString: 'lion-radio' });

package/components/radio-group/test/lion-radio.test.js

@@ -0,0 +1,40 @@
+import { expect, fixture } from '@open-wc/testing';
+import { html } from 'lit/static-html.js';
+import '@lion/ui/define/lion-radio.js';
+
+/**
+ * @typedef {import('../src/LionRadio.js').LionRadio} LionRadio
+ */
+
+describe('<lion-radio>', () => {
+  it('should have type = radio', async () => {
+    const el = await fixture(html`
+      <lion-radio name="radio" .choiceValue="${'male'}"></lion-radio>
+    `);
+    expect(el.getAttribute('type')).to.equal('radio');
+  });
+
+  it('can be reset when unchecked by default', async () => {
+    const el = /**  @type {LionRadio} */ (
+      await fixture(html` <lion-radio name="radio" .choiceValue=${'male'}></lion-radio> `)
+    );
+    expect(el._initialModelValue).to.deep.equal({ value: 'male', checked: false });
+    el.checked = true;
+    expect(el.modelValue).to.deep.equal({ value: 'male', checked: true });
+
+    el.reset();
+    expect(el.modelValue).to.deep.equal({ value: 'male', checked: false });
+  });
+
+  it('can be reset when checked by default', async () => {
+    const el = /**  @type {LionRadio} */ (
+      await fixture(html` <lion-radio name="radio" .choiceValue=${'male'} checked></lion-radio> `)
+    );
+    expect(el._initialModelValue).to.deep.equal({ value: 'male', checked: true });
+    el.checked = false;
+    expect(el.modelValue).to.deep.equal({ value: 'male', checked: false });
+
+    el.reset();
+    expect(el.modelValue).to.deep.equal({ value: 'male', checked: true });
+  });
+});

package/components/select/src/LionSelect.js

@@ -0,0 +1,118 @@
+/* eslint-disable max-classes-per-file */
+import { LionField } from '@lion/ui/form-core.js';
+
+/**
+ * @typedef {import('../../localize/types/LocalizeMixinTypes.js').FormatNumberOptions} FormatOptions
+ */
+class LionFieldWithSelect extends LionField {
+  /** @type {any} */
+  static get properties() {
+    return { autocomplete: { type: String } };
+  }
+
+  constructor() {
+    super();
+
+    /**
+     * Delegates autocomplete to select
+     * @type {string|undefined}
+     */
+    this.autocomplete = undefined;
+  }
+
+  /**
+   * @returns {HTMLSelectElement}
+   */
+  get _inputNode() {
+    return /** @type {HTMLSelectElement} */ (
+      Array.from(this.children).find(el => el.slot === 'input')
+    );
+  }
+}
+
+/**
+ * LionSelect: wraps the native HTML element select
+ *
+ * <lion-select>
+ *   <label slot="label">My Input</label>
+ *   <select slot="input">
+ *    <option value="top">top</option>
+ *    <option value="bottom">bottom</option>
+ *   </select>
+ * </lion-select>
+ *
+ * You can preselect an option by setting the property modelValue.
+ *   Example:
+ *     <lion-select .modelValue="${'<value of option 2>'}">
+ *
+ * It extends LionField so it inherits required and disabled.
+ *
+ * The option element needs to be a direct child of the select element.
+ *
+ * You cannot use interactive elements inside the options. Avoid very long names to
+ * facilitate the understandability and perceivability for screen reader users. Sets of options
+ * where each option name starts with the same word or phrase can also significantly degrade
+ * usability for keyboard and screen reader users.
+ *
+ * @customElement lion-select
+ */
+export class LionSelect extends LionFieldWithSelect {
+  connectedCallback() {
+    super.connectedCallback();
+    this._inputNode.addEventListener('change', this._proxyChangeEvent);
+  }
+
+  /** @param {import('lit').PropertyValues } changedProperties */
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has('disabled')) {
+      this._inputNode.disabled = this.disabled;
+      this.validate();
+    }
+
+    if (changedProperties.has('name')) {
+      this._inputNode.name = this.name;
+    }
+
+    if (changedProperties.has('autocomplete')) {
+      this._inputNode.autocomplete = /** @type {string} */ (this.autocomplete);
+    }
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this._inputNode.removeEventListener('change', this._proxyChangeEvent);
+  }
+
+  /**
+   * @override FormatMixin - set formattedValue to selected option text
+   * @param {*} v - modelValue: can be an Object, Number, String depending on the
+   * input type(date, number, email etc)
+   * @returns {string} formattedValue
+   */
+  formatter(v) {
+    // The selectedIndex is not yet updated
+    const found = Array.from(this._inputNode.options).find(option => option.value === v);
+    return found ? found.text : '';
+  }
+
+  /**
+   * @override FormatMixin - set value equal to modelValue instead of formattedValue
+   */
+  _reflectBackFormattedValueToUser() {
+    if (this._reflectBackOn()) {
+      // Text 'undefined' should not end up in <input>
+      this.value = typeof this.modelValue !== 'undefined' ? this.modelValue : '';
+    }
+  }
+
+  /** @protected */
+  _proxyChangeEvent() {
+    this.dispatchEvent(
+      new CustomEvent('user-input-changed', {
+        bubbles: true,
+        composed: true,
+      }),
+    );
+  }
+}