@lion/ui 0.7.8 → 0.8.0

package/components/accordion/src/LionAccordion.js

@@ -25,15 +25,15 @@ export class LionAccordion extends LitElement {
       /**
        * index number of the focused accordion
        */
-      focusedIndex: {
-        type: Number,
-      },
+      focusedIndex: { type: Number },
       /**
        * array of indices of the expanded accordions
        */
-      expanded: {
-        type: Array,
-      },
+      expanded: { type: Array },
+      /**
+       * exclusive property allows only one accordion slot to be open at a time
+       */
+      exclusive: { type: Boolean },
     };
   }
 
@@ -101,6 +101,11 @@ export class LionAccordion extends LitElement {
     super();
     this.styles = {};
 
+    /**
+     * @type {boolean}
+     */
+    this.exclusive = false;
+
     /**
      * @type {StoreEntry[]}
      * @private
@@ -437,20 +442,21 @@ export class LionAccordion extends LitElement {
   }
 
   /**
-   * @param {number} value
+   * @param {number} indexClicked
    * @private
    */
-  __toggleExpanded(value) {
-    const expanded = [...this.expanded];
-    const index = expanded.indexOf(value);
+  __toggleExpanded(indexClicked) {
+    const indexFound = this.expanded.indexOf(indexClicked);
+    const expandedNewValues = this.exclusive ? [] : [...this.expanded];
 
-    if (index === -1) {
-      expanded.push(value);
+    if (indexFound === -1) {
+      expandedNewValues.push(indexClicked);
     } else {
-      expanded.splice(index, 1);
+      expandedNewValues.splice(indexFound, 1);
     }
 
-    this.expanded = expanded;
+    // trigger a render
+    this.expanded = expandedNewValues;
   }
 
   /**

package/components/accordion/test/lion-accordion.test.js

@@ -1,5 +1,6 @@
 import { expect, fixture } from '@open-wc/testing';
 import { html } from 'lit/static-html.js';
+import { sendKeys } from '@web/test-runner-commands';
 import sinon from 'sinon';
 
 import '@lion/ui/define/lion-accordion.js';
@@ -33,14 +34,14 @@ function getAccordionChildren(el) {
 }
 
 /**
- * @param {Element} el
+ * @param {LionAccordion} el
  */
 function getInvokers(el) {
   return getAccordionChildren(el).filter(child => child.classList.contains('invoker'));
 }
 
 /**
- * @param {Element} el
+ * @param {LionAccordion} el
  */
 function getContents(el) {
   return getAccordionChildren(el).filter(child => child.classList.contains('content'));
@@ -112,6 +113,51 @@ describe('<lion-accordion>', () => {
       expect(invokers[1].firstElementChild).to.have.attribute('expanded');
     });
 
+    it('supports [exclusive] attribute, allowing one collapsible to be open at a time', async () => {
+      const el = /** @type {LionAccordion} */ (
+        await fixture(html`
+          <lion-accordion exclusive>
+            <h2 slot="invoker"><button>invoker 1</button></h2>
+            <div slot="content">content 1</div>
+            <h2 slot="invoker"><button>invoker 2</button></h2>
+            <div slot="content">content 2</div>
+            <h2 slot="invoker"><button>invoker 3</button></h2>
+            <div slot="content">content 3</div>
+          </lion-accordion>
+        `)
+      );
+
+      const invokerButtons = Array.from(getInvokers(el)).map(
+        invokerHeadingEl => /** @type {HTMLButtonElement} */ (invokerHeadingEl.firstElementChild),
+      );
+
+      // We open the first... (nothing different from not [exclusive] so far)
+      invokerButtons[0].click();
+      expect(invokerButtons[0]).to.have.attribute('expanded');
+      expect(invokerButtons[1]).to.not.have.attribute('expanded');
+      expect(invokerButtons[2]).to.not.have.attribute('expanded');
+
+      // We click the second...
+      invokerButtons[1].click();
+      expect(invokerButtons[0]).to.not.have.attribute('expanded');
+      expect(invokerButtons[1]).to.have.attribute('expanded');
+      expect(invokerButtons[2]).to.not.have.attribute('expanded');
+
+      // We click the third...
+      invokerButtons[2].click();
+      expect(invokerButtons[0]).to.not.have.attribute('expanded');
+      expect(invokerButtons[1]).to.not.have.attribute('expanded');
+      expect(invokerButtons[2]).to.have.attribute('expanded');
+
+      el.exclusive = false;
+
+      // We open the first... (behaving as default (not [exclusive]) again)
+      invokerButtons[0].click();
+      expect(invokerButtons[0]).to.have.attribute('expanded');
+      expect(invokerButtons[1]).to.not.have.attribute('expanded');
+      expect(invokerButtons[2]).to.have.attribute('expanded');
+    });
+
     it('sends event "expanded-changed" for every expanded state change', async () => {
       const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
       const spy = sinon.spy();
@@ -264,11 +310,14 @@ describe('<lion-accordion>', () => {
    * > content content to be preloaded.
    */
   describe('User interaction', () => {
-    it('opens a invoker on click', async () => {
+    it('opens/closes an invoker on click', async () => {
       const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
       const invokers = getInvokers(el);
       invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
       expect(el.expanded).to.deep.equal([1]);
+
+      invokers[1].firstElementChild?.dispatchEvent(new Event('click'));
+      expect(el.expanded).to.deep.equal([]);
     });
 
     it('selects a invoker on click', async () => {
@@ -278,12 +327,13 @@ describe('<lion-accordion>', () => {
       expect(el.focusedIndex).to.equal(1);
     });
 
-    it.skip('opens/close invoker on [enter] and [space]', async () => {
+    it('opens/closes invoker on [enter] and [space]', async () => {
       const el = /** @type {LionAccordion} */ (await fixture(basicAccordion));
       const invokers = getInvokers(el);
-      invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: 'Enter' }));
+      invokers[0].getElementsByTagName('button')[0].focus();
+      await sendKeys({ press: 'Enter' });
       expect(el.expanded).to.deep.equal([0]);
-      invokers[0].firstElementChild?.dispatchEvent(new KeyboardEvent('keyup', { key: ' ' }));
+      await sendKeys({ press: 'Space' });
       expect(el.expanded).to.deep.equal([]);
     });
 
@@ -467,14 +517,16 @@ describe('<lion-accordion>', () => {
 
     describe('Invokers', () => {
       it('links ids of content items to invoker first child via [aria-controls]', async () => {
-        const el = await fixture(html`
-          <lion-accordion>
-            <h2 id="h1" slot="invoker"><button>invoker 1</button></h2>
-            <div id="p1" slot="content">content 1</div>
-            <h2 id="h2" slot="invoker"><button>invoker 2</button></h2>
-            <div id="p2" slot="content">content 2</div>
-          </lion-accordion>
-        `);
+        const el = /** @type {LionAccordion} */ (
+          await fixture(html`
+            <lion-accordion>
+              <h2 id="h1" slot="invoker"><button>invoker 1</button></h2>
+              <div id="p1" slot="content">content 1</div>
+              <h2 id="h2" slot="invoker"><button>invoker 2</button></h2>
+              <div id="p2" slot="content">content 2</div>
+            </lion-accordion>
+          `)
+        );
         const invokers = getInvokers(el);
         const contents = getContents(el);
         expect(invokers[0].firstElementChild?.getAttribute('aria-controls')).to.equal(
@@ -486,12 +538,14 @@ describe('<lion-accordion>', () => {
       });
 
       it('adds aria-expanded="false" to invoker when its content is not expanded', async () => {
-        const el = await fixture(html`
-          <lion-accordion>
-            <h2 slot="invoker"><button>invoker</button></h2>
-            <div slot="content">content</div>
-          </lion-accordion>
-        `);
+        const el = /** @type {LionAccordion} */ (
+          await fixture(html`
+            <lion-accordion>
+              <h2 slot="invoker"><button>invoker</button></h2>
+              <div slot="content">content</div>
+            </lion-accordion>
+          `)
+        );
         expect(Array.from(getInvokers(el))[0]?.firstElementChild).to.have.attribute(
           'aria-expanded',
           'false',
@@ -517,14 +571,16 @@ describe('<lion-accordion>', () => {
 
     describe('Contents', () => {
       it('adds aria-labelledby referring to invoker ids', async () => {
-        const el = await fixture(html`
-          <lion-accordion>
-            <h2 slot="invoker"><button>invoker 1</button></h2>
-            <div slot="content">content 1</div>
-            <h2 slot="invoker"><button>invoker 2</button></h2>
-            <div slot="content">content 2</div>
-          </lion-accordion>
-        `);
+        const el = /** @type {LionAccordion} */ (
+          await fixture(html`
+            <lion-accordion>
+              <h2 slot="invoker"><button>invoker 1</button></h2>
+              <div slot="content">content 1</div>
+              <h2 slot="invoker"><button>invoker 2</button></h2>
+              <div slot="content">content 2</div>
+            </lion-accordion>
+          `)
+        );
         const contents = getContents(el);
         const invokers = getInvokers(el);
         expect(contents[0]).to.have.attribute('aria-labelledby', invokers[0].firstElementChild?.id);

package/components/calendar/src/LionCalendar.js

@@ -300,7 +300,9 @@ export class LionCalendar extends LocalizeMixin(LitElement) {
     }
   }
 
-  firstUpdated() {
+  /** @param {import('lit').PropertyValues } changedProperties */
+  firstUpdated(changedProperties) {
+    super.firstUpdated(changedProperties);
     this.__calculateInitialCentralDate();
 
     // setup data for initial render