@mgdis/mg-components 3.1.0 → 3.2.0

package/dist/collection/components/molecules/mg-modal/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-pagination/mg-pagination.js

@@ -17,10 +17,10 @@ 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 {
@@ -48,15 +48,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 +70,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,16 +95,26 @@ export class MgPagination {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
   componentWillLoad() {
     this.validateTotalPages(this.totalPages);
     this.validateCurrentPage(this.currentPage);
   }
+  /**
+   * 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`], 
       // 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],
+      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),
@@ -107,7 +127,7 @@ export class MgPagination {
         "/ ",
         this.totalPages,
         " ",
-        this.totalPages > 1 ? messages.pagination.pages : messages.pagination.pages),
+        this.totalPages > 1 ? messages.pagination.pages : messages.pagination.page),
       navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
   }
   static get is() { return "mg-pagination"; }
@@ -128,7 +148,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."

package/dist/collection/components/molecules/mg-pagination/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-panel/mg-panel.css

@@ -0,0 +1,42 @@
+.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: center;
+}
+
+.mg-panel__header-left,
+.mg-panel__header-right {
+  display: flex;
+  flex-grow: 1;
+  margin: 0.3rem 0;
+}
+
+.mg-panel__header-left mg-input-text {
+  flex-grow: 1;
+}
+
+.mg-panel__collapse-button {
+  font-family: var(--font-family-heading);
+  font-size: 1.4rem;
+  font-weight: 500;
+  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,255 @@
+import { Component, h, Prop, State, Watch, Event } from '@stencil/core';
+import { createID, ClassList } from '../../../utils/components.utils';
+import { messages } 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.
+     */
+    this.identifier = createID('mg-panel');
+    /**
+     * Panel is opened
+     */
+    this.expanded = 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 = () => {
+      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.updatedPanelTitle !== undefined)
+        this.panelTitle = this.updatedPanelTitle;
+      this.toggleIsEditing();
+    };
+    /*************
+     * Lifecycle *
+     *************/
+    /**
+     * 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` },
+        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: "secondary", label: 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, 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-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-icon", { icon: "check" }))),
+        ];
+      }
+      return collapseButton();
+    };
+  }
+  handelTileChange(newValue) {
+    this.titleChange.emit(newValue);
+  }
+  /**
+   * 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.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
+    },
+    "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"
+    },
+    "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": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "panelTitle",
+      "methodName": "handelTileChange"
+    }]; }
+}

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

@@ -0,0 +1,31 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-panel',
+  title: 'Molecules/mg-panel',
+};
+/**
+ * 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;
+  // return element
+  return (h("mg-panel", Object.assign({}, args, { "panel-title": panelTitle, "title-editable": titleEditable }),
+    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,
+};

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

@@ -28,18 +28,21 @@ 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 = () => {
@@ -59,6 +62,7 @@ export class MgPopover {
     };
     /**
      * Hide popover
+     *
      * @returns {void}
      */
     this.hide = () => {
@@ -71,6 +75,7 @@ export class MgPopover {
     };
     /**
      * Handle action for close button
+     *
      * @returns {void}
      */
     this.handleCloseButton = () => {
@@ -88,6 +93,11 @@ export class MgPopover {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * 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 +140,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: messages.general.close, onClick: this.handleCloseButton },
           h("mg-icon", { icon: "cross" }))),
         h("div", { class: "mg-popover__title" },
           h("slot", { name: "title" })),

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

@@ -1 +1,4 @@
-export {};
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['regular', 'large'];

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

@@ -1,3 +1,11 @@
+.mg-tabs.mg-tabs--size-regular .mg-tabs__navigation-button {
+  padding: calc(1rem + 0.3rem) calc(1rem * 1.3) 1rem;
+}
+
+.mg-tabs.mg-tabs--size-large .mg-tabs__navigation-button {
+  padding: calc(1.8rem + 0.3rem) calc(1.8rem * 1.3) 1.8rem;
+}
+
 .mg-tabs__header {
   display: flex;
   flex-direction: row;
@@ -8,7 +16,6 @@
   display: flex;
   align-items: center;
   column-gap: 0.5rem;
-  padding: 1.8rem 2.4rem 1.5rem;
   background: none;
   border: none;
   border-bottom: 0.3rem solid transparent;
@@ -16,7 +23,11 @@
   line-height: var(--line-height);
   cursor: pointer;
 }
-.mg-tabs__navigation-button:hover, .mg-tabs__navigation-button:focus {
+.mg-tabs__navigation-button:disabled, .mg-tabs__navigation-button--disabled {
+  cursor: default;
+  opacity: 30%;
+}
+.mg-tabs__navigation-button:hover:not(:disabled), .mg-tabs__navigation-button:focus:not(:disabled) {
   background-color: hsla(var(--color-info-h), var(--color-info-s), var(--color-info-l), 10%);
 }
 .mg-tabs__navigation-button.mg-tabs__navigation-button--active {
@@ -26,5 +37,5 @@
 }
 
 .mg-tabs__content-container:focus-visible {
-  outline-color: transparent;
+  outline: none;
 }