generator-white-label 3.0.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 (334) hide show
  1. package/README.md +140 -81
  2. package/app/404.hbs +20 -0
  3. package/app/README.md +19 -0
  4. package/app/assets/data/view/toolkit/colors.json +17 -0
  5. package/app/assets/data/view/toolkit/components.json +39 -0
  6. package/app/assets/data/view/toolkit/elements.json +119 -0
  7. package/app/assets/data/view/toolkit/grids.json +17 -0
  8. package/app/assets/data/view/toolkit/icons.json +17 -0
  9. package/app/assets/data/view/toolkit/index.json +17 -0
  10. package/app/assets/data/view/toolkit/type.json +17 -0
  11. package/app/assets/font/opensans/stylesheet.css +20 -60
  12. package/app/assets/image/demo/fallback.avif +0 -0
  13. package/app/assets/image/demo/fallback.jpg +0 -0
  14. package/app/assets/image/demo/fallback.webp +0 -0
  15. package/app/assets/image/demo/large.avif +0 -0
  16. package/app/assets/image/demo/large.webp +0 -0
  17. package/app/assets/image/demo/small.avif +0 -0
  18. package/app/assets/image/demo/small.webp +0 -0
  19. package/app/assets/markup/element/a.hbs +29 -0
  20. package/app/assets/markup/element/button.hbs +30 -0
  21. package/app/assets/markup/element/div.hbs +11 -0
  22. package/app/assets/markup/element/head.hbs +78 -0
  23. package/app/assets/markup/element/iframe.hbs +20 -0
  24. package/app/assets/markup/element/img.hbs +30 -0
  25. package/app/assets/markup/element/input.hbs +43 -0
  26. package/app/assets/markup/element/label.hbs +14 -0
  27. package/app/assets/markup/element/legend.hbs +5 -0
  28. package/app/assets/markup/element/meta.hbs +11 -0
  29. package/app/assets/markup/element/nav.hbs +13 -0
  30. package/app/assets/markup/element/p.hbs +8 -0
  31. package/app/assets/markup/element/picture.hbs +58 -0
  32. package/app/assets/markup/element/script.hbs +3 -0
  33. package/app/assets/markup/element/select.hbs +35 -0
  34. package/app/assets/markup/element/span.hbs +8 -0
  35. package/app/assets/markup/element/svg.hbs +11 -0
  36. package/app/assets/markup/element/table.hbs +50 -0
  37. package/app/assets/markup/element/textarea.hbs +24 -0
  38. package/app/assets/markup/element/ul.hbs +13 -0
  39. package/app/assets/markup/modal/modal-example-1.handlebars +8 -0
  40. package/app/assets/markup/toolkit/accessibility-skip-to-element-1.handlebars +1 -0
  41. package/app/assets/markup/toolkit/accessibility-speaker-1.handlebars +1 -0
  42. package/app/assets/markup/toolkit/anchor-1.handlebars +1 -0
  43. package/app/assets/markup/toolkit/button-1.handlebars +1 -0
  44. package/app/assets/markup/toolkit/footer-1.handlebars +3 -0
  45. package/app/assets/markup/toolkit/header-1.handlebars +1 -0
  46. package/app/assets/markup/toolkit/heading-1.handlebars +1 -0
  47. package/app/assets/markup/toolkit/heading-2.handlebars +1 -0
  48. package/app/assets/markup/toolkit/heading-3.handlebars +1 -0
  49. package/app/assets/markup/toolkit/heading-4.handlebars +1 -0
  50. package/app/assets/markup/toolkit/image-1.handlebars +1 -0
  51. package/app/assets/markup/toolkit/input-checkbox-1.handlebars +1 -0
  52. package/app/assets/markup/toolkit/input-error-1.handlebars +8 -0
  53. package/app/assets/markup/toolkit/input-radio-1.handlebars +1 -0
  54. package/app/assets/markup/toolkit/input-text-1.handlebars +1 -0
  55. package/app/assets/markup/toolkit/label-1.handlebars +1 -0
  56. package/app/assets/markup/toolkit/legend-1.handlebars +1 -0
  57. package/app/assets/markup/toolkit/list-1.handlebars +1 -0
  58. package/app/assets/markup/toolkit/modal-1.handlebars +4 -0
  59. package/app/assets/markup/toolkit/nav-1.handlebars +1 -0
  60. package/app/assets/markup/toolkit/picture-1.handlebars +1 -0
  61. package/app/assets/markup/toolkit/select-1.handlebars +1 -0
  62. package/app/assets/markup/toolkit/table-1.handlebars +1 -0
  63. package/app/assets/markup/toolkit/text-1.handlebars +1 -0
  64. package/app/assets/markup/toolkit/textarea-1.handlebars +1 -0
  65. package/app/assets/markup/toolkit/youtube-player-1.handlebars +1 -0
  66. package/app/assets/script/api/facebook.ts +41 -0
  67. package/app/assets/script/api/youtube.ts +22 -0
  68. package/app/assets/script/index.ts +2 -0
  69. package/app/assets/script/mediator/global.ts +4 -0
  70. package/app/assets/script/model/singletons/countries.ts +5 -0
  71. package/app/assets/script/model/singletons/global.ts +5 -0
  72. package/app/assets/script/model/singletons/states.ts +5 -0
  73. package/app/assets/script/model/user.ts +4 -0
  74. package/app/assets/script/toolkit.ts +11 -0
  75. package/app/assets/script/types.d.ts +16 -0
  76. package/app/assets/script/utility/ajax.ts +15 -0
  77. package/app/assets/script/utility/form.ts +119 -0
  78. package/app/assets/script/utility/{regex.js → regex.ts} +15 -6
  79. package/app/assets/script/utility/share.ts +77 -0
  80. package/app/assets/script/utility/string.ts +148 -0
  81. package/app/assets/script/view/default.tsx +14 -0
  82. package/app/assets/script/view/toolkit/youtube-player-1.ts +31 -0
  83. package/app/assets/style/base/_toolkit.scss +31 -15
  84. package/app/assets/style/base/components/_modal-1.scss +80 -0
  85. package/app/assets/style/base/components/_sticky-1.scss +19 -0
  86. package/app/assets/style/base/components/_tabpanel-1.scss +115 -0
  87. package/app/assets/style/base/components/_tabpanel-2.scss +64 -0
  88. package/app/assets/style/base/components/_tabpanel-base-1.scss +13 -0
  89. package/app/assets/style/base/components/_youtube-player-1.scss +16 -0
  90. package/app/assets/style/base/elements/_anchors.scss +12 -0
  91. package/app/assets/style/base/elements/_buttons.scss +15 -0
  92. package/app/assets/style/base/elements/_fieldsets.scss +9 -0
  93. package/app/assets/style/base/elements/_images.scss +6 -2
  94. package/app/assets/style/base/elements/_inputs.scss +70 -0
  95. package/app/assets/style/base/elements/_labels.scss +8 -0
  96. package/app/assets/style/base/elements/_landmarks.scss +3 -0
  97. package/app/assets/style/base/elements/_legends.scss +11 -0
  98. package/app/assets/style/base/elements/_lists.scss +8 -1
  99. package/app/assets/style/base/elements/_tables.scss +32 -1
  100. package/app/assets/style/base/layouts/_staggered-1.scss +29 -0
  101. package/app/assets/style/base/type/_fonts.scss +39 -1
  102. package/app/assets/style/base/type/_headings.scss +29 -0
  103. package/app/assets/style/base/type/_text.scss +2 -0
  104. package/app/assets/style/base/utilities/_accessibility.scss +5 -2
  105. package/app/assets/style/base/utilities/_functions.scss +62 -9
  106. package/app/assets/style/global.scss +108 -10
  107. package/app/assets/style/print.scss +2 -3
  108. package/app/assets/style/toolkit.scss +387 -0
  109. package/app/index.hbs +21 -0
  110. package/app/package.json +1 -0
  111. package/app/toolkit/colors.hbs +102 -0
  112. package/app/toolkit/components.hbs +261 -0
  113. package/app/toolkit/elements.hbs +497 -0
  114. package/app/toolkit/grids.hbs +413 -0
  115. package/app/toolkit/icons.hbs +87 -0
  116. package/app/toolkit/index.hbs +144 -0
  117. package/app/toolkit/type.hbs +120 -0
  118. package/dist/app/assets/data/coutries.json +992 -0
  119. package/dist/app/assets/data/states.json +204 -0
  120. package/dist/app/assets/script/api/facebook.d.ts +8 -0
  121. package/dist/app/assets/script/api/facebook.js +42 -0
  122. package/dist/app/assets/script/api/facebook.js.map +1 -0
  123. package/dist/app/assets/script/api/youtube.d.ts +8 -0
  124. package/dist/app/assets/script/api/youtube.js +22 -0
  125. package/dist/app/assets/script/api/youtube.js.map +1 -0
  126. package/dist/app/assets/script/index.d.ts +2 -0
  127. package/dist/app/assets/script/index.js +2 -0
  128. package/dist/app/assets/script/index.js.map +1 -0
  129. package/dist/app/assets/script/mediator/global.d.ts +4 -0
  130. package/dist/app/assets/script/mediator/global.js +4 -0
  131. package/dist/app/assets/script/mediator/global.js.map +1 -0
  132. package/dist/app/assets/script/model/singletons/countries.d.ts +20 -0
  133. package/dist/app/assets/script/model/singletons/countries.js +5 -0
  134. package/dist/app/assets/script/model/singletons/countries.js.map +1 -0
  135. package/dist/app/assets/script/model/singletons/global.d.ts +20 -0
  136. package/dist/app/assets/script/model/singletons/global.js +5 -0
  137. package/dist/app/assets/script/model/singletons/global.js.map +1 -0
  138. package/dist/app/assets/script/model/singletons/states.d.ts +20 -0
  139. package/dist/app/assets/script/model/singletons/states.js +5 -0
  140. package/dist/app/assets/script/model/singletons/states.js.map +1 -0
  141. package/dist/app/assets/script/model/user.d.ts +4 -0
  142. package/dist/app/assets/script/model/user.js +6 -0
  143. package/dist/app/assets/script/model/user.js.map +1 -0
  144. package/dist/app/assets/script/toolkit.d.ts +1 -0
  145. package/dist/app/assets/script/toolkit.js +7 -0
  146. package/dist/app/assets/script/toolkit.js.map +1 -0
  147. package/dist/app/assets/script/utility/ajax.d.ts +8 -0
  148. package/dist/app/assets/script/utility/ajax.js +17 -0
  149. package/dist/app/assets/script/utility/ajax.js.map +1 -0
  150. package/dist/app/assets/script/utility/form.d.ts +64 -0
  151. package/dist/app/assets/script/utility/form.js +111 -0
  152. package/dist/app/assets/script/utility/form.js.map +1 -0
  153. package/dist/app/assets/script/utility/regex.d.ts +14 -0
  154. package/dist/app/assets/script/utility/regex.js +27 -0
  155. package/dist/app/assets/script/utility/regex.js.map +1 -0
  156. package/dist/app/assets/script/utility/share.d.ts +68 -0
  157. package/dist/app/assets/script/utility/share.js +81 -0
  158. package/dist/app/assets/script/utility/share.js.map +1 -0
  159. package/dist/app/assets/script/utility/string.d.ts +64 -0
  160. package/dist/app/assets/script/utility/string.js +135 -0
  161. package/dist/app/assets/script/utility/string.js.map +1 -0
  162. package/dist/app/assets/script/view/default.d.ts +11 -0
  163. package/dist/app/assets/script/view/default.js +15 -0
  164. package/dist/app/assets/script/view/default.js.map +1 -0
  165. package/dist/app/assets/script/view/toolkit/youtube-player-1.d.ts +23 -0
  166. package/dist/app/assets/script/view/toolkit/youtube-player-1.js +32 -0
  167. package/dist/app/assets/script/view/toolkit/youtube-player-1.js.map +1 -0
  168. package/dist/generators/app/index.d.ts +18 -0
  169. package/dist/generators/app/index.js +59 -0
  170. package/dist/generators/app/index.js.map +1 -0
  171. package/dist/scripts/build.d.ts +22 -0
  172. package/dist/scripts/build.js +158 -0
  173. package/dist/scripts/build.js.map +1 -0
  174. package/generators/app/index.js +2 -43
  175. package/generators/app/index.ts +61 -0
  176. package/package.json +78 -109
  177. package/scripts/build.ts +175 -0
  178. package/tsconfig.site.json +26 -0
  179. package/.babelrc +0 -7
  180. package/.editorconfig +0 -13
  181. package/.eslintrc +0 -64
  182. package/.htmllintrc +0 -6
  183. package/.npmignore +0 -12
  184. package/.sass-lint.yml +0 -16
  185. package/.travis.yml +0 -18
  186. package/app/assets/font/opensans/generator_config.txt +0 -5
  187. package/app/assets/font/opensans/opensans-bold-webfont.eot +0 -0
  188. package/app/assets/font/opensans/opensans-bold-webfont.svg +0 -1824
  189. package/app/assets/font/opensans/opensans-bold-webfont.ttf +0 -0
  190. package/app/assets/font/opensans/opensans-bold-webfont.woff +0 -0
  191. package/app/assets/font/opensans/opensans-bolditalic-webfont.eot +0 -0
  192. package/app/assets/font/opensans/opensans-bolditalic-webfont.svg +0 -1824
  193. package/app/assets/font/opensans/opensans-bolditalic-webfont.ttf +0 -0
  194. package/app/assets/font/opensans/opensans-bolditalic-webfont.woff +0 -0
  195. package/app/assets/font/opensans/opensans-extrabold-webfont.eot +0 -0
  196. package/app/assets/font/opensans/opensans-extrabold-webfont.svg +0 -1824
  197. package/app/assets/font/opensans/opensans-extrabold-webfont.ttf +0 -0
  198. package/app/assets/font/opensans/opensans-extrabold-webfont.woff +0 -0
  199. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.eot +0 -0
  200. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.svg +0 -1824
  201. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.ttf +0 -0
  202. package/app/assets/font/opensans/opensans-extrabolditalic-webfont.woff +0 -0
  203. package/app/assets/font/opensans/opensans-italic-webfont.eot +0 -0
  204. package/app/assets/font/opensans/opensans-italic-webfont.svg +0 -1824
  205. package/app/assets/font/opensans/opensans-italic-webfont.ttf +0 -0
  206. package/app/assets/font/opensans/opensans-italic-webfont.woff +0 -0
  207. package/app/assets/font/opensans/opensans-light-webfont.eot +0 -0
  208. package/app/assets/font/opensans/opensans-light-webfont.svg +0 -1824
  209. package/app/assets/font/opensans/opensans-light-webfont.ttf +0 -0
  210. package/app/assets/font/opensans/opensans-light-webfont.woff +0 -0
  211. package/app/assets/font/opensans/opensans-lightitalic-webfont.eot +0 -0
  212. package/app/assets/font/opensans/opensans-lightitalic-webfont.svg +0 -1824
  213. package/app/assets/font/opensans/opensans-lightitalic-webfont.ttf +0 -0
  214. package/app/assets/font/opensans/opensans-lightitalic-webfont.woff +0 -0
  215. package/app/assets/font/opensans/opensans-regular-webfont.eot +0 -0
  216. package/app/assets/font/opensans/opensans-regular-webfont.svg +0 -1824
  217. package/app/assets/font/opensans/opensans-regular-webfont.ttf +0 -0
  218. package/app/assets/font/opensans/opensans-regular-webfont.woff +0 -0
  219. package/app/assets/font/opensans/opensans-semibold-webfont.eot +0 -0
  220. package/app/assets/font/opensans/opensans-semibold-webfont.svg +0 -1824
  221. package/app/assets/font/opensans/opensans-semibold-webfont.ttf +0 -0
  222. package/app/assets/font/opensans/opensans-semibold-webfont.woff +0 -0
  223. package/app/assets/font/opensans/opensans-semibolditalic-webfont.eot +0 -0
  224. package/app/assets/font/opensans/opensans-semibolditalic-webfont.svg +0 -1824
  225. package/app/assets/font/opensans/opensans-semibolditalic-webfont.ttf +0 -0
  226. package/app/assets/font/opensans/opensans-semibolditalic-webfont.woff +0 -0
  227. package/app/assets/font/opensans/specimen_files/grid_12-825-55-15.css +0 -129
  228. package/app/assets/font/opensans/specimen_files/specimen_stylesheet.css +0 -396
  229. package/app/assets/script/index.js +0 -11
  230. package/app/assets/script/mediator/global.js +0 -5
  231. package/app/assets/script/model/singletons/countries.js +0 -6
  232. package/app/assets/script/model/singletons/global.js +0 -6
  233. package/app/assets/script/model/singletons/states.js +0 -6
  234. package/app/assets/script/model/user.js +0 -5
  235. package/app/assets/script/utility/form.js +0 -86
  236. package/app/assets/script/utility/share.js +0 -52
  237. package/app/assets/script/utility/string.js +0 -70
  238. package/app/assets/script/view/default.js +0 -11
  239. package/app/assets/style/base/vendor/_foundation.scss +0 -2
  240. package/app/assets/test/spec/shareSpec.js +0 -137
  241. package/app/index.html +0 -43
  242. package/app/report/istanbul/base.css +0 -213
  243. package/app/report/istanbul/index.html +0 -93
  244. package/app/report/istanbul/prettify.css +0 -1
  245. package/app/report/istanbul/prettify.js +0 -1
  246. package/app/report/istanbul/sort-arrow-sprite.png +0 -0
  247. package/app/report/istanbul/sorter.js +0 -158
  248. package/app/report/istanbul/utility/form.js.html +0 -524
  249. package/app/report/istanbul/utility/index.html +0 -132
  250. package/app/report/istanbul/utility/regex.js.html +0 -203
  251. package/app/report/istanbul/utility/share.js.html +0 -401
  252. package/app/report/istanbul/utility/string.js.html +0 -446
  253. package/app/report/jsdoc/DragEvent.html +0 -303
  254. package/app/report/jsdoc/Event.html +0 -773
  255. package/app/report/jsdoc/EventPropagators.html +0 -336
  256. package/app/report/jsdoc/FocusEvent.html +0 -303
  257. package/app/report/jsdoc/ForEachBookKeeping.html +0 -425
  258. package/app/report/jsdoc/KeyboardEvent.html +0 -303
  259. package/app/report/jsdoc/MapBookKeeping.html +0 -457
  260. package/app/report/jsdoc/MouseEvent.html +0 -303
  261. package/app/report/jsdoc/ReactClass.html +0 -330
  262. package/app/report/jsdoc/ReactClassInterface.html +0 -311
  263. package/app/report/jsdoc/ReactDOMComponent.html +0 -349
  264. package/app/report/jsdoc/ReactDOMTextComponent.html +0 -348
  265. package/app/report/jsdoc/ReactMountReady.html +0 -340
  266. package/app/report/jsdoc/ReactMultiChild.html +0 -330
  267. package/app/report/jsdoc/ReactOwner.html +0 -351
  268. package/app/report/jsdoc/ReactReconcileTransaction.html +0 -342
  269. package/app/report/jsdoc/ReactServerRenderingTransaction.html +0 -376
  270. package/app/report/jsdoc/ReactServerUpdateQueue.html +0 -382
  271. package/app/report/jsdoc/TouchEvent.html +0 -303
  272. package/app/report/jsdoc/Transaction.html +0 -459
  273. package/app/report/jsdoc/UIEvent.html +0 -303
  274. package/app/report/jsdoc/WheelEvent.html +0 -303
  275. package/app/report/jsdoc/classes.list.html +0 -339
  276. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.eot +0 -0
  277. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.svg +0 -288
  278. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.ttf +0 -0
  279. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.woff +0 -0
  280. package/app/report/jsdoc/fonts/glyphicons-halflings-regular.woff2 +0 -0
  281. package/app/report/jsdoc/global.html +0 -1653
  282. package/app/report/jsdoc/img/glyphicons-halflings-white.png +0 -0
  283. package/app/report/jsdoc/img/glyphicons-halflings.png +0 -0
  284. package/app/report/jsdoc/index.html +0 -236
  285. package/app/report/jsdoc/interfaces.list.html +0 -339
  286. package/app/report/jsdoc/quicksearch.html +0 -31
  287. package/app/report/jsdoc/scripts/docstrap.lib.js +0 -11
  288. package/app/report/jsdoc/scripts/fulltext-search-ui.js +0 -89
  289. package/app/report/jsdoc/scripts/fulltext-search.js +0 -36
  290. package/app/report/jsdoc/scripts/lunr.min.js +0 -6
  291. package/app/report/jsdoc/scripts/prettify/Apache-License-2.0.txt +0 -202
  292. package/app/report/jsdoc/scripts/prettify/jquery.min.js +0 -6
  293. package/app/report/jsdoc/scripts/prettify/lang-css.js +0 -21
  294. package/app/report/jsdoc/scripts/prettify/prettify.js +0 -496
  295. package/app/report/jsdoc/scripts/sunlight.js +0 -1157
  296. package/app/report/jsdoc/scripts/toc.js +0 -203
  297. package/app/report/jsdoc/styles/darkstrap.css +0 -960
  298. package/app/report/jsdoc/styles/prettify-tomorrow.css +0 -132
  299. package/app/report/jsdoc/styles/site.cerulean.css +0 -7008
  300. package/app/report/jsdoc/styles/site.cosmo.css +0 -7061
  301. package/app/report/jsdoc/styles/site.cyborg.css +0 -7048
  302. package/app/report/jsdoc/styles/site.darkly.css +0 -7171
  303. package/app/report/jsdoc/styles/site.darkstrap.css +0 -5638
  304. package/app/report/jsdoc/styles/site.dibs-bootstrap.css +0 -5899
  305. package/app/report/jsdoc/styles/site.flatly.css +0 -7147
  306. package/app/report/jsdoc/styles/site.journal.css +0 -6973
  307. package/app/report/jsdoc/styles/site.lumen.css +0 -7298
  308. package/app/report/jsdoc/styles/site.paper.css +0 -7623
  309. package/app/report/jsdoc/styles/site.readable.css +0 -6997
  310. package/app/report/jsdoc/styles/site.sandstone.css +0 -7035
  311. package/app/report/jsdoc/styles/site.simplex.css +0 -7023
  312. package/app/report/jsdoc/styles/site.slate.css +0 -7343
  313. package/app/report/jsdoc/styles/site.spacelab.css +0 -7055
  314. package/app/report/jsdoc/styles/site.superhero.css +0 -7131
  315. package/app/report/jsdoc/styles/site.united.css +0 -6895
  316. package/app/report/jsdoc/styles/site.yeti.css +0 -7195
  317. package/app/report/jsdoc/styles/sunlight.dark.css +0 -345
  318. package/app/report/jsdoc/styles/sunlight.default.css +0 -344
  319. package/gulp/config.js +0 -207
  320. package/gulp/tasks/accessibility.js +0 -34
  321. package/gulp/tasks/build.js +0 -18
  322. package/gulp/tasks/clean.js +0 -18
  323. package/gulp/tasks/data.js +0 -22
  324. package/gulp/tasks/default.js +0 -9
  325. package/gulp/tasks/deploy.js +0 -222
  326. package/gulp/tasks/documentation.js +0 -28
  327. package/gulp/tasks/markup.js +0 -26
  328. package/gulp/tasks/script.js +0 -92
  329. package/gulp/tasks/style.js +0 -42
  330. package/gulp/tasks/unit.js +0 -38
  331. package/gulp/tasks/watch.js +0 -77
  332. package/gulpfile.js +0 -8
  333. package/jsdoc.json +0 -23
  334. package/karma.conf.js +0 -58
