@muonic/muon 0.0.2-beta.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 (124) hide show
  1. package/.nycrc +17 -0
  2. package/.versionrc +3 -0
  3. package/CHANGELOG.md +389 -0
  4. package/components/card/index.js +1 -0
  5. package/components/card/src/card-component.js +43 -0
  6. package/components/card/src/card-styles.css +25 -0
  7. package/components/card/src/config-tokens.json +11 -0
  8. package/components/card/src/design-tokens.json +34 -0
  9. package/components/card/story.js +52 -0
  10. package/components/cta/index.js +1 -0
  11. package/components/cta/src/config-tokens.json +11 -0
  12. package/components/cta/src/cta-component.js +174 -0
  13. package/components/cta/src/cta-styles.css +105 -0
  14. package/components/cta/src/design-tokens.json +132 -0
  15. package/components/cta/story.js +99 -0
  16. package/components/detail/index.js +1 -0
  17. package/components/detail/src/config-tokens.json +11 -0
  18. package/components/detail/src/design-tokens.json +102 -0
  19. package/components/detail/src/detail-component.js +27 -0
  20. package/components/detail/src/detail-styles.css +83 -0
  21. package/components/detail/story.js +33 -0
  22. package/components/form/index.js +1 -0
  23. package/components/form/src/config-tokens.json +11 -0
  24. package/components/form/src/design-tokens.json +9 -0
  25. package/components/form/src/form-component.js +197 -0
  26. package/components/form/src/form-styles.css +10 -0
  27. package/components/form/story.js +71 -0
  28. package/components/icon/index.js +1 -0
  29. package/components/icon/src/config-tokens.json +31 -0
  30. package/components/icon/src/design-tokens.json +8 -0
  31. package/components/icon/src/icon-component.js +91 -0
  32. package/components/icon/src/icon-styles.css +26 -0
  33. package/components/icon/story.js +26 -0
  34. package/components/image/index.js +1 -0
  35. package/components/image/src/config-tokens.json +26 -0
  36. package/components/image/src/image-component.js +96 -0
  37. package/components/image/src/image-styles.css +71 -0
  38. package/components/image/story.js +31 -0
  39. package/components/inputter/index.js +1 -0
  40. package/components/inputter/src/config-tokens.json +14 -0
  41. package/components/inputter/src/design-tokens.json +308 -0
  42. package/components/inputter/src/inputter-component.js +227 -0
  43. package/components/inputter/src/inputter-styles-detail.css +59 -0
  44. package/components/inputter/src/inputter-styles.css +305 -0
  45. package/components/inputter/src/inputter-styles.slotted.css +64 -0
  46. package/components/inputter/story.js +243 -0
  47. package/css/accessibility.css +3 -0
  48. package/css/default.css +9 -0
  49. package/css/global.css +8 -0
  50. package/directives/image-loader-directive.js +116 -0
  51. package/directives/svg-loader-directive.js +94 -0
  52. package/index.js +52 -0
  53. package/mixins/card-mixin.js +27 -0
  54. package/mixins/detail-mixin.js +128 -0
  55. package/mixins/form-associate-mixin.js +36 -0
  56. package/mixins/form-element-mixin.js +378 -0
  57. package/mixins/image-holder-mixin.js +20 -0
  58. package/mixins/mask-mixin.js +159 -0
  59. package/mixins/validation-mixin.js +272 -0
  60. package/muon-element/index.js +97 -0
  61. package/package.json +72 -0
  62. package/rollup.config.mjs +30 -0
  63. package/scripts/build/storybook/index.mjs +11 -0
  64. package/scripts/build/storybook/run.mjs +47 -0
  65. package/scripts/rollup-plugins.mjs +116 -0
  66. package/scripts/serve/index.mjs +11 -0
  67. package/scripts/serve/run.mjs +27 -0
  68. package/scripts/style-dictionary.mjs +64 -0
  69. package/scripts/utils/config.mjs +30 -0
  70. package/scripts/utils/index.mjs +283 -0
  71. package/storybook/find-stories.js +36 -0
  72. package/storybook/server.config.mjs +19 -0
  73. package/storybook/stories.js +86 -0
  74. package/storybook/tokens/color.js +87 -0
  75. package/storybook/tokens/font.js +52 -0
  76. package/storybook/tokens/spacer.js +48 -0
  77. package/tests/README.md +3 -0
  78. package/tests/components/card/__snapshots__/card.test.snap.js +70 -0
  79. package/tests/components/card/card.test.js +81 -0
  80. package/tests/components/cta/__snapshots__/cta.test.snap.js +246 -0
  81. package/tests/components/cta/cta.test.js +212 -0
  82. package/tests/components/form/__snapshots__/form.test.snap.js +115 -0
  83. package/tests/components/form/form.test.js +336 -0
  84. package/tests/components/icon/__snapshots__/icon.test.snap.js +95 -0
  85. package/tests/components/icon/icon.test.js +197 -0
  86. package/tests/components/image/__snapshots__/image.test.snap.js +205 -0
  87. package/tests/components/image/image.test.js +314 -0
  88. package/tests/components/image/images/15.png +0 -0
  89. package/tests/components/image/images/150.png +0 -0
  90. package/tests/components/inputter/__snapshots__/inputter.test.snap.js +357 -0
  91. package/tests/components/inputter/inputter.test.js +427 -0
  92. package/tests/helpers/index.js +30 -0
  93. package/tests/mixins/__snapshots__/card.test.snap.js +35 -0
  94. package/tests/mixins/__snapshots__/detail.test.snap.js +237 -0
  95. package/tests/mixins/__snapshots__/form-element.test.snap.js +137 -0
  96. package/tests/mixins/__snapshots__/mask.test.snap.js +53 -0
  97. package/tests/mixins/__snapshots__/validation.test.snap.js +297 -0
  98. package/tests/mixins/card.test.js +63 -0
  99. package/tests/mixins/detail.test.js +223 -0
  100. package/tests/mixins/form-element.test.js +473 -0
  101. package/tests/mixins/mask.test.js +261 -0
  102. package/tests/mixins/muon-element.test.js +52 -0
  103. package/tests/mixins/validation.test.js +423 -0
  104. package/tests/runner/commands.mjs +19 -0
  105. package/tests/scripts/utils/card-component.js +26 -0
  106. package/tests/scripts/utils/muon.config.test.json +13 -0
  107. package/tests/scripts/utils/single.component.config.json +5 -0
  108. package/tests/scripts/utils/test-runner.mjs +1 -0
  109. package/tests/scripts/utils/utils-test.mjs +284 -0
  110. package/tests/utils/validation.functions.test.js +199 -0
  111. package/tokens/theme/color.json +482 -0
  112. package/tokens/theme/font.json +61 -0
  113. package/tokens/theme/size.json +27 -0
  114. package/tokens/theme/spacer.json +73 -0
  115. package/tokens/utils/formats/reference.js +17 -0
  116. package/tokens/utils/modular-scale.js +33 -0
  117. package/tokens/utils/templates/font-face.css.template +30 -0
  118. package/tokens/utils/transforms/color.js +27 -0
  119. package/tokens/utils/transforms/string.js +6 -0
  120. package/tokens/utils/validation.json +76 -0
  121. package/utils/scroll/index.js +31 -0
  122. package/utils/validation/index.js +205 -0
  123. package/web-test-runner.browserstack.config.mjs +123 -0
  124. package/web-test-runner.config.mjs +44 -0
