@mgdis/mg-components 5.6.0 → 5.8.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (203) hide show
  1. package/dist/cjs/{index-4dcc1812.js → index-5e7ede97.js} +109 -3
  2. package/dist/cjs/loader.cjs.js +4 -3
  3. package/dist/cjs/{mg-badge_30.cjs.entry.js → mg-action-more_31.cjs.entry.js} +490 -661
  4. package/dist/cjs/mg-components.cjs.js +7 -3
  5. package/dist/cjs/mg-item-more.cjs.entry.js +273 -0
  6. package/dist/cjs/mg-menu.conf-9afe6571.js +242 -0
  7. package/dist/collection/collection-manifest.json +7 -5
  8. package/dist/collection/components/atoms/mg-badge/mg-badge.js +1 -1
  9. package/dist/collection/components/atoms/mg-button/mg-button.css +7 -21
  10. package/dist/collection/components/atoms/mg-button/mg-button.js +25 -1
  11. package/dist/collection/components/atoms/mg-icon/mg-icon.conf.js +35 -27
  12. package/dist/collection/components/atoms/mg-icon/mg-icon.js +3 -3
  13. package/dist/collection/components/atoms/mg-tag/mg-tag.js +1 -1
  14. package/dist/collection/components/atoms/mg-tooltip/mg-tooltip.js +18 -17
  15. package/dist/collection/components/molecules/inputs/MgInput.js +6 -1
  16. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.css +4 -3
  17. package/dist/collection/components/molecules/inputs/mg-input-checkbox/mg-input-checkbox.js +3 -2
  18. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.css +4 -0
  19. package/dist/collection/components/molecules/inputs/mg-input-date/mg-input-date.js +1 -1
  20. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.css +4 -0
  21. package/dist/collection/components/molecules/inputs/mg-input-numeric/mg-input-numeric.js +1 -1
  22. package/dist/collection/components/molecules/inputs/mg-input-password/mg-input-password.css +4 -0
  23. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.css +4 -3
  24. package/dist/collection/components/molecules/inputs/mg-input-radio/mg-input-radio.js +2 -1
  25. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.css +4 -0
  26. package/dist/collection/components/molecules/inputs/mg-input-select/mg-input-select.js +1 -1
  27. package/dist/collection/components/molecules/inputs/mg-input-text/mg-input-text.css +4 -0
  28. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.css +4 -0
  29. package/dist/collection/components/molecules/inputs/mg-input-textarea/mg-input-textarea.js +1 -1
  30. package/dist/collection/components/molecules/inputs/mg-input-toggle/mg-input-toggle.css +4 -4
  31. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.conf.js +0 -13
  32. package/dist/collection/components/molecules/menu/mg-menu/mg-menu.js +41 -70
  33. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.css +5 -4
  34. package/dist/collection/components/molecules/menu/mg-menu-item/mg-menu-item.js +160 -61
  35. package/dist/collection/components/molecules/mg-action-more/mg-action-more.conf.js +1 -0
  36. package/dist/collection/components/molecules/mg-action-more/mg-action-more.css +38 -0
  37. package/dist/collection/components/molecules/mg-action-more/mg-action-more.js +252 -0
  38. package/dist/collection/components/molecules/mg-form/mg-form.js +2 -2
  39. package/dist/collection/components/molecules/mg-item-more/mg-item-more.conf.js +1 -0
  40. package/dist/collection/components/molecules/mg-item-more/mg-item-more.css +30 -0
  41. package/dist/collection/components/molecules/mg-item-more/mg-item-more.js +200 -0
  42. package/dist/collection/components/molecules/mg-message/mg-message.js +1 -1
  43. package/dist/collection/components/molecules/mg-pagination/mg-pagination.js +19 -1
  44. package/dist/collection/components/molecules/mg-panel/mg-panel.js +2 -2
  45. package/dist/collection/components/molecules/mg-popover/mg-popover.css +0 -1
  46. package/dist/collection/components/molecules/mg-popover/mg-popover.js +17 -4
  47. package/dist/collection/components/molecules/mg-skip-links/mg-skip-links.js +2 -1
  48. package/dist/collection/components/molecules/mg-tabs/mg-tabs.css +2 -3
  49. package/dist/collection/components/molecules/mg-tabs/mg-tabs.js +9 -8
  50. package/dist/collection/locales/en/messages.json +6 -1
  51. package/dist/collection/locales/fr/messages.json +6 -1
  52. package/dist/collection/locales/index.js +1 -1
  53. package/dist/collection/styles/mg-icon-animation.scss +6 -0
  54. package/dist/collection/styles/navigation-button.scss +3 -2
  55. package/dist/collection/utils/behaviors.utils.js +38 -52
  56. package/dist/collection/utils/components.utils.js +3 -1
  57. package/dist/collection/utils/locale.utils.js +9 -9
  58. package/dist/collection/utils/unit.test.utils.js +32 -4
  59. package/dist/collection/variables.css +2 -1
  60. package/dist/components/MgInput.js +6 -1
  61. package/dist/components/components.utils.js +3 -1
  62. package/dist/components/index.d.ts +11 -0
  63. package/dist/components/index.js +3 -1
  64. package/dist/components/index2.js +26 -14
  65. package/dist/components/mg-action-more.d.ts +11 -0
  66. package/dist/components/mg-action-more.js +216 -0
  67. package/dist/components/mg-badge2.js +1 -1
  68. package/dist/components/mg-button2.js +6 -3
  69. package/dist/components/mg-form.js +2 -2
  70. package/dist/components/mg-icon2.js +38 -30
  71. package/dist/components/mg-input-checkbox.js +3 -3
  72. package/dist/components/mg-input-date.js +2 -2
  73. package/dist/components/mg-input-numeric.js +2 -2
  74. package/dist/components/mg-input-password.js +1 -1
  75. package/dist/components/mg-input-radio.js +2 -2
  76. package/dist/components/mg-input-select2.js +2 -2
  77. package/dist/components/mg-input-text2.js +1 -1
  78. package/dist/components/mg-input-textarea.js +2 -2
  79. package/dist/components/mg-input-toggle.js +1 -1
  80. package/dist/components/mg-item-more.d.ts +11 -0
  81. package/dist/components/mg-item-more.js +336 -0
  82. package/dist/components/mg-menu-item2.js +137 -250
  83. package/dist/components/mg-menu.conf.js +14 -0
  84. package/dist/components/mg-menu.js +1 -246
  85. package/dist/components/mg-menu2.js +180 -0
  86. package/dist/components/mg-message.js +1 -1
  87. package/dist/components/mg-pagination.js +3 -1
  88. package/dist/components/mg-panel.js +2 -2
  89. package/dist/components/mg-popover2.js +17 -3
  90. package/dist/components/mg-skip-links.js +1 -1
  91. package/dist/components/mg-tabs.js +10 -9
  92. package/dist/components/mg-tag.js +1 -1
  93. package/dist/components/mg-tooltip2.js +18 -17
  94. package/dist/esm/{index-dc9a2348.js → index-03cceb11.js} +109 -4
  95. package/dist/esm/loader.js +4 -3
  96. package/dist/esm/{mg-badge_30.entry.js → mg-action-more_31.entry.js} +464 -636
  97. package/dist/esm/mg-components.js +4 -3
  98. package/dist/esm/mg-item-more.entry.js +269 -0
  99. package/dist/esm/mg-menu.conf-881fbd82.js +235 -0
  100. package/dist/mg-components/locales/en/messages.json +6 -1
  101. package/dist/mg-components/locales/fr/messages.json +6 -1
  102. package/dist/mg-components/mg-components.css +1 -1
  103. package/dist/mg-components/mg-components.esm.js +1 -1
  104. package/dist/mg-components/p-1221773c.entry.js +1 -0
  105. package/dist/mg-components/p-367f92d2.js +1 -0
  106. package/dist/mg-components/p-6aeded97.entry.js +1 -0
  107. package/dist/mg-components/p-e126dd84.js +2 -0
  108. package/dist/mg-components/styles/mg-icon-animation.scss +6 -0
  109. package/dist/mg-components/styles/navigation-button.scss +3 -2
  110. package/dist/mg-components/variables.css +2 -1
  111. package/dist/types/components/atoms/mg-button/mg-button.d.ts +5 -0
  112. package/dist/types/components/molecules/inputs/mg-input-textarea/mg-input-textarea.d.ts +1 -1
  113. package/dist/types/components/molecules/menu/mg-menu/mg-menu.conf.d.ts +3 -27
  114. package/dist/types/components/molecules/menu/mg-menu/mg-menu.d.ts +9 -27
  115. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.conf.d.ts +5 -0
  116. package/dist/types/components/molecules/menu/mg-menu-item/mg-menu-item.d.ts +66 -11
  117. package/dist/types/components/molecules/mg-action-more/mg-action-more.conf.d.ts +42 -0
  118. package/dist/types/components/molecules/mg-action-more/mg-action-more.d.ts +81 -0
  119. package/dist/types/components/molecules/mg-item-more/mg-item-more.conf.d.ts +26 -0
  120. package/dist/types/components/molecules/mg-item-more/mg-item-more.d.ts +74 -0
  121. package/dist/types/components/molecules/mg-pagination/mg-pagination.d.ts +4 -0
  122. package/dist/types/components/molecules/mg-popover/mg-popover.d.ts +2 -1
  123. package/dist/types/components.d.ts +120 -12
  124. package/dist/types/locales/index.d.ts +12 -2
  125. package/dist/types/stencil-public-runtime.d.ts +9 -0
  126. package/dist/types/utils/behaviors.utils.d.ts +12 -11
  127. package/dist/types/utils/locale.utils.d.ts +5 -5
  128. package/dist/types/utils/unit.test.utils.d.ts +20 -2
  129. package/loader/index.d.ts +9 -0
  130. package/package.json +17 -16
  131. package/readme.md +0 -18
  132. package/dist/.storybook/utils.js +0 -24
  133. package/dist/collection/components/atoms/mg-badge/doc/mg-badge.stories.js +0 -27
  134. package/dist/collection/components/atoms/mg-button/doc/mg-button.stories.js +0 -38
  135. package/dist/collection/components/atoms/mg-card/doc/mg-card.stories.js +0 -18
  136. package/dist/collection/components/atoms/mg-character-left/doc/mg-character-left.stories.js +0 -20
  137. package/dist/collection/components/atoms/mg-divider/doc/mg-divider.stories.js +0 -18
  138. package/dist/collection/components/atoms/mg-icon/doc/mg-icon.stories.js +0 -41
  139. package/dist/collection/components/atoms/mg-input-title/doc/mg-input-title.stories.js +0 -21
  140. package/dist/collection/components/atoms/mg-tag/doc/mg-tag.stories.js +0 -22
  141. package/dist/collection/components/atoms/mg-tooltip/doc/mg-tooltip.stories.js +0 -50
  142. package/dist/collection/components/molecules/inputs/mg-input-checkbox/doc/mg-input-checkbox.stories.js +0 -50
  143. package/dist/collection/components/molecules/inputs/mg-input-date/doc/mg-input-date.stories.js +0 -43
  144. package/dist/collection/components/molecules/inputs/mg-input-numeric/doc/mg-input-numeric.stories.js +0 -68
  145. package/dist/collection/components/molecules/inputs/mg-input-password/doc/mg-input-password.stories.js +0 -46
  146. package/dist/collection/components/molecules/inputs/mg-input-radio/doc/mg-input-radio.stories.js +0 -59
  147. package/dist/collection/components/molecules/inputs/mg-input-select/doc/mg-input-select.stories.js +0 -77
  148. package/dist/collection/components/molecules/inputs/mg-input-text/doc/mg-input-text.stories.js +0 -110
  149. package/dist/collection/components/molecules/inputs/mg-input-textarea/doc/mg-input-textarea.stories.js +0 -54
  150. package/dist/collection/components/molecules/inputs/mg-input-toggle/doc/mg-input-toggle.stories.js +0 -51
  151. package/dist/collection/components/molecules/menu/mg-menu/doc/mg-menu.stories.js +0 -119
  152. package/dist/collection/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.js +0 -34
  153. package/dist/collection/components/molecules/mg-details/doc/mg-details.stories.js +0 -24
  154. package/dist/collection/components/molecules/mg-form/doc/mg-form.stories.js +0 -47
  155. package/dist/collection/components/molecules/mg-illustrated-message/doc/mg-illustrated-message.stories.js +0 -19
  156. package/dist/collection/components/molecules/mg-message/doc/mg-message.stories.js +0 -39
  157. package/dist/collection/components/molecules/mg-modal/doc/mg-modal.stories.js +0 -39
  158. package/dist/collection/components/molecules/mg-pagination/doc/mg-pagination.stories.js +0 -20
  159. package/dist/collection/components/molecules/mg-panel/doc/mg-panel.stories.js +0 -22
  160. package/dist/collection/components/molecules/mg-popover/doc/mg-popover.stories.js +0 -34
  161. package/dist/collection/components/molecules/mg-skip-links/doc/mg-skip-links.stories.js +0 -24
  162. package/dist/collection/components/molecules/mg-tabs/doc/mg-tabs.stories.js +0 -53
  163. package/dist/collection/stories/grids.stories.js +0 -7
  164. package/dist/collection/stories/helpers.stories.js +0 -23
  165. package/dist/collection/stories/icons.stories.js +0 -25
  166. package/dist/collection/stories/typography.stories.js +0 -24
  167. package/dist/mg-components/p-182bd802.js +0 -2
  168. package/dist/mg-components/p-f7da9dd2.entry.js +0 -1
  169. package/dist/types/components/atoms/mg-badge/doc/mg-badge.stories.d.ts +0 -13
  170. package/dist/types/components/atoms/mg-button/doc/mg-button.stories.d.ts +0 -16
  171. package/dist/types/components/atoms/mg-card/doc/mg-card.stories.d.ts +0 -6
  172. package/dist/types/components/atoms/mg-character-left/doc/mg-character-left.stories.d.ts +0 -6
  173. package/dist/types/components/atoms/mg-divider/doc/mg-divider.stories.d.ts +0 -6
  174. package/dist/types/components/atoms/mg-icon/doc/mg-icon.stories.d.ts +0 -26
  175. package/dist/types/components/atoms/mg-input-title/doc/mg-input-title.stories.d.ts +0 -6
  176. package/dist/types/components/atoms/mg-tag/doc/mg-tag.stories.d.ts +0 -6
  177. package/dist/types/components/atoms/mg-tooltip/doc/mg-tooltip.stories.d.ts +0 -18
  178. package/dist/types/components/molecules/inputs/mg-input-checkbox/doc/mg-input-checkbox.stories.d.ts +0 -11
  179. package/dist/types/components/molecules/inputs/mg-input-date/doc/mg-input-date.stories.d.ts +0 -12
  180. package/dist/types/components/molecules/inputs/mg-input-numeric/doc/mg-input-numeric.stories.d.ts +0 -32
  181. package/dist/types/components/molecules/inputs/mg-input-password/doc/mg-input-password.stories.d.ts +0 -22
  182. package/dist/types/components/molecules/inputs/mg-input-radio/doc/mg-input-radio.stories.d.ts +0 -20
  183. package/dist/types/components/molecules/inputs/mg-input-select/doc/mg-input-select.stories.d.ts +0 -34
  184. package/dist/types/components/molecules/inputs/mg-input-text/doc/mg-input-text.stories.d.ts +0 -39
  185. package/dist/types/components/molecules/inputs/mg-input-textarea/doc/mg-input-textarea.stories.d.ts +0 -19
  186. package/dist/types/components/molecules/inputs/mg-input-toggle/doc/mg-input-toggle.stories.d.ts +0 -12
  187. package/dist/types/components/molecules/menu/mg-menu/doc/mg-menu.stories.d.ts +0 -22
  188. package/dist/types/components/molecules/menu/mg-menu-item/doc/mg-menu-item.stories.d.ts +0 -12
  189. package/dist/types/components/molecules/mg-details/doc/mg-details.stories.d.ts +0 -11
  190. package/dist/types/components/molecules/mg-form/doc/mg-form.stories.d.ts +0 -11
  191. package/dist/types/components/molecules/mg-illustrated-message/doc/mg-illustrated-message.stories.d.ts +0 -6
  192. package/dist/types/components/molecules/mg-message/doc/mg-message.stories.d.ts +0 -26
  193. package/dist/types/components/molecules/mg-modal/doc/mg-modal.stories.d.ts +0 -13
  194. package/dist/types/components/molecules/mg-pagination/doc/mg-pagination.stories.d.ts +0 -11
  195. package/dist/types/components/molecules/mg-panel/doc/mg-panel.stories.d.ts +0 -11
  196. package/dist/types/components/molecules/mg-popover/doc/mg-popover.stories.d.ts +0 -22
  197. package/dist/types/components/molecules/mg-skip-links/doc/mg-skip-links.stories.d.ts +0 -11
  198. package/dist/types/components/molecules/mg-tabs/doc/mg-tabs.stories.d.ts +0 -20
  199. package/dist/types/home/runner/work/mg-components/mg-components/.stencil/.storybook/utils.d.ts +0 -1
  200. package/dist/types/stories/grids.stories.d.ts +0 -5
  201. package/dist/types/stories/helpers.stories.d.ts +0 -13
  202. package/dist/types/stories/icons.stories.d.ts +0 -13
  203. package/dist/types/stories/typography.stories.d.ts +0 -5
