@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,94 @@
+import { Component, h, Prop, State, Watch } from '@stencil/core';
+import { variants } from './mg-tag.conf';
+import { ClassList } from '../../../utils/components.utils';
+export class MgTag {
+  constructor() {
+    /**
+     * Define button variant
+     */
+    this.variant = variants[0];
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-tag']);
+  }
+  validateVariant(newValue) {
+    if (!variants.includes(newValue)) {
+      throw new Error(`<mg-tag> prop "variant" must be one of : ${variants.join(', ')}.`);
+    }
+    this.classList.add(`mg-tag--${this.variant}`);
+  }
+  validateOutline(newValue) {
+    if (newValue)
+      this.classList.add(`mg-tag--outline`);
+  }
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    this.validateOutline(this.outline);
+  }
+  /**
+   * Render
+   */
+  render() {
+    return (h("span", { class: this.classList.join() },
+      h("slot", null)));
+  }
+  static get is() { return "mg-tag"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-tag.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-tag.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Define button variant"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "variants[0]"
+    },
+    "outline": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Define if button is using outline style"
+      },
+      "attribute": "outline",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "classList": {}
+  }; }
+  static get watchers() { return [{
+      "propName": "variant",
+      "methodName": "validateVariant"
+    }, {
+      "propName": "outline",
+      "methodName": "validateOutline"
+    }]; }
+}

package/dist/collection/components/atoms/mg-tag/mg-tag.stories.js

@@ -0,0 +1,25 @@
+import { h } from '@stencil/core';
+import { variants } from './mg-tag.conf';
+export default {
+  component: 'mg-tag',
+  title: 'Atoms/mg-tag',
+  argTypes: {
+    variant: {
+      options: variants,
+      control: { type: 'select' },
+    },
+  },
+};
+const Template = args => {
+  // Extract slot so it won't be render as an attribute
+  const slot = args.slot;
+  delete args.slot;
+  // return element
+  return h("mg-tag", Object.assign({}, args), slot);
+};
+export const MgTag = Template.bind({});
+MgTag.args = {
+  slot: 'Label',
+  variant: variants[0],
+  outline: false,
+};

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.css

@@ -0,0 +1,44 @@
+:host {
+  display: inline-block;
+}
+
+.mg-tooltip {
+  display: none;
+  padding: 0.5rem 0.8rem;
+  z-index: 9999;
+  border-radius: var(--mg-tooltip-border-radius);
+  background-color: hsl(var(--mg-tooltip-background-color));
+  color: hsl(var(--mg-tooltip-font-color));
+  text-align: start;
+}
+.mg-tooltip[data-show] {
+  display: block;
+}
+.mg-tooltip .mg-tooltip__arrow,
+.mg-tooltip .mg-tooltip__arrow::before {
+  position: absolute;
+  width: 0.8rem;
+  height: 0.8rem;
+  z-index: 9999;
+  background: inherit;
+}
+.mg-tooltip .mg-tooltip__arrow {
+  visibility: hidden;
+}
+.mg-tooltip .mg-tooltip__arrow::before {
+  visibility: visible;
+  content: "";
+  transform: rotate(45deg);
+}
+.mg-tooltip[data-popper-placement^=top] > .mg-tooltip__arrow {
+  bottom: -4px;
+}
+.mg-tooltip[data-popper-placement^=bottom] > .mg-tooltip__arrow {
+  top: -4px;
+}
+.mg-tooltip[data-popper-placement^=left] > .mg-tooltip__arrow {
+  right: -4px;
+}
+.mg-tooltip[data-popper-placement^=right] > .mg-tooltip__arrow {
+  left: -4px;
+}

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

