@newlogic-digital/ui 3.4.2 → 3.5.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 (144) hide show
  1. package/README.md +10 -14
  2. package/package.json +12 -11
  3. package/src/data/main.json +2 -7
  4. package/src/emails/{templates/Content.twig → templates.test/Content.latte} +10 -2
  5. package/src/emails/{templates/Header.twig → templates.test/Header.latte} +1 -1
  6. package/src/emails/{templates/Layout.twig → templates.test/Layout.latte} +1 -1
  7. package/src/icons.svg +34 -28
  8. package/src/scripts/Components/CookieConsent.js +22 -27
  9. package/src/scripts/Layout/Header.js +15 -13
  10. package/src/scripts/Layout/Main.js +28 -25
  11. package/src/scripts/Libraries/+.js +2 -4
  12. package/src/scripts/Libraries/Dialog.js +11 -9
  13. package/src/scripts/Libraries/Drawer.js +21 -24
  14. package/src/scripts/Libraries/Form.js +7 -14
  15. package/src/scripts/Libraries/Naja.js +5 -7
  16. package/src/scripts/Libraries/ReCaptcha.js +7 -12
  17. package/src/scripts/Libraries/Ripple.js +6 -22
  18. package/src/scripts/Libraries/Script.js +1 -2
  19. package/src/scripts/Libraries/Slider.js +160 -0
  20. package/src/scripts/Libraries/Stimulus.js +0 -1
  21. package/src/scripts/Libraries/Swup.js +38 -10
  22. package/src/scripts/Libraries/Tippy.js +17 -20
  23. package/src/scripts/Ui/+.js +3 -3
  24. package/src/scripts/Ui/Check.js +8 -0
  25. package/src/scripts/Ui/Control.js +186 -0
  26. package/src/scripts/Ui/ControlSelect.js +24 -0
  27. package/src/scripts/Ui/Text.js +8 -10
  28. package/src/scripts/Utils/Functions/+.js +3 -2
  29. package/src/scripts/Utils/Functions/importScript.js +1 -1
  30. package/src/scripts/Utils/Functions/importStyle.js +1 -1
  31. package/src/scripts/Utils/Functions/inputStep.js +9 -0
  32. package/src/scripts/Utils/Functions/inputValidity.js +57 -0
  33. package/src/scripts/Utils/Functions/loadStimulus.js +10 -10
  34. package/src/scripts/Utils/Functions/replaceScript.js +4 -0
  35. package/src/scripts/Utils/Functions/replaceTag.js +1 -5
  36. package/src/scripts/Utils/cdn.js +1 -2
  37. package/src/scripts/Utils/global.js +1 -1
  38. package/src/styles/Components/+.css +1 -1
  39. package/src/styles/Components/CookieConsent.css +22 -25
  40. package/src/styles/Components/Dialog/Default.css +8 -25
  41. package/src/styles/Components/Dropdown/Default.css +6 -3
  42. package/src/styles/Components/Field.css +1 -0
  43. package/src/styles/Layout/Header.css +13 -17
  44. package/src/styles/Layout/Main.css +8 -75
  45. package/src/styles/Layout/Nav.css +31 -27
  46. package/src/styles/Libraries/+.css +1 -2
  47. package/src/styles/Libraries/Datepicker.css +38 -229
  48. package/src/styles/Libraries/Dialog.css +1 -35
  49. package/src/styles/Libraries/Drawer.css +15 -21
  50. package/src/styles/Libraries/Hint.css +86 -101
  51. package/src/styles/Libraries/Pickr.css +13 -0
  52. package/src/styles/Libraries/Ripple.css +1 -16
  53. package/src/styles/Libraries/Tippy.css +25 -39
  54. package/src/styles/Ui/+.css +6 -5
  55. package/src/styles/Ui/Badge.css +7 -82
  56. package/src/styles/Ui/Btn.css +13 -226
  57. package/src/styles/Ui/Check.css +1 -0
  58. package/src/styles/Ui/Control.css +47 -0
  59. package/src/styles/Ui/ControlSelect.css +66 -0
  60. package/src/styles/Ui/Dot.css +22 -0
  61. package/src/styles/Ui/Group.css +1 -0
  62. package/src/styles/Ui/Heading.css +3 -22
  63. package/src/styles/Ui/Image.css +1 -17
  64. package/src/styles/Ui/Info.css +1 -0
  65. package/src/styles/Ui/Label.css +1 -14
  66. package/src/styles/Ui/Link.css +2 -41
  67. package/src/styles/Ui/Notice.css +1 -47
  68. package/src/styles/Ui/Progress.css +1 -56
  69. package/src/styles/Ui/Switch.css +1 -70
  70. package/src/styles/Ui/Text.css +4 -250
  71. package/src/styles/Ui/Title.css +5 -13
  72. package/src/styles/Utils/+.css +8 -10
  73. package/src/styles/Utils/breakpoints.css +1 -9
  74. package/src/styles/Utils/config.css +5 -0
  75. package/src/styles/Utils/default.css +8 -26
  76. package/src/styles/Utils/icons.css +3 -7
  77. package/src/styles/Utils/keyframes.css +1 -182
  78. package/src/styles/Utils/{tailwind/utilities.css → tailwind.css} +32 -30
  79. package/src/styles/Utils/theme/main.css +14 -23
  80. package/src/styles/main.css +19 -14
  81. package/src/styles/tinymce.css +34 -0
  82. package/src/templates/Components/CookieConsent.latte +28 -0
  83. package/src/templates/Components/Dialogs/{Basic.twig → Basic.latte} +9 -9
  84. package/src/templates/Layout/Footer.latte +0 -0
  85. package/src/templates/Layout/{Header.twig → Header.latte} +15 -17
  86. package/src/templates/Layout/Main.latte +62 -0
  87. package/src/templates/Sections/Gdpr.latte +127 -0
  88. package/src/templates/Sections/Site.latte +141 -0
  89. package/src/templates/Sections/Ui/Docs/@intro.html +13 -62
  90. package/src/templates/Sections/Ui/Docs/@nav.html +41 -92
  91. package/src/templates/Sections/Ui/Docs/@styles.html +2 -6
  92. package/src/templates/Sections/Ui/Docs/Default.latte +1059 -0
  93. package/src/templates/Sections/Ui/Icons.html +11 -9
  94. package/src/templates/Sections/Ui/Intro.html +66 -37
  95. package/src/templates/Sections/Ui.latte +8 -0
  96. package/src/templates/Ui/+.latte +5 -0
  97. package/src/templates/Ui/Check.latte +7 -0
  98. package/src/templates/Ui/Control.latte +9 -0
  99. package/src/templates/Ui/ControlDate.latte +14 -0
  100. package/src/templates/Ui/ControlSelect.latte +9 -0
  101. package/src/templates/Ui/ControlTime.latte +14 -0
  102. package/src/templates/Utils/sections.latte +3 -0
  103. package/src/views/dialog/basic.json.latte +5 -0
  104. package/src/views/dropdown/{tippy.json.twig → tippy.json.latte} +7 -4
  105. package/src/views/email/email.latte +6 -0
  106. package/src/views/email/email.test.latte +6 -0
  107. package/src/views/gdpr.json +1 -1
  108. package/src/views/index.json +1 -1
  109. package/src/views/site.json +11 -0
  110. package/src/views/ui-icons.json +1 -1
  111. package/src/views/ui.json +1 -1
  112. package/vite.config.js +2 -8
  113. package/src/scripts/Libraries/Anchor.js +0 -35
  114. package/src/scripts/Libraries/NativeSlider.js +0 -138
  115. package/src/scripts/Libraries/Tabs.js +0 -16
  116. package/src/scripts/Ui/Checkbox.js +0 -10
  117. package/src/scripts/Ui/Input.js +0 -259
  118. package/src/scripts/Ui/Select.js +0 -53
  119. package/src/scripts/Utils/Functions/checkValidity.js +0 -44
  120. package/src/scripts/Utils/Functions/dataValue.js +0 -52
  121. package/src/styles/Components/Form/+.css +0 -1
  122. package/src/styles/Components/Form/CookieConsent.css +0 -31
  123. package/src/styles/Libraries/NativeSlider.css +0 -60
  124. package/src/styles/Libraries/Tabs.css +0 -19
  125. package/src/styles/Ui/Checkbox.css +0 -150
  126. package/src/styles/Ui/Icon.css +0 -33
  127. package/src/styles/Ui/Input.css +0 -467
  128. package/src/styles/Ui/Radio.css +0 -4
  129. package/src/styles/Ui/Select.css +0 -137
  130. package/src/styles/Utils/normalize.css +0 -223
  131. package/src/styles/Utils/tailwind/+.css +0 -3
  132. package/src/styles/Utils/tailwind/base.css +0 -3
  133. package/src/styles/Utils/tailwind/gutters.css +0 -346
  134. package/src/styles/Utils/vars.css +0 -91
  135. package/src/styles/Utils/vendor.css +0 -2
  136. package/src/templates/Components/CookieConsent.twig +0 -30
  137. package/src/templates/Layout/Main.twig +0 -49
  138. package/src/templates/Sections/Gdpr.twig +0 -64
  139. package/src/templates/Sections/Ui/Docs/Default.twig +0 -1600
  140. package/src/templates/Sections/Ui.twig +0 -8
  141. package/src/templates/Utils/sections.twig +0 -3
  142. package/src/views/dialog/basic.json.twig +0 -3
  143. package/src/views/email/email.twig +0 -6
  144. /package/src/{templates/Layout/Footer.twig → emails/templates/.gitkeep} +0 -0
