@mgdis/mg-components 5.6.0 → 5.7.0

package/dist/.storybook/utils.js

@@ -1,24 +0,0 @@
-export const filterArgs = (args, defaultValues) => {
-  const filteredArgs = {};
-  for (const k in args) {
-    if (!k.startsWith('slot')) {
-      const arg = args[k];
-      // Change camelCase k to kebab-case
-      const key = k.replace(/([a-z])([A-Z])/g, '$1-$2').toLowerCase();
-      // Change value to boolean true value, will be replace during render
-      if (typeof arg === 'boolean' && arg === true) {
-        filteredArgs[key] = 'mg__storybook__boolean-true';
-      }
-      // Do not add args if is default value
-      else if (!defaultValues || !Object.keys(defaultValues).includes(k) || defaultValues[k] !== arg) {
-        filteredArgs[key] = arg;
-      }
-    }
-  }
-  // Add comment when args contain object, will be replace during render
-  const argsObjects = Object.entries(args).filter(arg => typeof arg[1] === 'object');
-  if (argsObjects.length > 0) {
-    filteredArgs['mg__storybook__comment'] = `/!\\ Object props are not rendered in the code example: ${argsObjects.map(([a]) => a).join(', ')}.`;
-  }
-  return filteredArgs;
-};

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

@@ -1,27 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { variants } from '../mg-badge.conf';
-export default {
-  component: 'mg-badge',
-  title: 'Atoms/mg-badge',
-  argTypes: {
-    value: {
-      control: { type: 'text' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-badge", Object.assign({}, filterArgs(args, { variant: variants[0] })));
-export const MgBadge = Template.bind({});
-MgBadge.args = {
-  value: '99',
-  label: 'unread messages',
-  variant: variants[0],
-  outline: false,
-};

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

@@ -1,38 +0,0 @@
-import { h } from '@stencil/core';
-import { variants, buttonTypes } from '../mg-button.conf';
-import { icons } from '../../mg-icon/mg-icon.conf';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-button',
-  title: 'Atoms/mg-button',
-  argTypes: {
-    type: {
-      options: [undefined, ...buttonTypes],
-      control: { type: 'select' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-button", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.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,
-  type: undefined,
-  fullWidth: undefined,
-};
-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-card/doc/mg-card.stories.js

@@ -1,18 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-card',
-  title: 'Atoms/mg-card',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-card", Object.assign({}, filterArgs(args)), args.slot);
-export const MgCard = Template.bind({});
-MgCard.args = {
-  slot: '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.',
-};

package/dist/collection/components/atoms/mg-character-left/doc/mg-character-left.stories.js

@@ -1,20 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-character-left',
-  title: 'Atoms/mg-character-left',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-character-left", Object.assign({}, filterArgs(args)));
-export const MgCharacterLeft = Template.bind({});
-MgCharacterLeft.args = {
-  identifier: 'identifier',
-  characters: '',
-  maxlength: 400,
-};

package/dist/collection/components/atoms/mg-divider/doc/mg-divider.stories.js

@@ -1,18 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-divider',
-  title: 'Atoms/mg-divider',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-divider", Object.assign({}, filterArgs(args, { size: 'regular' })));
-export const MgDivider = Template.bind({});
-MgDivider.args = {
-  size: 'regular',
-};

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

@@ -1,41 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { icons, sizes, variants } from '../mg-icon.conf';
-export default {
-  component: 'mg-icon',
-  title: 'Atoms/mg-icon',
-  argTypes: {
-    icon: {
-      options: Object.keys(icons),
-      control: { type: 'select' },
-    },
-    size: {
-      options: sizes,
-      control: { type: 'select' },
-    },
-    variant: {
-      options: [undefined, ...variants],
-      control: { type: 'select' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => {
-  const color = args.color;
-  delete args.color;
-  // return element
-  return (h("div", { style: { color } }, h("mg-icon", Object.assign({}, filterArgs(args, { size: sizes[1] })))));
-};
-export const MgIcon = Template.bind({});
-MgIcon.args = {
-  color: '',
-  icon: Object.keys(icons)[0],
-  size: undefined,
-  spin: false,
-};

package/dist/collection/components/atoms/mg-input-title/doc/mg-input-title.stories.js

@@ -1,21 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-title',
-  title: 'Atoms/mg-input-title',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-title", Object.assign({}, filterArgs(args)), args.slot);
-export const MgInputTitle = Template.bind({});
-MgInputTitle.args = {
-  slot: 'Label',
-  identifier: 'identifier',
-  required: true,
-  isLegend: false,
-};

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

@@ -1,22 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-import { variants } from '../mg-tag.conf';
-export default {
-  component: 'mg-tag',
-  title: 'Atoms/mg-tag',
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-tag", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.slot);
-export const MgTag = Template.bind({});
-MgTag.args = {
-  slot: 'Label',
-  variant: variants[0],
-  outline: false,
-  soft: false,
-};

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

@@ -1,50 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../.storybook/utils';
-export default {
-  component: 'mg-tooltip',
-  title: 'Atoms/mg-tooltip',
-  parameters: {
-    layout: 'centered',
-  },
-  argTypes: {
-    placement: {
-      control: { type: 'select' },
-    },
-  },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-icon", { icon: "info-circle" })));
-export const MgTooltip = Template.bind({});
-MgTooltip.args = {
-  identifier: 'identifier',
-  message: 'This is a tooltip message',
-  placement: undefined,
-  display: false,
-  disabled: false,
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateButton = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-button", null, "Action")));
-export const MgTooltipOnButton = TemplateButton.bind({});
-MgTooltipOnButton.args = Object.assign({}, MgTooltip.args);
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const TemplateSpan = (args) => (h("mg-tooltip", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("span", null, "any text")));
-export const MgTooltipOnSpan = TemplateSpan.bind({});
-MgTooltipOnSpan.args = Object.assign({}, MgTooltip.args);

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

@@ -1,50 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-checkbox',
-  title: 'Molecules/Inputs/mg-input-checkbox',
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-checkbox", Object.assign({}, filterArgs(args)));
-export const MgInputCheckbox = Template.bind({});
-MgInputCheckbox.args = {
-  // Global
-  value: [
-    {
-      title: 'HT',
-      value: true,
-    },
-    {
-      title: 'TTC',
-      value: false,
-      disabled: true,
-    },
-    {
-      title: 'Mixte (HT/TTC)',
-      value: null,
-    },
-  ],
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Option',
-  labelOnTop: false,
-  labelHide: false,
-  // placement
-  inputVerticalList: false,
-  // Input
-  required: false,
-  disabled: false,
-  readonly: false,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};

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

@@ -1,43 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-date',
-  title: 'Molecules/Inputs/mg-input-date',
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-date", Object.assign({}, filterArgs(args)));
-const date = new Date();
-const getFormatedNumber = (number) => {
-  return `${number > 9 ? number : '0' + number}`;
-};
-export const MgInputDate = Template.bind({});
-MgInputDate.args = {
-  // Global
-  value: `${date.getFullYear()}-${getFormatedNumber(date.getMonth())}-${getFormatedNumber(date.getDate())}`,
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Label',
-  labelOnTop: false,
-  labelHide: false,
-  // Input
-  required: true,
-  readonly: false,
-  disabled: false,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};
-export const MgInputDateMinMax = Template.bind({});
-MgInputDateMinMax.args = Object.assign(Object.assign({}, MgInputDate.args), {
-  // date range
-  min: `${date.getFullYear()}-01-01`, max: `${date.getFullYear() + 1}-12-31`
-});

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

@@ -1,68 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-import { types } from '../mg-input-numeric.conf';
-export default {
-  component: 'mg-input-numeric',
-  title: 'Molecules/Inputs/mg-input-numeric',
-  argTypes: {
-    type: {
-      options: types,
-      control: { type: 'select' },
-    },
-    mgWidth: {
-      options: [undefined, 2, 4, 16, 'full'],
-      control: { type: 'select' },
-    },
-  },
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-numeric", Object.assign({}, filterArgs(args)));
-/**
- * Global use
- */
-export const MgInputNumeric = Template.bind({});
-MgInputNumeric.args = {
-  // Global
-  value: '',
-  identifier: 'identifier',
-  name: 'input-name',
-  type: types[0],
-  // Label
-  label: 'Label',
-  labelOnTop: false,
-  labelHide: false,
-  // Input
-  placeholder: 'placeholder',
-  required: true,
-  disabled: false,
-  readonly: false,
-  max: undefined,
-  min: undefined,
-  mgWidth: undefined,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};
-const TemplateSlot = args => {
-  const labelOnTop = args.labelOnTop;
-  delete args.labelOnTop;
-  const labelHide = args.labelHide;
-  delete args.labelHide;
-  const helpText = args.helpText;
-  delete args.helpText;
-  // return element
-  return (h("mg-input-numeric", Object.assign({}, args, { "label-on-top": labelOnTop, "label-hide": labelHide, "help-text": helpText }), h("span", { slot: "append-input" }, "km")));
-};
-/**
- * Global use
- */
-export const AppendSlot = TemplateSlot.bind({});
-AppendSlot.args = Object.assign({}, MgInputNumeric.args);

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

@@ -1,46 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-password',
-  title: 'Molecules/Inputs/mg-input-password',
-  argTypes: {
-    mgWidth: {
-      options: [2, 4, 16, 'full'],
-      control: { type: 'select' },
-    },
-  },
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-password", Object.assign({}, filterArgs(args)));
-/**
- * Global use
- */
-export const MgInputPassword = Template.bind({});
-MgInputPassword.args = {
-  // Global
-  value: '',
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Label',
-  labelOnTop: false,
-  labelHide: false,
-  // Input
-  placeholder: 'placeholder',
-  maxlength: 400,
-  required: true,
-  disabled: false,
-  readonly: false,
-  mgWidth: 'full',
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};

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

@@ -1,59 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-export default {
-  component: 'mg-input-radio',
-  title: 'Molecules/Inputs/mg-input-radio',
-  argTypes: {
-    value: {
-      options: [null, 'ht', 'ttc', 'mixte'],
-      control: { type: 'radio' },
-    },
-  },
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-radio", Object.assign({}, filterArgs(args)));
-export const MgInputRadio = Template.bind({});
-MgInputRadio.args = {
-  // Global
-  value: null,
-  items: ['ht', 'ttc', 'mixte'],
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Option',
-  labelOnTop: false,
-  labelHide: false,
-  // placement
-  inputVerticalList: false,
-  // Input
-  required: false,
-  disabled: false,
-  readonly: false,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-};
-export const ItemsWithOptions = Template.bind({});
-ItemsWithOptions.args = Object.assign(Object.assign({}, MgInputRadio.args), { required: true, items: [
-    {
-      title: 'HT',
-      value: 'ht',
-    },
-    {
-      title: 'TTC',
-      value: 'ttc',
-      disabled: true,
-    },
-    {
-      title: 'Mixte (HT/TTC)',
-      value: 'mixte',
-    },
-  ] });

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

@@ -1,77 +0,0 @@
-import { h } from '@stencil/core';
-import { filterArgs } from '../../../../../../.storybook/utils';
-import messages from '../../../../../locales/en/messages.json';
-export default {
-  component: 'mg-input-select',
-  title: 'Molecules/Inputs/mg-input-select',
-  argTypes: {
-    placeholder: {
-      table: {
-        defaultValue: { summary: messages.input.select.placeholder },
-      },
-    },
-    mgWidth: {
-      options: [undefined, 2, 4, 16, 'full'],
-      control: { type: 'select' },
-    },
-  },
-  parameters: { actions: { handles: ['value-change', 'input-valid'] } },
-};
-/**
- * Template
- *
- * @param {any} args component arguments
- * @returns {HTMLElement} HTMLElement
- */
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
-const Template = (args) => h("mg-input-select", Object.assign({}, filterArgs(args, { placeholder: messages.input.select.placeholder })));
-export const MgInputSelect = Template.bind({});
-MgInputSelect.args = {
-  // Global
-  value: '',
-  identifier: 'identifier',
-  name: 'input-name',
-  // Label
-  label: 'Label',
-  labelOnTop: false,
-  labelHide: false,
-  // Input
-  required: true,
-  readonly: false,
-  disabled: false,
-  items: ['blu', 'bli', 'blo', 'le long libellé qui va faire sortir le champ mg-input-select de sa zone de confort'],
-  mgWidth: undefined,
-  // Tooltip
-  tooltip: 'This is a tooltip',
-  // Help Text
-  helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
-  // Placeholder
-  placeholder: undefined,
-  placeholderHide: false,
-  placeholderDisabled: false,
-};
-/**
- * Using object
- */
-export const WithObjectItems = Template.bind({});
-WithObjectItems.args = Object.assign(Object.assign({}, MgInputSelect.args), {
-  // remove feature to focus on pattern
-  tooltip: '', helpText: '', required: false,
-  //
-  items: [
-    { title: 'blu', value: 'blublu' },
-    { title: 'bli', value: 'blibli' },
-    { title: 'blo', value: 'bloblo' },
-    { title: 'bla', value: 'blabla', disabled: true },
-  ]
-});
-/**
- * Using group object
- */
-export const WithGroups = Template.bind({});
-WithGroups.args = Object.assign(Object.assign({}, WithObjectItems.args), { items: [
-    { title: 'blu', value: 'blublu', group: '1st group' },
-    { title: 'bli', value: 'blibli', group: '2nd group' },
-    { title: 'blo', value: 'bloblo', group: '1st group' },
-    { title: 'bla', value: 'blabla' },
-  ] });