@@ -0,0 +1,225 @@
+import { Component, Element, h, Host, Prop, Watch } from '@stencil/core';
+import { createID } from '../../../utils/components.utils';
+import { createPopper } from '@popperjs/core';
+export class MgTooltip {
+  constructor() {
+    /**
+     * Sets an `id` attribute.
+     * Needed by the input for accessibility `aria-decribedby`.
+     */
+    this.identifier = createID('mg-tooltip');
+    /**
+     * Tooltip placement
+     */
+    this.placement = 'bottom';
+    /**
+     * Display tooltip
+     */
+    this.display = false;
+    /**
+     * Disable tooltip
+     */
+    this.disabled = false;
+    /**
+     * Show tooltip
+     * @returns {void}
+     */
+    this.show = () => {
+      // Make the tooltip visible
+      this.tooltip.setAttribute('data-show', '');
+      // Enable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: true }] })));
+      // Update its position
+      this.popper.update();
+    };
+    /**
+     * Hide tooltip
+     * @returns {void}
+     */
+    this.hide = () => {
+      // Hide the tooltip
+      this.tooltip.removeAttribute('data-show');
+      // Disable the event listeners
+      this.popper.setOptions(options => (Object.assign(Object.assign({}, options), { modifiers: [...options.modifiers, { name: 'eventListeners', enabled: false }] })));
+    };
+  }
+  handleDisplay(newVal) {
+    if (newVal) {
+      this.show();
+    }
+    else {
+      this.hide();
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Get slotted element
+   * Check if it already contain an interactive element, if not we need to add a tabIndex attribute
+   * We need to attach the focused element to the tooltip (aria-describedby)
+   */
+  componentDidLoad() {
+    var _a;
+    // Get tooltip element
+    this.tooltip = this.element.querySelector(`#${this.identifier}`);
+    // get slotted element
+    const slotElement = this.element.firstElementChild;
+    // Get interactive element
+    const interactiveElements = ['a', 'button', 'input', 'textarea', 'select']; //! Might needs updates
+    const interactiveElement = this.element.querySelector(interactiveElements.join(',')) || ((_a = slotElement.shadowRoot) === null || _a === void 0 ? void 0 : _a.querySelector(interactiveElements.join(',')));
+    // define selected element to become tooltip selector
+    const tooltipedElement = interactiveElement || slotElement;
+    // Add tabindex to slotted element if we can't find any interactive element
+    if (interactiveElement === null || interactiveElement === undefined)
+      slotElement.tabIndex = 0;
+    // Set aria-describedby
+    const ariaDescribedby = slotElement.getAttribute('aria-describedby');
+    if (ariaDescribedby === null) {
+      tooltipedElement.setAttribute('aria-describedby', this.identifier);
+    }
+    else {
+      slotElement.setAttribute('aria-describedby', `${ariaDescribedby} ${this.identifier}`);
+    }
+    // Create popperjs tooltip
+    this.popper = createPopper(tooltipedElement, this.tooltip, {
+      placement: this.placement,
+      modifiers: [
+        {
+          name: 'offset',
+          options: {
+            offset: [0, 8],
+          },
+        },
+      ],
+    });
+    // Add events
+    ['mouseenter', 'focus'].forEach(event => {
+      tooltipedElement.addEventListener(event, () => {
+        if (!this.disabled)
+          this.display = true;
+      });
+    });
+    ['mouseleave', 'blur', 'keydown'].forEach(event => {
+      tooltipedElement.addEventListener(event, (e) => {
+        // we continue to process ONLY for KeyboardEvents 'Escape'
+        if (e.type === 'keydown' && e.code !== 'Escape') {
+          return;
+        }
+        if (!this.disabled)
+          this.display = false;
+      });
+    });
+    this.handleDisplay(this.display);
+  }
+  render() {
+    return (h(Host, null,
+      h("slot", null),
+      h("div", { role: "tooltip", id: this.identifier, class: "mg-tooltip", innerHTML: this.message },
+        h("div", { class: "mg-tooltip__arrow", "data-popper-arrow": true }))));
+  }
+  static get is() { return "mg-tooltip"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-tooltip.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-tooltip.css"]
+  }; }
+  static get properties() { return {
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Sets an `id` attribute.\nNeeded by the input for accessibility `aria-decribedby`."
+      },
+      "attribute": "identifier",
+      "reflect": false,
+      "defaultValue": "createID('mg-tooltip')"
+    },
+    "message": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Displayed message in the tooltip"
+      },
+      "attribute": "message",
+      "reflect": false
+    },
+    "placement": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "| 'auto'\n    | 'auto-start'\n    | 'auto-end'\n    | 'top'\n    | 'top-start'\n    | 'top-end'\n    | 'bottom'\n    | 'bottom-start'\n    | 'bottom-end'\n    | 'right'\n    | 'right-start'\n    | 'right-end'\n    | 'left'\n    | 'left-start'\n    | 'left-end'",
+        "resolved": "\"auto\" | \"auto-end\" | \"auto-start\" | \"bottom\" | \"bottom-end\" | \"bottom-start\" | \"left\" | \"left-end\" | \"left-start\" | \"right\" | \"right-end\" | \"right-start\" | \"top\" | \"top-end\" | \"top-start\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tooltip placement"
+      },
+      "attribute": "placement",
+      "reflect": false,
+      "defaultValue": "'bottom'"
+    },
+    "display": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Display tooltip"
+      },
+      "attribute": "display",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable tooltip"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "display",
+      "methodName": "handleDisplay"
+    }]; }
+}

