npm - @mgdis/mg-components - Versions diffs - 5.16.0 → 5.18.0 - Mend

@mgdis/mg-components 5.16.0 → 5.18.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (475) hide show

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

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-button.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-button/mg-button.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,IAAI,EAAgB,KAAK,EAAE,MAAM,eAAe,CAAC;AACrG,OAAO,EAAE,QAAQ,EAA2B,MAAM,kBAAkB,CAAC;AACrE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAO5D,MAAM,OAAO,QAAQ;;IACnB;;kBAEc;IAEN,qBAAgB,GAAG,IAAI,CAAC;IACf,kBAAa,GAAG,qBAAqB,CAAC;IACtC,iBAAY,GAAG,oBAAoB,CAAC;IACpC,mBAAc,GAAG,uBAAuB,CAAC;IA8H1D;;;OAGG;IACK,gBAAW,GAAG,CAAC,KAAiB,EAAQ,EAAE;MAChD,IAAI,IAAI,CAAC,QAAQ;QAAE,KAAK,CAAC,eAAe,EAAE,CAAC;MAC3C,+BAA+B;WAC1B,IAAI,IAAI,CAAC,cAAc,EAAE;QAC5B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC;QACpB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;OACtB;IACH,CAAC,CAAC;IAEF;;;OAGG;IACK,kBAAa,GAAG,CAAC,KAAoB,EAAQ,EAAE;MACrD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAC;OACxB;WAAM,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,OAAO,EAAE,aAAa,EAAE,OAAO,CAAC,CAAC,QAAQ,CAAC,KAAK,CAAC,GAAG,CAAC,EAAE;QAClF,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;OACxE;IACH,CAAC,CAAC;IAEF;;;OAGG;IACK,gBAAW,GAAG,CAAC,KAAoB,EAAQ,EAAE;MACnD,IAAI,CAAC,IAAI,CAAC,QAAQ,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE;QACvC,KAAK,CAAC,cAAc,EAAE,CAAC;QACvB,IAAI,CAAC,OAAO,CAAC,aAAa,CAAC,IAAI,UAAU,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;OACxE;IACH,CAAC,CAAC;mBAnJ6B,QAAQ,CAAC,CAAC,CAAC;;;;qBAgCtB,KAAK;;;kBA8CR,KAAK;0BAMG,KAAK;mBAOX,KAAK;2BAcc,IAAI,SAAS,CAAC,CAAC,WAAW,CAAC,CAAC;;EAvGlE,eAAe,CAAC,QAAqB,EAAE,QAAsB;IAC3D,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,8CAA8C,QAAQ,CAAC,IAAI,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;KACtF;SAAM;MACL,IAAI,QAAQ,KAAK,SAAS,EAAE;QAC1B,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;OACvD;MACD,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,cAAc,QAAQ,EAAE,CAAC,CAAC;KACpD;EACH,CAAC;EAuBD,iBAAiB,CAAC,QAA+B;IAC/C,IAAI,QAAQ,IAAI,IAAI,CAAC,MAAM,EAAE;MAC3B,MAAM,IAAI,KAAK,CAAC,iEAAiE,CAAC,CAAC;KACpF;SAAM,IAAI,QAAQ,EAAE;MACnB,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAC/C;SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;KAClD;EACH,CAAC;EAaD,eAAe,CAAC,UAAgC;IAC9C,6BAA6B;IAC7B,2BAA2B;IAC3B,IAAI,CAAC,UAAU,IAAI,IAAI,CAAC,cAAc,EAAE;MACtC,IAAI,CAAC,OAAO,GAAG,KAAK,CAAC;KACtB;IACD,oBAAoB;IACpB,IAAI,CAAC,OAAO,CAAC,OAAO,GAAG,UAAU,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,IAAI,CAAC,gBAAgB,CAAC;IAEtE,cAAc;IACd,IAAI,UAAU,EAAE;MACd,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KAC9C;SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;KACjD;IAED,oBAAoB;IACpB,IAAI,CAAC,cAAc,CAAC,IAAI,CAAC,UAAU,CAAC,CAAC;EACvC,CAAC;EAoBD,cAAc,CAAC,QAA6B;IAC1C,gEAAgE;IAChE,IAAI,QAAQ,EAAE;MACZ,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAC7C;SAAM;MACL,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;KAChD;EACH,CAAC;EAiDD;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,IAAI,CAAC,MAAM,EAAE;MACf,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,iBAAiB,CAAC,CAAC;MAC5C,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,KAAK,EAAE,EAAE;QAC9D,MAAM,IAAI,KAAK,CAAC,0EAA0E,CAAC,CAAC;OAC7F;KACF;IACD,uBAAuB;IACvB,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC,OAAO,CAAC,OAAO,CAAC;IAC7C,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,QAAQ,CAAC,CAAC;EACtC,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,EAAC,IAAI,IACH,IAAI,EAAC,QAAQ,EACb,QAAQ,EAAE,CAAC,EACX,IAAI,EAAE,IAAI,CAAC,IAAI,EACf,IAAI,EAAE,IAAI,CAAC,IAAI,gBACH,IAAI,CAAC,SAAS,gBACd,IAAI,CAAC,KAAK,mBACP,IAAI,CAAC,QAAQ,KAAK,SAAS,IAAI,IAAI,CAAC,QAAQ,CAAC,QAAQ,EAAE,EACtE,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,OAAO,EAAE,IAAI,CAAC,WAAW,EACzB,SAAS,EAAE,IAAI,CAAC,aAAa;MAE7B,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE,EAAE,EAAE,EAAE,IAAI,CAAC,UAAU;QACzD,IAAI,CAAC,OAAO,IAAI,eAAS,IAAI,EAAC,QAAQ,EAAC,IAAI,SAAW;QACvD,WAAK,KAAK,EAAC,oBAAoB;UAC7B,eAAa,CACT,CACF,CACD,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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 ADDED Viewed