package/src/templates/Sections/Ui/Docs/@nav.html CHANGED
@@ -1,6 +1,6 @@
1
- <div class="col col-left touch:hidden">
1
+ <div class="col col-left max-md:hidden">
2
2
  <div class="sticky">
3
- <div class="mb-5">
3
+ <div class="mb-6">
4
4
  <h2 class="ui-title uppercase text-primary mb-3">Get started</h2>
5
5
  <ul class="row flex-col g-2">
6
6
  <li class="col col-12">
@@ -13,45 +13,39 @@
13
13
  <span>Core</span>
14
14
  </a>
15
15
  </li>
16
- <li class="col col-12">
17
- <a href="#theme"
18
- class="ui-link" title="">
19
- <span>Theme</span>
20
- </a>
21
- </li>
22
- <li class="col col-12">
23
- <a href="#layout" class="ui-link" title="">
24
- <span>Layout</span>
25
- </a>
26
- </li>
27
16
  </ul>
28
17
  </div>
29
- <div class="mb-5">
18
+ <div class="mb-6">
30
19
  <h2 class="ui-title uppercase text-primary mb-3">Components</h2>
31
20
  <ul class="row flex-col g-2">
32
21
  <li class="col col-12">
33
- <a href="#headings" class="ui-link" title="">
34
- <span>Headings</span>
22
+ <a href="#heading" class="ui-link" title="">
23
+ <span>Heading</span>
35
24
  </a>
