@mgdis/mg-components 3.3.0 → 4.1.0

package/dist/collection/components/molecules/mg-message/{mg-message.stories.js → doc/mg-message.stories.js}

@@ -1,5 +1,6 @@
 import { h } from '@stencil/core';
-import { variants } from './mg-message.conf';
+import { filterArgs } from '../../../../../.storybook/utils';
+import { variants } from '../mg-message.conf';
 export default {
   component: 'mg-message',
   title: 'Molecules/mg-message',
@@ -15,22 +16,15 @@ export default {
   parameters: { actions: { handles: ['component-show', 'component-hide'] } },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const slotContent = args.slotContent;
-  delete args.slotContent;
-  const slotActions = args.slotActions;
-  delete args.slotActions;
-  const closeButton = args.closeButton;
-  delete args.closeButton;
-  // return element
-  return (h("mg-message", Object.assign({}, args, { "close-button": closeButton }),
-    slotContent && h("span", { innerHTML: slotContent }),
-    slotActions && h("span", { slot: "actions", innerHTML: slotActions })));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-message", Object.assign({}, filterArgs(args, { variant: variants[0] })),
+  args.slotContent && h("span", { innerHTML: args.slotContent }),
+  args.slotActions && h("span", { slot: "actions", innerHTML: args.slotActions })));
 export const MgMessage = Template.bind({});
 MgMessage.args = {
   slotContent: `<p>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.</p>`,

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

@@ -1,12 +1,15 @@
 import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
 import { variants } from './mg-message.conf';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgMessage {
   constructor() {
     /************
      * Internal *
      ************/
+    // classes
+    this.classHide = 'mg-message--hide';
+    // IDs
     this.closeButtonId = '';
     // Stored timer setted when hide action is run from setTimeOut
     this.storedTimer = null;
@@ -82,10 +85,12 @@ export class MgMessage {
     if (!variants.includes(newValue)) {
       throw new Error(`<mg-message> prop "variant" must be one of : ${variants.join(', ')}`);
     }
-    if (oldValue !== undefined) {
-      this.classList.delete(`mg-message--${oldValue}`);
+    else {
+      if (oldValue !== undefined) {
+        this.classList.delete(`mg-message--${oldValue}`);
+      }
+      this.classList.add(`mg-message--${newValue}`);
     }
-    this.classList.add(`mg-message--${this.variant}`);
   }
   validateCloseButton(newValue) {
     if (newValue && this.hasActions) {
@@ -96,11 +101,11 @@ export class MgMessage {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add('mg-message--hide');
+      this.classList.add(this.classHide);
     }
     else {
       this.componentShow.emit();
-      this.classList.delete('mg-message--hide');
+      this.classList.delete(this.classHide);
     }
     this.hideWithDelay();
   }
@@ -111,6 +116,9 @@ export class MgMessage {
    * Check if component props are well configured on init
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validateVariant(this.variant);
     // Check if close button is an can be activated
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
@@ -138,7 +146,7 @@ export class MgMessage {
         this.hasActions && (h("span", { class: "mg-message__content-actions-slot" },
           h("slot", { name: "actions" })))),
       this.closeButton && (h("span", { class: "mg-message__close-button" },
-        h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.message.closeButton, onClick: this.handleClose },
+        h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.message.closeButton, onClick: this.handleClose },
           h("mg-icon", { icon: "cross" }))))));
   }
   static get is() { return "mg-message"; }

package/dist/collection/components/molecules/mg-modal/doc/mg-modal.stories.js

@@ -0,0 +1,43 @@
+/* eslint-disable react/jsx-no-bind */
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-modal',
+  title: 'Molecules/mg-modal',
+  parameters: { actions: { handles: ['component-show', 'component-hide'] } },
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("div", null,
+  h("mg-button", { controls: "identifier", haspopup: "dialog", onClick: () => {
+      const mgModal = document.querySelector('mg-modal');
+      const isHide = mgModal.hide === true;
+      if (isHide) {
+        mgModal.removeAttribute('hide'); // storybook first render is an attribute then we use property
+        mgModal.hide = false;
+      }
+      else {
+        mgModal.hide = true;
+      }
+    } }, "Open modal"),
+  h("mg-modal", Object.assign({}, filterArgs(args)),
+    args.slotContent && h("div", { slot: "content", innerHTML: args.slotContent }),
+    args.slotActions && h("div", { slot: "actions", innerHTML: args.slotActions }))));
+export const MgModal = Template.bind({});
+MgModal.args = {
+  slotContent: `<p>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.</p>`,
+  slotActions: ``,
+  modalTitle: 'Modal title',
+  identifier: 'identifier',
+  closeButton: false,
+  hide: true,
+};
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true });
+export const WithActions = Template.bind({});
+WithActions.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true, slotActions: `<div class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>` });