package/app/toolkit/components.hbs ADDED
@@ -0,0 +1,261 @@
1
+ <!DOCTYPE html>
2
+ <html id="toolkit-components" lang="en-US" dir="ltr">
3
+ {{> element/head secondaryCSS='toolkit'}}
4
+ <body itemscope itemtype="http://schema.org/WebPage">
5
+
6
+ <div class="wrapper">
7
+
8
+ {{>toolkit/accessibility-skip-to-element-1 id='skip-to-content' url='#main' title='skip to content'}}
9
+
10
+ <header class="toolkit-header-1">
11
+ <button aria-expanded="false">main menu toggle</button>
12
+ <div class="row">
13
+ <div class="col-12">
14
+ <a href="{{www}}toolkit">Digital Toolkit</a>
15
+ </div>
16
+ </div>
17
+ </header>
18
+
19
+ <div class="sticky-1">
20
+ <div class="sticky-1-wrapper">
21
+ <nav class="toolkit-nav-1" tabindex="-1">
22
+ <a href="{{www}}toolkit">Home</a>
23
+ <a href="{{www}}toolkit/grids.html">Grids</a>
24
+ <a href="{{www}}toolkit/colors.html">Colors</a>
25
+ <a href="{{www}}toolkit/type.html">Type</a>
26
+ <a href="{{www}}toolkit/icons.html">Icons</a>
27
+ <a href="{{www}}toolkit/elements.html">Elements</a>
28
+ <a class="selected" href="{{www}}toolkit/components.html">Components</a>
29
+ </nav>
30
+ </div>
31
+ </div>
32
+
33
+ <main id="main" tabindex="-1">
34
+ <section>
35
+ <h1 class="toolkit-heading-1">Components</h1>
36
+ <div class="row">
37
+ <div class="col-12">
38
+ <h2 class="toolkit-heading-2">Forms</h2>
39
+ </div>
40
+ </div>
41
+ <div class="row">
42
+ <div class="col-12 col-md-7">
43
+ <h3 class="toolkit-heading-3">form-1</h3>
44
+ <form class="form-1" id="form-1-example" name="form-1-example">
45
+ <fieldset class="fieldset-1">
46
+ <legend class="legend-1">Tell us about your vehicle</legend>
47
+ <p>{{> toolkit/label-1 title='What is the make of the vehicle?' for='input-text-1-example'}}</p>
48
+ <p>{{> toolkit/input-text-1 id='input-text-1-example' name='input-text-1-example' placeholder='i.e. Buick' type='text' required=true}}</p>
49
+ <p>{{> toolkit/label-1 title='what type of vehicle is it?' for='select-1-example'}}</p>
50
+ <p>{{> toolkit/select-1 select-1 id='select-1-example' name='select-1-example' required=true}}</p>
51
+ <p id="radio-group-label">Do you own or lease the vehicle?</p>
52
+ <p>{{> toolkit/label-1 title='own' for='input-radio-1-example-1'}}</p>
53
+ <p>{{> toolkit/input-radio-1 id='input-radio-1-example-1' name='radio-example' labelledby='radio-group-label'}}</p>
54
+ <p>{{> toolkit/label-1 title='lease' for='input-radio-1-example-2'}}</p>
55
+ <p>{{> toolkit/input-radio-1 id='input-radio-1-example-2' name='radio-example' labelledby='radio-group-label'}}</p>
56
+ <p>{{> toolkit/label-1 title='please provide any additonal comments:' for='textarea-1-example'}}</p>
57
+ <p>{{> toolkit/textarea-1 id='textarea-1-example' name='textarea-1-example' placeholder='please be detailed' required=true}}</p>
58
+ </fieldset>
59
+ <fieldset class="fieldset-1">
60
+ <legend class="legend-1">Agree to terms</legend>
61
+ <p>{{> toolkit/label-1 title='I agree to terms and conditions.' for='input-checkbox-1-example'}}</p>
62
+ <p>{{> toolkit/input-checkbox-1 id='input-checkbox-1-example' name='checkbox-example' checked=true required=true}}</p>
63
+ </fieldset>
64
+ <p>{{> toolkit/button-1 id='button-1' type='submit' title='save your changes'}}</p>
65
+ </form>
66
+ <h4 class="toolkit-heading-4">Source Code</h4>
67
+ <ul class="list-1">
68
+ <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/components/form-1.js">form-1.js</a></li>
69
+ </ul>
70
+ </div>
71
+ <aside class="col-12 col-md-5">
72
+ <h3 class="toolkit-heading-3">Accessibility</h3>
73
+ <h4 class="toolkit-heading-4">Gherkin</h4>
74
+ <div class="toolkit-gherkin-1">
75
+ <p>GIVEN I am a screen reader user<br>
76
+ WHEN I submit a form with validation errors<br>
77
+ THEN I will be focused on the first form field in error state<br>
78
+ THEN I will hear the label for that form field<br>
79
+ THEN I will hear if the form field is required<br>
80
+ THEN I will hear a description of how to fix the error.
81
+ </p>
82
+ </div>
83
+ </aside>
84
+ </div>
85
+ <hr class="toolkit-rule-1">
86
+ <div class="row">
87
+ <div class="col-12">
88
+ <h2 class="toolkit-heading-2">Modals</h2>
89
+ </div>
90
+ </div>
91
+ <div class="row">
92
+ <div class="col-12 col-md-7">
93
+ <h3 class="toolkit-heading-3">modal-1</h3>
94
+ <p><button class="button-1" data-modal-open="modal-example-1">view disclosures</button></p>
95
+ <h4 class="toolkit-heading-4">Source Code</h4>
96
+ <ul class="list-1">
97
+ <li>style: <a href="{{webRepo}}app/assets/style/base/components/_modal-1.scss">_modal-1.scss</a></li>
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
+ </ul>
100
+ </div>
101
+ <aside class="col-12 col-md-5">
102
+ <h3 class="toolkit-heading-3">Accessibility</h3>
103
+ <h4 class="toolkit-heading-4">Gherkin</h4>
104
+ <div class="toolkit-gherkin-1">
105
+ <p>GIVEN I am a screen reader user<br>
106
+ WHEN I activate a button to call a dialog (the control is NOT a link)<br>
107
+ THEN the keyboard focus goes to the active dialog<br>
108
+ AND I hear the screen reader read the title of the dialog<br>
109
+ (AND the button in default focus, if applicable)<br>
110
+ AND I cannot escape the dialog with the tab key<br>
111
+ AND I can escape the dialog with the escape key<br>
112
+ AND WHEN I close the dialog, the focus goes back to the original button<br>
113
+ (OR to the most appropriate place, if the button is not appropriate)</p>
114
+ </div>
115
+ </aside>
116
+ </div>
117
+ <hr class="toolkit-rule-1">
118
+ <div class="row">
119
+ <div class="col-12">
120
+ <h2 class="toolkit-heading-2">Tab Panels</h2>
121
+ </div>
122
+ </div>
123
+ <div class="row">
124
+ <div class="col-12 col-md-7">
125
+ <h3 class="toolkit-heading-3">tabpanel-1</h3>
126
+ <div class="tabpanel-1">
127
+ <ul role="tablist">
128
+ <li id="tab-1" role="tab" aria-controls="panel-1" aria-selected="true" tabindex="0">dashboard</a></li>
129
+ <li id="tab-2" role="tab" aria-controls="panel-2" aria-selected="false" tabindex="-1">account</a></li>
130
+ <li id="tab-3" role="tab" aria-controls="panel-3" aria-selected="false" tabindex="-1">services</a></li>
131
+ </ul>
132
+ <div id="panel-1" aria-labelledby="tab-1" role="tabpanel" aria-hidden="false">
133
+ <p>dashboard landing content</p>
134
+ </div>
135
+ <div id="panel-2" aria-labelledby="tab-2" role="tabpanel" aria-hidden="true">
136
+ <p>account content</p>
137
+ </div>
138
+ <div id="panel-3" aria-labelledby="tab-3" role="tabpanel" aria-hidden="true">
139
+ <p>services content</p>
140
+ </div>
141
+ </div>
142
+ <h4 class="toolkit-heading-4">Source Code</h4>
143
+ <ul class="list-1">
144
+ <li>style: <a href="{{webRepo}}app/assets/style/base/components/_tabpanel-base-1.scss">_tabpanel-base-1.scss</a>, <a href="{{webRepo}}app/assets/style/base/components/_tabpanel-1.scss">_tabpanel-1.scss</a></li>
145
+ <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/components/tabpanel-1.js">tabpanel-1.js</a></li>
146
+ </ul>
147
+ <h3 class="toolkit-heading-3">tabpanel-2</h3>
148
+ <div class="tabpanel-2">
149
+ <div role="tablist">
150
+ <a id="tab-4" role="tab" aria-controls="panel-4" aria-selected="true" tabindex="0">dashboard</a>
151
+ <div id="panel-4" aria-labelledby="tab-4" role="tabpanel" aria-hidden="false">
152
+ <p>dashboard landing content</p>
153
+ </div>
154
+ <a id="tab-5" role="tab" aria-controls="panel-5" aria-selected="false" tabindex="-1">account</a>
155
+ <div id="panel-5" aria-labelledby="tab-5" role="tabpanel" aria-hidden="true">
156
+ <p>account content</p>
157
+ </div>
158
+ <a id="tab-6" role="tab" aria-controls="panel-6" aria-selected="false" tabindex="-1">services</a>
159
+ <div id="panel-6" aria-labelledby="tab-6" role="tabpanel" aria-hidden="true">
160
+ <p>services content</p>
161
+ </div>
162
+ </div>
163
+ </div>
164
+ <h4 class="toolkit-heading-4">Source Code</h4>
165
+ <ul class="list-1">
166
+ <li>style: <a href="{{webRepo}}app/assets/style/base/components/_tabpanel-base-1.scss">_tabpanel-base-1.scss</a>, <a href="{{webRepo}}app/assets/style/base/components/_tabpanel-2.scss">_tabpanel-2.scss</a></li>
167
+ <li>script: <a href="{{webRepo}}app/assets/script/view/toolkit/components/tabpanel-1.js">tabpanel-1.js</a></li>
168
+ </ul>
169
+ </div>
170
+ <aside class="col-12 col-md-5">
171
+ <h3 class="toolkit-heading-3">Accessibility</h3>
172
+ <h4 class="toolkit-heading-4">Gherkin</h4>
173
+ <div class="toolkit-gherkin-1">
174
+ <p>GIVEN I am a screen reader user<br>
175
+ WHEN I navigate to a tabpanel widget with the tab key, the focus should land on the active tab.<br>
176
+ WHEN I hit tab again, the focus should go past the remaining tabs to the next focusable item (beyond the tablist).<br>
177
+ IF I need to navigate within the tabs, when the keyboard focus is on the active tab, I can use the right arrow key to go forward through the tabs, or the left arrow key to go backward through tabs.</p>
178
+ </div>
179
+ <div class="toolkit-gherkin-1">
180
+ <p>GIVEN I am a screen reader user<br>
181
+ WHEN I land on the active tab using the tab key, the screen reader reads the label for the tab, it says "tab," it says how many tabs are in the group,<br>
182
+ AND which tab it is (e.g. "tab 1 of 4")<br>
183
+ AND it says "selected." When I navigate with the arrow keys to other tabs, it says all of the above plus gives the accurate location (e.g. "tab 2 of 4").</p>
184
+ </div>
185
+ </aside>
186
+ </div>
187
+ <hr class="toolkit-rule-1">
188
+ <div class="row">
189
+ <div class="col-12">
190
+ <h2 class="toolkit-heading-2">Accessible Ajax</h2>
191
+ </div>
192
+ </div>
193
+ <div class="row">
194
+ <div class="col-12 col-md-7">
195
+ <h3 class="toolkit-heading-3">accessiblity-ajax-1</h3>
196
+ <p><button id="accessible-ajax-example-button" class="button-1">click to load asynchronous content</button></p>
197
+ <h4 class="toolkit-heading-4">Source Code</h4>
198
+ <ul class="list-1">
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
+ </ul>
201
+ </div>
202
+ <aside class="col-12 col-md-5">
203
+ <h3 class="toolkit-heading-3">Accessibility</h3>
204
+ <h4 class="toolkit-heading-4">Gherkin</h4>
205
+ <div class="toolkit-gherkin-1">
206
+ <p>GIVEN I am a screen reader user<br>
207
+ WHEN I click a button with that executes an ajax request<br>
208
+ THEN IF the request response is slow I will hear that content is loading before the request is complete<br>
209
+ THEN I will hear a message that content has been loaded after the request is complete<br>
210
+ AND I will see focus visual change<br>
211
+ AND I will hear the new content added to the page</p>
212
+ </div>
213
+ </aside>
214
+ </div>
215
+ <hr class="toolkit-rule-1">
216
+ <div class="row">
217
+ <div class="col-12">
218
+ <h2 class="toolkit-heading-2">Video Players</h2>
219
+ </div>
220
+ </div>
221
+ <div class="row">
222
+ <div class="col-12 col-md-7">
223
+ <h3 class="toolkit-heading-3">youtube-player-1</h3>
224
+ {{> toolkit/youtube-player-1 widescreen=true}}
225
+ <h4 class="toolkit-heading-4">Source Code</h4>
226
+ <ul class="list-1">
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
+ </ul>
229
+ </div>
230
+ <aside class="col-12 col-md-5">
231
+ <h3 class="toolkit-heading-3">Accessibility</h3>
232
+ <h4 class="toolkit-heading-4">Gherkin</h4>
233
+ <div class="toolkit-gherkin-1">
234
+ <p>GIVEN I am a screen reader user<br>
235
+ WHEN I navigate to the iframe with my keyboard<br>
236
+ THEN I will hear 'YouTube video player'<br>
237
+ AND I will be able to navigate the iframe content</p>
238
+ </div>
239
+ </aside>
240
+ </div>
241
+ </section>
242
+ </main>
243
+
244
+ <hr class="toolkit-rule-1">
245
+
246
+ {{>toolkit/footer-1}}
247
+
248
+ </div>
249
+
250
+ {{#if scripts.global}}
251
+ {{> element/script script=scripts.global}}
252
+ {{/if}}
253
+ {{#if scripts.section}}
254
+ {{> element/script script=scripts.section}}
255
+ {{/if}}
256
+ {{#if scripts.page}}
257
+ {{> element/script script=scripts.page}}
258
+ {{/if}}
259
+
260
+ </body>
261
+ </html>