@mgdis/mg-components 3.1.0

package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.stories.js

@@ -0,0 +1,73 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-input-toggle',
+  title: 'Molecules/Inputs/mg-input-toggle',
+};
+const args = {
+  // Global
+  value: null,
+  items: [
+    { title: 'non', value: false },
+    { title: 'oui', value: true },
+  ],
+  identifier: 'identifier',
+  name: 'input-name',
+  // Label
+  label: 'Option',
+  labelOnTop: false,
+  labelHide: false,
+  // toggle
+  isIcon: false,
+  isOnOff: false,
+  // Input
+  disabled: false,
+  readonly: false,
+  // Tooltip
+  tooltip: 'This is a tooltip',
+  // Help Text
+  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
+};
+/**
+ * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
+ * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ */
+const Template = args => {
+  // Extract slot so it won't be render as an attribute
+  const labelOnTop = args.labelOnTop;
+  delete args.labelOnTop;
+  const labelHide = args.labelHide;
+  delete args.labelHide;
+  const isIcon = args.isIcon;
+  delete args.isIcon;
+  const isOnOff = args.isOnOff;
+  delete args.isOnOff;
+  const helpText = args.helpText;
+  delete args.helpText;
+  // return element
+  return (h("mg-input-toggle", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "is-icon": isIcon, "is-on-off": isOnOff }),
+    h("span", { slot: "item-1" }, "Non"),
+    h("span", { slot: "item-2" }, "Oui")));
+};
+export const MgInputToggle = Template.bind({});
+MgInputToggle.args = Object.assign({}, args);
+const TemplateIcon = args => {
+  // Extract slot so it won't be render as an attribute
+  const labelOnTop = args.labelOnTop;
+  delete args.labelOnTop;
+  const helpText = args.helpText;
+  delete args.helpText;
+  const labelHide = args.labelHide;
+  delete args.labelHide;
+  const isIcon = args.isIcon;
+  delete args.isIcon;
+  const isOnOff = args.isOnOff;
+  delete args.isOnOff;
+  // return element
+  return (h("mg-input-toggle", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText, "is-icon": isIcon, "is-on-off": isOnOff }),
+    h("span", { slot: "item-1" },
+      h("mg-icon", { icon: "cross" })),
+    h("span", { slot: "item-2" },
+      h("mg-icon", { icon: "check" }))));
+};
+export const MgInputToggleWithIcon = TemplateIcon.bind({});
+MgInputToggleWithIcon.args = Object.assign(Object.assign({}, args), { isIcon: true, isOnOff: true });

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

@@ -0,0 +1,4 @@
+/**
+ * List of all possibles message variants
+ */
+export const variants = ['info', 'warning', 'success', 'danger'];

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

@@ -0,0 +1,94 @@
+.mg-message {
+  display: inline-block;
+  position: relative;
+  box-sizing: border-box;
+  min-height: var(--default-size);
+  overflow: hidden;
+  background-color: white;
+  border-radius: var(--mg-message-border-radius);
+  box-shadow: 0 0.3rem 0.8rem 0 hsla(var(--color-dark), 0.1);
+}
+.mg-message::before {
+  content: "";
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 0.3rem;
+  height: 100%;
+}
+.mg-message.mg-message--info::before {
+  background-color: hsl(var(--color-info));
+}
+.mg-message.mg-message--info .mg-message__icon {
+  color: hsl(var(--color-info));
+}
+.mg-message.mg-message--warning::before {
+  background-color: hsl(var(--color-warning));
+}
+.mg-message.mg-message--warning .mg-message__icon {
+  color: hsl(var(--color-warning));
+}
+.mg-message.mg-message--success::before {
+  background-color: hsl(var(--color-success));
+}
+.mg-message.mg-message--success .mg-message__icon {
+  color: hsl(var(--color-success));
+}
+.mg-message.mg-message--danger::before {
+  background-color: hsl(var(--color-danger));
+}
+.mg-message.mg-message--danger .mg-message__icon {
+  color: hsl(var(--color-danger));
+}
+.mg-message.mg-message--close-button {
+  padding-right: 3.4rem;
+}
+.mg-message.mg-message--hide {
+  display: none;
+}
+.mg-message ::slotted(*) {
+  margin: 0;
+  padding: 0;
+}
+
+.mg-message__icon {
+  position: absolute;
+  top: calc((var(--default-size) - var(--mg-icon-regular-size)) / 2);
+  left: 1.3rem;
+  line-height: 1;
+}
+
+.mg-message__content {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  align-content: stretch;
+  padding: 0 1rem 0 3.8rem;
+}
+
+.mg-message__content-slot {
+  flex-grow: 1;
+  margin: 0.84rem 0;
+}
+
+.mg-message__content-separator {
+  display: inline-block;
+  width: 4.5rem;
+  height: 0;
+}
+
+.mg-message__content-actions-slot {
+  padding: 1rem 0;
+  text-align: right;
+}
+
+.mg-message__close-button {
+  position: absolute;
+  top: 0;
+  right: 0;
+}
+
+.mg-message,
+mg-message {
+  max-width: 100%;
+}

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

