@mgdis/mg-components 5.15.0 → 5.17.0

package/dist/collection/collection-manifest.json

@@ -1,43 +1,45 @@
 {
   "entries": [
-    "./components/atoms/mg-badge/mg-badge.js",
-    "./components/atoms/mg-button/mg-button.js",
-    "./components/atoms/mg-icon/mg-icon.js",
-    "./components/molecules/menu/mg-menu/mg-menu.js",
-    "./components/molecules/mg-item-more/mg-item-more.js",
-    "./components/molecules/mg-popover/mg-popover.js",
-    "./components/molecules/menu/mg-menu-item/mg-menu-item.js",
-    "./components/atoms/mg-card/mg-card.js",
-    "./components/atoms/mg-character-left/mg-character-left.js",
-    "./components/atoms/mg-divider/mg-divider.js",
-    "./components/atoms/mg-input-title/mg-input-title.js",
-    "./components/atoms/mg-tag/mg-tag.js",
-    "./components/atoms/mg-tooltip/mg-tooltip.js",
-    "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js",
-    "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js",
-    "./components/molecules/inputs/mg-input-date/mg-input-date.js",
-    "./components/molecules/inputs/mg-input-numeric/mg-input-numeric.js",
-    "./components/molecules/inputs/mg-input-password/mg-input-password.js",
-    "./components/molecules/inputs/mg-input-radio/mg-input-radio.js",
-    "./components/molecules/inputs/mg-input-select/mg-input-select.js",
-    "./components/molecules/inputs/mg-input-text/mg-input-text.js",
-    "./components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
-    "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.js",
-    "./components/molecules/mg-action-more/mg-action-more.js",
-    "./components/molecules/mg-details/mg-details.js",
-    "./components/molecules/mg-form/mg-form.js",
-    "./components/molecules/mg-illustrated-message/mg-illustrated-message.js",
-    "./components/molecules/mg-message/mg-message.js",
-    "./components/molecules/mg-modal/mg-modal.js",
-    "./components/molecules/mg-pagination/mg-pagination.js",
-    "./components/molecules/mg-panel/mg-panel.js",
-    "./components/molecules/mg-skip-links/mg-skip-links.js",
-    "./components/molecules/mg-tabs/mg-tabs.js"
+    "components/atoms/mg-badge/mg-badge.js",
+    "components/atoms/mg-button/mg-button.js",
+    "components/atoms/mg-icon/mg-icon.js",
+    "components/molecules/menu/mg-menu/mg-menu.js",
+    "components/molecules/mg-item-more/mg-item-more.js",
+    "components/molecules/mg-popover/mg-popover.js",
+    "components/molecules/menu/mg-menu-item/mg-menu-item.js",
+    "components/atoms/mg-card/mg-card.js",
+    "components/atoms/mg-character-left/mg-character-left.js",
+    "components/atoms/mg-divider/mg-divider.js",
+    "components/atoms/mg-input-title/mg-input-title.js",
+    "components/atoms/mg-tag/mg-tag.js",
+    "components/atoms/mg-tooltip/mg-tooltip.js",
+    "components/atoms/mg-tooltip/mg-tooltip-content/mg-tooltip-content.js",
+    "components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js",
+    "components/molecules/inputs/mg-input-checkbox/mg-input-checkbox-paginated/mg-input-checkbox-paginated.js",
+    "components/molecules/inputs/mg-input-text/mg-input-text.js",
+    "components/molecules/mg-message/mg-message.js",
+    "components/molecules/mg-pagination/mg-pagination.js",
+    "components/molecules/mg-popover/mg-popover-content/mg-popover-content.js",
+    "components/molecules/inputs/mg-input-date/mg-input-date.js",
+    "components/molecules/inputs/mg-input-numeric/mg-input-numeric.js",
+    "components/molecules/inputs/mg-input-password/mg-input-password.js",
+    "components/molecules/inputs/mg-input-radio/mg-input-radio.js",
+    "components/molecules/inputs/mg-input-select/mg-input-select.js",
+    "components/molecules/inputs/mg-input-textarea/mg-input-textarea.js",
+    "components/molecules/inputs/mg-input-toggle/mg-input-toggle.js",
+    "components/molecules/mg-action-more/mg-action-more.js",
+    "components/molecules/mg-details/mg-details.js",
+    "components/molecules/mg-form/mg-form.js",
+    "components/molecules/mg-illustrated-message/mg-illustrated-message.js",
+    "components/molecules/mg-modal/mg-modal.js",
+    "components/molecules/mg-panel/mg-panel.js",
+    "components/molecules/mg-skip-links/mg-skip-links.js",
+    "components/molecules/mg-tabs/mg-tabs.js"
   ],
   "compiler": {
     "name": "@stencil/core",
-    "version": "2.22.1",
-    "typescriptVersion": "4.9.4"
+    "version": "4.3.0",
+    "typescriptVersion": "5.1.6"
   },
   "collections": [],
   "bundles": []

package/dist/collection/components/atoms/mg-badge/mg-badge.conf.js

@@ -2,3 +2,4 @@
  * List of all possibles variants
  */
 export const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'];
+//# sourceMappingURL=mg-badge.conf.js.map

package/dist/collection/components/atoms/mg-badge/mg-badge.conf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-badge.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,WAAW,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,YAAY,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['info', 'primary', 'secondary', 'success', 'warning', 'danger', 'text-color'] as const;\n\n/**\n * Variant type from variants\n */\nexport type BadgeVariantType = (typeof variants)[number];\n"]}

package/dist/collection/components/atoms/mg-badge/mg-badge.js

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { variants } from './mg-badge.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { h } from "@stencil/core";
+import { variants } from "./mg-badge.conf";
+import { ClassList } from "../../../utils/components.utils";
 export class MgBadge {
   constructor() {
     /************
@@ -114,7 +114,8 @@ export class MgBadge {
           "references": {
             "BadgeVariantType": {
               "location": "import",
-              "path": "./mg-badge.conf"
+              "path": "./mg-badge.conf",
+              "id": "src/components/atoms/mg-badge/mg-badge.conf.ts::BadgeVariantType"
             }
           }
         },
@@ -168,3 +169,4 @@ export class MgBadge {
       }];
   }
 }
+//# sourceMappingURL=mg-badge.js.map

package/dist/collection/components/atoms/mg-badge/mg-badge.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-badge.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-badge/mg-badge.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,QAAQ,EAAoB,MAAM,iBAAiB,CAAC;AAC7D,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAM5D,MAAM,OAAO,OAAO;;IAClB;;kBAEc;IAEd,UAAU;IACO,iBAAY,GAAG,mBAAmB,CAAC;;;mBAgCf,QAAQ,CAAC,CAAC,CAAC;;2BA0BV,IAAI,SAAS,CAAC,CAAC,UAAU,CAAC,CAAC;;EA/CjE,aAAa,CAAC,QAA0B;IACtC,IAAI,GAAG,QAAQ,EAAE,CAAC,KAAK,CAAC,sBAAsB,CAAC,KAAK,IAAI,EAAE;MACxD,MAAM,IAAI,KAAK,CAAC,mEAAmE,CAAC,CAAC;KACtF;EACH,CAAC;EAQD,aAAa,CAAC,QAA0B;IACtC,IAAI,OAAO,QAAQ,KAAK,QAAQ,IAAI,QAAQ,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;MAC1D,MAAM,IAAI,KAAK,CAAC,sCAAsC,CAAC,CAAC;KACzD;EACH,CAAC;EAOD,eAAe,CAAC,QAA4B,EAAE,QAA6B;IACzE,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,6CAA6C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,GAAG,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;OACtD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,aAAa,QAAQ,EAAE,CAAC,CAAC;KACnD;EACH,CAAC;EAOD,eAAe,CAAC,QAA4B;IAC1C,IAAI,QAAQ;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;;MACrD,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EACtD,CAAC;EAOD;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC/B,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;EACrC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACtC,YAAM,KAAK,EAAC,iBAAiB,IAAE,IAAI,CAAC,KAAK,CAAQ;MACjD,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,KAAK,CAAQ,CACpC,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { variants, BadgeVariantType } from './mg-badge.conf';\nimport { ClassList } from '../../../utils/components.utils';\n@Component({\n  tag: 'mg-badge',\n  styleUrl: 'mg-badge.scss',\n  shadow: true,\n})\nexport class MgBadge {\n  /************\n   * Internal *\n   ************/\n\n  // Classes\n  private readonly classOutline = `mg-badge--outline`;\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Badge value\n   */\n  @Prop() value!: string | number;\n  @Watch('value')\n  validateValue(newValue: MgBadge['value']): void {\n    if (`${newValue}`.match(/^(\\d+\\+*|[?*!a-z])$/i) === null) {\n      throw new Error('<mg-badge> prop \"value\" must be integer or ponctuation character.');\n    }\n  }\n\n  /**\n   * Badge label. Include short description.\n   * Required for accessibility\n   */\n  @Prop() label!: string;\n  @Watch('label')\n  validateLabel(newValue: MgBadge['label']): void {\n    if (typeof newValue !== 'string' || newValue.trim() === '') {\n      throw new Error('<mg-badge> prop \"label\" is required.');\n    }\n  }\n\n  /**\n   * Define button variant\n   */\n  @Prop() variant?: BadgeVariantType = variants[0]; // info\n  @Watch('variant')\n  validateVariant(newValue: MgBadge['variant'], oldValue?: MgBadge['variant']): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-badge> prop \"variant\" must be one of: ${variants.join(', ')}.`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-badge--${oldValue}`);\n      }\n      this.classCollection.add(`mg-badge--${newValue}`);\n    }\n  }\n\n  /**\n   * Define if button is using outline style\n   */\n  @Prop() outline: boolean;\n  @Watch('outline')\n  validateOutline(newValue: MgBadge['outline']): void {\n    if (newValue) this.classCollection.add(this.classOutline);\n    else this.classCollection.delete(this.classOutline);\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-badge']);\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateValue(this.value);\n    this.validateLabel(this.label);\n    this.validateVariant(this.variant);\n    this.validateOutline(this.outline);\n  }\n\n  /**\n   * Render\n   * @returns HTML Element\n   */\n  render(): HTMLElement {\n    return (\n      <span class={this.classCollection.join()}>\n        <span class=\"mg-badge__value\">{this.value}</span>\n        <span class=\"sr-only\">{this.label}</span>\n      </span>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/mg-badge/test/mg-badge.e2e.playwright.js

@@ -0,0 +1,33 @@
+import { test, expect } from "@playwright/test";
+import { setPageContent } from "../../../../utils/playwright.e2e.test.utils";
+import { variants } from "../mg-badge.conf";
+import { darkBackground, renderAttributes } from "../../../../utils/e2e.test.utils";
+const addCustomTextColor = (variant) => `${variant === 'text-color'
+  ? `<style>
+    mg-badge {
+      --mg-badge-text-color: 40 80% 60%;
+      color: hsl(260 80% 50%);
+    }
+  </style>`
+  : ''}`;
+test.describe('mg-badge', () => {
+  test('Should render', async ({ page }) => {
+    // Build HTML
+    const html = variants
+      .map(variant => {
+      const template = [true, false]
+        .map(outline => [1, 99, '*', '!', '99+']
+        .map(value => darkBackground(variant === 'secondary', `<mg-badge ${renderAttributes({ value, label: variant, variant, outline })}></mg-badge>${addCustomTextColor(variant)}`))
+        .join(''))
+        .join('');
+      return `<h2>${variant}</h2>
+        <div>${template}</div>`;
+    })
+      .join('');
+    // Set page content
+    await setPageContent(page, html);
+    // Screenshot
+    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();
+  });
+});
+//# sourceMappingURL=mg-badge.e2e.playwright.js.map

package/dist/collection/components/atoms/mg-badge/test/mg-badge.e2e.playwright.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-badge.e2e.playwright.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-badge/test/mg-badge.e2e.playwright.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAChD,OAAO,EAAE,cAAc,EAAE,MAAM,6CAA6C,CAAC;AAC7E,OAAO,EAAoB,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAC9D,OAAO,EAAE,cAAc,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AAEpF,MAAM,kBAAkB,GAAG,CAAC,OAAyB,EAAU,EAAE,CAC/D,GACE,OAAO,KAAK,YAAY;EACtB,CAAC,CAAC;;;;;WAKG;EACL,CAAC,CAAC,EACN,EAAE,CAAC;AAEL,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,GAAG,EAAE;EAC7B,IAAI,CAAC,eAAe,EAAE,KAAK,EAAE,EAAE,IAAI,EAAE,EAAE,EAAE;IACvC,aAAa;IACb,MAAM,IAAI,GAAG,QAAQ;OAClB,GAAG,CAAC,OAAO,CAAC,EAAE;MACb,MAAM,QAAQ,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC;SAC3B,GAAG,CAAC,OAAO,CAAC,EAAE,CACb,CAAC,CAAC,EAAE,EAAE,EAAE,GAAG,EAAE,GAAG,EAAE,KAAK,CAAC;SACrB,GAAG,CAAC,KAAK,CAAC,EAAE,CACX,cAAc,CAAC,OAAO,KAAK,WAAW,EAAE,aAAa,gBAAgB,CAAC,EAAE,KAAK,EAAE,KAAK,EAAE,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,CAAC,eAAe,kBAAkB,CAAC,OAAO,CAAC,EAAE,CAAC,CAChK;SACA,IAAI,CAAC,EAAE,CAAC,CACZ;SACA,IAAI,CAAC,EAAE,CAAC,CAAC;MAEZ,OAAO,OAAO,OAAO;eACd,QAAQ,QAAQ,CAAC;IAC1B,CAAC,CAAC;OACD,IAAI,CAAC,EAAE,CAAC,CAAC;IAEZ,mBAAmB;IACnB,MAAM,cAAc,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC;IAEjC,aAAa;IACb,MAAM,MAAM,CAAC,IAAI,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC,CAAC,gBAAgB,EAAE,CAAC;EACnE,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { test, expect } from '@playwright/test';\nimport { setPageContent } from '../../../../utils/playwright.e2e.test.utils';\nimport { BadgeVariantType, variants } from '../mg-badge.conf';\nimport { darkBackground, renderAttributes } from '../../../../utils/e2e.test.utils';\n\nconst addCustomTextColor = (variant: BadgeVariantType): string =>\n  `${\n    variant === 'text-color'\n      ? `<style>\n    mg-badge {\n      --mg-badge-text-color: 40 80% 60%;\n      color: hsl(260 80% 50%);\n    }\n  </style>`\n      : ''\n  }`;\n\ntest.describe('mg-badge', () => {\n  test('Should render', async ({ page }) => {\n    // Build HTML\n    const html = variants\n      .map(variant => {\n        const template = [true, false]\n          .map(outline =>\n            [1, 99, '*', '!', '99+']\n              .map(value =>\n                darkBackground(variant === 'secondary', `<mg-badge ${renderAttributes({ value, label: variant, variant, outline })}></mg-badge>${addCustomTextColor(variant)}`),\n              )\n              .join(''),\n          )\n          .join('');\n\n        return `<h2>${variant}</h2>\n        <div>${template}</div>`;\n      })\n      .join('');\n\n    // Set page content\n    await setPageContent(page, html);\n\n    // Screenshot\n    await expect(page.locator('.e2e-screenshot')).toHaveScreenshot();\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-badge/test/mg-badge.spec.js

@@ -0,0 +1,70 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgBadge } from "../mg-badge";
+import { variants } from "../mg-badge.conf";
+const getPage = args => newSpecPage({
+  components: [MgBadge],
+  template: () => h("mg-badge", Object.assign({}, args)),
+});
+describe('mg-badge', () => {
+  describe.each(variants)('variant %s', variant => {
+    test.each([true, false])('outiline %s', async (outline) => {
+      const { root } = await getPage({ variant, outline, value: 1, label: 'Batman' });
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test.each([1, 100, '!', '?', '99+'])('value %s', async (value) => {
+    const { root } = await getPage({ value, label: 'Batman' });
+    expect(root).toMatchSnapshot();
+  });
+  test('Should replace classes on variant/ouline changes', async () => {
+    const page = await getPage({ value: 1, label: 'Blu' });
+    const element = page.doc.querySelector('mg-badge');
+    let classInfo = element.shadowRoot.querySelector('.mg-badge--info');
+    let classOutline = element.shadowRoot.querySelector('.mg-badge--outline');
+    expect(classInfo).not.toBeNull();
+    expect(classOutline).toBeNull();
+    // Change variant
+    element.variant = 'danger';
+    await page.waitForChanges();
+    classInfo = element.shadowRoot.querySelector('.mg-badge--info');
+    const classDanger = element.shadowRoot.querySelector('.mg-badge--danger');
+    expect(classInfo).toBeNull();
+    expect(classDanger).not.toBeNull();
+    // Change outline
+    element.outline = true;
+    await page.waitForChanges();
+    classOutline = element.shadowRoot.querySelector('.mg-badge--outline');
+    expect(classOutline).not.toBeNull();
+  });
+  describe('errors', () => {
+    test.each(['', ' ', undefined])('Should throw error, case invalid label prop', async (label) => {
+      expect.assertions(1);
+      try {
+        await getPage({ value: 1, label });
+      }
+      catch (err) {
+        expect(err.message).toContain('<mg-badge> prop "label" is required.');
+      }
+    });
+    test.each(['', 'Batman'])('Should throw error, case invalid variant prop', async (variant) => {
+      expect.assertions(1);
+      try {
+        await getPage({ variant, value: 1, label: 'Batman' });
+      }
+      catch (err) {
+        expect(err.message).toContain('<mg-badge> prop "variant" must be one of: ');
+      }
+    });
+    test.each(['', 'Batman', '+', '99?'])('Should throw error, case invalid value prop', async (value) => {
+      expect.assertions(1);
+      try {
+        await getPage({ value, label: 'Batman' });
+      }
+      catch (err) {
+        expect(err.message).toContain('<mg-badge> prop "value" must be integer or ponctuation character.');
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-badge.spec.js.map

package/dist/collection/components/atoms/mg-badge/test/mg-badge.spec.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-badge.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-badge/test/mg-badge.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgBadge } from '../mg-badge';\nimport { variants } from '../mg-badge.conf';\n\nconst getPage = args =>\n  newSpecPage({\n    components: [MgBadge],\n    template: () => <mg-badge {...args}></mg-badge>,\n  });\n\ndescribe('mg-badge', () => {\n  describe.each(variants)('variant %s', variant => {\n    test.each([true, false])('outiline %s', async outline => {\n      const { root } = await getPage({ variant, outline, value: 1, label: 'Batman' });\n      expect(root).toMatchSnapshot();\n    });\n  });\n\n  test.each([1, 100, '!', '?', '99+'])('value %s', async value => {\n    const { root } = await getPage({ value, label: 'Batman' });\n    expect(root).toMatchSnapshot();\n  });\n\n  test('Should replace classes on variant/ouline changes', async () => {\n    const page = await getPage({ value: 1, label: 'Blu' });\n    const element = page.doc.querySelector('mg-badge');\n    let classInfo = element.shadowRoot.querySelector('.mg-badge--info');\n    let classOutline = element.shadowRoot.querySelector('.mg-badge--outline');\n\n    expect(classInfo).not.toBeNull();\n    expect(classOutline).toBeNull();\n\n    // Change variant\n    element.variant = 'danger';\n    await page.waitForChanges();\n\n    classInfo = element.shadowRoot.querySelector('.mg-badge--info');\n    const classDanger = element.shadowRoot.querySelector('.mg-badge--danger');\n\n    expect(classInfo).toBeNull();\n    expect(classDanger).not.toBeNull();\n\n    // Change outline\n    element.outline = true;\n    await page.waitForChanges();\n\n    classOutline = element.shadowRoot.querySelector('.mg-badge--outline');\n    expect(classOutline).not.toBeNull();\n  });\n\n  describe('errors', () => {\n    test.each(['', ' ', undefined])('Should throw error, case invalid label prop', async label => {\n      expect.assertions(1);\n      try {\n        await getPage({ value: 1, label });\n      } catch (err) {\n        expect(err.message).toContain('<mg-badge> prop \"label\" is required.');\n      }\n    });\n\n    test.each(['', 'Batman'])('Should throw error, case invalid variant prop', async variant => {\n      expect.assertions(1);\n      try {\n        await getPage({ variant, value: 1, label: 'Batman' });\n      } catch (err) {\n        expect(err.message).toContain('<mg-badge> prop \"variant\" must be one of: ');\n      }\n    });\n\n    test.each(['', 'Batman', '+', '99?'])('Should throw error, case invalid value prop', async value => {\n      expect.assertions(1);\n      try {\n        await getPage({ value, label: 'Batman' });\n      } catch (err) {\n        expect(err.message).toContain('<mg-badge> prop \"value\" must be integer or ponctuation character.');\n      }\n    });\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-button/mg-button.conf.js

@@ -6,3 +6,4 @@ export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info',
  * List of all possibles button types
  */
 export const buttonTypes = ['button', 'submit', 'reset'];
+//# sourceMappingURL=mg-button.conf.js.map

package/dist/collection/components/atoms/mg-button/mg-button.conf.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-button.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,SAAS,EAAE,WAAW,EAAE,QAAQ,EAAE,YAAY,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,MAAM,CAAU,CAAC;AAOrH;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,QAAQ,EAAE,QAAQ,EAAE,OAAO,CAAU,CAAC","sourcesContent":["/**\n * List of all possibles variants\n */\nexport const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat', 'success', 'link'] as const;\n\n/**\n * VariantType type from button variants\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List of all possibles button types\n */\nexport const buttonTypes = ['button', 'submit', 'reset'] as const;\n\n/**\n * ButtonType type from buttonTypes\n */\nexport type ButtonType = (typeof buttonTypes)[number];\n"]}

package/dist/collection/components/atoms/mg-button/mg-button.js

@@ -1,6 +1,6 @@
-import { h, Host } from '@stencil/core';
-import { variants } from './mg-button.conf';
-import { ClassList } from '../../../utils/components.utils';
+import { h, Host } from "@stencil/core";
+import { variants } from "./mg-button.conf";
+import { ClassList } from "../../../utils/components.utils";
 export class MgButton {
   constructor() {
     /************
@@ -153,7 +153,8 @@ export class MgButton {
           "references": {
             "VariantType": {
               "location": "import",
-              "path": "./mg-button.conf"
+              "path": "./mg-button.conf",
+              "id": "src/components/atoms/mg-button/mg-button.conf.ts::VariantType"
             }
           }
         },
@@ -210,7 +211,8 @@ export class MgButton {
           "references": {
             "ButtonType": {
               "location": "import",
-              "path": "./mg-button.conf"
+              "path": "./mg-button.conf",
+              "id": "src/components/atoms/mg-button/mg-button.conf.ts::ButtonType"
             }
           }
         },
@@ -335,7 +337,8 @@ export class MgButton {
           "resolved": "boolean",
           "references": {
             "MgButton": {
-              "location": "global"
+              "location": "global",
+              "id": "global::MgButton"
             }
           }
         }
@@ -358,3 +361,4 @@ export class MgButton {
       }];
   }
 }
+//# sourceMappingURL=mg-button.js.map

package/dist/collection/components/atoms/mg-button/mg-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Element, h, Prop, State, Watch, Host, EventEmitter, Event } from '@stencil/core';\nimport { variants, VariantType, ButtonType } from './mg-button.conf';\nimport { ClassList } from '../../../utils/components.utils';\n\n@Component({\n  tag: 'mg-button',\n  styleUrl: 'mg-button.scss',\n  shadow: true,\n})\nexport class MgButton {\n  /************\n   * Internal *\n   ************/\n\n  private onClickElementFn = null;\n  private readonly classDisabled = 'mg-button--disabled';\n  private readonly classLoading = 'mg-button--loading';\n  private readonly classFullWidth = 'mg-button--full-width';\n\n  /**************\n   * Decorators *\n   **************/\n\n  /**\n   * Get component DOM element\n   */\n  @Element() element: HTMLMgButtonElement;\n\n  /**\n   * Define button variant\n   */\n  @Prop() variant: VariantType = variants[0]; // Primary\n  @Watch('variant')\n  validateVariant(newValue: VariantType, oldValue?: VariantType): void {\n    if (!variants.includes(newValue)) {\n      throw new Error(`<mg-button> prop \"variant\" must be one of: ${variants.join(', ')}`);\n    } else {\n      if (oldValue !== undefined) {\n        this.classCollection.delete(`mg-button--${oldValue}`);\n      }\n      this.classCollection.add(`mg-button--${newValue}`);\n    }\n  }\n\n  /**\n   * Identifier is used for the element ID (id is a reserved prop in Stencil.js)\n   */\n  @Prop() identifier: string;\n\n  /**\n   * aria-label\n   * In case button text is not explicit enough\n   */\n  @Prop() label: string;\n\n  /**\n   * Define button type\n   */\n  @Prop() type: ButtonType;\n\n  /**\n   * Set button to full-width\n   */\n  @Prop() fullWidth = false;\n  @Watch('fullWidth')\n  validateFullWidth(newValue: MgButton['fullWidth']): void {\n    if (newValue && this.isIcon) {\n      throw new Error('<mg-button> prop \"fullWidth\" cannot be used with prop \"isIcon\".');\n    } else if (newValue) {\n      this.classCollection.add(this.classFullWidth);\n    } else {\n      this.classCollection.delete(this.classFullWidth);\n    }\n  }\n\n  /**\n   * Define form id to attach button with.\n   * If this attribute is not set, the <button> is associated with its ancestor <form> element.\n   */\n  @Prop() form: string;\n\n  /**\n   * Disable button\n   */\n  @Prop({ mutable: true }) disabled: boolean;\n  @Watch('disabled')\n  disabledHandler(isDisabled: MgButton['disabled']): void {\n    // Remove loading when enable\n    // Will be set back onclick\n    if (!isDisabled && this.disableOnClick) {\n      this.loading = false;\n    }\n    // Manage if onclick\n    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;\n\n    // apply style\n    if (isDisabled) {\n      this.classCollection.add(this.classDisabled);\n    } else {\n      this.classCollection.delete(this.classDisabled);\n    }\n\n    // emit value update\n    this.disabledChange.emit(isDisabled);\n  }\n  /**\n   * Define if button is round.\n   * Used for icon button.\n   */\n  @Prop() isIcon = false;\n\n  /**\n   * Option to set input disable on click, in order to prevent multi-click.\n   * Parent component have to remove the attribute 'disabled' when the process ends.\n   */\n  @Prop() disableOnClick = false;\n\n  /**\n   * Define if button is loading, default to false.\n   * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.\n   * It's required to reset to false when action/promise in parent is done to stop the loading state\n   */\n  @State() loading = false;\n  @Watch('loading')\n  loadingHandler(newValue: MgButton['loading']): void {\n    // we add loading style if it newvalue is true else we remove it\n    if (newValue) {\n      this.classCollection.add(this.classLoading);\n    } else {\n      this.classCollection.delete(this.classLoading);\n    }\n  }\n\n  /**\n   * Component classes\n   */\n  @State() classCollection: ClassList = new ClassList(['mg-button']);\n\n  /**\n   * Emmited event when disabled change\n   */\n  @Event({ eventName: 'disabled-change' }) disabledChange: EventEmitter<MgButton['disabled']>;\n\n  /**\n   * Trigger actions onClick event\n   * @param event - click event\n   */\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled) event.stopPropagation();\n    // Used to prevent multi-click.\n    else if (this.disableOnClick) {\n      this.loading = true;\n      this.disabled = true;\n    }\n  };\n\n  /**\n   * Handle onKeydown event\n   * @param event - keyboard event\n   */\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n    } else if (!this.disabled && ['Enter', 'NumpadEnter', 'Space'].includes(event.key)) {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Handle onKeyup event\n   * @param event - keyboard event\n   */\n  private handleKeyup = (event: KeyboardEvent): void => {\n    if (!this.disabled && event.key === ' ') {\n      event.preventDefault();\n      this.element.dispatchEvent(new MouseEvent('click', { bubbles: true }));\n    }\n  };\n\n  /**\n   * Check if props are well configured on init\n   */\n  componentWillLoad(): void {\n    this.validateVariant(this.variant);\n    this.validateFullWidth(this.fullWidth);\n    if (this.isIcon) {\n      this.classCollection.add(`mg-button--icon`);\n      if (typeof this.label !== 'string' || this.label.trim() === '') {\n        throw new Error(`<mg-button> prop \"label\" is mandatory when prop \"isIcon\" is set to true.`);\n      }\n    }\n    // Store the onclick fn\n    this.onClickElementFn = this.element.onclick;\n    this.disabledHandler(this.disabled);\n  }\n\n  /**\n   * Render component\n   * @returns html element\n   */\n  render(): HTMLElement {\n    return (\n      <Host\n        role=\"button\"\n        tabIndex={0}\n        type={this.type}\n        form={this.form}\n        full-width={this.fullWidth}\n        aria-label={this.label}\n        aria-disabled={this.disabled !== undefined && this.disabled.toString()}\n        onClick={this.handleClick}\n        onKeyup={this.handleKeyup}\n        onKeydown={this.handleKeydown}\n      >\n        <div class={this.classCollection.join()} id={this.identifier}>\n          {this.loading && <mg-icon icon=\"loader\" spin></mg-icon>}\n          <div class=\"mg-button__content\">\n            <slot></slot>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"]}

package/dist/collection/components/atoms/mg-button/test/mg-button.e2e.js

@@ -0,0 +1,91 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { variants } from "../mg-button.conf";
+const buttonHeight = 35;
+describe('mg-button', () => {
+  test('Should render', async () => {
+    const html = variants
+      .map(variant => `<div>
+      <mg-button variant="${variant}">${variant}</mg-button>
+      <mg-button variant="${variant}" is-icon><mg-icon icon="check-circle"></mg-icon></mg-button>
+      <mg-button variant="${variant}" disabled>disabled</mg-button>
+      <mg-button variant="${variant}" is-icon disabled label="disabled"><mg-icon icon="check-circle"></mg-icon></mg-button>
+    </div>`)
+      .join('');
+    const page = await createPage(html, { width: 250, height: variants.length * buttonHeight });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render whith icon slot', async () => {
+    const slots = ['<mg-icon icon="trash"></mg-icon>Text button', '<mg-icon icon="trash"></mg-icon>Text button<mg-badge value="1" label="label"></mg-badge>'];
+    const html = slots.map(slot => `<div><mg-button>${slot}</mg-button></div>`).join('');
+    const page = await createPage(html, { width: 150, height: slots.length * buttonHeight });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a 2 lines button', async () => {
+    const page = await createPage(`<mg-button>Button with a<br> two lines text</mg-button>`);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a button in a paragraph', async () => {
+    const paragraphs = [`<p>This is a <mg-button>button</mg-button> in a paragraph.</p>`, `<p>This is a <mg-button variant="link">button</mg-button> in a paragraph.</p>`];
+    const html = paragraphs.join('');
+    const page = await createPage(html);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test.each(variants)('Should render focused and hover %s button', async (variant) => {
+    const page = await createPage(`
+      <mg-button variant="${variant}">${variant}:focus</mg-button>
+      <mg-button variant="${variant}" class="hover">${variant}:hover</mg-button>
+    `);
+    await page.keyboard.down('Tab');
+    await page.waitForChanges();
+    const button = await page.find('mg-button.hover');
+    button.hover();
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render a full-width button', async () => {
+    const slots = ['batman', '<mg-icon icon="check-circle"></mg-icon>batman'];
+    const html = slots.map(slot => `<mg-button full-width>${slot}</mg-button>`).join('');
+    const page = await createPage(html);
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  describe.each([
+    '<mg-button disable-on-click>Message action</mg-button>',
+    '<mg-button disable-on-click label="test" is-icon><mg-icon icon="info-circle"></mg-icon></mg-button>',
+    '<mg-button disable-on-click><mg-icon icon="info-circle"></mg-icon> Message action</mg-button>',
+  ])('template', template => {
+    test('should disable button after keyUp "Space"', async () => {
+      const page = await createPage(template);
+      const button = await page.find('mg-button');
+      const screenshot = await page.screenshot();
+      expect(screenshot).toMatchImageSnapshot();
+      await button.press('Space');
+      // Wait for spinner to be displayed
+      await page.waitForChanges();
+      // Remove spinner annimation for screenshot
+      await page.$eval('mg-button', elm => {
+        const svg = elm.shadowRoot.querySelector('mg-icon').shadowRoot.querySelector('svg');
+        svg.classList.remove('mg-icon--spin');
+      });
+      await page.waitForChanges();
+      const screenshotLoading = await page.screenshot();
+      expect(screenshotLoading).toMatchImageSnapshot();
+    });
+  });
+  test('should render a link like a button', async () => {
+    const links = [
+      '<a href="#" class="mg-button mg-button--primary">a.mg-button</a>',
+      '<a href="#" class="mg-button mg-button--primary"><mg-icon icon="check-circle"></mg-icon>a.mg-button w/ icon</a>',
+      '<a href="#" class="mg-button mg-button--primary mg-button--icon"><mg-icon icon="check-circle"></mg-icon></a>',
+    ];
+    const html = links.map(link => `<div>${link}</div>`).join('');
+    const page = await createPage(`<link rel="stylesheet" href="http://localhost:3333/build/mg-components.css" />${html}`, { width: 200, height: links.length * buttonHeight });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-button.e2e.js.map

package/dist/collection/components/atoms/mg-button/test/mg-button.e2e.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"mg-button.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-button/test/mg-button.e2e.ts"],"names":[],"mappings":"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","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { variants } from '../mg-button.conf';\n\nconst buttonHeight = 35;\n\ndescribe('mg-button', () => {\n  test('Should render', async () => {\n    const html = variants\n      .map(\n        variant => `<div>\n      <mg-button variant=\"${variant}\">${variant}</mg-button>\n      <mg-button variant=\"${variant}\" is-icon><mg-icon icon=\"check-circle\"></mg-icon></mg-button>\n      <mg-button variant=\"${variant}\" disabled>disabled</mg-button>\n      <mg-button variant=\"${variant}\" is-icon disabled label=\"disabled\"><mg-icon icon=\"check-circle\"></mg-icon></mg-button>\n    </div>`,\n      )\n      .join('');\n    const page = await createPage(html, { width: 250, height: variants.length * buttonHeight });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render whith icon slot', async () => {\n    const slots = ['<mg-icon icon=\"trash\"></mg-icon>Text button', '<mg-icon icon=\"trash\"></mg-icon>Text button<mg-badge value=\"1\" label=\"label\"></mg-badge>'];\n    const html = slots.map(slot => `<div><mg-button>${slot}</mg-button></div>`).join('');\n    const page = await createPage(html, { width: 150, height: slots.length * buttonHeight });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a 2 lines button', async () => {\n    const page = await createPage(`<mg-button>Button with a<br> two lines text</mg-button>`);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a button in a paragraph', async () => {\n    const paragraphs = [`<p>This is a <mg-button>button</mg-button> in a paragraph.</p>`, `<p>This is a <mg-button variant=\"link\">button</mg-button> in a paragraph.</p>`];\n    const html = paragraphs.join('');\n    const page = await createPage(html);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test.each(variants)('Should render focused and hover %s button', async variant => {\n    const page = await createPage(`\n      <mg-button variant=\"${variant}\">${variant}:focus</mg-button>\n      <mg-button variant=\"${variant}\" class=\"hover\">${variant}:hover</mg-button>\n    `);\n\n    await page.keyboard.down('Tab');\n    await page.waitForChanges();\n\n    const button = await page.find('mg-button.hover');\n    button.hover();\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  test('Should render a full-width button', async () => {\n    const slots = ['batman', '<mg-icon icon=\"check-circle\"></mg-icon>batman'];\n    const html = slots.map(slot => `<mg-button full-width>${slot}</mg-button>`).join('');\n\n    const page = await createPage(html);\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n\n  describe.each([\n    '<mg-button disable-on-click>Message action</mg-button>',\n    '<mg-button disable-on-click label=\"test\" is-icon><mg-icon icon=\"info-circle\"></mg-icon></mg-button>',\n    '<mg-button disable-on-click><mg-icon icon=\"info-circle\"></mg-icon> Message action</mg-button>',\n  ])('template', template => {\n    test('should disable button after keyUp \"Space\"', async () => {\n      const page = await createPage(template);\n      const button = await page.find('mg-button');\n\n      const screenshot = await page.screenshot();\n      expect(screenshot).toMatchImageSnapshot();\n\n      await button.press('Space');\n\n      // Wait for spinner to be displayed\n      await page.waitForChanges();\n\n      // Remove spinner annimation for screenshot\n      await page.$eval('mg-button', elm => {\n        const svg = elm.shadowRoot.querySelector('mg-icon').shadowRoot.querySelector('svg');\n        svg.classList.remove('mg-icon--spin');\n      });\n      await page.waitForChanges();\n\n      const screenshotLoading = await page.screenshot();\n      expect(screenshotLoading).toMatchImageSnapshot();\n    });\n  });\n\n  test('should render a link like a button', async () => {\n    const links = [\n      '<a href=\"#\" class=\"mg-button mg-button--primary\">a.mg-button</a>',\n      '<a href=\"#\" class=\"mg-button mg-button--primary\"><mg-icon icon=\"check-circle\"></mg-icon>a.mg-button w/ icon</a>',\n      '<a href=\"#\" class=\"mg-button mg-button--primary mg-button--icon\"><mg-icon icon=\"check-circle\"></mg-icon></a>',\n    ];\n    const html = links.map(link => `<div>${link}</div>`).join('');\n    const page = await createPage(`<link rel=\"stylesheet\" href=\"http://localhost:3333/build/mg-components.css\" />${html}`, { width: 200, height: links.length * buttonHeight });\n\n    const screenshot = await page.screenshot();\n    expect(screenshot).toMatchImageSnapshot();\n  });\n});\n"]}

package/dist/collection/components/atoms/mg-button/test/mg-button.spec.js

@@ -0,0 +1,142 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgButton } from "../mg-button";
+import { variants, buttonTypes } from "../mg-button.conf";
+const getPage = (args, content = 'Text button') => newSpecPage({
+  components: [MgButton],
+  template: () => h("mg-button", Object.assign({}, args), content),
+});
+describe('mg-button', () => {
+  test('Should render a button with an id', async () => {
+    const { root } = await getPage({ identifier: 'identifier', label: 'label' });
+    expect(root).toMatchSnapshot();
+  });
+  describe.each(variants)('Should render an %s button', variant => {
+    test.each([false, true])('isIcon %s', async (isIcon) => {
+      const { root } = await getPage({ variant, isIcon, label: 'label' });
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test.each(buttonTypes)('Should render a button, case type %s', async (type) => {
+    const { root } = await getPage({ label: 'label', type });
+    expect(root).toMatchSnapshot();
+  });
+  test.each([true, false, undefined])('Should render a button, case full-width %s', async (fullWidth) => {
+    const { root } = await getPage({ label: 'label', fullWidth });
+    expect(root).toMatchSnapshot();
+  });
+  test('Should replace classes on variant changes', async () => {
+    const page = await getPage({ variant: 'primary', label: 'label' });
+    const element = page.doc.querySelector('mg-button');
+    let classPrimary = element.shadowRoot.querySelector('.mg-button--primary');
+    expect(classPrimary).not.toBeNull();
+    // Change variant
+    element.variant = 'danger';
+    await page.waitForChanges();
+    classPrimary = element.shadowRoot.querySelector('.mg-button--primary');
+    const classDanger = element.shadowRoot.querySelector('.mg-button--danger');
+    expect(classPrimary).toBeNull();
+    expect(classDanger).not.toBeNull();
+  });
+  test.each(['', 'blu'])('Should throw error', async (variant) => {
+    expect.assertions(1);
+    try {
+      await getPage({ variant });
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-button> prop "variant" must be one of: ');
+    }
+  });
+  test.each(['', ' ', undefined])('should throw error when using prop "isIcon" without a good prop "label"', async (label) => {
+    expect.assertions(1);
+    try {
+      await getPage({ isIcon: true, label });
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.');
+    }
+  });
+  test('should throw error when using prop "isIcon" without a good prop "fullWidth"', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({ isIcon: true, label: 'batman', fullWidth: true });
+    }
+    catch (err) {
+      expect(err.message).toContain('<mg-button> prop "fullWidth" cannot be used with prop "isIcon"');
+    }
+  });
+  describe('prevent double click', () => {
+    test('should NOT disable button after click', async () => {
+      const page = await getPage({ identifier: 'identifier' });
+      const button = page.doc.querySelector('mg-button');
+      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');
+      expect(page.root).toMatchSnapshot();
+      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(spy).not.toHaveBeenCalled();
+      expect(page.root).toMatchSnapshot();
+      button.disabled = true;
+      await page.waitForChanges();
+      expect(spy).toHaveBeenCalledWith(true);
+      expect(page.root).toMatchSnapshot();
+    });
+    test('should disable button after click', async () => {
+      const page = await getPage({ disableOnClick: true });
+      const button = page.doc.querySelector('mg-button');
+      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');
+      expect(page.root).toMatchSnapshot();
+      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(spy).toHaveBeenCalledWith(true);
+      expect(page.root).toMatchSnapshot();
+      button.disabled = false;
+      await page.waitForChanges();
+      expect(spy).toHaveBeenCalledWith(false);
+      expect(page.root).toMatchSnapshot();
+    });
+    test('should not trigger disableOnClick when disabled', async () => {
+      const page = await getPage({
+        disabled: true,
+        disableOnCLick: true,
+      });
+      const button = page.doc.querySelector('mg-button');
+      const spy = jest.spyOn(page.rootInstance.disabledChange, 'emit');
+      expect(page.root).toMatchSnapshot();
+      button.dispatchEvent(new CustomEvent('click', { bubbles: true }));
+      await page.waitForChanges();
+      expect(spy).not.toHaveBeenCalled();
+      expect(page.root).toMatchSnapshot();
+    });
+    test('should not have fn when disabled', async () => {
+      const page = await getPage({
+        disabled: true,
+        onClick: () => false,
+      });
+      expect(page.root).toMatchSnapshot();
+    });
+  });
+  describe.each([{ identifier: 'identifier' }, { identifier: 'identifier', disabled: true }])('keyboard', props => {
+    test.each([' ', 'Enter', 'NumpadEnter'])('Should trigger click event on keydown', async (key) => {
+      const page = await getPage(props);
+      const button = page.doc.querySelector('mg-button');
+      const spy = jest.spyOn(button, 'dispatchEvent');
+      button.dispatchEvent(new KeyboardEvent(key === ' ' ? 'keyup' : 'keydown', { bubbles: true, key }));
+      await page.waitForChanges();
+      if (props.disabled) {
+        expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));
+      }
+      else {
+        expect(spy).lastCalledWith(expect.objectContaining({ type: 'click' }));
+      }
+    });
+    test.each(['ArrowRight', 'Tab', ' '])('Should NOT trigger click event on keydown', async (key) => {
+      const page = await getPage(props);
+      const button = page.doc.querySelector('mg-button');
+      const spy = jest.spyOn(button, 'dispatchEvent');
+      button.dispatchEvent(new KeyboardEvent('keydown', { bubbles: true, key }));
+      await page.waitForChanges();
+      expect(spy).not.lastCalledWith(expect.objectContaining({ type: 'click' }));
+    });
+  });
+});
+//# sourceMappingURL=mg-button.spec.js.map