@mgdis/mg-components 5.1.0 → 5.3.0

package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts

@@ -0,0 +1,119 @@
+import { ClassList } from '../../../../utils/components.utils';
+import { MgMenu } from '../mg-menu/mg-menu';
+import { MenuItemSizeType, Status } from './mg-menu-item.conf';
+export declare class MgMenuItem {
+  /************
+   * Internal *
+   ************/
+  private readonly name;
+  private readonly navigationButton;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgMenuItemElement;
+  /************
+   * Props *
+   ************/
+  /**
+   * Define menu-item badge
+   * when defined menu-item contain an anchor instead of button
+   */
+  href: string;
+  /**
+   * Define menu-item status. Default: "visible"
+   */
+  status: Status;
+  validateStatus(newValue: MgMenuItem['status'], oldValue?: MgMenuItem['status']): void;
+  /**
+   * Define menu-item size. Default: "large".
+   */
+  size: MenuItemSizeType;
+  validateSize(newValue: MgMenuItem['size'], oldValue?: MgMenuItem['size']): void;
+  /**
+   * Define menu-item content expanded. Default: false.
+   */
+  expanded: boolean;
+  validateExpanded(newValue: MgMenuItem['expanded']): void;
+  /************
+   * States *
+   ************/
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Component button classes
+   */
+  navigationButtonClassList: ClassList;
+  /**
+   * Parent menu direction
+   */
+  direction: MgMenu['direction'];
+  /**
+   * Does component is in main menu
+   */
+  isInMainMenu: boolean;
+  /**
+   * Does component have children. Default: false.
+   */
+  hasChildren: boolean;
+  validateHasChildren(newValue: boolean): void;
+  /************
+   * Methods *
+   ************/
+  /**
+   * Toggle expanded prop value
+   *
+   * @returns {void}
+   */
+  private toggleExpanded;
+  /**
+   * Does an HTMLElement contain child with given Status
+   *
+   * @param {HTMLElement} element to parse
+   * @param {MgMenuItem['status']} status to check
+   * @returns {boolean} true if element with status is found
+   */
+  private hasChildElementStatus;
+  /**
+   * Is component contextual direction match the given direction
+   *
+   * @param {MgMenuItem['direction']} direction in parent menu
+   * @returns {boolean} true is direction match the direction propertie
+   */
+  private isdirection;
+  /************
+   * Handlers *
+   ************/
+  /**
+   * Handle interacrtive element click
+   *
+   * @param {MouseEvent} event click on element
+   * @returns {void}
+   */
+  private handleElementCLick;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Check if component slots configuration
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad(): ReturnType<typeof setTimeout>;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

package/dist/types/components/molecules/mg-form/mg-form.d.ts

@@ -6,12 +6,15 @@ export declare class MgForm {
    ************/
   private mgInputs;
   private mgButtons;
-  private requiredMessage;
+  private classAllRequired;
   private form;
   private messages;
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgFormElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
@@ -31,6 +34,7 @@ export declare class MgForm {
    * Define if form is disabled
    */
   disabled: boolean;
+  handleAttributeChange(): void;
   /**
    * Define form valid state
    */
@@ -43,6 +47,10 @@ export declare class MgForm {
    * Component classes
    */
   classList: ClassList;
+  /**
+   * Required message
+   */
+  requiredMessage: string;
   /**
    * Emitted event on form validity check
    * Tells if form is valid or not
@@ -71,7 +79,19 @@ export declare class MgForm {
    * @returns {void}
    */
   private checkValidity;
+  /**
+   * Handle Form Submit
+   *
+   * @param {SubmitEvent} event submit event
+   * @returns {void}
+   */
   private handleFormSubmit;
+  /**
+   * Set mgInputs
+   *
+   * @returns {void}
+   */
+  private setMgInputs;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/molecules/mg-message/mg-message.d.ts

@@ -11,6 +11,9 @@ export declare class MgMessage {
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgMessageElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)

package/dist/types/components/molecules/mg-modal/mg-modal.d.ts

@@ -13,6 +13,9 @@ export declare class MgModal {
   /**************
    * Decorators *
    **************/
+  /**
+   * Get component DOM element
+   */
   element: HTMLMgModalElement;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)

package/dist/types/components/molecules/mg-tabs/doc/mg-tabs.stories.d.ts

@@ -3,7 +3,7 @@ declare const _default: {
   title: string;
   argTypes: {
     size: {
-      options: string[];
+      options: readonly ["regular", "large"];
       control: {
         type: string;
       };

package/dist/types/components/molecules/mg-tabs/mg-tabs.conf.d.ts

@@ -1,4 +1,8 @@
-import { BadgeType } from '../../atoms/mg-badge/mg-badge.conf';
+import { MgBadge } from '../../atoms/mg-badge/mg-badge';
+import { MgIcon } from '../../atoms/mg-icon/mg-icon';
+/**
+ * Available tabs items status
+ */
 export declare enum Status {
   VISIBLE = "visible",
   HIDDEN = "hidden",
@@ -11,11 +15,15 @@ export declare enum Status {
  */
 export declare type TabItem = {
   label: string;
-  icon?: string;
-  badge?: BadgeType;
+  icon?: MgIcon['icon'];
+  badge?: Pick<MgBadge, 'value' | 'variant' | 'label'>;
   status: Status;
 };
 /**
  * List of all possibles sizes
  */
-export declare const sizes: string[];
+export declare const sizes: readonly ["regular", "large"];
+/**
+ * Variant type from variants
+ */
+export declare type SizeType = typeof sizes[number];

package/dist/types/components/molecules/mg-tabs/mg-tabs.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
-import { TabItem } from './mg-tabs.conf';
+import { TabItem, SizeType } from './mg-tabs.conf';
 export declare class MgTabs {
   /************
    * Internal *
@@ -25,24 +25,24 @@ export declare class MgTabs {
    * Required for accessibility
    */
   label: string;
-  validateLabel(newValue: string): void;
+  validateLabel(newValue: MgTabs['label']): void;
   /**
    * Define tabs size
    */
-  size: string;
-  validateSize(newValue: string): void;
+  size: SizeType;
+  validateSize(newValue: MgTabs['size']): void;
   /**
    * Tabs items
    * Required
    */
   items: string[] | TabItem[];
-  validateItems(newValue: string[] | TabItem[]): void;
+  validateItems(newValue: MgTabs['items']): void;
   /**
    * Active tab number
    * default: first is 1
    */
   activeTab: number;
-  validateActiveTab(newValue: number): void;
+  validateActiveTab(newValue: MgTabs['activeTab']): void;
   /**
    * Component tabs
    */

package/dist/types/components.d.ts

@@ -5,21 +5,24 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
-import { BadgeType } from "./components/atoms/mg-badge/mg-badge.conf";
+import { BadgeVariantType } from "./components/atoms/mg-badge/mg-badge.conf";
 import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.conf";
+import { IconSizeType, IconVariantType } from "./components/atoms/mg-icon/mg-icon.conf";
 import { CheckboxValue } from "./components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf";
 import { Width } from "./components/molecules/inputs/MgInput.conf";
 import { RadioOption } from "./components/molecules/inputs/mg-input-radio/mg-input-radio.conf";
 import { SelectOption } from "./components/molecules/inputs/mg-input-select/mg-input-select.conf";
 import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-input-toggle.conf";
+import { Direction } from "./components/molecules/menu/mg-menu/mg-menu.conf";
+import { MenuItemSizeType, Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
 import { Placement } from "@popperjs/core";
-import { TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+import { SizeType, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 export namespace Components {
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
          */
-        "label": BadgeType['label'];
+        "label": string;
         /**
           * Define if button is using outline style
          */
@@ -27,11 +30,11 @@ export namespace Components {
         /**
           * Badge value
          */
-        "value": BadgeType['value'];
+        "value": string | number;
         /**
           * Define button variant
          */
-        "variant": string;
+        "variant"?: BadgeVariantType;
     }
     interface MgButton {
         /**
@@ -150,7 +153,7 @@ export namespace Components {
         /**
           * Define icon size
          */
-        "size": string;
+        "size": IconSizeType;
         /**
           * Make the icon spin
          */
@@ -158,7 +161,7 @@ export namespace Components {
         /**
           * Define icon variant Add a background to the icon based on variant color
          */
-        "variant": string;
+        "variant"?: IconVariantType;
     }
     interface MgIllustratedMessage {
         /**
@@ -860,6 +863,34 @@ export namespace Components {
          */
         "value": any;
     }
+    interface MgMenu {
+        /**
+          * Component display direction. Default: "horizontal"
+         */
+        "direction": Direction;
+        /**
+          * Menu label. Include short menu description. Required for accessibility
+         */
+        "label": string;
+    }
+    interface MgMenuItem {
+        /**
+          * Define menu-item content expanded. Default: false.
+         */
+        "expanded": boolean;
+        /**
+          * Define menu-item badge when defined menu-item contain an anchor instead of button
+         */
+        "href": string;
+        /**
+          * Define menu-item size. Default: "large".
+         */
+        "size": MenuItemSizeType;
+        /**
+          * Define menu-item status. Default: "visible"
+         */
+        "status": Status;
+    }
     interface MgMessage {
         /**
           * Define if message has a cross button RG 01: https://jira.mgdis.fr/browse/PDA9-140
@@ -990,7 +1021,7 @@ export namespace Components {
         /**
           * Define tabs size
          */
-        "size": string;
+        "size": SizeType;
     }
     interface MgTag {
         /**
@@ -1208,6 +1239,18 @@ declare global {
         prototype: HTMLMgInputToggleElement;
         new (): HTMLMgInputToggleElement;
     };
+    interface HTMLMgMenuElement extends Components.MgMenu, HTMLStencilElement {
+    }
+    var HTMLMgMenuElement: {
+        prototype: HTMLMgMenuElement;
+        new (): HTMLMgMenuElement;
+    };
+    interface HTMLMgMenuItemElement extends Components.MgMenuItem, HTMLStencilElement {
+    }
+    var HTMLMgMenuItemElement: {
+        prototype: HTMLMgMenuItemElement;
+        new (): HTMLMgMenuItemElement;
+    };
     interface HTMLMgMessageElement extends Components.MgMessage, HTMLStencilElement {
     }
     var HTMLMgMessageElement: {
@@ -1276,6 +1319,8 @@ declare global {
         "mg-input-textarea": HTMLMgInputTextareaElement;
         "mg-input-title": HTMLMgInputTitleElement;
         "mg-input-toggle": HTMLMgInputToggleElement;
+        "mg-menu": HTMLMgMenuElement;
+        "mg-menu-item": HTMLMgMenuItemElement;
         "mg-message": HTMLMgMessageElement;
         "mg-modal": HTMLMgModalElement;
         "mg-pagination": HTMLMgPaginationElement;
@@ -1291,7 +1336,7 @@ declare namespace LocalJSX {
         /**
           * Badge label. Include short description. Required for accessibility
          */
-        "label": BadgeType['label'];
+        "label": string;
         /**
           * Define if button is using outline style
          */
@@ -1299,11 +1344,11 @@ declare namespace LocalJSX {
         /**
           * Badge value
          */
-        "value": BadgeType['value'];
+        "value": string | number;
         /**
           * Define button variant
          */
-        "variant"?: string;
+        "variant"?: BadgeVariantType;
     }
     interface MgButton {
         /**
@@ -1429,7 +1474,7 @@ declare namespace LocalJSX {
         /**
           * Define icon size
          */
-        "size"?: string;
+        "size"?: IconSizeType;
         /**
           * Make the icon spin
          */
@@ -1437,7 +1482,7 @@ declare namespace LocalJSX {
         /**
           * Define icon variant Add a background to the icon based on variant color
          */
-        "variant"?: string;
+        "variant"?: IconVariantType;
     }
     interface MgIllustratedMessage {
         /**
@@ -2166,6 +2211,34 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    interface MgMenu {
+        /**
+          * Component display direction. Default: "horizontal"
+         */
+        "direction"?: Direction;
+        /**
+          * Menu label. Include short menu description. Required for accessibility
+         */
+        "label": string;
+    }
+    interface MgMenuItem {
+        /**
+          * Define menu-item content expanded. Default: false.
+         */
+        "expanded"?: boolean;
+        /**
+          * Define menu-item badge when defined menu-item contain an anchor instead of button
+         */
+        "href"?: string;
+        /**
+          * Define menu-item size. Default: "large".
+         */
+        "size"?: MenuItemSizeType;
+        /**
+          * Define menu-item status. Default: "visible"
+         */
+        "status"?: Status;
+    }
     interface MgMessage {
         /**
           * Define if message has a cross button RG 01: https://jira.mgdis.fr/browse/PDA9-140
@@ -2332,7 +2405,7 @@ declare namespace LocalJSX {
         /**
           * Define tabs size
          */
-        "size"?: string;
+        "size"?: SizeType;
     }
     interface MgTag {
         /**
@@ -2386,6 +2459,8 @@ declare namespace LocalJSX {
         "mg-input-textarea": MgInputTextarea;
         "mg-input-title": MgInputTitle;
         "mg-input-toggle": MgInputToggle;
+        "mg-menu": MgMenu;
+        "mg-menu-item": MgMenuItem;
         "mg-message": MgMessage;
         "mg-modal": MgModal;
         "mg-pagination": MgPagination;
@@ -2419,6 +2494,8 @@ declare module "@stencil/core" {
             "mg-input-textarea": LocalJSX.MgInputTextarea & JSXBase.HTMLAttributes<HTMLMgInputTextareaElement>;
             "mg-input-title": LocalJSX.MgInputTitle & JSXBase.HTMLAttributes<HTMLMgInputTitleElement>;
             "mg-input-toggle": LocalJSX.MgInputToggle & JSXBase.HTMLAttributes<HTMLMgInputToggleElement>;
+            "mg-menu": LocalJSX.MgMenu & JSXBase.HTMLAttributes<HTMLMgMenuElement>;
+            "mg-menu-item": LocalJSX.MgMenuItem & JSXBase.HTMLAttributes<HTMLMgMenuItemElement>;
             "mg-message": LocalJSX.MgMessage & JSXBase.HTMLAttributes<HTMLMgMessageElement>;
             "mg-modal": LocalJSX.MgModal & JSXBase.HTMLAttributes<HTMLMgModalElement>;
             "mg-pagination": LocalJSX.MgPagination & JSXBase.HTMLAttributes<HTMLMgPaginationElement>;

package/dist/types/locales/index.d.ts

@@ -59,7 +59,13 @@ declare const messages: {
         minMax: string;
       };
       numeric: {
-        min: string;
+        min: string; /**
+         * 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
+         */
         max: string;
         minMax: string;
       };

package/dist/types/stories/icons.stories.d.ts

@@ -2,7 +2,7 @@ declare const _default: {
   title: string;
   argTypes: {
     size: {
-      options: string[];
+      options: readonly ["small", "regular", "large", "extra-large"];
       control: {
         type: string;
       };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.1.0",
+  "version": "5.3.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -51,12 +51,12 @@
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.12",
-    "@storybook/addon-actions": "^6.5.12",
-    "@storybook/addon-docs": "^6.5.12",
-    "@storybook/addon-essentials": "^6.5.12",
-    "@storybook/addon-links": "^6.5.12",
-    "@storybook/html": "^6.5.12",
+    "@storybook/addon-a11y": "^6.5.13",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-docs": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
+    "@storybook/html": "^6.5.13",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
     "@types/jest-image-snapshot": "^4.3.1",
@@ -77,7 +77,6 @@
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^13.0.0",
     "jsx-dom": "^8.0.1-beta.1",
-    "mutation-observer": "^1.0.3",
     "npm-run-all": "^4.1.5",
     "prettier": "^2.5.1",
     "puppeteer": "^13.3.2",

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

@@ -1,38 +0,0 @@
-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 defaultSize = 600;
-  const page = (await newE2EPage());
-  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 () => {
-    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, height },
-    });
-  };
-  return page;
-}
-/**
- * Clone Deep function
- *
- * @param {unknown} obj object to clone
- * @returns {unknown} cloned json
- */
-export const cloneDeep = (obj) => JSON.parse(JSON.stringify(obj));