package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.stories.js

@@ -0,0 +1,26 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-tooltip',
+  title: 'Atoms/mg-tooltip',
+  parameters: {
+    layout: 'centered',
+  },
+};
+const Template = args => (h("mg-tooltip", Object.assign({}, args),
+  h("mg-icon", { icon: "info-circle" })));
+export const MgTooltip = Template.bind({});
+MgTooltip.args = {
+  identifier: 'identifier',
+  message: 'This is a tooltip message',
+  placement: 'bottom',
+  display: false,
+  disabled: false,
+};
+const TemplateButton = args => (h("mg-tooltip", Object.assign({}, args),
+  h("mg-button", null, "Action")));
+export const MgTooltipOnButton = TemplateButton.bind({});
+MgTooltipOnButton.args = Object.assign({}, MgTooltip.args);
+const TemplateSpan = args => (h("mg-tooltip", Object.assign({}, args),
+  h("span", null, "any text")));
+export const MgTooltipOnSpan = TemplateSpan.bind({});
+MgTooltipOnSpan.args = Object.assign({}, MgTooltip.args);

package/dist/collection/components/molecules/inputs/MgInput.conf.js

@@ -0,0 +1,7 @@
+/**
+ * Possible input classes
+ */
+export var InputClass;
+(function (InputClass) {
+  InputClass["ERROR"] = "is-not-valid";
+})(InputClass || (InputClass = {}));

package/dist/collection/components/molecules/inputs/MgInput.js