36
25
  </li>
37
26
  <li class="col col-12">
38
- <a href="#buttons" class="ui-link" title="">
39
- <span>Buttons</span>
27
+ <a href="#title" class="ui-link" title="">
28
+ <span>Title</span>
40
29
  </a>
41
30
  </li>
42
31
  <li class="col col-12">
43
- <a href="#links" class="ui-link" title="">
44
- <span>Links</span>
32
+ <a href="#button" class="ui-link" title="">
33
+ <span>Button</span>
45
34
  </a>
46
35
  </li>
47
36
  <li class="col col-12">
48
- <a href="#icons" class="ui-link" title="">
49
- <span>Icons</span>
37
+ <a href="#link" class="ui-link" title="">
38
+ <span>Link</span>
50
39
  </a>
51
40
  </li>
52
41
  <li class="col col-12">
53
- <a href="#form" class="ui-link" title="">
54
- <span>Forms</span>
42
+ <a href="#control" class="ui-link" title="">
43
+ <span>Control</span>
44
+ </a>
45
+ </li>
46
+ <li class="col col-12">
47
+ <a href="#check" class="ui-link" title="">
48
+ <span>Check</span>
55
49
  </a>
56
50
  </li>
57
51
  <li class="col col-12">
@@ -74,49 +68,19 @@
74
68
  <span>Text</span>
75
69
  </a>
76
70
  </li>
77
- </ul>
78
- </div>
79
- <div class="mb-5">
80
- <h2 class="ui-title uppercase text-primary mb-3">Tailwind</h2>
81
- <ul class="row flex-col g-2">
82
71
  <li class="col col-12">
83
- <a href="#colors" class="ui-link" title="">
84
- <span>Colors</span>
85
- </a>
86
- </li>
87
- <li class="col col-12">
88
- <a href="#responsive" class="ui-link" title="">
89
- <span>Responsive</span>
90
- </a>
91
- </li>
92
- <li class="col col-12">
93
- <a href="#container" class="ui-link" title="">
94
- <span>Container</span>
95
- </a>
96
- </li>
97
- <li class="col col-12">
98
- <a href="#grid" class="ui-link" title="">
99
- <span>Grid</span>
72
+ <a href="#image" class="ui-link" title="">
73
+ <span>Image</span>
100
74
  </a>
101
75
  </li>
102
76
  </ul>
103
77
  </div>
104
- <div class="mb-5">
78
+ <div class="mb-6">
105
79
  <h2 class="ui-title uppercase text-primary mb-3">Libraries</h2>
106
80
  <ul class="row flex-col g-2">
107
81
  <li class="col col-12">
