@mgdis/mg-components 5.3.0 → 5.5.0

package/dist/types/components/atoms/mg-badge/doc/mg-badge.stories.d.ts

@@ -2,17 +2,6 @@ declare const _default: {
   component: string;
   title: string;
   argTypes: {
-    variant: {
-      options: readonly ["info", "primary", "secondary", "success", "warning", "danger"];
-      control: {
-        type: string;
-      };
-      table: {
-        defaultValue: {
-          summary: "info";
-        };
-      };
-    };
     value: {
       control: {
         type: string;

package/dist/types/components/atoms/mg-badge/mg-badge.d.ts

@@ -4,7 +4,7 @@ export declare class MgBadge {
   /************
    * Internal *
    ************/
-  private classOutline;
+  private readonly classOutline;
   /**************
    * Decorators *
    **************/

package/dist/types/components/atoms/mg-button/doc/mg-button.stories.d.ts

@@ -2,17 +2,6 @@ declare const _default: {
   component: string;
   title: string;
   argTypes: {
-    variant: {
-      options: readonly ["primary", "secondary", "danger", "danger-alt", "info", "flat", "success"];
-      control: {
-        type: string;
-      };
-      table: {
-        defaultValue: {
-          summary: "primary";
-        };
-      };
-    };
     type: {
       options: ("button" | "submit" | "reset")[];
       control: {

package/dist/types/components/atoms/mg-button/mg-button.conf.d.ts

@@ -1,9 +1,9 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: readonly ["primary", "secondary", "danger", "danger-alt", "info", "flat", "success"];
+export declare const variants: readonly ["primary", "secondary", "danger", "danger-alt", "info", "flat", "success", "link"];
 /**
- * ButtonType type from buttonTypes
+ * VariantType type from button variants
  */
 export declare type VariantType = typeof variants[number];
 /**

package/dist/types/components/atoms/mg-button/mg-button.d.ts

@@ -5,9 +5,9 @@ export declare class MgButton {
    * Internal *
    ************/
   private onClickElementFn;
-  private classDisabled;
-  private classLoading;
-  private classFullWidth;
+  private readonly classDisabled;
+  private readonly classLoading;
+  private readonly classFullWidth;
   /**************
    * Decorators *
    **************/
@@ -37,7 +37,7 @@ export declare class MgButton {
    * Set button to full-width
    */
   fullWidth: boolean;
-  validateFullWidth(newValue: any): void;
+  validateFullWidth(newValue: MgButton['fullWidth']): void;
   /**
    * Define form id to attach button with.
    * If this attribute is not set, the <button> is associated with its ancestor <form> element.
@@ -47,7 +47,7 @@ export declare class MgButton {
    * Disable button
    */
   disabled: boolean;
-  disabledHandler(isDisabled: boolean): void;
+  disabledHandler(isDisabled: MgButton['disabled']): void;
   /**
    * Define if button is round.
    * Used for icon button.
@@ -64,7 +64,7 @@ export declare class MgButton {
    * It's required to reset to false when action/promise in parent is done to stop the loading state
    */
   loading: boolean;
-  loadingHandler(newValue: boolean): void;
+  loadingHandler(newValue: MgButton['loading']): void;
   /**
    * Component classes
    */

package/dist/types/components/atoms/mg-tag/doc/mg-tag.stories.d.ts

@@ -1,19 +1,6 @@
 declare const _default: {
   component: string;
   title: string;
-  argTypes: {
-    variant: {
-      options: string[];
-      control: {
-        type: string;
-      };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
-    };
-  };
 };
 export default _default;
 export declare const MgTag: any;

package/dist/types/components/atoms/mg-tag/mg-tag.conf.d.ts

@@ -1,4 +1,8 @@
 /**
  * List of all possibles variants
  */
-export declare const variants: string[];
+export declare const variants: readonly ["primary", "secondary", "success", "warning", "danger", "info"];
+/**
+ * TagVariantType type from tag variants
+ */
+export declare type TagVariantType = typeof variants[number];

package/dist/types/components/atoms/mg-tag/mg-tag.d.ts

@@ -1,26 +1,47 @@
+import { TagVariantType } from './mg-tag.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgTag {
   /************
    * Internal *
    ************/
-  private classOutline;
+  private readonly classOutline;
+  private readonly classSoft;
   /**************
    * Decorators *
    **************/
   /**
-   * Define button variant
+   * Get component DOM element
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  element: HTMLMgTagElement;
   /**
-   * Define if button is using outline style
+   * Define tag variant
+   */
+  variant: TagVariantType;
+  validateVariant(newValue: MgTag['variant'], oldValue?: MgTag['variant']): void;
+  /**
+   * Define if tag is using outline style
    */
   outline: boolean;
-  validateOutline(newValue: boolean): void;
+  validateOutline(newValue: MgTag['outline']): void;
+  /**
+   * Define if tag is using soft style
+   */
+  soft: boolean;
+  validateSoft(newValue: MgTag['soft']): void;
   /**
    * Component classes
    */
   classList: ClassList;
+  /*************
+   * Methods *
+   *************/
+  /**
+   * Validate the given textContent
+   *
+   * @param {string} textContent html element textContent property
+   * @returns {void}
+   */
+  private validateTextContent;
   /*************
    * Lifecycle *
    *************/

package/dist/types/components/atoms/mg-tooltip/mg-tooltip.d.ts

@@ -5,6 +5,7 @@ export declare class MgTooltip {
    ************/
   private popper;
   private tooltip;
+  private tooltipedElement;
   private guard;
   /**************
    * Decorators *
@@ -71,6 +72,20 @@ export declare class MgTooltip {
    * @returns {void}
    */
   private resetGuard;
+  /**
+   * Update slot content when it is a mg-button
+   *
+   * @param {HTMLMgButtonElement} mgButton slotted mg-button
+   * @returns {void}
+   */
+  private setMgButtonWrapper;
+  /**
+   * Init tooltip
+   *
+   * @param {HTMLElement} slotElement slotted element
+   * @param {HTMLElement} interactiveElement interactive element
+   */
+  private initTooltip;
   /*************
    * Lifecycle *
    *************/

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

@@ -1,4 +1,3 @@
-import { ClassList } from '../../../../utils/components.utils';
 import { Direction } from './mg-menu.conf';
 export declare class MgMenu {
   /************
@@ -29,10 +28,6 @@ export declare class MgMenu {
    * is this menu a child menu. Used for conditional render.
    */
   isChildMenu: boolean;
-  /**
-   * Component classes
-   */
-  classList: ClassList;
   /**
    * Close matching menu-item
    *

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

@@ -4,6 +4,7 @@ declare const _default: {
 };
 export default _default;
 export declare const MgMenuItem: any;
+export declare const MgMenuItemAsLink: any;
 export declare const MgMenuItemWhitIcon: any;
 export declare const MgMenuItemWhitBadge: any;
 export declare const MgMenuItemWhitBadgeAndIcon: any;

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

@@ -40,10 +40,6 @@ export declare class MgMenuItem {
   /************
    * States *
    ************/
-  /**
-   * Component classes
-   */
-  classList: ClassList;
   /**
    * Component button classes
    */

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

@@ -6,7 +6,7 @@ export declare class MgForm {
    ************/
   private mgInputs;
   private mgButtons;
-  private classAllRequired;
+  private readonly classAllRequired;
   private form;
   private messages;
   /**************

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

@@ -4,7 +4,7 @@ export declare class MgMessage {
   /************
    * Internal *
    ************/
-  private classHide;
+  private readonly classHide;
   private closeButtonId;
   private storedTimer;
   private messages;

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

@@ -5,7 +5,7 @@ export declare class MgModal {
    * Internal *
    ************/
   private modalFocusableElements;
-  private classHide;
+  private readonly classHide;
   private closeButtonId;
   private titleId;
   private messages;

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

@@ -0,0 +1,11 @@
+declare const _default: {
+  component: string;
+  title: string;
+  parameters: {
+    actions: {
+      handles: string[];
+    };
+  };
+};
+export default _default;
+export declare const MgSkipLinks: any;

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

@@ -0,0 +1,7 @@
+/**
+ * type SkipLink
+ */
+export declare type SkipLink = {
+  href: string;
+  label: string;
+};

package/dist/types/components/molecules/mg-skip-links/mg-skip-links.d.ts

@@ -0,0 +1,34 @@
+import { SkipLink } from './mg-skip-links.conf';
+export declare class MgSkipLinks {
+  /************
+   * Internal *
+   ************/
+  private messages;
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Get component DOM element
+   */
+  element: HTMLMgSkipLinksElement;
+  /**
+   * Skip links
+   */
+  links: SkipLink[];
+  validateLinks(links: SkipLink[]): void;
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -5,9 +5,9 @@ export declare class MgTabs {
   /************
    * Internal *
    ************/
-  private tabPanel;
+  private readonly tabPanel;
+  private readonly buttonTabBaseClass;
   private startIndex;
-  private buttonTabBaseClass;
   /**************
    * Decorators *
    **************/

package/dist/types/components.d.ts

@@ -16,7 +16,9 @@ import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-in
 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 { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { SizeType, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
+import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
     interface MgBadge {
         /**
@@ -1001,6 +1003,12 @@ export namespace Components {
          */
         "placement": Placement;
     }
+    interface MgSkipLinks {
+        /**
+          * Skip links
+         */
+        "links": SkipLink[];
+    }
     interface MgTabs {
         /**
           * Active tab number default: first is 1
@@ -1025,13 +1033,17 @@ export namespace Components {
     }
     interface MgTag {
         /**
-          * Define if button is using outline style
+          * Define if tag is using outline style
          */
         "outline": boolean;
         /**
-          * Define button variant
+          * Define if tag is using soft style
          */
-        "variant": string;
+        "soft": boolean;
+        /**
+          * Define tag variant
+         */
+        "variant": TagVariantType;
     }
     interface MgTooltip {
         /**
@@ -1281,6 +1293,12 @@ declare global {
         prototype: HTMLMgPopoverElement;
         new (): HTMLMgPopoverElement;
     };
+    interface HTMLMgSkipLinksElement extends Components.MgSkipLinks, HTMLStencilElement {
+    }
+    var HTMLMgSkipLinksElement: {
+        prototype: HTMLMgSkipLinksElement;
+        new (): HTMLMgSkipLinksElement;
+    };
     interface HTMLMgTabsElement extends Components.MgTabs, HTMLStencilElement {
     }
     var HTMLMgTabsElement: {
@@ -1326,6 +1344,7 @@ declare global {
         "mg-pagination": HTMLMgPaginationElement;
         "mg-panel": HTMLMgPanelElement;
         "mg-popover": HTMLMgPopoverElement;
+        "mg-skip-links": HTMLMgSkipLinksElement;
         "mg-tabs": HTMLMgTabsElement;
         "mg-tag": HTMLMgTagElement;
         "mg-tooltip": HTMLMgTooltipElement;
@@ -2381,6 +2400,12 @@ declare namespace LocalJSX {
          */
         "placement"?: Placement;
     }
+    interface MgSkipLinks {
+        /**
+          * Skip links
+         */
+        "links"?: SkipLink[];
+    }
     interface MgTabs {
         /**
           * Active tab number default: first is 1
@@ -2409,13 +2434,17 @@ declare namespace LocalJSX {
     }
     interface MgTag {
         /**
-          * Define if button is using outline style
+          * Define if tag is using outline style
          */
         "outline"?: boolean;
         /**
-          * Define button variant
+          * Define if tag is using soft style
          */
-        "variant"?: string;
+        "soft"?: boolean;
+        /**
+          * Define tag variant
+         */
+        "variant"?: TagVariantType;
     }
     interface MgTooltip {
         /**
@@ -2466,6 +2495,7 @@ declare namespace LocalJSX {
         "mg-pagination": MgPagination;
         "mg-panel": MgPanel;
         "mg-popover": MgPopover;
+        "mg-skip-links": MgSkipLinks;
         "mg-tabs": MgTabs;
         "mg-tag": MgTag;
         "mg-tooltip": MgTooltip;
@@ -2501,6 +2531,7 @@ declare module "@stencil/core" {
             "mg-pagination": LocalJSX.MgPagination & JSXBase.HTMLAttributes<HTMLMgPaginationElement>;
             "mg-panel": LocalJSX.MgPanel & JSXBase.HTMLAttributes<HTMLMgPanelElement>;
             "mg-popover": LocalJSX.MgPopover & JSXBase.HTMLAttributes<HTMLMgPopoverElement>;
+            "mg-skip-links": LocalJSX.MgSkipLinks & JSXBase.HTMLAttributes<HTMLMgSkipLinksElement>;
             "mg-tabs": LocalJSX.MgTabs & JSXBase.HTMLAttributes<HTMLMgTabsElement>;
             "mg-tag": LocalJSX.MgTag & JSXBase.HTMLAttributes<HTMLMgTagElement>;
             "mg-tooltip": LocalJSX.MgTooltip & JSXBase.HTMLAttributes<HTMLMgTooltipElement>;

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

@@ -41,6 +41,9 @@ declare const messages: {
     panel: {
       editLabel: string;
     };
+    skipLinks: {
+      navLabel: string;
+    };
     general: {
       confirm: string;
       cancel: string;
@@ -97,6 +100,9 @@ declare const messages: {
     panel: {
       editLabel: string;
     };
+    skipLinks: {
+      navLabel: string;
+    };
     general: {
       confirm: string;
       cancel: string;

package/dist/types/stencil-public-runtime.d.ts

@@ -223,6 +223,7 @@ export declare const setMode: (handler: ResolutionHandler) => void;
 /**
  * `getMode()` is used for libraries which provide multiple "modes" for styles.
  * @param ref a reference to the node to get styles for
+ * @returns the current mode or undefined, if not found
  */
 export declare function getMode<T = string | undefined>(ref: any): T;
 export declare function setPlatformHelpers(helpers: {
@@ -237,6 +238,7 @@ export declare function setPlatformHelpers(helpers: {
  * if the path needs to be customized.
  * @param path the path to use in calculating the asset path. this value will be
  * used in conjunction with the base asset path
+ * @returns the base path
  */
 export declare function getAssetPath(path: string): string;
 /**
@@ -252,11 +254,13 @@ export declare function getAssetPath(path: string): string;
  * 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.
  * @param path the asset path to set
+ * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for
+ * @returns a reference to the element
  */
 export declare function getElement(ref: any): HTMLStencilElement;
 /**
@@ -269,6 +273,7 @@ export declare function getElement(ref: any): HTMLStencilElement;
 export declare function forceUpdate(ref: any): void;
 /**
  * getRenderingRef
+ * @returns the rendering ref
  */
 export declare function getRenderingRef(): any;
 export interface HTMLStencilElement extends HTMLElement {

package/dist/types/utils/unit.test.utils.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Clone Deep function
+ *
+ * @param {unknown} obj object to clone
+ * @returns {unknown} cloned json
+ */
+export declare const cloneDeep: (obj: unknown) => unknown;
+/**
+ * Utility function that mocks the `MutationObserver` API. Recommended to execute inside `beforeEach`.
+ *
+ * @param mutationObserverMock - Parameter that is sent to the `Object.defineProperty`
+ * overwrite method. `jest.fn()` mock functions can be passed here if the goal is to not only
+ * mock the resize observer, but its methods.
+ * You can manually fire an intersection entry:
+ * @param {Function} mutationObserverMock.disconnect disconnect function
+ * @param {Function} mutationObserverMock.observe observe fnuction
+ * @param {Function} mutationObserverMock.takeRecords takeRecords fnuction
+ * @returns {MutationObserver} Mocked MutationObserver
+ * @example
+ * ```
+ * let fireMo;
+ * setupMutationObserverMock({
+ *   observe: function () {
+ *     fireMo = this.cb;
+ *   },
+ * });
+ * ...
+ * fireMo([{ type: 'childList', addedNodes: [AMockElemenet, AnotherMockElemenet], target: yourMockElemenet }]);;
+ * ```
+ */
+export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: {
+  disconnect: any;
+  observe: any;
+  takeRecords: any;
+}) => {
+  new (fn: any): {
+    disconnect: () => void;
+    observe: (target: Node, options?: MutationObserverInit) => void;
+    takeRecords: () => MutationRecord[];
+    cb: () => unknown;
+  };
+};

package/package.json

@@ -1,7 +1,12 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.3.0",
+  "version": "5.5.0",
   "description": "MG Components",
+  "packageManager": "pnpm@7.17.1",
+  "engineStrict": true,
+  "engines": {
+    "pnpm": ">=7"
+  },
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
   "es2015": "dist/esm/index.mjs",
@@ -18,45 +23,27 @@
     "Simon Duhem <duhem-s@mgdis.fr>",
     "Nicolas Jouanno <jouanno-n@mgdis.fr>"
   ],
-  "scripts": {
-    "build": "stencil build --docs",
-    "start": "stencil build --dev --watch --serve",
-    "lint": "run-s lint:es lint:prettier",
-    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
-    "lint:es": "eslint src/**/*.{ts,tsx,js}",
-    "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
-    "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
-    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
-    "test": "TZ=UTC stencil test --spec --e2e",
-    "test:unit": "TZ=UTC stencil test --spec",
-    "test:e2e": "stencil test --e2e",
-    "test.watch": "stencil test --spec --e2e --watchAll",
-    "generate": "stencil generate",
-    "storybook": "start-storybook -p 6006",
-    "storybook:build": "build-storybook",
-    "prepare": "husky install"
-  },
   "jest-junit": {
     "outputDirectory": "coverage",
     "outputName": "junit.xml"
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.18.1",
+    "@stencil/core": "^2.20.0",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
-    "@babel/core": "^7.15.5",
+    "@babel/core": "^7.20.5",
     "@babel/plugin-transform-react-jsx": "^7.14.9",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@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/addon-a11y": "^6.5.14",
+    "@storybook/addon-actions": "^6.5.14",
+    "@storybook/addon-docs": "^6.5.14",
+    "@storybook/addon-essentials": "^6.5.14",
+    "@storybook/addon-links": "^6.5.14",
+    "@storybook/html": "^6.5.14",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
     "@types/jest-image-snapshot": "^4.3.1",
@@ -70,7 +57,7 @@
     "eslint-plugin-jsdoc": "^38.0.6",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-storybook": "^0.6.6",
+    "eslint-plugin-storybook": "^0.6.8",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
@@ -84,7 +71,25 @@
     "sass-loader": "^10.2.0",
     "style-loader": "^2.0.0",
     "ts-node": "^10.7.0",
-    "typescript": "^4.4.3"
+    "turbo": "^1.6.3",
+    "typescript": "~4.4.4"
   },
-  "license": "BSD-3-Clause"
-}
+  "license": "BSD-3-Clause",
+  "scripts": {
+    "build": "stencil build --docs",
+    "start": "stencil build --dev --watch --serve",
+    "lint": "run-s lint:es lint:prettier",
+    "lint:fix": "run-s lint:es:fix lint:prettier:fix",
+    "lint:es": "eslint src/**/*.{ts,tsx}",
+    "lint:es:fix": "eslint src/**/*.{ts,tsx} --fix",
+    "lint:prettier": "prettier --check **/*.{ts,tsx,scss,html,mdx,json}",
+    "lint:prettier:fix": "prettier --write **/*.{ts,tsx,scss,html,mdx,json}",
+    "test": "TZ=UTC stencil test --spec --e2e",
+    "test:unit": "TZ=UTC stencil test --spec",
+    "test:e2e": "stencil test --e2e",
+    "test.watch": "stencil test --spec --e2e --watchAll",
+    "generate": "stencil generate",
+    "storybook": "NODE_OPTIONS=--openssl-legacy-provider start-storybook -p 6006",
+    "storybook:build": "NODE_OPTIONS=--openssl-legacy-provider build-storybook"
+  }
+}