@mgdis/mg-components 3.1.0 → 4.0.0

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;
@@ -18,7 +21,7 @@ export class MgMessage {
     /**
      * Message variant
      */
-    this.variant = variants[0];
+    this.variant = variants[0]; // info
     /**
      * Define if message has a cross button
      * RG 01: https://jira.mgdis.fr/browse/PDA9-140
@@ -55,6 +58,8 @@ export class MgMessage {
     };
     /**
      * Get icon corresponding to variant
+     *
+     * @returns {string} icon
      */
     this.getIcon = () => {
       switch (this.variant) {
@@ -80,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) {
@@ -94,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();
   }
@@ -109,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;
@@ -120,6 +130,11 @@ export class MgMessage {
     this.validateDelay(this.delay);
     this.validateHide(this.hide);
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' },
       h("span", { class: "mg-message__icon" },
@@ -131,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"; }
@@ -198,7 +213,7 @@ export class MgMessage {
     },
     "closeButton": {
       "type": "boolean",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "boolean",
         "resolved": "boolean",
@@ -245,7 +260,7 @@ export class MgMessage {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emmited event when message is diplayed"
+        "text": "Emited event when message is diplayed"
       },
       "complexType": {
         "original": "string",
@@ -260,7 +275,7 @@ export class MgMessage {
       "composed": true,
       "docs": {
         "tags": [],
-        "text": "Emmited event when message is hidden"
+        "text": "Emited event when message is hidden"
       },
       "complexType": {
         "original": "string",

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

@@ -0,0 +1,51 @@
+/* eslint-disable react/jsx-no-bind */
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-modal',
+  title: 'Molecules/mg-modal',
+  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'}
+ */
+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;
+  const modalTitle = args.modalTitle;
+  delete args.modalTitle;
+  // return element
+  return (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({}, args, { "close-button": closeButton, "modal-title": modalTitle }),
+      slotContent && h("span", { slot: "content", innerHTML: slotContent }),
+      slotActions && h("span", { slot: "actions", innerHTML: slotActions }))));
+};
+export const MgModal = Template.bind({});
+MgModal.args = {
+  slotContent: `<p slot="content">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 slot="actions" 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

@@ -0,0 +1,52 @@
+.mg-modal {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  position: fixed;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  z-index: 1000;
+  padding: 2rem 0;
+  background-color: hsla(var(--color-light), 85%);
+}
+.mg-modal__dialog {
+  display: flex;
+  flex-direction: column;
+  align-self: center;
+  row-gap: 3rem;
+  padding: 1.5rem 2.5rem;
+  width: 60rem;
+  height: fit-content;
+  max-width: 100%;
+  max-height: 100%;
+  box-sizing: border-box;
+  background-color: hsl(var(--color-light));
+  box-shadow: var(--box-shadow);
+  border-radius: var(--mg-modal-border-radius);
+}
+.mg-modal__header {
+  margin-bottom: 0.5rem;
+}
+.mg-modal__title {
+  margin: 0;
+  font-family: var(--font-family-heading);
+  font-size: var(--mg-modal-title-font-size);
+  font-weight: 600;
+}
+.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 {
+  overflow-y: auto;
+}
+.mg-modal .mg-modal__content::slotted(*) {
+  font-size: var(--mg-modal-content-font-size);
+}
+.mg-modal.mg-modal--hide {
+  display: none;
+}

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

@@ -0,0 +1,240 @@
+import { Component, h, Prop, State, Watch, Element, Event, Listen } from '@stencil/core';
+import { createID, ClassList } from '../../../utils/components.utils';
+import { initLocales } from '../../../locales';
+export class MgModal {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    // Classes
+    this.classHide = 'mg-modal--hide';
+    // IDs
+    this.closeButtonId = '';
+    this.titleId = '';
+    /**
+     * 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-modal');
+    /**
+     * Define if modal has a cross button
+     */
+    this.closeButton = false;
+    /**
+     * Define if modal is hidden
+     */
+    this.hide = false;
+    /**
+     * Define if component is using actions slot
+     */
+    this.hasActions = false;
+    /**
+     * Define if component is using content slot
+     */
+    this.hasContent = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-modal']);
+    /*************
+     * Handlers *
+     *************/
+    /**
+     * Handle close button
+     *
+     * @returns {void}
+     */
+    this.handleClose = () => {
+      this.hide = true;
+    };
+  }
+  validateHide(newValue) {
+    if (newValue) {
+      this.componentHide.emit();
+      this.classList.add(this.classHide);
+    }
+    else {
+      this.componentShow.emit();
+      this.classList.delete(this.classHide);
+    }
+  }
+  /**
+   * Handle 'escape' key down
+   *
+   * @param {KeyboardEvent} event keydown event
+   * @returns {void}
+   */
+  handleKeyDown(event) {
+    // we can use 'Escape button" when this not a blocking modal, induced by closeButton value.
+    if (this.closeButton && event.key === 'Escape') {
+      this.hide = true;
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @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) {
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    this.titleId = `${this.identifier}-title`;
+    this.validateHide(this.hide);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h("section", { role: "dialog", id: this.identifier, class: this.classList.join(), tabindex: "-1", "aria-labelledby": this.titleId, "aria-modal": "true", "aria-hidden": this.hide },
+      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: 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" },
+          h("slot", { name: "content" }))),
+        this.hasActions && (h("footer", { class: "mg-modal__footer" },
+          h("slot", { name: "actions" }))))));
+  }
+  static get is() { return "mg-modal"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-modal.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-modal.css"]
+  }; }
+  static get properties() { return {
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+      },
+      "attribute": "identifier",
+      "reflect": false,
+      "defaultValue": "createID('mg-modal')"
+    },
+    "modalTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displayed modal title\nrequired"
+      },
+      "attribute": "modal-title",
+      "reflect": false
+    },
+    "closeButton": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if modal has a cross button"
+      },
+      "attribute": "close-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hide": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if modal is hidden"
+      },
+      "attribute": "hide",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "hasActions": {},
+    "hasContent": {},
+    "classList": {}
+  }; }
+  static get events() { return [{
+      "method": "componentShow",
+      "name": "component-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when modal is diplayed"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "componentHide",
+      "name": "component-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when modal is hidden"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "hide",
+      "methodName": "validateHide"
+    }]; }
+  static get listeners() { return [{
+      "name": "keydown",
+      "method": "handleKeyDown",
+      "target": "window",
+      "capture": false,
+      "passive": false
+    }]; }
+}

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

@@ -2,6 +2,7 @@ import { h } from '@stencil/core';
 export default {
   component: 'mg-pagination',
   title: 'Molecules/mg-pagination',
+  parameters: { actions: { handles: ['current-page-change'] } },
 };
 /**
  * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}

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
  *
@@ -17,27 +17,19 @@ import { messages } from './../../../locales';
  * range(1, 5) = [1, 2, 3, 4, 5]
  * range(10, 20, 2) = [10, 12, 14, 16, 18, 20]
  *
- * @param start
- * @param end
- * @param step
- * @returns {number[]}
+ * @param {number} start start range
+ * @param {number} end start end
+ * @param {number} step step size
+ * @returns {number[]} range numbers
  */
 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
      */
@@ -48,15 +40,21 @@ export class MgPagination {
     this.currentPage = 1;
     /**
      * Change current page from target
-     * @param target
+     *
+     * @param {number} target target page
+     * @returns {void}
      */
-    this.goToPage = (target) => (this.currentPage = target);
+    this.goToPage = (target) => {
+      this.currentPage = target;
+    };
     /************
      * Handlers *
      ************/
     /**
-     * Default click handler
-     * @param event
+     * select handler
+     *
+     * @param {InputEvent} event value change event
+     * @returns {void}
      */
     this.handleSelect = (event) => {
       const to = Number(event.target.value);
@@ -64,9 +62,13 @@ export class MgPagination {
     };
     /**
      * Go to 'previous/next' page button handler
+     *
+     * @param {string} action navigation action
      * @returns {void}
      */
-    this.handleGoToPage = (action) => this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+    this.handleGoToPage = (action) => {
+      this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+    };
   }
   validateTotalPages(newValue) {
     if (newValue < 1) {
@@ -85,29 +87,46 @@ export class MgPagination {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @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
+   *
+   * @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.pagination[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.pages),
+        this.totalPages > 1 ? this.messages.pagination.pages : this.messages.pagination.page),
       navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
@@ -128,7 +147,7 @@ export class MgPagination {
         "references": {}
       },
       "required": false,
-      "optional": true,
+      "optional": false,
       "docs": {
         "tags": [],
         "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
@@ -139,7 +158,7 @@ export class MgPagination {
     },
     "label": {
       "type": "string",
-      "mutable": false,
+      "mutable": true,
       "complexType": {
         "original": "string",
         "resolved": "string",
@@ -152,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",
@@ -208,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,39 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-panel',
+  title: 'Molecules/mg-panel',
+  parameters: { actions: { handles: ['title-change'] } },
+};
+/**
+ * 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'}
+ */
+const Template = args => {
+  // Extract slot so it won't be render as an attribute
+  const panelTitle = args.panelTitle;
+  delete args.panelTitle;
+  const titleEditable = args.titleEditable;
+  delete args.titleEditable;
+  const expandToggleDisabled = args.expandToggleDisabled;
+  delete args.expandToggleDisabled;
+  const titlePattern = args.titlePattern;
+  delete args.titlePattern;
+  const titlePatternErrorMessage = args.titlePatternErrorMessage;
+  delete args.titlePatternErrorMessage;
+  // return element
+  return (h("mg-panel", Object.assign({}, args, { "panel-title": panelTitle, "title-editable": titleEditable, "expand-toggle-disabled": expandToggleDisabled, "title-pattern": titlePattern, "title-pattern-error-message": titlePatternErrorMessage }),
+    h("div", null, "Content"),
+    h("div", { slot: "header-right" },
+      h("mg-button", { variant: "secondary" },
+        h("mg-icon", { icon: "file-upload" }),
+        " Upload"),
+      h("mg-button", { "is-icon": true, variant: "secondary", label: "delete" },
+        h("mg-icon", { icon: "trash" })))));
+};
+export const MgPanel = Template.bind({});
+MgPanel.args = {
+  panelTitle: 'title',
+  expanded: false,
+  titleEditable: true,
+  expandToggleDisabled: true,
+};