@mgdis/mg-components 5.16.0 → 5.18.0

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js

@@ -1,8 +1,8 @@
-import { h, Host } from '@stencil/core';
-import { initLocales } from '../../../locales';
-import { Status } from '../menu/mg-menu-item/mg-menu-item.conf';
-import { Direction } from '../menu/mg-menu/mg-menu.conf';
-import { createID } from '../../../utils/components.utils';
+import { h, Host } from "@stencil/core";
+import { initLocales } from "../../../locales";
+import { Status } from "../menu/mg-menu-item/mg-menu-item.conf";
+import { Direction } from "../menu/mg-menu/mg-menu.conf";
+import { createID } from "../../../utils/components.utils";
 /**
  * MgActionMore['items'] type guard
  * @param prop - commponent items prop
@@ -68,7 +68,7 @@ export class MgActionMore {
       this.expanded = false;
       customHandler(event);
     };
-    this.icon = { icon: 'ellipsis' };
+    this.icon = undefined;
     this.button = { variant: 'flat', isIcon: true };
     this.items = undefined;
     this.displayChevron = undefined;
@@ -78,6 +78,9 @@ export class MgActionMore {
     if (newValue && !isMgActionMoreIcon(newValue)) {
       throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);
     }
+    else if (!Boolean(newValue === null || newValue === void 0 ? void 0 : newValue.icon) && Boolean(this.button.isIcon)) {
+      this.icon = { icon: 'ellipsis' };
+    }
   }
   validateButton(newValue) {
     if (newValue && !isMgActionMoreButton(newValue)) {
@@ -121,7 +124,7 @@ export class MgActionMore {
           'mg-a11y-animation': true,
         } }, h("mg-icon", { icon: "chevron-down", size: "small" })));
     }
-    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
+    return (h(Host, { "data-mg-popover-guard": this.mgPopoverIdentifier }, h("span", { class: "mg-action-more" }, h("mg-popover", { identifier: this.mgPopoverIdentifier, display: this.expanded, "onDisplay-change": this.handleDisplayChange }, h("mg-button", { variant: this.button.variant, isIcon: this.button.isIcon, type: "button", label: buttonLabel, onClick: this.handleButton }, this.icon && h("mg-icon", Object.assign({}, this.icon)), !this.button.isIcon && buttonContent), h("div", { slot: "content" }, h("mg-menu", { direction: Direction.VERTICAL, label: this.messages.label }, this.items.map(item => {
       var _a;
       return (
       // eslint-disable-next-line react/jsx-no-bind
@@ -144,14 +147,15 @@ export class MgActionMore {
     return {
       "icon": {
         "type": "unknown",
-        "mutable": false,
+        "mutable": true,
         "complexType": {
           "original": "MgActionMoreIconType",
           "resolved": "{ icon: string; }",
           "references": {
             "MgActionMoreIconType": {
               "location": "import",
-              "path": "./mg-action-more.conf"
+              "path": "./mg-action-more.conf",
+              "id": "src/components/molecules/mg-action-more/mg-action-more.conf.ts::MgActionMoreIconType"
             }
           }
         },
@@ -160,8 +164,7 @@ export class MgActionMore {
         "docs": {
           "tags": [],
           "text": "Define displaied icon"
-        },
-        "defaultValue": "{ icon: 'ellipsis' }"
+        }
       },
       "button": {
         "type": "unknown",
@@ -172,7 +175,8 @@ export class MgActionMore {
           "references": {
             "MgActionMoreButtonType": {
               "location": "import",
-              "path": "./mg-action-more.conf"
+              "path": "./mg-action-more.conf",
+              "id": "src/components/molecules/mg-action-more/mg-action-more.conf.ts::MgActionMoreButtonType"
             }
           }
         },
@@ -193,7 +197,8 @@ export class MgActionMore {
           "references": {
             "MgActionMoreItemType": {
               "location": "import",
-              "path": "./mg-action-more.conf"
+              "path": "./mg-action-more.conf",
+              "id": "src/components/molecules/mg-action-more/mg-action-more.conf.ts::MgActionMoreItemType"
             }
           }
         },
@@ -245,3 +250,4 @@ export class MgActionMore {
       }];
   }
 }
+//# sourceMappingURL=mg-action-more.js.map

package/dist/collection/components/molecules/mg-action-more/mg-action-more.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-action-more.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-action-more/mg-action-more.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, h, Element, Prop, Watch, State, Host } from '@stencil/core';\nimport { MgActionMoreItemType, MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreMessageType } from './mg-action-more.conf';\nimport { initLocales } from '../../../locales';\nimport { Status } from '../menu/mg-menu-item/mg-menu-item.conf';\nimport { Direction } from '../menu/mg-menu/mg-menu.conf';\nimport { createID } from '../../../utils/components.utils';\n\n/**\n * MgActionMore['items'] type guard\n * @param prop - commponent items prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreItems = (prop: unknown): prop is MgActionMoreItemType[] => {\n  const items = prop as MgActionMoreItemType[];\n  return typeof items === 'object' && items.every(item => typeof item === 'object' && typeof item.label === 'string' && typeof item.mouseEventHandler === 'function');\n};\n\n/**\n * MgActionMore['button'] type guard\n * @param prop - commponent button prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreButton = (prop: unknown): prop is MgActionMoreButtonType => {\n  const button = prop as MgActionMoreButtonType;\n  return typeof button === 'object' && typeof button.variant === 'string' && typeof button.isIcon === 'boolean';\n};\n\n/**\n * MgActionMore['icon'] type guard\n * @param prop - commponent icon prop\n * @returns return true if type is valid\n */\nconst isMgActionMoreIcon = (prop: unknown): prop is MgActionMoreIconType => {\n  const icon = prop as MgActionMoreIconType;\n  return typeof icon === 'object' && typeof icon.icon === 'string';\n};\n\n@Component({\n  tag: 'mg-action-more',\n  styleUrl: 'mg-action-more.scss',\n  shadow: true,\n})\nexport class MgActionMore {\n  /************\n   * Internal *\n   ************/\n  private readonly name = 'mg-action-more';\n  private readonly mgPopoverIdentifier = createID(this.name);\n  private messages: MgActionMoreMessageType;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgActionMoreElement;\n\n  /**\n   * Define displaied icon\n   */\n  @Prop({ mutable: true }) icon: MgActionMoreIconType;\n  @Watch('icon')\n  validateIcon(newValue: MgActionMore['icon']): void {\n    if (newValue && !isMgActionMoreIcon(newValue)) {\n      throw new Error(`<${this.name}> prop icon must match MgActionMoreIconType.`);\n    } else if (!Boolean(newValue?.icon) && Boolean(this.button.isIcon)) {\n      this.icon = { icon: 'ellipsis' };\n    }\n  }\n\n  /**\n   * Define button properties\n   */\n  @Prop() button: MgActionMoreButtonType = { variant: 'flat', isIcon: true };\n  @Watch('button')\n  validateButton(newValue: MgActionMore['button']): void {\n    if (newValue && !isMgActionMoreButton(newValue)) {\n      throw new Error(`<${this.name}> prop button must match MgActionMoreButtonType.`);\n    }\n  }\n\n  /**\n   * Define the menu-items elements\n   */\n  @Prop() items!: MgActionMoreItemType[];\n  @Watch('items')\n  validateItems(newValue: MgActionMore['items']): void {\n    if (!isMgActionMoreItems(newValue)) {\n      throw new Error(`<${this.name}> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`);\n    }\n  }\n\n  /**\n   * Define if chevron is display\n   */\n  @Prop() displayChevron: boolean;\n  @Watch('displayChevron')\n  validateDisplayChevron(newValue: MgActionMore['displayChevron']): void {\n    if (newValue && this.button.isIcon === true) {\n      throw new Error(`<${this.name}> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`);\n    }\n  }\n  /**\n   * Menu expanded state\n   */\n  @State() expanded = false;\n\n  /************\n   * Methods *\n   ***********/\n\n  /**\n   * Toogle expanded props\n   */\n  private toggleExpanded = (): void => {\n    this.expanded = !this.expanded;\n  };\n\n  /**\n   * Handle popover display change value\n   * @param event - display change updated value\n   */\n  private handleDisplayChange = (event: CustomEvent): void => {\n    this.expanded = event.detail;\n  };\n\n  /**\n   * Button click handler\n   */\n  private handleButton = (): void => {\n    this.toggleExpanded();\n  };\n\n  /**\n   * Item click handler\n   * @param event - click event\n   * @param customHandler - item['mouseEventHandler']\n   */\n  private handleItemClick = (event: MouseEvent, customHandler: MgActionMoreItemType['mouseEventHandler']) => {\n    this.expanded = false;\n    customHandler(event);\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Validate props\n   */\n  componentWillLoad(): void {\n    this.messages = initLocales(this.element).messages.actionMore as MgActionMoreMessageType;\n    this.validateItems(this.items);\n    this.validateButton(this.button);\n    this.validateIcon(this.icon);\n    this.validateDisplayChevron(this.displayChevron);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    const buttonLabel = this.button.label || this.messages.label;\n    const buttonContent = [buttonLabel];\n\n    if (!this.button.isIcon && this.displayChevron) {\n      buttonContent.push(\n        <span\n          class={{\n            [`${this.name}__chevron`]: true,\n            [`${this.name}__chevron--rotate`]: this.expanded === true,\n            'mg-a11y-animation': true,\n          }}\n        >\n          <mg-icon icon=\"chevron-down\" size=\"small\"></mg-icon>\n        </span>,\n      );\n    }\n\n    return (\n      <Host data-mg-popover-guard={this.mgPopoverIdentifier}>\n        <span class=\"mg-action-more\">\n          <mg-popover identifier={this.mgPopoverIdentifier} display={this.expanded} onDisplay-change={this.handleDisplayChange}>\n            <mg-button variant={this.button.variant} isIcon={this.button.isIcon} type=\"button\" label={buttonLabel} onClick={this.handleButton}>\n              {this.icon && <mg-icon {...this.icon}></mg-icon>}\n              {!this.button.isIcon && buttonContent}\n            </mg-button>\n            <div slot=\"content\">\n              <mg-menu direction={Direction.VERTICAL} label={this.messages.label}>\n                {this.items.map(item => (\n                  // eslint-disable-next-line react/jsx-no-bind\n                  <mg-menu-item key={item.label} status={item.status || Status.VISIBLE} onClick={e => this.handleItemClick(e, item.mouseEventHandler)} href={item.href}>\n                    {item.icon && <mg-icon icon={item.icon} slot=\"image\"></mg-icon>}\n                    <span slot=\"label\">{item.label}</span>\n                    {item.badge?.label && <mg-badge label={item.badge.label} value={item.badge.value} slot=\"information\" variant=\"text-color\"></mg-badge>}\n                  </mg-menu-item>\n                ))}\n              </mg-menu>\n            </div>\n          </mg-popover>\n        </span>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.e2e.playwright.js

@@ -0,0 +1,128 @@
+import { setPageContent, expect, describe, testEach, test } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes, renderProperties } from "../../../../utils/e2e.test.utils";
+import { createID } from "../../../../utils/components.utils";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+const createHTML = (args, id = `mg-action-more-${createID()}`) => `<style>body {padding-left: 2rem;} </style><mg-action-more ${renderAttributes(args)} id="${id}"></mg-action-more><script>${renderProperties(args, `#${id}`)}</script>`;
+const mouseEventHandler = () => 'hello batman';
+const items = [
+  {
+    label: 'batman',
+    mouseEventHandler,
+  },
+  {
+    label: 'robin',
+    mouseEventHandler,
+    status: Status.HIDDEN,
+  },
+  {
+    label: 'joker',
+    mouseEventHandler,
+    badge: {
+      value: 2,
+      label: 'badge',
+    },
+  },
+  {
+    label: 'bane',
+    mouseEventHandler,
+    icon: 'user',
+    href: '#',
+  },
+];
+describe('mg-action-more', () => {
+  describe('render', () => {
+    testEach([
+      {
+        items,
+      },
+      {
+        items,
+        button: {
+          label: 'dc-comics',
+          variant: 'primary',
+          isIcon: false,
+        },
+        icon: {
+          icon: 'plus',
+        },
+      },
+      {
+        items,
+        displayChevron: true,
+        icon: {
+          icon: 'ellipsis',
+        },
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+      {
+        items,
+        displayChevron: true,
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+      {
+        items,
+        displayChevron: false,
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+      {
+        items,
+        displayChevron: false,
+        icon: {
+          icon: 'ellipsis',
+        },
+        button: {
+          variant: 'flat',
+          isIcon: false,
+        },
+      },
+    ])('Should render %s', async (page, args) => {
+      await setPageContent(page, createHTML(args));
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    });
+  });
+  describe('navigation', () => {
+    testEach(['mouse', 'keyboard'])('should toggle button menu, case %s', async (page, navigation) => {
+      await setPageContent(page, createHTML({ items }), { width: 130, height: 200 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      if (navigation === 'mouse') {
+        const mgButton = await page.locator('mg-action-more mg-button');
+        await mgButton.click();
+        await expect(page.locator('body')).toHaveScreenshot();
+        const mgMenuItem = await page.locator('mg-menu-item:first-of-type');
+        await mgMenuItem.click();
+        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      }
+      else {
+        for (const [index, key] of ['Tab', 'Enter', 'Tab', 'Enter'].entries()) {
+          await page.keyboard.press(key);
+          await expect(page.locator([0, 3].includes(index) ? '.e2e-screenshot' : 'body')).toHaveScreenshot();
+        }
+      }
+    });
+    test('should toggle button chevron menu', async ({ page }) => {
+      await setPageContent(page, createHTML({
+        items,
+        displayChevron: true,
+        button: {
+          isIcon: false,
+          variant: 'secondary',
+        },
+      }), { width: 130, height: 200 });
+      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+      const mgButton = await page.locator('mg-action-more mg-button');
+      await mgButton.click();
+      await page.waitForTimeout(300); // wait chevron animation ended
+      await expect(page.locator('body')).toHaveScreenshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-action-more.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-action-more.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-action-more/test/mg-action-more.e2e.playwright.ts"],"names":[],"mappings":"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","sourcesContent":["import { setPageContent, expect, describe, testEach, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes, renderProperties } from '../../../../utils/e2e.test.utils';\nimport { createID } from '../../../../utils/components.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgActionMore } from '../mg-action-more';\n\nconst createHTML = (args: MgActionMoreType, id = `mg-action-more-${createID()}`) =>\n  `<style>body {padding-left: 2rem;} </style><mg-action-more ${renderAttributes(args)} id=\"${id}\"></mg-action-more><script>${renderProperties(args, `#${id}`)}</script>`;\n\nconst mouseEventHandler = () => 'hello batman';\n\nexport type MgActionMoreType = Partial<MgActionMore>;\n\nconst items: MgActionMoreType['items'] = [\n  {\n    label: 'batman',\n    mouseEventHandler,\n  },\n  {\n    label: 'robin',\n    mouseEventHandler,\n    status: Status.HIDDEN,\n  },\n  {\n    label: 'joker',\n    mouseEventHandler,\n    badge: {\n      value: 2,\n      label: 'badge',\n    },\n  },\n  {\n    label: 'bane',\n    mouseEventHandler,\n    icon: 'user',\n    href: '#',\n  },\n];\n\ndescribe('mg-action-more', () => {\n  describe('render', () => {\n    testEach([\n      {\n        items,\n      },\n      {\n        items,\n        button: {\n          label: 'dc-comics',\n          variant: 'primary',\n          isIcon: false,\n        },\n        icon: {\n          icon: 'plus',\n        },\n      },\n      {\n        items,\n        displayChevron: true,\n        icon: {\n          icon: 'ellipsis',\n        },\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n      {\n        items,\n        displayChevron: true,\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n      {\n        items,\n        displayChevron: false,\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n      {\n        items,\n        displayChevron: false,\n        icon: {\n          icon: 'ellipsis',\n        },\n        button: {\n          variant: 'flat',\n          isIcon: false,\n        },\n      },\n    ])('Should render %s', async (page: PageType, args: MgActionMoreType) => {\n      await setPageContent(page, createHTML(args));\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n    });\n  });\n\n  describe('navigation', () => {\n    testEach(['mouse', 'keyboard'])('should toggle button menu, case %s', async (page: PageType, navigation) => {\n      await setPageContent(page, createHTML({ items }), { width: 130, height: 200 });\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      if (navigation === 'mouse') {\n        const mgButton = await page.locator('mg-action-more mg-button');\n        await mgButton.click();\n        await expect(page.locator('body')).toHaveScreenshot();\n\n        const mgMenuItem = await page.locator('mg-menu-item:first-of-type');\n        await mgMenuItem.click();\n        await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n      } else {\n        for (const [index, key] of ['Tab', 'Enter', 'Tab', 'Enter'].entries()) {\n          await page.keyboard.press(key);\n          await expect(page.locator([0, 3].includes(index) ? '.e2e-screenshot' : 'body')).toHaveScreenshot();\n        }\n      }\n    });\n\n    test('should toggle button chevron menu', async ({ page }) => {\n      await setPageContent(\n        page,\n        createHTML({\n          items,\n          displayChevron: true,\n          button: {\n            isIcon: false,\n            variant: 'secondary',\n          },\n        }),\n        { width: 130, height: 200 },\n      );\n\n      await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n      const mgButton = await page.locator('mg-action-more mg-button');\n      await mgButton.click();\n\n      await page.waitForTimeout(300); // wait chevron animation ended\n\n      await expect(page.locator('body')).toHaveScreenshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.spec.js

@@ -0,0 +1,187 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { forcePopoverId, mockConsoleError, setupResizeObserverMock } from "../../../../utils/unit.test.utils";
+import { Status } from "../../menu/mg-menu-item/mg-menu-item.conf";
+import { MgButton } from "../../../atoms/mg-button/mg-button";
+import { MgPopover } from "../../mg-popover/mg-popover";
+import { MgActionMore } from "../mg-action-more";
+import { MgMenu } from "../../menu/mg-menu/mg-menu";
+import { MgMenuItem } from "../../menu/mg-menu-item/mg-menu-item";
+import { MgPopoverContent } from "../../mg-popover/mg-popover-content/mg-popover-content";
+mockConsoleError();
+const getPage = async (args) => {
+  const page = await newSpecPage({
+    components: [MgActionMore, MgPopover, MgPopoverContent, MgButton, MgMenu, MgMenuItem],
+    template: () => h("mg-action-more", Object.assign({}, args)),
+  });
+  Array.from(page.doc.querySelectorAll('mg-action-more')).forEach((item, index) => {
+    const mgPopoverIdentifier = `mg-popover-test_${index}`;
+    item.dataset.mgPopoverGuard = mgPopoverIdentifier;
+    forcePopoverId(item, mgPopoverIdentifier, 'mg-button');
+  });
+  return page;
+};
+const mouseEventHandler = jest.fn();
+const items = [
+  {
+    label: 'batman',
+    mouseEventHandler,
+  },
+  {
+    label: 'robin',
+    mouseEventHandler,
+    status: Status.HIDDEN,
+  },
+  {
+    label: 'joker',
+    mouseEventHandler,
+    badge: {
+      value: 2,
+      label: 'badge',
+    },
+  },
+  {
+    label: 'bane',
+    mouseEventHandler,
+    icon: 'user',
+    href: '#',
+  },
+];
+Object.defineProperty(window, 'frames', {
+  value: { length: 0 },
+});
+describe('mg-action-more', () => {
+  beforeEach(() => {
+    setupResizeObserverMock({
+      observe: () => null,
+      disconnect: () => null,
+    });
+  });
+  describe.each([
+    {
+      items,
+    },
+    {
+      items,
+      button: {
+        label: 'dc-comics',
+        variant: 'primary',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: true,
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: true,
+      icon: {
+        icon: 'ellipsis',
+      },
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: false,
+      icon: {
+        icon: 'ellipsis',
+      },
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+    {
+      items,
+      displayChevron: false,
+      button: {
+        variant: 'flat',
+        isIcon: false,
+      },
+    },
+  ])('render', args => {
+    test(`Should render with args ${args}`, async () => {
+      const { root } = await getPage(args);
+      expect(root).toMatchSnapshot();
+    });
+    test('Should toggle menu on click', async () => {
+      const page = await getPage(args);
+      expect(page.root).toMatchSnapshot();
+      const mgMoreAction = page.doc.querySelector('mg-action-more');
+      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
+      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe('errors', () => {
+    test.each([
+      { args: {}, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      { args: { items: ['batman'] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      { args: { items: [{ label: 'batman' }] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      {
+        args: { items: [{ label: 'batman', mouseEventHandler: 'batman' }] },
+        error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.`,
+      },
+      { args: { items: [{ mouseEventHandler: 'batman' }] }, error: `<mg-action-more> prop "items" is required and all values must be the same type, MgActionMoreItemType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], button: {} }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { variant: 'primary' } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },
+      { args: { items: [{ label: 'batman', mouseEventHandler }], icon: 'user' }, error: `<mg-action-more> prop icon must match MgActionMoreIconType.` },
+      {
+        args: { items: [{ label: 'batman', mouseEventHandler }], displayChevron: true },
+        error: `<mg-action-more> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`,
+      },
+      {
+        args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true, variant: 'flat' }, displayChevron: true },
+        error: `<mg-action-more> prop "displayChevron" can't be used with a 'button" prop "isIcon" attribute.`,
+      },
+    ])('with args %s', async ({ args, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(args);
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+  describe('navigation', () => {
+    test(`Should run item mouseEventHandler by clicking on menu-item`, async () => {
+      const page = await getPage({ items });
+      expect(page.root).toMatchSnapshot();
+      const mgMoreAction = page.doc.querySelector('mg-action-more');
+      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
+      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgMenuItem = mgMoreAction.shadowRoot.querySelector('mg-menu-item');
+      mgMenuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(mouseEventHandler).toHaveBeenCalled();
+      expect(page.root).toMatchSnapshot();
+    });
+    test(`Should update expanded when popover display change`, async () => {
+      const page = await getPage({ items, displayChevron: true, button: { variant: 'flat', isIcon: false } });
+      expect(page.root).toMatchSnapshot();
+      const mgMoreAction = page.doc.querySelector('mg-action-more');
+      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');
+      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+      const mgPopover = mgMoreAction.shadowRoot.querySelector('mg-popover');
+      mgPopover.dispatchEvent(new CustomEvent('display-change', { detail: false }));
+      await page.waitForChanges();
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+});
+//# sourceMappingURL=mg-action-more.spec.js.map

package/dist/collection/components/molecules/mg-action-more/test/mg-action-more.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-action-more.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-action-more/test/mg-action-more.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { forcePopoverId, mockConsoleError, setupResizeObserverMock } from '../../../../utils/unit.test.utils';\nimport { Status } from '../../menu/mg-menu-item/mg-menu-item.conf';\nimport { MgButton } from '../../../atoms/mg-button/mg-button';\nimport { MgPopover } from '../../mg-popover/mg-popover';\nimport { MgActionMore } from '../mg-action-more';\nimport { MgMenu } from '../../menu/mg-menu/mg-menu';\nimport { MgMenuItem } from '../../menu/mg-menu-item/mg-menu-item';\nimport { MgPopoverContent } from '../../mg-popover/mg-popover-content/mg-popover-content';\n\nmockConsoleError();\n\nconst getPage = async args => {\n  const page = await newSpecPage({\n    components: [MgActionMore, MgPopover, MgPopoverContent, MgButton, MgMenu, MgMenuItem],\n    template: () => <mg-action-more {...args}></mg-action-more>,\n  });\n\n  Array.from(page.doc.querySelectorAll('mg-action-more')).forEach((item, index) => {\n    const mgPopoverIdentifier = `mg-popover-test_${index}`;\n    item.dataset.mgPopoverGuard = mgPopoverIdentifier;\n    forcePopoverId(item, mgPopoverIdentifier, 'mg-button');\n  });\n\n  return page;\n};\n\nconst mouseEventHandler = jest.fn();\n\nconst items = [\n  {\n    label: 'batman',\n    mouseEventHandler,\n  },\n  {\n    label: 'robin',\n    mouseEventHandler,\n    status: Status.HIDDEN,\n  },\n  {\n    label: 'joker',\n    mouseEventHandler,\n    badge: {\n      value: 2,\n      label: 'badge',\n    },\n  },\n  {\n    label: 'bane',\n    mouseEventHandler,\n    icon: 'user',\n    href: '#',\n  },\n];\n\nObject.defineProperty(window, 'frames', {\n  value: { length: 0 },\n});\n\ndescribe('mg-action-more', () => {\n  beforeEach(() => {\n    setupResizeObserverMock({\n      observe: () => null,\n      disconnect: () => null,\n    });\n  });\n  describe.each([\n    {\n      items,\n    },\n    {\n      items,\n      button: {\n        label: 'dc-comics',\n        variant: 'primary',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: true,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: true,\n      icon: {\n        icon: 'ellipsis',\n      },\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: false,\n      icon: {\n        icon: 'ellipsis',\n      },\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n    {\n      items,\n      displayChevron: false,\n      button: {\n        variant: 'flat',\n        isIcon: false,\n      },\n    },\n  ])('render', args => {\n    test(`Should render with args ${args}`, async () => {\n      const { root } = await getPage(args);\n      expect(root).toMatchSnapshot();\n    });\n\n    test('Should toggle menu on click', async () => {\n      const page = await getPage(args);\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n\n  describe('errors', () => {\n    test.each([\n      { args: {}, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: ['batman'] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: [{ label: 'batman' }] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler: 'batman' }] },\n        error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.`,\n      },\n      { args: { items: [{ mouseEventHandler: 'batman' }] }, error: `<mg-action-more> prop \"items\" is required and all values must be the same type, MgActionMoreItemType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: {} }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { variant: 'primary' } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true } }, error: `<mg-action-more> prop button must match MgActionMoreButtonType.` },\n      { args: { items: [{ label: 'batman', mouseEventHandler }], icon: 'user' }, error: `<mg-action-more> prop icon must match MgActionMoreIconType.` },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler }], displayChevron: true },\n        error: `<mg-action-more> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`,\n      },\n      {\n        args: { items: [{ label: 'batman', mouseEventHandler }], button: { isIcon: true, variant: 'flat' }, displayChevron: true },\n        error: `<mg-action-more> prop \"displayChevron\" can't be used with a 'button\" prop \"isIcon\" attribute.`,\n      },\n    ])('with args %s', async ({ args, error }) => {\n      expect.assertions(1);\n      try {\n        await getPage(args);\n      } catch (err) {\n        expect(err.message).toMatch(error);\n      }\n    });\n  });\n\n  describe('navigation', () => {\n    test(`Should run item mouseEventHandler by clicking on menu-item`, async () => {\n      const page = await getPage({ items });\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgMenuItem = mgMoreAction.shadowRoot.querySelector('mg-menu-item');\n      mgMenuItem.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(mouseEventHandler).toHaveBeenCalled();\n      expect(page.root).toMatchSnapshot();\n    });\n\n    test(`Should update expanded when popover display change`, async () => {\n      const page = await getPage({ items, displayChevron: true, button: { variant: 'flat', isIcon: false } });\n      expect(page.root).toMatchSnapshot();\n\n      const mgMoreAction = page.doc.querySelector('mg-action-more');\n      const mgButton = mgMoreAction.shadowRoot.querySelector('mg-button');\n      mgButton.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n\n      const mgPopover = mgMoreAction.shadowRoot.querySelector('mg-popover');\n\n      mgPopover.dispatchEvent(new CustomEvent('display-change', { detail: false }));\n      await page.waitForChanges();\n\n      expect(page.root).toMatchSnapshot();\n    });\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-details/mg-details.js

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class MgDetails {
   constructor() {
     /**
@@ -154,3 +154,4 @@ export class MgDetails {
       }];
   }
 }
+//# sourceMappingURL=mg-details.js.map

package/dist/collection/components/molecules/mg-details/mg-details.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-details.js","sourceRoot":"","sources":["../../../../src/components/molecules/mg-details/mg-details.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,KAAK,EAAgB,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AAO/E,MAAM,OAAO,SAAS;;IAgDpB;;OAEG;IACK,iBAAY,GAAG,GAAS,EAAE;MAChC,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC,OAAO,CAAC,IAAI,CAAC;IACpC,CAAC,CAAC;;;uBArBoB,KAAK;oBAKS,KAAK;;EAdzC,cAAc,CAAC,QAAgB;IAC7B,IAAI,QAAQ,KAAK,SAAS,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MACpD,MAAM,IAAI,KAAK,CAAC,sEAAsE,CAAC,CAAC;KACzF;EACH,CAAC;EAYD,cAAc,CAAC,QAAiB;IAC9B,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACrC,CAAC;EAcD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;IACvC,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACzC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,eAAS,KAAK,EAAC,YAAY,EAAC,QAAQ,EAAE,IAAI,CAAC,YAAY,EAAE,IAAI,EAAE,IAAI,CAAC,QAAQ,EAAE,GAAG,EAAE,CAAC,EAAsB,EAAE,EAAE,CAAC,CAAC,IAAI,CAAC,OAAO,GAAG,EAAE,CAAC;MAChI;QACE,YAAM,IAAI,EAAC,SAAS,GAAQ;QAC5B,YAAM,KAAK,EAAC,oBAAoB;UAC9B,eAAS,IAAI,EAAC,YAAY,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,EAAE,yBAAyB,EAAE,IAAI,EAAE,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,EAAE,GAAY;UAClJ,YAAM,KAAK,EAAE,EAAE,SAAS,EAAE,IAAI,CAAC,WAAW,EAAE,IAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,YAAY,CAAQ,CACvG,CACC;MACV,WAAK,KAAK,EAAC,qBAAqB;QAC9B,YAAM,IAAI,EAAC,SAAS,GAAQ,CACxB,CACE,CACX,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Event, EventEmitter, h, Prop, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'mg-details',\n  styleUrl: 'mg-details.scss',\n  shadow: true,\n})\nexport class MgDetails {\n  /************\n   * Internal *\n   ************/\n\n  // HTML selector\n  private details: HTMLDetailsElement;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Displayed title when details are closed\n   */\n  @Prop() toggleClosed!: string;\n\n  /**\n   * Displayed title when details are opened\n   */\n  @Prop() toggleOpened!: string;\n  @Watch('toggleClosed')\n  @Watch('toggleOpened')\n  validateTitles(newValue: string): void {\n    if (newValue === undefined || newValue.trim() === '') {\n      throw new Error('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n    }\n  }\n\n  /**\n   * Hide summary element\n   */\n  @Prop() hideSummary = false;\n\n  /**\n   * Define if details are diplayed\n   */\n  @Prop({ mutable: true }) expanded = false;\n  @Watch('expanded')\n  handleExpanded(newValue: boolean): void {\n    this.expandedChange.emit(newValue);\n  }\n\n  /**\n   * Emmited event when expanded change\n   */\n  @Event({ eventName: 'expanded-change' }) expandedChange: EventEmitter<boolean>;\n\n  /**\n   * Handle details toggle\n   */\n  private handleToggle = (): void => {\n    this.expanded = this.details.open;\n  };\n\n  /*************\n   * Lifecycle *\n   *************/\n\n  /**\n   * Check if component props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateTitles(this.toggleClosed);\n    this.validateTitles(this.toggleOpened);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <details class=\"mg-details\" onToggle={this.handleToggle} open={this.expanded} ref={(el: HTMLDetailsElement) => (this.details = el)}>\n        <summary>\n          <slot name=\"summary\"></slot>\n          <span class=\"mg-details__toggle\">\n            <mg-icon icon=\"chevron-up\" size=\"small\" class={{ 'mg-details__toggle-icon': true, 'mg-details__toggle-icon--reverse': !this.expanded }}></mg-icon>\n            <span class={{ 'sr-only': this.hideSummary }}>{this.expanded ? this.toggleOpened : this.toggleClosed}</span>\n          </span>\n        </summary>\n        <div class=\"mg-details__details\">\n          <slot name=\"details\"></slot>\n        </div>\n      </details>\n    );\n  }\n}\n"]}

package/dist/collection/components/molecules/mg-details/test/mg-details.e2e.playwright.js

@@ -0,0 +1,30 @@
+import { setPageContent, describe, testEach, expect, test } from "../../../../utils/playwright.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+const content = '<span slot="summary">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><p slot="details">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';
+const baseArgs = { toggleClosed: 'Show details', toggleOpened: 'Hide details' };
+const htmlContent = (args, style) => `<style>*, *:before, *:after { box-sizing: border-box; } .e2e-screenshot { width: 100%; } ${style}</style><mg-details ${renderAttributes(args)}>${content}</mg-details>`;
+describe('mg-details', () => {
+  testEach([{}, { 'hide-summary': '' }])('Should toggle details %s', async (page, args) => {
+    await setPageContent(page, htmlContent(Object.assign(Object.assign({}, baseArgs), args)));
+    await page.setViewportSize({ width: 700, height: 100 });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Space');
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  test('Should not render toggle text when window size is under 700px', async ({ page }) => {
+    await setPageContent(page, htmlContent(Object.assign({}, baseArgs)));
+    await page.setViewportSize({ width: 650, height: 100 });
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+  testEach([0, 5])('Should update space (%s) between summary and details', async (page, args) => {
+    await setPageContent(page, htmlContent(Object.assign({}, baseArgs), `mg-details {
+        --mg-details-spacing: ${args}rem;
+      })`));
+    await page.setViewportSize({ width: 700, height: 100 });
+    await page.keyboard.press('Tab');
+    await page.keyboard.press('Space');
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+});
+//# sourceMappingURL=mg-details.e2e.playwright.js.map

package/dist/collection/components/molecules/mg-details/test/mg-details.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-details.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-details/test/mg-details.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE,QAAQ,EAAE,MAAM,EAAY,IAAI,EAAE,MAAM,6CAA6C,CAAC;AACzH,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpE,MAAM,OAAO,GACX,ifAAif,CAAC;AAEpf,MAAM,QAAQ,GAAG,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC;AAEhF,MAAM,WAAW,GAAG,CAAC,IAAI,EAAE,KAAM,EAAE,EAAE,CACnC,4FAA4F,KAAK,uBAAuB,gBAAgB,CAAC,IAAI,CAAC,IAAI,OAAO,eAAe,CAAC;AAE3K,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,QAAQ,CAAC,CAAC,EAAE,EAAE,EAAE,cAAc,EAAE,EAAE,EAAE,CAAC,CAAC,CAAC,0BAA0B,EAAE,KAAK,EAAE,IAAc,EAAE,IAAY,EAAE,EAAE;IACxG,MAAM,cAAc,CAAC,IAAI,EAAE,WAAW,iCAAM,QAAQ,GAAK,IAAI,EAAG,CAAC,CAAC;IAElE,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;IAEjE,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,+DAA+D,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IACvF,MAAM,cAAc,CAAC,IAAI,EAAE,WAAW,mBAAM,QAAQ,EAAG,CAAC,CAAC;IAEzD,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;EAEH,QAAQ,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,sDAAsD,EAAE,KAAK,EAAE,IAAI,EAAE,IAAI,EAAE,EAAE;IAC5F,MAAM,cAAc,CAClB,IAAI,EACJ,WAAW,mBACJ,QAAQ,GACb;gCACwB,IAAI;SAC3B,CACF,CACF,CAAC;IAEF,MAAM,IAAI,CAAC,eAAe,CAAC,EAAE,KAAK,EAAE,GAAG,EAAE,MAAM,EAAE,GAAG,EAAE,CAAC,CAAC;IAExD,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,KAAK,CAAC,CAAC;IACjC,MAAM,IAAI,CAAC,QAAQ,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAEnC,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { setPageContent, describe, testEach, expect, PageType, test } from '../../../../utils/playwright.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\n\nconst content =\n  '<span slot=\"summary\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. </span><p slot=\"details\">Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>';\n\nconst baseArgs = { toggleClosed: 'Show details', toggleOpened: 'Hide details' };\n\nconst htmlContent = (args, style?) =>\n  `<style>*, *:before, *:after { box-sizing: border-box; } .e2e-screenshot { width: 100%; } ${style}</style><mg-details ${renderAttributes(args)}>${content}</mg-details>`;\n\ndescribe('mg-details', () => {\n  testEach([{}, { 'hide-summary': '' }])('Should toggle details %s', async (page: PageType, args: object) => {\n    await setPageContent(page, htmlContent({ ...baseArgs, ...args }));\n\n    await page.setViewportSize({ width: 700, height: 100 });\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Space');\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  test('Should not render toggle text when window size is under 700px', async ({ page }) => {\n    await setPageContent(page, htmlContent({ ...baseArgs }));\n\n    await page.setViewportSize({ width: 650, height: 100 });\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n\n  testEach([0, 5])('Should update space (%s) between summary and details', async (page, args) => {\n    await setPageContent(\n      page,\n      htmlContent(\n        { ...baseArgs },\n        `mg-details {\n        --mg-details-spacing: ${args}rem;\n      })`,\n      ),\n    );\n\n    await page.setViewportSize({ width: 700, height: 100 });\n\n    await page.keyboard.press('Tab');\n    await page.keyboard.press('Space');\n\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n});\n"]}

package/dist/collection/components/molecules/mg-details/test/mg-details.spec.js

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgDetails } from "../mg-details";
+const getPage = args => newSpecPage({
+  components: [MgDetails],
+  template: () => (h("mg-details", Object.assign({}, args), h("span", { slot: "summary" }, "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."), h("p", { slot: "details" }, "Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."))),
+});
+describe('mg-details', () => {
+  test.each([
+    { toggleClosed: 'Show details', toggleOpened: 'Hide details' },
+    { toggleClosed: 'Show details', toggleOpened: 'Hide details', expanded: true },
+    { toggleClosed: 'Show details', toggleOpened: 'Hide details', hideSummary: true },
+  ])('with args %s', async (args) => {
+    const { root } = await getPage(args);
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    {},
+    { toggleClosed: 'Show details' },
+    { toggleOpened: 'Hide details' },
+    { toggleClosed: ' ', toggleOpened: 'Hide details' },
+    { toggleClosed: 'Show details', toggleOpened: ' ' },
+  ])('Should throw error when missing toogle messages: %s', async (args) => {
+    expect.assertions(1);
+    try {
+      await getPage(args);
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-details> prop "toggleClosed" and "toggleOpened" must be defined.');
+    }
+  });
+  test('Should toggle details on click', async () => {
+    const page = await getPage({ toggleClosed: 'Show details', toggleOpened: 'Hide details' });
+    const element = page.doc.querySelector('mg-details');
+    const summary = element.shadowRoot.querySelector('summary');
+    jest.spyOn(page.rootInstance.expandedChange, 'emit');
+    summary.dispatchEvent(new CustomEvent('toggle', { bubbles: true }));
+    await page.waitForChanges();
+    expect(page.rootInstance.expandedChange.emit).toHaveBeenCalledTimes(1);
+  });
+});
+//# sourceMappingURL=mg-details.spec.js.map

package/dist/collection/components/molecules/mg-details/test/mg-details.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-details.spec.js","sourceRoot":"","sources":["../../../../../src/components/molecules/mg-details/test/mg-details.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,eAAe,CAAC;AAE1C,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,SAAS,CAAC;EACvB,QAAQ,EAAE,GAAG,EAAE,CAAC,CACd,kCAAgB,IAAI;IAClB,YAAM,IAAI,EAAC,SAAS,kIAAmI;IACvJ,SAAG,IAAI,EAAC,SAAS,wUAGb,CACO,CACd;CACF,CAAC,CAAC;AAEL,QAAQ,CAAC,YAAY,EAAE,GAAG,EAAE;EAC1B,IAAI,CAAC,IAAI,CAAC;IACR,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE;IAC9D,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,QAAQ,EAAE,IAAI,EAAE;IAC9E,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,IAAI,EAAE;GAClF,CAAC,CAAC,cAAc,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC9B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;IACrC,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC;IACR,EAAE;IACF,EAAE,YAAY,EAAE,cAAc,EAAE;IAChC,EAAE,YAAY,EAAE,cAAc,EAAE;IAChC,EAAE,YAAY,EAAE,GAAG,EAAE,YAAY,EAAE,cAAc,EAAE;IACnD,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,GAAG,EAAE;GACpD,CAAC,CAAC,qDAAqD,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IACrE,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,IAAI,CAAC,CAAC;KACrB;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,sEAAsE,CAAC,CAAC;KACrG;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,YAAY,EAAE,cAAc,EAAE,YAAY,EAAE,cAAc,EAAE,CAAC,CAAC;IAE3F,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,YAAY,CAAC,CAAC;IACrD,MAAM,OAAO,GAAG,OAAO,CAAC,UAAU,CAAC,aAAa,CAAC,SAAS,CAAC,CAAC;IAE5D,IAAI,CAAC,KAAK,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,MAAM,CAAC,CAAC;IAErD,OAAO,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;IACpE,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAE5B,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,cAAc,CAAC,IAAI,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,CAAC;EACzE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgDetails } from '../mg-details';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgDetails],\n    template: () => (\n      <mg-details {...args}>\n        <span slot=\"summary\">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</span>\n        <p slot=\"details\">\n          Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse\n          cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.\n        </p>\n      </mg-details>\n    ),\n  });\n\ndescribe('mg-details', () => {\n  test.each([\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details' },\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details', expanded: true },\n    { toggleClosed: 'Show details', toggleOpened: 'Hide details', hideSummary: true },\n  ])('with args %s', async args => {\n    const { root } = await getPage(args);\n    expect(root).toMatchSnapshot();\n  });\n\n  test.each([\n    {},\n    { toggleClosed: 'Show details' },\n    { toggleOpened: 'Hide details' },\n    { toggleClosed: ' ', toggleOpened: 'Hide details' },\n    { toggleClosed: 'Show details', toggleOpened: ' ' },\n  ])('Should throw error when missing toogle messages: %s', async args => {\n    expect.assertions(1);\n    try {\n      await getPage(args);\n    } catch (err) {\n      expect(err.message).toMatch('<mg-details> prop \"toggleClosed\" and \"toggleOpened\" must be defined.');\n    }\n  });\n\n  test('Should toggle details on click', async () => {\n    const page = await getPage({ toggleClosed: 'Show details', toggleOpened: 'Hide details' });\n\n    const element = page.doc.querySelector('mg-details');\n    const summary = element.shadowRoot.querySelector('summary');\n\n    jest.spyOn(page.rootInstance.expandedChange, 'emit');\n\n    summary.dispatchEvent(new CustomEvent('toggle', { bubbles: true }));\n    await page.waitForChanges();\n\n    expect(page.rootInstance.expandedChange.emit).toHaveBeenCalledTimes(1);\n  });\n});\n"]}