@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,218 @@
+import { Component, h, Prop, Watch, Event } from '@stencil/core';
+import { createID } from '../../../utils/components.utils';
+import { NavigationAction } from './mg-pagination.conf';
+import { messages } from './../../../locales';
+/**
+ * Range generator
+ *
+ * start by get the range length, add "+ 1" to include last value, ex: Math.ceil((3 + 1 - 1) / 1) => 3
+ * then with Array(Math.ceil...) we get the final array with empty values, ex: Array(Math.ceil(2 + 1 - 1) / 1)) => [empty, empty, empty]
+ * then with Array(Math.ceil...).keys() we get the Array Iterator from empty values
+ * then with Array.from(Array(...)) we get the complete array with "index" values instead of "empty" values
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()) => [0, 1, 2]
+ * finaly we map values from "start" range and apply the "step" coefficiant,
+ * ex: Array.from(Array(Math.ceil((2 + 1 - 1) / 1) || 1).keys()).map(x => 1 + x * 1) => [1, 2, 3]
+ *
+ * range(1, 1) = [1]
+ * 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[]}
+ */
+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
+     */
+    this.totalPages = 1;
+    /**
+     * Component current page
+     */
+    this.currentPage = 1;
+    /**
+     * Change current page from target
+     * @param target
+     */
+    this.goToPage = (target) => (this.currentPage = target);
+    /************
+     * Handlers *
+     ************/
+    /**
+     * Default click handler
+     * @param event
+     */
+    this.handleSelect = (event) => {
+      const to = Number(event.target.value);
+      this.goToPage(to > 0 ? to : 1);
+    };
+    /**
+     * Go to 'previous/next' page button handler
+     * @returns {void}
+     */
+    this.handleGoToPage = (action) => this.goToPage(action === NavigationAction.NEXT ? this.currentPage + 1 : this.currentPage - 1);
+  }
+  validateTotalPages(newValue) {
+    if (newValue < 1) {
+      throw new Error('<mg-pagination> prop "totalPages" must be greater than 0');
+    }
+  }
+  validateCurrentPage(newValue) {
+    if (newValue < 1) {
+      throw new Error('<mg-pagination> prop "currentPage" must be greater than 0');
+    }
+    else if (newValue > this.totalPages) {
+      throw new Error('<mg-pagination> prop "currentPage" can not be greater than total page');
+    }
+    this.currentPageChange.emit(newValue);
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  componentWillLoad() {
+    this.validateTotalPages(this.totalPages);
+    this.validateCurrentPage(this.currentPage);
+  }
+  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],
+      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("span", { class: "sr-only" },
+        messages.pagination.page,
+        " ",
+        this.currentPage),
+      h("span", null,
+        "/ ",
+        this.totalPages,
+        " ",
+        this.totalPages > 1 ? messages.pagination.pages : messages.pagination.pages),
+      navigationActionButton(this.currentPage >= this.totalPages, NavigationAction.NEXT)));
+  }
+  static get is() { return "mg-pagination"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-pagination.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-pagination.css"]
+  }; }
+  static get properties() { return {
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "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-pagination')"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Panignation label. Is a short description.\nCustomize default value can be usefull to improve accessibility"
+      },
+      "attribute": "label",
+      "reflect": false,
+      "defaultValue": "'pagination'"
+    },
+    "totalPages": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Component total pages"
+      },
+      "attribute": "total-pages",
+      "reflect": false,
+      "defaultValue": "1"
+    },
+    "currentPage": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Component current page"
+      },
+      "attribute": "current-page",
+      "reflect": true,
+      "defaultValue": "1"
+    }
+  }; }
+  static get events() { return [{
+      "method": "currentPageChange",
+      "name": "current-page-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when current page change"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
+  static get watchers() { return [{
+      "propName": "totalPages",
+      "methodName": "validateTotalPages"
+    }, {
+      "propName": "currentPage",
+      "methodName": "validateCurrentPage"
+    }]; }
+}

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

@@ -0,0 +1,23 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-pagination',
+  title: 'Molecules/mg-pagination',
+};
+/**
+ * 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 totalPages = args.totalPages;
+  delete args.totalPages;
+  const currentPage = args.currentPage;
+  delete args.currentPage;
+  // return element
+  return h("mg-pagination", Object.assign({}, args, { "total-pages": totalPages, "current-page": currentPage }));
+};
+export const MgPagination = Template.bind({});
+MgPagination.args = {
+  totalPages: 5,
+  currentPage: 1,
+};

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

@@ -0,0 +1,59 @@
+mg-popover {
+  display: contents;
+}
+mg-popover::slotted(*) {
+  display: inline-block;
+}
+
+.mg-popover {
+  display: none;
+  padding: 1.5rem;
+  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);
+  color: hsl(var(--mg-popover-font-color));
+}
+.mg-popover[data-show] {
+  display: block;
+}
+.mg-popover mg-button {
+  float: right;
+  margin-right: calc(0rem - (var(--default-size) - var(--mg-icon-regular-size)) / 2);
+  margin-top: calc(0rem - (var(--default-size) - var(--mg-popover-title-font-size) * var(--line-height)) / 2);
+  margin-left: 3rem;
+}
+.mg-popover .mg-popover__arrow,
+.mg-popover .mg-popover__arrow::before {
+  position: absolute;
+  width: 2rem;
+  height: 2rem;
+  z-index: 9999;
+  background: inherit;
+}
+.mg-popover .mg-popover__arrow {
+  visibility: hidden;
+}
+.mg-popover .mg-popover__arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}
+.mg-popover[data-popper-placement^=top] > .mg-popover__arrow {
+  bottom: -6px;
+}
+.mg-popover[data-popper-placement^=bottom] > .mg-popover__arrow {
+  top: -6px;
+}
+.mg-popover[data-popper-placement^=left] > .mg-popover__arrow {
+  right: -6px;
+}
+.mg-popover[data-popper-placement^=right] > .mg-popover__arrow {
+  left: -6px;
+}
+
+.mg-popover__title ::slotted(*) {
+  margin: 0 0 1rem;
+  font-size: var(--mg-popover-title-font-size);
+  font-weight: 600;
+}

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

@@ -0,0 +1,249 @@
+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';
+export class MgPopover {
+  constructor() {
+    this.closeButtonId = '';
+    /**
+     * Sets an `id` attribute.
+     * Needed by the input for accessibility `aria-decribedby`.
+     */
+    this.identifier = createID('mg-popover');
+    /**
+     * Popover placement
+     */
+    this.placement = 'bottom';
+    /**
+     * Define if popover has a cross button
+     */
+    this.closeButton = false;
+    /**
+     * Display popover
+     */
+    this.display = false;
+    /**
+     * Disable popover
+     */
+    this.disabled = false;
+    /**
+     * Check if clicked outside of component
+     * @param e {event}
+     */
+    // 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 => {
+      var _a;
+      if (!this.disabled && ((_a = e.target.closest(`#${this.identifier}`)) === null || _a === void 0 ? void 0 : _a.parentElement.nodeName) !== 'MG-POPOVER') {
+        this.display = false;
+      }
+    };
+    /**
+     * Show popover
+     * @returns {void}
+     */
+    this.show = () => {
+      // Make the popover visible
+      this.popover.setAttribute('data-show', '');
+      // Enable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+      // Update its position
+      this.popper.update();
+      // 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 = () => {
+      // Hide the popover
+      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
+      document.removeEventListener('click', this.clickOutside, false);
+    };
+    /**
+     * Handle action for close button
+     * @returns {void}
+     */
+    this.handleCloseButton = () => {
+      this.display = false;
+    };
+  }
+  handleDisplay(newVal) {
+    if (newVal) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  componentDidLoad() {
+    //Check if slotted title is a heading
+    const headingElements = ['h1', 'h2', 'h3', 'h4', 'h5', 'h6'];
+    const slotedTitleElement = this.element.querySelector('[slot="title"]');
+    if (slotedTitleElement !== null && !headingElements.includes(slotedTitleElement.tagName.toLowerCase())) {
+      throw new Error(`<mg-popover> Slotted title must be a heading:  ${headingElements.join(', ')}.`);
+    }
+    // Set close button id
+    if (this.closeButton) {
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    // Get popover content
+    this.popover = this.element.querySelector(`#${this.identifier}`);
+    //Get interactive element
+    const interactiveElement = this.element.firstElementChild;
+    // Add aria attributes
+    interactiveElement.setAttribute('aria-controls', this.identifier);
+    interactiveElement.setAttribute('aria-expanded', `${this.display}`);
+    // Create popperjs popover
+    this.popper = createPopper(interactiveElement, this.popover, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 10],
+          },
+        },
+      ],
+    });
+    // Add events to toggle display
+    interactiveElement.addEventListener('click', () => {
+      if (!this.disabled)
+        this.display = !this.display;
+    });
+    // Add events to hide popover
+    this.element.addEventListener('keydown', e => {
+      if (!this.disabled && e.code === 'Escape')
+        this.display = false;
+    });
+    this.handleDisplay(this.display);
+  }
+  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 },
+          h("mg-icon", { icon: "cross" }))),
+        h("div", { class: "mg-popover__title" },
+          h("slot", { name: "title" })),
+        h("slot", { name: "content" }),
+        h("div", { class: "mg-popover__arrow", "data-popper-arrow": true }))));
+  }
+  static get is() { return "mg-popover"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-popover.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-popover.css"]
+  }; }
+  static get properties() { return {
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
+      },
+      "attribute": "identifier",
+      "reflect": false,
+      "defaultValue": "createID('mg-popover')"
+    },
+    "placement": {
+      "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'",
+        "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": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Popover placement"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom'"
+    },
+    "closeButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if popover has a cross button"
+      },
+      "attribute": "close-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "display": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display popover"
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable popover"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "display",
+      "methodName": "handleDisplay"
+    }]; }
+}

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

@@ -0,0 +1,36 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-popover',
+  title: 'Molecules/mg-popover',
+  parameters: {
+    layout: 'centered',
+    docs: { iframeHeight: 600 },
+  },
+};
+/**
+ * 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 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)));
+};
+export const MgPopover = Template.bind({});
+MgPopover.args = {
+  slotTitle: `Blu bli blo bla`,
+  slotContent: `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.`,
+  identifier: 'identifier',
+  closeButton: false,
+  disabled: false,
+  display: false,
+};

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,30 @@
+.mg-tabs__header {
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+}
+
+.mg-tabs__navigation-button {
+  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;
+  color: hsl(var(--color-dark));
+  line-height: var(--line-height);
+  cursor: pointer;
+}
+.mg-tabs__navigation-button:hover, .mg-tabs__navigation-button:focus {
+  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 {
+  color: hsl(var(--color-info));
+  border-bottom-color: hsl(var(--color-info));
+  font-weight: 700;
+}
+
+.mg-tabs__content-container:focus-visible {
+  outline-color: transparent;
+}