@@ -0,0 +1,285 @@
+import { Component, Element, Event, h, Prop, State, Watch } from '@stencil/core';
+import { createID, ClassList } from '../../../utils/components.utils';
+import { variants } from './mg-message.conf';
+import { messages } from '../../../locales';
+export class MgMessage {
+  constructor() {
+    /************
+     * Internal *
+     ************/
+    this.closeButtonId = '';
+    // Stored timer setted when hide action is run from setTimeOut
+    this.storedTimer = null;
+    /**
+     * 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-message');
+    /**
+     * Message variant
+     */
+    this.variant = variants[0];
+    /**
+     * Define if message has a cross button
+     * RG 01: https://jira.mgdis.fr/browse/PDA9-140
+     */
+    this.closeButton = false;
+    /**
+     * Define if message is hidden
+     */
+    this.hide = false;
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-message']);
+    /**
+     * Define if component is using actions slot
+     */
+    this.hasActions = false;
+    /**
+     * Handle close button
+     */
+    this.handleClose = () => {
+      this.hide = true;
+    };
+    /**
+     * Hide component whith delay
+     */
+    this.hideWithDelay = () => {
+      if (this.delay > 0 && this.hide !== true) {
+        this.storedTimer = setTimeout(() => (this.hide = true), this.delay * 1000);
+      }
+      else if (this.storedTimer !== null) {
+        clearTimeout(this.storedTimer);
+      }
+    };
+    /**
+     * Get icon corresponding to variant
+     */
+    this.getIcon = () => {
+      switch (this.variant) {
+        case 'info':
+          return 'info-circle';
+        case 'warning':
+          return 'exclamation-triangle';
+        case 'success':
+          return 'check-circle';
+        case 'danger':
+          return 'exclamation-circle';
+        default:
+          break;
+      }
+    };
+  }
+  validateDelay(newValue) {
+    if (newValue && newValue < 2) {
+      throw new Error(`<mg-message> prop "delay" must be greater than 2 seconds.`);
+    }
+  }
+  validateVariant(newValue, oldValue) {
+    if (!variants.includes(newValue)) {
+      throw new Error(`<mg-message> prop "variant" must be one of : ${variants.join(', ')}`);
+    }
+    if (oldValue !== undefined) {
+      this.classList.delete(`mg-message--${oldValue}`);
+    }
+    this.classList.add(`mg-message--${this.variant}`);
+  }
+  validateCloseButton(newValue) {
+    if (newValue && this.hasActions) {
+      this.closeButton = false;
+      throw new Error('<mg-message> prop "close-button" can\'t be used with the actions slot.');
+    }
+  }
+  validateHide(newValue) {
+    if (newValue) {
+      this.componentHide.emit();
+      this.classList.add('mg-message--hide');
+    }
+    else {
+      this.componentShow.emit();
+      this.classList.delete('mg-message--hide');
+    }
+    this.hideWithDelay();
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    this.validateVariant(this.variant);
+    // Check if close button is an can be activated
+    this.hasActions = this.element.querySelector('[slot="actions"]') !== null;
+    this.validateCloseButton(this.closeButton);
+    if (this.closeButton) {
+      this.classList.add('mg-message--close-button');
+      this.closeButtonId = `${this.identifier}-close-button`;
+    }
+    this.validateDelay(this.delay);
+    this.validateHide(this.hide);
+  }
+  render() {
+    return (h("div", { id: this.identifier, class: this.classList.join(), role: this.variant === 'info' ? 'status' : 'alert' },
+      h("span", { class: "mg-message__icon" },
+        h("mg-icon", { icon: this.getIcon() })),
+      h("div", { class: "mg-message__content" },
+        h("span", { class: "mg-message__content-slot" },
+          h("slot", null)),
+        this.hasActions && h("span", { class: "mg-message__content-separator" }),
+        this.hasActions && (h("span", { class: "mg-message__content-actions-slot" },
+          h("slot", { name: "actions" })))),
+      this.closeButton && (h("span", { class: "mg-message__close-button" },
+        h("mg-button", { identifier: this.closeButtonId, "is-icon": true, variant: "flat", label: messages.message.closeButton, onClick: this.handleClose },
+          h("mg-icon", { icon: "cross" }))))));
+  }
+  static get is() { return "mg-message"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-message.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-message.css"]
+  }; }
+  static get properties() { return {
+    "identifier": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "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-message')"
+    },
+    "delay": {
+      "type": "number",
+      "mutable": false,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Add a delay to hide/close message when it passed\nValue is defined in seconds and must greater than 2 seconds (PDA9-314 RG-06)"
+      },
+      "attribute": "delay",
+      "reflect": false
+    },
+    "variant": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Message variant"
+      },
+      "attribute": "variant",
+      "reflect": false,
+      "defaultValue": "variants[0]"
+    },
+    "closeButton": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if message has a cross button\nRG 01: https://jira.mgdis.fr/browse/PDA9-140"
+      },
+      "attribute": "close-button",
+      "reflect": false,
+      "defaultValue": "false"
+    },
+    "hide": {
+      "type": "boolean",
+      "mutable": true,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Define if message is hidden"
+      },
+      "attribute": "hide",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "classList": {},
+    "hasActions": {}
+  }; }
+  static get events() { return [{
+      "method": "componentShow",
+      "name": "component-show",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when message is diplayed"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }, {
+      "method": "componentHide",
+      "name": "component-hide",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": "Emmited event when message is hidden"
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "delay",
+      "methodName": "validateDelay"
+    }, {
+      "propName": "variant",
+      "methodName": "validateVariant"
+    }, {
+      "propName": "closeButton",
+      "methodName": "validateCloseButton"
+    }, {
+      "propName": "hide",
+      "methodName": "validateHide"
+    }]; }
+}