package/dist/collection/components/molecules/mg-modal/mg-modal.css

@@ -9,13 +9,11 @@
   left: 0;
   z-index: 1000;
   padding: 2rem 0;
-  background-color: hsla(var(--color-light), 70%);
+  background-color: hsla(var(--color-light), 85%);
 }
 .mg-modal__dialog {
   display: flex;
   flex-direction: column;
-  flex: none;
-  /* IE FIX */
   align-self: center;
   row-gap: 3rem;
   padding: 1.5rem 2.5rem;
@@ -37,16 +35,16 @@
   font-size: var(--mg-modal-title-font-size);
   font-weight: 600;
 }
-.mg-modal__content {
-  overflow-y: auto;
-}
 .mg-modal__close-button {
   float: right;
   height: var(--mg-modal-title-font-size);
   margin-top: calc((var(--default-size) - var(--mg-modal-title-font-size) * var(--line-height)) / 2 * -1);
   margin-right: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2 * -1);
 }
-.mg-modal .mg-modal__content ::slotted(*) {
+.mg-modal .mg-modal__content {
+  overflow-y: auto;
+}
+.mg-modal .mg-modal__content::slotted(*) {
   font-size: var(--mg-modal-content-font-size);
 }
 .mg-modal.mg-modal--hide {

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

@@ -1,11 +1,14 @@
 import { Component, h, Prop, State, Watch, Element, Event, Listen } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgModal {
   constructor() {
     /************
      * Internal *
      ************/
+    // Classes
+    this.classHide = 'mg-modal--hide';
+    // IDs
     this.closeButtonId = '';
     this.titleId = '';
     /**
@@ -48,11 +51,11 @@ export class MgModal {
   validateHide(newValue) {
     if (newValue) {
       this.componentHide.emit();
-      this.classList.add('mg-modal--hide');
+      this.classList.add(this.classHide);
     }
     else {
       this.componentShow.emit();
-      this.classList.delete('mg-modal--hide');
+      this.classList.delete(this.classHide);
     }
   }
   /**
@@ -76,6 +79,9 @@ export class MgModal {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
     this.hasContent = this.element.querySelector('[slot="content"]') !== null;
     if (this.closeButton) {
@@ -94,7 +100,7 @@ export class MgModal {
       h("article", { class: "mg-modal__dialog" },
         h("header", { class: "mg-modal__header" },
           this.closeButton && (h("span", { class: "mg-modal__close-button" },
-            h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.modal.closeButton, onClick: this.handleClose },
+            h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.modal.closeButton, onClick: this.handleClose },
               h("mg-icon", { icon: "cross" })))),
           h("h1", { class: "mg-modal__title", id: this.titleId }, this.modalTitle)),
         this.hasContent && (h("article", { class: "mg-modal__content" },

package/dist/collection/components/molecules/mg-pagination/doc/mg-pagination.stories.js

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-pagination',
+  title: 'Molecules/mg-pagination',
+  parameters: { actions: { handles: ['current-page-change'] } },
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-pagination", Object.assign({}, filterArgs(args)));
+export const MgPagination = Template.bind({});
+MgPagination.args = {
+  totalPages: 5,
+  currentPage: 1,
+};

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

@@ -1,7 +1,7 @@
-import { Component, h, Prop, Watch, Event } from '@stencil/core';
+import { Component, Element, h, Prop, Watch, Event } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { NavigationAction } from './mg-pagination.conf';
-import { messages } from './../../../locales';
+import { initLocales } from './../../../locales';
 /**
  * Range generator
  *
@@ -25,19 +25,11 @@ import { messages } from './../../../locales';
 const range = (start, end, step = 1) => Array.from(Array(Math.ceil((end + 1 - start) / step)).keys()).map(x => start + x * step);
 export class MgPagination {
   constructor() {
-    /**************
-     * Decorators *
-     **************/
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
      */
     this.identifier = createID('mg-pagination');
-    /**
-     * Panignation label. Is a short description.
-     * Customize default value can be usefull to improve accessibility
-     */
-    this.label = 'pagination';
     /**
      * Component total pages
      */
@@ -101,8 +93,15 @@ export class MgPagination {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
+    // Set default label
+    if (this.label === undefined || this.label === '') {
+      this.label = this.messages.pagination.label;
+    }
   }
   /**
    * Render
@@ -110,24 +109,24 @@ export class MgPagination {
    * @returns {HTMLElement} HTML Element
    */
   render() {
-    const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: messages.pagination[`${action}Page`], 
+    const navigationActionButton = (disabled, action) => (h("mg-button", { identifier: `${this.identifier}-button-${action}`, class: "mg-pagination__button", label: this.messages.pagination[`${action}Page`], 
       // eslint-disable-next-line react/jsx-no-bind
       onClick: () => this.handleGoToPage(action), disabled: disabled, variant: "flat" },
       action === NavigationAction.PREVIOUS && h("mg-icon", { icon: "chevron-left" }),
-      messages.general[action],
+      this.messages.general[action],
       action === NavigationAction.NEXT && h("mg-icon", { icon: "chevron-right" })));
     return (h("nav", { "aria-label": this.label, id: this.identifier, class: "mg-pagination__nav" },
       navigationActionButton(this.currentPage <= 1, NavigationAction.PREVIOUS),
-      h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }),
+      h("mg-input-select", { identifier: `${this.identifier}-select`, items: range(1, this.totalPages).map(page => page.toString()), label: this.messages.pagination.selectPage, "label-hide": true, "on-value-change": this.handleSelect, value: this.currentPage.toString(), "placeholder-hide": true }),
       h("span", { class: "sr-only" },
-        messages.pagination.page,
+        this.messages.pagination.page,
         " ",
         this.currentPage),
       h("span", null,
         "/ ",
         this.totalPages,
         " ",
-        this.totalPages > 1 ? messages.pagination.pages : messages.pagination.page),
+        this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page),
       navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
@@ -159,7 +158,7 @@ export class MgPagination {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -172,8 +171,7 @@ export class MgPagination {
         "text": "Panignation label. Is a short description.\nCustomize default value can be usefull to improve accessibility"
       },
       "attribute": "label",
-      "reflect": false,
-      "defaultValue": "'pagination'"
+      "reflect": false
     },
     "totalPages": {
       "type": "number",
@@ -228,6 +226,7 @@ export class MgPagination {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "totalPages",
       "methodName": "validateTotalPages"

package/dist/collection/components/molecules/mg-panel/doc/mg-panel.stories.js

@@ -0,0 +1,29 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+export default {
+  component: 'mg-panel',
+  title: 'Molecules/mg-panel',
+  parameters: { actions: { handles: ['title-change', 'expanded-change'] } },
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)),
+  h("div", null, "Content"),
+  h("div", { slot: "header-right" },
+    h("mg-button", { variant: "secondary" },
+      h("mg-icon", { icon: "file-upload" }),
+      " Upload"),
+    h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }),
+      h("mg-icon", { icon: "trash" })))));
+export const MgPanel = Template.bind({});
+MgPanel.args = {
+  panelTitle: 'title',
+  expanded: false,
+  titleEditable: true,
+  expandToggleDisabled: false,
+};

