generator-white-label 3.2.0 → 5.0.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 (253) hide show
  1. package/README.md +140 -81
  2. package/app/README.md +19 -0
  3. package/app/assets/font/opensans/stylesheet.css +20 -60
  4. package/app/assets/image/demo/fallback.avif +0 -0
  5. package/app/assets/image/demo/fallback.jpg +0 -0
  6. package/app/assets/image/demo/fallback.webp +0 -0
  7. package/app/assets/image/demo/large.avif +0 -0
  8. package/app/assets/image/demo/large.webp +0 -0
  9. package/app/assets/image/demo/small.avif +0 -0
  10. package/app/assets/image/demo/small.webp +0 -0
  11. package/app/assets/markup/element/iframe.hbs +4 -1
  12. package/app/assets/markup/element/img.hbs +16 -1
  13. package/app/assets/markup/element/picture.hbs +30 -0
  14. package/app/assets/markup/modal/modal-example-1.handlebars +1 -1
  15. package/app/assets/script/api/{facebook.js → facebook.ts} +17 -12
  16. package/app/assets/script/api/youtube.ts +22 -0
  17. package/app/assets/script/index.ts +2 -0
  18. package/app/assets/script/mediator/global.ts +4 -0
  19. package/app/assets/script/model/singletons/countries.ts +5 -0
  20. package/app/assets/script/model/singletons/global.ts +5 -0
  21. package/app/assets/script/model/singletons/states.ts +5 -0
  22. package/app/assets/script/model/user.ts +4 -0
  23. package/app/assets/script/toolkit.ts +11 -0
  24. package/app/assets/script/types.d.ts +16 -0
  25. package/app/assets/script/utility/ajax.ts +15 -0
  26. package/app/assets/script/utility/form.ts +119 -0
  27. package/app/assets/script/utility/{regex.js → regex.ts} +15 -6
  28. package/app/assets/script/utility/share.ts +77 -0
  29. package/app/assets/script/utility/string.ts +148 -0
  30. package/app/assets/script/view/default.tsx +14 -0
  31. package/app/assets/script/view/toolkit/youtube-player-1.ts +31 -0
  32. package/app/assets/style/base/_toolkit.scss +25 -25
  33. package/app/assets/style/base/components/_modal-1.scss +8 -3
  34. package/app/assets/style/base/components/_tabpanel-1.scss +21 -16
  35. package/app/assets/style/base/components/_tabpanel-2.scss +11 -6
  36. package/app/assets/style/base/components/_youtube-player-1.scss +3 -2
  37. package/app/assets/style/base/elements/_anchors.scss +2 -0
  38. package/app/assets/style/base/elements/_buttons.scss +7 -3
  39. package/app/assets/style/base/elements/_fieldsets.scss +2 -0
  40. package/app/assets/style/base/elements/_inputs.scss +6 -2
  41. package/app/assets/style/base/elements/_labels.scss +2 -0
  42. package/app/assets/style/base/elements/_legends.scss +2 -0
  43. package/app/assets/style/base/elements/_lists.scss +2 -0
  44. package/app/assets/style/base/elements/_tables.scss +10 -6
  45. package/app/assets/style/base/layouts/_staggered-1.scss +4 -1
  46. package/app/assets/style/base/type/_fonts.scss +4 -1
  47. package/app/assets/style/base/type/_headings.scss +3 -0
  48. package/app/assets/style/base/type/_text.scss +2 -0
  49. package/app/assets/style/base/utilities/_accessibility.scss +5 -2
  50. package/app/assets/style/base/utilities/_functions.scss +62 -9
  51. package/app/assets/style/global.scss +4 -11
  52. package/app/assets/style/print.scss +1 -4
  53. package/app/assets/style/toolkit.scss +37 -37
  54. package/app/package.json +1 -0
  55. package/app/toolkit/colors.hbs +11 -11
  56. package/app/toolkit/components.hbs +16 -16
  57. package/app/toolkit/elements.hbs +52 -43
  58. package/app/toolkit/grids.hbs +111 -111
  59. package/app/toolkit/icons.hbs +2 -2
  60. package/app/toolkit/index.hbs +6 -6
  61. package/app/toolkit/type.hbs +4 -4
  62. package/dist/app/assets/data/coutries.json +992 -0
  63. package/dist/app/assets/data/states.json +204 -0
  64. package/dist/app/assets/script/api/facebook.d.ts +8 -0
  65. package/dist/app/assets/script/api/facebook.js +42 -0
  66. package/dist/app/assets/script/api/facebook.js.map +1 -0
  67. package/dist/app/assets/script/api/youtube.d.ts +8 -0
  68. package/dist/app/assets/script/api/youtube.js +22 -0
  69. package/dist/app/assets/script/api/youtube.js.map +1 -0
  70. package/dist/app/assets/script/index.d.ts +2 -0
  71. package/dist/app/assets/script/index.js +2 -0
  72. package/dist/app/assets/script/index.js.map +1 -0
  73. package/dist/app/assets/script/mediator/global.d.ts +4 -0
  74. package/dist/app/assets/script/mediator/global.js +4 -0
  75. package/dist/app/assets/script/mediator/global.js.map +1 -0
  76. package/dist/app/assets/script/model/singletons/countries.d.ts +20 -0
  77. package/dist/app/assets/script/model/singletons/countries.js +5 -0
  78. package/dist/app/assets/script/model/singletons/countries.js.map +1 -0
  79. package/dist/app/assets/script/model/singletons/global.d.ts +20 -0
  80. package/dist/app/assets/script/model/singletons/global.js +5 -0
  81. package/dist/app/assets/script/model/singletons/global.js.map +1 -0
  82. package/dist/app/assets/script/model/singletons/states.d.ts +20 -0
  83. package/dist/app/assets/script/model/singletons/states.js +5 -0
  84. package/dist/app/assets/script/model/singletons/states.js.map +1 -0
  85. package/dist/app/assets/script/model/user.d.ts +4 -0
  86. package/dist/app/assets/script/model/user.js +6 -0
  87. package/dist/app/assets/script/model/user.js.map +1 -0
  88. package/dist/app/assets/script/toolkit.d.ts +1 -0
  89. package/dist/app/assets/script/toolkit.js +7 -0
  90. package/dist/app/assets/script/toolkit.js.map +1 -0
  91. package/dist/app/assets/script/utility/ajax.d.ts +8 -0
  92. package/dist/app/assets/script/utility/ajax.js +17 -0
  93. package/dist/app/assets/script/utility/ajax.js.map +1 -0
  94. package/dist/app/assets/script/utility/form.d.ts +64 -0
  95. package/dist/app/assets/script/utility/form.js +111 -0
  96. package/dist/app/assets/script/utility/form.js.map +1 -0
  97. package/dist/app/assets/script/utility/regex.d.ts +14 -0
  98. package/dist/app/assets/script/utility/regex.js +27 -0
  99. package/dist/app/assets/script/utility/regex.js.map +1 -0
  100. package/dist/app/assets/script/utility/share.d.ts +68 -0
  101. package/dist/app/assets/script/utility/share.js +81 -0
  102. package/dist/app/assets/script/utility/share.js.map +1 -0
  103. package/dist/app/assets/script/utility/string.d.ts +64 -0
  104. package/dist/app/assets/script/utility/string.js +135 -0
  105. package/dist/app/assets/script/utility/string.js.map +1 -0
  106. package/dist/app/assets/script/view/default.d.ts +11 -0
  107. package/dist/app/assets/script/view/default.js +15 -0
  108. package/dist/app/assets/script/view/default.js.map +1 -0
  109. package/dist/app/assets/script/view/toolkit/youtube-player-1.d.ts +23 -0
  110. package/dist/app/assets/script/view/toolkit/youtube-player-1.js +32 -0
  111. package/dist/app/assets/script/view/toolkit/youtube-player-1.js.map +1 -0
  112. package/dist/generators/app/index.d.ts +18 -0
  113. package/dist/generators/app/index.js +59 -0
  114. package/dist/generators/app/index.js.map +1 -0
  115. package/dist/scripts/build.d.ts +22 -0
  116. package/dist/scripts/build.js +158 -0
  117. package/dist/scripts/build.js.map +1 -0
  118. package/generators/app/index.js +2 -43
  119. package/generators/app/index.ts +61 -0
  120. package/package.json +79 -129
  121. package/scripts/build.ts +175 -0
  122. package/tsconfig.site.json +26 -0
  123. package/.babelrc +0 -14
  124. package/.editorconfig +0 -13
  125. package/.eslintrc +0 -64
  126. package/.htmllintrc +0 -6
  127. package/.sass-lint.yml +0 -16
  128. package/.travis.yml +0 -18
  129. package/app/assets/font/opensans/generator_config.txt +0 -5
  130. package/app/assets/font/opensans/opensans-bold-webfont.eot +0 -0
  131. package/app/assets/font/opensans/opensans-bold-webfont.svg +0 -1824
  132. package/app/assets/font/opensans/opensans-bold-webfont.ttf +0 -0
  133. package/app/assets/font/opensans/opensans-bold-webfont.woff +0 -0
  134. package/app/assets/font/opensans/opensans-bolditalic-webfont.eot +0 -0
  135. package/app/assets/font/opensans/opensans-bolditalic-webfont.svg +0 -1824
  136. package/app/assets/font/opensans/opensans-bolditalic-webfont.ttf +0 -0
  137. package/app/assets/font/opensans/opensans-bolditalic-webfont.woff +0 -0
  138. package/app/assets/font/opensans/opensans-extrabold-webfont.eot +0 -0
  139. package/app/assets/font/opensans/opensans-extrabold-webfont.svg +0 -1824
  140. package/app/assets/font/opensans/opensans-extrabold-webfont.ttf +0 -0
  141. package/app/assets/font/opensans/opensans-extrabold-webfont.woff +0 -0
  142. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.eot +0 -0
  143. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.svg +0 -1824
  144. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.ttf +0 -0
  145. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.woff +0 -0
  146. package/app/assets/font/opensans/opensans-italic-webfont.eot +0 -0
  147. package/app/assets/font/opensans/opensans-italic-webfont.svg +0 -1824
  148. package/app/assets/font/opensans/opensans-italic-webfont.ttf +0 -0
  149. package/app/assets/font/opensans/opensans-italic-webfont.woff +0 -0
  150. package/app/assets/font/opensans/opensans-light-webfont.eot +0 -0
  151. package/app/assets/font/opensans/opensans-light-webfont.svg +0 -1824
  152. package/app/assets/font/opensans/opensans-light-webfont.ttf +0 -0
  153. package/app/assets/font/opensans/opensans-light-webfont.woff +0 -0
  154. package/app/assets/font/opensans/opensans-lightitalic-webfont.eot +0 -0
  155. package/app/assets/font/opensans/opensans-lightitalic-webfont.svg +0 -1824
  156. package/app/assets/font/opensans/opensans-lightitalic-webfont.ttf +0 -0
  157. package/app/assets/font/opensans/opensans-lightitalic-webfont.woff +0 -0
  158. package/app/assets/font/opensans/opensans-regular-webfont.eot +0 -0
  159. package/app/assets/font/opensans/opensans-regular-webfont.svg +0 -1824
  160. package/app/assets/font/opensans/opensans-regular-webfont.ttf +0 -0
  161. package/app/assets/font/opensans/opensans-regular-webfont.woff +0 -0
  162. package/app/assets/font/opensans/opensans-semibold-webfont.eot +0 -0
  163. package/app/assets/font/opensans/opensans-semibold-webfont.svg +0 -1824
  164. package/app/assets/font/opensans/opensans-semibold-webfont.ttf +0 -0
  165. package/app/assets/font/opensans/opensans-semibold-webfont.woff +0 -0
  166. package/app/assets/font/opensans/opensans-semibolditalic-webfont.eot +0 -0
  167. package/app/assets/font/opensans/opensans-semibolditalic-webfont.svg +0 -1824
  168. package/app/assets/font/opensans/opensans-semibolditalic-webfont.ttf +0 -0
  169. package/app/assets/font/opensans/opensans-semibolditalic-webfont.woff +0 -0
  170. package/app/assets/font/opensans/specimen_files/grid_12-825-55-15.css +0 -129
  171. package/app/assets/font/opensans/specimen_files/specimen_stylesheet.css +0 -396
  172. package/app/assets/image/demo/large.jpg +0 -0
  173. package/app/assets/image/demo/medium.jpg +0 -0
  174. package/app/assets/image/demo/small.jpg +0 -0
  175. package/app/assets/image/demo/xlarge.jpg +0 -0
  176. package/app/assets/image/demo/xxlarge.jpg +0 -0
  177. package/app/assets/script/api/youtube.js +0 -18
  178. package/app/assets/script/index.js +0 -6
  179. package/app/assets/script/mediator/global.js +0 -5
  180. package/app/assets/script/model/singletons/countries.js +0 -6
  181. package/app/assets/script/model/singletons/global.js +0 -6
  182. package/app/assets/script/model/singletons/states.js +0 -6
  183. package/app/assets/script/model/user.js +0 -5
  184. package/app/assets/script/toolkit.js +0 -12
  185. package/app/assets/script/utility/ajax.js +0 -11
  186. package/app/assets/script/utility/form.js +0 -86
  187. package/app/assets/script/utility/share.js +0 -52
  188. package/app/assets/script/utility/string.js +0 -70
  189. package/app/assets/script/view/default.js +0 -11
  190. package/app/assets/script/view/toolkit/youtube-player-1.js +0 -17
  191. package/app/assets/style/base/vendor/_foundation.scss +0 -2
  192. package/app/assets/test/spec/shareSpec.js +0 -137
  193. package/app/index.html +0 -40
  194. package/app/report/istanbul/base.css +0 -213
  195. package/app/report/istanbul/prettify.css +0 -1
  196. package/app/report/istanbul/prettify.js +0 -1
  197. package/app/report/istanbul/sort-arrow-sprite.png +0 -0
  198. package/app/report/istanbul/sorter.js +0 -158
  199. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.eot +0 -0
  200. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.svg +0 -288
  201. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.ttf +0 -0
  202. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.woff +0 -0
  203. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.woff2 +0 -0
  204. package/app/report/jsdoc/img/glyphicons-halflings-white.png +0 -0
  205. package/app/report/jsdoc/img/glyphicons-halflings.png +0 -0
  206. package/app/report/jsdoc/scripts/docstrap.lib.js +0 -11
  207. package/app/report/jsdoc/scripts/fulltext-search-ui.js +0 -89
  208. package/app/report/jsdoc/scripts/fulltext-search.js +0 -36
  209. package/app/report/jsdoc/scripts/lunr.min.js +0 -6
  210. package/app/report/jsdoc/scripts/prettify/Apache-License-2.0.txt +0 -202
  211. package/app/report/jsdoc/scripts/prettify/jquery.min.js +0 -6
  212. package/app/report/jsdoc/scripts/prettify/lang-css.js +0 -21
  213. package/app/report/jsdoc/scripts/prettify/prettify.js +0 -496
  214. package/app/report/jsdoc/scripts/sunlight.js +0 -1157
  215. package/app/report/jsdoc/scripts/toc.js +0 -203
  216. package/app/report/jsdoc/styles/darkstrap.css +0 -960
  217. package/app/report/jsdoc/styles/prettify-tomorrow.css +0 -132
  218. package/app/report/jsdoc/styles/site.cerulean.css +0 -7008
  219. package/app/report/jsdoc/styles/site.cosmo.css +0 -7061
  220. package/app/report/jsdoc/styles/site.cyborg.css +0 -7048
  221. package/app/report/jsdoc/styles/site.darkly.css +0 -7171
  222. package/app/report/jsdoc/styles/site.darkstrap.css +0 -5638
  223. package/app/report/jsdoc/styles/site.dibs-bootstrap.css +0 -5899
  224. package/app/report/jsdoc/styles/site.flatly.css +0 -7147
  225. package/app/report/jsdoc/styles/site.journal.css +0 -6973
  226. package/app/report/jsdoc/styles/site.lumen.css +0 -7298
  227. package/app/report/jsdoc/styles/site.paper.css +0 -7623
  228. package/app/report/jsdoc/styles/site.readable.css +0 -6997
  229. package/app/report/jsdoc/styles/site.sandstone.css +0 -7035
  230. package/app/report/jsdoc/styles/site.simplex.css +0 -7023
  231. package/app/report/jsdoc/styles/site.slate.css +0 -7343
  232. package/app/report/jsdoc/styles/site.spacelab.css +0 -7055
  233. package/app/report/jsdoc/styles/site.superhero.css +0 -7131
  234. package/app/report/jsdoc/styles/site.united.css +0 -6895
  235. package/app/report/jsdoc/styles/site.yeti.css +0 -7195
  236. package/app/report/jsdoc/styles/sunlight.dark.css +0 -345
  237. package/app/report/jsdoc/styles/sunlight.default.css +0 -344
  238. package/gulp/config.js +0 -224
  239. package/gulp/tasks/accessibility.js +0 -34
  240. package/gulp/tasks/build.js +0 -19
  241. package/gulp/tasks/clean.js +0 -34
  242. package/gulp/tasks/data.js +0 -22
  243. package/gulp/tasks/default.js +0 -9
  244. package/gulp/tasks/deploy.js +0 -225
  245. package/gulp/tasks/documentation.js +0 -25
  246. package/gulp/tasks/markup.js +0 -121
  247. package/gulp/tasks/script.js +0 -92
  248. package/gulp/tasks/style.js +0 -42
  249. package/gulp/tasks/unit.js +0 -38
  250. package/gulp/tasks/watch.js +0 -83
  251. package/gulpfile.js +0 -8
  252. package/jsdoc.json +0 -23
  253. package/karma.conf.js +0 -58