package/dist/collection/components/molecules/mg-message/mg-message.stories.js

@@ -0,0 +1,43 @@
+import { h } from '@stencil/core';
+import { variants } from './mg-message.conf';
+export default {
+  component: 'mg-message',
+  title: 'Molecules/mg-message',
+  argTypes: {
+    variant: {
+      options: variants,
+      control: { type: 'select' },
+    },
+  },
+};
+/**
+ * 1. camelCase arguments must be written in the template, for exemple labelOnTop must be placed in the template as label-on-top={args.labelOnTop}
+ * 2. boolean arguments with a default true value must be added like display-character-left={args.displayCharacterLeft ? 'true' : 'false'}
+ */
+const Template = args => {
+  // Extract slot so it won't be render as an attribute
+  const slotContent = args.slotContent;
+  delete args.slotContent;
+  const slotActions = args.slotActions;
+  delete args.slotActions;
+  const closeButton = args.closeButton;
+  delete args.closeButton;
+  // return element
+  return (h("mg-message", Object.assign({}, args, { "close-button": closeButton }),
+    slotContent && h("span", { innerHTML: slotContent }),
+    slotActions && h("span", { slot: "actions", innerHTML: slotActions })));
+};
+export const MgMessage = Template.bind({});
+MgMessage.args = {
+  slotContent: `<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>`,
+  slotActions: ``,
+  identifier: 'identifier',
+  variant: variants[0],
+  closeButton: false,
+  hide: false,
+  delay: undefined,
+};
+export const WithCloseButton = Template.bind({});
+WithCloseButton.args = Object.assign(Object.assign({}, MgMessage.args), { variant: 'danger', closeButton: true });
+export const WithActions = Template.bind({});
+WithActions.args = Object.assign(Object.assign({}, MgMessage.args), { variant: 'warning', slotActions: `<div slot="actions" class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>` });

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

@@ -0,0 +1,5 @@
+export var NavigationAction;
+(function (NavigationAction) {
+  NavigationAction["NEXT"] = "next";
+  NavigationAction["PREVIOUS"] = "previous";
+})(NavigationAction || (NavigationAction = {}));

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

@@ -0,0 +1,39 @@
+/**
+ * A11Y
+ */
+.sr-only {
+  border: 0 !important;
+  clip: rect(1px, 1px, 1px, 1px) !important;
+  -webkit-clip-path: inset(50%) !important;
+  clip-path: inset(50%) !important;
+  height: 1px !important;
+  margin: -1px !important;
+  overflow: hidden !important;
+  padding: 0 !important;
+  position: absolute !important;
+  width: 1px !important;
+  white-space: nowrap !important;
+}
+
+*:focus:not(:focus-visible) {
+  outline: none;
+}
+
+.mg-pagination__nav {
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+}
+.mg-pagination__nav mg-input-select {
+  margin-right: 0.5rem;
+}
+
+.mg-pagination__button {
+  display: flex;
+}
+.mg-pagination__button:first-of-type {
+  margin-right: 1rem;
+}
+.mg-pagination__button:last-of-type {
+  margin-left: 1rem;
+}