@mgdis/mg-components 5.8.2 → 5.9.1

package/dist/mg-components/styles/reset-mg-card-slotted-variables.scss

@@ -5,5 +5,6 @@
     --mg-card-border-radius: var(--mg-card-border-radius-default);
     --mg-card-background: var(--mg-card-background-default);
     --mg-card-box-shadow: var(--mg-card-box-shadow-default);
+    --mg-card-max-width: unset;
   }
 }

package/dist/mg-components/variables.css

@@ -98,6 +98,9 @@
   /* Shadow */
   --box-shadow: 0 0.3rem 0.8rem 0 hsl(var(--color-dark), 0.15);
 
+  /* Soft style */
+  --mg-color-soft-l: 90%;
+
   /*
     Global
    */
@@ -109,8 +112,10 @@
    */
   --mg-icon-small-size: 1.2rem;
   --mg-icon-regular-size: 1.6rem;
+  --mg-icon-medium-size: 2rem;
   --mg-icon-large-size: 2.4rem;
-  --mg-icon-extra-large-size: 3.6rem;
+  --mg-icon-extra-large-size: 3.2rem;
+  --mg-icon-border-radius: 50%;
 
   /*
     <mg-button>
@@ -160,6 +165,7 @@
   --mg-popover-background-color: var(--color-light);
   --mg-popover-font-color: var(--color-font-dark);
   --mg-popover-title-font-size: 1.4rem;
+  --mg-popover-max-width: 40rem;
 
   /*
     <mg-message>

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

@@ -0,0 +1,16 @@
+/**
+ * List available variants
+ */
+export declare const variants: readonly ["info", "warning", "success", "danger", "app"];
+/**
+ * Variant type
+ */
+export type VariantType = (typeof variants)[number];
+/**
+ * List available variant styles
+ */
+export declare const variantStyles: readonly ["bar-left", "fill"];
+/**
+ * VariantStyle type
+ */
+export type VariantStyleType = (typeof variantStyles)[number];

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