package/app/toolkit/colors.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  <header class="toolkit-header-1">
11
11
  <button aria-expanded="false">main menu toggle</button>
12
12
  <div class="row">
13
- <div class="small-12 columns">
13
+ <div class="col-12">
14
14
  <a href="{{www}}toolkit">Digital Toolkit</a>
15
15
  </div>
16
16
  </div>
@@ -34,45 +34,45 @@
34
34
  <section>
35
35
  <h1 class="toolkit-heading-1">Colors</h1>
36
36
  <div class="row">
37
- <div class="small-12 medium-4 large-2 columns">
37
+ <div class="col-12 col-md-4 col-lg-2">
38
38
  <h2 class="toolkit-heading-3">black-1</h2>
39
39
  <p><span class="toolkit-swatch-1 black-1"></span></p>
40
40
  </div>
41
- <div class="small-12 medium-4 large-2 columns">
41
+ <div class="col-12 col-md-4 col-lg-2">
42
42
  <h2 class="toolkit-heading-3">grey-1</h2>
43
43
  <p><span class="toolkit-swatch-1 grey-1"></span></p>
44
44
  </div>
45
- <div class="small-12 medium-4 large-2 columns">
45
+ <div class="col-12 col-md-4 col-lg-2">
46
46
  <h2 class="toolkit-heading-3">grey-2</h2>
