@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,148 @@
+import { Component, h, Prop, State, Watch } from '@stencil/core';
+import { variants } from './mg-badge.conf';
+import { ClassList } from '../../../utils/components.utils';
+export class MgBadge {
+  constructor() {
+    /**
+     * Define button variant
+     */
+    this.variant = variants[variants.length - 1];
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-badge']);
+  }
+  valideValue(newValue) {
+    if (`${newValue}`.match(/^(\d+|[?*!a-z])$/i) === null) {
+      throw new Error('<mg-badge> prop "value" must be interger or ponctuation character.');
+    }
+  }
+  validateVariant(newValue) {
+    if (!variants.includes(newValue)) {
+      throw new Error(`<mg-badge> prop "variant" must be one of : ${variants.join(', ')}.`);
+    }
+    this.classList.add(`mg-badge--${this.variant}`);
+  }
+  validateOutline(newValue) {
+    if (newValue)
+      this.classList.add(`mg-badge--outline`);
+  }
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad() {
+    this.valideValue(this.value);
+    this.validateVariant(this.variant);
+    this.validateOutline(this.outline);
+  }
+  /**
+   * Render
+   */
+  render() {
+    return (h("span", { class: this.classList.join() },
+      this.value,
+      h("span", { class: "sr-only" }, this.label)));
+  }
+  static get is() { return "mg-badge"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-badge.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-badge.css"]
+  }; }
+  static get properties() { return {
+    "value": {
+      "type": "any",
+      "mutable": true,
+      "complexType": {
+        "original": "BadgeType['value']",
+        "resolved": "number | string",
+        "references": {
+          "BadgeType": {
+            "location": "import",
+            "path": "./mg-badge.conf"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Badge value"
+      },
+      "attribute": "value",
+      "reflect": false
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "BadgeType['label']",
+        "resolved": "string",
+        "references": {
+          "BadgeType": {
+            "location": "import",
+            "path": "./mg-badge.conf"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Badge label. Include short description.\nRequired for accessibility"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "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[variants.length - 1]"
+    },
+    "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": "value",
+      "methodName": "valideValue"
+    }, {
+      "propName": "variant",
+      "methodName": "validateVariant"
+    }, {
+      "propName": "outline",
+      "methodName": "validateOutline"
+    }]; }
+}

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

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

package/dist/collection/components/atoms/mg-button/mg-button.conf.js

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles variants
+ */
+export const variants = ['primary', 'secondary', 'danger', 'danger-alt', 'info', 'flat'];

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

@@ -0,0 +1,134 @@
+/* Variables */
+/* Mixins */
+/* Styles */
+.mg-button {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  padding: calc((var(--default-size) - 0.2rem - var(--font-size) * var(--line-height)) / 2) 1.1rem;
+  min-height: var(--default-size);
+  box-sizing: border-box;
+  border-top-right-radius: var(--mg-button-border-radius-top-right, var(--mg-button-border-radius));
+  border-top-left-radius: var(--mg-button-border-radius-top-left, var(--mg-button-border-radius));
+  border-bottom-right-radius: var(--mg-button-border-radius-bottom-right, var(--mg-button-border-radius));
+  border-bottom-left-radius: var(--mg-button-border-radius-bottom-left, var(--mg-button-border-radius));
+  cursor: pointer;
+  background-image: none;
+  border: 0.1rem solid;
+  font-family: inherit;
+  text-decoration: none;
+  font-weight: normal;
+  text-align: left;
+  touch-action: manipulation;
+}
+.mg-button[disabled], .mg-button[aria-disabled], .mg-button.disabled {
+  opacity: var(--mg-button-disabled-opacity);
+  cursor: not-allowed;
+}
+.mg-button.mg-button--icon {
+  padding: 0;
+  justify-content: center;
+  width: var(--default-size);
+  height: var(--default-size);
+  border-radius: var(--mg-button-icon-border-radius);
+}
+.mg-button.mg-button--primary {
+  border-color: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
+  /* IE FIX */
+  border-color: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%));
+  color: hsl(var(--mg-button-primary-font-color));
+  background: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
+  /* IE FIX */
+  background: linear-gradient(to bottom, hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l)), hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), calc(var(--mg-button-primary-color-l) - 10%)));
+}
+.mg-button.mg-button--primary:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--primary:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--primary:active:not([disabled], [aria-disabled], .disabled) {
+  background: hsl(var(--mg-button-primary-color-h), var(--mg-button-primary-color-s), var(--mg-button-primary-color-l));
+}
+.mg-button.mg-button--secondary {
+  border-color: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
+  /* IE FIX */
+  border-color: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%));
+  color: hsl(var(--mg-button-secondary-font-color));
+  background: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
+  /* IE FIX */
+  background: linear-gradient(to bottom, hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l)), hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), calc(var(--mg-button-secondary-color-l) - 10%)));
+}
+.mg-button.mg-button--secondary:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--secondary:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--secondary:active:not([disabled], [aria-disabled], .disabled) {
+  background: hsl(var(--mg-button-secondary-color-h), var(--mg-button-secondary-color-s), var(--mg-button-secondary-color-l));
+}
+.mg-button.mg-button--danger {
+  border-color: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  /* IE FIX */
+  border-color: hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%));
+  color: hsl(var(--color-neutral));
+  background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+  /* IE FIX */
+  background: linear-gradient(to bottom, hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l)), hsl(var(--color-danger-h), var(--color-danger-s), calc(var(--color-danger-l) - 10%)));
+}
+.mg-button.mg-button--danger:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger:active:not([disabled], [aria-disabled], .disabled) {
+  background: hsl(var(--color-danger-h), var(--color-danger-s), var(--color-danger-l));
+}
+.mg-button.mg-button--danger-alt {
+  border-color: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
+  /* IE FIX */
+  border-color: hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%));
+  color: hsl(var(--color-danger));
+  background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
+  /* IE FIX */
+  background: linear-gradient(to bottom, hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l)), hsl(var(--color-neutral-h), var(--color-neutral-s), calc(var(--color-neutral-l) - 10%)));
+}
+.mg-button.mg-button--danger-alt:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger-alt:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--danger-alt:active:not([disabled], [aria-disabled], .disabled) {
+  background: hsl(var(--color-neutral-h), var(--color-neutral-s), var(--color-neutral-l));
+}
+.mg-button.mg-button--info {
+  border-color: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  /* IE FIX */
+  border-color: hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%));
+  color: hsl(var(--color-neutral));
+  background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+  /* IE FIX */
+  background: linear-gradient(to bottom, hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l)), hsl(var(--color-info-h), var(--color-info-s), calc(var(--color-info-l) - 10%)));
+}
+.mg-button.mg-button--info:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--info:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--info:active:not([disabled], [aria-disabled], .disabled) {
+  background: hsl(var(--color-info-h), var(--color-info-s), var(--color-info-l));
+}
+.mg-button.mg-button--flat {
+  background: none;
+  border: none;
+}
+.mg-button.mg-button--flat:hover:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--flat:focus:not([disabled], [aria-disabled], .disabled), .mg-button.mg-button--flat:active:not([disabled], [aria-disabled], .disabled) {
+  background: hsla(var(--color-dark), 0.1);
+}
+.mg-button ::slotted(mg-icon) {
+  display: inline-flex;
+  flex-shrink: 0;
+  line-height: 1;
+  margin: auto 0;
+}
+.mg-button__content {
+  display: flex;
+  align-items: baseline;
+  column-gap: 0.6rem;
+}
+.mg-button--loading > mg-icon {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+}
+.mg-button--loading .mg-button__content {
+  opacity: 0;
+}
+.mg-button ::slotted(mg-badge) {
+  margin-left: 0.3rem;
+}
+
+mg-button {
+  display: inline-block;
+}
+
+.mg-button,
+mg-button {
+  vertical-align: middle;
+  max-width: 100%;
+}

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

