@mgdis/mg-components 4.2.1 → 5.1.0

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

@@ -1,10 +1,13 @@
-import { ButtonType } from './mg-button.conf';
+import { VariantType, ButtonType } from './mg-button.conf';
 import { ClassList } from '../../../utils/components.utils';
 export declare class MgButton {
   /************
    * Internal *
    ************/
   private onClickElementFn;
+  private classDisabled;
+  private classLoading;
+  private classFullWidth;
   /**************
    * Decorators *
    **************/
@@ -15,8 +18,8 @@ export declare class MgButton {
   /**
    * Define button variant
    */
-  variant: string;
-  validateVariant(newValue: string, oldValue?: string): void;
+  variant: VariantType;
+  validateVariant(newValue: VariantType, oldValue?: VariantType): void;
   /**
    * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
    */
@@ -28,9 +31,13 @@ export declare class MgButton {
   label: string;
   /**
    * Define button type
-   * Default: 'submit', as HTMLButtonElement type is submit by default
    */
   type: ButtonType;
+  /**
+   * Set button to full-width
+   */
+  fullWidth: boolean;
+  validateFullWidth(newValue: any): void;
   /**
    * Define form id to attach button with.
    * If this attribute is not set, the <button> is associated with its ancestor <form> element.
@@ -51,19 +58,6 @@ export declare class MgButton {
    * Parent component have to remove the attribute 'disabled' when the process ends.
    */
   disableOnClick: boolean;
-  /**
-   * Prop to set aria-expanded on button element
-   */
-  expanded: boolean;
-  /**
-   * Prop to set aria-controls on button element
-   */
-  controls: string;
-  /**
-   * Option to set aria-haspopup
-   * The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
-   */
-  haspopup: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
   /**
    * Define if button is loading, default to false.
    * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
@@ -82,6 +76,20 @@ export declare class MgButton {
    * @returns {void}
    */
   private handleClick;
+  /**
+   * Handle onKeyDown event
+   *
+   * @param {KeyboardEvent} event keyboard event
+   * @returns {void}
+   */
+  private handleKeydown;
+  /**
+   * Handle onKeyUp event
+   *
+   * @param {KeyboardEvent} event keyboard event
+   * @returns {void}
+   */
+  private handleKeyup;
   /**
    * Check if props are well configured on init
    *

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

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgCard: any;

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

@@ -0,0 +1,11 @@
+export declare class MgCard {
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -0,0 +1,6 @@
+declare const _default: {
+  component: string;
+  title: string;
+};
+export default _default;
+export declare const MgDivider: any;

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

@@ -0,0 +1,15 @@
+export declare class MgDivider {
+  /**************
+   * Decorators *
+   **************/
+  /**
+   * Define component size
+   */
+  size: 'regular' | 'full';
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render(): HTMLElement;
+}

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

@@ -6,15 +6,9 @@ declare const _default: {
   };
   argTypes: {
     placement: {
-      options: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
     };
   };
 };

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

@@ -1,11 +1,3 @@
-/**
- * List of all possibles placements
- */
-export declare const placements: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
-/**
- * Placement type from placements
- */
-export declare type Placement = typeof placements[number];
 export declare enum Guard {
   FOCUS = "focus",
   HOVER_TOOLTIP_ELEMENT = "hoverTooltipGuard",

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

@@ -1,4 +1,4 @@
-import { Placement } from './mg-tooltip.conf';
+import { Placement } from '@popperjs/core';
 export declare class MgTooltip {
   /************
    * Internal *

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

@@ -16,6 +16,10 @@ export declare class MgDetails {
    */
   toggleOpened: string;
   validateTitles(newValue: string): void;
+  /**
+   * Hide summary element
+   */
+  hideSummary: boolean;
   /**
    * Define if details are diplayed
    */

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

@@ -10,6 +10,10 @@ export declare class MgIllustratedMessage {
    * Define illustration size
    */
   size: 'regular' | 'small';
+  /**
+   * Define component orientation
+   */
+  direction: 'vertical' | 'horizontal';
   /*************
    * Lifecycle *
    *************/

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

@@ -4,6 +4,7 @@ export declare class MgModal {
   /************
    * Internal *
    ************/
+  private modalFocusableElements;
   private classHide;
   private closeButtonId;
   private titleId;
@@ -60,6 +61,7 @@ export declare class MgModal {
    * @returns {void}
    */
   handleKeyDown(event: KeyboardEvent): void;
+  private setFocus;
   /*************
    * Handlers *
    *************/
@@ -78,6 +80,12 @@ export declare class MgModal {
    * @returns {void}
    */
   componentWillLoad(): void;
+  /**
+   * Add observer on component to set focus when displayed
+   *
+   * @returns {void}
+   */
+  componentDidLoad(): void;
   /**
    * Render
    *

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

@@ -56,6 +56,7 @@ export declare class MgPagination {
    * Go to 'previous/next' page button handler
    *
    * @param {string} action navigation action
+   * @param {boolean} disabled button disable state
    * @returns {void}
    */
   private handleGoToPage;

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

@@ -12,15 +12,9 @@ declare const _default: {
   };
   argTypes: {
     placement: {
-      options: readonly ["auto", "auto-start", "auto-end", "top", "top-start", "top-end", "bottom", "bottom-start", "bottom-end", "right", "right-start", "right-end", "left", "left-start", "left-end"];
       control: {
         type: string;
       };
-      table: {
-        defaultValue: {
-          summary: string;
-        };
-      };
     };
   };
 };

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

@@ -1,5 +1,5 @@
 import { EventEmitter } from '../../../stencil-public-runtime';
-import { Placement } from './mg-popover.conf';
+import { Placement } from '@popperjs/core';
 export declare class MgPopover {
   /************
    * Internal *

package/dist/types/components.d.ts

@@ -6,15 +6,14 @@
  */
 import { HTMLStencilElement, JSXBase } from "./stencil-public-runtime";
 import { BadgeType } from "./components/atoms/mg-badge/mg-badge.conf";
-import { ButtonType } from "./components/atoms/mg-button/mg-button.conf";
+import { ButtonType, VariantType } from "./components/atoms/mg-button/mg-button.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 { Placement } from "./components/molecules/mg-popover/mg-popover.conf";
+import { Placement } from "@popperjs/core";
 import { TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
-import { Placement as Placement1 } from "./components/atoms/mg-tooltip/mg-tooltip.conf";
 export namespace Components {
     interface MgBadge {
         /**
@@ -35,10 +34,6 @@ export namespace Components {
         "variant": string;
     }
     interface MgButton {
-        /**
-          * Prop to set aria-controls on button element
-         */
-        "controls": string;
         /**
           * Option to set input disable on click, in order to prevent multi-click. Parent component have to remove the attribute 'disabled' when the process ends.
          */
@@ -47,18 +42,14 @@ export namespace Components {
           * Disable button
          */
         "disabled": boolean;
-        /**
-          * Prop to set aria-expanded on button element
-         */
-        "expanded": boolean;
         /**
           * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
          */
         "form": string;
         /**
-          * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+          * Set button to full-width
          */
-        "haspopup": boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+        "fullWidth": boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
@@ -72,13 +63,15 @@ export namespace Components {
          */
         "label": string;
         /**
-          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+          * Define button type
          */
         "type": ButtonType;
         /**
           * Define button variant
          */
-        "variant": string;
+        "variant": VariantType;
+    }
+    interface MgCard {
     }
     interface MgCharacterLeft {
         /**
@@ -99,6 +92,10 @@ export namespace Components {
           * Define if details are diplayed
          */
         "expanded": boolean;
+        /**
+          * Hide summary element
+         */
+        "hideSummary": boolean;
         /**
           * Displayed title when details are closed
          */
@@ -108,6 +105,12 @@ export namespace Components {
          */
         "toggleOpened": string;
     }
+    interface MgDivider {
+        /**
+          * Define component size
+         */
+        "size": 'regular' | 'full';
+    }
     interface MgForm {
         /**
           * Define if form is disabled
@@ -158,6 +161,10 @@ export namespace Components {
         "variant": string;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define component orientation
+         */
+        "direction": 'vertical' | 'horizontal';
         /**
           * Define illustration size
          */
@@ -1015,7 +1022,7 @@ export namespace Components {
         /**
           * Tooltip placement
          */
-        "placement": Placement1;
+        "placement": Placement;
     }
 }
 export interface MgDetailsCustomEvent<T> extends CustomEvent<T> {
@@ -1099,6 +1106,12 @@ declare global {
         prototype: HTMLMgButtonElement;
         new (): HTMLMgButtonElement;
     };
+    interface HTMLMgCardElement extends Components.MgCard, HTMLStencilElement {
+    }
+    var HTMLMgCardElement: {
+        prototype: HTMLMgCardElement;
+        new (): HTMLMgCardElement;
+    };
     interface HTMLMgCharacterLeftElement extends Components.MgCharacterLeft, HTMLStencilElement {
     }
     var HTMLMgCharacterLeftElement: {
@@ -1111,6 +1124,12 @@ declare global {
         prototype: HTMLMgDetailsElement;
         new (): HTMLMgDetailsElement;
     };
+    interface HTMLMgDividerElement extends Components.MgDivider, HTMLStencilElement {
+    }
+    var HTMLMgDividerElement: {
+        prototype: HTMLMgDividerElement;
+        new (): HTMLMgDividerElement;
+    };
     interface HTMLMgFormElement extends Components.MgForm, HTMLStencilElement {
     }
     var HTMLMgFormElement: {
@@ -1240,8 +1259,10 @@ declare global {
     interface HTMLElementTagNameMap {
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
+        "mg-card": HTMLMgCardElement;
         "mg-character-left": HTMLMgCharacterLeftElement;
         "mg-details": HTMLMgDetailsElement;
+        "mg-divider": HTMLMgDividerElement;
         "mg-form": HTMLMgFormElement;
         "mg-icon": HTMLMgIconElement;
         "mg-illustrated-message": HTMLMgIllustratedMessageElement;
@@ -1285,10 +1306,6 @@ declare namespace LocalJSX {
         "variant"?: string;
     }
     interface MgButton {
-        /**
-          * Prop to set aria-controls on button element
-         */
-        "controls"?: string;
         /**
           * Option to set input disable on click, in order to prevent multi-click. Parent component have to remove the attribute 'disabled' when the process ends.
          */
@@ -1297,18 +1314,14 @@ declare namespace LocalJSX {
           * Disable button
          */
         "disabled"?: boolean;
-        /**
-          * Prop to set aria-expanded on button element
-         */
-        "expanded"?: boolean;
         /**
           * Define form id to attach button with. If this attribute is not set, the <button> is associated with its ancestor <form> element.
          */
         "form"?: string;
         /**
-          * Option to set aria-haspopup The aria-haspopup state informs assistive technology users that there is a popup and the type of popup it is, but provides no interactivity.
+          * Set button to full-width
          */
-        "haspopup"?: boolean | 'menu' | 'listbox' | 'tree' | 'grid' | 'dialog';
+        "fullWidth"?: boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
          */
@@ -1322,13 +1335,15 @@ declare namespace LocalJSX {
          */
         "label"?: string;
         /**
-          * Define button type Default: 'submit', as HTMLButtonElement type is submit by default
+          * Define button type
          */
         "type"?: ButtonType;
         /**
           * Define button variant
          */
-        "variant"?: string;
+        "variant"?: VariantType;
+    }
+    interface MgCard {
     }
     interface MgCharacterLeft {
         /**
@@ -1349,6 +1364,10 @@ declare namespace LocalJSX {
           * Define if details are diplayed
          */
         "expanded"?: boolean;
+        /**
+          * Hide summary element
+         */
+        "hideSummary"?: boolean;
         /**
           * Emmited event when expanded change
          */
@@ -1356,11 +1375,17 @@ declare namespace LocalJSX {
         /**
           * Displayed title when details are closed
          */
-        "toggleClosed"?: string;
+        "toggleClosed": string;
         /**
           * Displayed title when details are opened
          */
-        "toggleOpened"?: string;
+        "toggleOpened": string;
+    }
+    interface MgDivider {
+        /**
+          * Define component size
+         */
+        "size"?: 'regular' | 'full';
     }
     interface MgForm {
         /**
@@ -1415,6 +1440,10 @@ declare namespace LocalJSX {
         "variant"?: string;
     }
     interface MgIllustratedMessage {
+        /**
+          * Define component orientation
+         */
+        "direction"?: 'vertical' | 'horizontal';
         /**
           * Define illustration size
          */
@@ -2335,13 +2364,15 @@ declare namespace LocalJSX {
         /**
           * Tooltip placement
          */
-        "placement"?: Placement1;
+        "placement"?: Placement;
     }
     interface IntrinsicElements {
         "mg-badge": MgBadge;
         "mg-button": MgButton;
+        "mg-card": MgCard;
         "mg-character-left": MgCharacterLeft;
         "mg-details": MgDetails;
+        "mg-divider": MgDivider;
         "mg-form": MgForm;
         "mg-icon": MgIcon;
         "mg-illustrated-message": MgIllustratedMessage;
@@ -2371,8 +2402,10 @@ declare module "@stencil/core" {
         interface IntrinsicElements {
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
+            "mg-card": LocalJSX.MgCard & JSXBase.HTMLAttributes<HTMLMgCardElement>;
             "mg-character-left": LocalJSX.MgCharacterLeft & JSXBase.HTMLAttributes<HTMLMgCharacterLeftElement>;
             "mg-details": LocalJSX.MgDetails & JSXBase.HTMLAttributes<HTMLMgDetailsElement>;
+            "mg-divider": LocalJSX.MgDivider & JSXBase.HTMLAttributes<HTMLMgDividerElement>;
             "mg-form": LocalJSX.MgForm & JSXBase.HTMLAttributes<HTMLMgFormElement>;
             "mg-icon": LocalJSX.MgIcon & JSXBase.HTMLAttributes<HTMLMgIconElement>;
             "mg-illustrated-message": LocalJSX.MgIllustratedMessage & JSXBase.HTMLAttributes<HTMLMgIllustratedMessageElement>;

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

@@ -5,7 +5,7 @@
  * @param {number} length ID length
  * @returns {string} ID
  */
-export declare function createID(prefix?: string, length?: number): string;
+export declare const createID: (prefix?: string, length?: number) => string;
 /**
  * Class to manage component classlist
  * Set() are not working when imported in project
@@ -47,7 +47,7 @@ export declare class ClassList {
  * @param {string[]} items items to check
  * @returns {boolean} all items are string
  */
-export declare function allItemsAreString(items: string[]): boolean;
+export declare const allItemsAreString: (items: string[]) => boolean;
 /**
  * Check if element is a heading
  *
@@ -55,4 +55,8 @@ export declare function allItemsAreString(items: string[]): boolean;
  * @param {string[]} tagNames allowed tag names list
  * @returns {boolean} element is a heading
  */
-export declare function isTagName(element: Element, tagNames: string[]): boolean;
+export declare const isTagName: (element: Element, tagNames: string[]) => boolean;
+/**
+ * Focusable elements query selector
+ */
+export declare const focusableElements = "a[href], button, input, textarea, select, details, [tabindex]:not([tabindex=\"-1\"]), [identifier]";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "4.2.1",
+  "version": "5.1.0",
   "description": "MG Components",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -42,7 +42,7 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.2",
-    "@stencil/core": "^2.18.0",
+    "@stencil/core": "^2.18.1",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
@@ -70,13 +70,14 @@
     "eslint-plugin-jsdoc": "^38.0.6",
     "eslint-plugin-jsx-a11y": "^6.6.1",
     "eslint-plugin-react": "^7.26.1",
-    "eslint-plugin-storybook": "^0.6.4",
+    "eslint-plugin-storybook": "^0.6.6",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "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",