@govtechsg/sgds-web-component 0.0.10 → 0.0.11

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 (251) hide show
  1. package/package.json +7 -64
  2. package/.github/workflows/publish-latest.yml +0 -22
  3. package/.github/workflows/publish-pr.yml +0 -28
  4. package/.husky/commit-msg +0 -4
  5. package/.husky/prepare-commit-msg +0 -8
  6. package/.storybook/main.js +0 -16
  7. package/.storybook/preview-head.html +0 -11
  8. package/.storybook/preview.js +0 -9
  9. package/.vscode/settings.json +0 -7
  10. package/CONTRIBUTING.md +0 -56
  11. package/LICENSE +0 -20
  12. package/amplify.yml +0 -22
  13. package/commitlint.config.js +0 -1
  14. package/coverage/lcov-report/base.css +0 -224
  15. package/coverage/lcov-report/block-navigation.js +0 -87
  16. package/coverage/lcov-report/button-element.scss.html +0 -112
  17. package/coverage/lcov-report/button-element.ts.html +0 -145
  18. package/coverage/lcov-report/favicon.png +0 -0
  19. package/coverage/lcov-report/index.html +0 -116
  20. package/coverage/lcov-report/prettify.css +0 -1
  21. package/coverage/lcov-report/prettify.js +0 -2
  22. package/coverage/lcov-report/sort-arrow-sprite.png +0 -0
  23. package/coverage/lcov-report/sorter.js +0 -196
  24. package/coverage/lcov.info +0 -32
  25. package/index.html +0 -430
  26. package/mocks/dropdown.d.ts +0 -4
  27. package/mocks/dropdown.ts +0 -27
  28. package/mocks/link.d.ts +0 -3
  29. package/mocks/link.ts +0 -6
  30. package/rollup.config.js +0 -73
  31. package/rollup.test.config.js +0 -42
  32. package/scripts/buildUtils.js +0 -30
  33. package/scripts/frankBuild.js +0 -49
  34. package/src/Button/index.ts +0 -1
  35. package/src/Button/sgds-button.scss +0 -28
  36. package/src/Button/sgds-button.ts +0 -153
  37. package/src/Card/index.ts +0 -1
  38. package/src/Card/sgds-action-card.scss +0 -27
  39. package/src/Card/sgds-action-card.ts +0 -115
  40. package/src/Checkbox/index.ts +0 -1
  41. package/src/Checkbox/sgds-checkbox.scss +0 -4
  42. package/src/Checkbox/sgds-checkbox.ts +0 -149
  43. package/src/Dropdown/index.ts +0 -3
  44. package/src/Dropdown/sgds-dropdown-item.ts +0 -39
  45. package/src/Dropdown/sgds-dropdown.scss +0 -5
  46. package/src/Dropdown/sgds-dropdown.ts +0 -54
  47. package/src/Footer/index.ts +0 -3
  48. package/src/Footer/sgds-footer.scss +0 -5
  49. package/src/Footer/sgds-footer.ts +0 -121
  50. package/src/Input/index.ts +0 -1
  51. package/src/Input/sgds-input.scss +0 -20
  52. package/src/Input/sgds-input.ts +0 -178
  53. package/src/Mainnav/index.ts +0 -4
  54. package/src/Mainnav/sgds-mainnav-dropdown.scss +0 -13
  55. package/src/Mainnav/sgds-mainnav-dropdown.ts +0 -45
  56. package/src/Mainnav/sgds-mainnav-item.scss +0 -24
  57. package/src/Mainnav/sgds-mainnav-item.ts +0 -8
  58. package/src/Mainnav/sgds-mainnav.scss +0 -39
  59. package/src/Mainnav/sgds-mainnav.ts +0 -183
  60. package/src/Masthead/index.ts +0 -1
  61. package/src/Masthead/sgds-masthead.scss +0 -217
  62. package/src/Masthead/sgds-masthead.ts +0 -189
  63. package/src/Modal/index.ts +0 -1
  64. package/src/Modal/sgds-modal.scss +0 -128
  65. package/src/Modal/sgds-modal.ts +0 -309
  66. package/src/QuantityToggle/index.ts +0 -1
  67. package/src/QuantityToggle/sgds-quantitytoggle.scss +0 -10
  68. package/src/QuantityToggle/sgds-quantitytoggle.ts +0 -130
  69. package/src/Radio/index.ts +0 -2
  70. package/src/Radio/sgds-radio.scss +0 -5
  71. package/src/Radio/sgds-radio.ts +0 -120
  72. package/src/Radio/sgds-radiogroup.scss +0 -22
  73. package/src/Radio/sgds-radiogroup.ts +0 -221
  74. package/src/Sidenav/index.ts +0 -4
  75. package/src/Sidenav/sgds-sidenav-item.scss +0 -73
  76. package/src/Sidenav/sgds-sidenav-item.ts +0 -145
  77. package/src/Sidenav/sgds-sidenav-link.scss +0 -25
  78. package/src/Sidenav/sgds-sidenav-link.ts +0 -8
  79. package/src/Sidenav/sgds-sidenav.scss +0 -6
  80. package/src/Sidenav/sgds-sidenav.ts +0 -33
  81. package/src/Tab/index.ts +0 -3
  82. package/src/Tab/sgds-tab.scss +0 -84
  83. package/src/Tab/sgds-tab.ts +0 -87
  84. package/src/Tab/sgds-tabgroup.scss +0 -198
  85. package/src/Tab/sgds-tabgroup.ts +0 -295
  86. package/src/Tab/sgds-tabpanel.scss +0 -12
  87. package/src/Tab/sgds-tabpanel.ts +0 -55
  88. package/src/Textarea/index.ts +0 -1
  89. package/src/Textarea/sgds-textarea.scss +0 -23
  90. package/src/Textarea/sgds-textarea.ts +0 -201
  91. package/src/index.ts +0 -16
  92. package/src/utils/animate.ts +0 -69
  93. package/src/utils/animation-registry.ts +0 -71
  94. package/src/utils/base.scss +0 -14
  95. package/src/utils/breakpoints.ts +0 -5
  96. package/src/utils/card-element.ts +0 -42
  97. package/src/utils/components.style.scss +0 -531
  98. package/src/utils/defaultvalue.ts +0 -51
  99. package/src/utils/dropdown-element.ts +0 -244
  100. package/src/utils/event.ts +0 -13
  101. package/src/utils/form.ts +0 -183
  102. package/src/utils/generateId.ts +0 -4
  103. package/src/utils/link-element.ts +0 -34
  104. package/src/utils/mergeDeep.ts +0 -22
  105. package/src/utils/modal.ts +0 -64
  106. package/src/utils/object.ts +0 -2
  107. package/src/utils/offset.ts +0 -6
  108. package/src/utils/scroll.ts +0 -57
  109. package/src/utils/sgds-element.ts +0 -18
  110. package/src/utils/slot.ts +0 -102
  111. package/src/utils/tabbable.ts +0 -81
  112. package/src/utils/watch.ts +0 -62
  113. package/stories/ActionCard.stories.mdx +0 -199
  114. package/stories/Button.stories.mdx +0 -194
  115. package/stories/Checkbox.stories.mdx +0 -196
  116. package/stories/Dropdown.stories.mdx +0 -152
  117. package/stories/Footer.stories.mdx +0 -261
  118. package/stories/Input.stories.mdx +0 -236
  119. package/stories/MainNav.stories.mdx +0 -169
  120. package/stories/Masthead.stories.mdx +0 -112
  121. package/stories/Modal.stories.mdx +0 -103
  122. package/stories/QuantityToggle.stories.mdx +0 -97
  123. package/stories/Radio.stories.mdx +0 -262
  124. package/stories/Sample.stories.js +0 -29
  125. package/stories/Sample.stories.mdx +0 -33
  126. package/stories/SideNav.stories.mdx +0 -245
  127. package/stories/common.js +0 -185
  128. package/stories/textarea.stories.mdx +0 -253
  129. package/test/button.element.test.ts +0 -185
  130. package/test/checkbox.test.ts +0 -240
  131. package/test/dropdown.test.ts +0 -637
  132. package/test/footer.test.ts +0 -181
  133. package/test/generateId.test.ts +0 -18
  134. package/test/input.element.test.ts +0 -316
  135. package/test/link-element.test.ts +0 -38
  136. package/test/mainnav.test.ts +0 -313
  137. package/test/masthead.test.ts +0 -116
  138. package/test/modal.test.ts +0 -149
  139. package/test/quantitytoggle.test.ts +0 -76
  140. package/test/radio.test.ts +0 -310
  141. package/test/selectable-card.test.ts +0 -159
  142. package/test/sidenav.test.ts +0 -390
  143. package/test/tab.test.ts +0 -76
  144. package/test/textarea.test.ts +0 -126
  145. package/tsconfig.json +0 -26
  146. package/tsconfig.test.json +0 -24
  147. package/typings/scss.d.ts +0 -5
  148. package/web-dev-server.config.mjs +0 -7
  149. package/web-test-runner.config.mjs +0 -47
  150. /package/{lib/Button → Button}/index.d.ts +0 -0
  151. /package/{lib/Button → Button}/index.js +0 -0
  152. /package/{lib/Button → Button}/index.js.map +0 -0
  153. /package/{lib/Button → Button}/package.json +0 -0
  154. /package/{lib/Button → Button}/sgds-button.d.ts +0 -0
  155. /package/{lib/Card → Card}/index.d.ts +0 -0
  156. /package/{lib/Card → Card}/index.js +0 -0
  157. /package/{lib/Card → Card}/index.js.map +0 -0
  158. /package/{lib/Card → Card}/package.json +0 -0
  159. /package/{lib/Card → Card}/sgds-action-card.d.ts +0 -0
  160. /package/{lib/Checkbox → Checkbox}/index.d.ts +0 -0
  161. /package/{lib/Checkbox → Checkbox}/index.js +0 -0
  162. /package/{lib/Checkbox → Checkbox}/index.js.map +0 -0
  163. /package/{lib/Checkbox → Checkbox}/package.json +0 -0
  164. /package/{lib/Checkbox → Checkbox}/sgds-checkbox.d.ts +0 -0
  165. /package/{lib/Dropdown → Dropdown}/index.d.ts +0 -0
  166. /package/{lib/Dropdown → Dropdown}/index.js +0 -0
  167. /package/{lib/Dropdown → Dropdown}/index.js.map +0 -0
  168. /package/{lib/Dropdown → Dropdown}/package.json +0 -0
  169. /package/{lib/Dropdown → Dropdown}/sgds-dropdown-item.d.ts +0 -0
  170. /package/{lib/Dropdown → Dropdown}/sgds-dropdown.d.ts +0 -0
  171. /package/{lib/Footer → Footer}/index.d.ts +0 -0
  172. /package/{lib/Footer → Footer}/index.js +0 -0
  173. /package/{lib/Footer → Footer}/index.js.map +0 -0
  174. /package/{lib/Footer → Footer}/package.json +0 -0
  175. /package/{lib/Footer → Footer}/sgds-footer.d.ts +0 -0
  176. /package/{lib/Input → Input}/index.d.ts +0 -0
  177. /package/{lib/Input → Input}/index.js +0 -0
  178. /package/{lib/Input → Input}/index.js.map +0 -0
  179. /package/{lib/Input → Input}/package.json +0 -0
  180. /package/{lib/Input → Input}/sgds-input.d.ts +0 -0
  181. /package/{lib/Mainnav → Mainnav}/index.d.ts +0 -0
  182. /package/{lib/Mainnav → Mainnav}/index.js +0 -0
  183. /package/{lib/Mainnav → Mainnav}/index.js.map +0 -0
  184. /package/{lib/Mainnav → Mainnav}/package.json +0 -0
  185. /package/{lib/Mainnav → Mainnav}/sgds-mainnav-dropdown.d.ts +0 -0
  186. /package/{lib/Mainnav → Mainnav}/sgds-mainnav-item.d.ts +0 -0
  187. /package/{lib/Mainnav → Mainnav}/sgds-mainnav.d.ts +0 -0
  188. /package/{lib/Masthead → Masthead}/index.d.ts +0 -0
  189. /package/{lib/Masthead → Masthead}/index.js +0 -0
  190. /package/{lib/Masthead → Masthead}/index.js.map +0 -0
  191. /package/{lib/Masthead → Masthead}/package.json +0 -0
  192. /package/{lib/Masthead → Masthead}/sgds-masthead.d.ts +0 -0
  193. /package/{lib/Modal → Modal}/index.d.ts +0 -0
  194. /package/{lib/Modal → Modal}/index.js +0 -0
  195. /package/{lib/Modal → Modal}/index.js.map +0 -0
  196. /package/{lib/Modal → Modal}/package.json +0 -0
  197. /package/{lib/Modal → Modal}/sgds-modal.d.ts +0 -0
  198. /package/{lib/QuantityToggle → QuantityToggle}/index.d.ts +0 -0
  199. /package/{lib/QuantityToggle → QuantityToggle}/index.js +0 -0
  200. /package/{lib/QuantityToggle → QuantityToggle}/index.js.map +0 -0
  201. /package/{lib/QuantityToggle → QuantityToggle}/package.json +0 -0
  202. /package/{lib/QuantityToggle → QuantityToggle}/sgds-quantitytoggle.d.ts +0 -0
  203. /package/{lib/Radio → Radio}/index.d.ts +0 -0
  204. /package/{lib/Radio → Radio}/index.js +0 -0
  205. /package/{lib/Radio → Radio}/index.js.map +0 -0
  206. /package/{lib/Radio → Radio}/package.json +0 -0
  207. /package/{lib/Radio → Radio}/sgds-radio.d.ts +0 -0
  208. /package/{lib/Radio → Radio}/sgds-radiogroup.d.ts +0 -0
  209. /package/{lib/Sidenav → Sidenav}/index.d.ts +0 -0
  210. /package/{lib/Sidenav → Sidenav}/index.js +0 -0
  211. /package/{lib/Sidenav → Sidenav}/index.js.map +0 -0
  212. /package/{lib/Sidenav → Sidenav}/package.json +0 -0
  213. /package/{lib/Sidenav → Sidenav}/sgds-sidenav-item.d.ts +0 -0
  214. /package/{lib/Sidenav → Sidenav}/sgds-sidenav-link.d.ts +0 -0
  215. /package/{lib/Sidenav → Sidenav}/sgds-sidenav.d.ts +0 -0
  216. /package/{lib/Tab → Tab}/index.d.ts +0 -0
  217. /package/{lib/Tab → Tab}/index.js +0 -0
  218. /package/{lib/Tab → Tab}/index.js.map +0 -0
  219. /package/{lib/Tab → Tab}/package.json +0 -0
  220. /package/{lib/Tab → Tab}/sgds-tab.d.ts +0 -0
  221. /package/{lib/Tab → Tab}/sgds-tabgroup.d.ts +0 -0
  222. /package/{lib/Tab → Tab}/sgds-tabpanel.d.ts +0 -0
  223. /package/{lib/Textarea → Textarea}/index.d.ts +0 -0
  224. /package/{lib/Textarea → Textarea}/index.js +0 -0
  225. /package/{lib/Textarea → Textarea}/index.js.map +0 -0
  226. /package/{lib/Textarea → Textarea}/package.json +0 -0
  227. /package/{lib/Textarea → Textarea}/sgds-textarea.d.ts +0 -0
  228. /package/{lib/index.d.ts → index.d.ts} +0 -0
  229. /package/{lib/index.js → index.js} +0 -0
  230. /package/{lib/index.js.map → index.js.map} +0 -0
  231. /package/{lib/umd → umd}/index.js +0 -0
  232. /package/{lib/umd → umd}/index.js.map +0 -0
  233. /package/{lib/utils → utils}/animate.d.ts +0 -0
  234. /package/{lib/utils → utils}/animation-registry.d.ts +0 -0
  235. /package/{lib/utils → utils}/breakpoints.d.ts +0 -0
  236. /package/{lib/utils → utils}/card-element.d.ts +0 -0
  237. /package/{lib/utils → utils}/defaultvalue.d.ts +0 -0
  238. /package/{lib/utils → utils}/dropdown-element.d.ts +0 -0
  239. /package/{lib/utils → utils}/event.d.ts +0 -0
  240. /package/{lib/utils → utils}/form.d.ts +0 -0
  241. /package/{lib/utils → utils}/generateId.d.ts +0 -0
  242. /package/{lib/utils → utils}/link-element.d.ts +0 -0
  243. /package/{lib/utils → utils}/mergeDeep.d.ts +0 -0
  244. /package/{lib/utils → utils}/modal.d.ts +0 -0
  245. /package/{lib/utils → utils}/object.d.ts +0 -0
  246. /package/{lib/utils → utils}/offset.d.ts +0 -0
  247. /package/{lib/utils → utils}/scroll.d.ts +0 -0
  248. /package/{lib/utils → utils}/sgds-element.d.ts +0 -0
  249. /package/{lib/utils → utils}/slot.d.ts +0 -0
  250. /package/{lib/utils → utils}/tabbable.d.ts +0 -0
  251. /package/{lib/utils → utils}/watch.d.ts +0 -0
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/mocks/dropdown.d.ts DELETED
@@ -1,4 +0,0 @@
1
- import { DropdownElement } from "../src/utils/dropdown-element";
2
- export declare class MockDropdown extends DropdownElement {
3
- render(): import("lit-html").TemplateResult<1>;
4
- }
package/mocks/dropdown.ts DELETED
@@ -1,27 +0,0 @@
1
- import { html } from "lit";
2
- import { customElement } from "lit/decorators.js";
3
- import { ref } from "lit/directives/ref.js";
4
- import { DropdownElement } from "../src/utils/dropdown-element";
5
-
6
- @customElement("mock-dropdown")
7
- export class MockDropdown extends DropdownElement {
8
- render() {
9
- return html`
10
- <div>
11
- <button
12
- variant="outline-${this.variant}"
13
- ?disabled=${this.disabled}
14
- aria-expanded="${this.menuIsOpen}"
15
- ${ref(this.myDropdown)}
16
- @click=${() => this._onClickButton()}
17
- id=${this.togglerId}
18
- >
19
- Mock Dropdown
20
- </button>
21
- <ul class="dropdown-menu" role="menu" part="menu">
22
- <slot @click=${this._handleSelectSlot}></slot>
23
- </ul>
24
- </div>
25
- `;
26
- }
27
- }
package/mocks/link.d.ts DELETED
@@ -1,3 +0,0 @@
1
- import LinkElement from "../src/utils/link-element";
2
- export declare class MockLink extends LinkElement {
3
- }
package/mocks/link.ts DELETED
@@ -1,6 +0,0 @@
1
- import { customElement } from "lit/decorators.js";
2
- import LinkElement from "../src/utils/link-element";
3
-
4
- @customElement("mock-link")
5
- export class MockLink extends LinkElement {
6
- }
package/rollup.config.js DELETED
@@ -1,73 +0,0 @@
1
- import typescript from "rollup-plugin-typescript2";
2
- import resolve from "@rollup/plugin-node-resolve";
3
- import postcss from "rollup-plugin-postcss";
4
- import litcss from "rollup-plugin-postcss-lit";
5
- const packageJson = require("./package.json");
6
- import { getFolders } from './scripts/buildUtils';
7
- import generatePackageJson from 'rollup-plugin-generate-package-json';
8
- import replace from '@rollup/plugin-replace';
9
-
10
- const plugins = [
11
- resolve({
12
- browser: true,
13
- }),
14
- replace({
15
- 'process.env.NODE_ENV': JSON.stringify("production"),
16
- preventAssignment: true
17
- }),
18
- postcss({
19
- minimize: false,
20
- inject: false,
21
- }),
22
- litcss(),
23
- typescript({
24
- useTsconfigDeclarationDir: true,
25
- }),
26
- ]
27
- const subfolderPlugins = (folderName) => [
28
- ...plugins,
29
- generatePackageJson({
30
- baseContents: {
31
- name: `${packageJson.name}/${folderName}`,
32
- private: true,
33
- main: '../umd/index.js',
34
- module: './index.js',
35
- types: './index.d.ts',
36
- },
37
- }),
38
- ];
39
- const folderBuilds = getFolders('./src').map((folder) => {
40
- return {
41
- input: `src/${folder}/index.ts`,
42
- output: [
43
- {
44
- file: `lib/${folder}/index.js`,
45
- sourcemap: true,
46
- exports: 'named',
47
- format: 'esm',
48
- }
49
- ],
50
- plugins: subfolderPlugins(folder),
51
- };
52
- });
53
-
54
- export default [
55
- {
56
- input: "src/index.ts",
57
- output: [
58
- {
59
- file: packageJson.module,
60
- format: "esm",
61
- sourcemap: true,
62
- },
63
- {
64
- file: packageJson.main,
65
- format: "umd",
66
- sourcemap: true,
67
- name: "index"
68
- },
69
- ],
70
- plugins
71
- },
72
- ...folderBuilds
73
- ];
package/rollup.test.config.js DELETED
@@ -1,42 +0,0 @@
1
- import typescript from "rollup-plugin-typescript2";
2
- import resolve from "@rollup/plugin-node-resolve";
3
- import postcss from "rollup-plugin-postcss";
4
- import litcss from "rollup-plugin-postcss-lit";
5
- import path from "path";
6
- import replace from '@rollup/plugin-replace';
7
- const packageJson = require("./package.json");
8
- const fs = require('fs');
9
-
10
- export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
11
- const files = fs.readdirSync(entry);
12
- const filePaths = files.map(fileName => path.join(entry, fileName))
13
- return filePaths
14
- };
15
-
16
- export default [
17
- {
18
- input: getFiles('./test'),
19
- output: [
20
- {
21
- dir: "test-outdir",
22
- format: 'es'
23
- },
24
- ],
25
- plugins: [
26
- resolve({
27
- browser: true,
28
- }),
29
- replace({
30
- 'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
31
- }),
32
- typescript({
33
- tsconfig: './tsconfig.test.json'
34
- }),
35
- postcss({ // process .scss files
36
- minimize: false,
37
- inject: false,
38
- }),
39
- litcss(), // process adoptedStylesheets for lit
40
- ],
41
- },
42
- ];
package/scripts/buildUtils.js DELETED
@@ -1,30 +0,0 @@
1
- const fs = require('fs');
2
- export const getFolders = (entry) => {
3
- const dirs = fs.readdirSync(entry)
4
- const dirsWithoutIndex = dirs.filter(name => name !== 'index.ts').filter(name => name !== 'utils')
5
- return dirsWithoutIndex
6
- }
7
-
8
- export const getFiles = (entry, extensions = [], excludeExtensions = []) => {
9
- let fileNames = [];
10
- const dirs = fs.readdirSync(entry);
11
- dirs.forEach((dir) => {
12
- const path = `${entry}/${dir}`;
13
-
14
- if (fs.lstatSync(path).isDirectory()) {
15
- fileNames = [
16
- ...fileNames,
17
- ...getFiles(path, extensions, excludeExtensions),
18
- ];
19
-
20
- return;
21
- }
22
-
23
- if (!excludeExtensions.some((exclude) => dir.endsWith(exclude))
24
- && extensions.some((ext) => dir.endsWith(ext))
25
- ) {
26
- fileNames.push(path);
27
- }
28
- });
29
- return fileNames;
30
- };
package/scripts/frankBuild.js DELETED
@@ -1,49 +0,0 @@
1
- /* eslint-disable no-console */
2
- const { resolve, join, basename } = require('path');
3
- const { readFile, writeFile, copy } = require('fs-extra');
4
- const packagePath = process.cwd();
5
- const distPath = join(packagePath, './lib');
6
-
7
- const writeJson = (targetPath, obj) =>
8
- writeFile(targetPath, JSON.stringify(obj, null, 2), 'utf8');
9
-
10
- async function createPackageFile() {
11
- const packageData = await readFile(
12
- resolve(packagePath, './package.json'),
13
- 'utf8'
14
- );
15
- const { scripts, devDependencies, ...packageOthers } =
16
- JSON.parse(packageData);
17
- const newPackageData = {
18
- ...packageOthers,
19
- private: false,
20
- typings: './index.d.ts',
21
- main: './umd/index.js',
22
- module: './index.js',
23
- };
24
-
25
- const targetPath = resolve(distPath, './package.json');
26
-
27
- await writeJson(targetPath, newPackageData);
28
- console.log(`Created package.json in ${targetPath}`);
29
- }
30
-
31
- async function includeFileInBuild(file) {
32
- const sourcePath = resolve(packagePath, file);
33
- const targetPath = resolve(distPath, basename(file));
34
- await copy(sourcePath, targetPath);
35
- console.log(`Copied ${sourcePath} to ${targetPath}`);
36
- }
37
-
38
- async function run() {
39
- try {
40
- await createPackageFile();
41
- await includeFileInBuild('./README.md');
42
- // await includeFileInBuild('../../LICENSE');
43
- } catch (err) {
44
- console.error(err);
45
- process.exit(1);
46
- }
47
- }
48
-
49
- run();
package/src/Button/index.ts DELETED
@@ -1 +0,0 @@
1
- export { SgdsButton } from "./sgds-button";