@mgdis/mg-components 3.1.0

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

@@ -0,0 +1,212 @@
+import { Component, h, Host, Prop, State, Element, Watch } from '@stencil/core';
+import { createID, ClassList, allItemsAreString } from '../../../utils/components.utils';
+/**
+ * type TabItem validation function
+ * @param tab
+ * @returns {boolean}
+ */
+const isTabItem = (tab) => typeof tab === 'object' && typeof tab.label === 'string';
+export class MgTabs {
+  constructor() {
+    /**
+     * 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-tabs');
+    /**
+     * Active tab number
+     * default: first is 1
+     */
+    this.activeTab = 1;
+    /**
+     * Component tabs
+     */
+    this.tabs = [];
+    /**
+     * Component classes
+     */
+    this.classList = new ClassList(['mg-tabs']);
+    /**
+     * Handle click events on tabs
+     * @param event
+     */
+    this.handleClick = (event) => {
+      const tabId = event.currentTarget.getAttribute('data-index');
+      this.activeTab = Number(tabId);
+    };
+    /**
+     * Handle keyboard event on tabs
+     * @param event
+     */
+    this.handleKeydown = (event) => {
+      let selectedTab;
+      let tabId = Number(event.target.getAttribute('data-index'));
+      const parent = event.target.parentElement;
+      // change selected id from key code
+      // /* IE FIX */ delete 'Right'
+      if (['ArrowRight', 'Right'].includes(event.key)) {
+        tabId++;
+        // /* IE FIX */ delete 'Left'
+      }
+      else if (['ArrowLeft', 'Left'].includes(event.key)) {
+        tabId--;
+      }
+      // get selected tab
+      selectedTab = parent.querySelector(`[data-index="${tabId}"]`);
+      // apply selected tab if exist
+      if (selectedTab !== null) {
+        selectedTab.focus();
+        this.activeTab = tabId;
+      }
+    };
+    /**
+     * Validate slots setting
+     */
+    this.validateSlots = () => {
+      const slots = Array.from(this.element.children).filter(slot => { var _a; return (_a = slot.getAttribute('slot')) === null || _a === void 0 ? void 0 : _a.includes('tab_content-'); });
+      if (slots.length !== this.tabs.length) {
+        throw new Error('<mg-tabs> Must have slots counts equal to tabs count.');
+      }
+    };
+  }
+  validateItems(newValue) {
+    // String array
+    if (allItemsAreString(newValue)) {
+      this.tabs = newValue.map(item => ({ label: item }));
+    }
+    // Object array
+    else if (newValue && newValue.every(item => isTabItem(item))) {
+      this.tabs = newValue;
+    }
+    else {
+      throw new Error('<mg-tabs> prop "items" is required and all items must be the same type: TabItem.');
+    }
+  }
+  validateActiveTab(newValue) {
+    if (Number(newValue) < 1 || Number(newValue) > this.tabs.length) {
+      throw new Error('<mg-tabs> prop "activeTab" must be between 1 and tabs length.');
+    }
+  }
+  /*************
+   * Lifecycle *
+   *************/
+  /**
+   * Check if component props are well configured on init
+   */
+  componentWillLoad() {
+    // Check tabs format
+    this.validateItems(this.items);
+    this.validateActiveTab(this.activeTab);
+    this.validateSlots();
+  }
+  render() {
+    return (h(Host, null,
+      h("header", { role: "tablist", "aria-label": this.label, class: "mg-tabs__header" }, this.tabs.map((tab, index) => {
+        const tabIndex = index + 1;
+        return (h("button", { role: "tab", id: `${this.identifier}-${tabIndex}`, class: `mg-tabs__navigation-button ${tabIndex === this.activeTab ? 'mg-tabs__navigation-button--active' : ''}`, tabindex: tabIndex === this.activeTab ? 0 : -1, "aria-selected": (tabIndex === this.activeTab).toString(), "aria-controls": `pannel-${tabIndex}`, onClick: this.handleClick, onKeyDown: this.handleKeydown, "data-index": tabIndex },
+          tab.icon !== undefined && h("mg-icon", { icon: tab.icon }),
+          tab.label,
+          tab.badge !== undefined && h("mg-badge", { variant: "info", value: tab.badge.value, label: tab.badge.label })));
+      })),
+      this.tabs.map((_tab, index) => {
+        const tabIndex = index + 1;
+        return (h("article", { role: "tabpanel", id: `pannel-${tabIndex}`, hidden: tabIndex !== this.activeTab, "aria-labelledby": `${this.identifier}-${this.activeTab}`, tabindex: tabIndex === this.activeTab ? 0 : -1, class: "mg-tabs__content-container" },
+          h("slot", { name: `tab_content-${tabIndex}` })));
+      })));
+  }
+  static get is() { return "mg-tabs"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() { return {
+    "$": ["mg-tabs.scss"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["mg-tabs.css"]
+  }; }
+  static get properties() { return {
+    "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-tabs')"
+    },
+    "label": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tabs label. Include short tabs description.\nRequired for accessibility"
+      },
+      "attribute": "label",
+      "reflect": false
+    },
+    "items": {
+      "type": "unknown",
+      "mutable": false,
+      "complexType": {
+        "original": "string[] | TabItem[]",
+        "resolved": "TabItem[] | string[]",
+        "references": {
+          "TabItem": {
+            "location": "import",
+            "path": "./mg-tabs.conf"
+          }
+        }
+      },
+      "required": true,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Tabs items\nRequired"
+      }
+    },
+    "activeTab": {
+      "type": "number",
+      "mutable": true,
+      "complexType": {
+        "original": "number",
+        "resolved": "number",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Active tab number\ndefault: first is 1"
+      },
+      "attribute": "active-tab",
+      "reflect": true,
+      "defaultValue": "1"
+    }
+  }; }
+  static get states() { return {
+    "tabs": {},
+    "classList": {}
+  }; }
+  static get elementRef() { return "element"; }
+  static get watchers() { return [{
+      "propName": "items",
+      "methodName": "validateItems"
+    }, {
+      "propName": "activeTab",
+      "methodName": "validateActiveTab"
+    }]; }
+}

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