47
47
  <p><span class="toolkit-swatch-1 grey-2"></span></p>
48
48
  </div>
49
- <div class="small-12 medium-4 large-2 columns">
49
+ <div class="col-12 col-md-4 col-lg-2">
50
50
  <h2 class="toolkit-heading-3">grey-3</h2>
51
51
  <p><span class="toolkit-swatch-1 grey-3"></span></p>
52
52
  </div>
53
- <div class="small-12 medium-4 large-2 columns">
53
+ <div class="col-12 col-md-4 col-lg-2">
54
54
  <h2 class="toolkit-heading-3">grey-4</h2>
55
55
  <p><span class="toolkit-swatch-1 grey-4"></span></p>
56
56
  </div>
57
- <div class="small-12 medium-4 large-2 columns">
57
+ <div class="col-12 col-md-4 col-lg-2">
58
58
  <h2 class="toolkit-heading-3">grey-5</h2>
59
59
  <p><span class="toolkit-swatch-1 grey-5"></span></p>
60
60
  </div>
61
- <div class="small-12 medium-4 large-2 columns">
61
+ <div class="col-12 col-md-4 col-lg-2">
62
62
  <h2 class="toolkit-heading-3">grey-6</h2>
63
63
  <p><span class="toolkit-swatch-1 grey-6"></span></p>