@@ -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

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

@@ -0,0 +1 @@

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

package/dist/collection/components/atoms/mg-card/mg-card.conf.js CHANGED Viewed

@@ -6,3 +6,4 @@ export const variants = ['info', 'warning', 'success', 'danger', 'app'];
  * List available variant styles
  */
 export const variantStyles = ['bar-left', 'fill'];
+//# sourceMappingURL=mg-card.conf.js.map

package/dist/collection/components/atoms/mg-card/mg-card.conf.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-card.conf.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.conf.ts"],"names":[],"mappings":"AAAA;;GAEG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,QAAQ,EAAE,KAAK,CAAU,CAAC;AAOjF;;GAEG;AACH,MAAM,CAAC,MAAM,aAAa,GAAG,CAAC,UAAU,EAAE,MAAM,CAAU,CAAC","sourcesContent":["/**\n * List available variants\n */\nexport const variants = ['info', 'warning', 'success', 'danger', 'app'] as const;\n\n/**\n * Variant type\n */\nexport type VariantType = (typeof variants)[number];\n\n/**\n * List available variant styles\n */\nexport const variantStyles = ['bar-left', 'fill'] as const;\n\n/**\n * VariantStyle type\n */\nexport type VariantStyleType = (typeof variantStyles)[number];\n"]}

package/dist/collection/components/atoms/mg-card/mg-card.js CHANGED Viewed

