feat(cc-popover): add disabled property

Fixes #1207

Author: pdesoyres-cc

src/components/cc-popover/cc-popover.js

@@ -61,6 +61,7 @@ export class CcPopover extends LitElement {
   static get properties() {
     return {
       a11yName: { type: String, attribute: 'a11y-name' },
+      disabled: { type: Boolean, reflect: true },
       hideText: { type: Boolean, attribute: 'hide-text' },
       icon: { type: Object },
       isOpen: { type: Boolean, attribute: 'is-open', reflect: true },
@@ -74,6 +75,9 @@ export class CcPopover extends LitElement {
     /** @type {string|null} Sets the a11yName property of the underlying `cc-button` element. CAUTION: The accessible name should always start with the visible text if there is one. */
     this.a11yName = null;
 
+    /** @type {boolean} Sets `disabled` attribute on the underlying `cc-button` element. */
+    this.disabled = false;
+
     /** @type {boolean} Whether the button text should be hidden. */
     this.hideText = false;
 
@@ -210,13 +214,14 @@ export class CcPopover extends LitElement {
           .a11yExpanded=${this.isOpen}
           .a11yName=${this.a11yName}
           ?hide-text=${this.hideText}
+          ?disabled=${this.disabled}
           .icon=${this.icon}
           @cc-button:click=${this.toggle}
         >
           <slot name="button-content"></slot>
         </cc-button>
 
-        ${this.isOpen
+        ${this.isOpen && !this.disabled
           ? html`
               <div class="content ${this.position.replace('-', ' ')}" ${ref(this._contentRef)}>
                 <slot></slot>

src/components/cc-popover/cc-popover.stories.js

@@ -63,6 +63,13 @@ export const defaultStory = makeStory(conf, {
   items,
 });
 
+export const disabled = makeStory(conf, {
+  items: items.map((item) => ({
+    ...item,
+    disabled: true,
+  })),
+});
+
 export const withButtonText = makeStory(conf, {
   items: items.map((item) => ({
     ...item,