@mgdis/mg-components 3.1.0 → 4.0.0

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

@@ -0,0 +1,53 @@
+.mg-panel {
+  background-color: hsl(var(--mg-panel-background));
+  border-radius: var(--mg-panel-border-radius);
+  box-shadow: var(--box-shadow);
+}
+
+.mg-panel__header {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  padding: 0 1rem 0 0.3rem;
+  align-items: flex-start;
+}
+
+.mg-panel__header-left,
+.mg-panel__header-right {
+  display: flex;
+  margin: 0.3rem 0;
+}
+
+.mg-panel__header-left--full {
+  flex: 1 1 auto;
+}
+
+.mg-panel__header-right {
+  flex: 1 auto;
+}
+
+.mg-panel__header-left mg-input-text {
+  flex-grow: 1;
+}
+
+.mg-panel__collapse-button .mg-button {
+  font-family: var(--font-family-heading);
+  font-size: 1.4rem;
+  font-weight: 500;
+}
+
+.mg-panel__collapse-button,
+.mg-panel__edit-button {
+  margin: 0 0.3rem 0 0;
+}
+
+.mg-panel__content {
+  padding: 1.5rem;
+}
+
+.mg-panel ::slotted([slot=header-right]) {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1rem;
+  margin-left: auto;
+}

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

@@ -0,0 +1,356 @@
+import { Component, Element, h, Prop, State, Watch, Event } from '@stencil/core';
+import { createID, ClassList } from '../../../utils/components.utils';
+import { initLocales } from '../../../locales';
+export class MgPanel {
+  constructor() {
+    /**
+     * 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-panel');
+    /**
+     * Panel is opened
+     */
+    this.expanded = false;
+    /**
+     * Disable possibility to toggle expand
+     */
+    this.expandToggleDisabled = false;
+    /**
+     * Panel title is editabled
+     */
+    this.titleEditable = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-panel']);
+    /**
+     * Title is in edition mode
+     */
+    this.isEditing = false;
+    /************
+     * Methods *
+     ************/
+    /**
+     * Toggle is editing state
+     *
+     * @returns {void}
+     */
+    this.toggleIsEditing = () => {
+      this.isEditing = !this.isEditing;
+    };
+    /************
+     * Handlers *
+     ************/
+    /**
+     * Collapse button click handler
+     *
+     * @returns {void}
+     */
+    this.handleCollapseButton = () => {
+      if (!this.expandToggleDisabled) {
+        this.expanded = !this.expanded;
+      }
+    };
+    /**
+     * Edit button click handler
+     *
+     * @returns {void}
+     */
+    this.handleEditButton = () => {
+      this.toggleIsEditing();
+    };
+    /**
+     * Update title handler
+     *
+     * @param {CustomEvent<string>} event input value change event
+     * @returns {void}
+     */
+    this.handleUpdateTitle = (event) => {
+      this.updatedPanelTitle = event.detail;
+    };
+    /**
+     * Cancel edition button handler
+     *
+     * @returns {void}
+     */
+    this.handleCancelEditButton = () => {
+      this.updatedPanelTitle = undefined;
+      this.toggleIsEditing();
+    };
+    /**
+     * Validate edition button handler
+     *
+     * @returns {void}
+     */
+    this.handleValidateEditButton = () => {
+      if (this.editInputElement.valid) {
+        if (this.updatedPanelTitle !== undefined)
+          this.panelTitle = this.updatedPanelTitle;
+        this.toggleIsEditing();
+      }
+    };
+    /**
+     * Header left conditional render
+     *
+     * @typedef {HTMLElement} HTMLMgButtonElement
+     * @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 },
+        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", class: "mg-panel__edit-button", 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: 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: this.messages.general.confirm, "is-icon": true, variant: "secondary", onClick: this.handleValidateEditButton, identifier: `${this.identifier}-edition-button-validate` },
+              h("mg-icon", { icon: "check" }))),
+        ];
+      }
+      return collapseButton();
+    };
+  }
+  handelTileChange(newValue) {
+    this.titleChange.emit(newValue);
+  }
+  validatetitlePattern(newValue) {
+    if (newValue && !this.titleEditable) {
+      throw new Error('<mg-panel> prop "titleEditable" must be set to `true`.');
+    }
+    if (newValue && this.titlePatternErrorMessage === undefined) {
+      throw new Error('<mg-panel> prop "titlePattern" must be paired with the prop "titlePatternErrorMessage".');
+    }
+  }
+  handleExpanded(newValue) {
+    this.expandedChange.emit(newValue);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+    // Validate
+    this.validatetitlePattern(this.titlePattern);
+  }
+  /**
+   * Edit DOM after render
+   *
+   * @returns {void}
+   */
+  componentDidRender() {
+    // when we are editing we get focus on edition input
+    if (this.isEditing) {
+      this.editInputElement.setFocus();
+    }
+  }
+  /**
+   * Render component
+   *
+   * @returns {HTMLElement} html element
+   */
+  render() {
+    return (h("section", { class: this.classList.join(), id: this.identifier },
+      h("header", { class: "mg-panel__header", id: `${this.identifier}-header` },
+        h("div", { class: `mg-panel__header-left ${this.isEditing ? 'mg-panel__header-left--full' : ''}` }, this.headerLeft()),
+        h("div", { class: "mg-panel__header-right" },
+          h("slot", { name: "header-right" }))),
+      h("article", { class: "mg-panel__content", id: `${this.identifier}-content`, "aria-labelledby": `${this.identifier}-header`, hidden: !this.expanded },
+        h("slot", null))));
+  }
+  static get is() { return "mg-panel"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-panel.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-panel.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-panel')"
+    },
+    "panelTitle": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel title"
+      },
+      "attribute": "panel-title",
+      "reflect": false
+    },
+    "titlePattern": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel title pattern"
+      },
+      "attribute": "title-pattern",
+      "reflect": false
+    },
+    "titlePatternErrorMessage": {
+      "type": "string",
+      "mutable": true,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel title pattern error message"
+      },
+      "attribute": "title-pattern-error-message",
+      "reflect": false
+    },
+    "expanded": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel is opened"
+      },
+      "attribute": "expanded",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "expandToggleDisabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable possibility to toggle expand"
+      },
+      "attribute": "expand-toggle-disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "titleEditable": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panel title is editabled"
+      },
+      "attribute": "title-editable",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "classList": {},
+    "isEditing": {},
+    "updatedPanelTitle": {}
+  }; }
+  static get events() { return [{
+      "method": "titleChange",
+      "name": "title-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when title change"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "expandedChange",
+      "name": "expanded-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when expanded change"
+      },
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "panelTitle",
+      "methodName": "handelTileChange"
+    }, {
+      "propName": "titlePattern",
+      "methodName": "validatetitlePattern"
+    }, {
+      "propName": "expanded",
+      "methodName": "handleExpanded"
+    }]; }
+}

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

