@mgdis/mg-components 5.2.0 → 5.3.0

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

@@ -81,14 +81,9 @@ export class MgBadge {
         "type": "any",
         "mutable": true,
         "complexType": {
-          "original": "BadgeType['value']",
+          "original": "string | number",
           "resolved": "number | string",
-          "references": {
-            "BadgeType": {
-              "location": "import",
-              "path": "./mg-badge.conf"
-            }
-          }
+          "references": {}
         },
         "required": true,
         "optional": false,
@@ -103,14 +98,9 @@ export class MgBadge {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "BadgeType['label']",
+          "original": "string",
           "resolved": "string",
-          "references": {
-            "BadgeType": {
-              "location": "import",
-              "path": "./mg-badge.conf"
-            }
-          }
+          "references": {}
         },
         "required": true,
         "optional": false,
@@ -125,12 +115,17 @@ export class MgBadge {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "BadgeVariantType",
+          "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+          "references": {
+            "BadgeVariantType": {
+              "location": "import",
+              "path": "./mg-badge.conf"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Define button variant"

package/dist/collection/components/atoms/mg-icon/mg-icon.js

@@ -117,9 +117,14 @@ export class MgIcon {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IconSizeType",
+          "resolved": "\"extra-large\" | \"large\" | \"regular\" | \"small\"",
+          "references": {
+            "IconSizeType": {
+              "location": "import",
+              "path": "./mg-icon.conf"
+            }
+          }
         },
         "required": false,
         "optional": false,
@@ -135,12 +140,17 @@ export class MgIcon {
         "type": "string",
         "mutable": false,
         "complexType": {
-          "original": "string",
-          "resolved": "string",
-          "references": {}
+          "original": "IconVariantType",
+          "resolved": "\"danger\" | \"info\" | \"success\" | \"warning\"",
+          "references": {
+            "IconVariantType": {
+              "location": "import",
+              "path": "./mg-icon.conf"
+            }
+          }
         },
         "required": false,
-        "optional": false,
+        "optional": true,
         "docs": {
           "tags": [],
           "text": "Define icon variant\nAdd a background to the icon based on variant color"

package/dist/collection/components/molecules/menu/mg-menu/doc/mg-menu.stories.js

@@ -0,0 +1,87 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
+import { Status } from '../../mg-menu-item/mg-menu-item.conf';
+import { Direction } from '../mg-menu.conf';
+export default {
+  component: 'mg-menu',
+  title: 'Beta/menus/mg-menu',
+  argTypes: {
+    direction: {
+      options: [undefined, Direction.HORIZONTAL, Direction.VERTICAL],
+      control: { type: 'select' },
+    },
+  },
+};
+const getItemArgs = ({ size, label, direction, status, metadata, icon, badge, content, submenu }) => ({
+  size: size !== undefined ? size : direction === Direction.VERTICAL ? 'medium' : undefined,
+  status,
+  slot: {
+    label,
+    metadata,
+    icon,
+    badge,
+    content,
+    submenu,
+  },
+});
+const getMenuArgs = (direction, level = 0, isSubmenu = false) => ({
+  label: 'Batman menu',
+  direction,
+  slot: {
+    items: [
+      getItemArgs({
+        label: 'label 1',
+        direction,
+      }),
+      getItemArgs({
+        label: 'label 2',
+        direction,
+        status: Status.DISABLED,
+      }),
+      getItemArgs({
+        label: 'label 3 with long text',
+        direction,
+        badge: true,
+        icon: true,
+      }),
+      getItemArgs({
+        label: 'label 4',
+        direction,
+        badge: true,
+        icon: true,
+        status: Status.ACTIVE,
+        submenu: level,
+      }),
+      getItemArgs({
+        label: 'label 5',
+        direction,
+        icon: true,
+        metadata: 'my metadata',
+        content: true,
+        size: !isSubmenu && direction === Direction.HORIZONTAL ? 'regular' : undefined,
+      }),
+    ],
+  },
+});
+const menu = args => h("mg-menu", Object.assign({}, filterArgs(args, { direction: Direction.HORIZONTAL })), args.slot.items.map(item => menuItem(item)));
+const menuItem = args => {
+  var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
+  return (h("mg-menu-item", Object.assign({}, filterArgs(args)), ((_a = args.slot) === null || _a === void 0 ? void 0 : _a.label) && h("span", { slot: "label" }, (_b = args.slot) === null || _b === void 0 ? void 0 : _b.label), ((_c = args.slot) === null || _c === void 0 ? void 0 : _c.metadata) && h("span", { slot: "metadata" }, (_d = args.slot) === null || _d === void 0 ? void 0 : _d.metadata), ((_e = args.slot) === null || _e === void 0 ? void 0 : _e.icon) && h("mg-icon", { slot: "illustration", icon: "user" }), ((_f = args.slot) === null || _f === void 0 ? void 0 : _f.badge) && (h("mg-badge", { slot: "information", label: "information", value: "1" }, (_g = args.slot) === null || _g === void 0 ? void 0 : _g.icon)), ((_h = args.slot) === null || _h === void 0 ? void 0 : _h.content) && (h("div", null, h("h3", null, "Demo title"), h("p", null, "some content"))), ((_j = args.slot) === null || _j === void 0 ? void 0 : _j.submenu) && menu(getMenuArgs(Direction.VERTICAL, ((_k = args.slot) === null || _k === void 0 ? void 0 : _k.submenu) - 1, true))));
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("div", null, menu(args));
+export const MgMenuHorizontal = Template.bind({});
+MgMenuHorizontal.args = getMenuArgs(Direction.HORIZONTAL, 2);
+export const MgMenuVertical = Template.bind({});
+MgMenuVertical.args = getMenuArgs(Direction.VERTICAL, 2);
+const TemplateSmallContainer = (args) => {
+  return h("div", { style: { width: '25rem', height: '20rem' } }, menu(args));
+};
+export const MgMenuVerticalSmallContainer = TemplateSmallContainer.bind({});
+MgMenuVerticalSmallContainer.args = Object.assign({}, MgMenuVertical.args);

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js

@@ -0,0 +1,8 @@
+/**
+ * Menu direction type
+ */
+export var Direction;
+(function (Direction) {
+  Direction["VERTICAL"] = "vertical";
+  Direction["HORIZONTAL"] = "horizontal";
+})(Direction || (Direction = {}));

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.css

@@ -0,0 +1,10 @@
+:host {
+  display: flex;
+  background-color: hsl(var(--mg-menu-background-color-hsl, var(--color-light)));
+}
+
+:host(.mg-menu--vertical) {
+  flex-direction: column;
+  height: 100%;
+  overflow-y: auto;
+}

package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js

@@ -0,0 +1,185 @@
+import { h, Host } from '@stencil/core';
+import { ClassList } from '../../../../utils/components.utils';
+import { Direction } from './mg-menu.conf';
+export class MgMenu {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    this.name = 'mg-menu';
+    this.focusedMenuItem = 0;
+    /**
+     * Component display direction. Default: "horizontal"
+     */
+    this.direction = Direction.HORIZONTAL;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList([this.name]);
+    /**
+     * Close matching menu-item
+     *
+     * @param {HTMLMgMenuItemElement} item menu-item to close
+     * @param {boolean} condition addionnal condition
+     * @returns {void}
+     */
+    this.closeMenuItem = (item, condition) => {
+      if (!this.isChildMenu && condition) {
+        item.expanded = false;
+      }
+    };
+    /**
+     * Store menu-items on component init and add listeners
+     */
+    this.initMenuItems = () => {
+      // store all menu-items
+      this.menuItems = Array.from(this.element.children).filter(child => child.nodeName === 'MG-MENU-ITEM');
+      // add listeners on menu item and edit index
+      this.menuItems.forEach((item, menuItemIndex) => {
+        ['click', 'focus'].forEach(trigger => {
+          (item.shadowRoot.querySelector('button') || item.shadowRoot.querySelector('a')).addEventListener(trigger, (event) => {
+            event.preventDefault();
+            event.stopPropagation();
+            this.focusedMenuItem = menuItemIndex;
+            // reset expanded on previous active menu item
+            this.menuItems.forEach((item, index) => {
+              this.closeMenuItem(item, index !== this.focusedMenuItem);
+            });
+          });
+        });
+      });
+    };
+  }
+  validateLabel(newValue) {
+    if (newValue === undefined) {
+      throw new Error(`<${this.name}> prop "label" is required.`);
+    }
+  }
+  validateDirection(newValue) {
+    if (newValue === Direction.VERTICAL) {
+      this.classList.add(`${this.name}--${Direction.VERTICAL}`);
+    }
+    else if (newValue === Direction.HORIZONTAL) {
+      this.classList.add(`${this.name}--${Direction.HORIZONTAL}`);
+    }
+    else {
+      throw new Error(`<${this.name}> prop "direction" must be one of : ${Direction.HORIZONTAL}, ${Direction.VERTICAL}.`);
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Validate props
+   *
+   * @returns {void}
+   */
+  componentWillLoad() {
+    this.validateDirection(this.direction);
+    this.validateLabel(this.label);
+  }
+  /**
+   * Check if component slots configuration
+   *
+   * @returns {ReturnType<typeof setTimeout>} timeout
+   */
+  componentDidLoad() {
+    this.initMenuItems();
+    // update props and states after componentDidLoad hook
+    // return a promise to process action only in the FIRST render().
+    // https://stenciljs.com/docs/component-lifecycle#componentwillload
+    return setTimeout(() => {
+      this.isChildMenu = this.element.closest('mg-menu-item') !== null;
+      // click outside management for child vertical menu
+      if (!this.isChildMenu && this.direction === Direction.HORIZONTAL) {
+        document.addEventListener('click', (event) => {
+          if (event.target.closest('mg-menu') === null) {
+            this.menuItems.forEach(item => {
+              this.closeMenuItem(item, this.direction === Direction.HORIZONTAL);
+            });
+          }
+        });
+      }
+    }, 0);
+  }
+  /**
+   * Render
+   *
+   * @returns {HTMLElement} HTML Element
+   */
+  render() {
+    return (h(Host, { role: this.isChildMenu ? 'menu' : 'menubar', "aria-label": this.label, classList: this.classList.join() }, h("slot", null)));
+  }
+  static get is() { return "mg-menu"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["mg-menu.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["mg-menu.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "label": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": true,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Menu label. Include short menu description.\nRequired for accessibility"
+        },
+        "attribute": "label",
+        "reflect": false
+      },
+      "direction": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "Direction",
+          "resolved": "Direction.HORIZONTAL | Direction.VERTICAL",
+          "references": {
+            "Direction": {
+              "location": "import",
+              "path": "./mg-menu.conf"
+            }
+          }
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Component display direction. Default: \"horizontal\""
+        },
+        "attribute": "direction",
+        "reflect": true,
+        "defaultValue": "Direction.HORIZONTAL"
+      }
+    };
+  }
+  static get states() {
+    return {
+      "isChildMenu": {},
+      "classList": {}
+    };
+  }
+  static get elementRef() { return "element"; }
+  static get watchers() {
+    return [{
+        "propName": "label",
+        "methodName": "validateLabel"
+      }, {
+        "propName": "direction",
+        "methodName": "validateDirection"
+      }];
+  }
+}

package/dist/collection/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.js

@@ -0,0 +1,32 @@
+import { h } from '@stencil/core';
+import { filterArgs } from '../../../../../../.storybook/utils';
+export default {
+  component: 'mg-menu-item',
+  title: 'Beta/menus/mg-menu-item',
+};
+/**
+ * Template
+ *
+ * @param {any} args component arguments
+ * @returns {HTMLElement} HTMLElement
+ */
+// eslint-disable-next-line @typescript-eslint/no-explicit-any
+const Template = (args) => h("mg-menu-item", Object.assign({}, filterArgs(args)), args.slot);
+export const MgMenuItem = Template.bind({});
+MgMenuItem.args = {
+  identifier: 'identifier',
+  slot: h("span", { slot: "label" }, "My label"),
+};
+export const MgMenuItemWhitIcon = Template.bind({});
+MgMenuItemWhitIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-icon", { icon: "user", slot: "illustration" })] });
+export const MgMenuItemWhitBadge = Template.bind({});
+MgMenuItemWhitBadge.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" })] });
+export const MgMenuItemWhitBadgeAndIcon = Template.bind({});
+MgMenuItemWhitBadgeAndIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" }), h("mg-icon", { icon: "user", slot: "illustration" })] });
+export const MgMenuItemWhitMetadata = Template.bind({});
+MgMenuItemWhitMetadata.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("span", { slot: "metadata" }, "My metadata")] });
+export const MgMenuItemWhithSubmenu = Template.bind({});
+MgMenuItemWhithSubmenu.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [
+    h("span", { slot: "label" }, "My label"),
+    h("mg-menu-vertical", { label: "submenu" }, h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 1")), h("mg-menu-item", null, h("mg-icon", { icon: "user", slot: "illustration" }), h("span", { slot: "label" }, "Subitem 2")), h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 3"), h("mg-icon", { icon: "user", slot: "illustration" }), h("mg-badge", { value: "2", label: "hello", slot: "information" }))),
+  ] });

package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.conf.js

@@ -0,0 +1,22 @@
+/**
+ * Available menu-item positions
+ */
+export var ElementPosition;
+(function (ElementPosition) {
+  ElementPosition["FIRST"] = "first";
+  ElementPosition["LAST"] = "last";
+})(ElementPosition || (ElementPosition = {}));
+/**
+ * Available menu item status
+ */
+export var Status;
+(function (Status) {
+  Status["VISIBLE"] = "visible";
+  Status["HIDDEN"] = "hidden";
+  Status["DISABLED"] = "disabled";
+  Status["ACTIVE"] = "active";
+})(Status || (Status = {}));
+/**
+ * List of all possibles sizes
+ */
+export const sizes = ['regular', 'medium', 'large'];