package/tests/mixins/__snapshots__/detail.test.snap.js ADDED
@@ -0,0 +1,237 @@
1
+ /* @web/test-runner snapshot v1 */
2
+ export const snapshots = {};
3
+
4
+ snapshots["detail standard"] =
5
+ `<details class="details">
6
+ <summary class="heading">
7
+ <slot name="heading">
8
+ </slot>
9
+ <detail-icon
10
+ class="toggle"
11
+ name=""
12
+ >
13
+ </detail-icon>
14
+ </summary>
15
+ <div class="content">
16
+ <slot>
17
+ </slot>
18
+ </div>
19
+ </details>
20
+ `;
21
+ /* end snapshot detail standard */
22
+
23
+ snapshots["detail standard open"] =
24
+ `<details
25
+ class="details"
26
+ open=""
27
+ >
28
+ <summary class="heading">
29
+ <slot name="heading">
30
+ </slot>
31
+ <detail-icon
32
+ class="toggle"
33
+ name=""
34
+ >
35
+ </detail-icon>
36
+ </summary>
37
+ <div class="content">
38
+ <slot>
39
+ </slot>
40
+ </div>
41
+ </details>
42
+ `;
43
+ /* end snapshot detail standard open */
44
+
45
+ snapshots["detail standard heading"] =
46
+ `<details class="details">
47
+ <summary class="heading">
48
+ <span class="heading">
49
+ <slot name="heading">
50
+ </slot>
51
+ </span>
52
+ <detail-icon
53
+ class="open-icon"
54
+ name="chevron-circle-down"
55
+ >
56
+ </detail-icon>
57
+ <detail-icon
58
+ class="close-icon"
59
+ name="chevron-circle-up"
60
+ >
61
+ </detail-icon>
62
+ </summary>
63
+ <div class="content">
64
+ <slot>
65
+ </slot>
66
+ </div>
67
+ </details>
68
+ `;
69
+ /* end snapshot detail standard heading */
70
+
71
+ snapshots["detail standard slotted content"] =
72
+ `<details class="details">
73
+ <summary class="heading">
74
+ <slot name="heading">
75
+ </slot>
76
+ <detail-icon
77
+ class="toggle"
78
+ name=""
79
+ >
80
+ </detail-icon>
81
+ </summary>
82
+ <div class="content">
83
+ <slot>
84
+ </slot>
85
+ </div>
86
+ </details>
87
+ `;
88
+ /* end snapshot detail standard slotted content */
89
+
90
+ snapshots["detail standard toggle event"] =
91
+ `<details class="details">
92
+ <summary class="heading">
93
+ <span class="heading">
94
+ <slot name="heading">
95
+ </slot>
96
+ </span>
97
+ <detail-icon
98
+ class="open-icon"
99
+ name="chevron-circle-down"
100
+ >
101
+ </detail-icon>
102
+ <detail-icon
103
+ class="close-icon"
104
+ name="chevron-circle-up"
105
+ >
106
+ </detail-icon>
107
+ </summary>
108
+ <div class="content">
109
+ <slot>
110
+ </slot>
111
+ </div>
112
+ </details>
113
+ `;
114
+ /* end snapshot detail standard toggle event */
115
+
116
+ snapshots["detail standard toggle event true"] =
117
+ `<details class="details">
118
+ <summary class="heading">
119
+ <slot name="heading">
120
+ </slot>
121
+ <detail-icon
122
+ class="toggle"
123
+ name=""
124
+ >
125
+ </detail-icon>
126
+ </summary>
127
+ <div class="content">
128
+ <slot>
129
+ </slot>
130
+ </div>
131
+ </details>
132
+ `;
133
+ /* end snapshot detail standard toggle event true */
134
+
135
+ snapshots["detail standard toggle event false"] =
136
+ `<details
137
+ class="details toggle-start"
138
+ open=""
139
+ >
140
+ <summary class="heading">
141
+ <detail-icon
142
+ class="toggle"
143
+ name="chevron-circle-up"
144
+ >
145
+ </detail-icon>
146
+ <slot name="heading">
147
+ </slot>
148
+ </summary>
149
+ <div class="content">
150
+ <slot>
151
+ </slot>
152
+ </div>
153
+ </details>
154
+ `;
155
+ /* end snapshot detail standard toggle event false */
156
+
157
+ snapshots["detail standard icon"] =
158
+ `<details class="details has-icon">
159
+ <summary class="heading">
160
+ <detail-icon
161
+ class="icon"
162
+ name="dot-circle"
163
+ >
164
+ </detail-icon>
165
+ <slot name="heading">
166
+ </slot>
167
+ <detail-icon
168
+ class="toggle"
169
+ name=""
170
+ >
171
+ </detail-icon>
172
+ </summary>
173
+ <div class="content">
174
+ <slot>
175
+ </slot>
176
+ </div>
177
+ </details>
178
+ `;
179
+ /* end snapshot detail standard icon */
180
+
181
+ snapshots["detail standard icon end"] =
182
+ `<details class="details toggle-end">
183
+ <summary class="heading">
184
+ <slot name="heading">
185
+ </slot>
186
+ <detail-icon
187
+ class="toggle"
188
+ name="chevron-circle-down"
189
+ >
190
+ </detail-icon>
191
+ </summary>
192
+ <div class="content">
193
+ <slot>
194
+ </slot>
195
+ </div>
196
+ </details>
197
+ `;
198
+ /* end snapshot detail standard icon end */
199
+
200
+ snapshots["detail standard toggle"] =
201
+ `<details class="details toggle-start">
202
+ <summary class="heading">
203
+ <detail-icon
204
+ class="toggle"
205
+ name="chevron-circle-down"
206
+ >
207
+ </detail-icon>
208
+ <slot name="heading">
209
+ </slot>
210
+ </summary>
211
+ <div class="content">
212
+ <slot>
213
+ </slot>
214
+ </div>
215
+ </details>
216
+ `;
217
+ /* end snapshot detail standard toggle */
218
+
219
+ snapshots["detail standard toggle end"] =
220
+ `<details class="details toggle-end">
221
+ <summary class="heading">
222
+ <slot name="heading">
223
+ </slot>
224
+ <detail-icon
225
+ class="toggle"
226
+ name="chevron-circle-down"
227
+ >
228
+ </detail-icon>
229
+ </summary>
230
+ <div class="content">
231
+ <slot>
232
+ </slot>
233
+ </div>
234
+ </details>
235
+ `;
236
+ /* end snapshot detail standard toggle end */
237
+
package/tests/mixins/__snapshots__/form-element.test.snap.js ADDED
@@ -0,0 +1,137 @@
1
+ /* @web/test-runner snapshot v1 */
2
+ export const snapshots = {};
3
+
4
+ snapshots["form-element standard"] =
5
+ `<div class="slotted-content">
6
+ <slot name="label">
7
+ </slot>
8
+ <div class="input-holder">
9
+ <slot>
10
+ </slot>
11
+ </div>
12
+ </div>
13
+ `;
14
+ /* end snapshot form-element standard */
15
+
16
+ snapshots["form-element standard text input"] =
17
+ `<div class="slotted-content">
18
+ <slot name="label">
19
+ </slot>
20
+ <div class="input-holder">
21
+ <slot>
22
+ </slot>
23
+ </div>
24
+ </div>
25
+ `;
26
+ /* end snapshot form-element standard text input */
27
+
28
+ snapshots["form-element standard radio input"] =
29
+ `<div class="slotted-content">
30
+ <span class="input-heading">
31
+ What is your heating source?
32
+ </span>
33
+ <div class="input-holder">
34
+ <slot>
35
+ </slot>
36
+ </div>
37
+ </div>
38
+ `;
39
+ /* end snapshot form-element standard radio input */
40
+
41
+ snapshots["form-element standard checkbox input"] =
42
+ `<div class="slotted-content">
43
+ <span class="input-heading">
44
+ What is your heating source?
45
+ </span>
46
+ <div class="input-holder">
47
+ <slot>
48
+ </slot>
49
+ </div>
50
+ </div>
51
+ `;
52
+ /* end snapshot form-element standard checkbox input */
53
+
54
+ snapshots["form-element standard select input"] =
55
+ `<div class="select-arrow slotted-content">
56
+ <slot name="label">
57
+ </slot>
58
+ <div class="input-holder">
59
+ <slot>
60
+ </slot>
61
+ </div>
62
+ </div>
63
+ `;
64
+ /* end snapshot form-element standard select input */
65
+
66
+ snapshots["form-element standard text input labelID"] =
67
+ `<div class="slotted-content">
68
+ <div class="input-holder">
69
+ <slot>
70
+ </slot>
71
+ </div>
72
+ </div>
73
+ `;
74
+ /* end snapshot form-element standard text input labelID */
75
+
76
+ snapshots["form-element radio default value"] =
77
+ `<div class="slotted-content">
78
+ <span class="input-heading">
79
+ What is your heating source?
80
+ </span>
81
+ <div class="input-holder">
82
+ <slot>
83
+ </slot>
84
+ </div>
85
+ </div>
86
+ `;
87
+ /* end snapshot form-element radio default value */
88
+
89
+ snapshots["form-element checkbox default value"] =
90
+ `<div class="slotted-content">
91
+ <span class="input-heading">
92
+ What is your heating source?
93
+ </span>
94
+ <div class="input-holder">
95
+ <slot>
96
+ </slot>
97
+ </div>
98
+ </div>
99
+ `;
100
+ /* end snapshot form-element checkbox default value */
101
+
102
+ snapshots["form-element text default value"] =
103
+ `<div class="slotted-content">
104
+ <slot name="label">
105
+ </slot>
106
+ <div class="input-holder">
107
+ <slot>
108
+ </slot>
109
+ </div>
110
+ </div>
111
+ `;
112
+ /* end snapshot form-element text default value */
113
+
114
+ snapshots["form-element text input event"] =
115
+ `<div class="slotted-content">
116
+ <slot name="label">
117
+ </slot>
118
+ <div class="input-holder">
119
+ <slot>
120
+ </slot>
121
+ </div>
122
+ </div>
123
+ `;
124
+ /* end snapshot form-element text input event */
125
+
126
+ snapshots["form-element text default input value"] =
127
+ `<div class="slotted-content">
128
+ <slot name="label">
129
+ </slot>
130
+ <div class="input-holder">
131
+ <slot>
132
+ </slot>
133
+ </div>
134
+ </div>
135
+ `;
136
+ /* end snapshot form-element text default input value */
137
+
package/tests/mixins/__snapshots__/mask.test.snap.js ADDED
@@ -0,0 +1,53 @@
1
+ /* @web/test-runner snapshot v1 */
2
+ export const snapshots = {};
3
+
4
+ snapshots["mask & separator mask default checks"] =
5
+ `<slot name="label">
6
+ </slot>
7
+ <slot>
8
+ </slot>
9
+ <div
10
+ aria-hidden="true"
11
+ class="input-mask"
12
+ >
13
+ 00000
14
+ </div>
15
+ `;
16
+ /* end snapshot mask & separator mask default checks */
17
+
18
+ snapshots["mask & separator mask separator default checks"] =
19
+ `<slot name="label">
20
+ </slot>
21
+ <slot>
22
+ </slot>
23
+ <div
24
+ aria-hidden="true"
25
+ class="input-mask"
26
+ >
27
+ 00-00-00
28
+ </div>
29
+ `;
30
+ /* end snapshot mask & separator mask separator default checks */
31
+
32
+ snapshots["mask & separator tel mask seprator default checks"] =
33
+ `<slot name="label">
34
+ </slot>
35
+ <slot>
36
+ </slot>
37
+ <div
38
+ aria-hidden="true"
39
+ class="input-mask"
40
+ >
41
+ 00-00-00
42
+ </div>
43
+ `;
44
+ /* end snapshot mask & separator tel mask seprator default checks */
45
+
46
+ snapshots["mask & separator radio mask default checks"] =
47
+ `<slot name="label">
48
+ </slot>
49
+ <slot>
50
+ </slot>
51
+ `;
52
+ /* end snapshot mask & separator radio mask default checks */
53
+