64
64
  </div>
65
- <div class="small-12 medium-4 large-2 columns">
65
+ <div class="col-12 col-md-4 col-lg-2">
66
66
  <h2 class="toolkit-heading-3">white-1</h2>
67
67
  <p><span class="toolkit-swatch-1 white-1"></span></p>
68
68
  </div>
69
- <div class="small-12 medium-4 large-2 columns">
69
+ <div class="col-12 col-md-4 col-lg-2">
70
70
  <h2 class="toolkit-heading-3">red-1</h2>
71
71
  <p><span class="toolkit-swatch-1 red-1"></span></p>
72
72
  </div>
73
73
  </div>
74
74
  <div class="row">
75
- <div class="small-12 columns">
75
+ <div class="col-12">
76
76
  <h3 class="toolkit-heading-4">Source Code</h3>
77
77
  <ul class="list-1">
78
78
  <li>style: <a href="{{webRepo}}app/assets/style/base/colors/_colors.scss">_colors.scss</a></li>
package/app/toolkit/components.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  <header class="toolkit-header-1">
11
11
  <button aria-expanded="false">main menu toggle</button>
12
12
  <div class="row">
13
- <div class="small-12 columns">
13
+ <div class="col-12">
14
14
  <a href="{{www}}toolkit">Digital Toolkit</a>
15
15
  </div>
16
16
  </div>
@@ -34,12 +34,12 @@
34
34
  <section>
35
35
  <h1 class="toolkit-heading-1">Components</h1>
36
36
  <div class="row">