@@ -1,110 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-input-text',
5
- title: 'Molecules/Inputs/mg-input-text',
6
- argTypes: {
7
- mgWidth: {
8
- options: [2, 4, 16, 'full'],
9
- control: { type: 'select' },
10
- },
11
- },
12
- parameters: { actions: { handles: ['value-change', 'input-valid'] } },
13
- };
14
- /**
15
- * Template
16
- *
17
- * @param {any} args component arguments
18
- * @returns {HTMLElement} HTMLElement
19
- */
20
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
- const Template = (args) => {
22
- const displayCharacterLeft = args.displayCharacterLeft;
23
- delete args.displayCharacterLeft;
24
- // return element
25
- return h("mg-input-text", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }));
26
- };
27
- /**
28
- * Global use
29
- */
30
- export const MgInputText = Template.bind({});
31
- MgInputText.args = {
32
- // Global
33
- value: '',
34
- identifier: 'identifier',
35
- name: 'input-name',
36
- // Label
37
- label: 'Label',
38
- labelOnTop: false,
39
- labelHide: false,
40
- // Input
41
- placeholder: 'placeholder',
42
- maxlength: 400,
43
- required: true,
44
- disabled: false,
45
- readonly: false,
46
- pattern: undefined,
47
- patternErrorMessage: undefined,
48
- mgWidth: 'full',
49
- type: 'text',
50
- // Tooltip
51
- tooltip: 'This is a tooltip',
52
- // Nb Char Left
53
- displayCharacterLeft: true,
54
- // Help Text
55
- helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
56
- };
57
- /**
58
- * Email
59
- */
60
- export const Email = Template.bind({});
61
- Email.args = Object.assign(Object.assign({}, MgInputText.args), {
62
- // remove feature to focus on pattern
63
- tooltip: '', required: false, label: 'Adresse email',
64
- // Add pattern Email rules
65
- maxlength: 100, pattern: '[a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}', patternErrorMessage: "L'information saisie est incorrecte (exemple : prenom.nom@exemple.fr)",
66
- // Help Text
67
- helpText: 'exemple : prenom.nom@exemple.fr'
68
- });
69
- /**
70
- * Emails
71
- */
72
- export const Emails = Template.bind({});
73
- Emails.args = Object.assign(Object.assign({}, Email.args), { label: 'Adresses email',
74
- // Add pattern Emails rules
75
- maxlength: 200, pattern: '([a-z0-9._%+-]+@[a-z0-9.-]+.[a-z]{2,15}(;)*)+', patternErrorMessage: "L'information saisie est incorrecte (exemple : prenom.nom@exemple.fr;prenom.nom.2@exemple.fr)",
76
- // Help Text
77
- helpText: 'exemple : prenom.nom@exemple.fr;prenom.nom.2@exemple.fr' });
78
- /**
79
- * RNA
80
- */
81
- export const RNA = Template.bind({});
82
- RNA.args = Object.assign(Object.assign({}, Emails.args), { label: 'RNA',
83
- // Add pattern RNA rules
84
- maxlength: 10, pattern: '(W[0-9]{1}[a-zA-Z0-9]{1}[0-9]{7})', patternErrorMessage: "Le numéro RNA n'est pas valide (exemple: W123456789)",
85
- // Help Text
86
- helpText: 'exemple : W123456789' });
87
- /**
88
- * URL
89
- */
90
- export const URL = Template.bind({});
91
- URL.args = Object.assign(Object.assign({}, Emails.args), { label: 'URL',
92
- // Add pattern URL rules
93
- maxlength: 200, pattern: 'https?://(?:www.)?([-a-zA-Z0-9@:%._+~#=]{2,256}.[a-z]{2,6}\b)*(/[/dw.-]*)*(?:[?])*(.+)*', patternErrorMessage: "Le format du champ n'est pas valide (exemple: https://www.exemple.fr)",
94
- // Help Text
95
- helpText: 'Exemple: https://www.exemple.fr' });
96
- /**
97
- * Template
98
- *
99
- * @param {any} args component arguments
100
- * @returns {HTMLElement} HTMLElement
101
- */
102
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
103
- const SearchTemplate = (args) => {
104
- const displayCharacterLeft = args.displayCharacterLeft;
105
- delete args.displayCharacterLeft;
106
- // return element
107
- return (h("form", { role: "search" }, h("mg-input-text", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }), h("mg-button", { slot: "append-input", label: "search" }, h("mg-icon", { icon: "magnifying-glass" }), " Search"))));
108
- };
109
- export const Search = SearchTemplate.bind({});
110
- Search.args = Object.assign(Object.assign({}, MgInputText.args), { type: 'search', icon: 'magnifying-glass' });
@@ -1,54 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-input-textarea',
5
- title: 'Molecules/Inputs/mg-input-textarea',
6
- argTypes: {
7
- mgWidth: {
8
- options: [2, 4, 16, 'full'],
9
- control: { type: 'select' },
10
- },
11
- },
12
- parameters: { actions: { handles: ['value-change', 'input-valid'] } },
13
- };
14
- /**
15
- * Template
16
- *
17
- * @param {any} args component arguments
18
- * @returns {HTMLElement} HTMLElement
19
- */
20
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
- const Template = (args) => {
22
- const displayCharacterLeft = args.displayCharacterLeft;
23
- delete args.displayCharacterLeft;
24
- // return element
25
- return h("mg-input-textarea", Object.assign({}, filterArgs(args), { "display-character-left": displayCharacterLeft ? undefined : 'false' }));
26
- };
27
- export const MgInputTextarea = Template.bind({});
28
- MgInputTextarea.args = {
29
- // Global
30
- value: '',
31
- identifier: 'identifier',
32
- name: 'input-name',
33
- // Label
34
- label: 'Label',
35
- labelOnTop: false,
36
- labelHide: false,
37
- // Input
38
- placeholder: 'placeholder',
39
- maxlength: 4000,
40
- required: true,
41
- disabled: false,
42
- readonly: false,
43
- pattern: undefined,
44
- patternErrorMessage: undefined,
45
- rows: 3,
46
- mgWidth: 'full',
47
- resizable: 'none',
48
- // Tooltip
49
- tooltip: 'This is a tooltip',
50
- // Nb Char Left
51
- displayCharacterLeft: true,
52
- // Help Text
53
- helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
54
- };
@@ -1,51 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-input-toggle',
5
- title: 'Molecules/Inputs/mg-input-toggle',
6
- parameters: { actions: { handles: ['value-change', 'input-valid'] } },
7
- };
8
- const args = {
9
- // Global
10
- value: null,
11
- items: [
12
- { title: 'non', value: false },
13
- { title: 'oui', value: true },
14
- ],
15
- identifier: 'identifier',
16
- name: 'input-name',
17
- // Label
18
- label: 'Option',
19
- labelOnTop: false,
20
- labelHide: false,
21
- // toggle
22
- isIcon: false,
23
- isOnOff: false,
24
- // Input
25
- disabled: false,
26
- readonly: false,
27
- // Tooltip
28
- tooltip: 'This is a tooltip',
29
- // Help Text
30
- helpText: 'Help text with html <strong>bold</strong>, <em>italic</em>.',
31
- };
32
- /**
33
- * Template
34
- *
35
- * @param {any} args component arguments
36
- * @returns {HTMLElement} HTMLElement
37
- */
38
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
39
- const Template = (args) => (h("mg-input-toggle", Object.assign({}, filterArgs(args)), h("span", { slot: "item-1" }, "Non"), h("span", { slot: "item-2" }, "Oui")));
40
- export const MgInputToggle = Template.bind({});
41
- MgInputToggle.args = Object.assign({}, args);
42
- /**
43
- * Template
44
- *
45
- * @param {any} args component arguments
46
- * @returns {HTMLElement} HTMLElement
47
- */
48
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
49
- const TemplateIcon = (args) => (h("mg-input-toggle", Object.assign({}, filterArgs(args)), h("span", { slot: "item-1" }, h("mg-icon", { icon: "cross" })), h("span", { slot: "item-2" }, h("mg-icon", { icon: "check" }))));
50
- export const MgInputToggleWithIcon = TemplateIcon.bind({});
51
- MgInputToggleWithIcon.args = Object.assign(Object.assign({}, args), { isIcon: true, isOnOff: true });
@@ -1,119 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../../.storybook/utils';
3
- import { Direction } from '../mg-menu.conf';
4
- import { Status } from '../../mg-menu-item/mg-menu-item.conf';
5
- export default {
6
- component: 'mg-menu',
7
- title: 'Beta/Menus/mg-menu',
8
- argTypes: {
9
- direction: {
10
- options: [undefined, Direction.HORIZONTAL, Direction.VERTICAL],
11
- control: { type: 'select' },
12
- },
13
- moreitem: {
14
- control: { type: 'object' },
15
- },
16
- },
17
- };
18
- /**
19
- * Format item args from given params
20
- *
21
- * @param {ItemArgType} itemArgs - item arguments
22
- * @returns {ItemFormatedArgs} items formated args object
23
- */
24
- const getItemArgs = ({ label, status, metadata, icon, badge, content, submenu }) => ({
25
- status,
26
- slot: {
27
- label,
28
- metadata,
29
- icon,
30
- badge,
31
- content,
32
- submenu,
33
- },
34
- });
35
- /**
36
- * Render mg-menu-item
37
- *
38
- * @param {ItemFormatedArgs} args mg-menu-item args
39
- * @returns {HTMLElement} rendered mg-menu-item
40
- */
41
- const menuItem = (args) => {
42
- var _a, _b, _c, _d, _e, _f, _g, _h, _j, _k;
43
- return (h("mg-menu-item", Object.assign({}, filterArgs(args)), ((_a = args.slot) === null || _a === void 0 ? void 0 : _a.label) && h("span", { slot: "label" }, (_b = args.slot) === null || _b === void 0 ? void 0 : _b.label), ((_c = args.slot) === null || _c === void 0 ? void 0 : _c.metadata) && h("span", { slot: "metadata" }, (_d = args.slot) === null || _d === void 0 ? void 0 : _d.metadata), ((_e = args.slot) === null || _e === void 0 ? void 0 : _e.icon) && h("mg-icon", { slot: "image", icon: "user" }), ((_f = args.slot) === null || _f === void 0 ? void 0 : _f.badge) && (h("mg-badge", { slot: "information", label: "information", value: "1" }, (_g = args.slot) === null || _g === void 0 ? void 0 : _g.icon)), ((_h = args.slot) === null || _h === void 0 ? void 0 : _h.content) && (h("div", null, h("h3", null, "Demo title"), h("p", null, "some content"))), ((_j = args.slot) === null || _j === void 0 ? void 0 : _j.submenu) && menu(getMenuArgs(Direction.VERTICAL, ((_k = args.slot) === null || _k === void 0 ? void 0 : _k.submenu) - 1, 'medium'))));
44
- };
45
- /***********
46
- * mg-menu *
47
- **********/
48
- /**
49
- * Format menu args from given params
50
- *
51
- * @param {Direction} direction menu direction
52
- * @param {number} level menu level. Default: 0.
53
- * @param {MenuSizeType} size menu size. Default: 'regular'
54
- * @returns {MenuFormatedArgs} menu formated args object
55
- */
56
- const getMenuArgs = (direction, level = 0, size = 'regular') => ({
57
- label: 'Batman menu',
58
- direction,
59
- size,
60
- moreitem: undefined,
61
- slot: {
62
- items: [
63
- getItemArgs({
64
- label: 'label 1',
65
- direction,
66
- }),
67
- getItemArgs({
68
- label: 'label 2',
69
- direction,
70
- status: Status.DISABLED,
71
- }),
72
- getItemArgs({
73
- label: 'label 3 with long text',
74
- direction,
75
- badge: true,
76
- icon: true,
77
- }),
78
- getItemArgs({
79
- label: 'label 4',
80
- direction,
81
- badge: true,
82
- icon: true,
83
- status: Status.ACTIVE,
84
- submenu: level,
85
- }),
86
- getItemArgs({
87
- label: 'label 5',
88
- direction,
89
- icon: true,
90
- metadata: 'my metadata',
91
- content: true,
92
- }),
93
- ],
94
- },
95
- });
96
- /**
97
- * Render mg-menu
98
- *
99
- * @param {MenuFormatedArgs} args mg-menu args
100
- * @returns {HTMLElement} rendered mg-menu
101
- */
102
- const menu = (args) => (h("mg-menu", Object.assign({}, filterArgs(args, { direction: Direction.HORIZONTAL })), args.slot.items.map(item => menuItem(item))));
103
- /**
104
- * Template
105
- *
106
- * @param {any} args component arguments
107
- * @returns {HTMLElement} HTMLElement
108
- */
109
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
110
- const Template = (args) => h("div", null, menu(args));
111
- export const MgMenuHorizontal = Template.bind({});
112
- MgMenuHorizontal.args = getMenuArgs(Direction.HORIZONTAL, 2);
113
- export const MgMenuVertical = Template.bind({});
114
- MgMenuVertical.args = getMenuArgs(Direction.VERTICAL, 2);
115
- const TemplateSmallContainer = (args) => {
116
- return h("div", { style: { width: '25rem', height: '20rem' } }, menu(args));
117
- };
118
- export const MgMenuVerticalSmallContainer = TemplateSmallContainer.bind({});
119
- MgMenuVerticalSmallContainer.args = Object.assign({}, MgMenuVertical.args);
@@ -1,34 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../../.storybook/utils';
3
- import { Direction } from '../../mg-menu/mg-menu.conf';
4
- export default {
5
- component: 'mg-menu-item',
6
- title: 'Beta/Menus/mg-menu-item',
7
- };
8
- /**
9
- * Template
10
- *
11
- * @param {any} args component arguments
12
- * @returns {HTMLElement} HTMLElement
13
- */
14
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
- const Template = (args) => h("mg-menu-item", Object.assign({}, filterArgs(args)), args.slot);
16
- export const MgMenuItem = Template.bind({});
17
- MgMenuItem.args = {
18
- slot: h("span", { slot: "label" }, "My label"),
19
- };
20
- export const MgMenuItemAsLink = Template.bind({});
21
- MgMenuItemAsLink.args = Object.assign({ href: './' }, MgMenuItem.args);
22
- export const MgMenuItemWhitIcon = Template.bind({});
23
- MgMenuItemWhitIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-icon", { icon: "user", slot: "image" })] });
24
- export const MgMenuItemWhitBadge = Template.bind({});
25
- MgMenuItemWhitBadge.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" })] });
26
- export const MgMenuItemWhitBadgeAndIcon = Template.bind({});
27
- MgMenuItemWhitBadgeAndIcon.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("mg-badge", { value: "2", label: "hello", slot: "information" }), h("mg-icon", { icon: "user", slot: "image" })] });
28
- export const MgMenuItemWhitMetadata = Template.bind({});
29
- MgMenuItemWhitMetadata.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [h("span", { slot: "label" }, "My label"), h("span", { slot: "metadata" }, "My metadata")] });
30
- export const MgMenuItemWhithSubmenu = Template.bind({});
31
- MgMenuItemWhithSubmenu.args = Object.assign(Object.assign({}, MgMenuItem.args), { slot: [
32
- h("span", { slot: "label" }, "My label"),
33
- h("mg-menu", { direction: Direction.VERTICAL, label: "submenu" }, h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 1")), h("mg-menu-item", null, h("mg-icon", { icon: "user", slot: "image" }), h("span", { slot: "label" }, "Subitem 2")), h("mg-menu-item", null, h("span", { slot: "label" }, "Subitem 3"), h("mg-icon", { icon: "user", slot: "image" }), h("mg-badge", { value: "2", label: "hello", slot: "information" }))),
34
- ] });
@@ -1,24 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-details',
5
- title: 'Molecules/mg-details',
6
- parameters: { actions: { handles: ['expanded-change'] } },
7
- };
8
- /**
9
- * Template
10
- *
11
- * @param {any} args component arguments
12
- * @returns {HTMLElement} HTMLElement
13
- */
14
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
- const Template = (args) => (h("mg-details", Object.assign({}, filterArgs(args)), args.slotSummary && h("span", { slot: "summary", innerHTML: args.slotSummary }), args.slotDetails && h("p", { slot: "details", innerHTML: args.slotDetails })));
16
- export const MgDetails = Template.bind({});
17
- MgDetails.args = {
18
- slotSummary: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
19
- slotDetails: '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.',
20
- toggleClosed: 'Show details',
21
- toggleOpened: 'Hide details',
22
- expanded: false,
23
- hideSummary: false,
24
- };
@@ -1,47 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-form',
5
- title: 'Molecules/mg-form',
6
- parameters: { actions: { handles: ['form-valid', 'form-submit'] } },
7
- };
8
- const args = {
9
- identifier: 'identifier',
10
- name: 'input-name',
11
- readonly: false,
12
- disabled: false,
13
- };
14
- /**
15
- * Template
16
- *
17
- * @param {any} args component arguments
18
- * @returns {HTMLElement} HTMLElement
19
- */
20
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
21
- const Template = (args) => {
22
- let form;
23
- let submit;
24
- return (h("mg-form", Object.assign({}, filterArgs(args), { ref: el => {
25
- form = el;
26
- form.addEventListener('form-valid', e => {
27
- submit.disabled = !e.detail;
28
- });
29
- form.addEventListener('form-submit', () => {
30
- window.alert('Your form has been submitted');
31
- });
32
- } }), h("mg-input-checkbox", { identifier: "mg-input-checkbox", label: "mg-input-checkbox label", value: [
33
- { title: 'oui', value: false },
34
- { title: 'non', value: false },
35
- ] }), h("mg-input-date", Object.assign({}, filterArgs({ required: true }), { identifier: "mg-input-date", label: "mg-input-date label" })), h("mg-input-numeric", { identifier: "mg-input-numeric", label: "mg-input-numeric label" }), h("mg-input-password", { identifier: "mg-input-password", label: "mg-input-password label" }), h("mg-input-radio", { identifier: "mg-input-radio", label: "mg-input-radio label", items: ['blu', 'bli', 'bla', 'blo'] }), h("mg-input-select", { identifier: "mg-input-select", label: "mg-input-select label", items: ['blu', 'bli', 'bla', 'blo'] }), h("mg-input-text", { identifier: "mg-input-text", label: "mg-input-text label" }), h("mg-input-textarea", { identifier: "mg-input-textarea", label: "mg-input-textarea label" }), h("mg-input-toggle", { identifier: "mg-input-toggle", label: "mg-input-toggle label", items: [
36
- { title: 'non', value: false },
37
- { title: 'oui', value: true },
38
- ] }, h("span", { slot: "item-1" }, "non"), h("span", { slot: "item-2" }, "oui")), h("div", { slot: "actions", class: "mg-group-elements mg-group-elements--align-right" }, h("mg-button", { id: "can-submit", disabled: true, ref: e => {
39
- submit = e;
40
- } }, "Submit"), h("mg-button", { variant: "secondary", type: "button",
41
- // eslint-disable-next-line react/jsx-no-bind
42
- onClick: () => {
43
- form.displayError();
44
- } }, "Display errors"))));
45
- };
46
- export const MgForm = Template.bind({});
47
- MgForm.args = Object.assign({}, args);
@@ -1,19 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-illustrated-message',
5
- title: 'Molecules/mg-illustrated-message',
6
- };
7
- /**
8
- * Template
9
- *
10
- * @param {any} args component arguments
11
- * @returns {HTMLElement} HTMLElement
12
- */
13
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
14
- const Template = (args) => (h("mg-illustrated-message", Object.assign({}, filterArgs(args, { size: 'regular', direction: 'vertical' })), h("svg", { slot: "illustration", width: "190", height: "350", viewBox: "0 0 190 350", xmlns: "http://www.w3.org/2000/svg" }, h("path", { "fill-rule": "evenodd", "clip-rule": "evenodd", d: "M0 0H15C23.2843 0 30 6.71573 30 15V290H40V15C40 6.71573 46.7157 0 55 0C63.2843 0 70 6.71573 70 15V275C70 277.761 67.7615 280 65 280H60V40H50V340H60V290H65C67.7615 290 70 292.239 70 295V340H80V295C80 291.158 78.5558 287.654 76.1805 285C78.5558 282.346 80 278.842 80 275V0H95C103.284 0 110 6.71573 110 15V25C110 28.8418 108.556 32.3462 106.181 35C108.556 37.6538 110 41.1582 110 45V305C110 307.761 107.761 310 105 310H100V45C100 42.2386 97.7615 40 95 40H90V325C90 333.284 96.7157 340 105 340H120V330H105C102.239 330 100 327.761 100 325V320H105C113.284 320 120 313.284 120 305V15C120 6.71573 126.716 0 135 0C143.284 0 150 6.71573 150 15V330H140V15C140 12.2386 137.761 10 135 10C132.239 10 130 12.2386 130 15V340H165C173.284 340 180 333.284 180 325V15C180 12.2386 177.761 10 175 10H170V325C170 327.761 167.761 330 165 330H160V0H175C183.284 0 190 6.71573 190 15V350H0V0ZM10 325C10 333.284 16.7157 340 25 340C33.2843 340 40 333.284 40 325V300H30V325C30 327.761 27.7615 330 25 330C22.2385 330 20 327.761 20 325V15C20 12.2386 17.7615 10 15 10H10V325ZM60 15V30H50V15C50 12.2386 52.2385 10 55 10C57.7615 10 60 12.2386 60 15ZM95 30H90V10H95C97.7615 10 100 12.2386 100 15V25C100 27.7614 97.7615 30 95 30Z", fill: "black" })), h("h2", { slot: "title" }, "Lorem Ipsum"), h("h3", { slot: "details" }, "The standard Lorem Ipsum passage, used since the 1500s"), h("div", { slot: "details" }, "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.")));
15
- export const MgIllustratedMessage = Template.bind({});
16
- MgIllustratedMessage.args = {
17
- size: 'regular',
18
- direction: 'vertical',
19
- };
@@ -1,39 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- import { variants } from '../mg-message.conf';
4
- export default {
5
- component: 'mg-message',
6
- title: 'Molecules/mg-message',
7
- argTypes: {
8
- variant: {
9
- options: variants,
10
- control: { type: 'select' },
11
- table: {
12
- defaultValue: { summary: variants[0] },
13
- },
14
- },
15
- },
16
- parameters: { actions: { handles: ['component-show', 'component-hide'] } },
17
- };
18
- /**
19
- * Template
20
- *
21
- * @param {any} args component arguments
22
- * @returns {HTMLElement} HTMLElement
23
- */
24
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
25
- const Template = (args) => (h("mg-message", Object.assign({}, filterArgs(args, { variant: variants[0] })), args.slotContent && h("span", { innerHTML: args.slotContent }), args.slotActions && h("span", { slot: "actions", innerHTML: args.slotActions })));
26
- export const MgMessage = Template.bind({});
27
- MgMessage.args = {
28
- 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>`,
29
- slotActions: ``,
30
- identifier: 'identifier',
31
- variant: variants[0],
32
- closeButton: false,
33
- hide: false,
34
- delay: undefined,
35
- };
36
- export const WithCloseButton = Template.bind({});
37
- WithCloseButton.args = Object.assign(Object.assign({}, MgMessage.args), { variant: 'danger', closeButton: true });
38
- export const WithActions = Template.bind({});
39
- WithActions.args = Object.assign(Object.assign({}, MgMessage.args), { variant: 'warning', slotActions: `<div class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>` });
@@ -1,39 +0,0 @@
1
- /* eslint-disable react/jsx-no-bind */
2
- import { h } from '@stencil/core';
3
- import { filterArgs } from '../../../../../.storybook/utils';
4
- export default {
5
- component: 'mg-modal',
6
- title: 'Molecules/mg-modal',
7
- parameters: { actions: { handles: ['component-show', 'component-hide'] } },
8
- };
9
- /**
10
- * Template
11
- *
12
- * @param {any} args component arguments
13
- * @returns {HTMLElement} HTMLElement
14
- */
15
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
16
- const Template = (args) => (h("div", null, h("mg-button", { "aria-controls": "identifier", "aria-haspopup": "dialog", onClick: () => {
17
- const mgModal = document.querySelector('mg-modal');
18
- const isHide = mgModal.hide === true;
19
- if (isHide) {
20
- mgModal.removeAttribute('hide'); // storybook first render is an attribute then we use property
21
- mgModal.hide = false;
22
- }
23
- else {
24
- mgModal.hide = true;
25
- }
26
- } }, "Open modal"), h("mg-modal", Object.assign({}, filterArgs(args)), args.slotContent && h("div", { slot: "content", innerHTML: args.slotContent }), args.slotActions && h("div", { slot: "actions", innerHTML: args.slotActions }))));
27
- export const MgModal = Template.bind({});
28
- MgModal.args = {
29
- 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>`,
30
- slotActions: ``,
31
- modalTitle: 'Modal title',
32
- identifier: 'identifier',
33
- closeButton: false,
34
- hide: true,
35
- };
36
- export const WithCloseButton = Template.bind({});
37
- WithCloseButton.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true });
38
- export const WithActions = Template.bind({});
39
- WithActions.args = Object.assign(Object.assign({}, MgModal.args), { closeButton: true, slotActions: `<div class="mg-group-elements mg-group-elements--align-right"><mg-button>Primary</mg-button><mg-button variant="secondary">Secondary</mg-button></div>` });
@@ -1,20 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-pagination',
5
- title: 'Molecules/mg-pagination',
6
- parameters: { actions: { handles: ['current-page-change'] } },
7
- };
8
- /**
9
- * Template
10
- *
11
- * @param {any} args component arguments
12
- * @returns {HTMLElement} HTMLElement
13
- */
14
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
- const Template = (args) => h("mg-pagination", Object.assign({}, filterArgs(args)));
16
- export const MgPagination = Template.bind({});
17
- MgPagination.args = {
18
- totalPages: 5,
19
- currentPage: 1,
20
- };
@@ -1,22 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-panel',
5
- title: 'Molecules/mg-panel',
6
- parameters: { actions: { handles: ['title-change', 'expanded-change'] } },
7
- };
8
- /**
9
- * Template
10
- *
11
- * @param {any} args component arguments
12
- * @returns {HTMLElement} HTMLElement
13
- */
14
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
- const Template = (args) => (h("mg-panel", Object.assign({}, filterArgs(args)), h("div", null, "Content"), h("div", { slot: "header-right", style: { width: '100%' } }, h("mg-badge", { label: "1", value: "1", style: { 'margin-right': 'auto' } }), h("mg-button", { variant: "secondary" }, h("mg-icon", { icon: "file-upload" }), " Upload"), h("mg-button", Object.assign({}, filterArgs({ isIcon: true }), { variant: "secondary", label: "delete" }), h("mg-icon", { icon: "trash" })))));
16
- export const MgPanel = Template.bind({});
17
- MgPanel.args = {
18
- panelTitle: 'title',
19
- expanded: false,
20
- titleEditable: true,
21
- expandToggleDisabled: false,
22
- };
@@ -1,34 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-popover',
5
- title: 'Molecules/mg-popover',
6
- parameters: {
7
- layout: 'centered',
8
- docs: { iframeHeight: 600 },
9
- actions: { handles: ['display-change'] },
10
- },
11
- argTypes: {
12
- placement: {
13
- control: { type: 'select' },
14
- },
15
- },
16
- };
17
- /**
18
- * Template
19
- *
20
- * @param {any} args component arguments
21
- * @returns {HTMLElement} HTMLElement
22
- */
23
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
24
- const Template = (args) => (h("mg-popover", Object.assign({}, filterArgs(args, { placement: 'bottom' })), h("mg-button", null, "Button"), args.slotTitle && h("h2", { slot: "title" }, args.slotTitle), args.slotContent && h("p", { slot: "content" }, args.slotContent)));
25
- export const MgPopover = Template.bind({});
26
- MgPopover.args = {
27
- slotTitle: `Blu bli blo bla`,
28
- slotContent: `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.`,
29
- identifier: 'identifier',
30
- closeButton: false,
31
- disabled: false,
32
- display: false,
33
- placement: undefined,
34
- };
@@ -1,24 +0,0 @@
1
- import { h } from '@stencil/core';
2
- import { filterArgs } from '../../../../../.storybook/utils';
3
- export default {
4
- component: 'mg-skip-links',
5
- title: 'Molecules/mg-skip-links',
6
- parameters: { actions: { handles: ['go-to-anchor'] } },
7
- };
8
- /**
9
- * Template
10
- *
11
- * @param {any} args component arguments
12
- * @returns {HTMLElement} HTMLElement
13
- */
14
- // eslint-disable-next-line @typescript-eslint/no-explicit-any
15
- const Template = (args) => h("mg-skip-links", Object.assign({}, filterArgs(args)));
16
- export const MgSkipLinks = Template.bind({});
17
- MgSkipLinks.args = {
18
- links: [
19
- { href: '#content', label: 'Content' },
20
- { href: '#menu', label: 'Menu' },
21
- { href: '#search', label: 'Search' },
22
- { href: '#footer', label: 'Footer' },
23
- ],
24
- };