@@ -1,4 +1,5 @@
 import { h } from '@stencil/core';
+import { placements } from '../mg-popover.conf';
 export default {
   component: 'mg-popover',
   title: 'Molecules/mg-popover',
@@ -6,6 +7,15 @@ export default {
     layout: 'centered',
     docs: { iframeHeight: 600 },
   },
+  argTypes: {
+    placement: {
+      options: placements,
+      control: { type: 'select' },
+      table: {
+        defaultValue: { summary: placements[0] },
+      },
+    },
+  },
 };
 /**
  * 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-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

@@ -11,7 +11,7 @@ mg-popover::slotted(*) {
   z-index: 9999;
   border-radius: 0.5rem;
   background-color: hsl(var(--mg-popover-background-color));
-  box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
+  box-shadow: var(--box-shadow);
   color: hsl(var(--mg-popover-font-color));
 }
 .mg-popover[data-show] {
@@ -28,7 +28,7 @@ mg-popover::slotted(*) {
   position: absolute;
   width: 2rem;
   height: 2rem;
-  z-index: 9999;
+  z-index: -1;
   background: inherit;
 }
 .mg-popover .mg-popover__arrow {

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

@@ -1,7 +1,7 @@
 import { Component, Element, Host, h, Prop, Watch } from '@stencil/core';
 import { createID } from '../../../utils/components.utils';
 import { createPopper } from '@popperjs/core';
-import { messages } from '../../../locales';
+import { initLocales } from '../../../locales';
 export class MgPopover {
   constructor() {
     this.closeButtonId = '';
@@ -28,18 +28,19 @@ export class MgPopover {
     this.disabled = false;
     /**
      * Check if clicked outside of component
-     * @param e {event}
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
      */