37
- <div class="small-12 columns">
37
+ <div class="col-12">
38
38
  <h2 class="toolkit-heading-2">Forms</h2>
39
39
  </div>
40
40
  </div>
41
41
  <div class="row">
42
- <div class="small-12 medium-7 columns">
42
+ <div class="col-12 col-md-7">
43
43
  <h3 class="toolkit-heading-3">form-1</h3>
44
44
  <form class="form-1" id="form-1-example" name="form-1-example">
45
45
  <fieldset class="fieldset-1">
@@ -68,7 +68,7 @@
68
68
  <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/components/form-1.js">form-1.js</a></li>
69
69
  </ul>
70
70
  </div>
71
- <aside class="small-12 medium-5 columns">
71
+ <aside class="col-12 col-md-5">
72
72
  <h3 class="toolkit-heading-3">Accessibility</h3>
73
73
  <h4 class="toolkit-heading-4">Gherkin</h4>
74
74
  <div class="toolkit-gherkin-1">
@@ -84,12 +84,12 @@
84
84
  </div>
85
85
  <hr class="toolkit-rule-1">
86
86
  <div class="row">
87
- <div class="small-12 columns">
87
+ <div class="col-12">
88
88
  <h2 class="toolkit-heading-2">Modals</h2>
89
89
  </div>
90
90
  </div>
91
91
  <div class="row">
92
- <div class="small-12 medium-7 columns">
92
+ <div class="col-12 col-md-7">
93
93
  <h3 class="toolkit-heading-3">modal-1</h3>
94
94
  <p><button class="button-1" data-modal-open="modal-example-1">view disclosures</button></p>
95
95
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -98,7 +98,7 @@
98
98
  <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/components/modal-open-1.js">modal-open-1.js</a>, <a href="{{webRepo}}app/assets/script/view/toolkit/components/modal-1.js">modal-1.js</a></li>
99
99
  </ul>
100
100
  </div>
101
- <aside class="small-12 medium-5 columns">
101
+ <aside class="col-12 col-md-5">
102
102
  <h3 class="toolkit-heading-3">Accessibility</h3>
103
103
  <h4 class="toolkit-heading-4">Gherkin</h4>
104
104
  <div class="toolkit-gherkin-1">
@@ -116,12 +116,12 @@
116
116
  </div>
117
117
  <hr class="toolkit-rule-1">
118
118
  <div class="row">
119
- <div class="small-12 columns">
119
+ <div class="col-12">
120
120
  <h2 class="toolkit-heading-2">Tab Panels</h2>
121
121
  </div>
122
122
  </div>
123
123
  <div class="row">
124
- <div class="small-12 medium-7 columns">
124
+ <div class="col-12 col-md-7">
125
125
  <h3 class="toolkit-heading-3">tabpanel-1</h3>
126
126
  <div class="tabpanel-1">
127
127
  <ul role="tablist">
@@ -167,7 +167,7 @@
167
167
  <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/components/tabpanel-1.js">tabpanel-1.js</a></li>
168
168
  </ul>
169
169
  </div>
170
- <aside class="small-12 medium-5 columns">
170
+ <aside class="col-12 col-md-5">
171
171
  <h3 class="toolkit-heading-3">Accessibility</h3>
172
172
  <h4 class="toolkit-heading-4">Gherkin</h4>
173
173
  <div class="toolkit-gherkin-1">
@@ -186,12 +186,12 @@
186
186
  </div>
187
187
  <hr class="toolkit-rule-1">
188
188
  <div class="row">
189
- <div class="small-12 columns">
189
+ <div class="col-12">
190
190
  <h2 class="toolkit-heading-2">Accessible Ajax</h2>
191
191
  </div>
192
192
  </div>
193
193
  <div class="row">
194
- <div class="small-12 medium-7 columns">
194
+ <div class="col-12 col-md-7">
195
195
  <h3 class="toolkit-heading-3">accessiblity-ajax-1</h3>
196
196
  <p><button id="accessible-ajax-example-button" class="button-1">click to load asynchronous content</button></p>
197
197
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -199,7 +199,7 @@
199
199
  <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/utilities/accessiblity-ajax-1.js">accessiblity-ajax-1.js</a>, <a href="{{webRepo}}app/assets/script/view/toolkit/utilities/accessiblity-speaker-1.js">accessiblity-speaker-1.js</a></li>
200
200
  </ul>
201
201
  </div>
202
- <aside class="small-12 medium-5 columns">
202
+ <aside class="col-12 col-md-5">
203
203
  <h3 class="toolkit-heading-3">Accessibility</h3>
204
204
  <h4 class="toolkit-heading-4">Gherkin</h4>
205
205
  <div class="toolkit-gherkin-1">
@@ -214,12 +214,12 @@
214
214
  </div>
215
215
  <hr class="toolkit-rule-1">
216
216
  <div class="row">
217
- <div class="small-12 columns">
217
+ <div class="col-12">
218
218
  <h2 class="toolkit-heading-2">Video Players</h2>
219
219
  </div>
220
220
  </div>
221
221
  <div class="row">
222
- <div class="small-12 medium-7 columns">
222
+ <div class="col-12 col-md-7">
223
223
  <h3 class="toolkit-heading-3">youtube-player-1</h3>
224
224
  {{> toolkit/youtube-player-1 widescreen=true}}
225
225
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -227,7 +227,7 @@
227
227
  <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/api/youtube-api-1.js">youtube-api-1.js</a>, <a href="{{webRepo}}app/assets/script/view/toolkit/components/youtube-player-1.js">youtube-player-1.js</a></li>