@@ -0,0 +1,40 @@
+import { h } from '@stencil/core';
+export default {
+  component: 'mg-tabs',
+  title: 'Molecules/mg-tabs',
+};
+/**
+ * 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 => {
+  // return element
+  const activeTab = args.activeTab;
+  delete args.activeTab;
+  return (h("mg-tabs", Object.assign({}, args, { "active-tab": activeTab }),
+    h("div", { slot: "tab_content-1" }, "Content 1"),
+    h("div", { slot: "tab_content-2" }, "Content 2"),
+    h("div", { slot: "tab_content-3" }, "Content 3")));
+};
+export const MgTabs = Template.bind({});
+MgTabs.args = {
+  items: ['Tab 1', 'Tab 2', 'Tab 3'],
+  label: 'Short tabs description. Needeed for accessibility',
+  activeTab: undefined,
+};
+export const MgTabsItems = Template.bind({});
+MgTabsItems.args = Object.assign(Object.assign({}, MgTabs.args), { items: [
+    {
+      label: 'Tab 1',
+      icon: 'check',
+      badge: { value: 1, label: 'message' },
+    },
+    {
+      label: 'Tab 2',
+      badge: { value: 5, label: 'messages' },
+    },
+    {
+      label: 'Tab 3',
+      icon: 'cross',
+    },
+  ] });

package/dist/collection/index.js

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

package/dist/collection/locales/index.js

@@ -0,0 +1,4 @@
+export const locale = 'fr-FR';
+import fr from './fr-FR/messages.json';
+export const messages = fr;
+export const currency = 'EUR';

package/dist/collection/stories/buttons.stories.js

@@ -0,0 +1,43 @@
+import { h } from '@stencil/core';
+import { variants } from '../components/atoms/mg-button/mg-button.conf';
+export default {
+  title: 'Style/Buttons',
+  argTypes: {
+    align: {
+      options: ['left', 'right'],
+      control: { type: 'select' },
+    },
+  },
+};
+const Template = args => (h("div", null,
+  h("h1", null, "Buttons"),
+  variants.map(variant => (h("div", { style: { marginBottom: '1rem' }, class: `mg-group-elements${args.align === 'right' ? ' mg-group-elements--align-right' : ''}` },
+    h("button", Object.assign({ class: `mg-button mg-button--${variant}` }, args), variant),
+    h("button", Object.assign({ class: `mg-button mg-button--${variant}` }, args),
+      h("mg-icon", { icon: "info-circle" }),
+      variant),
+    h("button", Object.assign({ class: `mg-button mg-button--${variant} mg-button--icon` }, args),
+      h("mg-icon", { icon: "info-circle" }))))),
+  h("h2", null, "Link"),
+  variants.map(variant => (h("div", { style: { marginBottom: '1rem' }, class: `mg-group-elements${args.align === 'right' ? ' mg-group-elements--align-right' : ''}` },
+    h("a", Object.assign({ class: `mg-button mg-button--${variant}` }, args), variant),
+    h("a", Object.assign({ class: `mg-button mg-button--${variant}` }, args),
+      h("mg-icon", { icon: "info-circle" }),
+      variant),
+    h("a", Object.assign({ class: `mg-button mg-button--${variant} mg-button--icon` }, args),
+      h("mg-icon", { icon: "info-circle" }))))),
+  h("h2", null, "Helpers"),
+  h("h3", null, ".mg-group-elements"),
+  h("p", null,
+    "Buttons can be grouped in an HTMLelement using the ",
+    h("code", null, ".mg-group-elements"),
+    " class, it will ensure a 10px margin space between them, even verticaly. Above exemples are using it."),
+  h("p", null,
+    "By adding the ",
+    h("code", null, ".mg-group-elements--align-right"),
+    " class you 'll set a right alignment of the button, even when line breaks.")));
+export const Buttons = Template.bind({});
+Buttons.args = {
+  disabled: false,
+  align: 'left',
+};

package/dist/collection/stories/grids.stories.js

@@ -0,0 +1,50 @@
+import { h } from '@stencil/core';
+export default {
+  title: 'Style/Layout/Grid',
+};
+const Template = () => (h("main", { id: "demo" },
+  h("h1", null, "Grid"),
+  h("p", null,
+    "You can use grid classes by using the ",
+    h("code", null, ".mg-grid"),
+    " class in the container. This call will add flex properties to the container."),
+  h("h2", null, "Auto layout"),
+  h("p", null,
+    "Default column class is ",
+    h("code", null, "mg-grid__col"),
+    ". The width will be defined by the number of element using the class."),
+  h("div", { class: "mg-grid" },
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col")),
+  h("div", { class: "mg-grid" },
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col")),
+  h("div", { class: "mg-grid" },
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col")),
+  h("h2", null, "Sized column"),
+  h("p", null, "Like Bootstrap, you can use sized colomn based on a 12 colomns grid."),
+  h("p", null,
+    "The library is using the BEM methodology, so to define a column width we need to set a modifier class, for exemple ",
+    h("code", null, "mg-grid__col-2"),
+    "."),
+  [...Array.from(Array(12).keys())].map((_e, i) => (h("div", { class: "mg-grid" },
+    h("div", { class: `mg-grid__col mg-grid__col-${i + 1}` },
+      ".mg-grid__col.mg-grid__col-",
+      i + 1)))),
+  h("h2", null, "Mix"),
+  h("p", null, "You can also mix unsized column with sized column."),
+  h("div", { class: "mg-grid" },
+    h("div", { class: "mg-grid__col mg-grid__col-3" }, ".mg-grid__col.mg-grid__col-3"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col mg-grid__col-3" }, ".mg-grid__col.mg-grid__col-3")),
+  h("div", { class: "mg-grid" },
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"),
+    h("div", { class: "mg-grid__col mg-grid__col-5" }, ".mg-grid__col.mg-grid__col-5"),
+    h("div", { class: "mg-grid__col" }, ".mg-grid__col"))));
+export const Grid = Template.bind({});
+Grid.args = {};

package/dist/collection/stories/icons.stories.js

@@ -0,0 +1,20 @@
+import { h } from '@stencil/core';
+import { icons, sizes } from '../components/atoms/mg-icon/mg-icon.conf';
+export default {
+  title: 'Style/Icons',
+  argTypes: {
+    size: {
+      options: sizes,
+      control: { type: 'select' },
+    },
+  },
+};
+const Template = args => (h("ul", { style: { display: 'flex', flexWrap: 'wrap', margin: '0', padding: '0', listStyle: 'none', textAlign: 'center' } }, Object.keys(icons).map((icon) => (h("li", { style: { margin: '1rem', padding: '1rem', width: '100px' } },
+  h("div", { style: { color: args.color, margin: '1rem' } },
+    h("mg-icon", { icon: icon, size: args.size })),
+  h("div", null, icon))))));
+export const Icons = Template.bind({});
+Icons.args = {
+  color: '',
+  size: sizes[0], // regular
+};

package/dist/collection/stories/messages.stories.js

@@ -0,0 +1,44 @@
+import { h } from '@stencil/core';
+import { variants } from '../components/molecules/mg-message/mg-message.conf';
+export default {
+  title: 'Style/Messages',
+  argTypes: {
+    variant: {
+      options: variants,
+      control: { type: 'select' },
+    },
+  },
+};
+const Template = args => (h("main", null,
+  h("h1", null, "Messages"),
+  h("h2", null, "Simple"),
+  h("div", { class: `mg-message mg-message--${args.variant}` },
+    h("span", { class: "mg-message__icon" },
+      h("mg-icon", { icon: "info-circle" })),
+    h("div", { class: "mg-message__content" },
+      h("span", { class: "mg-message__content-slot", innerHTML: args.content }))),
+  h("h2", null, "w/ close button"),
+  h("div", { class: `mg-message mg-message--${args.variant} mg-message--close-button` },
+    h("span", { class: "mg-message__icon" },
+      h("mg-icon", { icon: "info-circle" })),
+    h("div", { class: "mg-message__content" },
+      h("span", { class: "mg-message__content-slot", innerHTML: args.content })),
+    h("span", { class: "mg-message__close-button" },
+      h("button", { class: "mg-button mg-button--flat mg-button--icon" },
+        h("mg-icon", { icon: "cross", size: "small" })))),
+  h("h2", null, "w/ actions"),
+  h("div", { class: `mg-message mg-message--${args.variant}` },
+    h("span", { class: "mg-message__icon" },
+      h("mg-icon", { icon: "info-circle" })),
+    h("div", { class: "mg-message__content" },
+      h("span", { class: "mg-message__content-slot", innerHTML: args.content }),
+      h("span", { class: "mg-message__content-separator" }),
+      h("span", { class: "mg-message__content-actions-slot" },
+        h("span", { class: "mg-group-elements mg-group-elements--align-right" },
+          h("button", { class: "mg-button mg-button--primary" }, "Primary"),
+          h("button", { class: "mg-button mg-button--secondary" }, "Secondary")))))));
+export const Messages = Template.bind({});
+Messages.args = {
+  variant: variants[0],
+  content: '<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>',
+};

package/dist/collection/stories/tags.stories.js

@@ -0,0 +1,13 @@
+import { h } from '@stencil/core';
+import { variants } from '../components/atoms/mg-tag/mg-tag.conf';
+export default {
+  title: 'Style/Tags',
+};
+const Template = args => (h("div", null,
+  h("h1", null, "Tags"),
+  h("h2", null, "Plain"),
+  h("div", { class: "mg-group-elements" }, variants.map(variant => (h("span", Object.assign({ class: `mg-tag mg-tag--${variant}` }, args), variant)))),
+  h("h2", null, "Outline"),
+  h("div", { class: "mg-group-elements" }, variants.map(variant => (h("span", Object.assign({ class: `mg-tag mg-tag--${variant} mg-tag--outline` }, args), variant))))));
+export const Tags = Template.bind({});
+Tags.args = {};

package/dist/collection/stories/typography.stories.js

@@ -0,0 +1,28 @@
+import { h } from '@stencil/core';
+export default {
+  title: 'Style/Typography',
+};
+const Template = args => (h("div", null,
+  h("h1", null, args.h1),
+  h("h2", null, args.h2),
+  h("h3", null, args.h3),
+  h("h4", null, args.h4),
+  h("h5", null, args.h5),
+  h("h6", null, args.h6),
+  h("p", null, args.p),
+  h("p", null,
+    h("strong", null, args.strong)),
+  h("p", null,
+    h("small", null, args.small))));
+export const Typography = Template.bind({});
+Typography.args = {
+  h1: 'The h1 heading element',
+  h2: 'The h2 heading element',
+  h3: 'The h3 heading element',
+  h4: 'The h4 heading element',
+  h5: 'The h5 heading element',
+  h6: 'The h6 heading element',
+  p: 'The Paragraph element',
+  strong: 'The Strong Importance element',
+  small: 'The side comment element',
+};

package/dist/collection/utils/components.utils.js

@@ -0,0 +1,67 @@
+/**
+ * Create random ID
+ * @param prefix {string} add prefix to created ID
+ * @returns {string} ID
+ */
+export function createID(prefix = '', length = 10) {
+  let ID = '';
+  const chars = 'abcdefghijklmnopqrstuvwxyz0123456789';
+  const charsLength = chars.length;
+  for (var i = 0; i < length; i++) {
+    ID += chars.charAt(Math.floor(Math.random() * charsLength));
+  }
+  return (prefix !== '' ? `${prefix}-` : '') + ID;
+}
+/**
+ * Class to manage component classlist
+ * Set() are not working when imported in project
+ */
+export class ClassList {
+  constructor(classlist = []) {
+    /**
+     * Add class
+     * @param className
+     * @returns {void}
+     */
+    this.add = (className) => {
+      if (!this.has(className)) {
+        this.classes.push(className);
+      }
+    };
+    /**
+     * Delete class
+     * @param className
+     * @returns {void}
+     */
+    this.delete = (className) => {
+      const index = this.classes.indexOf(className);
+      if (index > -1) {
+        this.classes.splice(index, 1);
+      }
+    };
+    /**
+     * Check if class exist in list
+     * @param className
+     * @returns {boolean}
+     */
+    this.has = (className) => {
+      return this.classes.includes(className);
+    };
+    /**
+     * Join classes seperated by spaces
+     * @returns {string}
+     */
+    this.join = () => {
+      return this.classes.join(' ');
+    };
+    this.classes = classlist;
+  }
+}
+/**
+ * Check if all items are string
+ * @param items
+ * @returns {boolean}
+ */
+export function allItemsAreString(items) {
+  return items && items.every(item => typeof item === 'string');
+}