@@ -1,6 +1,6 @@
-import { h } from '@stencil/core';
-import { ClassList } from '../../../utils/components.utils';
-import { variantStyles, variants } from './mg-card.conf';
+import { h } from "@stencil/core";
+import { ClassList } from "../../../utils/components.utils";
+import { variantStyles, variants } from "./mg-card.conf";
 export class MgCard {
   constructor() {
     /*************
@@ -81,7 +81,8 @@ export class MgCard {
           "references": {
             "VariantType": {
               "location": "import",
-              "path": "./mg-card.conf"
+              "path": "./mg-card.conf",
+              "id": "src/components/atoms/mg-card/mg-card.conf.ts::VariantType"
             }
           }
         },
@@ -103,7 +104,8 @@ export class MgCard {
           "references": {
             "VariantStyleType": {
               "location": "import",
-              "path": "./mg-card.conf"
+              "path": "./mg-card.conf",
+              "id": "src/components/atoms/mg-card/mg-card.conf.ts::VariantStyleType"
             }
           }
         },
@@ -133,3 +135,4 @@ export class MgCard {
       }];
   }
 }
+//# sourceMappingURL=mg-card.js.map

package/dist/collection/components/atoms/mg-card/mg-card.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-card.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-card/mg-card.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACjE,OAAO,EAAE,SAAS,EAAE,MAAM,iCAAiC,CAAC;AAC5D,OAAO,EAAyB,aAAa,EAAoB,QAAQ,EAAE,MAAM,gBAAgB,CAAC;AAOlG,MAAM,OAAO,MAAM;;IACjB;;mBAEe;IAEE,SAAI,GAAG,SAAS,CAAC;IACjB,cAAS,GAAG,IAAI,CAAC,IAAI,CAAC;IAsCvC;;;OAGG;IACK,2BAAsB,GAAG,GAAS,EAAE;MAC1C,IAAI,IAAI,CAAC,YAAY,KAAK,SAAS;QAAE,IAAI,CAAC,YAAY,GAAG,UAAU,CAAC;IACtE,CAAC,CAAC;;;2BARoC,IAAI,SAAS,CAAC,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;;EAzBrE,eAAe,CAAC,QAA2B,EAAE,QAA4B;IACvE,IAAI,QAAQ,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,+CAA+C,CAAC,CAAC;IAC5H,IAAI,OAAO,CAAC,QAAQ,CAAC,EAAE;MACrB,IAAI,CAAC,sBAAsB,EAAE,CAAC;MAC9B,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;KAC5D;IACD,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;EACvF,CAAC;EAOD,oBAAoB,CAAC,QAAgC,EAAE,QAAiC;IACtF,IAAI,QAAQ,IAAI,CAAC,aAAa,CAAC,QAAQ,CAAC,QAAQ,CAAC;MAAE,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,yDAAyD,CAAC,CAAC;SACtI,IAAI,OAAO,CAAC,QAAQ,CAAC,IAAI,CAAC,QAAQ,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC;MAC5D,MAAM,IAAI,KAAK,CAAC,IAAI,IAAI,CAAC,IAAI,6CAA6C,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,kBAAkB,CAAC,CAAC;IACxH,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,GAAG,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;IAClF,IAAI,OAAO,CAAC,QAAQ,CAAC;MAAE,IAAI,CAAC,eAAe,CAAC,MAAM,CAAC,GAAG,IAAI,CAAC,SAAS,KAAK,QAAQ,EAAE,CAAC,CAAC;EACvF,CAAC;EAeD;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,eAAe,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACnC,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,YAAY,CAAC,CAAC;EAC/C,CAAC;EAED;;;KAGG;EACH,MAAM;;IACJ,OAAO,CACL,WAAK,KAAK,EAAE,IAAI,CAAC,eAAe,CAAC,IAAI,EAAE;MACpC,CAAA,MAAA,IAAI,CAAC,YAAY,0CAAE,UAAU,CAAC,MAAM,CAAC,KAAI,YAAM,KAAK,EAAC,cAAc,GAAQ;MAC5E,eAAa,CACT,CACP,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop, State, Watch } from '@stencil/core';\nimport { ClassList } from '../../../utils/components.utils';\nimport { type VariantStyleType, variantStyles, type VariantType, variants } from './mg-card.conf';\n\n@Component({\n tag: 'mg-card',\n styleUrl: 'mg-card.scss',\n shadow: true,\n})\nexport class MgCard {\n /*************\n * Private *\n *************/\n\n private readonly name = 'mg-card';\n private readonly baseClass = this.name;\n\n /*************\n * Decorators *\n *************/\n\n /**\n * Define variant prop\n */\n @Prop() variant: undefined | VariantType;\n @Watch('variant')\n validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']) {\n if (newValue && !variants.includes(newValue)) throw new Error(`<${this.name}> prop \"variant\" must match VariantType type.`);\n if (Boolean(newValue)) {\n this.setDefaultVariantStyle();\n this.classCollection.add(`${this.baseClass}--${newValue}`);\n }\n if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n }\n\n /**\n * Define variantStyle prop\n */\n @Prop({ mutable: true }) variantStyle: undefined | VariantStyleType;\n @Watch('variantStyle')\n validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']) {\n if (newValue && !variantStyles.includes(newValue)) throw new Error(`<${this.name}> prop \"variantStyle\" must match VariantStyleType type.`);\n else if (Boolean(newValue) && !variants.includes(this.variant))\n throw new Error(`<${this.name}> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.`);\n if (Boolean(newValue)) this.classCollection.add(`${this.baseClass}--${newValue}`);\n if (Boolean(oldValue)) this.classCollection.delete(`${this.baseClass}--${oldValue}`);\n }\n\n /**\n * Component classes\n */\n @State() classCollection: ClassList = new ClassList([this.baseClass]);\n\n /**\n * Methode to set default varianStyle props\n * needeed has stencil doesn't know that props is mutated when updated in prop watcher\n */\n private setDefaultVariantStyle = (): void => {\n if (this.variantStyle === undefined) this.variantStyle = 'bar-left';\n };\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateVariant(this.variant);\n this.validateVariantStyle(this.variantStyle);\n }\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div class={this.classCollection.join()}>\n {this.variantStyle?.startsWith('bar-') && <span class=\"mg-card__bar\"></span>}\n <slot></slot>\n </div>\n );\n }\n}\n"]}

package/dist/collection/components/atoms/mg-card/test/mg-card.e2e.js ADDED Viewed