228
228
  </ul>
229
229
  </div>
230
- <aside class="small-12 medium-5 columns">
230
+ <aside class="col-12 col-md-5">
231
231
  <h3 class="toolkit-heading-3">Accessibility</h3>
232
232
  <h4 class="toolkit-heading-4">Gherkin</h4>
233
233
  <div class="toolkit-gherkin-1">
package/app/toolkit/elements.hbs CHANGED
@@ -10,7 +10,7 @@
10
10
  <header class="toolkit-header-1">
11
11
  <button aria-expanded="false">main menu toggle</button>
12
12
  <div class="row">
13
- <div class="small-12 columns">
13
+ <div class="col-12">
14
14
  <a href="{{www}}toolkit">Digital Toolkit</a>
15
15
  </div>
16
16
  </div>
@@ -34,12 +34,12 @@
34
34
  <section>
35
35
  <h1 class="toolkit-heading-1">Elements</h1>
36
36
  <div class="row">
37
- <div class="small-12 columns">
37
+ <div class="col-12">
38
38
  <h2 class="toolkit-heading-2">Anchors</h2>
39
39
  </div>
40
40
  </div>
41
41
  <div class="row">
42
- <div class="small-12 medium-8 columns">
42
+ <div class="col-12 col-md-8">
43
43
  <h3 class="toolkit-heading-3">anchor-1</h3>
44
44
  <p>{{> toolkit/anchor-1 id='anchor-1' title='detailed information about this product' url='#'}}</p>
45
45
  <p>example of helper text only for screen readers:</p>
@@ -50,7 +50,7 @@
50
50
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_anchors.scss">_anchors.scss</a></li>
51
51
  </ul>
52
52
  </div>
53
- <aside class="small-12 medium-4 columns">
53
+ <aside class="col-12 col-md-4">
54
54
  <h3 class="toolkit-heading-3">Accessibility with Anchors</h3>
55
55
  <h4 class="toolkit-heading-4">Usage</h4>
56
56
  <ul class="list-1">
@@ -72,12 +72,12 @@
72
72
  </div>
73
73
  <hr class="toolkit-rule-1">
74
74
  <div class="row">
75
- <div class="small-12 columns">
75
+ <div class="col-12">
76
76
  <h2 class="toolkit-heading-2">Buttons</h2>
77
77
  </div>
78
78
  </div>
79
79
  <div class="row">
80
- <div class="small-12 medium-8 columns">
80
+ <div class="col-12 col-md-8">
81
81
  <h3 class="toolkit-heading-3">button-1</h3>
82
82
  <p>{{> toolkit/button-1 id='button-1' title='detailed information about this product'}}</p>
83
83
  <p>example of helper text only for screen readers:</p>
@@ -88,7 +88,7 @@
88
88
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_buttons.scss">_buttons.scss</a></li>
89
89
  </ul>
90
90
  </div>
91
- <aside class="small-12 medium-4 columns">
91
+ <aside class="col-12 col-md-4">
92
92
  <h3 class="toolkit-heading-3">Accessibility with Buttons</h3>
93
93
  <h4 class="toolkit-heading-4">Usage</h4>
94
94
  <ul class="list-1">
@@ -109,12 +109,12 @@
109
109
  </div>
110
110
  <hr class="toolkit-rule-1">
111
111
  <div class="row">
112
- <div class="small-12 columns">
112
+ <div class="col-12">
113
113
  <h2 class="toolkit-heading-2">Labels</h2>
114
114
  </div>
115
115
  </div>
116
116
  <div class="row">
117
- <div class="small-12 medium-8 columns">
117
+ <div class="col-12 col-md-8">
118
118
  <h3 class="toolkit-heading-3">label-1</h3>
119
119
  <p>{{> toolkit/label-1 id='label-1' title='Name' for='label-example-input'}}</p>
120
120
  <p>{{> toolkit/input-text-1 id='label-example-input' placeholder='first and last name' type='text'}}</p>
@@ -124,7 +124,7 @@
124
124
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_labels.scss">_labels.scss</a></li>
125
125
  </ul>
126
126
  </div>
127
- <aside class="small-12 medium-4 columns">
127
+ <aside class="col-12 col-md-4">
128
128
  <h3 class="toolkit-heading-3">Accessibility with Labels</h3>
129
129
  <h4 class="toolkit-heading-4">Gherkin</h4>
130
130
  <div class="toolkit-gherkin-1">
@@ -136,12 +136,12 @@
136
136
  </div>
137
137
  <hr class="toolkit-rule-1">
138
138
  <div class="row">
139
- <div class="small-12 columns">
139
+ <div class="col-12">
140
140
  <h2 class="toolkit-heading-2">Legends</h2>
141
141
  </div>
142
142
  </div>
143
143
  <div class="row">
144
- <div class="small-12 medium-8 columns">
144
+ <div class="col-12 col-md-8">
145
145
  <h3 class="toolkit-heading-3">legend-1</h3>
146
146
  <p>{{> toolkit/legend-1 title='Shipping Information'}}</p>
147
147
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -150,7 +150,7 @@
150
150
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_legends.scss">_legends.scss</a></li>
151
151
  </ul>
152
152
  </div>
153
- <aside class="small-12 medium-4 columns">
153
+ <aside class="col-12 col-md-4">
154
154
  <h3 class="toolkit-heading-3">Accessibility with Legends</h3>
155
155
  <h4 class="toolkit-heading-4">Gherkin</h4>
156
156
  <div class="toolkit-gherkin-1">
@@ -162,12 +162,12 @@
162
162
  </div>