package/dist/collection/components/molecules/mg-panel/mg-panel.css

@@ -30,11 +30,13 @@
   flex-grow: 1;
 }
 
-.mg-panel__collapse-button {
+.mg-panel__header-left mg-button:not([slot=append-input]) {
+  margin: 0 0.3rem 0 0;
+}
+.mg-panel__header-left mg-button:not([slot=append-input]) > *:first-of-type {
   font-family: var(--font-family-heading);
   font-size: 1.4rem;
   font-weight: 500;
-  margin: 0 0.3rem 0 0;
 }
 
 .mg-panel__content {

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

@@ -1,11 +1,8 @@
-import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
+import { Component, Element, h, Prop, State, Watch, Event } from '@stencil/core';
 import { createID, ClassList } from '../../../utils/components.utils';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPanel {
   constructor() {
-    /**************
-     * Decorators *
-     **************/
     /**
      * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
      * If not set, it will be created.
@@ -15,10 +12,6 @@ export class MgPanel {
      * Panel is opened
      */
     this.expanded = false;
-    /**
-     * Disable possibility to toggle expand
-     */
-    this.expandToggleDisabled = false;
     /**
      * Panel title is editabled
      */
@@ -100,23 +93,23 @@ export class MgPanel {
      * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
      */
     this.headerLeft = () => {
-      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", class: "mg-panel__collapse-button", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled },
+      const collapseButton = () => (h("mg-button", { onClick: this.handleCollapseButton, variant: "flat", identifier: `${this.identifier}-collapse-button`, expanded: this.expanded, controls: `${this.identifier}-content`, disabled: this.expandToggleDisabled },
         h("mg-icon", { icon: this.expanded ? 'chevron-up' : 'chevron-down' }),
         !this.isEditing && this.panelTitle));
       if (this.titleEditable && !this.isEditing) {
         return [
           collapseButton(),
-          h("mg-button", { "is-icon": true, variant: "flat", label: messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
+          h("mg-button", { "is-icon": true, variant: "flat", label: this.messages.panel.editLabel, onClick: this.handleEditButton, identifier: `${this.identifier}-edit-button` },
             h("mg-icon", { icon: "pen" })),
         ];
       }
       if (this.titleEditable && this.isEditing) {
         return [
           collapseButton(),
-          h("mg-input-text", { label: messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
-            h("mg-button", { slot: "append-input", label: messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
+          h("mg-input-text", { label: this.messages.panel.editLabel, "label-hide": true, value: this.panelTitle, "onValue-change": this.handleUpdateTitle, displayCharacterLeft: false, pattern: this.titlePattern, "pattern-error-message": this.titlePatternErrorMessage, identifier: `${this.identifier}-edition-input`, ref: el => (this.editInputElement = el) },
+            h("mg-button", { slot: "append-input", label: this.messages.general.cancel, "is-icon": true, variant: "secondary", onClick: this.handleCancelEditButton, identifier: `${this.identifier}-edition-button-cancel` },
               h("mg-icon", { icon: "cross" })),
-            h("mg-button", { slot: "append-input", label: messages.general.validate, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
+            h("mg-button", { slot: "append-input", label: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
               h("mg-icon", { icon: "check" }))),
         ];
       }
@@ -146,6 +139,9 @@ export class MgPanel {
    * @returns {void}
    */
   componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
     this.validatetitlePattern(this.titlePattern);
   }
   /**
@@ -284,8 +280,7 @@ export class MgPanel {
         "text": "Disable possibility to toggle expand"
       },
       "attribute": "expand-toggle-disabled",
-      "reflect": false,
-      "defaultValue": "false"
+      "reflect": false
     },
     "titleEditable": {
       "type": "boolean",
@@ -342,6 +337,7 @@ export class MgPanel {
         "references": {}
       }
     }]; }
+  static get elementRef() { return "element"; }
   static get watchers() { return [{
       "propName": "panelTitle",
       "methodName": "handelTileChange"

package/dist/collection/components/molecules/mg-popover/{mg-popover.stories.js → doc/mg-popover.stories.js}

@@ -1,30 +1,35 @@
 import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../.storybook/utils';
+import { placements } from '../mg-popover.conf';
 export default {
   component: 'mg-popover',
   title: 'Molecules/mg-popover',
   parameters: {
     layout: 'centered',
     docs: { iframeHeight: 600 },
+    actions: { handles: ['display-change'] },
+  },
+  argTypes: {
+    placement: {
+      options: placements,
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: 'bottom' },
+      },
+    },
   },
 };
 /**
- * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
- * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
  */
-const Template = args => {
-  // Extract slot so it won't be render as an attribute
-  const slotTitle = args.slotTitle;
-  delete args.slotTitle;
-  const slotContent = args.slotContent;
-  delete args.slotContent;
-  const closeButton = args.closeButton;
-  delete args.closeButton;
-  // return element
-  return (h("mg-popover", Object.assign({}, args, { "close-button": closeButton }),
-    h("mg-button", null, "Button"),
-    slotTitle && h("h2", { slot: "title" }, slotTitle),
-    slotContent && h("p", { slot: "content" }, slotContent)));
-};
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => (h("mg-popover", Object.assign({}, filterArgs(args, { placement: 'bottom' })),
+  h("mg-button", null, "Button"),
+  args.slotTitle && h("h2", { slot: "title" }, args.slotTitle),
+  args.slotContent && h("p", { slot: "content" }, args.slotContent)));
 export const MgPopover = Template.bind({});
 MgPopover.args = {
   slotTitle: `Blu bli blo bla`,
@@ -33,4 +38,5 @@ MgPopover.args = {
   closeButton: false,
   disabled: false,
   display: false,
+  placement: undefined,
 };

package/dist/collection/components/molecules/mg-popover/mg-popover.conf.js

@@ -0,0 +1,20 @@
+/**
+ * List of all possibles placements
+ */
+export const placements = [
+  'auto',
+  'auto-start',
+  'auto-end',
+  'top',
+  'top-start',
+  'top-end',
+  'bottom',
+  'bottom-start',
+  'bottom-end',
+  'right',
+  'right-start',
+  'right-end',
+  'left',
+  'left-start',
+  'left-end',
+];

package/dist/collection/components/molecules/mg-popover/mg-popover.css

@@ -52,7 +52,7 @@ mg-popover::slotted(*) {
   left: -6px;
 }
 
-.mg-popover__title ::slotted(*) {
+.mg-popover__title ::slotted([slot=title]) {
   margin: 0 0 1rem;
   font-size: var(--mg-popover-title-font-size);
   font-weight: 600;