@@ -0,0 +1,130 @@
+import { h } from '@stencil/core';
+import { InputClass } from './MgInput.conf';
+/**
+ * Apply in all input child node the aria-describedby attribute
+ * @param children
+ * @param ariaDescribedbyIDs
+ * @param utils
+ * @returns {VNode[]}
+ */
+const applyAriadescribedBy = (children, ariaDescribedbyIDs, utils) => utils.map(children, child => {
+  if (['input', 'select', 'textarea'].includes(child.vtag)) {
+    return Object.assign(Object.assign({}, child), { vattrs: Object.assign(Object.assign({}, child.vattrs), { 'aria-describedby': [...ariaDescribedbyIDs].join(' ') }) });
+  }
+  // we recursively apply ariadescribedBy attributes to child input nodes if exists
+  if (child.vchildren === null)
+    return Object.assign({}, child);
+  return Object.assign(Object.assign({}, child), { vchildren: applyAriadescribedBy(child.vchildren, ariaDescribedbyIDs, utils) });
+});
+/**
+ * Add classes based on props
+ * @param props
+ */
+const manageClasses = (props) => {
+  props.classList.add('mg-input');
+  if (props.labelOnTop)
+    props.classList.add('mg-input--label-on-top');
+  if (props.readonly)
+    props.classList.add('mg-input--readonly');
+  if (props.width !== undefined)
+    props.classList.add(`mg-input--width-${props.width}`);
+  if (props.readonly || props.disabled) {
+    props.classList.delete(InputClass.ERROR);
+  }
+};
+/**
+ * Define tagname based on props
+ * @param isFieldset
+ * @returns {string} tag name
+ */
+const getTagName = (isFieldset) => (isFieldset ? 'fieldset' : 'div');
+/**
+ * Get input template
+ * @param props MgInput Interface Props
+ * @param children Represent scoped elements
+ * @param utils Stencil.js utils
+ * @returns JSX template
+ */
+export const MgInput = (props, children, utils) => {
+  /**
+   * Check required properties
+   */
+  if (typeof props.label !== 'string' || props.label === '') {
+    throw new Error('<mg-input> prop "label" is required');
+  }
+  if (props.labelOnTop && props.labelHide) {
+    throw new Error('<mg-input> prop "labelOnTop" must not be paired with the prop "labelHide"');
+  }
+  /**
+   * Component classes
+   */
+  manageClasses(props);
+  /**
+   * a11y IDs
+   */
+  const ariaDescribedbyIDs = new Set();
+  // Character Left
+  const characterLeftId = `${props.identifier}-character-left`;
+  if (props.classList.has('is-focused') && props.displayCharacterLeft) {
+    ariaDescribedbyIDs.add(characterLeftId);
+  }
+  // Help text
+  const helpTextId = `${props.identifier}-help-text`;
+  if (typeof props.helpText === 'string' && props.helpText !== '') {
+    ariaDescribedbyIDs.add(helpTextId);
+  }
+  // Error Message
+  const helpTextErrorId = `${props.identifier}-error`;
+  if (typeof props.errorMessage === 'string' && props.errorMessage !== '') {
+    ariaDescribedbyIDs.add(helpTextErrorId);
+  }
+  /**
+   * Update input(s) in children
+   */
+  if (props.readonly) {
+    children = children.filter(child => child.$name$ === 'append-input');
+  }
+  else {
+    children = applyAriadescribedBy(children, ariaDescribedbyIDs, utils);
+  }
+  /**
+   * Return template
+   *
+   * +--------+--------------+---------+
+   * |  label | input        | tooltip |
+   * |        +--------------+---------+
+   * |        | nb Char Left           |
+   * |        +------------------------+
+   * |        | Help Text              |
+   * |        +------------------------+
+   * |        | Error                  |
+   * +--------+------------------------+
+   *
+   * Error message is based on this aria method: https://www.w3.org/WAI/tutorials/forms/notifications/#on-focus-change
+   */
+  const TagName = getTagName(props.isFieldset);
+  /**
+   * Get tooltip node
+   * @returns mg-tooltip
+   */
+  const getTooltip = () => (h("mg-tooltip", { identifier: `${props.identifier}-tooltip`, message: props.tooltip },
+    h("mg-icon", { icon: "info-circle" })));
+  /**
+   * Get input title (label) node
+   * @returns mg-input-title
+   */
+  const getInputTitle = () => (h("mg-input-title", { identifier: props.identifier, class: props.labelHide ? 'sr-only' : undefined, required: props.required, "is-legend": props.isFieldset }, props.label));
+  return (h(TagName, { class: props.classList.join() },
+    props.labelOnTop ? (h("div", { class: "mg-input__title" },
+      getInputTitle(),
+      !props.readonly && props.tooltip && getTooltip())) : (getInputTitle()),
+    props.readonly ? (h("div", { class: "mg-input__input-container" },
+      h("strong", null, props.readonlyValue || props.value),
+      children)) : (h("div", { class: "mg-input__input-container" },
+      h("div", { class: "mg-input__input" },
+        children,
+        !props.labelOnTop && props.tooltip && getTooltip()),
+      props.displayCharacterLeft && props.maxlength && props.classList.has('is-focused') && (h("mg-character-left", { identifier: characterLeftId, characters: props.value, maxlength: props.maxlength, template: props.characterLeftTemplate })),
+      props.helpText && h("div", { id: helpTextId, class: "mg-input__help-text", innerHTML: props.helpText }),
+      props.errorMessage && h("div", { id: helpTextErrorId, class: "mg-input__error", innerHTML: props.errorMessage, "aria-live": "assertive" })))));
+};

package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.conf.js

@@ -0,0 +1 @@
+export {};