@@ -0,0 +1,236 @@
+import { Component, Element, h, Prop, State, Watch } from '@stencil/core';
+import { variants } from './mg-button.conf';
+import { ClassList, createID } from '../../../utils/components.utils';
+export class MgButton {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    this.onClickElementFn = null;
+    /**
+     * Define button variant
+     */
+    this.variant = variants[0]; // Primary
+    /**
+     * Identifier is used for the element ID (id is a reserved prop in Stencil.js)
+     * If not set, it will be created.
+     */
+    this.identifier = createID('mg-button');
+    /**
+     * Disable button
+     */
+    this.disabled = false;
+    /**
+     * Define if button is round.
+     * Used for icon button.
+     */
+    this.isIcon = false;
+    /**
+     * 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.
+     */
+    this.disableOnClick = false;
+    /**
+     * Define if button is loading, default to false.
+     * Trigger when button is clicked or key-up ['enter', 'space], then value change to true.
+     * It's required to reset to false when action/promise in parent is done to stop the loading state
+     */
+    this.loading = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-button']);
+    /**
+     * Trigger actions onClick event
+     */
+    this.handleClick = (event) => {
+      if (this.disabled)
+        event.stopPropagation();
+      // Used to prevent multi-click.
+      if (this.disableOnClick && !this.disabled) {
+        this.loading = true;
+        this.disabled = true;
+      }
+    };
+  }
+  validateVariant(newValue) {
+    if (!variants.includes(newValue)) {
+      throw new Error(`<mg-button> prop "variant" must be one of : ${variants.join(', ')}`);
+    }
+    this.classList.add(`mg-button--${this.variant}`);
+  }
+  disabledHandler(isDisabled) {
+    // Remove loading when enable
+    // Will be set back onclick
+    if (!isDisabled && this.disableOnClick) {
+      this.loading = false;
+    }
+    // Manage if onclick
+    this.element.onclick = isDisabled ? undefined : this.onClickElementFn;
+  }
+  loadingHandler(newValue) {
+    // we add loading style if it newvalue is true else we remove it
+    if (newValue) {
+      this.classList.add('mg-button--loading');
+    }
+    else {
+      this.classList.delete('mg-button--loading');
+    }
+  }
+  /**
+   * Check if props are well configured on init
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    if (this.isIcon) {
+      this.classList.add(`mg-button--icon`);
+      if (typeof this.label !== 'string' || this.label === '') {
+        throw new Error(`<mg-button> prop "label" is mandatory when prop "isIcon" is set to true.`);
+      }
+    }
+    // Store the onclick fn
+    this.onClickElementFn = this.element.onclick;
+    this.disabledHandler(this.disabled);
+  }
+  /**
+   * Render component
+   */
+  render() {
+    return (h("button", { id: this.identifier, class: this.classList.join(), "aria-label": this.label, "aria-disabled": this.disabled, onClick: this.handleClick },
+      this.loading && h("mg-icon", { icon: "loader", spin: true }),
+      h("div", { class: "mg-button__content" },
+        h("slot", null))));
+  }
+  static get is() { return "mg-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-button.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-button.css"]
+  }; }
+  static get properties() { return {
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define button variant"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "variants[0]"
+    },
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": true,
+      "docs": {
+        "tags": [],
+        "text": "Identifier is used for the element ID (id is a reserved prop in Stencil.js)\nIf not set, it will be created."
+      },
+      "attribute": "identifier",
+      "reflect": false,
+      "defaultValue": "createID('mg-button')"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "aria-label\nIn case button text is not explicit enough"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Disable button"
+      },
+      "attribute": "disabled",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "isIcon": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if button is round.\nUsed for icon button."
+      },
+      "attribute": "is-icon",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "disableOnClick": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Option to set input disable on click, in order to prevent multi-click.\nParent component have to remove the attribute 'disabled' when the process ends."
+      },
+      "attribute": "disable-on-click",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "loading": {},
+    "classList": {}
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "variant",
+      "methodName": "validateVariant"
+    }, {
+      "propName": "disabled",
+      "methodName": "disabledHandler"
+    }, {
+      "propName": "loading",
+      "methodName": "loadingHandler"
+    }]; }
+}

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

