testio-tailwind 0.2.0 → 0.2.1

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 (380) hide show
  1. package/.circleci/config.yml +217 -0
  2. package/.dockerignore +4 -0
  3. package/.eleventy.js +57 -57
  4. package/Dockerfile +27 -0
  5. package/LICENSE +21 -21
  6. package/README.md +43 -43
  7. package/icon-classes-extractor.js +29 -29
  8. package/index.html +399 -478
  9. package/package.json +66 -66
  10. package/src/_data/navigation.json +44 -44
  11. package/src/_data/site.js +12 -12
  12. package/src/_includes/card_popover.haml +7 -7
  13. package/src/_includes/example-header-customer.pug +99 -99
  14. package/src/_includes/example-header-manager.njk +53 -53
  15. package/src/_includes/example-header-tester.njk +99 -99
  16. package/src/_includes/example-header.njk +50 -50
  17. package/src/_includes/page-with-sidebar-nocode.njk +46 -46
  18. package/src/_includes/page-with-sidebar.njk +46 -46
  19. package/src/_includes/page.njk +38 -38
  20. package/src/_layouts/base.njk +83 -83
  21. package/src/_layouts/email-template.njk +90 -90
  22. package/src/_layouts/page-example-customer.njk +74 -74
  23. package/src/_layouts/page-example-manager.njk +74 -74
  24. package/src/_layouts/page-example-tester.njk +75 -75
  25. package/src/_layouts/page-example.njk +83 -83
  26. package/src/assets/images/Cirro-App-Defaultimage.svg +25 -25
  27. package/src/assets/images/arrow-down.svg +13 -13
  28. package/src/assets/images/arrow-left.svg +13 -13
  29. package/src/assets/images/arrow-right.svg +13 -13
  30. package/src/assets/images/arrow-thick-left.svg +13 -13
  31. package/src/assets/images/arrow-thick-right.svg +13 -13
  32. package/src/assets/images/arrow-up.svg +13 -13
  33. package/src/assets/images/at-sign.svg +12 -12
  34. package/src/assets/images/attachment-fallbackimage.svg +19 -19
  35. package/src/assets/images/attachment.svg +8 -8
  36. package/src/assets/images/bell-smile-xl.svg +18 -18
  37. package/src/assets/images/blocked.svg +7 -7
  38. package/src/assets/images/bug-chat-xl.svg +15 -15
  39. package/src/assets/images/bug-deceased-xl.svg +15 -15
  40. package/src/assets/images/bug-reproduction.svg +14 -14
  41. package/src/assets/images/bug-sad-xl.svg +13 -13
  42. package/src/assets/images/bug-search-xl.svg +18 -18
  43. package/src/assets/images/bug-sleeping-xl.svg +14 -14
  44. package/src/assets/images/bug-smile-xl.svg +9 -9
  45. package/src/assets/images/calendar.svg +15 -15
  46. package/src/assets/images/caret-down-centered.svg +6 -6
  47. package/src/assets/images/caret-down.svg +11 -11
  48. package/src/assets/images/caret-left-centered.svg +6 -6
  49. package/src/assets/images/caret-left.svg +6 -6
  50. package/src/assets/images/caret-right-centered.svg +6 -6
  51. package/src/assets/images/caret-right.svg +6 -6
  52. package/src/assets/images/caret-up-centered.svg +6 -6
  53. package/src/assets/images/caret-up.svg +11 -11
  54. package/src/assets/images/check-circle-filled-white.svg +9 -9
  55. package/src/assets/images/check-circle-filled.svg +12 -12
  56. package/src/assets/images/check-circle.svg +7 -7
  57. package/src/assets/images/check-selectable-items.svg +11 -11
  58. package/src/assets/images/check-thick-outline.svg +11 -11
  59. package/src/assets/images/check-thick.svg +6 -6
  60. package/src/assets/images/check.svg +17 -17
  61. package/src/assets/images/checkbox-background-black.svg +6 -6
  62. package/src/assets/images/checkbox-background-sm.svg +12 -12
  63. package/src/assets/images/checkbox-background-white.svg +6 -6
  64. package/src/assets/images/checkbox-background.svg +6 -6
  65. package/src/assets/images/checkbox-sm-checked.svg +11 -11
  66. package/src/assets/images/circle-empty-white.svg +6 -6
  67. package/src/assets/images/circle-sm-filled.svg +6 -6
  68. package/src/assets/images/clock.svg +12 -12
  69. package/src/assets/images/cross-circle-filled.svg +6 -6
  70. package/src/assets/images/cross-circle.svg +7 -7
  71. package/src/assets/images/cross-thick.svg +15 -15
  72. package/src/assets/images/cross.svg +7 -7
  73. package/src/assets/images/exclamation-circle-filled.svg +11 -11
  74. package/src/assets/images/exclamation-circle.svg +12 -12
  75. package/src/assets/images/feature-check.svg +9 -9
  76. package/src/assets/images/feature-cross.svg +10 -10
  77. package/src/assets/images/feature-draft.svg +14 -14
  78. package/src/assets/images/feature.svg +8 -8
  79. package/src/assets/images/file-image-plus-lg.svg +19 -19
  80. package/src/assets/images/file-image-plus-xl.svg +20 -20
  81. package/src/assets/images/format-bold.svg +11 -11
  82. package/src/assets/images/format-code.svg +12 -12
  83. package/src/assets/images/format-heading.svg +11 -11
  84. package/src/assets/images/format-indent-decrease.svg +11 -11
  85. package/src/assets/images/format-indent-increase.svg +11 -11
  86. package/src/assets/images/format-italic.svg +11 -11
  87. package/src/assets/images/format-link.svg +11 -11
  88. package/src/assets/images/format-list-bulleted.svg +17 -17
  89. package/src/assets/images/format-list-numbered.svg +17 -17
  90. package/src/assets/images/format-mark.svg +13 -13
  91. package/src/assets/images/format-quote.svg +17 -17
  92. package/src/assets/images/format-strikethrough.svg +11 -11
  93. package/src/assets/images/forward.svg +11 -11
  94. package/src/assets/images/google_signin.svg +22 -22
  95. package/src/assets/images/info-circle-cirro.svg +21 -21
  96. package/src/assets/images/info-circle-ux.svg +21 -21
  97. package/src/assets/images/lock.svg +15 -15
  98. package/src/assets/images/logo-mobile-cloud.svg +12 -12
  99. package/src/assets/images/logo-testio/testio_horizontal_black.svg +14 -14
  100. package/src/assets/images/logo-testio/testio_horizontal_icon_black.svg +25 -25
  101. package/src/assets/images/logo-testio/testio_horizontal_icon_purple_black.svg +27 -27
  102. package/src/assets/images/logo-testio/testio_horizontal_icon_purple_white.svg +25 -25
  103. package/src/assets/images/logo-testio/testio_horizontal_icon_white.svg +25 -25
  104. package/src/assets/images/logo-testio/testio_horizontal_purple_black.svg +9 -9
  105. package/src/assets/images/logo-testio/testio_horizontal_purple_white.svg +14 -14
  106. package/src/assets/images/logo-testio/testio_horizontal_purpleteal_black.svg +21 -21
  107. package/src/assets/images/logo-testio/testio_horizontal_purpleteal_white.svg +19 -19
  108. package/src/assets/images/logo-testio/testio_horizontal_teal_black.svg +14 -14
  109. package/src/assets/images/logo-testio/testio_horizontal_teal_white.svg +14 -14
  110. package/src/assets/images/logo-testio/testio_horizontal_tealpurple_black.svg +21 -21
  111. package/src/assets/images/logo-testio/testio_horizontal_tealpurple_white.svg +21 -21
  112. package/src/assets/images/logo-testio/testio_horizontal_white.svg +14 -14
  113. package/src/assets/images/logo-testio/testio_symbol_black_round.svg +11 -11
  114. package/src/assets/images/logo-testio/testio_symbol_purple.svg +15 -15
  115. package/src/assets/images/logo-testio/testio_symbol_purpleteal_round.svg +18 -18
  116. package/src/assets/images/logo-testio/testio_symbol_purpleteal_square.svg +18 -18
  117. package/src/assets/images/logo-testio/testio_symbol_teal.svg +15 -15
  118. package/src/assets/images/logo-testio/testio_symbol_tealpurple_round.svg +18 -18
  119. package/src/assets/images/logo-testio/testio_symbol_tealpurple_square.svg +18 -18
  120. package/src/assets/images/logo-testio/testio_symbol_white_round.svg +11 -11
  121. package/src/assets/images/logo-testio/testio_typo_black.svg +11 -11
  122. package/src/assets/images/logo-testio/testio_typo_white.svg +11 -11
  123. package/src/assets/images/logo-testio/testio_vertical_purpleteal_black.svg +19 -19
  124. package/src/assets/images/logo-testio/testio_vertical_purpleteal_white.svg +19 -19
  125. package/src/assets/images/logo-testio/testio_vertical_tealpurple_black.svg +19 -19
  126. package/src/assets/images/logo-testio/testio_vertical_tealpurple_white.svg +19 -19
  127. package/src/assets/images/message-feedback.svg +10 -10
  128. package/src/assets/images/message-question-filled.svg +6 -6
  129. package/src/assets/images/message-question.svg +8 -8
  130. package/src/assets/images/message.svg +11 -11
  131. package/src/assets/images/question-circle.svg +24 -24
  132. package/src/assets/images/radio-checked-black.svg +5 -5
  133. package/src/assets/images/redo.svg +7 -7
  134. package/src/assets/images/remove.svg +6 -6
  135. package/src/assets/images/search.svg +11 -11
  136. package/src/assets/images/seat.svg +14 -14
  137. package/src/assets/images/section.svg +8 -8
  138. package/src/assets/images/sendmessage.svg +15 -15
  139. package/src/assets/images/speaker.svg +10 -10
  140. package/src/assets/images/test-archived.svg +12 -12
  141. package/src/assets/images/test-automation.svg +8 -8
  142. package/src/assets/images/test-check.svg +9 -9
  143. package/src/assets/images/test-ended.svg +9 -9
  144. package/src/assets/images/test-failed.svg +10 -10
  145. package/src/assets/images/test-initialized.svg +10 -10
  146. package/src/assets/images/test-locked.svg +15 -15
  147. package/src/assets/images/test-plus.svg +11 -11
  148. package/src/assets/images/test-promoted.svg +9 -9
  149. package/src/assets/images/test-running.svg +9 -9
  150. package/src/assets/images/test-stopped.svg +17 -17
  151. package/src/assets/images/test.svg +8 -8
  152. package/src/assets/images/testcase.svg +10 -10
  153. package/src/assets/images/triangle-centered-down.svg +12 -12
  154. package/src/assets/images/triangle-centered-left.svg +12 -12
  155. package/src/assets/images/triangle-centered-right.svg +12 -12
  156. package/src/assets/images/triangle-centered-up.svg +12 -12
  157. package/src/assets/images/triangle-down.svg +5 -5
  158. package/src/assets/images/triangle-up.svg +5 -5
  159. package/src/assets/images/undo.svg +7 -7
  160. package/src/assets/images/verify-exclamation.svg +11 -11
  161. package/src/assets/scripts/app.js +150 -150
  162. package/src/assets/scripts/modules/colors.js +10 -10
  163. package/src/assets/scripts/modules/echarts_area.js +94 -94
  164. package/src/assets/scripts/modules/echarts_donut.js +85 -85
  165. package/src/assets/scripts/modules/echarts_exampledata.js +105 -105
  166. package/src/assets/scripts/modules/echarts_exampleseries.js +146 -146
  167. package/src/assets/scripts/modules/echarts_gauge.js +74 -74
  168. package/src/assets/scripts/modules/echarts_horizontal.js +80 -80
  169. package/src/assets/scripts/modules/echarts_legend.js +12 -12
  170. package/src/assets/scripts/modules/echarts_vertical.js +80 -80
  171. package/src/assets/stylesheets/app.css +77 -77
  172. package/src/assets/stylesheets/components/actionbar.css +41 -41
  173. package/src/assets/stylesheets/components/alerts.css +50 -50
  174. package/src/assets/stylesheets/components/banner_card.css +56 -56
  175. package/src/assets/stylesheets/components/buttons.css +192 -192
  176. package/src/assets/stylesheets/components/cards.css +148 -148
  177. package/src/assets/stylesheets/components/chat.css +265 -265
  178. package/src/assets/stylesheets/components/checkboxes_radiobuttons.css +173 -173
  179. package/src/assets/stylesheets/components/customer/customer_header.css +97 -97
  180. package/src/assets/stylesheets/components/customer/customer_productcards.css +212 -212
  181. package/src/assets/stylesheets/components/customer/customer_sidebar.css +76 -76
  182. package/src/assets/stylesheets/components/devices.css +77 -77
  183. package/src/assets/stylesheets/components/drawer.css +99 -99
  184. package/src/assets/stylesheets/components/dropdown.css +92 -92
  185. package/src/assets/stylesheets/components/emptystate_message.css +41 -41
  186. package/src/assets/stylesheets/components/form_card.css +20 -20
  187. package/src/assets/stylesheets/components/form_grid.css +11 -11
  188. package/src/assets/stylesheets/components/forms.css +106 -106
  189. package/src/assets/stylesheets/components/header.css +220 -220
  190. package/src/assets/stylesheets/components/iconfont.css +3303 -3303
  191. package/src/assets/stylesheets/components/icons.css +142 -142
  192. package/src/assets/stylesheets/components/images.css +27 -27
  193. package/src/assets/stylesheets/components/layout.css +37 -82
  194. package/src/assets/stylesheets/components/list_item.css +285 -285
  195. package/src/assets/stylesheets/components/lists.css +67 -67
  196. package/src/assets/stylesheets/components/loading_spinner.css +104 -104
  197. package/src/assets/stylesheets/components/manager/manager_header.css +50 -50
  198. package/src/assets/stylesheets/components/manager/manager_sidebar.css +76 -76
  199. package/src/assets/stylesheets/components/markdown_trix_styles.css +200 -200
  200. package/src/assets/stylesheets/components/metasidebar.css +56 -56
  201. package/src/assets/stylesheets/components/metrics.css +12 -12
  202. package/src/assets/stylesheets/components/modals.css +105 -105
  203. package/src/assets/stylesheets/components/notifications.css +154 -154
  204. package/src/assets/stylesheets/components/popover.css +120 -120
  205. package/src/assets/stylesheets/components/progress.css +69 -69
  206. package/src/assets/stylesheets/components/radio_tabs.css +59 -59
  207. package/src/assets/stylesheets/components/reset.css +26 -26
  208. package/src/assets/stylesheets/components/resultmodule.css +132 -132
  209. package/src/assets/stylesheets/components/search.css +110 -110
  210. package/src/assets/stylesheets/components/sections.css +97 -96
  211. package/src/assets/stylesheets/components/select.css +50 -50
  212. package/src/assets/stylesheets/components/select2.css +252 -252
  213. package/src/assets/stylesheets/components/selectable_token.css +223 -223
  214. package/src/assets/stylesheets/components/sidebar.css +480 -480
  215. package/src/assets/stylesheets/components/splitview.css +307 -307
  216. package/src/assets/stylesheets/components/tables.css +108 -108
  217. package/src/assets/stylesheets/components/tabs.css +121 -121
  218. package/src/assets/stylesheets/components/tags.css +28 -28
  219. package/src/assets/stylesheets/components/task_issue_item.css +78 -78
  220. package/src/assets/stylesheets/components/test_header.css +167 -167
  221. package/src/assets/stylesheets/components/test_item.css +89 -89
  222. package/src/assets/stylesheets/components/tester/tester_cards.css +143 -143
  223. package/src/assets/stylesheets/components/tester/tester_header.css +37 -37
  224. package/src/assets/stylesheets/components/tester/tester_sidebar.css +92 -92
  225. package/src/assets/stylesheets/components/toggleswitch.css +118 -118
  226. package/src/assets/stylesheets/components/tom_select.css +186 -186
  227. package/src/assets/stylesheets/components/trix_editor.css +174 -174
  228. package/src/assets/stylesheets/components/typography.css +81 -81
  229. package/src/assets/stylesheets/components/uploads.css +194 -194
  230. package/src/assets/stylesheets/components/user_item.css +57 -57
  231. package/src/assets/stylesheets/designsystem-styles.css +81 -81
  232. package/src/assets/stylesheets/postcss.config.js +16 -16
  233. package/src/assets/stylesheets/tailwind.config.js +331 -331
  234. package/src/humans.txt.njk +10 -10
  235. package/src/index.pug +16 -16
  236. package/src/pages/buttons/block.haml +39 -39
  237. package/src/pages/buttons/buttons-lg.haml +20 -20
  238. package/src/pages/buttons/buttons-sm.haml +41 -41
  239. package/src/pages/buttons/buttons-xl.haml +23 -23
  240. package/src/pages/buttons/buttons.haml +58 -58
  241. package/src/pages/buttons/buttons_input.haml +39 -39
  242. package/src/pages/buttons/dropdown-menu.haml +73 -73
  243. package/src/pages/buttons/index.njk +7 -7
  244. package/src/pages/buttons/info_popover.haml +32 -32
  245. package/src/pages/buttons/link-with-icon.haml +13 -13
  246. package/src/pages/buttons/square-buttons.haml +55 -55
  247. package/src/pages/charts/area.haml +215 -215
  248. package/src/pages/charts/bar_horizontal.haml +335 -335
  249. package/src/pages/charts/bar_vertical.haml +391 -391
  250. package/src/pages/charts/donut.haml +269 -269
  251. package/src/pages/charts/gauge.haml +214 -214
  252. package/src/pages/charts/index.njk +6 -6
  253. package/src/pages/ci.pug +8 -8
  254. package/src/pages/colors.pug +147 -147
  255. package/src/pages/components/alerts.haml +31 -31
  256. package/src/pages/components/banner_cards.haml +45 -45
  257. package/src/pages/components/cards.haml +111 -111
  258. package/src/pages/components/cards_customer.haml +487 -487
  259. package/src/pages/components/cards_fixedwidth.haml +135 -135
  260. package/src/pages/components/cards_iconheader.haml +57 -57
  261. package/src/pages/components/cards_tester.haml +159 -159
  262. package/src/pages/components/chat_window.haml +240 -240
  263. package/src/pages/components/comments_bug_preview.haml +29 -29
  264. package/src/pages/components/comments_chatmessages.haml +229 -229
  265. package/src/pages/components/descriptionlist.haml +47 -47
  266. package/src/pages/components/devices.haml +115 -115
  267. package/src/pages/components/drawer.haml +49 -49
  268. package/src/pages/components/drawer_filter.haml +76 -76
  269. package/src/pages/components/emptystate.haml +15 -15
  270. package/src/pages/components/index.njk +6 -6
  271. package/src/pages/components/issue-item.haml +18 -18
  272. package/src/pages/components/listitem_with_footer.haml +208 -208
  273. package/src/pages/components/listitems.haml +136 -136
  274. package/src/pages/components/listitems_badge.haml +36 -36
  275. package/src/pages/components/listitems_collapsable.haml +117 -117
  276. package/src/pages/components/listitems_nested.haml +50 -50
  277. package/src/pages/components/listitems_selectable.haml +59 -59
  278. package/src/pages/components/listitems_white.haml +82 -82
  279. package/src/pages/components/loading_spinner.haml +11 -11
  280. package/src/pages/components/metasidebar.haml +13 -13
  281. package/src/pages/components/modal_details.haml +68 -68
  282. package/src/pages/components/notification_center.haml +48 -48
  283. package/src/pages/components/notifications.haml +42 -42
  284. package/src/pages/components/profilethumb.haml +27 -27
  285. package/src/pages/components/progress.haml +23 -23
  286. package/src/pages/components/resultmodule.haml +150 -150
  287. package/src/pages/components/resultmodule_testcase.haml +125 -125
  288. package/src/pages/components/section_collapsable.haml +24 -24
  289. package/src/pages/components/splitview_item.haml +111 -111
  290. package/src/pages/components/splitview_item_collapsable.haml +65 -65
  291. package/src/pages/components/tables.haml +57 -57
  292. package/src/pages/components/tables_linked.haml +29 -29
  293. package/src/pages/components/tags.haml +12 -12
  294. package/src/pages/components/task_item.haml +33 -33
  295. package/src/pages/components/test_item.haml +119 -119
  296. package/src/pages/components/tester_levels.haml +70 -70
  297. package/src/pages/components/user_item.haml +49 -49
  298. package/src/pages/examples/layout-actionbar.haml +267 -267
  299. package/src/pages/examples/layout-basic.haml +28 -28
  300. package/src/pages/examples/layout-chat.haml +327 -327
  301. package/src/pages/examples/layout-customer.haml +189 -189
  302. package/src/pages/examples/layout-form-sidebar-actionbar-metasidebar.haml +312 -312
  303. package/src/pages/examples/layout-manager.haml +98 -98
  304. package/src/pages/examples/layout-metasidebar.haml +269 -269
  305. package/src/pages/examples/layout-sidebar-actionbar-metasidebar.haml +308 -308
  306. package/src/pages/examples/layout-sidebar-actionbar.haml +308 -308
  307. package/src/pages/examples/layout-sidebar.haml +296 -296
  308. package/src/pages/examples/layout-tester.haml +105 -105
  309. package/src/pages/examples/splitview-testcases.haml +477 -477
  310. package/src/pages/examples/splitview.haml +389 -389
  311. package/src/pages/forms/checkboxes.haml +64 -64
  312. package/src/pages/forms/checkboxes_devices.haml +45 -45
  313. package/src/pages/forms/form-addon.haml +16 -16
  314. package/src/pages/forms/form-card.haml +36 -36
  315. package/src/pages/forms/form-grid.haml +16 -16
  316. package/src/pages/forms/form_grid_narrow.haml +18 -18
  317. package/src/pages/forms/forms.haml +22 -22
  318. package/src/pages/forms/index.njk +6 -6
  319. package/src/pages/forms/radiobuttons.haml +50 -50
  320. package/src/pages/forms/rating_scale.haml +62 -62
  321. package/src/pages/forms/search.haml +71 -71
  322. package/src/pages/forms/select2.haml +72 -72
  323. package/src/pages/forms/select_native.haml +74 -74
  324. package/src/pages/forms/selectable_token.haml +49 -49
  325. package/src/pages/forms/selectable_token_browsers.haml +66 -66
  326. package/src/pages/forms/selectable_token_lg.haml +49 -49
  327. package/src/pages/forms/selectable_token_xl.haml +49 -49
  328. package/src/pages/forms/textarea.haml +24 -24
  329. package/src/pages/forms/toggle-buttons.haml +94 -94
  330. package/src/pages/forms/toggle-switch.haml +31 -31
  331. package/src/pages/forms/tomselect.haml +76 -76
  332. package/src/pages/forms/trix_editor.pug +10 -10
  333. package/src/pages/forms/uploads.pug +101 -101
  334. package/src/pages/icons/bug-icons.haml +75 -75
  335. package/src/pages/icons/index.njk +83 -83
  336. package/src/pages/icons/marketingicons.haml +15 -15
  337. package/src/pages/icons/status-icons.haml +38 -38
  338. package/src/pages/layout/app_layout.haml +27 -27
  339. package/src/pages/layout/index.njk +6 -6
  340. package/src/pages/layout/max_width.haml +49 -49
  341. package/src/pages/layout/spacing.haml +30 -30
  342. package/src/pages/navigation/header-manager.haml +73 -73
  343. package/src/pages/navigation/header-tester.haml +100 -100
  344. package/src/pages/navigation/header.haml +76 -76
  345. package/src/pages/navigation/header_customer.haml +77 -77
  346. package/src/pages/navigation/header_tester_epam.haml +108 -108
  347. package/src/pages/navigation/index.njk +7 -7
  348. package/src/pages/navigation/product_dropdown.haml +65 -65
  349. package/src/pages/navigation/radio_tabs.haml +22 -22
  350. package/src/pages/navigation/sidebar-manager.haml +46 -46
  351. package/src/pages/navigation/sidebar-tester-elements.haml +105 -105
  352. package/src/pages/navigation/sidebar-tester-seatlimitation.haml +108 -108
  353. package/src/pages/navigation/sidebar-tester.haml +75 -75
  354. package/src/pages/navigation/sidebar.haml +46 -46
  355. package/src/pages/navigation/sidebar_collapsables.haml +136 -136
  356. package/src/pages/navigation/sidebar_customer.haml +146 -146
  357. package/src/pages/navigation/tabnavigation.haml +12 -12
  358. package/src/pages/navigation/tabnavigation_actions.haml +21 -21
  359. package/src/pages/navigation/tabnavigation_pills.haml +12 -12
  360. package/src/pages/navigation/test-header-tester.haml +177 -177
  361. package/src/pages/typography/index.njk +7 -7
  362. package/src/pages/typography/link_with_icon.haml +12 -12
  363. package/src/pages/typography/linked_icon.haml +10 -10
  364. package/src/pages/typography/markdown.md +112 -112
  365. package/src/pages/typography/section_header.haml +25 -25
  366. package/src/pages/typography/section_header_actions.haml +59 -59
  367. package/src/pages/typography/text_with_icon.haml +12 -12
  368. package/src/pages/typography/trix_styles.haml +127 -127
  369. package/src/pages/typography/typography.haml +51 -51
  370. package/src/sitemap.xml.njk +13 -13
  371. package/src/static/app.compiled.css +159 -197
  372. package/src/static/app.compiled.css.map +1 -1
  373. package/src/static/browserconfig.xml +9 -9
  374. package/src/static/site.webmanifest +3 -3
  375. package/utils/collections.js +29 -29
  376. package/utils/filters.js +11 -11
  377. package/utils/markdown.js +9 -9
  378. package/utils/shortcodes.js +6 -6
  379. package/utils/transforms.js +19 -19
  380. package/webpack.config.js +24 -24