@@ -0,0 +1,36 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+import { renderAttributes } from "../../../../utils/e2e.test.utils";
+import { variantStyles, variants } from "../mg-card.conf";
+const style = `<style>.margin-y { margin: 1rem 0; } .d-block { display: block; } [variant='app'] { --mg-color-app-h: 250 }</style>`;
+describe('mg-card', () => {
+  test('Should render', async () => {
+    const props = [undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle })))];
+    const html = [
+      'short text',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',
+    ]
+      .map(slot => props.map(prop => `<mg-card class="margin-y d-block" ${renderAttributes(prop)}>${slot}</mg-card>`).join(''))
+      .join('');
+    const page = await createPage(html + style);
+    const element = await page.find('mg-card');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+  test('Should render with custom card', async () => {
+    const html = [
+      'short text',
+      'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',
+      '<mg-card>Content whith child card.</mg-card>',
+      '<mg-card class="custom-card--info">Content whith child info card.</mg-card>',
+    ]
+      .map(slot => `<mg-card class="${slot.includes('</mg-card>') ? 'custom-card--danger' : ''} d-block margin-y">${slot}</mg-card>`)
+      .join('');
+    const page = await createPage(html + '<style>.custom-card--danger {--mg-card-background: hsl(var(--color-danger));} .custom-card--info {--mg-card-background: hsl(var(--color-info));}</style>' + style);
+    const element = await page.find('mg-card');
+    expect(element).toHaveClass('hydrated');
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-card.e2e.js.map

package/dist/collection/components/atoms/mg-card/test/mg-card.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-card.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-card/test/mg-card.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AACtE,OAAO,EAAE,gBAAgB,EAAE,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,iBAAiB,CAAC;AAE1D,MAAM,KAAK,GAAG,qHAAqH,CAAC;AAEpI,QAAQ,CAAC,SAAS,EAAE,GAAG,EAAE;EACvB,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,KAAK,GAAG,CAAC,SAAS,EAAE,GAAG,QAAQ,CAAC,OAAO,CAAC,OAAO,CAAC,EAAE,CAAC,aAAa,CAAC,GAAG,CAAC,YAAY,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,YAAY,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;IAC1H,MAAM,IAAI,GAAG;MACX,YAAY;MACZ,+bAA+b;KAChc;OACE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,KAAK,CAAC,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,qCAAqC,gBAAgB,CAAC,IAAI,CAAC,IAAI,IAAI,YAAY,CAAC,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;OACxH,IAAI,CAAC,EAAE,CAAC,CAAC;IAEZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,GAAG,KAAK,CAAC,CAAC;IAE5C,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,gCAAgC,EAAE,KAAK,IAAI,EAAE;IAChD,MAAM,IAAI,GAAG;MACX,YAAY;MACZ,+bAA+b;MAC/b,8CAA8C;MAC9C,6EAA6E;KAC9E;OACE,GAAG,CAAC,IAAI,CAAC,EAAE,CAAC,mBAAmB,IAAI,CAAC,QAAQ,CAAC,YAAY,CAAC,CAAC,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC,EAAE,sBAAsB,IAAI,YAAY,CAAC;OAC9H,IAAI,CAAC,EAAE,CAAC,CAAC;IACZ,MAAM,IAAI,GAAG,MAAM,UAAU,CAC3B,IAAI,GAAG,0JAA0J,GAAG,KAAK,CAC1K,CAAC;IAEF,MAAM,OAAO,GAAG,MAAM,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IAC3C,MAAM,CAAC,OAAO,CAAC,CAAC,WAAW,CAAC,UAAU,CAAC,CAAC;IAExC,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\nimport { renderAttributes } from '../../../../utils/e2e.test.utils';\nimport { variantStyles, variants } from '../mg-card.conf';\n\nconst style = `<style>.margin-y { margin: 1rem 0; } .d-block { display: block; } [variant='app'] { --mg-color-app-h: 250 }</style>`;\n\ndescribe('mg-card', () => {\n test('Should render', async () => {\n const props = [undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle })))];\n const html = [\n 'short text',\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',\n ]\n .map(slot => props.map(prop => `<mg-card class=\"margin-y d-block\" ${renderAttributes(prop)}>${slot}</mg-card>`).join(''))\n .join('');\n\n const page = await createPage(html + style);\n\n const element = await page.find('mg-card');\n expect(element).toHaveClass('hydrated');\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n\n test('Should render with custom card', async () => {\n const html = [\n 'short text',\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',\n '<mg-card>Content whith child card.</mg-card>',\n '<mg-card class=\"custom-card--info\">Content whith child info card.</mg-card>',\n ]\n .map(slot => `<mg-card class=\"${slot.includes('</mg-card>') ? 'custom-card--danger' : ''} d-block margin-y\">${slot}</mg-card>`)\n .join('');\n const page = await createPage(\n html + '<style>.custom-card--danger {--mg-card-background: hsl(var(--color-danger));} .custom-card--info {--mg-card-background: hsl(var(--color-info));}</style>' + style,\n );\n\n const element = await page.find('mg-card');\n expect(element).toHaveClass('hydrated');\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n});\n"]}

package/dist/collection/components/atoms/mg-card/test/mg-card.spec.js ADDED Viewed