@@ -0,0 +1,38 @@
+import { h } from '@stencil/core';
+import { variants } from './mg-button.conf';
+import { icons } from '../mg-icon/mg-icon.conf';
+export default {
+  component: 'mg-button',
+  title: 'Atoms/mg-button',
+  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;
+  const disableOnClick = args.disableOnClick;
+  delete args.disableOnClick;
+  const isIcon = args.isIcon;
+  delete args.isIcon;
+  // return element
+  return (h("mg-button", Object.assign({}, args, { "disable-on-click": disableOnClick, "is-icon": isIcon }), slot));
+};
+export const MgButton = Template.bind({});
+MgButton.args = {
+  slot: 'Text button',
+  variant: variants[0],
+  label: 'Explicit aria label',
+  identifier: undefined,
+  disabled: false,
+  disableOnClick: false,
+  isIcon: false,
+};
+export const IsIcon = Template.bind({});
+IsIcon.args = Object.assign(Object.assign({}, MgButton.args), { isIcon: true, slot: h("mg-icon", { icon: Object.keys(icons)[0] }) });
+export const DisableOnClick = Template.bind({});
+DisableOnClick.args = Object.assign(Object.assign({}, MgButton.args), { disableOnClick: true });

package/dist/collection/components/atoms/mg-character-left/mg-character-left.css

@@ -0,0 +1,3 @@
+mg-character-left {
+  display: block;
+}