108
- <a href="#anchor" class="ui-link" title="">
109
- <span>Anchor</span>
110
- </a>
111
- </li>
112
- <li class="col col-12">
113
- <a href="#cookieconsent" class="ui-link" title="">
114
- <span>CookieConsent</span>
115
- </a>
116
- </li>
117
- <li class="col col-12">
118
- <a href="#datepicker" class="ui-link" title="">
119
- <span>Datepicker</span>
82
+ <a href="#form" class="ui-link" title="">
83
+ <span>Form</span>
120
84
  </a>
121
85
  </li>
122
86
  <li class="col col-12">
@@ -130,63 +94,48 @@
130
94
  </a>
131
95
  </li>
132
96
  <li class="col col-12">
133
- <a href="#hint" class="ui-link" title="">
134
- <span>Hint</span>
135
- </a>
136
- </li>
137
- <li class="col col-12">
138
- <a href="#lazyload" class="ui-link" title="">
139
- <span>Lazyload</span>
140
- </a>
141
- </li>
142
- <li class="col col-12">
143
- <a href="#nativeslider" class="ui-link" title="">
144
- <span>NativeSlider</span>
97
+ <a href="#ripple" class="ui-link" title="">
98
+ <span>Ripple</span>
145
99
  </a>
146
100
  </li>
147
101
  <li class="col col-12">
148
- <a href="#recaptcha" class="ui-link" title="">
149
- <span>ReCaptcha</span>
102
+ <a href="#datepicker" class="ui-link" title="">
103
+ <span>Datepicker</span>
150
104
  </a>
151
105
  </li>
152
106
  <li class="col col-12">
153
- <a href="#ripple" class="ui-link" title="">
154
- <span>Ripple</span>
107
+ <a href="#slider" class="ui-link" title="">
108
+ <span>Slider</span>
155
109
  </a>
156
110
  </li>
157
111
  <li class="col col-12">
158
- <a href="#stimulus" class="ui-link" title="">
159
- <span>Stimulus</span>
112
+ <a href="#swup" class="ui-link" title="">
113
+ <span>Swup</span>
160
114
  </a>
161
115
  </li>
162
116
  <li class="col col-12">
163
- <a href="#swup" class="ui-link" title="">
164
- <span>Swup</span>
117
+ <a href="#tippy" class="ui-link" title="">
118
+ <span>Tippy</span>
165
119
  </a>
166
120
  </li>
167
121
  <li class="col col-12">
168
- <a href="#tabs" class="ui-link" title="">
169
- <span>Tabs</span>
122
+ <a href="#hint" class="ui-link" title="">
123
+ <span>Hint</span>
170
124
  </a>
171
125
  </li>
172
126
  <li class="col col-12">
173
- <a href="#tippy" class="ui-link" title="">
174
- <span>Tippy</span>
127
+ <a href="#cookieconsent" class="ui-link" title="">
128
+ <span>CookieConsent</span>
175
129
  </a>
176
130
  </li>
177
- </ul>
178
- </div>
179
- <div class="mb-5">
180
- <h2 class="ui-title uppercase text-primary mb-3">Other</h2>
181
- <ul class="row flex-col g-2">
182
131
  <li class="col col-12">
183
- <a href="#functions" class="ui-link" title="">
184
- <span>Functions</span>
132
+ <a href="#recaptcha" class="ui-link" title="">
133
+ <span>ReCaptcha</span>
185
134
  </a>
186
135
  </li>
187
136
  <li class="col col-12">
188
- <a href="#build" class="ui-link" title="">
189
- <span>Build</span>
137
+ <a href="#stimulus" class="ui-link" title="">
138
+ <span>Stimulus</span>
190
139
  </a>
191
140
  </li>
192
141
  </ul>
package/src/templates/Sections/Ui/Docs/@styles.html CHANGED
@@ -3,14 +3,14 @@
3
3
  margin: 1rem 0 2rem !important;
4
4
  padding: 1.25rem 1.5rem !important;
5
5
  border-radius: 0.5rem !important;
6
- background: #282c34 none repeat scroll 0 0 !important;
6
+ background: var(--color-main) none repeat scroll 0 0 !important;
7
7
  max-width: 100%;
8
8
  font-size: 14px !important;
9
9
  overflow: auto;
10
10
  }
11
11
 
12
12
  .dark pre {
13
- background: rgb(var(--color-background-100)) none repeat scroll 0% 0% !important;
13
+ background: var(--color-body-secondary) none repeat scroll 0% 0% !important;
14
14
  }
15
15
 
16
16
  @media all and (min-width: 48rem) {
@@ -25,10 +25,6 @@
25
25
  }
26
26
  }
27
27
 
28
- .ui-heading + .ui-text {
29
- margin-top: 1rem;
30
- }
31
-
32
28
  code {
33
29
  margin-left: 0;
34
30
  }