163
163
  <hr class="toolkit-rule-1">
164
164
  <div class="row">
165
- <div class="small-12 columns">
165
+ <div class="col-12">
166
166
  <h2 class="toolkit-heading-2">Lists</h2>
167
167
  </div>
168
168
  </div>
169
169
  <div class="row">
170
- <div class="small-12 medium-8 columns">
170
+ <div class="col-12 col-md-8">
171
171
  <h3 class="toolkit-heading-3">list-1</h3>
172
172
  {{> toolkit/list-1 elements.list-1}}
173
173
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -176,7 +176,7 @@
176
176
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_lists.scss">_lists.scss</a></li>
177
177
  </ul>
178
178
  </div>
179
- <aside class="small-12 medium-4 columns">
179
+ <aside class="col-12 col-md-4">
180
180
  <h3 class="toolkit-heading-3">Accessibility with Lists</h3>
181
181
  <h4 class="toolkit-heading-4">Gherkin</h4>
182
182
  <div class="toolkit-gherkin-1">
@@ -195,12 +195,12 @@
195
195
  </div>
196
196
  <hr class="toolkit-rule-1">
197
197
  <div class="row">
198
- <div class="small-12 columns">
198
+ <div class="col-12">
199
199
  <h2 class="toolkit-heading-2">Input Checkboxes</h2>
200
200
  </div>
201
201
  </div>
202
202
  <div class="row">
203
- <div class="small-12 medium-8 columns">
203
+ <div class="col-12 col-md-8">
204
204
  <h3 class="toolkit-heading-3">input-checkbox-1</h3>
205
205
  <p>{{> toolkit/label-1 title='Opt me in' for='input-checkbox-1-example'}}</p>
206
206
  <p>{{> toolkit/input-checkbox-1 id='input-checkbox-1-example' name='checkbox-example' checked=true}}</p>
@@ -210,7 +210,7 @@
210
210
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
211
211
  </ul>
212
212
  </div>
213
- <aside class="small-12 medium-4 columns">
213
+ <aside class="col-12 col-md-4">
214
214
  <h3 class="toolkit-heading-3">Accessibility with Checkboxes</h3>
215
215
  <h4 class="toolkit-heading-4">Gherkin</h4>
216
216
  <div class="toolkit-gherkin-1">
@@ -232,12 +232,12 @@
232
232
  </div>
233
233
  <hr class="toolkit-rule-1">
234
234
  <div class="row">
235
- <div class="small-12 columns">
235
+ <div class="col-12">
236
236
  <h2 class="toolkit-heading-2">Input Radio Buttons</h2>
237
237
  </div>
238
238
  </div>
239
239
  <div class="row">
240
- <div class="small-12 medium-8 columns">
240
+ <div class="col-12 col-md-8">
241
241
  <h3 class="toolkit-heading-3">input-radio-1</h3>
242
242
  <p id="radio-group-label">What color do you want?</p>
243
243
  <p>{{> toolkit/label-1 title='red' for='input-radio-1-example-1'}}</p>
@@ -250,7 +250,7 @@
250
250
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
251
251
  </ul>
252
252
  </div>
253
- <aside class="small-12 medium-4 columns">
253
+ <aside class="col-12 col-md-4">
254
254
  <h3 class="toolkit-heading-3">Accessibility with Radio Buttons</h3>
255
255
  <h4 class="toolkit-heading-4">Gherkin</h4>
256
256
  <div class="toolkit-gherkin-1">
@@ -272,12 +272,12 @@
272
272
  </div>
273
273
  <hr class="toolkit-rule-1">
274
274
  <div class="row">
275
- <div class="small-12 columns">
275
+ <div class="col-12">
276
276
  <h2 class="toolkit-heading-2">Input Text Boxes</h2>
277
277
  </div>
278
278
  </div>
279
279
  <div class="row">
280
- <div class="small-12 medium-8 columns">
280
+ <div class="col-12 col-md-8">
281
281
  <h3 class="toolkit-heading-3">input-text-1</h3>
282
282
  <p>{{> toolkit/label-1 title='Name' for='input-text-1-example'}}</p>
283
283
  <p>{{> toolkit/input-text-1 id='input-text-1-example' placeholder='first and last name' type='text'}}</p>
@@ -287,7 +287,7 @@
287
287
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
288
288
  </ul>
289
289
  </div>
290
- <aside class="small-12 medium-4 columns">
290
+ <aside class="col-12 col-md-4">
291
291
  <h3 class="toolkit-heading-3">Accessibility with Text Boxes</h3>
292
292
  <h4 class="toolkit-heading-4">Gherkin</h4>
293
293
  <div class="toolkit-gherkin-1">
@@ -306,12 +306,12 @@
306
306
  </div>
307
307
  <hr class="toolkit-rule-1">
308
308
  <div class="row">
309
- <div class="small-12 columns">
309
+ <div class="col-12">
310
310
  <h2 class="toolkit-heading-2">Textareas</h2>
311
311
  </div>
312
312
  </div>
313
313
  <div class="row">
314
- <div class="small-12 medium-8 columns">
314
+ <div class="col-12 col-md-8">
315
315
  <h3 class="toolkit-heading-3">textarea-1</h3>
316
316
  <p>{{> toolkit/label-1 title='additonal comments:' for='textarea-1-example'}}</p>
317
317
  <p>{{> toolkit/textarea-1 id='textarea-1-example' placeholder='please be detailed'}}</p>
@@ -321,7 +321,7 @@
321
321
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
322
322
  </ul>
323
323
  </div>
