@govtechsg/sgds-web-component 0.0.10 → 0.0.12

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 (338) hide show
  1. package/README.md +102 -10
  2. package/base/card-element.d.ts +12 -0
  3. package/{lib/utils → base}/dropdown-element.d.ts +38 -37
  4. package/{lib/utils → base}/link-element.d.ts +8 -7
  5. package/{lib/utils → base}/sgds-element.d.ts +6 -5
  6. package/components/Accordion/index.d.ts +2 -0
  7. package/components/Accordion/sgds-accordion-item.d.ts +40 -0
  8. package/components/Accordion/sgds-accordion.d.ts +19 -0
  9. package/components/ActionCard/index.d.ts +1 -0
  10. package/{lib/Card → components/ActionCard}/sgds-action-card.d.ts +21 -20
  11. package/components/Alert/index.d.ts +1 -0
  12. package/components/Alert/sgds-alert.d.ts +37 -0
  13. package/components/Badge/index.d.ts +1 -0
  14. package/components/Badge/sgds-badge.d.ts +10 -0
  15. package/components/Breadcrumb/index.d.ts +2 -0
  16. package/components/Breadcrumb/sgds-breadcrumb-item.d.ts +10 -0
  17. package/components/Breadcrumb/sgds-breadcrumb.d.ts +12 -0
  18. package/components/Button/index.d.ts +1 -0
  19. package/{lib → components}/Button/sgds-button.d.ts +55 -48
  20. package/components/Checkbox/index.d.ts +1 -0
  21. package/{lib → components}/Checkbox/sgds-checkbox.d.ts +36 -36
  22. package/components/CloseButton/index.d.ts +1 -0
  23. package/components/CloseButton/sgds-closebutton.d.ts +9 -0
  24. package/components/Dropdown/index.d.ts +3 -0
  25. package/{lib → components}/Dropdown/sgds-dropdown-item.d.ts +8 -7
  26. package/{lib → components}/Dropdown/sgds-dropdown.d.ts +8 -7
  27. package/components/FileUpload/index.d.ts +1 -0
  28. package/components/FileUpload/sgds-fileupload.d.ts +22 -0
  29. package/components/Footer/index.d.ts +1 -0
  30. package/{lib → components}/Footer/sgds-footer.d.ts +27 -23
  31. package/components/Input/index.d.ts +1 -0
  32. package/{lib → components}/Input/sgds-input.d.ts +42 -42
  33. package/components/Mainnav/index.d.ts +3 -0
  34. package/components/Mainnav/sgds-mainnav-dropdown.d.ts +6 -0
  35. package/components/Mainnav/sgds-mainnav-item.d.ts +8 -0
  36. package/{lib → components}/Mainnav/sgds-mainnav.d.ts +26 -22
  37. package/components/Masthead/index.d.ts +1 -0
  38. package/{lib → components}/Masthead/sgds-masthead.d.ts +9 -12
  39. package/components/Modal/index.d.ts +1 -0
  40. package/{lib → components}/Modal/sgds-modal.d.ts +28 -28
  41. package/components/QuantityToggle/index.d.ts +1 -0
  42. package/{lib/QuantityToggle/sgds-quantitytoggle.d.ts → components/QuantityToggle/sgds-quantity-toggle.d.ts} +30 -30
  43. package/components/Radio/index.d.ts +2 -0
  44. package/{lib/Radio/sgds-radiogroup.d.ts → components/Radio/sgds-radio-group.d.ts} +41 -41
  45. package/{lib → components}/Radio/sgds-radio.d.ts +31 -31
  46. package/components/Sidenav/index.d.ts +3 -0
  47. package/{lib → components}/Sidenav/sgds-sidenav-item.d.ts +36 -28
  48. package/components/Sidenav/sgds-sidenav-link.d.ts +8 -0
  49. package/{lib → components}/Sidenav/sgds-sidenav.d.ts +10 -6
  50. package/components/Stepper/index.d.ts +1 -0
  51. package/components/Stepper/sgds-stepper.d.ts +17 -0
  52. package/components/Tab/index.d.ts +3 -0
  53. package/{lib → components}/Tab/sgds-tab.d.ts +27 -26
  54. package/{lib → components}/Tab/sgds-tabgroup.d.ts +48 -47
  55. package/{lib → components}/Tab/sgds-tabpanel.d.ts +26 -25
  56. package/components/Table/index.d.ts +1 -0
  57. package/components/Table/sgds-table.d.ts +26 -0
  58. package/components/Textarea/index.d.ts +1 -0
  59. package/{lib → components}/Textarea/sgds-textarea.d.ts +53 -53
  60. package/components/Toast/index.d.ts +1 -0
  61. package/components/Toast/sgds-toast.d.ts +22 -0
  62. package/components/Tooltip/index.d.ts +1 -0
  63. package/components/Tooltip/sgds-tooltip.d.ts +30 -0
  64. package/index.d.ts +23 -0
  65. package/index.js +11543 -0
  66. package/index.js.map +1 -0
  67. package/main.d.ts +24 -0
  68. package/package.json +23 -65
  69. package/react/accordion/index.d.ts +3 -0
  70. package/react/accordion-item/index.d.ts +8 -0
  71. package/react/action-card/index.d.ts +3 -0
  72. package/react/alert/index.d.ts +3 -0
  73. package/react/badge/index.d.ts +3 -0
  74. package/react/breadcrumb/index.d.ts +3 -0
  75. package/react/breadcrumb-item/index.d.ts +3 -0
  76. package/react/button/index.d.ts +6 -0
  77. package/react/checkbox/index.d.ts +3 -0
  78. package/react/cjs/index.js +12510 -0
  79. package/react/cjs/index.js.map +1 -0
  80. package/react/closebutton/index.d.ts +5 -0
  81. package/react/dropdown/index.d.ts +3 -0
  82. package/react/dropdown-item/index.d.ts +3 -0
  83. package/react/fileupload/index.d.ts +3 -0
  84. package/react/footer/index.d.ts +3 -0
  85. package/react/index.d.ts +34 -0
  86. package/react/index.js +12453 -0
  87. package/react/index.js.map +1 -0
  88. package/react/input/index.d.ts +3 -0
  89. package/react/mainnav/index.d.ts +3 -0
  90. package/react/mainnav-dropdown/index.d.ts +3 -0
  91. package/react/mainnav-item/index.d.ts +3 -0
  92. package/react/masthead/index.d.ts +3 -0
  93. package/react/modal/index.d.ts +3 -0
  94. package/react/package.json +10 -0
  95. package/react/quantity-toggle/index.d.ts +3 -0
  96. package/react/radio/index.d.ts +3 -0
  97. package/react/radio-group/index.d.ts +3 -0
  98. package/react/sidenav/index.d.ts +3 -0
  99. package/react/sidenav-item/index.d.ts +5 -0
  100. package/react/sidenav-link/index.d.ts +3 -0
  101. package/react/stepper/index.d.ts +3 -0
  102. package/react/tab/index.d.ts +3 -0
  103. package/react/tab-group/index.d.ts +3 -0
  104. package/react/tab-panel/index.d.ts +3 -0
  105. package/react/table/index.d.ts +3 -0
  106. package/react/textarea/index.d.ts +3 -0
  107. package/react/toast/index.d.ts +3 -0
  108. package/react/tooltip/index.d.ts +3 -0
  109. package/umd/index.js +11995 -0
  110. package/umd/index.js.map +1 -0
  111. package/{lib/utils → utils}/animate.d.ts +10 -10
  112. package/{lib/utils → utils}/animation-registry.d.ts +18 -18
  113. package/{lib/utils → utils}/breakpoints.d.ts +5 -5
  114. package/{lib/utils → utils}/defaultvalue.d.ts +2 -2
  115. package/{lib/utils → utils}/event.d.ts +2 -2
  116. package/{lib/utils → utils}/form.d.ts +38 -38
  117. package/{lib/utils → utils}/generateId.d.ts +1 -1
  118. package/{lib/utils → utils}/mergeDeep.d.ts +2 -2
  119. package/{lib/utils → utils}/modal.d.ts +12 -12
  120. package/{lib/utils → utils}/object.d.ts +2 -2
  121. package/{lib/utils → utils}/offset.d.ts +4 -4
  122. package/{lib/utils → utils}/scroll.d.ts +13 -13
  123. package/{lib/utils → utils}/slot.d.ts +22 -22
  124. package/{lib/utils → utils}/tabbable.d.ts +8 -8
  125. package/{lib/utils → utils}/watch.d.ts +14 -14
  126. package/.github/workflows/publish-latest.yml +0 -22
  127. package/.github/workflows/publish-pr.yml +0 -28
  128. package/.husky/commit-msg +0 -4
  129. package/.husky/prepare-commit-msg +0 -8
  130. package/.storybook/main.js +0 -16
  131. package/.storybook/preview-head.html +0 -11
  132. package/.storybook/preview.js +0 -9
  133. package/.vscode/settings.json +0 -7
  134. package/CONTRIBUTING.md +0 -56
  135. package/LICENSE +0 -20
  136. package/amplify.yml +0 -22
  137. package/commitlint.config.js +0 -1
  138. package/coverage/lcov-report/base.css +0 -224
  139. package/coverage/lcov-report/block-navigation.js +0 -87
  140. package/coverage/lcov-report/button-element.scss.html +0 -112
  141. package/coverage/lcov-report/button-element.ts.html +0 -145
  142. package/coverage/lcov-report/favicon.png +0 -0
  143. package/coverage/lcov-report/index.html +0 -116
  144. package/coverage/lcov-report/prettify.css +0 -1
  145. package/coverage/lcov-report/prettify.js +0 -2
  146. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  147. package/coverage/lcov-report/sorter.js +0 -196
  148. package/coverage/lcov.info +0 -32
  149. package/index.html +0 -430
  150. package/lib/Button/index.d.ts +0 -1
  151. package/lib/Button/index.js +0 -6634
  152. package/lib/Button/index.js.map +0 -1
  153. package/lib/Button/package.json +0 -7
  154. package/lib/Card/index.d.ts +0 -1
  155. package/lib/Card/index.js +0 -6150
  156. package/lib/Card/index.js.map +0 -1
  157. package/lib/Card/package.json +0 -7
  158. package/lib/Checkbox/index.d.ts +0 -1
  159. package/lib/Checkbox/index.js +0 -6366
  160. package/lib/Checkbox/index.js.map +0 -1
  161. package/lib/Checkbox/package.json +0 -7
  162. package/lib/Dropdown/index.d.ts +0 -3
  163. package/lib/Dropdown/index.js +0 -13502
  164. package/lib/Dropdown/index.js.map +0 -1
  165. package/lib/Dropdown/package.json +0 -7
  166. package/lib/Footer/index.d.ts +0 -2
  167. package/lib/Footer/index.js +0 -7168
  168. package/lib/Footer/index.js.map +0 -1
  169. package/lib/Footer/package.json +0 -7
  170. package/lib/Input/index.d.ts +0 -1
  171. package/lib/Input/index.js +0 -6656
  172. package/lib/Input/index.js.map +0 -1
  173. package/lib/Input/package.json +0 -7
  174. package/lib/Mainnav/index.d.ts +0 -4
  175. package/lib/Mainnav/index.js +0 -32546
  176. package/lib/Mainnav/index.js.map +0 -1
  177. package/lib/Mainnav/package.json +0 -7
  178. package/lib/Mainnav/sgds-mainnav-dropdown.d.ts +0 -5
  179. package/lib/Mainnav/sgds-mainnav-item.d.ts +0 -4
  180. package/lib/Masthead/index.d.ts +0 -1
  181. package/lib/Masthead/index.js +0 -7371
  182. package/lib/Masthead/index.js.map +0 -1
  183. package/lib/Masthead/package.json +0 -7
  184. package/lib/Modal/index.d.ts +0 -1
  185. package/lib/Modal/index.js +0 -6432
  186. package/lib/Modal/index.js.map +0 -1
  187. package/lib/Modal/package.json +0 -7
  188. package/lib/QuantityToggle/index.d.ts +0 -1
  189. package/lib/QuantityToggle/index.js +0 -7049
  190. package/lib/QuantityToggle/index.js.map +0 -1
  191. package/lib/QuantityToggle/package.json +0 -7
  192. package/lib/Radio/index.d.ts +0 -2
  193. package/lib/Radio/index.js +0 -12607
  194. package/lib/Radio/index.js.map +0 -1
  195. package/lib/Radio/package.json +0 -7
  196. package/lib/Sidenav/index.d.ts +0 -3
  197. package/lib/Sidenav/index.js +0 -18739
  198. package/lib/Sidenav/index.js.map +0 -1
  199. package/lib/Sidenav/package.json +0 -7
  200. package/lib/Sidenav/sgds-sidenav-link.d.ts +0 -4
  201. package/lib/Tab/index.d.ts +0 -3
  202. package/lib/Tab/index.js +0 -13557
  203. package/lib/Tab/index.js.map +0 -1
  204. package/lib/Tab/package.json +0 -7
  205. package/lib/Textarea/index.d.ts +0 -1
  206. package/lib/Textarea/index.js +0 -6696
  207. package/lib/Textarea/index.js.map +0 -1
  208. package/lib/Textarea/package.json +0 -7
  209. package/lib/index.d.ts +0 -16
  210. package/lib/index.js +0 -134580
  211. package/lib/index.js.map +0 -1
  212. package/lib/umd/index.js +0 -134587
  213. package/lib/umd/index.js.map +0 -1
  214. package/lib/utils/card-element.d.ts +0 -11
  215. package/mocks/dropdown.d.ts +0 -4
  216. package/mocks/dropdown.ts +0 -27
  217. package/mocks/link.d.ts +0 -3
  218. package/mocks/link.ts +0 -6
  219. package/rollup.config.js +0 -73
  220. package/rollup.test.config.js +0 -42
  221. package/scripts/buildUtils.js +0 -30
  222. package/scripts/frankBuild.js +0 -49
  223. package/src/Button/index.ts +0 -1
  224. package/src/Button/sgds-button.scss +0 -28
  225. package/src/Button/sgds-button.ts +0 -153
  226. package/src/Card/index.ts +0 -1
  227. package/src/Card/sgds-action-card.scss +0 -27
  228. package/src/Card/sgds-action-card.ts +0 -115
  229. package/src/Checkbox/index.ts +0 -1
  230. package/src/Checkbox/sgds-checkbox.scss +0 -4
  231. package/src/Checkbox/sgds-checkbox.ts +0 -149
  232. package/src/Dropdown/index.ts +0 -3
  233. package/src/Dropdown/sgds-dropdown-item.ts +0 -39
  234. package/src/Dropdown/sgds-dropdown.scss +0 -5
  235. package/src/Dropdown/sgds-dropdown.ts +0 -54
  236. package/src/Footer/index.ts +0 -3
  237. package/src/Footer/sgds-footer.scss +0 -5
  238. package/src/Footer/sgds-footer.ts +0 -121
  239. package/src/Input/index.ts +0 -1
  240. package/src/Input/sgds-input.scss +0 -20
  241. package/src/Input/sgds-input.ts +0 -178
  242. package/src/Mainnav/index.ts +0 -4
  243. package/src/Mainnav/sgds-mainnav-dropdown.scss +0 -13
  244. package/src/Mainnav/sgds-mainnav-dropdown.ts +0 -45
  245. package/src/Mainnav/sgds-mainnav-item.scss +0 -24
  246. package/src/Mainnav/sgds-mainnav-item.ts +0 -8
  247. package/src/Mainnav/sgds-mainnav.scss +0 -39
  248. package/src/Mainnav/sgds-mainnav.ts +0 -183
  249. package/src/Masthead/index.ts +0 -1
  250. package/src/Masthead/sgds-masthead.scss +0 -217
  251. package/src/Masthead/sgds-masthead.ts +0 -189
  252. package/src/Modal/index.ts +0 -1
  253. package/src/Modal/sgds-modal.scss +0 -128
  254. package/src/Modal/sgds-modal.ts +0 -309
  255. package/src/QuantityToggle/index.ts +0 -1
  256. package/src/QuantityToggle/sgds-quantitytoggle.scss +0 -10
  257. package/src/QuantityToggle/sgds-quantitytoggle.ts +0 -130
  258. package/src/Radio/index.ts +0 -2
  259. package/src/Radio/sgds-radio.scss +0 -5
  260. package/src/Radio/sgds-radio.ts +0 -120
  261. package/src/Radio/sgds-radiogroup.scss +0 -22
  262. package/src/Radio/sgds-radiogroup.ts +0 -221
  263. package/src/Sidenav/index.ts +0 -4
  264. package/src/Sidenav/sgds-sidenav-item.scss +0 -73
  265. package/src/Sidenav/sgds-sidenav-item.ts +0 -145
  266. package/src/Sidenav/sgds-sidenav-link.scss +0 -25
  267. package/src/Sidenav/sgds-sidenav-link.ts +0 -8
  268. package/src/Sidenav/sgds-sidenav.scss +0 -6
  269. package/src/Sidenav/sgds-sidenav.ts +0 -33
  270. package/src/Tab/index.ts +0 -3
  271. package/src/Tab/sgds-tab.scss +0 -84
  272. package/src/Tab/sgds-tab.ts +0 -87
  273. package/src/Tab/sgds-tabgroup.scss +0 -198
  274. package/src/Tab/sgds-tabgroup.ts +0 -295
  275. package/src/Tab/sgds-tabpanel.scss +0 -12
  276. package/src/Tab/sgds-tabpanel.ts +0 -55
  277. package/src/Textarea/index.ts +0 -1
  278. package/src/Textarea/sgds-textarea.scss +0 -23
  279. package/src/Textarea/sgds-textarea.ts +0 -201
  280. package/src/index.ts +0 -16
  281. package/src/utils/animate.ts +0 -69
  282. package/src/utils/animation-registry.ts +0 -71
  283. package/src/utils/base.scss +0 -14
  284. package/src/utils/breakpoints.ts +0 -5
  285. package/src/utils/card-element.ts +0 -42
  286. package/src/utils/components.style.scss +0 -531
  287. package/src/utils/defaultvalue.ts +0 -51
  288. package/src/utils/dropdown-element.ts +0 -244
  289. package/src/utils/event.ts +0 -13
  290. package/src/utils/form.ts +0 -183
  291. package/src/utils/generateId.ts +0 -4
  292. package/src/utils/link-element.ts +0 -34
  293. package/src/utils/mergeDeep.ts +0 -22
  294. package/src/utils/modal.ts +0 -64
  295. package/src/utils/object.ts +0 -2
  296. package/src/utils/offset.ts +0 -6
  297. package/src/utils/scroll.ts +0 -57
  298. package/src/utils/sgds-element.ts +0 -18
  299. package/src/utils/slot.ts +0 -102
  300. package/src/utils/tabbable.ts +0 -81
  301. package/src/utils/watch.ts +0 -62
  302. package/stories/ActionCard.stories.mdx +0 -199
  303. package/stories/Button.stories.mdx +0 -194
  304. package/stories/Checkbox.stories.mdx +0 -196
  305. package/stories/Dropdown.stories.mdx +0 -152
  306. package/stories/Footer.stories.mdx +0 -261
  307. package/stories/Input.stories.mdx +0 -236
  308. package/stories/MainNav.stories.mdx +0 -169
  309. package/stories/Masthead.stories.mdx +0 -112
  310. package/stories/Modal.stories.mdx +0 -103
  311. package/stories/QuantityToggle.stories.mdx +0 -97
  312. package/stories/Radio.stories.mdx +0 -262
  313. package/stories/Sample.stories.js +0 -29
  314. package/stories/Sample.stories.mdx +0 -33
  315. package/stories/SideNav.stories.mdx +0 -245
  316. package/stories/common.js +0 -185
  317. package/stories/textarea.stories.mdx +0 -253
  318. package/test/button.element.test.ts +0 -185
  319. package/test/checkbox.test.ts +0 -240
  320. package/test/dropdown.test.ts +0 -637
  321. package/test/footer.test.ts +0 -181
  322. package/test/generateId.test.ts +0 -18
  323. package/test/input.element.test.ts +0 -316
  324. package/test/link-element.test.ts +0 -38
  325. package/test/mainnav.test.ts +0 -313
  326. package/test/masthead.test.ts +0 -116
  327. package/test/modal.test.ts +0 -149
  328. package/test/quantitytoggle.test.ts +0 -76
  329. package/test/radio.test.ts +0 -310
  330. package/test/selectable-card.test.ts +0 -159
  331. package/test/sidenav.test.ts +0 -390
  332. package/test/tab.test.ts +0 -76
  333. package/test/textarea.test.ts +0 -126
  334. package/tsconfig.json +0 -26
  335. package/tsconfig.test.json +0 -24
  336. package/typings/scss.d.ts +0 -5
  337. package/web-dev-server.config.mjs +0 -7
  338. package/web-test-runner.config.mjs +0 -47
