@mgdis/mg-components 3.1.0 → 3.2.0

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

@@ -1,9 +1,11 @@
 import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';
 import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
+import { sizes } 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 {
@@ -13,6 +15,10 @@ export class MgTabs {
      * 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
@@ -28,7 +34,8 @@ export class MgTabs {
     this.classList = new ClassList(['mg-tabs']);
     /**
      * Handle click events on tabs
-     * @param event
+     *
+     * @param {MouseEvent} event mouse event
      */
     this.handleClick = (event) => {
       const tabId = event.currentTarget.getAttribute('data-index');
@@ -36,10 +43,11 @@ export class MgTabs {
     };
     /**
      * 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
@@ -52,7 +60,7 @@ export class MgTabs {
         tabId--;
       }
       // get selected tab
-      selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      const selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
       // apply selected tab if exist
       if (selectedTab !== null) {
         selectedTab.focus();
@@ -69,10 +77,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, disabled: false }));
     }
     // Object array
     else if (newValue && newValue.every(item => isTabItem(item))) {
@@ -92,27 +106,40 @@ export class MgTabs {
    *************/
   /**
    * 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 },
-          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}` })));
-      })));
+      h("div", { class: this.classList.join() },
+        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': true,
+              'mg-tabs__navigation-button--active': tabIndex === this.activeTab,
+              'mg-tabs__navigation-button--disabled': tab.disabled,
+            }, 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, disabled: tab.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}` })));
+        }))));
   }
   static get is() { return "mg-tabs"; }
   static get encapsulation() { return "scoped"; }
@@ -132,7 +159,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 +185,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,
@@ -203,6 +248,9 @@ export class MgTabs {
   }; }
   static get elementRef() { return "element"; }
   static get watchers() { return [{
+      "propName": "size",
+      "methodName": "validateSize"
+    }, {
       "propName": "items",
       "methodName": "validateItems"
     }, {

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

@@ -1,7 +1,14 @@
 import { h } from '@stencil/core';
+import { sizes } from './mg-tabs.conf';
 export default {
   component: 'mg-tabs',
   title: 'Molecules/mg-tabs',
+  argTypes: {
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+  },
 };
 /**
  * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
@@ -19,8 +26,9 @@ const Template = args => {
 export const MgTabs = Template.bind({});
 MgTabs.args = {
   items: ['Tab 1', 'Tab 2', 'Tab 3'],
-  label: 'Short tabs description. Needeed for accessibility',
+  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: [
@@ -32,6 +40,7 @@ MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
     {
       label: 'Tab 2',
       badge: { value: 5, label: 'messages' },
+      disabled: true,
     },
     {
       label: 'Tab 3',

package/dist/collection/stories/messages.stories.js

@@ -25,7 +25,7 @@ const Template = args => (h("main", null,
       h("span", { class: "mg-message__content-slot", innerHTML: args.content })),
     h("span", { class: "mg-message__close-button" },
       h("button", { class: "mg-button mg-button--flat mg-button--icon" },
-        h("mg-icon", { icon: "cross", size: "small" })))),
+        h("mg-icon", { icon: "cross" })))),
   h("h2", null, "w/ actions"),
   h("div", { class: `mg-message mg-message--${args.variant}` },
     h("span", { class: "mg-message__icon" },

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,7 +1,8 @@
 import { locale, currency } from '../locales';
 /**
  * Format number to the locale currency
- * @param number {number}
+ *
+ * @param {number} number number to format
  * @returns {string} formatted currency
  */
 export function localeCurrency(number) {
@@ -9,7 +10,8 @@ export function localeCurrency(number) {
 }
 /**
  * Format number to locale
- * @param number {number}
+ *
+ * @param {number} number number to format
  * @returns {string} formatted number
  */
 export function localeNumber(number) {
@@ -21,7 +23,8 @@ 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
  * @returns {string} formatted date
  */
 export function localeDate(date) {

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

@@ -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
    */
@@ -95,6 +110,7 @@
   --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 */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -140,6 +156,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 +178,6 @@
   /*
     Forms
    */
-  --mg-form-group-vertical-space: 1.5rem;
 
   /*
     <mg-input-...>

package/dist/collection/variables.scss

@@ -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
    */
@@ -95,6 +110,7 @@
   --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 */
 
   /* Primary */
   --mg-button-primary-color-h: var(--color-dark-h);
@@ -140,6 +156,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 +178,6 @@
   /*
     Forms
    */
-  --mg-form-group-vertical-space: 1.5rem;
 
   /*
     <mg-input-...>

package/dist/components/MgInput.js

@@ -10,10 +10,11 @@ var InputClass;
 
 /**
  * Apply in all input child node the aria-describedby attribute
- * @param children
- * @param ariaDescribedbyIDs
- * @param utils
- * @returns {VNode[]}
+ *
+ * @param {VNode[]} children Represent scoped elements
+ * @param {Set<string>} ariaDescribedbyIDs List of IDs
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} Children with aria-describedby attribute
  */
 const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
   if (['input', 'select', 'textarea'].includes(child.vtag)) {
@@ -26,7 +27,8 @@ const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(
 });
 /**
  * Add classes based on props
- * @param props
+ *
+ * @param {MgInputProps} props MgInput Interface Props
  */
 const manageClasses = (props) => {
   props.classList.add('mg-input');
@@ -41,17 +43,19 @@ const manageClasses = (props) => {
   }
 };
 /**
- * Define tagname based on props
- * @param isFieldset
+ * Get tagname
+ *
+ * @param {boolean} isFieldset is fieldset
  * @returns {string} tag name
  */
 const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
 /**
  * Get input template
- * @param props MgInput Interface Props
- * @param children Represent scoped elements
- * @param utils Stencil.js utils
- * @returns JSX template
+ *
+ * @param {MgInputProps} props MgInput Interface Props
+ * @param {VNode[]} children Represent scoped elements
+ * @param {FunctionalUtilities} utils Stencil.js utils
+ * @returns {VNode[]} input template
  */
 const MgInput = (props, children, utils) => {
   /**
@@ -113,15 +117,17 @@ const MgInput = (props, children, utils) => {
   const TagName = getTagName(props.isFieldset);
   /**
    * Get tooltip node
-   * @returns mg-tooltip
+   *
+   * @returns {VNode[]} mg-tooltip
    */
   const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
     h("mg-icon", { icon: "info-circle" })));
   /**
    * Get input title (label) node
-   * @returns mg-input-title
+   *
+   * @returns {VNode[]} mg-input-title
    */
-  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required, "is-legend": props.isFieldset }, props.label));
+  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required && !props.disabled, "is-legend": props.isFieldset }, props.label));
   return (h(TagName, { class: props.classList.join() },
     props.labelOnTop ? (h("div", { class: "mg-input__title" },
       getInputTitle(),

package/dist/components/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
  */
 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 @@ class ClassList {
   constructor(classlist = []) {
     /**
      * Add class
-     * @param className
+     *
+     * @param {string} className class name to add
      * @returns {void}
      */
     this.add = (className) => {
@@ -30,7 +33,8 @@ class ClassList {
     };
     /**
      * Delete class
-     * @param className
+     *
+     * @param {string} className class name to delete
      * @returns {void}
      */
     this.delete = (className) => {
@@ -41,15 +45,17 @@ 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 @@ class ClassList {
 }
 /**
  * Check if all items are string
- * @param items
- * @returns {boolean}
+ *
+ * @param {string[]} items items to check
+ * @returns {boolean} all items are string
  */
 function allItemsAreString(items) {
   return items && items.every(item => typeof item === 'string');

package/dist/components/index.d.ts

@@ -9,7 +9,7 @@ import type { Components, JSX } from "../types/components";
  * "setAssetPath(document.currentScript.src)", or using a bundler's replace plugin to
  * dynamically set the path at build time, such as "setAssetPath(process.env.ASSET_PATH)".
  * But do note that this configuration depends on how your script is bundled, or lack of
- * bunding, and where your assets can be loaded from. Additionally custom bundling
+ * bundling, and where your assets can be loaded from. Additionally custom bundling
  * will have to ensure the static assets are copied to its build directory.
  */
 export declare const setAssetPath: (path: string) => void;