@govtechsg/sgds-web-component 0.0.8 → 0.0.10

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 (263) hide show
  1. package/.github/workflows/publish-latest.yml +22 -0
  2. package/.github/workflows/publish-pr.yml +28 -0
  3. package/.husky/commit-msg +4 -0
  4. package/.husky/prepare-commit-msg +8 -0
  5. package/.storybook/main.js +16 -0
  6. package/.storybook/preview-head.html +11 -0
  7. package/.storybook/preview.js +9 -0
  8. package/.vscode/settings.json +7 -0
  9. package/CONTRIBUTING.md +56 -0
  10. package/LICENSE +20 -0
  11. package/amplify.yml +22 -0
  12. package/commitlint.config.js +1 -0
  13. package/coverage/lcov-report/base.css +224 -0
  14. package/coverage/lcov-report/block-navigation.js +87 -0
  15. package/coverage/lcov-report/button-element.scss.html +112 -0
  16. package/coverage/lcov-report/button-element.ts.html +145 -0
  17. package/coverage/lcov-report/favicon.png +0 -0
  18. package/coverage/lcov-report/index.html +116 -0
  19. package/coverage/lcov-report/prettify.css +1 -0
  20. package/coverage/lcov-report/prettify.js +2 -0
  21. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  22. package/coverage/lcov-report/sorter.js +196 -0
  23. package/coverage/lcov.info +32 -0
  24. package/index.html +430 -0
  25. package/{Button → lib/Button}/index.d.ts +0 -0
  26. package/{Button → lib/Button}/index.js +304 -39
  27. package/lib/Button/index.js.map +1 -0
  28. package/{Button → lib/Button}/package.json +0 -0
  29. package/lib/Button/sgds-button.d.ts +48 -0
  30. package/lib/Card/index.d.ts +1 -0
  31. package/lib/Card/index.js +6150 -0
  32. package/lib/Card/index.js.map +1 -0
  33. package/lib/Card/package.json +7 -0
  34. package/lib/Card/sgds-action-card.d.ts +20 -0
  35. package/lib/Checkbox/index.d.ts +1 -0
  36. package/lib/Checkbox/index.js +6366 -0
  37. package/lib/Checkbox/index.js.map +1 -0
  38. package/lib/Checkbox/package.json +7 -0
  39. package/lib/Checkbox/sgds-checkbox.d.ts +36 -0
  40. package/lib/Dropdown/index.d.ts +3 -0
  41. package/{Mainnav → lib/Dropdown}/index.js +2785 -9262
  42. package/lib/Dropdown/index.js.map +1 -0
  43. package/lib/Dropdown/package.json +7 -0
  44. package/lib/Dropdown/sgds-dropdown-item.d.ts +7 -0
  45. package/lib/Dropdown/sgds-dropdown.d.ts +7 -0
  46. package/{Footer → lib/Footer}/index.d.ts +0 -0
  47. package/{Footer → lib/Footer}/index.js +111 -95
  48. package/lib/Footer/index.js.map +1 -0
  49. package/{Footer → lib/Footer}/package.json +0 -0
  50. package/{Footer → lib/Footer}/sgds-footer.d.ts +2 -2
  51. package/lib/Input/index.d.ts +1 -0
  52. package/lib/Input/index.js +6656 -0
  53. package/lib/Input/index.js.map +1 -0
  54. package/lib/Input/package.json +7 -0
  55. package/lib/Input/sgds-input.d.ts +42 -0
  56. package/{Mainnav → lib/Mainnav}/index.d.ts +1 -0
  57. package/{index.js → lib/Mainnav/index.js} +3870 -23414
  58. package/lib/Mainnav/index.js.map +1 -0
  59. package/{Mainnav → lib/Mainnav}/package.json +0 -0
  60. package/lib/Mainnav/sgds-mainnav-dropdown.d.ts +5 -0
  61. package/lib/Mainnav/sgds-mainnav-item.d.ts +4 -0
  62. package/{Mainnav → lib/Mainnav}/sgds-mainnav.d.ts +2 -2
  63. package/{Masthead → lib/Masthead}/index.d.ts +0 -0
  64. package/{Masthead → lib/Masthead}/index.js +140 -114
  65. package/lib/Masthead/index.js.map +1 -0
  66. package/{Masthead → lib/Masthead}/package.json +0 -0
  67. package/{Masthead → lib/Masthead}/sgds-masthead.d.ts +1 -1
  68. package/lib/Modal/index.d.ts +1 -0
  69. package/lib/Modal/index.js +6432 -0
  70. package/lib/Modal/index.js.map +1 -0
  71. package/lib/Modal/package.json +7 -0
  72. package/lib/Modal/sgds-modal.d.ts +28 -0
  73. package/lib/QuantityToggle/index.d.ts +1 -0
  74. package/lib/QuantityToggle/index.js +7049 -0
  75. package/lib/QuantityToggle/index.js.map +1 -0
  76. package/lib/QuantityToggle/package.json +7 -0
  77. package/lib/QuantityToggle/sgds-quantitytoggle.d.ts +30 -0
  78. package/lib/Radio/index.d.ts +2 -0
  79. package/lib/Radio/index.js +12607 -0
  80. package/lib/Radio/index.js.map +1 -0
  81. package/lib/Radio/package.json +7 -0
  82. package/lib/Radio/sgds-radio.d.ts +31 -0
  83. package/lib/Radio/sgds-radiogroup.d.ts +41 -0
  84. package/{Sidenav → lib/Sidenav}/index.d.ts +0 -0
  85. package/{Sidenav → lib/Sidenav}/index.js +2266 -2171
  86. package/lib/Sidenav/index.js.map +1 -0
  87. package/{Sidenav → lib/Sidenav}/package.json +0 -0
  88. package/{Sidenav → lib/Sidenav}/sgds-sidenav-item.d.ts +2 -1
  89. package/lib/Sidenav/sgds-sidenav-link.d.ts +4 -0
  90. package/{Sidenav → lib/Sidenav}/sgds-sidenav.d.ts +1 -1
  91. package/lib/Tab/index.d.ts +3 -0
  92. package/lib/Tab/index.js +13557 -0
  93. package/lib/Tab/index.js.map +1 -0
  94. package/lib/Tab/package.json +7 -0
  95. package/lib/Tab/sgds-tab.d.ts +26 -0
  96. package/lib/Tab/sgds-tabgroup.d.ts +47 -0
  97. package/lib/Tab/sgds-tabpanel.d.ts +25 -0
  98. package/lib/Textarea/index.d.ts +1 -0
  99. package/lib/Textarea/index.js +6696 -0
  100. package/lib/Textarea/index.js.map +1 -0
  101. package/lib/Textarea/package.json +7 -0
  102. package/lib/Textarea/sgds-textarea.d.ts +53 -0
  103. package/lib/index.d.ts +16 -0
  104. package/lib/index.js +134580 -0
  105. package/lib/index.js.map +1 -0
  106. package/lib/umd/index.js +134587 -0
  107. package/lib/umd/index.js.map +1 -0
  108. package/lib/utils/animate.d.ts +10 -0
  109. package/lib/utils/animation-registry.d.ts +18 -0
  110. package/{utils → lib/utils}/breakpoints.d.ts +0 -0
  111. package/lib/utils/card-element.d.ts +11 -0
  112. package/lib/utils/defaultvalue.d.ts +2 -0
  113. package/lib/utils/dropdown-element.d.ts +37 -0
  114. package/lib/utils/event.d.ts +2 -0
  115. package/lib/utils/form.d.ts +38 -0
  116. package/{utils → lib/utils}/generateId.d.ts +0 -0
  117. package/lib/utils/link-element.d.ts +7 -0
  118. package/lib/utils/mergeDeep.d.ts +2 -0
  119. package/lib/utils/modal.d.ts +12 -0
  120. package/lib/utils/object.d.ts +2 -0
  121. package/lib/utils/offset.d.ts +4 -0
  122. package/lib/utils/scroll.d.ts +13 -0
  123. package/{utils → lib/utils}/sgds-element.d.ts +0 -0
  124. package/lib/utils/slot.d.ts +22 -0
  125. package/lib/utils/tabbable.d.ts +8 -0
  126. package/lib/utils/watch.d.ts +14 -0
  127. package/mocks/dropdown.d.ts +4 -0
  128. package/mocks/dropdown.ts +27 -0
  129. package/mocks/link.d.ts +3 -0
  130. package/mocks/link.ts +6 -0
  131. package/package.json +65 -10
  132. package/rollup.config.js +73 -0
  133. package/rollup.test.config.js +42 -0
  134. package/scripts/buildUtils.js +30 -0
  135. package/scripts/frankBuild.js +49 -0
  136. package/src/Button/index.ts +1 -0
  137. package/src/Button/sgds-button.scss +28 -0
  138. package/src/Button/sgds-button.ts +153 -0
  139. package/src/Card/index.ts +1 -0
  140. package/src/Card/sgds-action-card.scss +27 -0
  141. package/src/Card/sgds-action-card.ts +115 -0
  142. package/src/Checkbox/index.ts +1 -0
  143. package/src/Checkbox/sgds-checkbox.scss +4 -0
  144. package/src/Checkbox/sgds-checkbox.ts +149 -0
  145. package/src/Dropdown/index.ts +3 -0
  146. package/src/Dropdown/sgds-dropdown-item.ts +39 -0
  147. package/src/Dropdown/sgds-dropdown.scss +5 -0
  148. package/src/Dropdown/sgds-dropdown.ts +54 -0
  149. package/src/Footer/index.ts +3 -0
  150. package/src/Footer/sgds-footer.scss +5 -0
  151. package/src/Footer/sgds-footer.ts +121 -0
  152. package/src/Input/index.ts +1 -0
  153. package/src/Input/sgds-input.scss +20 -0
  154. package/src/Input/sgds-input.ts +178 -0
  155. package/src/Mainnav/index.ts +4 -0
  156. package/src/Mainnav/sgds-mainnav-dropdown.scss +13 -0
  157. package/src/Mainnav/sgds-mainnav-dropdown.ts +45 -0
  158. package/src/Mainnav/sgds-mainnav-item.scss +24 -0
  159. package/src/Mainnav/sgds-mainnav-item.ts +8 -0
  160. package/src/Mainnav/sgds-mainnav.scss +39 -0
  161. package/src/Mainnav/sgds-mainnav.ts +183 -0
  162. package/src/Masthead/index.ts +1 -0
  163. package/src/Masthead/sgds-masthead.scss +217 -0
  164. package/src/Masthead/sgds-masthead.ts +189 -0
  165. package/src/Modal/index.ts +1 -0
  166. package/src/Modal/sgds-modal.scss +128 -0
  167. package/src/Modal/sgds-modal.ts +309 -0
  168. package/src/QuantityToggle/index.ts +1 -0
  169. package/src/QuantityToggle/sgds-quantitytoggle.scss +10 -0
  170. package/src/QuantityToggle/sgds-quantitytoggle.ts +130 -0
  171. package/src/Radio/index.ts +2 -0
  172. package/src/Radio/sgds-radio.scss +5 -0
  173. package/src/Radio/sgds-radio.ts +120 -0
  174. package/src/Radio/sgds-radiogroup.scss +22 -0
  175. package/src/Radio/sgds-radiogroup.ts +221 -0
  176. package/src/Sidenav/index.ts +4 -0
  177. package/src/Sidenav/sgds-sidenav-item.scss +73 -0
  178. package/src/Sidenav/sgds-sidenav-item.ts +145 -0
  179. package/src/Sidenav/sgds-sidenav-link.scss +25 -0
  180. package/src/Sidenav/sgds-sidenav-link.ts +8 -0
  181. package/src/Sidenav/sgds-sidenav.scss +6 -0
  182. package/src/Sidenav/sgds-sidenav.ts +33 -0
  183. package/src/Tab/index.ts +3 -0
  184. package/src/Tab/sgds-tab.scss +84 -0
  185. package/src/Tab/sgds-tab.ts +87 -0
  186. package/src/Tab/sgds-tabgroup.scss +198 -0
  187. package/src/Tab/sgds-tabgroup.ts +295 -0
  188. package/src/Tab/sgds-tabpanel.scss +12 -0
  189. package/src/Tab/sgds-tabpanel.ts +55 -0
  190. package/src/Textarea/index.ts +1 -0
  191. package/src/Textarea/sgds-textarea.scss +23 -0
  192. package/src/Textarea/sgds-textarea.ts +201 -0
  193. package/src/index.ts +16 -0
  194. package/src/utils/animate.ts +69 -0
  195. package/src/utils/animation-registry.ts +71 -0
  196. package/src/utils/base.scss +14 -0
  197. package/src/utils/breakpoints.ts +5 -0
  198. package/src/utils/card-element.ts +42 -0
  199. package/src/utils/components.style.scss +531 -0
  200. package/src/utils/defaultvalue.ts +51 -0
  201. package/src/utils/dropdown-element.ts +244 -0
  202. package/src/utils/event.ts +13 -0
  203. package/src/utils/form.ts +183 -0
  204. package/src/utils/generateId.ts +4 -0
  205. package/src/utils/link-element.ts +34 -0
  206. package/src/utils/mergeDeep.ts +22 -0
  207. package/src/utils/modal.ts +64 -0
  208. package/src/utils/object.ts +2 -0
  209. package/src/utils/offset.ts +6 -0
  210. package/src/utils/scroll.ts +57 -0
  211. package/src/utils/sgds-element.ts +18 -0
  212. package/src/utils/slot.ts +102 -0
  213. package/src/utils/tabbable.ts +81 -0
  214. package/src/utils/watch.ts +62 -0
  215. package/stories/ActionCard.stories.mdx +199 -0
  216. package/stories/Button.stories.mdx +194 -0
  217. package/stories/Checkbox.stories.mdx +196 -0
  218. package/stories/Dropdown.stories.mdx +152 -0
  219. package/stories/Footer.stories.mdx +261 -0
  220. package/stories/Input.stories.mdx +236 -0
  221. package/stories/MainNav.stories.mdx +169 -0
  222. package/stories/Masthead.stories.mdx +112 -0
  223. package/stories/Modal.stories.mdx +103 -0
  224. package/stories/QuantityToggle.stories.mdx +97 -0
  225. package/stories/Radio.stories.mdx +262 -0
  226. package/stories/Sample.stories.js +29 -0
  227. package/stories/Sample.stories.mdx +33 -0
  228. package/stories/SideNav.stories.mdx +245 -0
  229. package/stories/common.js +185 -0
  230. package/stories/textarea.stories.mdx +253 -0
  231. package/test/button.element.test.ts +185 -0
  232. package/test/checkbox.test.ts +240 -0
  233. package/test/dropdown.test.ts +637 -0
  234. package/test/footer.test.ts +181 -0
  235. package/test/generateId.test.ts +18 -0
  236. package/test/input.element.test.ts +316 -0
  237. package/test/link-element.test.ts +38 -0
  238. package/test/mainnav.test.ts +313 -0
  239. package/test/masthead.test.ts +116 -0
  240. package/test/modal.test.ts +149 -0
  241. package/test/quantitytoggle.test.ts +76 -0
  242. package/test/radio.test.ts +310 -0
  243. package/test/selectable-card.test.ts +159 -0
  244. package/test/sidenav.test.ts +390 -0
  245. package/test/tab.test.ts +76 -0
  246. package/test/textarea.test.ts +126 -0
  247. package/tsconfig.json +26 -0
  248. package/tsconfig.test.json +24 -0
  249. package/typings/scss.d.ts +5 -0
  250. package/web-dev-server.config.mjs +7 -0
  251. package/web-test-runner.config.mjs +47 -0
  252. package/Button/index.js.map +0 -1
  253. package/Button/sgds-button.d.ts +0 -23
  254. package/Footer/index.js.map +0 -1
  255. package/Mainnav/index.js.map +0 -1
  256. package/Mainnav/sgds-mainnav-item.d.ts +0 -7
  257. package/Masthead/index.js.map +0 -1
  258. package/Sidenav/index.js.map +0 -1
  259. package/Sidenav/sgds-sidenav-link.d.ts +0 -7
  260. package/index.d.ts +0 -5
  261. package/index.js.map +0 -1
  262. package/umd/index.js +0 -52097
  263. package/umd/index.js.map +0 -1
package/index.html ADDED
@@ -0,0 +1,430 @@
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/{Button → lib/Button}/index.d.ts RENAMED
File without changes