@mgdis/mg-components 5.8.2 → 5.10.0

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

@@ -41,7 +41,6 @@ export declare class MgPagination {
   currentPageChange: EventEmitter<number>;
   /**
    * Change current page from target
-   *
    * @param {number} target target page
    * @returns {void}
    */
@@ -51,14 +50,12 @@ export declare class MgPagination {
    ************/
   /**
    * select handler
-   *
    * @param {InputEvent} event value change event
    * @returns {void}
    */
   private handleSelect;
   /**
    * Go to 'previous/next' page button handler
-   *
    * @param {string} action navigation action
    * @param {boolean} disabled button disable state
    * @returns {void}
@@ -69,13 +66,11 @@ export declare class MgPagination {
    *************/
   /**
    * 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-panel/mg-panel.d.ts

@@ -70,7 +70,6 @@ export declare class MgPanel {
    ************/
   /**
    * Toggle is editing state
-   *
    * @returns {void}
    */
   private toggleIsEditing;
@@ -79,32 +78,27 @@ export declare class MgPanel {
    ************/
   /**
    * Collapse button click handler
-   *
    * @returns {void}
    */
   private handleCollapseButton;
   /**
    * Edit button click handler
-   *
    * @returns {void}
    */
   private handleEditButton;
   /**
    * Update title handler
-   *
    * @param {CustomEvent<string>} event input value change event
    * @returns {void}
    */
   private handleUpdateTitle;
   /**
    * Cancel edition button handler
-   *
    * @returns {void}
    */
   private handleCancelEditButton;
   /**
    * Validate edition button handler
-   *
    * @returns {void}
    */
   private handleValidateEditButton;
@@ -113,26 +107,22 @@ export declare class MgPanel {
    *************/
   /**
    * Check if props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * Header left conditional render
-   *
    * @typedef {HTMLElement} HTMLMgButtonElement
    * @returns {HTMLMgButtonElement | HTMLElement | HTMLElement[]} header left element
    */
   private headerLeft;
   /**
    * Edit DOM after render
-   *
    * @returns {void}
    */
   componentDidRender(): void;
   /**
    * Render component
-   *
    * @returns {HTMLElement} html element
    */
   render(): HTMLElement;

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

@@ -56,26 +56,22 @@ export declare class MgPopover {
   displayChange: EventEmitter<boolean>;
   /**
    * Check if clicked outside of component
-   *
    * @param {MouseEvent} event mouse event
    * @returns {void}
    */
   private clickOutside;
   /**
    * Show popover
-   *
    * @returns {void}
    */
   private show;
   /**
    * Hide popover
-   *
    * @returns {void}
    */
   private hide;
   /**
    * Handle action for close button
-   *
    * @returns {void}
    */
   private handleCloseButton;
@@ -84,19 +80,16 @@ export declare class MgPopover {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void} timeout
    */
   componentWillLoad(): void;
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentDidLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

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

@@ -26,7 +26,6 @@ export declare class MgSkipLinks {
    **********/
   /**
    * Handle link click and emit go-to-anchor event
-   *
    * @param {MouseEvent} event mouse event
    * @returns {void}
    */
@@ -36,13 +35,11 @@ export declare class MgSkipLinks {
    *************/
   /**
    * 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

@@ -57,7 +57,6 @@ export declare class MgTabs {
   activeTabChange: EventEmitter<number>;
   /**
    * 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
@@ -65,7 +64,6 @@ export declare class MgTabs {
   private tabHasStatus;
   /**
    * Method to get element id from index
-   *
    * @param {string} element to get id
    * @param {number} index to generate id
    * @returns {string} generated element id
@@ -73,40 +71,34 @@ export declare class MgTabs {
   private getElementId;
   /**
    * Method to get tab item index
-   *
    * @param {number} index to get
    * @returns {number} index
    */
   private getTabItemIndex;
   /**
    * Method to get the active-tab value
-   *
    * @returns {number} of the active-tab
    */
   private getActiveTab;
   /**
    * Handle click events on tabs
-   *
    * @param {MouseEvent} event mouse event
    */
   private handleClick;
   /**
    * get navigation button class from given status
-   *
    * @param {Status} status button tab status
    * @returns {string} button class/selector variant
    */
   private getNavigationButtonClass;
   /**
    * Handle keyboard event on tabs
-   *
    * @param {MouseEvent} event mouse event
    * @returns {void}
    */
   private handleKeydown;
   /**
    * Method to reset focus behavior
-   *
    * @returns {void}
    */
   private resetFocus;
@@ -119,19 +111,16 @@ export declare class MgTabs {
    *************/
   /**
    * Check if component props are well configured on init
-   *
    * @returns {void}
    */
   componentWillLoad(): void;
   /**
    * add listners
-   *
    * @returns {void}
    */
   componentDidLoad(): void;
   /**
    * Render
-   *
    * @returns {HTMLElement} HTML Element
    */
   render(): HTMLElement;

package/dist/types/components.d.ts

@@ -8,7 +8,8 @@ import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { MgActionMoreButtonType, MgActionMoreIconType, MgActionMoreItemType } from "./components/molecules/mg-action-more/mg-action-more.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 { VariantStyleType, VariantType as VariantType1 } from "./components/atoms/mg-card/mg-card.conf";
+import { IconSizeType, IconVariantStyleType, 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";
@@ -17,6 +18,7 @@ import { ToggleValue } from "./components/molecules/inputs/mg-input-toggle/mg-in
 import { IconType, SizeType, SlotLabelType } from "./components/molecules/mg-item-more/mg-item-more.conf";
 import { Direction, ItemMoreType, MenuSizeType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
 import { Status } from "./components/molecules/menu/mg-menu-item/mg-menu-item.conf";
+import { VariantType as VariantType2 } from "./components/molecules/mg-message/mg-message.conf";
 import { Placement } from "@popperjs/core";
 import { SkipLink } from "./components/molecules/mg-skip-links/mg-skip-links.conf";
 import { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
@@ -97,6 +99,14 @@ export namespace Components {
         "variant": VariantType;
     }
     interface MgCard {
+        /**
+          * Define variant prop Default: undefined
+         */
+        "variant": undefined | VariantType1;
+        /**
+          * Define variantStyle prop Default: undefined
+         */
+        "variantStyle": undefined | VariantStyleType;
     }
     interface MgCharacterLeft {
         /**
@@ -169,7 +179,7 @@ export namespace Components {
     }
     interface MgIcon {
         /**
-          * Icon to display
+          * Icon to display.
          */
         "icon": string;
         /**
@@ -181,9 +191,13 @@ export namespace Components {
          */
         "spin": boolean;
         /**
-          * Define icon variant Add a background to the icon based on variant color
+          * Define icon variant color
          */
-        "variant"?: IconVariantType;
+        "variant": IconVariantType;
+        /**
+          * Define icon color variant style Add a color to the icon based on variant color with given style 'full': Used to set a circular background with variant soft color and icon variant color 'background': Used to set a circular background with variant soft color 'icon': Used to set a color only to the icon
+         */
+        "variantStyle": IconVariantStyleType;
     }
     interface MgIllustratedMessage {
         /**
@@ -955,7 +969,7 @@ export namespace Components {
         /**
           * Message variant
          */
-        "variant": string;
+        "variant": VariantType2;
     }
     interface MgModal {
         /**
@@ -1506,6 +1520,14 @@ declare namespace LocalJSX {
         "variant"?: VariantType;
     }
     interface MgCard {
+        /**
+          * Define variant prop Default: undefined
+         */
+        "variant"?: undefined | VariantType1;
+        /**
+          * Define variantStyle prop Default: undefined
+         */
+        "variantStyle"?: undefined | VariantStyleType;
     }
     interface MgCharacterLeft {
         /**
@@ -1585,9 +1607,9 @@ declare namespace LocalJSX {
     }
     interface MgIcon {
         /**
-          * Icon to display
+          * Icon to display.
          */
-        "icon"?: string;
+        "icon": string;
         /**
           * Define icon size
          */
@@ -1597,9 +1619,13 @@ declare namespace LocalJSX {
          */
         "spin"?: boolean;
         /**
-          * Define icon variant Add a background to the icon based on variant color
+          * Define icon variant color
          */
         "variant"?: IconVariantType;
+        /**
+          * Define icon color variant style Add a color to the icon based on variant color with given style 'full': Used to set a circular background with variant soft color and icon variant color 'background': Used to set a circular background with variant soft color 'icon': Used to set a color only to the icon
+         */
+        "variantStyle"?: IconVariantStyleType;
     }
     interface MgIllustratedMessage {
         /**
@@ -2414,7 +2440,7 @@ declare namespace LocalJSX {
         /**
           * Message variant
          */
-        "variant"?: string;
+        "variant"?: VariantType2;
     }
     interface MgModal {
         /**

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

@@ -126,7 +126,6 @@ declare const messages: {
 };
 /**
  * Get Intl object
- *
  * @param {HTMLElement} element element we need to get the language
  * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */

package/dist/types/utils/behaviors.utils.d.ts

@@ -15,7 +15,6 @@ export declare class OverflowBehavior {
    **********/
   /**
    * Disconnect ResizeObserver
-   *
    * @returns {void}
    */
   disconnect: () => void;
@@ -24,28 +23,24 @@ export declare class OverflowBehavior {
    ************/
   /**
    * run overflow behavior
-   *
    * @param {number} width width of the container. Optional.
    * @returns {void}
    */
   private run;
   /**
    * Get interactive children filtred by authorized nodeName ['MG-MENU-ITEM', 'MG-BUTTON']
-   *
    * @param {Element} element element to parse
    * @returns {Element[]} children
    */
   private getInteractiveItems;
   /**
    * Update displayed items in container from a given available space
-   *
    * @param {number} availableWidth available width in container to display child items
    * @returns {void}
    */
   private updateDisplayedItems;
   /**
    * Utility method to know if item overflow partialy or totaly in the container
-   *
    * @param {number} cumulateWidth previous sibling elements cumulate width + item width
    * @param {HTMLElement} item item HTML element
    * @param {number} availableWidth container available width
@@ -54,14 +49,12 @@ export declare class OverflowBehavior {
   private isOverflowElement;
   /**
    * Utility method to know if a given element is the 'MORE' element
-   *
    * @param {Element} element element to match with 'MORE' element
    * @returns {boolean} truthy if element is the 'MORE' element
    */
   private isMoreElement;
   /**
    * Toggle display item element
-   *
    * @param {HTMLElement} item item to control
    * @param {boolean} isHidden is item hidden
    * @returns {void}
@@ -69,7 +62,6 @@ export declare class OverflowBehavior {
   private toggleItem;
   /**
    * Toggle element's hidde attribute
-   *
    * @param {Element} element element to toggle
    * @param {boolean} isHidden element is hidden
    * @returns {void}
@@ -77,7 +69,6 @@ export declare class OverflowBehavior {
   private toggleElement;
   /**
    * Remove hidden attributes on all items
-   *
    * @returns {void}
    */
   private restoreItems;

package/dist/types/utils/components.utils.d.ts

@@ -1,6 +1,5 @@
 /**
  * Create random ID
- *
  * @param {string} prefix  add prefix to created ID
  * @param {number} length ID length
  * @returns {string} ID
@@ -15,42 +14,36 @@ export declare class ClassList {
   constructor(classlist?: string[]);
   /**
    * Add class
-   *
    * @param {string} className class name to add
    * @returns {void}
    */
   add: (className: string) => void;
   /**
    * Delete class
-   *
    * @param {string} className class name to delete
    * @returns {void}
    */
   delete: (className: string) => void;
   /**
    * Check if class exist in list
-   *
    * @param {string} className class name to check
    * @returns {boolean} class name is in the list
    */
   has: (className: string) => boolean;
   /**
    * Join classes seperated by spaces
-   *
    * @returns {string} joined values
    */
   join: () => string;
 }
 /**
  * Check if all items are string
- *
  * @param {unknown} items items to check
  * @returns {boolean} all items are string
  */
 export declare const allItemsAreString: (items: unknown) => items is string[];
 /**
  * Check if element is a heading
- *
  * @param {Element} element slotted element
  * @param {string[]} tagNames allowed tag names list
  * @returns {boolean} element is a heading
@@ -61,14 +54,13 @@ export declare const isTagName: (element: Element, tagNames: string[]) => boolea
  */
 export declare const focusableElements = "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]";
 /**
- *
+ * Get windows
  * @param {Window} localWindow the window we are lookink for other windows
  * @returns {Window[]} The list of windows found
  */
 export declare const getWindows: (localWindow: Window) => Window[];
 /**
  * Get parent windows
- *
  * @param {Window} localWindow the window we are lookink for parents
  * @param {Window[]} windows The list of allready found windows
  * @returns {Window[]} The list of windows found

package/dist/types/utils/locale.utils.d.ts

@@ -1,6 +1,5 @@
 /**
  * Format number to the locale currency
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @param {string} currency currency to apply
@@ -9,7 +8,6 @@
 export declare const localeCurrency: (number: number, locale: string, currency: string) => string;
 /**
  * Format number to locale
- *
  * @param {number} number number to format
  * @param {string} locale locale to apply
  * @returns {string} formatted number
@@ -21,7 +19,6 @@ export declare const localeNumber: (number: number, locale: string) => string;
 export declare const dateRegExp: RegExp;
 /**
  * Locale date format
- *
  * @param {string} date date to format
  * @param {string} locale locale to apply
  * @returns {string} formatted date
@@ -30,7 +27,6 @@ export declare const localeDate: (date: string, locale: string) => string;
 /**
  * Get locale and messages
  * 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
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale

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

@@ -1,14 +1,12 @@
 import { MockCustomEvent } from '@stencil/core/mock-doc';
 /**
  * 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 mutation observer, but its methods.
@@ -37,7 +35,6 @@ type SetupMutationObserverMockParams = {
 export declare const setupMutationObserverMock: ({ disconnect, observe, takeRecords }: SetupMutationObserverMockParams) => typeof MutationObserver;
 /**
  * Utility function that mocks the `ResizeObserver` API. Recommended to execute inside `beforeEach`.
- *
  * @param resizeObserverMock - 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.
@@ -70,7 +67,6 @@ type setupResizeObserverMockParams = {
 export declare const setupResizeObserverMock: ({ disconnect, observe }: setupResizeObserverMockParams) => typeof ResizeObserver;
 /**
  * Utility function that mocks the `SubmitEvent` API. Recommended to execute inside `beforeEach`.
- *
  * @returns {void}
  * @example
  * ```
@@ -80,7 +76,6 @@ export declare const setupResizeObserverMock: ({ disconnect, observe }: setupRes
 export declare const setupSubmitEventMock: () => typeof MockCustomEvent;
 /**
  * force popover id when component use randomed identifier
- *
  * @param {Element} component element wich include mg-popover
  * @param {string} id new fixed id
  * @param {string} interactiveElement element where attribute 'aria-controls' is set
@@ -93,14 +88,12 @@ export declare const forcePopoverId: (component: Element, id: string, interactiv
  * this is due to internal function isHTMLElement(), so we can not mock it directly.
  * this function check if test DOM element mockHTMLElement instance is 'instanceof HTMLElement'
  * so we only override the console.error side effect for this error
- *
  * @returns {void}
  */
 export declare const mockConsoleError: () => void;
 /**
  * Add missing window.frames property to test context
  * usefull for component with iframe listeners, ex: mg-popover
- *
  * @returns {void}
  */
 export declare const mockWindowFrames: () => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.8.2",
+  "version": "5.10.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -30,8 +30,8 @@
   "devDependencies": {
     "@babel/core": "^7.20.12",
     "@babel/plugin-transform-react-jsx": "^7.20.13",
+    "@playwright/test": "^1.33.0",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
-    "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
     "@storybook/addon-a11y": "^6.5.16",
     "@storybook/addon-actions": "^6.5.16",
@@ -40,34 +40,32 @@
     "@storybook/addon-links": "^6.5.16",
     "@storybook/html": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
-    "@types/jest": "^26.0.24",
+    "@types/jest": "npm:@types/jest@^26",
     "@types/jest-image-snapshot": "^4.3.2",
     "@types/node": "^18.14.0",
-    "@typescript-eslint/eslint-plugin": "^4.33.0",
-    "@typescript-eslint/parser": "^4.33.0",
     "babel-loader": "^8.3.0",
     "babel-plugin-jsx-pragmatic": "^1.0.2",
     "chromatic": "^6.15.0",
     "css-loader": "^5.2.7",
-    "eslint": "^7.32.0",
-    "eslint-plugin-jsdoc": "^38.1.6",
-    "eslint-plugin-jsx-a11y": "^6.7.1",
-    "eslint-plugin-react": "^7.32.2",
-    "eslint-plugin-storybook": "^0.6.10",
-    "jest": "^27.0.3",
-    "jest-cli": "^26.6.3",
+    "eslint": "^8.39.0",
+    "eslint-plugin-storybook": "^0.6.11",
+    "jest": "npm:jest@^26",
+    "jest-cli": "npm:jest-cli@^26",
     "jest-image-snapshot": "^4.5.1",
-    "jest-junit": "^14.0.1",
+    "jest-junit": "^15.0.0",
     "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
+    "playwright-config": "^1.0.0",
     "prettier": "^2.8.4",
     "puppeteer": "^13.7.0",
     "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "turbo": "^1.8.1",
-    "typescript": "^4.9.5"
+    "typescript": "^4.9.5",
+    "@mgdis/linting-stencil": "1.0.0",
+    "eslint-config-stencil": "1.0.0",
+    "tsconfig": "1.0.0"
   },
   "license": "BSD-3-Clause",
   "scripts": {
@@ -82,10 +80,11 @@
     "test": "TZ=UTC stencil test --spec --e2e",
     "test:unit": "TZ=UTC stencil test --spec --collectCoverage",
     "test:e2e": "stencil test --e2e",
+    "test:e2e:playwright": "pnpm dlx playwright test",
     "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",
-    "coverage": "TZ=UTC stencil test --spec --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\""
+    "coverage": "TZ=UTC stencil test --spec --no-build --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\""
   }
 }