@mgdis/mg-components 5.6.0 → 5.8.0

package/dist/types/components.d.ts

@@ -5,6 +5,7 @@
  * It contains typing information for all components that exist in this project.
  */
 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";
@@ -13,13 +14,32 @@ 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, MenuSizeType, MoreItemType } from "./components/molecules/menu/mg-menu/mg-menu.conf";
+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 { 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 { SizeType as SizeType1, TabItem } from "./components/molecules/mg-tabs/mg-tabs.conf";
 import { TagVariantType } from "./components/atoms/mg-tag/mg-tag.conf";
 export namespace Components {
+    interface MgActionMore {
+        /**
+          * Define button properties Default: {variant: 'flat', isIcon: true}.
+         */
+        "button": MgActionMoreButtonType;
+        /**
+          * Define if chevron is display
+         */
+        "displayChevron": boolean;
+        /**
+          * Define displaied icon Default: {icon: 'ellipsis'}
+         */
+        "icon": MgActionMoreIconType;
+        /**
+          * Define the menu-items elements
+         */
+        "items": MgActionMoreItemType[];
+    }
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
@@ -865,19 +885,33 @@ export namespace Components {
          */
         "value": any;
     }
+    interface MgItemMore {
+        /**
+          * Define icon Default: {icon: 'ellipsis-vertical'}
+         */
+        "icon": IconType;
+        /**
+          * Define component child menu size.
+         */
+        "size": SizeType;
+        /**
+          * Define slot label element Default: {display: false}
+         */
+        "slotlabel": SlotLabelType;
+    }
     interface MgMenu {
         /**
           * Component display direction. Default: "horizontal"
          */
         "direction": Direction;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "label": string;
+        "itemMore": ItemMoreType;
         /**
-          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+          * Menu label. Include short menu description. Required for accessibility
          */
-        "moreitem": MoreItemType;
+        "label": string;
         /**
           * Define mg-menu size Default: 'regular'
          */
@@ -892,6 +926,10 @@ export namespace Components {
           * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href": string;
+        /**
+          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+         */
+        "identifier": string;
         /**
           * Define menu-item status. Default: "visible"
          */
@@ -942,6 +980,10 @@ export namespace Components {
           * Component current page
          */
         "currentPage": number;
+        /**
+          * Hide navigation label
+         */
+        "hideNavigationLabels": boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -1037,7 +1079,7 @@ export namespace Components {
         /**
           * Define tabs size
          */
-        "size": SizeType;
+        "size": SizeType1;
     }
     interface MgTag {
         /**
@@ -1076,6 +1118,10 @@ export namespace Components {
         "placement": Placement;
     }
 }
+export interface MgButtonCustomEvent<T> extends CustomEvent<T> {
+    detail: T;
+    target: HTMLMgButtonElement;
+}
 export interface MgDetailsCustomEvent<T> extends CustomEvent<T> {
     detail: T;
     target: HTMLMgDetailsElement;
@@ -1153,6 +1199,12 @@ export interface MgTabsCustomEvent<T> extends CustomEvent<T> {
     target: HTMLMgTabsElement;
 }
 declare global {
+    interface HTMLMgActionMoreElement extends Components.MgActionMore, HTMLStencilElement {
+    }
+    var HTMLMgActionMoreElement: {
+        prototype: HTMLMgActionMoreElement;
+        new (): HTMLMgActionMoreElement;
+    };
     interface HTMLMgBadgeElement extends Components.MgBadge, HTMLStencilElement {
     }
     var HTMLMgBadgeElement: {
@@ -1267,6 +1319,12 @@ declare global {
         prototype: HTMLMgInputToggleElement;
         new (): HTMLMgInputToggleElement;
     };
+    interface HTMLMgItemMoreElement extends Components.MgItemMore, HTMLStencilElement {
+    }
+    var HTMLMgItemMoreElement: {
+        prototype: HTMLMgItemMoreElement;
+        new (): HTMLMgItemMoreElement;
+    };
     interface HTMLMgMenuElement extends Components.MgMenu, HTMLStencilElement {
     }
     var HTMLMgMenuElement: {
@@ -1334,6 +1392,7 @@ declare global {
         new (): HTMLMgTooltipElement;
     };
     interface HTMLElementTagNameMap {
+        "mg-action-more": HTMLMgActionMoreElement;
         "mg-badge": HTMLMgBadgeElement;
         "mg-button": HTMLMgButtonElement;
         "mg-card": HTMLMgCardElement;
@@ -1353,6 +1412,7 @@ declare global {
         "mg-input-textarea": HTMLMgInputTextareaElement;
         "mg-input-title": HTMLMgInputTitleElement;
         "mg-input-toggle": HTMLMgInputToggleElement;
+        "mg-item-more": HTMLMgItemMoreElement;
         "mg-menu": HTMLMgMenuElement;
         "mg-menu-item": HTMLMgMenuItemElement;
         "mg-message": HTMLMgMessageElement;
@@ -1367,6 +1427,24 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface MgActionMore {
+        /**
+          * Define button properties Default: {variant: 'flat', isIcon: true}.
+         */
+        "button"?: MgActionMoreButtonType;
+        /**
+          * Define if chevron is display
+         */
+        "displayChevron"?: boolean;
+        /**
+          * Define displaied icon Default: {icon: 'ellipsis'}
+         */
+        "icon"?: MgActionMoreIconType;
+        /**
+          * Define the menu-items elements
+         */
+        "items": MgActionMoreItemType[];
+    }
     interface MgBadge {
         /**
           * Badge label. Include short description. Required for accessibility
@@ -1414,6 +1492,10 @@ declare namespace LocalJSX {
           * aria-label In case button text is not explicit enough
          */
         "label"?: string;
+        /**
+          * Emmited event when disabled change
+         */
+        "onDisabled-change"?: (event: MgButtonCustomEvent<MgButton['disabled']>) => void;
         /**
           * Define button type
          */
@@ -2246,19 +2328,33 @@ declare namespace LocalJSX {
          */
         "value"?: any;
     }
+    interface MgItemMore {
+        /**
+          * Define icon Default: {icon: 'ellipsis-vertical'}
+         */
+        "icon"?: IconType;
+        /**
+          * Define component child menu size.
+         */
+        "size"?: SizeType;
+        /**
+          * Define slot label element Default: {display: false}
+         */
+        "slotlabel"?: SlotLabelType;
+    }
     interface MgMenu {
         /**
           * Component display direction. Default: "horizontal"
          */
         "direction"?: Direction;
         /**
-          * Menu label. Include short menu description. Required for accessibility
+          * Customize "mg-item-more" element Used with direction: 'vertical' to manage overflow
          */
-        "label": string;
+        "itemMore"?: ItemMoreType;
         /**
-          * Customize mg-menu "more element" Used with direction: 'vertical' to manage overflow
+          * Menu label. Include short menu description. Required for accessibility
          */
-        "moreitem"?: MoreItemType;
+        "label": string;
         /**
           * Define mg-menu size Default: 'regular'
          */
@@ -2273,6 +2369,10 @@ declare namespace LocalJSX {
           * Define menu-item href when defined menu-item contain an anchor instead of button
          */
         "href"?: string;
+        /**
+          * Identifier is used to control mg-popover Default: createID('mg-menu-item');
+         */
+        "identifier"?: string;
         /**
           * Emited event when status change
          */
@@ -2343,6 +2443,10 @@ declare namespace LocalJSX {
           * Component current page
          */
         "currentPage"?: number;
+        /**
+          * Hide navigation label
+         */
+        "hideNavigationLabels"?: boolean;
         /**
           * Identifier is used for the element ID (id is a reserved prop in Stencil.js) If not set, it will be created.
          */
@@ -2462,7 +2566,7 @@ declare namespace LocalJSX {
         /**
           * Define tabs size
          */
-        "size"?: SizeType;
+        "size"?: SizeType1;
     }
     interface MgTag {
         /**
@@ -2501,6 +2605,7 @@ declare namespace LocalJSX {
         "placement"?: Placement;
     }
     interface IntrinsicElements {
+        "mg-action-more": MgActionMore;
         "mg-badge": MgBadge;
         "mg-button": MgButton;
         "mg-card": MgCard;
@@ -2520,6 +2625,7 @@ declare namespace LocalJSX {
         "mg-input-textarea": MgInputTextarea;
         "mg-input-title": MgInputTitle;
         "mg-input-toggle": MgInputToggle;
+        "mg-item-more": MgItemMore;
         "mg-menu": MgMenu;
         "mg-menu-item": MgMenuItem;
         "mg-message": MgMessage;
@@ -2537,6 +2643,7 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "mg-action-more": LocalJSX.MgActionMore & JSXBase.HTMLAttributes<HTMLMgActionMoreElement>;
             "mg-badge": LocalJSX.MgBadge & JSXBase.HTMLAttributes<HTMLMgBadgeElement>;
             "mg-button": LocalJSX.MgButton & JSXBase.HTMLAttributes<HTMLMgButtonElement>;
             "mg-card": LocalJSX.MgCard & JSXBase.HTMLAttributes<HTMLMgCardElement>;
@@ -2556,6 +2663,7 @@ 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-item-more": LocalJSX.MgItemMore & JSXBase.HTMLAttributes<HTMLMgItemMoreElement>;
             "mg-menu": LocalJSX.MgMenu & JSXBase.HTMLAttributes<HTMLMgMenuElement>;
             "mg-menu-item": LocalJSX.MgMenuItem & JSXBase.HTMLAttributes<HTMLMgMenuItemElement>;
             "mg-message": LocalJSX.MgMessage & JSXBase.HTMLAttributes<HTMLMgMessageElement>;

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

@@ -22,7 +22,9 @@ declare const messages: {
     };
     form: {
       required: string;
+      requiredSingle: string;
       allRequired: string;
+      allRequiredSingle: string;
     };
     message: {
       closeButton: string;
@@ -55,6 +57,9 @@ declare const messages: {
       moreLabel: string;
       badgeLabel: string;
     };
+    actionMore: {
+      label: string;
+    };
   };
   fr: {
     errors: {
@@ -79,7 +84,9 @@ declare const messages: {
     };
     form: {
       required: string;
+      requiredSingle: string;
       allRequired: string;
+      allRequiredSingle: string;
     };
     message: {
       closeButton: string;
@@ -112,16 +119,19 @@ declare const messages: {
       moreLabel: string;
       badgeLabel: string;
     };
+    actionMore: {
+      label: string;
+    };
   };
 };
 /**
  * Get Intl object
  *
  * @param {HTMLElement} element element we need to get the language
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export declare const initLocales: (element: HTMLElement) => {
   locale: string;
-  messages: unknown;
+  messages: Record<string, unknown>;
 };
 export {};

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

@@ -257,6 +257,15 @@ export declare function getAssetPath(path: string): string;
  * @returns the set path
  */
 export declare function setAssetPath(path: string): string;
+/**
+ * Used to specify a nonce value that corresponds with an application's
+ * [Content Security Policy (CSP)](https://developer.mozilla.org/en-US/docs/Web/HTTP/CSP).
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a `meta` tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) and will result in the same behavior.
+ * @param nonce The value to be used for the nonce attribute.
+ */
+export declare function setNonce(nonce: string): void;
 /**
  * Retrieve a Stencil element for a given reference
  * @param ref the ref to get the Stencil element for

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

@@ -1,14 +1,14 @@
 export declare enum OverflowBehaviorElements {
-  MORE = "data-overflow-more",
   BASE_INDEX = "data-overflow-base-index",
   PROXY_INDEX = "data-overflow-proxy-index"
 }
 export declare class OverflowBehavior {
   private element;
   private render;
-  private resizeObserver;
-  private moreELement;
-  private children;
+  private _resizeObserver;
+  private _moreElement;
+  private _baseChildren;
+  private _proxyChildren;
   constructor(element: Element, render: () => HTMLElement);
   /**********
    * Public *
@@ -19,22 +19,23 @@ export declare class OverflowBehavior {
    * @returns {void}
    */
   disconnect: () => void;
-  /**
-   * Update more element status if active child
-   *
-   * @returns {void}
-   */
-  updateActiveStatus: () => void;
   /************
    * Internal *
    ************/
   /**
    * run overflow behavior
    *
-   * @param {number} width width of the container
+   * @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
    *

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

@@ -6,7 +6,7 @@
  * @param {string} currency currency to apply
  * @returns {string} formatted currency
  */
-export declare function localeCurrency(number: number, locale: string, currency: string): string;
+export declare const localeCurrency: (number: number, locale: string, currency: string) => string;
 /**
  * Format number to locale
  *
@@ -14,7 +14,7 @@ export declare function localeCurrency(number: number, locale: string, currency:
  * @param {string} locale locale to apply
  * @returns {string} formatted number
  */
-export declare function localeNumber(number: number, locale: string): string;
+export declare const localeNumber: (number: number, locale: string) => string;
 /**
  * Date RegExp
  */
@@ -26,7 +26,7 @@ export declare const dateRegExp: RegExp;
  * @param {string} locale locale to apply
  * @returns {string} formatted date
  */
-export declare function localeDate(date: string, locale: string): string;
+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
@@ -34,9 +34,9 @@ export declare function localeDate(date: string, locale: string): string;
  * @param {HTMLElement} element element we need to get the language
  * @param {unknown} messages messages to use
  * @param {string} defaultLocale default messages locale
- * @returns {{ locale: string; messages: unknown }} messages object
+ * @returns {{ locale: string; messages: Record<string, unknown> }} messages object
  */
 export declare const getLocaleMessages: (element: HTMLElement, messages: unknown, defaultLocale: string) => {
   locale: string;
-  messages: unknown;
+  messages: Record<string, unknown>;
 };

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

@@ -70,9 +70,27 @@ export declare const setupResizeObserverMock: ({ disconnect, observe }: setupRes
 /**
  * force popover id when component use randomed identifier
  *
- * @param {Element} item element wich include mg-popover
+ * @param {Element} component element wich include mg-popover
  * @param {string} id new fixed id
+ * @param {string} interactiveElement element where attribute 'aria-controls' is set
  * @returns {void}
  */
-export declare const forcePopoverId: (item: Element, id: string) => void;
+export declare const forcePopoverId: (component: Element, id: string, interactiveElement?: string) => void;
+/**
+ * fix popper console.error in test
+ * it is generated in @popperjs/core/dist/cjs/popper.js l.1859
+ * 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;
 export {};

package/loader/index.d.ts

@@ -10,3 +10,12 @@ export interface CustomElementsDefineOptions {
 }
 export declare function defineCustomElements(win?: Window, opts?: CustomElementsDefineOptions): Promise<void>;
 export declare function applyPolyfills(): Promise<void>;
+
+/** 
+ * Used to specify a nonce value that corresponds with an application's CSP.
+ * When set, the nonce will be added to all dynamically created script and style tags at runtime.
+ * Alternatively, the nonce value can be set on a meta tag in the DOM head
+ * (<meta name="csp-nonce" content="{ nonce value here }" />) which
+ * will result in the same behavior.
+ */
+export declare function setNonce(nonce: string): void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mgdis/mg-components",
-  "version": "5.6.0",
+  "version": "5.8.0",
   "description": "MG Components",
   "packageManager": "pnpm@7.17.1",
   "engineStrict": true,
@@ -29,49 +29,50 @@
   },
   "dependencies": {
     "@popperjs/core": "^2.11.6",
-    "@stencil/core": "^2.21.0",
+    "@stencil/core": "^2.22.1",
     "normalize.css": "^8.0.1"
   },
   "devDependencies": {
     "@babel/core": "^7.20.12",
-    "@babel/plugin-transform-react-jsx": "^7.20.7",
+    "@babel/plugin-transform-react-jsx": "^7.20.13",
     "@pxtrn/storybook-addon-docs-stencil": "^6.4.1",
     "@stencil/eslint-plugin": "^0.4.0",
     "@stencil/sass": "^1.5.2",
-    "@storybook/addon-a11y": "^6.5.15",
-    "@storybook/addon-actions": "^6.5.15",
-    "@storybook/addon-docs": "^6.5.15",
-    "@storybook/addon-essentials": "^6.5.15",
-    "@storybook/addon-links": "^6.5.15",
-    "@storybook/html": "^6.5.15",
+    "@storybook/addon-a11y": "^6.5.16",
+    "@storybook/addon-actions": "^6.5.16",
+    "@storybook/addon-docs": "^6.5.16",
+    "@storybook/addon-essentials": "^6.5.16",
+    "@storybook/addon-links": "^6.5.16",
+    "@storybook/html": "^6.5.16",
     "@storybook/preset-scss": "^1.0.3",
     "@types/jest": "^26.0.24",
     "@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.14.0",
+    "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.0",
+    "eslint-plugin-react": "^7.32.2",
     "eslint-plugin-storybook": "^0.6.10",
     "husky": "^7.0.4",
     "jest": "^26.6.3",
     "jest-cli": "^26.6.3",
     "jest-image-snapshot": "^4.5.1",
     "jest-junit": "^13.2.0",
-    "jsx-dom": "^8.0.3",
+    "jsx-dom": "^8.0.4",
     "npm-run-all": "^4.1.5",
-    "prettier": "^2.8.2",
+    "prettier": "^2.8.3",
     "puppeteer": "^13.7.0",
-    "sass": "^1.57.1",
+    "sass": "^1.58.0",
     "sass-loader": "^10.4.1",
     "style-loader": "^2.0.0",
     "ts-node": "^10.9.1",
-    "turbo": "^1.7.0",
+    "turbo": "^1.8.1",
     "typescript": "~4.4.4"
   },
   "license": "BSD-3-Clause",
@@ -85,7 +86,7 @@
     "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:unit": "TZ=UTC stencil test --spec --collectCoverage --reporters=\"default\" --reporters=\"jest-junit\"",
     "test:e2e": "stencil test --e2e",
     "test.watch": "stencil test --spec --e2e --watchAll",
     "generate": "stencil generate",

package/readme.md

@@ -102,24 +102,6 @@ When a selector contains too many declaration it is recommended to organize them
 }
 ```
 
-### Accessibility
-
-A good pratice is to manage hover, focus and active state at the same place.
-
-```SCSS
-/* SCSS */
-button {
-  &:hover, &:focus, &:active {
-    text-decoration: underline;
-  }
-}
-
-/* CSS */
-button:hover, button:focus, button:active {
-  text-decoration: underline;
-}
-```
-
 ## Storybook
 
 The plugin [storybook-addon-docs-stencil

package/dist/.storybook/utils.js

@@ -1,24 +0,0 @@
-export const filterArgs = (args, defaultValues) => {
-  const filteredArgs = {};
-  for (const k in args) {
-    if (!k.startsWith('slot')) {
-      const arg = args[k];
-      // Change camelCase k to kebab-case
-      const key = k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-      // Change value to boolean true value, will be replace during render
-      if (typeof arg === 'boolean' && arg === true) {
-        filteredArgs[key] = 'mg__storybook__boolean-true';
-      }
-      // Do not add args if is default value
-      else if (!defaultValues || !Object.keys(defaultValues).includes(k) || defaultValues[k] !== arg) {
-        filteredArgs[key] = arg;
-      }
-    }
-  }
-  // Add comment when args contain object, will be replace during render
-  const argsObjects = Object.entries(args).filter(arg => typeof arg[1] === 'object');
-  if (argsObjects.length > 0) {
-    filteredArgs['mg__storybook__comment'] = `/!\\ Object props are not rendered in the code example: ${argsObjects.map(([a]) => a).join(', ')}.`;
-  }
-  return filteredArgs;
-};

package/dist/collection/components/atoms/mg-badge/doc/mg-badge.stories.js

@@ -1,27 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { variants } from '../mg-badge.conf';
-export default {
-  component: 'mg-badge',
-  title: 'Atoms/mg-badge',
-  argTypes: {
-    value: {
-      control: { type: 'text' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-badge", Object.assign({}, filterArgs(args, { variant: variants[0] })));
-export const MgBadge = Template.bind({});
-MgBadge.args = {
-  value: '99',
-  label: 'unread messages',
-  variant: variants[0],
-  outline: false,
-};