@@ -0,0 +1,43 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgCard } from "../mg-card";
+import { variantStyles, variants } from "../mg-card.conf";
+const getPage = (props, slot) => newSpecPage({
+  components: [MgCard],
+  template: () => h("mg-card", Object.assign({}, props), slot),
+});
+describe('mg-card', () => {
+  test.each([undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))), ...variants.map(variant => ({ variant }))])('render', async (props) => {
+    const { root } = await getPage(props, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.');
+    expect(root).toMatchSnapshot();
+  });
+  test.each([
+    { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[1], variantStyle: variantStyles[0] } },
+    { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[0], variantStyle: variantStyles[1] } },
+  ])('should update classCollection', async ({ oldValue, newValue }) => {
+    const page = await getPage(oldValue, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.');
+    expect(page.root).toMatchSnapshot();
+    const mgCard = page.doc.querySelector('mg-card');
+    Object.keys(newValue).forEach(key => {
+      mgCard[key] = newValue[key];
+    });
+    await page.waitForChanges();
+    expect(page.root).toMatchSnapshot();
+  });
+  describe('errors', () => {
+    test.each([
+      { props: { variantStyle: 'batman' }, error: `<mg-card> prop "variantStyle" must match VariantStyleType type.` },
+      ...variantStyles.map(variantStyle => ({ props: { variantStyle }, error: `<mg-card> prop "variantStyle" must be paired with ${JSON.stringify(variants)} "variant" prop.` })),
+      { props: { variant: 'batman' }, error: `<mg-card> prop "variant" must match VariantType type.` },
+    ])('should throw error %s', async ({ props, error }) => {
+      expect.assertions(1);
+      try {
+        await getPage(props, 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.');
+      }
+      catch (err) {
+        expect(err.message).toMatch(error);
+      }
+    });
+  });
+});
+//# sourceMappingURL=mg-card.spec.js.map