package/index.html DELETED
@@ -1,430 +0,0 @@
1
- <!DOCTYPE html>
2
- <html>
3
-
4
- <head>
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <!-- <link href='node_modules/@govtechsg/sgds/css/sgds.util.css' rel='stylesheet' type='text/css' /> -->
7
- <!-- <link href='node_modules/@govtechsg/sgds/css/sgds.css' rel='stylesheet' type='text/css' /> -->
8
- <link href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.8.1/font/bootstrap-icons.css" rel='stylesheet'
9
- type='text/css' />
10
- <!-- JavaScript Bundle with Popper -->
11
- <!-- CSS only -->
12
- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/css/bootstrap.min.css" rel="stylesheet"
13
- integrity="sha384-iYQeCzEYFbKjA/T2uDLTpkwGzCiq6soy8tYaI1GyVh/UjpbCx/TYkiZhlZB6+fzT" crossorigin="anonymous">
14
- <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.1/dist/js/bootstrap.bundle.min.js"
15
- integrity="sha384-u1OknCvxWvY5kfmNBILK2hRnQC3Pr17a+RTT6rIHI7NnikvbZlHgTPOOmMi466C8"
16
- crossorigin="anonymous"></script>
17
- <script type="module" id="dev-console-gateway"
18
- src="https://assets.developer.tech.gov.sg/bundled-scripts/dev-console-gateway.bundle.js"></script>
19
- <script src="https://cdn.jsdelivr.net/npm/lodash@4.17.21/lodash.min.js"></script>
20
- <script type="module"
21
- src="https://cdn.jsdelivr.net/npm/@shoelace-style/shoelace@2.0.0-beta.83/dist/shoelace.js"></script>
22
- <style>
23
- * {
24
- font-family: "bootstrap-icons", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
25
- }
26
-
27
- body {
28
- margin: 0;
29
- padding: 0;
30
- display: flex;
31
- min-height: 100vh;
32
- flex-direction: column;
33
- }
34
-
35
- sgds-footer::part(footer-bottom) {
36
- background-color: red;
37
- }
38
-
39
- /* sgds-sidenav-item::part(sidenav-btn) {
40
- color: red;
41
- border-left-color: red;
42
- }
43
- sgds-sidenav-link::part(sidenav-anchor) {
44
- color: red;
45
- } */
46
-
47
- .grid {
48
- display: grid;
49
- grid-template-areas:
50
- "masthead masthead masthead "
51
- "nav nav nav "
52
- "sidenav main main "
53
- "footer footer footer ";
54
- grid-template-columns: 240px repeat(2, 1fr);
55
- width: 100%;
56
- }
57
-
58
- sgds-sidenav-item {
59
- --sidenav-theme-color: orange;
60
- }
61
-
62
- sgds-masthead {
63
- --sgds-masthead-crest-color: white;
64
- --sgds-masthead-text-color: red;
65
- grid-area: masthead;
66
- }
67
-
68
- sgds-sidenav {
69
- grid-area: sidenav;
70
-
71
- }
72
-
73
- sgds-mainnav {
74
- grid-area: nav;
75
- }
76
-
77
- main {
78
- padding: 1rem;
79
- grid-area: main;
80
- }
81
-
82
- sgds-footer {
83
- grid-area: footer;
84
- }
85
-
86
- sgds-mainnav-item {
87
- --mainnav-item-theme-color: red;
88
- }
89
-
90
- sgds-button {
91
- flex: 1;
92
- }
93
- </style>
94
- <script src="lib/index.js"></script>
95
- </head>
96
-
97
-
98
- <body class="d-flex flex-column min-vh-100">
99
-
100
- <sgds-masthead fluid></sgds-masthead>
101
-
102
- <div class="grid">
103
- <sgds-mainnav>
104
- <img width="130" src="https://www.designsystem.tech.gov.sg/assets/img/logo-sgds.svg" slot="brand" />
105
- <sgds-mainnav-item href="#">Home</sgds-mainnav-item>
106
- <sgds-mainnav-item href="#">About</sgds-mainnav-item>
107
- <sgds-mainnav-item href="#" slot="end" class="test test2">Info</sgds-mainnav-item>
108
- <sgds-mainnav-item href="#" slot="end">Contact Us</sgds-mainnav-item>
109
- <sgds-button slot="end">Login</sgds-button>
110
- <dev-console-widget slot="non-collapsible" iconColor="black" iconWidth="28px" iconHeight="28px">
111
- </dev-console-widget>
112
- </sgds-mainnav>
113
- <sgds-sidenav class="mt-3" id="test-id">
114
- <sgds-sidenav-item active>
115
- <span slot="title">
116
- <sl-icon name="stack"></sl-icon> Title
117
- </span>
118
- <sgds-sidenav-link href="https://google.com" active>first-test</sgds-sidenav-link>
119
- <sgds-sidenav-link href="https://google.com">first-test</sgds-sidenav-link>
120
- <sgds-sidenav-link href="https://google.com">first-test</sgds-sidenav-link>
121
- </sgds-sidenav-item>
122
- <sgds-sidenav-item title="Test title 2">
123
- <span slot="title">
124
- <sl-icon name="stack"></sl-icon> Title
125
- </span>
126
- <sgds-sidenav-link href="https://google.com">first-test</sgds-sidenav-link>
127
- <sgds-sidenav-link href="https://google.com">first-test</sgds-sidenav-link>
128
- <sgds-sidenav-link href="https://google.com">first-test</sgds-sidenav-link>
129
-
130
- </sgds-sidenav-item>
131
- </sgds-sidenav>
132
-
133
-
134
- <main>
135
- <div class="container">
136
- <h2>Button</h2>
137
- <p>Button size</p>
138
- <div class="row">
139
- <div class="grid">
140
- <sgds-button size="sm" variant="primary">Hello World</sgds-button>
141
- <sgds-button variant="primary" active>Hello World</sgds-button>
142
- <sgds-button size="lg" variant="primary">Hello World</sgds-button>
143
- </div>
144
- </div>
145
- </div>
146
- <div class="container">
147
- <p>Variant</p>
148
- <div class="row">
149
- <div class="grid">
150
- <sgds-button variant="primary">
151
- Primary
152
- </sgds-button>
153
- <sgds-button variant="outline-secondary">Outline</sgds-button>
154
- <sgds-button variant="success" disabled>Disabled</sgds-button>
155
- <sgds-button variant="success" href="#">Link button</sgds-button>
156
- <sgds-button variant="warning" href="#" target="_blank" disabled>
157
- Link button _blank
158
- </sgds-button>
159
- <sgds-button variant="danger" download="logo.svg">
160
- Link button _blank
161
- </sgds-button>
162
- </div>
163
- </div>
164
- </div>
165
-
166
- <div class="container">
167
- <h2>Checkbox</h2>
168
- <sgds-checkbox>1</sgds-checkbox>
169
- <sgds-checkbox>2</sgds-checkbox>
170
- <sgds-checkbox>3</sgds-checkbox>
171
- </div>
172
- <div class="container">
173
- <h2>Radiogroup</h2>
174
- <sgds-radiogroup>
175
- <span slot="label">Select an option</span>
176
- <sgds-radio value="1">Option 1</sgds-radio>
177
- <sgds-radio value="2">Option 2</sgds-radio>
178
- <sgds-radio value="3">Option 3</sgds-radio>
179
- </sgds-radiogroup>
180
- </div>
181
- <div class="container">
182
- <h2>Selectable card</h2>
183
- <sgds-action-card>asdasd</sgds-action-card>
184
- </div>
185
- <div class="container">
186
- <h2>Input</h2>
187
- <div class="row">
188
- <div class="col-6 mb-2">
189
- <form>
190
- <sgds-input name="input1" id="input1" pattern="test" required></sgds-input>
191
- <sgds-checkbox name="cb1" id="cb1" value="lolol">no required<span slot="feedback">You are
192
- required to check this.</span></sgds-checkbox>
193
- <sgds-checkbox name="cb2" id="cb2" value="lolol1" required>with required<span
194
- slot="feedback">You are required to check this.</span></sgds-checkbox>
195
- <sgds-checkbox name="cb2" id="cb2" value="lolol1" required disabled>disabled<span
196
- slot="feedback">You are required to check this.</span></sgds-checkbox>
197
- <sgds-button id="submitButton" type="submit">Submit</sgds-button>
198
- <sgds-input label="Name" iconName="stack" hintText="this is a hint" required pattern="test"
199
- value="a"></sgds-input>
200
- <sgds-button type="submit">Submit</sgds-button>
201
- </form>
202
- </div>
203
- <div class="col-6 mb-2">
204
- <form>
205
- <sgds-input inputId="test-id" label="label"></sgds-input>
206
- <sgds-button type="submit">Submit</sgds-button>
207
- </form>
208
- </div>
209
- </div>
210
- </div>
211
- <div class="container">
212
- <h2>Quantity Toggle</h2>
213
- <div class="row">
214
- <div class="col is-6">
215
- <sgds-quantitytoggle count="5" quanttoggleId="heyhey"></sgds-quantitytoggle>
216
- <sgds-quantitytoggle step="10" count="5" disabled></sgds-quantitytoggle>
217
- <sgds-quantitytoggle step="10" count="5"></sgds-quantitytoggle>
218
- </div>
219
- </div>
220
- </div>
221
- </main>
222
- </div>
223
- <sgds-footer description="this is a prop description" title="Singapore Government Design System"
224
- lastUpdatedDate="08 Feb 2022" links='[
225
- {
226
- "title": "Column 1",
227
- "links" : [
228
- {
229
- "href": "#1",
230
- "label": "About Us"
231
- },
232
- {
233
- "href": "#2",
234
- "label": "This is a super long link"
235
- },
236
- {
237
- "href": "#3",
238
- "label": "Test"
239
- },
240
- {
241
- "href": "#4",
242
- "label": "Test"
243
- }
244
- ]
245
- },
246
- {
247
- "title": "Column 2",
248
- "links" : [
249
- {
250
- "href": "#1",
251
- "label": "About Us"
252
- },
253
- {
254
- "href": "#2",
255
- "label": "This is a super long link"
256
- },
257
- {
258
- "href": "#3",
259
- "label": "Test"
260
- },
261
- {
262
- "href": "#4",
263
- "label": "Test"
264
- }
265
- ]
266
- },
267
- {
268
- "title": "Column 3",
269
- "links" : [
270
- {
271
- "href": "#1",
272
- "label": "About Us"
273
- },
274
- {
275
- "href": "#2",
276
- "label": "This is a super long link"
277
- },
278
- {
279
- "href": "#3",
280
- "label": "Test"
281
- },
282
- {
283
- "href": "#4",
284
- "label": "Test"
285
- }
286
- ]
287
- },
288
- {
289
- "title": "Column 4",
290
- "links" : [
291
- {
292
- "href": "#1",
293
- "label": "About Us"
294
- },
295
- {
296
- "href": "#2",
297
- "label": "This is a super long link"
298
- },
299
- {
300
- "href": "#3",
301
- "label": "Test"
302
- },
303
- {
304
- "href": "#4",
305
- "label": "Test"
306
- }
307
- ]
308
- },
309
- {
310
- "title": "Column 5",
311
- "links" : [
312
- {
313
- "href": "#1",
314
- "label": "About Us"
315
- },
316
- {
317
- "href": "#2",
318
- "label": "This is a super long link"
319
- },
320
- {
321
- "href": "#3",
322
- "label": "Test"
323
- },
324
- {
325
- "href": "#4",
326
- "label": "Test"
327
- }
328
- ]
329
- },
330
- {
331
- "title": "Column 6",
332
- "links" : [
333
- {
334
- "href": "#1",
335
- "label": "About Us"
336
- },
337
- {
338
- "href": "#2",
339
- "label": "This is a super long link"
340
- },
341
- {
342
- "href": "#3",
343
- "label": "Test"
344
- },
345
- {
346
- "href": "#4",
347
- "label": "Test"
348
- }
349
- ]
350
- },
351
- {
352
- "title": "Column 6",
353
- "links" : [
354
- {
355
- "href": "#1",
356
- "label": "About Us"
357
- },
358
- {
359
- "href": "#2",
360
- "label": "This is a super long link"
361
- },
362
- {
363
- "href": "#3",
364
- "label": "Test"
365
- },
366
- {
367
- "href": "#4",
368
- "label": "Test"
369
- }
370
- ]
371
- }
372
- ]'>
373
- </sgds-footer>
374
- </div>
375
- <script>
376
- const submitButton = document.querySelector('sgds-quantitytoggle#heyhey');
377
- console.log(submitButton)
378
- // submitButton.addEventListener('sgds-change', (e) => {
379
- // e.preventDefault();
380
- // console.log(e)
381
- // });
382
-
383
- // const input = document.querySelector('sgds-checkbox#hehe');
384
- // input.addEventListener('sgds-change', (e) => {
385
- // e.preventDefault();
386
- // console.log(e);
387
- // });
388
-
389
- // } ;
390
-
391
-
392
- // grab reference to form
393
-
394
- const formElem = document.querySelector('form');
395
-
396
- // submit handler
397
-
398
- formElem.addEventListener('submit', (e) => {
399
- // on form submission, prevent default
400
- e.preventDefault();
401
-
402
- // console.log(formElem.shadowRoot?.querySelector('input[name="input1"]'));
403
- // console.log(formElem.shadowRoot?.querySelector('input[name="cb1"]'));
404
- // console.log(formElem.shadowRoot?.querySelector('input[name="cb2"]'));
405
-
406
- // construct a FormData object, which fires the formdata event
407
- const formData = new FormData(formElem);
408
- // formdata gets modified by the formdata event
409
- console.log(formData.get('input1'));
410
- console.log(formData.get('cb1'));
411
- console.log(formData.get('cb2'));
412
- });
413
-
414
- // formdata handler to retrieve data
415
-
416
- // formElem.addEventListener('formdata', (e) => {
417
- // console.log('formdata fired');
418
-
419
- // // modifies the form data
420
- // const formData = e.formData;
421
- // // formdata gets modified by the formdata event
422
- // formData.set('cb1', formData.get('cb1').toUpperCase());
423
- // formData.set('cb2', formData.get('cb2').toUpperCase());
424
- // });
425
-
426
-
427
- </script>
428
- </body>
429
-
430
- </html>
package/lib/Button/index.d.ts DELETED
@@ -1 +0,0 @@
1
- export { SgdsButton } from "./sgds-button";