324
- <aside class="small-12 medium-4 columns">
324
+ <aside class="col-12 col-md-4">
325
325
  <h3 class="toolkit-heading-3">Accessibility</h3>
326
326
  <h4 class="toolkit-heading-4">Gherkin</h4>
327
327
  <div class="toolkit-gherkin-1">
@@ -340,12 +340,12 @@
340
340
  </div>
341
341
  <hr class="toolkit-rule-1">
342
342
  <div class="row">
343
- <div class="small-12 columns">
343
+ <div class="col-12">
344
344
  <h2 class="toolkit-heading-2">Select Menus</h2>
345
345
  </div>
346
346
  </div>
347
347
  <div class="row">
348
- <div class="small-12 medium-8 columns">
348
+ <div class="col-12 col-md-8">
349
349
  <h3 class="toolkit-heading-3">select-1</h3>
350
350
  <p>{{> toolkit/label-1 title='what type of vehicle do you drive?' for='select-1-example'}}</p>
351
351
  <p>{{> toolkit/select-1 elements.select-1 id='select-1-example'}}</p>
@@ -355,7 +355,7 @@
355
355
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_inputs.scss">_inputs.scss</a></li>
356
356
  </ul>
357
357
  </div>
358
- <aside class="small-12 medium-4 columns">
358
+ <aside class="col-12 col-md-4">
359
359
  <h3 class="toolkit-heading-3">Accessibility</h3>
360
360
  <h4 class="toolkit-heading-4">Gherkin</h4>
361
361
  <div class="toolkit-gherkin-1">
@@ -383,12 +383,12 @@
383
383
  </div>
384
384
  <hr class="toolkit-rule-1">
385
385
  <div class="row">
386
- <div class="small-12 columns">
386
+ <div class="col-12">
387
387
  <h2 class="toolkit-heading-2">Tables</h2>
388
388
  </div>
389
389
  </div>
390
390
  <div class="row">
391
- <div class="small-12 medium-8 columns">
391
+ <div class="col-12 col-md-8">
392
392
  <h3 class="toolkit-heading-3">table-1</h3>
393
393
  {{> toolkit/table-1 elements.table-1}}
394
394
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -397,14 +397,14 @@
397
397
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_tables.scss">_tables.scss</a></li>
398
398
  </ul>
399
399
  </div>
400
- <aside class="small-12 medium-4 columns">
400
+ <aside class="col-12 col-md-4">
401
401
  <h3 class="toolkit-heading-3">Accessibility</h3>
402
402
  <h4 class="toolkit-heading-4">Gherkin</h4>
403
403
  <div class="toolkit-gherkin-1">
404
404
  <p>GIVEN I am a screen reader user<br>
405
405
  WHEN I navigate to a table with the tab key<br>
406
406
  THEN I will hear table caption<br>
407
- AND I will hear the number of columns and number of rows</p>
407
+ AND I will hear the number of and number of rows</p>
408
408
  <p>GIVEN I am a screen reader user<br>
409
409
  WHEN I navigate from cell to cell using Control + Alt + arrow keys<br>
410
410
  THEN I need to hear the table headers</p>
@@ -413,20 +413,29 @@
413
413
  </div>
414
414
  <hr class="toolkit-rule-1">
415
415
  <div class="row">
416
- <div class="small-12 columns">
416
+ <div class="col-12">
417
417
  <h2 class="toolkit-heading-2">Pictures</h2>
418
418
  </div>
419
419
  </div>
420
420
  <div class="row">
421
- <div class="small-12 medium-8 columns">
421
+ <div class="col-12 col-md-8">
422
422
  <h3 class="toolkit-heading-3">picture-1</h3>
423
423
  <p>{{> toolkit/picture-1
424
424
  imageFallback='assets/image/demo/fallback.jpg'
425
- imageSmall='assets/image/demo/small.jpg'
426
- imageMedium='assets/image/demo/medium.jpg'
427
- imageLarge='assets/image/demo/large.jpg'
428
- imageXLarge='assets/image/demo/xlarge.jpg'
429
- imageXXLarge='assets/image/demo/xxlarge.jpg'
425
+ imageSmallAvif='assets/image/demo/small.avif'
426
+ imageSmallWebp='assets/image/demo/small.webp'
427
+ imageMediumAvif='assets/image/demo/fallback.avif'
428
+ imageMediumWebp='assets/image/demo/fallback.webp'
429
+ imageLargeAvif='assets/image/demo/large.avif'
430
+ imageLargeWebp='assets/image/demo/large.webp'
431
+ imageXLargeAvif='assets/image/demo/large.avif'
432
+ imageXLargeWebp='assets/image/demo/large.webp'
433
+ imageXXLargeAvif='assets/image/demo/large.avif'
434
+ imageXXLargeWebp='assets/image/demo/large.webp'
435
+ width='2048'
436
+ height='1600'
437
+ loading='lazy'
438
+ decoding='async'
430
439
  alt='image example alternative text'
431
440
  }}</p>
432
441
  <h4 class="toolkit-heading-4">Source Code</h4>
@@ -435,7 +444,7 @@
435
444
  <li>style: <a href="{{webRepo}}app/assets/style/base/elements/_images.scss">_images.scss</a></li>
436
445
  </ul>
437
446
  </div>
438
- <aside class="small-12 medium-4 columns">
447
+ <aside class="col-12 col-md-4">
439
448
  <h3 class="toolkit-heading-3">Accessibility</h3>
440
449
  <h4 class="toolkit-heading-4">Gherkin</h4>
441
450
  <p><strong>active/actionable pictures:</strong></p>