@@ -1,7 +1,36 @@
+import { ClassList } from '../../../utils/components.utils';
+import { type VariantStyleType, type VariantType } from './mg-card.conf';
 export declare class MgCard {
+  /*************
+   * Private *
+   *************/
+  private readonly name;
+  private readonly baseClass;
   /*************
    * Lifecycle *
    *************/
+  /**
+   * Define variant prop
+   * Default: undefined
+   */
+  variant: undefined | VariantType;
+  validateVariant(newValue: MgCard['variant'], oldValue?: MgCard['variant']): void;
+  /**
+   * Define variantStyle prop
+   * Default: undefined
+   */
+  variantStyle: undefined | VariantStyleType;
+  validateVariantStyle(newValue: MgCard['variantStyle'], oldValue?: MgCard['variantStyle']): void;
+  /**
+   * Component classes
+   */
+  classList: ClassList;
+  /**
+   * Check if props are well configured on init
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
   /**
    * Render
    *

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

@@ -5,7 +5,7 @@ export declare const icons: unknown;
 /**
  * List of all possibles sizes
  */
-export declare const sizes: readonly ["small", "regular", "large", "extra-large"];
+export declare const sizes: readonly ["small", "regular", "medium", "large", "extra-large"];
 /**
  * Icon Size from sizes
  */
@@ -13,8 +13,16 @@ export type IconSizeType = (typeof sizes)[number];
 /**
  * List of all possibles variants
  */
-export declare const variants: readonly ["success", "warning", "danger", "info"];
+export declare const variants: readonly ["success", "warning", "danger", "info", "app"];
 /**
  * Variant type from variants
  */
 export type IconVariantType = (typeof variants)[number];
+/**
+ * List of all possibles variants styles
+ */
+export declare const variantStyles: readonly ["icon", "background", "full"];
+/**
+ * Variant style type from variant style
+ */
+export type IconVariantStyleType = (typeof variantStyles)[number];

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

@@ -1,8 +1,8 @@
-import { IconVariantType, IconSizeType } from './mg-icon.conf';
+import { IconVariantType, IconSizeType, IconVariantStyleType } from './mg-icon.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgIcon {
   /**
-   * Icon to display
+   * Icon to display.
    */
   icon: string;
   validateIcon(newValue: MgIcon['icon'], oldValue?: MgIcon['icon']): void;
@@ -12,11 +12,19 @@ export declare class MgIcon {
   size: IconSizeType;
   validateSize(newValue: MgIcon['size'], oldValue?: MgIcon['size']): void;
   /**
-   * Define icon variant
-   * Add a background to the icon based on variant color
+   * Define icon variant color
    */
-  variant?: IconVariantType;
+  variant: IconVariantType;
   validateVariant(newValue: MgIcon['variant'], oldValue?: MgIcon['variant']): void;
+  /**
+   * 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;
+  validateVariantStyle(newValue: MgIcon['variantStyle'], oldValue?: MgIcon['variantStyle']): void;
   /**
    * Make the icon spin
    */

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

@@ -6,6 +6,7 @@ export declare class MgTooltip {
   private popper;
   private tooltip;
   private tooltipedElement;
+  private windows;
   private guard;
   /**************
    * Decorators *
@@ -49,6 +50,20 @@ export declare class MgTooltip {
    * @returns {void}
    */
   private hide;
+  /**
+   * Check if clicked outside of component and hidde tooltip
+   *
+   * @param {MouseEvent} event mouse event
+   * @returns {void}
+   */
+  private clickOutside;
+  /**
+   * Check if 'Escape' key is pressed of component and hidde tooltip
+   *
+   * @param {KeyboardEvent} event keyboard event
+   * @returns {void}
+   */
+  private pressEscape;
   /**
    * Method to set display prop
    *
@@ -89,6 +104,12 @@ export declare class MgTooltip {
   /*************
    * Lifecycle *
    *************/
+  /**
+   * set variables
+   *
+   * @returns {void}
+   */
+  componentWillLoad(): void;
   /**
    * Get slotted element
    * Check if it already contain an interactive element, if not we need to add a tabIndex attribute

package/dist/types/components/molecules/inputs/mg-input-numeric/mg-input-numeric.d.ts

@@ -23,7 +23,7 @@ export declare class MgInputNumeric {
    * Component value
    */
   value: string;
-  validateValue(newValue: string): void;
+  validateValue(newValue: MgInputNumeric['value']): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -79,7 +79,7 @@ export declare class MgInputNumeric {
    * Define numeric type
    */
   type: string;
-  validateType(newValue: string): void;
+  validateType(newValue: MgInputNumeric['type']): void;
   /**
    * Define currency
    */
@@ -97,13 +97,13 @@ export declare class MgInputNumeric {
    * integer is the number before the decimal point
    */
   integerLength: number;
-  validateIntegerLength(newValue: number): void;
+  validateIntegerLength(newValue: MgInputNumeric['integerLength']): void;
   /**
    * Override decimal length
    * decimal is the number after the decimal point
    */
   decimalLength: number;
-  validateDecimalLength(newValue: number): void;
+  validateDecimalLength(newValue: MgInputNumeric['decimalLength']): void;
   /**
    * Define input pattern to validate
    */
@@ -142,7 +142,7 @@ export declare class MgInputNumeric {
    * Displayed value in input
    * Change on focus/blur
    *
-   * @returns {string} display value
+   * @returns {MgInputNumeric['value'] | MgInputNumeric['readonlyValue']} display value
    */
   private displayValue;
   /**

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

@@ -1,4 +1,8 @@
 /**
  * List of all possibles message variants
  */
-export declare const variants: string[];
+export declare const variants: readonly ["info", "warning", "success", "danger"];
+/**
+ * Variant type
+ */
+export type VariantType = (typeof variants)[number];

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

@@ -1,5 +1,6 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
 import { ClassList } from '../../../utils/components.utils';
+import { VariantType } from './mg-message.conf';
 export declare class MgMessage {
   /************
    * Internal *
@@ -27,23 +28,23 @@ export declare class MgMessage {
    * Value is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)
    */
   delay: number;
-  validateDelay(newValue: number): void;
+  validateDelay(newValue: MgMessage['delay']): void;
   /**
    * Message variant
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  variant: VariantType;
+  validateVariant(newValue: MgMessage['variant'], oldValue?: MgMessage['variant']): void;
   /**
    * Define if message has a cross button
    * RG 01: https://jira.mgdis.fr/browse/PDA9-140
    */
   closeButton: boolean;
-  validateCloseButton(newValue: boolean): void;
+  validateCloseButton(newValue: MgMessage['closeButton']): void;
   /**
    * Define if message is hidden
    */
   hide: boolean;
-  validateHide(newValue: boolean): void;
+  validateHide(newValue: MgMessage['hide']): void;
   /**
    * Component classes
    */

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.8.2",
+  "version": "5.9.1",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -40,7 +40,7 @@
     "@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",
@@ -54,10 +54,10 @@
     "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",
+    "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",
     "prettier": "^2.8.4",