package/dist/collection/components/atoms/mg-card/test/mg-card.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-card.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-card/test/mg-card.spec.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgCard } from '../mg-card';\nimport { variantStyles, variants } from '../mg-card.conf';\n\nconst getPage = (props, slot) =>\n newSpecPage({\n components: [MgCard],\n template: () => <mg-card {...props}>{slot}</mg-card>,\n });\n\ndescribe('mg-card', () => {\n test.each([undefined, ...variants.flatMap(variant => variantStyles.map(variantStyle => ({ variant, variantStyle }))), ...variants.map(variant => ({ variant }))])(\n 'render',\n async props => {\n const { root } = await getPage(\n props,\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',\n );\n expect(root).toMatchSnapshot();\n },\n );\n\n test.each([\n { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[1], variantStyle: variantStyles[0] } },\n { oldValue: { variant: variants[0], variantStyle: variantStyles[0] }, newValue: { variant: variants[0], variantStyle: variantStyles[1] } },\n ])('should update classCollection', async ({ oldValue, newValue }) => {\n const page = await getPage(\n oldValue,\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',\n );\n expect(page.root).toMatchSnapshot();\n\n const mgCard = page.doc.querySelector('mg-card');\n Object.keys(newValue).forEach(key => {\n mgCard[key] = newValue[key];\n });\n\n await page.waitForChanges();\n\n expect(page.root).toMatchSnapshot();\n });\n\n describe('errors', () => {\n test.each([\n { props: { variantStyle: 'batman' }, error: `<mg-card> prop \"variantStyle\" must match VariantStyleType type.` },\n ...variantStyles.map(variantStyle => ({ props: { variantStyle }, error: `<mg-card> prop \"variantStyle\" must be paired with ${JSON.stringify(variants)} \"variant\" prop.` })),\n { props: { variant: 'batman' }, error: `<mg-card> prop \"variant\" must match VariantType type.` },\n ])('should throw error %s', async ({ props, error }) => {\n expect.assertions(1);\n try {\n await getPage(\n props,\n 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. 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.',\n );\n } catch (err) {\n expect(err.message).toMatch(error);\n }\n });\n });\n});\n"]}

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js CHANGED Viewed

@@ -1,5 +1,5 @@
-import { h } from '@stencil/core';
-import { initLocales } from '../../../locales';
+import { h } from "@stencil/core";
+import { initLocales } from "../../../locales";
 export class MgCharacterLeft {
   constructor() {
     this.identifier = undefined;
@@ -104,3 +104,4 @@ export class MgCharacterLeft {
       }];
   }
 }
+//# sourceMappingURL=mg-character-left.js.map

package/dist/collection/components/atoms/mg-character-left/mg-character-left.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-character-left.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-character-left/mg-character-left.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,OAAO,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAE,MAAM,eAAe,CAAC;AACnE,OAAO,EAAE,WAAW,EAAE,MAAM,kBAAkB,CAAC;AAO/C,MAAM,OAAO,eAAe;;;sBAyBL,EAAE;;;EAOvB,iBAAiB,CAAC,QAAgB;IAChC,IAAI,OAAO,QAAQ,KAAK,QAAQ,EAAE;MAChC,MAAM,IAAI,KAAK,CAAC,mDAAmD,CAAC,CAAC;KACtE;EACH,CAAC;EAED;;iBAEe;EAEf;;KAEG;EACH,iBAAiB;IACf,IAAI,CAAC,iBAAiB,CAAC,IAAI,CAAC,SAAS,CAAC,CAAC;IACvC,IAAI,CAAC,QAAQ,GAAG,WAAW,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,QAAQ,CAAC;EACrD,CAAC;EAED;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,YAAM,EAAE,EAAE,IAAI,CAAC,UAAU,eAAY,QAAQ;MAC3C,2BAAkB,MAAM;QACrB,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM;;QAAG,IAAI,CAAC,SAAS,CACpD;MACP,YAAM,KAAK,EAAC,SAAS,IAAE,IAAI,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,IAAI,CAAC,SAAS,GAAG,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,CAAQ,CAChH,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Element, h, Prop, Watch } from '@stencil/core';\nimport { initLocales } from '../../../locales';\n\n@Component({\n tag: 'mg-character-left',\n styleUrl: 'mg-character-left.scss',\n scoped: true,\n})\nexport class MgCharacterLeft {\n /************\n * Internal *\n ************/\n\n private messages;\n\n /**************\n * Decorators *\n **************/\n\n /**\n * Get component DOM element\n */\n @Element() element: HTMLMgCharacterLeftElement;\n\n /**\n * Sets an `id` attribute.\n * Needed by the input for accessibility `aria-decribedby`.\n */\n @Prop() identifier: string;\n\n /**\n * Sets the characters to count\n */\n @Prop() characters = '';\n\n /**\n * Add maximum length\n */\n @Prop() maxlength!: number;\n @Watch('maxlength')\n validateMaxlength(newValue: number): void {\n if (typeof newValue !== 'number') {\n throw new Error('<mg-character-left> prop \"maxlength\" is required.');\n }\n }\n\n /*************\n * Lifecycle *\n *************/\n\n /**\n * Check if props are well configured on init\n */\n componentWillLoad(): void {\n this.validateMaxlength(this.maxlength);\n this.messages = initLocales(this.element).messages;\n }\n\n /**\n * Render component\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <span id={this.identifier} aria-live=\"polite\">\n <span aria-hidden=\"true\">\n {this.maxlength - this.characters.length}/{this.maxlength}\n </span>\n <span class=\"sr-only\">{this.messages.nbCharLeft.replace('{counter}', this.maxlength - this.characters.length)}</span>\n </span>\n );\n }\n}\n"]}

package/dist/collection/components/atoms/mg-character-left/test/mg-character-left.e2e.js ADDED Viewed

@@ -0,0 +1,15 @@
+import { createPage } from "../../../../utils/stencil.e2e.test.utils";
+describe('mg-character-left', () => {
+  test('Should render', async () => {
+    const components = [
+      `<mg-character-left characters="" maxlength="100"></mg-character-left>`,
+      `<mg-character-left characters="blu" maxlength="200"></mg-character-left>`,
+      `<mg-character-left characters="blu blu blu blu" maxlength="1000"></mg-character-left>`,
+    ];
+    const html = components.join('');
+    const page = await createPage(html, { width: 60, height: 60 });
+    const screenshot = await page.screenshot();
+    expect(screenshot).toMatchImageSnapshot();
+  });
+});
+//# sourceMappingURL=mg-character-left.e2e.js.map

package/dist/collection/components/atoms/mg-character-left/test/mg-character-left.e2e.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-character-left.e2e.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-character-left/test/mg-character-left.e2e.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,0CAA0C,CAAC;AAEtE,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,IAAI,CAAC,eAAe,EAAE,KAAK,IAAI,EAAE;IAC/B,MAAM,UAAU,GAAG;MACjB,uEAAuE;MACvE,0EAA0E;MAC1E,uFAAuF;KACxF,CAAC;IACF,MAAM,IAAI,GAAG,UAAU,CAAC,IAAI,CAAC,EAAE,CAAC,CAAC;IACjC,MAAM,IAAI,GAAG,MAAM,UAAU,CAAC,IAAI,EAAE,EAAE,KAAK,EAAE,EAAE,EAAE,MAAM,EAAE,EAAE,EAAE,CAAC,CAAC;IAE/D,MAAM,UAAU,GAAG,MAAM,IAAI,CAAC,UAAU,EAAE,CAAC;IAC3C,MAAM,CAAC,UAAU,CAAC,CAAC,oBAAoB,EAAE,CAAC;EAC5C,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { createPage } from '../../../../utils/stencil.e2e.test.utils';\n\ndescribe('mg-character-left', () => {\n test('Should render', async () => {\n const components = [\n `<mg-character-left characters=\"\" maxlength=\"100\"></mg-character-left>`,\n `<mg-character-left characters=\"blu\" maxlength=\"200\"></mg-character-left>`,\n `<mg-character-left characters=\"blu blu blu blu\" maxlength=\"1000\"></mg-character-left>`,\n ];\n const html = components.join('');\n const page = await createPage(html, { width: 60, height: 60 });\n\n const screenshot = await page.screenshot();\n expect(screenshot).toMatchImageSnapshot();\n });\n});\n"]}

package/dist/collection/components/atoms/mg-character-left/test/mg-character-left.spec.js ADDED Viewed

@@ -0,0 +1,42 @@
+import { h } from "@stencil/core";
+import { newSpecPage } from "@stencil/core/testing";
+import { MgCharacterLeft } from "../mg-character-left";
+import messages from "../../../../locales/en/messages.json";
+const getPage = args => newSpecPage({
+  components: [MgCharacterLeft],
+  template: () => h("mg-character-left", Object.assign({}, args)),
+});
+describe('mg-character-left', () => {
+  describe.each(['blu', 'blublu', 'blu blu blu blu blu'])('Should render nb char left for %s', characters => {
+    test.each([123, 234, 200])('renders', async (maxlength) => {
+      const { root } = await getPage({ characters, maxlength });
+      expect(root).toMatchSnapshot();
+    });
+  });
+  test('Should throw error without maxlength', async () => {
+    expect.assertions(1);
+    try {
+      await getPage({});
+    }
+    catch (err) {
+      expect(err.message).toMatch('<mg-character-left> prop "maxlength" is required.');
+    }
+  });
+  test('Should update character left counter', async () => {
+    const maxlength = 400;
+    const characters = 'blu blu';
+    const page = await getPage({ characters: '', maxlength });
+    const element = page.doc.querySelector('mg-character-left');
+    expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength}`));
+    element.setAttribute('characters', characters);
+    await page.waitForChanges();
+    expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength - characters.length}`));
+  });
+  test.each(['fr', 'xx'])('Should render component with locale: %s', async (lang) => {
+    const maxlength = 400;
+    const characters = 'blu blu';
+    const { root } = await getPage({ characters, maxlength, lang });
+    expect(root).toMatchSnapshot();
+  });
+});
+//# sourceMappingURL=mg-character-left.spec.js.map

package/dist/collection/components/atoms/mg-character-left/test/mg-character-left.spec.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-character-left.spec.js","sourceRoot":"","sources":["../../../../../src/components/atoms/mg-character-left/test/mg-character-left.spec.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAClC,OAAO,EAAE,WAAW,EAAE,MAAM,uBAAuB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,QAAQ,MAAM,sCAAsC,CAAC;AAE5D,MAAM,OAAO,GAAG,IAAI,CAAC,EAAE,CACrB,WAAW,CAAC;EACV,UAAU,EAAE,CAAC,eAAe,CAAC;EAC7B,QAAQ,EAAE,GAAG,EAAE,CAAC,yCAAuB,IAAI,EAAsB;CAClE,CAAC,CAAC;AAEL,QAAQ,CAAC,mBAAmB,EAAE,GAAG,EAAE;EACjC,QAAQ,CAAC,IAAI,CAAC,CAAC,KAAK,EAAE,QAAQ,EAAE,qBAAqB,CAAC,CAAC,CAAC,mCAAmC,EAAE,UAAU,CAAC,EAAE;IACxG,IAAI,CAAC,IAAI,CAAC,CAAC,GAAG,EAAE,GAAG,EAAE,GAAG,CAAC,CAAC,CAAC,SAAS,EAAE,KAAK,EAAC,SAAS,EAAC,EAAE;MACtD,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC,CAAC;MAC1D,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;IACjC,CAAC,CAAC,CAAC;EACL,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,CAAC,UAAU,CAAC,CAAC,CAAC,CAAC;IACrB,IAAI;MACF,MAAM,OAAO,CAAC,EAAE,CAAC,CAAC;KACnB;IAAC,OAAO,GAAG,EAAE;MACZ,MAAM,CAAC,GAAG,CAAC,OAAO,CAAC,CAAC,OAAO,CAAC,mDAAmD,CAAC,CAAC;KAClF;EACH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,sCAAsC,EAAE,KAAK,IAAI,EAAE;IACtD,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,UAAU,GAAG,SAAS,CAAC;IAC7B,MAAM,IAAI,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,EAAE,EAAE,SAAS,EAAE,CAAC,CAAC;IAE1D,MAAM,OAAO,GAAG,IAAI,CAAC,GAAG,CAAC,aAAa,CAAC,mBAAmB,CAAC,CAAC;IAC5D,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,SAAS,EAAE,CAAC,CAAC,CAAC;IAEhG,OAAO,CAAC,YAAY,CAAC,YAAY,EAAE,UAAU,CAAC,CAAC;IAC/C,MAAM,IAAI,CAAC,cAAc,EAAE,CAAC;IAC5B,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,CAAC,SAAS,CAAC,QAAQ,CAAC,UAAU,CAAC,OAAO,CAAC,WAAW,EAAE,GAAG,SAAS,GAAG,UAAU,CAAC,MAAM,EAAE,CAAC,CAAC,CAAC;EACtH,CAAC,CAAC,CAAC;EAEH,IAAI,CAAC,IAAI,CAAC,CAAC,IAAI,EAAE,IAAI,CAAC,CAAC,CAAC,yCAAyC,EAAE,KAAK,EAAC,IAAI,EAAC,EAAE;IAC9E,MAAM,SAAS,GAAG,GAAG,CAAC;IACtB,MAAM,UAAU,GAAG,SAAS,CAAC;IAC7B,MAAM,EAAE,IAAI,EAAE,GAAG,MAAM,OAAO,CAAC,EAAE,UAAU,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,CAAC;IAChE,MAAM,CAAC,IAAI,CAAC,CAAC,eAAe,EAAE,CAAC;EACjC,CAAC,CAAC,CAAC;AACL,CAAC,CAAC,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport { newSpecPage } from '@stencil/core/testing';\nimport { MgCharacterLeft } from '../mg-character-left';\nimport messages from '../../../../locales/en/messages.json';\n\nconst getPage = args =>\n newSpecPage({\n components: [MgCharacterLeft],\n template: () => <mg-character-left {...args}></mg-character-left>,\n });\n\ndescribe('mg-character-left', () => {\n describe.each(['blu', 'blublu', 'blu blu blu blu blu'])('Should render nb char left for %s', characters => {\n test.each([123, 234, 200])('renders', async maxlength => {\n const { root } = await getPage({ characters, maxlength });\n expect(root).toMatchSnapshot();\n });\n });\n\n test('Should throw error without maxlength', async () => {\n expect.assertions(1);\n try {\n await getPage({});\n } catch (err) {\n expect(err.message).toMatch('<mg-character-left> prop \"maxlength\" is required.');\n }\n });\n\n test('Should update character left counter', async () => {\n const maxlength = 400;\n const characters = 'blu blu';\n const page = await getPage({ characters: '', maxlength });\n\n const element = page.doc.querySelector('mg-character-left');\n expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength}`));\n\n element.setAttribute('characters', characters);\n await page.waitForChanges();\n expect(element.textContent).toContain(messages.nbCharLeft.replace('{counter}', `${maxlength - characters.length}`));\n });\n\n test.each(['fr', 'xx'])('Should render component with locale: %s', async lang => {\n const maxlength = 400;\n const characters = 'blu blu';\n const { root } = await getPage({ characters, maxlength, lang });\n expect(root).toMatchSnapshot();\n });\n});\n"]}

package/dist/collection/components/atoms/mg-divider/mg-divider.js CHANGED Viewed

@@ -1,4 +1,4 @@
-import { h } from '@stencil/core';
+import { h } from "@stencil/core";
 export class MgDivider {
   constructor() {
     this.size = 'regular';
@@ -48,3 +48,4 @@ export class MgDivider {
     };
   }
 }
+//# sourceMappingURL=mg-divider.js.map

package/dist/collection/components/atoms/mg-divider/mg-divider.js.map ADDED Viewed

@@ -0,0 +1 @@

+ {"version":3,"file":"mg-divider.js","sourceRoot":"","sources":["../../../../src/components/atoms/mg-divider/mg-divider.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,CAAC,EAAE,IAAI,EAAE,MAAM,eAAe,CAAC;AAOnD,MAAM,OAAO,SAAS;;gBAQe,SAAS;;EAE5C;;;KAGG;EACH,MAAM;IACJ,OAAO,CACL,WACE,KAAK,EAAE;QACL,YAAY,EAAE,IAAI;QAClB,kBAAkB,EAAE,IAAI,CAAC,IAAI,KAAK,MAAM;OACzC,GACI,CACR,CAAC;EACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, h, Prop } from '@stencil/core';\n\n@Component({\n tag: 'mg-divider',\n styleUrl: 'mg-divider.scss',\n shadow: true,\n})\nexport class MgDivider {\n /**************\n * Decorators *\n **************/\n\n /**\n * Define component size\n */\n @Prop() size: 'regular' | 'full' = 'regular';\n\n /**\n * Render\n * @returns HTML Element\n */\n render(): HTMLElement {\n return (\n <div\n class={{\n 'mg-divider': true,\n 'mg-divider--full': this.size === 'full',\n }}\n ></div>\n );\n }\n}\n"]}