package/src/_includes/example-header-tester.njk CHANGED
@@ -1,99 +1,99 @@
1
- <header class="header tester">
2
- <div class="navlinks logo-wrapper">
3
- <a href="#" class="navlink header-logo"></a>
4
- </div>
5
- <div class="navlinks left">
6
- <a href="#" class="navlink active responsive-label">
7
- <span class="icon icon-user-profile"></span>Your profile</a>
8
- <a href="#" class="navlink responsive-label">
9
- <span class="icon icon-activity"></span>Activity</a>
10
- <a href="#" class="navlink responsive-label">
11
- <span class="icon icon-devices"></span>Devices</a>
12
- <a href="#" class="navlink responsive-label">
13
- <span class="icon icon-billing"></span>Billing</a>
14
- </div>
15
- <details class="mobile-links">
16
- <summary class="mobile-menu-btn">
17
- <div class="navlink">
18
- <span class="sr-only">Open main menu</span>
19
- <span ariahidden="true" class="icon icon-menu"></span>
20
- </div>
21
- </summary>
22
- <div class="mobile-menu sidebar">
23
- <div class="profilepicture-wrapper">
24
- <details class="profilepicture-actions">
25
- <summary>
26
- <img src="/assets/images/testerlevel-medals/medal_testerlevel_1_md.png" class="testerlevel-medal" />
27
- <img src="/assets/images/placeholders/profile_supergirl.png" class="profilepicture" />
28
- </summary>
29
- <div class="popover-menu">
30
- <a href="#" class="popover-action">
31
- <span class="icon text-icon-default icon-cloud-upload mr-icon-spacing"></span>Upload picture</a>
32
- <a href="#" class="popover-action">
33
- <span class="icon text-icon-default icon-remove mr-icon-spacing"></span>Remove picture</a>
34
- </div>
35
- </details>
36
- </div>
37
- <div class="sidebar-title">Anja Berger</div>
38
- <div class="navlinks">
39
- <a href="#" class="navlink">
40
- <span class="icon icon-home"></span>Dashboard</a>
41
- <a href="#" class="navlink"><span class="icon icon-ranking"></span>Ranking</a>
42
- <a href="#" class="navlink">
43
- <div class="icon-wrapper"><span class="icon icon-test"></span>
44
- <span class="icon icon-circle-sm-filled recording-icon"></span></div>
45
- <div class="text-wrapper">
46
- <div class="div">#123321 Customer</div>
47
- <div class="label-sm">Test Session active 00:15</div>
48
- </div>
49
- </a>
50
- <div class="sidebar-divider"></div>
51
- <a href="#" class="navlink">
52
- <span class="icon icon-user-profile"></span>Your profile</a>
53
- <a href="#" class="navlink">
54
- <span class="icon icon-activity"></span>Activity</a>
55
- <a href="#" class="navlink">
56
- <span class="icon icon-devices"></span>Devices</a>
57
- <a href="#" class="navlink">
58
- <span class="icon icon-billing"></span>Billing</a>
59
- </div>
60
-
61
- </div>
62
- </details>
63
- <div class="navlinks right">
64
- <a href="#" class="navlink hidden-xs-down">
65
- <span class="icon icon-user-outline-plus mr-0"></span></a>
66
- <a href="#" class="navlink hidden-xs-down">
67
- <span class="icon icon-academy"></span>99</a>
68
- <a href="#" class="navlink hidden-xs-down">
69
- <span class="icon icon-chat"></span>99</a>
70
- <a href="#" class="navlink">
71
- <span class="icon icon-bell"></span>99</a>
72
- <a href="#" class="navlink hidden-xs-down">
73
- <span class="icon icon-search mr-0"></span></a>
74
- <details class="header-dropdown user-menu">
75
- <summary class="btn-profile navlink">
76
- <span class="sr-only">Open user menu</span>
77
- <img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile" />
78
- <div class="user-details">
79
- <div class="profile-role">Tester</div>
80
- <div class="profile-name">Anja Berger</div>
81
- </div>
82
- </summary>
83
- <div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
84
- <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
85
- <span class="icon icon-user-outline-plus"></span>Refer a tester</a>
86
- <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
87
- <span class="icon icon-chat"></span>Chat 99</a>
88
- <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
89
- <span class="icon icon-academy"></span>Onboarding 99</a>
90
- <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
91
- <span class="icon icon-search"></span>Search</a>
92
- <a href="#" role="menuitem" class="dropdown-link">
93
- <span class="icon icon-cog"></span>Settings</a>
94
- <a href="#" role="menuitem" class="dropdown-link">
95
- <span class="icon icon-shutdown"></span>Sign out</a>
96
- </div>
97
- </details>
98
- </div>
99
- </header>
1
+ <header class="header tester">
2
+ <div class="navlinks logo-wrapper">
3
+ <a href="#" class="navlink header-logo"></a>
4
+ </div>
5
+ <div class="navlinks left">
6
+ <a href="#" class="navlink active responsive-label">
7
+ <span class="icon icon-user-profile"></span>Your profile</a>
8
+ <a href="#" class="navlink responsive-label">
9
+ <span class="icon icon-activity"></span>Activity</a>
10
+ <a href="#" class="navlink responsive-label">
11
+ <span class="icon icon-devices"></span>Devices</a>
12
+ <a href="#" class="navlink responsive-label">
13
+ <span class="icon icon-billing"></span>Billing</a>
14
+ </div>
15
+ <details class="mobile-links">
16
+ <summary class="mobile-menu-btn">
17
+ <div class="navlink">
18
+ <span class="sr-only">Open main menu</span>
19
+ <span ariahidden="true" class="icon icon-menu"></span>
20
+ </div>
21
+ </summary>
22
+ <div class="mobile-menu sidebar">
23
+ <div class="profilepicture-wrapper">
24
+ <details class="profilepicture-actions">
25
+ <summary>
26
+ <img src="/assets/images/testerlevel-medals/medal_testerlevel_1_md.png" class="testerlevel-medal" />
27
+ <img src="/assets/images/placeholders/profile_supergirl.png" class="profilepicture" />
28
+ </summary>
29
+ <div class="popover-menu">
30
+ <a href="#" class="popover-action">
31
+ <span class="icon text-icon-default icon-cloud-upload mr-icon-spacing"></span>Upload picture</a>
32
+ <a href="#" class="popover-action">
33
+ <span class="icon text-icon-default icon-remove mr-icon-spacing"></span>Remove picture</a>
34
+ </div>
35
+ </details>
36
+ </div>
37
+ <div class="sidebar-title">Anja Berger</div>
38
+ <div class="navlinks">
39
+ <a href="#" class="navlink">
40
+ <span class="icon icon-home"></span>Dashboard</a>
41
+ <a href="#" class="navlink"><span class="icon icon-ranking"></span>Ranking</a>
42
+ <a href="#" class="navlink">
43
+ <div class="icon-wrapper"><span class="icon icon-test"></span>
44
+ <span class="icon icon-circle-sm-filled recording-icon"></span></div>
45
+ <div class="text-wrapper">
46
+ <div class="div">#123321 Customer</div>
47
+ <div class="label-sm">Test Session active 00:15</div>
48
+ </div>
49
+ </a>
50
+ <div class="sidebar-divider"></div>
51
+ <a href="#" class="navlink">
52
+ <span class="icon icon-user-profile"></span>Your profile</a>
53
+ <a href="#" class="navlink">
54
+ <span class="icon icon-activity"></span>Activity</a>
55
+ <a href="#" class="navlink">
56
+ <span class="icon icon-devices"></span>Devices</a>
57
+ <a href="#" class="navlink">
58
+ <span class="icon icon-billing"></span>Billing</a>
59
+ </div>
60
+
61
+ </div>
62
+ </details>
63
+ <div class="navlinks right">
64
+ <a href="#" class="navlink hidden-xs-down">
65
+ <span class="icon icon-user-outline-plus mr-0"></span></a>
66
+ <a href="#" class="navlink hidden-xs-down">
67
+ <span class="icon icon-academy"></span>99</a>
68
+ <a href="#" class="navlink hidden-xs-down">
69
+ <span class="icon icon-chat"></span>99</a>
70
+ <a href="#" class="navlink">
71
+ <span class="icon icon-bell"></span>99</a>
72
+ <a href="#" class="navlink hidden-xs-down">
73
+ <span class="icon icon-search mr-0"></span></a>
74
+ <details class="header-dropdown user-menu">
75
+ <summary class="btn-profile navlink">
76
+ <span class="sr-only">Open user menu</span>
77
+ <img src="/assets/images/placeholders/profile_supergirl.png" class="user-profile" />
78
+ <div class="user-details">
79
+ <div class="profile-role">Tester</div>
80
+ <div class="profile-name">Anja Berger</div>
81
+ </div>
82
+ </summary>
83
+ <div role="menu" ariaorientation="vertical" arialabelledby="user-menu" class="dropdown-menu profile-dropdown">
84
+ <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
85
+ <span class="icon icon-user-outline-plus"></span>Refer a tester</a>
86
+ <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
87
+ <span class="icon icon-chat"></span>Chat 99</a>
88
+ <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
89
+ <span class="icon icon-academy"></span>Onboarding 99</a>
90
+ <a href="#" role="menuitem" class="dropdown-link hidden-sm-up">
91
+ <span class="icon icon-search"></span>Search</a>
92
+ <a href="#" role="menuitem" class="dropdown-link">
93
+ <span class="icon icon-cog"></span>Settings</a>
94
+ <a href="#" role="menuitem" class="dropdown-link">
95
+ <span class="icon icon-shutdown"></span>Sign out</a>
96
+ </div>
97
+ </details>
98
+ </div>
99
+ </header>
package/src/_includes/example-header.njk CHANGED
@@ -1,50 +1,50 @@
1
- <header class="header">
2
- <div class="navlinks logo-wrapper"><a class="navlink header-logo" href="#"></a></div>
3
- <div class="navlinks left">
4
- <a class="navlink active" href="#">Navlink active</a>
5
- <a class="navlink" href="#">Navlink</a>
6
- <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
7
- <details class="header-dropdown">
8
- <summary class="navlink">Collapsable</summary>
9
- <div class="dropdown-menu">
10
- <a class="navlink active" href="#">Navlink active</a>
11
- <a class="navlink" href="#">Navlink</a>
12
- <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
13
- </div>
14
- </details>
15
- </div>
16
- <details class="mobile-links">
17
- <summary class="mobile-menu-btn">
18
- <div class="navlink"><span class="sr-only">Open main menu</span><span class="text-icon-default icon icon-menu" aria-hidden="true"></span></div>
19
- </summary>
20
- <div class="mobile-menu sidebar">
21
- <a class="navlink active" href="#">Navlink active</a>
22
- <a class="navlink" href="#">Navlink</a>
23
- <a class="navlink" href="#"><span class="icon icon-check-circle-filled"></span>Navlink</a>
24
- <details class="header-dropdown">
25
- <summary class="navlink">Collapsable</summary>
26
- <div class="dropdown-menu">
27
- <a class="navlink active" href="#">Navlink active</a>
28
- <a class="navlink" href="#">Navlink</a>
29
- <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
30
- </div>
31
- </details>
32
- </div>
33
- </details>
34
- <div class="navlinks right">
35
- <details class="header-dropdown user-menu" href="#">
36
- <summary class="btn-profile navlink">
37
- <img class="user-profile" src="/assets/images/placeholders/profile_supergirl.png">
38
- <div class="user-details">
39
- <div class="profile-role">Admin</div>
40
- <div class="profile-name">Anja Berger</div>
41
- </div>
42
- </summary>
43
- <div class="dropdown-menu profile-dropdown">
44
- <a class="dropdown-link" href="#"><span class="icon icon-user text-icon-default mr-icon-spacing"></span>Your Profile</a>
45
- <a class="dropdown-link" href="#"><span class="icon icon-cog text-icon-default mr-icon-spacing"></span>Settings</a>
46
- <a class="dropdown-link" href="#"><span class="icon icon-shutdown text-icon-default mr-icon-spacing"></span>Sign out</a>
47
- </div>
48
- </details>
49
- </div>
50
- </header>
1
+ <header class="header">
2
+ <div class="navlinks logo-wrapper"><a class="navlink header-logo" href="#"></a></div>
3
+ <div class="navlinks left">
4
+ <a class="navlink active" href="#">Navlink active</a>
5
+ <a class="navlink" href="#">Navlink</a>
6
+ <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
7
+ <details class="header-dropdown">
8
+ <summary class="navlink">Collapsable</summary>
9
+ <div class="dropdown-menu">
10
+ <a class="navlink active" href="#">Navlink active</a>
11
+ <a class="navlink" href="#">Navlink</a>
12
+ <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
13
+ </div>
14
+ </details>
15
+ </div>
16
+ <details class="mobile-links">
17
+ <summary class="mobile-menu-btn">
18
+ <div class="navlink"><span class="sr-only">Open main menu</span><span class="text-icon-default icon icon-menu" aria-hidden="true"></span></div>
19
+ </summary>
20
+ <div class="mobile-menu sidebar">
21
+ <a class="navlink active" href="#">Navlink active</a>
22
+ <a class="navlink" href="#">Navlink</a>
23
+ <a class="navlink" href="#"><span class="icon icon-check-circle-filled"></span>Navlink</a>
24
+ <details class="header-dropdown">
25
+ <summary class="navlink">Collapsable</summary>
26
+ <div class="dropdown-menu">
27
+ <a class="navlink active" href="#">Navlink active</a>
28
+ <a class="navlink" href="#">Navlink</a>
29
+ <a class="navlink" href="#"><span class="icon icon-check-circle-filled mr-icon-spacing"></span>Navlink</a>
30
+ </div>
31
+ </details>
32
+ </div>
33
+ </details>
34
+ <div class="navlinks right">
35
+ <details class="header-dropdown user-menu" href="#">
36
+ <summary class="btn-profile navlink">
37
+ <img class="user-profile" src="/assets/images/placeholders/profile_supergirl.png">
38
+ <div class="user-details">
39
+ <div class="profile-role">Admin</div>
40
+ <div class="profile-name">Anja Berger</div>
41
+ </div>
42
+ </summary>
43
+ <div class="dropdown-menu profile-dropdown">
44
+ <a class="dropdown-link" href="#"><span class="icon icon-user text-icon-default mr-icon-spacing"></span>Your Profile</a>
45
+ <a class="dropdown-link" href="#"><span class="icon icon-cog text-icon-default mr-icon-spacing"></span>Settings</a>
46
+ <a class="dropdown-link" href="#"><span class="icon icon-shutdown text-icon-default mr-icon-spacing"></span>Sign out</a>
47
+ </div>
48
+ </details>
49
+ </div>
50
+ </header>
package/src/_includes/page-with-sidebar-nocode.njk CHANGED
@@ -1,46 +1,46 @@
1
-
2
- <nav class="sidebar manager">
3
- <div class="navlinks">
4
- {% for section in collection %}
5
- <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
6
- {% endfor %}
7
- </div>
8
- </nav>
9
-
10
- <main tabindex="-1" id="main-content" class="main-content main-content-padding">
11
- <article class="">
12
-
13
- {% for item in navigation.items %}
14
- {% if page.url == item.url %}
15
- <h1>{{ item.text }}</h1>
16
- {% endif %}
17
- {% endfor %}
18
-
19
- {%- for section in collection -%}
20
- <section class="section" id="{{ section.data.title }}">
21
- <div class="section-header">
22
- <h4 class="section-title">{{ section.data.title }}</h2>
23
- </div>
24
-
25
- {% if section.data.type == 'block' %}
26
- {% set direction = 'y' %}
27
- {% else %}
28
- {% set direction = 'x' %}
29
- {% endif %}
30
- {{ section.templateContent | safe }}
31
-
32
- <details class="mt-3">
33
- <summary class="btn btn-sm btn-secondary">
34
- <span class="icon icon-format-code mr-icon-spacing"></span>
35
- <span>Show source</span>
36
- </summary>
37
- <div class="prose max-w-none bg-gray-light p-2 rounded mt-1 mb-1">
38
- <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
39
- </div>
40
- </details>
41
- </section>
42
- {%- endfor -%}
43
- </article>
44
- </main>
45
-
46
-
1
+
2
+ <nav class="sidebar manager">
3
+ <div class="navlinks">
4
+ {% for section in collection %}
5
+ <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
6
+ {% endfor %}
7
+ </div>
8
+ </nav>
9
+
10
+ <main tabindex="-1" id="main-content" class="main-content main-content-padding">
11
+ <article class="">
12
+
13
+ {% for item in navigation.items %}
14
+ {% if page.url == item.url %}
15
+ <h1>{{ item.text }}</h1>
16
+ {% endif %}
17
+ {% endfor %}
18
+
19
+ {%- for section in collection -%}
20
+ <section class="section" id="{{ section.data.title }}">
21
+ <div class="section-header">
22
+ <h4 class="section-title">{{ section.data.title }}</h2>
23
+ </div>
24
+
25
+ {% if section.data.type == 'block' %}
26
+ {% set direction = 'y' %}
27
+ {% else %}
28
+ {% set direction = 'x' %}
29
+ {% endif %}
30
+ {{ section.templateContent | safe }}
31
+
32
+ <details class="mt-3">
33
+ <summary class="btn btn-sm btn-secondary">
34
+ <span class="icon icon-format-code mr-icon-spacing"></span>
35
+ <span>Show source</span>
36
+ </summary>
37
+ <div class="prose max-w-none bg-gray-light p-2 rounded mt-1 mb-1">
38
+ <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
39
+ </div>
40
+ </details>
41
+ </section>
42
+ {%- endfor -%}
43
+ </article>
44
+ </main>
45
+
46
+
package/src/_includes/page-with-sidebar.njk CHANGED
@@ -1,46 +1,46 @@
1
-
2
- <nav class="sidebar manager">
3
- <div class="navlinks">
4
- {% for section in collection %}
5
- <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
6
- {% endfor %}
7
- </div>
8
- </nav>
9
-
10
- <main tabindex="-1" id="main-content" class="main-content main-content-padding">
11
- <article class="">
12
-
13
- {% for item in navigation.items %}
14
- {% if page.url == item.url %}
15
- <h1>{{ item.text }}</h1>
16
- {% endif %}
17
- {% endfor %}
18
-
19
- {%- for section in collection -%}
20
- <section class="section" id="{{ section.data.title }}">
21
- <div class="section-header">
22
- <h4 class="section-title">{{ section.data.title }}</h2>
23
- </div>
24
-
25
- {% if section.data.type == 'block' %}
26
- {% set direction = 'y' %}
27
- {% else %}
28
- {% set direction = 'x' %}
29
- {% endif %}
30
- {{ section.templateContent | safe }}
31
-
32
- <details class="mt-3">
33
- <summary class="btn btn-sm btn-gray">
34
- <span class="icon icon-format-code mr-icon-spacing"></span>
35
- <span>Show source</span>
36
- </summary>
37
- <div class="ds-code-preview">
38
- <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
39
- </div>
40
- </details>
41
- </section>
42
- {%- endfor -%}
43
- </article>
44
- </main>
45
-
46
-
1
+
2
+ <nav class="sidebar manager">
3
+ <div class="navlinks">
4
+ {% for section in collection %}
5
+ <a class="navlink" href="#{{ section.data.title }}">{{ section.data.title }}</a>
6
+ {% endfor %}
7
+ </div>
8
+ </nav>
9
+
10
+ <main tabindex="-1" id="main-content" class="main-content main-content-padding">
11
+ <article class="">
12
+
13
+ {% for item in navigation.items %}
14
+ {% if page.url == item.url %}
15
+ <h1>{{ item.text }}</h1>
16
+ {% endif %}
17
+ {% endfor %}
18
+
19
+ {%- for section in collection -%}
20
+ <section class="section" id="{{ section.data.title }}">
21
+ <div class="section-header">
22
+ <h4 class="section-title">{{ section.data.title }}</h2>
23
+ </div>
24
+
25
+ {% if section.data.type == 'block' %}
26
+ {% set direction = 'y' %}
27
+ {% else %}
28
+ {% set direction = 'x' %}
29
+ {% endif %}
30
+ {{ section.templateContent | safe }}
31
+
32
+ <details class="mt-3">
33
+ <summary class="btn btn-sm btn-gray">
34
+ <span class="icon icon-format-code mr-icon-spacing"></span>
35
+ <span>Show source</span>
36
+ </summary>
37
+ <div class="ds-code-preview">
38
+ <pre><code class="code html-preview">{{ section.templateContent | trim }}</code></pre>
39
+ </div>
40
+ </details>
41
+ </section>
42
+ {%- endfor -%}
43
+ </article>
44
+ </main>
45
+
46
+
package/src/_includes/page.njk CHANGED
@@ -1,39 +1,39 @@
1
- <main tabindex="-1" id="main-content" class="main-content main-content-padding">
2
- <article class="space-y-12">
3
-
4
- {% for item in navigation.items %}
5
- {% if page.url == item.url %}
6
- <h1>{{ item.text }}</h1>
7
- {% endif %}
8
- {% endfor %}
9
-
10
- {%- for section in collection -%}
11
- <section class="space-y-6" id="{{ section.data.title }}">
12
- <div class="heading-divider left thick">
13
- <div class="heading-divider-line"></div>
14
- <div class="heading-divider-text">
15
- <h2>{{ section.data.title }}</h2>
16
- </div>
17
- </div>
18
-
19
- {% if section.data.type == 'block' %}
20
- {% set direction = 'y' %}
21
- {% else %}
22
- {% set direction = 'x' %}
23
- {% endif %}
24
- <div>
25
- {{ section.templateContent | safe }}
26
- </div>
27
-
28
- <details>
29
- <summary class="btn btn-primary mb-2">
30
- Show source
31
- </summary>
32
- <div class="ds-code-preview">
33
- <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
34
- </div>
35
- </details>
36
- </section>
37
- {%- endfor -%}
38
- </article>
1
+ <main tabindex="-1" id="main-content" class="main-content main-content-padding">
2
+ <article class="space-y-12">
3
+
4
+ {% for item in navigation.items %}
5
+ {% if page.url == item.url %}
6
+ <h1>{{ item.text }}</h1>
7
+ {% endif %}
8
+ {% endfor %}
9
+
10
+ {%- for section in collection -%}
11
+ <section class="space-y-6" id="{{ section.data.title }}">
12
+ <div class="heading-divider left thick">
13
+ <div class="heading-divider-line"></div>
14
+ <div class="heading-divider-text">
15
+ <h2>{{ section.data.title }}</h2>
16
+ </div>
17
+ </div>
18
+
19
+ {% if section.data.type == 'block' %}
20
+ {% set direction = 'y' %}
21
+ {% else %}
22
+ {% set direction = 'x' %}
23
+ {% endif %}
24
+ <div>
25
+ {{ section.templateContent | safe }}
26
+ </div>
27
+
28
+ <details>
29
+ <summary class="btn btn-primary mb-2">
30
+ Show source
31
+ </summary>
32
+ <div class="ds-code-preview">
33
+ <pre><code class="html-preview">{{ section.templateContent | trim }}</code></pre>
34
+ </div>
35
+ </details>
36
+ </section>
37
+ {%- endfor -%}
38
+ </article>
39
39
  </main>