@mgdis/mg-components 3.1.0 → 4.0.0

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 {
@@ -24,7 +35,10 @@
   border-bottom-color: hsl(var(--color-info));
   font-weight: 700;
 }
+.mg-tabs__navigation-button.mg-tabs__navigation-button--hidden {
+  display: none;
+}
 
 .mg-tabs__content-container:focus-visible {
-  outline-color: transparent;
+  outline: none;
 }

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

@@ -1,18 +1,30 @@
-import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';
+import { Component, Event, h, Host, Prop, State, Element, Watch } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
+import { sizes, Status } from './mg-tabs.conf';
 /**
  * type TabItem validation function
- * @param tab
- * @returns {boolean}
+ *
+ * @param {TabItem} tab tab item
+ * @returns {boolean} tab item type is valid
  */
 const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
 export class MgTabs {
   constructor() {
+    /************
+     * Internal *
+     ************/
+    this.tabPanel = 'panel';
+    this.startIndex = 1;
+    this.buttonTabBaseClass = 'mg-tabs__navigation-button';
     /**
      * 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-tabs');
+    /**
+     * Define tabs size
+     */
+    this.size = 'regular';
     /**
      * Active tab number
      * default: first is 1
@@ -26,33 +38,81 @@ export class MgTabs {
      * Component classes
      */
     this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Method to set active tab
+     *
+     * @param {number} tabKey item tab key to set to ACTIVE status
+     * @returns {void}
+     */
+    this.setActiveTab = (tabKey) => {
+      // reset active tabs
+      this.tabs.forEach(tab => {
+        if (this.tabHasGivenStatus(tab, Status.ACTIVE))
+          tab.status = Status.VISIBLE;
+      });
+      // set active tab from given tab key
+      this.tabs[tabKey - this.startIndex].status = Status.ACTIVE;
+      // emit change active tab key event
+      this.activeTabChange.emit(tabKey);
+    };
+    /**
+     * Method to know if given tab has the given status
+     *
+     * @param {TabItem} tab item tab key to set to ACTIVE status
+     * @param {Status} status status to valide
+     * @returns {boolean} status comparaison
+     */
+    this.tabHasGivenStatus = (tab, status) => tab.status === status;
+    /**
+     * Method to get element id from index
+     *
+     * @param {string} element to get id
+     * @param {number} index to generate id
+     * @returns {string} generated element id
+     */
+    this.getElementId = (element, index) => `${element}-${this.getTabIndex(index)}`;
+    /**
+     * Method to get tab index
+     *
+     * @param {number} index to get
+     * @returns {number} index
+     */
+    this.getTabIndex = (index) => index + this.startIndex;
     /**
      * Handle click events on tabs
-     * @param event
+     *
+     * @param {MouseEvent} event mouse event
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.getAttribute('data-index');
       this.activeTab = Number(tabId);
     };
+    /**
+     * get navigation button class from given status
+     *
+     * @param {Status} status button tab status
+     * @param {boolean} isSelector set if we need a CSS selector with the dot '.' at the begin. default value = false.
+     * @returns {string} button class/selector variant
+     */
+    this.getNavigationButtonClass = (status, isSelector = false) => `${isSelector ? '.' : ''}${this.buttonTabBaseClass}--${status}`;
     /**
      * Handle keyboard event on tabs
-     * @param event
+     *
+     * @param {MouseEvent} event mouse event
+     * @returns {void}
      */
     this.handleKeydown = (event) => {
-      let selectedTab;
       let tabId = Number(event.target.getAttribute('data-index'));
       const parent = event.target.parentElement;
       // change selected id from key code
-      // /* IE FIX */ delete 'Right'
-      if (['ArrowRight', 'Right'].includes(event.key)) {
+      if (event.key === 'ArrowRight') {
         tabId++;
-        // /* IE FIX */ delete 'Left'
       }
-      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+      else if (event.key === 'ArrowLeft') {
         tabId--;
       }
-      // get selected tab
-      selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // get selected tab if NOT hidden, disabled
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]:not(${[this.getNavigationButtonClass(Status.HIDDEN, true), this.getNavigationButtonClass(Status.DISABLED, true)].join()})`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -69,10 +129,16 @@ export class MgTabs {
       }
     };
   }
+  validateSize(newValue) {
+    if (!sizes.includes(newValue)) {
+      throw new Error(`<mg-tabs> prop "size" must be one of : ${sizes.join(', ')}`);
+    }
+    this.classList.add(`mg-tabs--size-${this.size}`);
+  }
   validateItems(newValue) {
     // String array
     if (allItemsAreString(newValue)) {
-      this.tabs = newValue.map(item => ({ label: item }));
+      this.tabs = newValue.map(item => ({ label: item, status: Status.VISIBLE }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -83,39 +149,49 @@ export class MgTabs {
     }
   }
   validateActiveTab(newValue) {
-    if (Number(newValue) < 1 || Number(newValue) > this.tabs.length) {
+    if (newValue < 1 || newValue > this.tabs.length) {
       throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
     }
+    else {
+      this.setActiveTab(newValue);
+    }
   }
   /*************
    * Lifecycle *
    *************/
   /**
    * Check if component props are well configured on init
+   *
+   * @returns {void}
    */
   componentWillLoad() {
     // Check tabs format
     this.validateItems(this.items);
     this.validateActiveTab(this.activeTab);
+    this.validateSize(this.size);
     this.validateSlots();
   }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
   render() {
     return (h(Host, null,
-      h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
-        const tabIndex = index + 1;
-        return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: `mg-tabs__navigation-button ${tabIndex === this.activeTab ? 'mg-tabs__navigation-button--active' : ''}`, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex },
+      h("div", { class: this.classList.join() },
+        h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => (h("button", { role: "tab", id: this.getElementId(this.identifier, index), class: {
+            [`${this.buttonTabBaseClass}`]: true,
+            [`${this.getNavigationButtonClass(Status.ACTIVE)}`]: this.tabHasGivenStatus(tab, Status.ACTIVE),
+            [`${this.getNavigationButtonClass(Status.DISABLED)}`]: this.tabHasGivenStatus(tab, Status.DISABLED),
+            [`${this.getNavigationButtonClass(Status.HIDDEN)}`]: this.tabHasGivenStatus(tab, Status.HIDDEN),
+          }, tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, "aria-selected": this.tabHasGivenStatus(tab, Status.ACTIVE).toString(), "aria-controls": this.getElementId(this.tabPanel, index), onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": this.getTabIndex(index), disabled: this.tabHasGivenStatus(tab, Status.DISABLED) },
           tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
           tab.label,
-          tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
-      })),
-      this.tabs.map((_tab, index) => {
-        const tabIndex = index + 1;
-        return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" },
-          h("slot", { name: `tab_content-${tabIndex}` })));
-      })));
+          tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label }))))),
+        this.tabs.map((tab, index) => (h("article", { role: "tabpanel", id: this.getElementId(this.tabPanel, index), hidden: !this.tabHasGivenStatus(tab, Status.ACTIVE), "aria-labelledby": this.getElementId(this.identifier, index), tabindex: this.tabHasGivenStatus(tab, Status.ACTIVE) ? 0 : -1, class: "mg-tabs__content-container" },
+          h("slot", { name: this.getElementId('tab_content', index) })))))));
   }
   static get is() { return "mg-tabs"; }
-  static get encapsulation() { return "scoped"; }
   static get originalStyleUrls() { return {
     "$": ["mg-tabs.scss"]
   }; }
@@ -132,7 +208,7 @@ export class MgTabs {
         "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."
@@ -158,6 +234,24 @@ export class MgTabs {
       "attribute": "label",
       "reflect": false
     },
+    "size": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define tabs size"
+      },
+      "attribute": "size",
+      "reflect": false,
+      "defaultValue": "'regular'"
+    },
     "items": {
       "type": "unknown",
       "mutable": false,
@@ -201,8 +295,27 @@ export class MgTabs {
     "tabs": {},
     "classList": {}
   }; }
+  static get events() { return [{
+      "method": "activeTabChange",
+      "name": "active-tab-change",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emited event when active tab change"
+      },
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      }
+    }]; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
+      "propName": "size",
+      "methodName": "validateSize"
+    }, {
       "propName": "items",
       "methodName": "validateItems"
     }, {

package/dist/collection/locales/index.js

@@ -1,4 +1,33 @@
-export const locale = 'fr-FR';
-import fr from './fr-FR/messages.json';
-export const messages = fr;
-export const currency = 'EUR';
+import en from './en/messages.json';
+import fr from './fr/messages.json';
+const defaultLocale = 'en';
+const messages = { en, fr };
+/**
+ * Get locale
+ *
+ * @param {HTMLElement} element element that needs to know the locale to use
+ * @returns {string} locale
+ */
+const getLocale = (element) => {
+  var _a;
+  return ((_a = element.closest('[lang]')) === null || _a === void 0 ? void 0 : _a.lang) || navigator.language || defaultLocale;
+};
+/**
+ * Get Intl object
+ * We load the defined locale but for now we only support the first subtag for messages
+ *
+ * @param {HTMLElement} element element we need to get the language
+ * @returns {{ locale: string; messages: unknown }} messages object
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+export const initLocales = (element) => {
+  // Get local
+  const locale = getLocale(element);
+  // Only keep first subtag
+  const localeSubtag = locale.split('-').shift();
+  // Return
+  return {
+    locale,
+    messages: messages[localeSubtag] || messages[defaultLocale],
+  };
+};

package/dist/collection/stories/helpers.stories.js

@@ -0,0 +1,33 @@
+import { h } from '@stencil/core';
+export default {
+  title: 'Style/Helpers',
+  argTypes: {
+    align: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+    },
+  },
+};
+const Template = args => (h("div", null,
+  h("h1", null, "Helpers"),
+  h("h2", null, ".mg-group-elements"),
+  h("p", null,
+    "Buttons can be grouped in an HTMLelement using the ",
+    h("code", null, ".mg-group-elements"),
+    " class, it will ensure a 10px margin space between them, even verticaly. Above exemples are using it."),
+  h("p", null,
+    "By adding the ",
+    h("code", null, ".mg-group-elements--align-right"),
+    " class you 'll set a right alignment of the button, even when line breaks."),
+  h("h3", null, "Demo"),
+  h("div", { class: `mg-group-elements${args.align === 'right' ? ' mg-group-elements--align-right' : ''}` },
+    h("mg-button", null, "First Button"),
+    h("mg-button", { label: "" },
+      h("mg-icon", { icon: "info-circle" }),
+      "Second Button"),
+    h("mg-button", { "is-icon": true, label: "Third button" },
+      h("mg-icon", { icon: "info-circle" })))));
+export const Helpers = Template.bind({});
+Helpers.args = {
+  align: 'left',
+};

package/dist/collection/utils/components.utils.js

@@ -1,13 +1,15 @@
 /**
  * Create random ID
- * @param prefix {string} add prefix to created ID
+ *
+ * @param {string} prefix  add prefix to created ID
+ * @param {number} length ID length
  * @returns {string} ID
  */
 export function createID(prefix = '', length = 10) {
   let ID = '';
   const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
   const charsLength = chars.length;
-  for (var i = 0; i < length; i++) {
+  for (let i = 0; i < length; i++) {
     ID += chars.charAt(Math.floor(Math.random() * charsLength));
   }
   return (prefix !== '' ? `${prefix}-` : '') + ID;
@@ -20,7 +22,8 @@ export class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     * @param className
+     *
+     * @param {string} className class name to add
      * @returns {void}
      */
     this.add = (className) => {
@@ -30,7 +33,8 @@ export class ClassList {
     };
     /**
      * Delete class
-     * @param className
+     *
+     * @param {string} className class name to delete
      * @returns {void}
      */
     this.delete = (className) => {
@@ -41,15 +45,17 @@ export class ClassList {
     };
     /**
      * Check if class exist in list
-     * @param className
-     * @returns {boolean}
+     *
+     * @param {string} className class name to check
+     * @returns {boolean} class name is in the list
      */
     this.has = (className) => {
       return this.classes.includes(className);
     };
     /**
      * Join classes seperated by spaces
-     * @returns {string}
+     *
+     * @returns {string} joined values
      */
     this.join = () => {
       return this.classes.join(' ');
@@ -59,8 +65,9 @@ export class ClassList {
 }
 /**
  * Check if all items are string
- * @param items
- * @returns {boolean}
+ *
+ * @param {string[]} items items to check
+ * @returns {boolean} all items are string
  */
 export function allItemsAreString(items) {
   return items && items.every(item => typeof item === 'string');

package/dist/collection/utils/locale.utils.js

@@ -1,18 +1,22 @@
-import { locale, currency } from '../locales';
 /**
  * Format number to the locale currency
- * @param number {number}
+ *
+ * @param {number} number number to format
+ * @param {string} locale locale to apply
+ * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-export function localeCurrency(number) {
+export function localeCurrency(number, locale, currency) {
   return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
 }
 /**
  * Format number to locale
- * @param number {number}
+ *
+ * @param {number} number number to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-export function localeNumber(number) {
+export function localeNumber(number, locale) {
   return new Intl.NumberFormat(locale).format(number);
 }
 /**
@@ -21,10 +25,12 @@ export function localeNumber(number) {
 export const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
 /**
  * Locale date format
- * @param date {string}
+ *
+ * @param {string} date date to format
+ * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-export function localeDate(date) {
+export function localeDate(date, locale) {
   if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
     return '';
   }

package/dist/collection/utils/test.utils.js

@@ -1,26 +1,38 @@
 import { newE2EPage } from '@stencil/core/testing';
+/**
+ * Create E2E page
+ *
+ * @param {string} htmlString html to render
+ * @returns {Promise<DesignSystemE2EPage>} page
+ */
 export async function createPage(htmlString) {
-  const options = {
-    html: `<link rel="stylesheet" href="http://localhost:3333/build/variables.css" /><meta charset="UTF-8">${htmlString}`,
-    viewportWidth: 600,
-  };
+  const defaultSize = 600;
   const page = (await newE2EPage());
-  const viewport = Object.assign({ height: page.viewport().height }, { width: options.viewportWidth });
-  await page.setViewport(viewport);
-  await page.setContent(options.html, { waitUntil: 'networkidle0' });
+  await page.setViewport({ width: defaultSize, height: defaultSize });
+  await page.setContent(`<link rel="stylesheet" href="http://localhost:3333/build/variables.css" /><meta charset="UTF-8">${htmlString}`, { waitUntil: 'networkidle0' });
   await page.evaluateHandle('document.fonts.ready');
   // monkey patch screenshot function to add some extra features
   const screenshot = page.screenshot;
-  page.screenshot = async function () {
+  page.screenshot = async () => {
+    let width = page.viewport().width;
+    let height = page.viewport().height;
+    // if viewport has not been redefined
+    if (page.viewport().width === defaultSize && page.viewport().height === defaultSize) {
+      const htmlElement = await page.$('html');
+      const boundingBox = await htmlElement.boundingBox();
+      width = Math.round(boundingBox.width);
+      height = Math.round(boundingBox.height);
+    }
     return screenshot.call(page, {
-      clip: {
-        x: 0,
-        y: 0,
-        width: page.viewport().width,
-        height: page.viewport().height,
-      },
+      clip: { x: 0, y: 0, width, height },
     });
   };
   return page;
 }
-export const cloneDeep = el => JSON.parse(JSON.stringify(el));
+/**
+ * Clone Deep function
+ *
+ * @param {unknown} obj object to clone
+ * @returns {unknown} cloned json
+ */
+export const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));

package/dist/collection/variables.css

@@ -53,11 +53,11 @@
   --color-info: var(--color-info-h), var(--color-info-s), var(--color-info-l);
 
   /* Danger */
-  /* #df242c; */
-  /* rgb(223, 36, 44); */
+  /* #db1f29; */
+  /* rgb(219, 31, 41); */
   --color-danger-h: 357;
-  --color-danger-s: 74.5%;
-  --color-danger-l: 50.8%;
+  --color-danger-s: 75%;
+  --color-danger-l: 49%;
   --color-danger: var(--color-danger-h), var(--color-danger-s), var(--color-danger-l);
 
   /* Dark */
@@ -76,6 +76,21 @@
   --color-light-l: 100%;
   --color-light: var(--color-light-h), var(--color-light-s), var(--color-light-l);
 
+  /* Primary */
+  --color-primary-h: hsl(var(--color-dark-h));
+  --color-primary-s: hsl(var(--color-dark-s));
+  --color-primary-l: hsl(var(--color-dark-l));
+  --color-primary: hsl(var(--color-dark));
+
+  /* Secondary */
+  --color-secondary-h: hsl(var(--color-neutral-h));
+  --color-secondary-s: hsl(var(--color-neutral-s));
+  --color-secondary-l: hsl(var(--color-neutral-l));
+  --color-secondary: hsl(var(--color-neutral));
+
+  /* Shadow */
+  --box-shadow: 0 0.3rem 0.8rem 0 rgba(0, 0, 0, 0.1);
+
   /*
     Global
    */
@@ -84,6 +99,7 @@
   /*
     <mg-icon>
    */
+  --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
   --mg-icon-large-size: 2.4rem;
   --mg-icon-extra-large-size: 3.6rem;
@@ -95,6 +111,8 @@
   --mg-button-border-radius: 0.3rem;
   --mg-button-icon-border-radius: var(--default-size);
   --mg-button-disabled-opacity: 0.6;
+  --mg-button-gradient: 1; /* Can only be 1 or 0 to enable disable gradient */
+  --mg-button-border-variation: 1; /* Can only be 1 or 0 to enable disable border variation */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -140,6 +158,20 @@
    */
   --mg-message-border-radius: 0.3rem;
 
+  /*
+    <mg-modal>
+   */
+  --mg-modal-border-radius: 0.5rem;
+  --mg-modal-title-font-size: 1.8rem;
+  --mg-modal-content-font-size: 1.2rem;
+
+  /*
+    <mg-panel>
+   */
+
+  --mg-panel-border-radius: 0.5rem;
+  --mg-panel-background: var(--color-info-h) var(--color-info-s) calc(var(--color-info-l) + 68%);
+
   /*
     Layout
    */
@@ -148,7 +180,6 @@
   /*
     Forms
    */
-  --mg-form-group-vertical-space: 1.5rem;
 
   /*
     <mg-input-...>
@@ -158,6 +189,9 @@
   --mg-inputs-color: #b5c2c9;
   --mg-inputs-spacer: 1rem;
 
+  /* Error message background */
+  --mg-inputs-error-bg-color: var(--color-danger-h), calc(var(--color-danger-s) + 5%), calc(var(--color-danger-l) + 49%);
+
   /* Input focus shadow */
   /* #b5c2c9 */
   /* rgb(0, 221, 255); */