-    // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
-    /* istanbul ignore next */
-    this.clickOutside = e => {
+    this.clickOutside = (event) => {
       var _a;
-      if (!this.disabled && ((_a = e.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
+      if (!this.disabled && ((_a = event.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
         this.display = false;
       }
     };
     /**
      * Show popover
+     *
      * @returns {void}
      */
     this.show = () => {
@@ -52,13 +53,12 @@ export class MgPopover {
       // hide when click outside
       // setTimeout is used to prevent event to trigger after creation
       setTimeout(() => {
-        // Unable to trigger document events in unit tests:  https://gitlab.mgdis.fr/core/core-ui/mg-components/-/issues/57
-        /* istanbul ignore next */
         document.addEventListener('click', this.clickOutside, false);
       }, 0);
     };
     /**
      * Hide popover
+     *
      * @returns {void}
      */
     this.hide = () => {
@@ -66,11 +66,12 @@ export class MgPopover {
       this.popover.removeAttribute('data-show');
       // Disable the event listeners
       this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
-      // Remove even listener
+      // Remove event listener
       document.removeEventListener('click', this.clickOutside, false);
     };
     /**
      * Handle action for close button
+     *
      * @returns {void}
      */
     this.handleCloseButton = () => {
@@ -88,6 +89,20 @@ export class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void} timeout
+   */
+  componentWillLoad() {
+    // Get locales
+    this.messages = initLocales(this.element).messages;
+  }
+  /**
+   * Check if component props are well configured on init
+   *
+   * @returns {void}
+   */
   componentDidLoad() {
     //Check if slotted title is a heading
     const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
@@ -130,11 +145,16 @@ export class MgPopover {
     });
     this.handleDisplay(this.display);
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     return (h(Host, null,
       h("slot", null),
       h("div", { id: this.identifier, class: "mg-popover" },
-        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.popover.closeButton, onClick: this.handleCloseButton },
+        !this.disabled && this.closeButton && (h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: this.messages.general.close, onClick: this.handleCloseButton },
           h("mg-icon", { icon: "cross" }))),
         h("div", { class: "mg-popover__title" },
           h("slot", { name: "title" })),
@@ -172,9 +192,14 @@ export class MgPopover {
       "type": "string",
       "mutable": false,
       "complexType": {
-        "original": "| 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+        "original": "Placement",
         "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
-        "references": {}
+        "references": {
+          "Placement": {
+            "location": "import",
+            "path": "./mg-popover.conf"
+          }
+        }
       },
       "required": false,
       "optional": false,

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

@@ -1,7 +1,15 @@
 import { h } from '@stencil/core';
+import { sizes, Status } from '../mg-tabs.conf';
 export default {
   component: 'mg-tabs',
   title: 'Molecules/mg-tabs',
+  argTypes: {
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+  },
+  parameters: { actions: { handles: ['active-tab-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}
@@ -14,16 +22,18 @@ const Template = args => {
   return (h("mg-tabs", Object.assign({}, args, { "active-tab": activeTab }),
     h("div", { slot: "tab_content-1" }, "Content 1"),
     h("div", { slot: "tab_content-2" }, "Content 2"),
-    h("div", { slot: "tab_content-3" }, "Content 3")));
+    h("div", { slot: "tab_content-3" }, "Content 3"),
+    h("div", { slot: "tab_content-4" }, "Content 4")));
 };
 export const MgTabs = Template.bind({});
 MgTabs.args = {
-  items: ['Tab 1', 'Tab 2', 'Tab 3'],
-  label: 'Short tabs description. Needeed for accessibility',
+  items: ['Tab 1', 'Tab 2', 'Tab 3', 'Tab 4'],
+  label: 'Short tabs description. Needed for accessibility',
   activeTab: undefined,
+  size: sizes[0], // regular
 };
 export const MgTabsItems = Template.bind({});
-MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
+MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { activeTab: 3, items: [
     {
       label: 'Tab 1',
       icon: 'check',
@@ -32,9 +42,15 @@ MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
     {
       label: 'Tab 2',
       badge: { value: 5, label: 'messages' },
+      status: Status.DISABLED,
     },
     {
       label: 'Tab 3',
       icon: 'cross',
     },
+    {
+      label: 'Tab 4',
+      icon: 'trash',
+      status: Status.HIDDEN,
+    },
   ] });

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

@@ -1 +1,11 @@
-export {};
+export var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['regular', 'large'];