package/dist/collection/utils/locale.utils.js

@@ -0,0 +1,32 @@
+import { locale, currency } from '../locales';
+/**
+ * Format number to the locale currency
+ * @param number {number}
+ * @returns {string} formatted currency
+ */
+export function localeCurrency(number) {
+  return new Intl.NumberFormat(locale, { style: 'currency', currency }).format(number);
+}
+/**
+ * Format number to locale
+ * @param number {number}
+ * @returns {string} formatted number
+ */
+export function localeNumber(number) {
+  return new Intl.NumberFormat(locale).format(number);
+}
+/**
+ * Date RegExp
+ */
+export const dateRegExp = /^\d{4}-(0[1-9]|1[0-2])-(0[1-9]|[12]\d|3[01])$/;
+/**
+ * Locale date format
+ * @param date {string}
+ * @returns {string} formatted date
+ */
+export function localeDate(date) {
+  if (typeof date !== 'string' || date === '' || !dateRegExp.test(date)) {
+    return '';
+  }
+  return new Intl.DateTimeFormat(locale).format(new Date(date));
+}

package/dist/collection/utils/test.utils.js

@@ -0,0 +1,26 @@
+import { newE2EPage } from '@stencil/core/testing';
+export async function createPage(htmlString) {
+  const options = {
+    html: `<link rel="stylesheet" href="http://localhost:3333/build/variables.css" /><meta charset="UTF-8">${htmlString}`,
+    viewportWidth: 600,
+  };
+  const page = (await newE2EPage());
+  const viewport = Object.assign({ height: page.viewport().height }, { width: options.viewportWidth });
+  await page.setViewport(viewport);
+  await page.setContent(options.html, { waitUntil: 'networkidle0' });
+  await page.evaluateHandle('document.fonts.ready');
+  // monkey patch screenshot function to add some extra features
+  const screenshot = page.screenshot;
+  page.screenshot = async function () {
+    return screenshot.call(page, {
+      clip: {
+        x: 0,
+        y: 0,
+        width: page.viewport().width,
+        height: page.viewport().height,
+      },
+    });
+  };
+  return page;
+}
+export const cloneDeep = el => JSON.parse(JSON.stringify(el));