@ongov/ontario-design-system-component-library 4.3.0 → 5.0.0-alpha.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 (148) hide show
  1. package/dist/cjs/index-88d5cf20.js +2 -2
  2. package/dist/cjs/loader.cjs.js +1 -1
  3. package/dist/cjs/{ontario-accordion_43.cjs.entry.js → ontario-accordion_44.cjs.entry.js} +738 -296
  4. package/dist/cjs/ontario-accordion_44.cjs.entry.js.map +1 -0
  5. package/dist/cjs/ontario-design-system-components.cjs.js +1 -1
  6. package/dist/collection/collection-manifest.json +1 -0
  7. package/dist/collection/components/ontario-card/ontario-card-types.js +29 -2
  8. package/dist/collection/components/ontario-card/ontario-card-types.js.map +1 -1
  9. package/dist/collection/components/ontario-card/ontario-card.css +257 -31
  10. package/dist/collection/components/ontario-card/ontario-card.js +104 -80
  11. package/dist/collection/components/ontario-card/ontario-card.js.map +1 -1
  12. package/dist/collection/components/ontario-card/test/ontario-cards.spec.js +23 -13
  13. package/dist/collection/components/ontario-card/test/ontario-cards.spec.js.map +1 -1
  14. package/dist/collection/components/ontario-header/ontario-header.js +17 -3
  15. package/dist/collection/components/ontario-header/ontario-header.js.map +1 -1
  16. package/dist/collection/components/ontario-header/service-ontario-header.css +0 -3
  17. package/dist/collection/components/ontario-header/test/ontario-header.spec.js +3 -3
  18. package/dist/collection/components/ontario-header/test/ontario-header.spec.js.map +1 -1
  19. package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js +193 -47
  20. package/dist/collection/components/ontario-language-toggle/ontario-language-toggle.js.map +1 -1
  21. package/dist/collection/components/ontario-language-toggle/test/ontario-language-toggle.spec.js +16 -3
  22. package/dist/collection/components/ontario-language-toggle/test/ontario-language-toggle.spec.js.map +1 -1
  23. package/dist/collection/components/ontario-search-box/assets/ontario-icon-close.svg +1 -0
  24. package/dist/collection/components/ontario-search-box/assets/ontario-logo--mobile.svg +6 -0
  25. package/dist/collection/components/ontario-search-box/ontario-search-box.css +823 -0
  26. package/dist/collection/components/ontario-search-box/ontario-search-box.js +584 -0
  27. package/dist/collection/components/ontario-search-box/ontario-search-box.js.map +1 -0
  28. package/dist/collection/components/ontario-search-box/test/ontario-search-box.e2e.js +20 -0
  29. package/dist/collection/components/ontario-search-box/test/ontario-search-box.e2e.js.map +1 -0
  30. package/dist/collection/components/ontario-search-box/test/ontario-search-box.spec.js +19 -0
  31. package/dist/collection/components/ontario-search-box/test/ontario-search-box.spec.js.map +1 -0
  32. package/dist/collection/components/ontario-step-indicator/ontario-step-indicator.js +5 -5
  33. package/dist/collection/components/ontario-table/ontario-table.js +5 -5
  34. package/dist/collection/components/ontario-textarea/ontario-textarea.js +3 -3
  35. package/dist/collection/i18n/global.i18n.json +172 -162
  36. package/dist/collection/utils/common/input/input.js +3 -0
  37. package/dist/collection/utils/common/input/input.js.map +1 -1
  38. package/dist/collection/utils/common/input-caption/input-caption.js +5 -3
  39. package/dist/collection/utils/common/input-caption/input-caption.js.map +1 -1
  40. package/dist/collection/utils/common/language-types.js +1 -1
  41. package/dist/collection/utils/common/language-types.js.map +1 -1
  42. package/dist/collection/utils/helper/utils-types.js +2 -0
  43. package/dist/collection/utils/helper/utils-types.js.map +1 -0
  44. package/dist/collection/utils/helper/utils.js +26 -0
  45. package/dist/collection/utils/helper/utils.js.map +1 -1
  46. package/dist/components/error-message.js +1 -324
  47. package/dist/components/error-message.js.map +1 -1
  48. package/dist/components/event-handler.js +330 -0
  49. package/dist/components/event-handler.js.map +1 -0
  50. package/dist/components/global.i18n.js +184 -173
  51. package/dist/components/global.i18n.js.map +1 -1
  52. package/dist/components/input.js +3 -0
  53. package/dist/components/input.js.map +1 -1
  54. package/dist/components/ontario-card.js +118 -66
  55. package/dist/components/ontario-card.js.map +1 -1
  56. package/dist/components/ontario-checkboxes.js +2 -1
  57. package/dist/components/ontario-checkboxes.js.map +1 -1
  58. package/dist/components/ontario-date-input.js +2 -1
  59. package/dist/components/ontario-date-input.js.map +1 -1
  60. package/dist/components/ontario-dropdown-list.js +2 -1
  61. package/dist/components/ontario-dropdown-list.js.map +1 -1
  62. package/dist/components/ontario-header.js +13 -7
  63. package/dist/components/ontario-header.js.map +1 -1
  64. package/dist/components/ontario-icon-search2.js +6 -0
  65. package/dist/components/ontario-icon-search2.js.map +1 -0
  66. package/dist/components/ontario-input.js +2 -1
  67. package/dist/components/ontario-input.js.map +1 -1
  68. package/dist/components/ontario-language-toggle2.js +180 -37
  69. package/dist/components/ontario-language-toggle2.js.map +1 -1
  70. package/dist/components/ontario-radio-buttons.js +2 -1
  71. package/dist/components/ontario-radio-buttons.js.map +1 -1
  72. package/dist/components/ontario-search-box.d.ts +11 -0
  73. package/dist/components/ontario-search-box.js +269 -0
  74. package/dist/components/ontario-search-box.js.map +1 -0
  75. package/dist/components/ontario-step-indicator.js +5 -5
  76. package/dist/components/ontario-table.js +5 -5
  77. package/dist/components/ontario-textarea.js +5 -4
  78. package/dist/components/ontario-textarea.js.map +1 -1
  79. package/dist/components/utils.js +28 -0
  80. package/dist/components/utils.js.map +1 -1
  81. package/dist/esm/index-603026f7.js +2 -2
  82. package/dist/esm/loader.js +1 -1
  83. package/dist/esm/{ontario-accordion_43.entry.js → ontario-accordion_44.entry.js} +738 -296
  84. package/dist/esm/ontario-accordion_44.entry.js.map +1 -0
  85. package/dist/esm/ontario-design-system-components.js +1 -1
  86. package/dist/ontario-design-system-components/i18n/global.i18n.json +172 -162
  87. package/dist/ontario-design-system-components/ontario-design-system-components.esm.js +1 -1
  88. package/dist/ontario-design-system-components/ontario-design-system-components.esm.js.map +1 -1
  89. package/dist/ontario-design-system-components/{p-cff41424.entry.js → p-9c3a1be9.entry.js} +2204 -1918
  90. package/dist/ontario-design-system-components/p-9c3a1be9.entry.js.map +1 -0
  91. package/dist/types/components/ontario-card/ontario-card-types.d.ts +4 -4
  92. package/dist/types/components/ontario-card/ontario-card.d.ts +40 -29
  93. package/dist/types/components/ontario-header/ontario-header.d.ts +13 -2
  94. package/dist/types/components/ontario-language-toggle/ontario-language-toggle.d.ts +75 -8
  95. package/dist/types/components/ontario-search-box/ontario-search-box.d.ts +180 -0
  96. package/dist/types/components.d.ts +211 -22
  97. package/dist/types/utils/common/input/input.d.ts +2 -1
  98. package/dist/types/utils/common/input-caption/input-caption.d.ts +7 -1
  99. package/dist/types/utils/common/language-types.d.ts +2 -1
  100. package/dist/types/utils/helper/utils-types.d.ts +2 -0
  101. package/dist/types/utils/helper/utils.d.ts +21 -0
  102. package/package.json +3 -3
  103. package/src/components/ontario-card/ontario-card-types.tsx +33 -4
  104. package/src/components/ontario-card/ontario-card.scss +59 -38
  105. package/src/components/ontario-card/ontario-card.tsx +98 -70
  106. package/src/components/ontario-card/readme.md +57 -27
  107. package/src/components/ontario-card/test/__snapshots__/ontario-cards.spec.tsx.snap +66 -0
  108. package/src/components/ontario-card/test/ontario-cards.spec.tsx +27 -13
  109. package/src/components/ontario-card-collection/readme.md +13 -13
  110. package/src/components/ontario-checkbox/ontario-checkboxes.scss +0 -1
  111. package/src/components/ontario-header/ontario-header.tsx +13 -4
  112. package/src/components/ontario-header/service-ontario-header.scss +0 -4
  113. package/src/components/ontario-header/test/ontario-header.spec.tsx +3 -3
  114. package/src/components/ontario-hint-text/readme.md +2 -0
  115. package/src/components/ontario-language-toggle/ontario-language-toggle.tsx +192 -45
  116. package/src/components/ontario-language-toggle/readme.md +10 -10
  117. package/src/components/ontario-language-toggle/test/__snapshots__/ontario-language-toggle.spec.tsx.snap +1 -1
  118. package/src/components/ontario-language-toggle/test/ontario-language-toggle.spec.tsx +17 -3
  119. package/src/components/ontario-radio-buttons/ontario-radio-buttons.scss +0 -1
  120. package/src/components/ontario-search-box/assets/ontario-icon-close.svg +1 -0
  121. package/src/components/ontario-search-box/assets/ontario-logo--mobile.svg +6 -0
  122. package/src/components/ontario-search-box/ontario-search-box.scss +141 -0
  123. package/src/components/ontario-search-box/ontario-search-box.tsx +341 -0
  124. package/src/components/ontario-search-box/readme.md +132 -0
  125. package/src/components/ontario-search-box/test/__snapshots__/ontario-search-box.spec.tsx.snap +35 -0
  126. package/src/components/ontario-search-box/test/ontario-search-box.e2e.ts +21 -0
  127. package/src/components/ontario-search-box/test/ontario-search-box.spec.tsx +22 -0
  128. package/src/components.d.ts +211 -22
  129. package/src/french.html +37 -0
  130. package/src/index.html +292 -38
  131. package/src/translations/global.i18n.json +172 -162
  132. package/src/utils/common/input/input.tsx +4 -1
  133. package/src/utils/common/input-caption/input-caption.tsx +9 -3
  134. package/src/utils/common/language-types.ts +2 -1
  135. package/src/utils/helper/utils-types.ts +2 -0
  136. package/src/utils/helper/utils.ts +30 -0
  137. package/www/build/ontario-design-system-components.esm.js +1 -1
  138. package/www/build/ontario-design-system-components.esm.js.map +1 -1
  139. package/www/build/{p-b61db0f6.js → p-84035ac3.js} +1 -1
  140. package/www/build/{p-cff41424.entry.js → p-9c3a1be9.entry.js} +2204 -1918
  141. package/www/build/p-9c3a1be9.entry.js.map +1 -0
  142. package/www/french.html +37 -0
  143. package/www/i18n/global.i18n.json +172 -162
  144. package/www/index.html +266 -38
  145. package/dist/cjs/ontario-accordion_43.cjs.entry.js.map +0 -1
  146. package/dist/esm/ontario-accordion_43.entry.js.map +0 -1
  147. package/dist/ontario-design-system-components/p-cff41424.entry.js.map +0 -1
  148. package/www/build/p-cff41424.entry.js.map +0 -1
package/www/index.html CHANGED
@@ -5,13 +5,13 @@
5
5
  <meta charset="utf-8" />
6
6
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=5.0" />
7
7
  <title>Ontario Design System - component samples</title>
8
- <link rel="modulepreload" href="/build/p-b61db0f6.js" />
8
+ <link rel="modulepreload" href="/build/p-84035ac3.js" />
9
9
  <link rel="modulepreload" href="/build/p-14fa9399.js" />
10
10
  <link rel="modulepreload" href="/build/p-314395de.js" />
11
11
  <link rel="modulepreload" href="/build/p-55c48d50.js" />
12
12
  <script
13
13
  type="module"
14
- src="/build/p-b61db0f6.js"
14
+ src="/build/p-84035ac3.js"
15
15
  data-stencil
16
16
  data-resources-url="/build/"
17
17
  data-stencil-namespace="ontario-design-system-components"
@@ -23,6 +23,7 @@
23
23
  <a href="https://designsystem.ontario.ca/">Ontario Design System</a> web components now available!!!
24
24
  </ontario-critical-alert>
25
25
  <ontario-header
26
+ id="ontarioHeader"
26
27
  type="serviceOntario"
27
28
  application-header-info='{
28
29
  "title": "Application name",
@@ -31,6 +32,10 @@
31
32
  "maxSubheaderTabletLinks": "2",
32
33
  "maxSubheaderMobileLinks": "1"
33
34
  }'
35
+ language-toggle-options='{
36
+ "englishLink": "/",
37
+ "frenchLink" : "/french.html"
38
+ }'
34
39
  ></ontario-header>
35
40
  <main>
36
41
  <div class="ontario-row">
@@ -63,6 +68,7 @@
63
68
  <li><a href="#text-inputs">Text inputs</a></li>
64
69
  <li><a href="#date-input">Date input</a></li>
65
70
  <li><a href="#step-indicator">Step indicator</a></li>
71
+ <li><a href="#search-box">Search Box</a></li>
66
72
  <li><a href="#form">Form example</a></li>
67
73
  </ol>
68
74
  <hr />
@@ -166,61 +172,260 @@
166
172
  <div>
167
173
  <h2 id="card">Card Collection &amp; Card</h2>
168
174
  <div>
175
+ <h3>Basic cards (no images)</h3>
169
176
  <ontario-card-collection cards-per-row="4">
170
- <ontario-card-collection cards-per-row="2">
171
- <ontario-card
172
- card-type="horizonal"
173
- label="Card Title 1"
174
- image="https://picsum.photos/200/300"
175
- card-link="https://google.ca"
176
- horizontal-image-position-type="left"
177
- horizontal-image-size-type="one-fourth"
178
- description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
179
- ></ontario-card>
180
- <ontario-card
181
- card-type="horizonal"
182
- label="Card Title 2"
183
- image="https://picsum.photos/200/300"
184
- horizontal-image-position-type="left"
185
- horizontal-image-size-type="one-fourth"
186
- description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
187
- ></ontario-card>
188
- </ontario-card-collection>
189
177
  <ontario-card
190
- card-type="basic"
191
- label="Card Title 3"
192
- image="https://picsum.photos/200/300"
178
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
179
+ label="Card Title 1"
180
+ ></ontario-card>
181
+ <ontario-card
182
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
183
+ header-colour="sky"
184
+ label="Card Title 2"
185
+ ></ontario-card>
186
+ <ontario-card label="Card Title 3"></ontario-card>
187
+ <ontario-card header-colour="sky" label="Card Title 4"></ontario-card>
188
+ </ontario-card-collection>
189
+ <h3>Basic cards with 4:3 images</h3>
190
+ <ontario-card-collection cards-per-row="4">
191
+ <ontario-card
192
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
193
+ image="https://picsum.photos/300/225"
194
+ label="Card Title 1"
195
+ ></ontario-card>
196
+ <ontario-card
197
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
198
+ image="https://picsum.photos/300/225"
199
+ header-colour="sky"
200
+ label="Card Title 2"
201
+ ></ontario-card>
202
+ <ontario-card image="https://picsum.photos/300/225" label="Card Title 3"></ontario-card>
203
+ <ontario-card
204
+ header-colour="sky"
205
+ image="https://picsum.photos/300/225"
206
+ label="Card Title 4"
207
+ ></ontario-card>
208
+ </ontario-card-collection>
209
+ <h3>Basic cards with 16:9 images</h3>
210
+ <ontario-card-collection cards-per-row="4">
211
+ <ontario-card
212
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
213
+ image="https://picsum.photos/300/169"
214
+ label="Card Title 1"
215
+ ></ontario-card>
216
+ <ontario-card
217
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
218
+ image="https://picsum.photos/300/169"
219
+ header-colour="sky"
220
+ label="Card Title 2"
221
+ ></ontario-card>
222
+ <ontario-card image="https://picsum.photos/300/169" label="Card Title 3"></ontario-card>
223
+ <ontario-card
224
+ header-colour="sky"
225
+ image="https://picsum.photos/300/169"
226
+ label="Card Title 4"
227
+ ></ontario-card>
228
+ </ontario-card-collection>
229
+ <h3>Basic cards with 2:1 images</h3>
230
+ <ontario-card-collection cards-per-row="4">
231
+ <ontario-card
232
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
233
+ image="https://picsum.photos/300/150"
234
+ label="Card Title 1"
235
+ ></ontario-card>
236
+ <ontario-card
237
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
238
+ image="https://picsum.photos/300/150"
239
+ header-colour="sky"
240
+ label="Card Title 2"
241
+ ></ontario-card>
242
+ <ontario-card image="https://picsum.photos/300/150" label="Card Title 3"></ontario-card>
243
+ <ontario-card
244
+ header-colour="sky"
245
+ image="https://picsum.photos/300/150"
246
+ label="Card Title 4"
247
+ ></ontario-card>
248
+ </ontario-card-collection>
249
+ <h3>Horizontal cards with left align 9:16 images (one-fourth size)</h3>
250
+ <ontario-card-collection cards-per-row="4">
251
+ <ontario-card
252
+ layout="horizontal"
253
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
254
+ image="https://picsum.photos/169/300"
193
255
  horizontal-image-position-type="left"
194
256
  horizontal-image-size-type="one-fourth"
257
+ label="Card Title 1"
258
+ ></ontario-card>
259
+ <ontario-card
260
+ layout="horizontal"
195
261
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
262
+ image="https://picsum.photos/169/300"
263
+ header-colour="sky"
264
+ horizontal-image-position-type="left"
265
+ horizontal-image-size-type="one-fourth"
266
+ label="Card Title 2"
196
267
  ></ontario-card>
197
268
  <ontario-card
198
- card-type="basic"
199
- label="Card Title 4"
200
- image="https://picsum.photos/200/300"
269
+ layout="horizontal"
270
+ image="https://picsum.photos/169/300"
271
+ horizontal-image-position-type="left"
272
+ horizontal-image-size-type="one-fourth"
273
+ label="Card Title 3"
274
+ ></ontario-card>
275
+ <ontario-card
276
+ layout="horizontal"
277
+ header-colour="sky"
278
+ image="https://picsum.photos/169/300"
201
279
  horizontal-image-position-type="left"
202
280
  horizontal-image-size-type="one-fourth"
281
+ label="Card Title 4"
282
+ ></ontario-card>
283
+ </ontario-card-collection>
284
+ <h3>Horizontal cards with left align 9:16 images (one-third size)</h3>
285
+ <ontario-card-collection cards-per-row="4">
286
+ <ontario-card
287
+ layout="horizontal"
203
288
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
289
+ image="https://picsum.photos/169/300"
290
+ horizontal-image-position-type="left"
291
+ horizontal-image-size-type="one-third"
292
+ label="Card Title 1"
204
293
  ></ontario-card>
205
294
  <ontario-card
206
- card-type="basic"
207
- label="Card Title 5"
208
- image="https://picsum.photos/200/300"
295
+ layout="horizontal"
296
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
297
+ image="https://picsum.photos/169/300"
298
+ header-colour="sky"
299
+ horizontal-image-position-type="left"
300
+ horizontal-image-size-type="one-third"
301
+ label="Card Title 2"
302
+ ></ontario-card>
303
+ <ontario-card
304
+ layout="horizontal"
305
+ image="https://picsum.photos/169/300"
209
306
  horizontal-image-position-type="left"
307
+ horizontal-image-size-type="one-third"
308
+ label="Card Title 3"
309
+ ></ontario-card>
310
+ <ontario-card
311
+ layout="horizontal"
312
+ header-colour="sky"
313
+ image="https://picsum.photos/169/300"
314
+ horizontal-image-position-type="left"
315
+ horizontal-image-size-type="one-third"
316
+ label="Card Title 4"
317
+ ></ontario-card>
318
+ </ontario-card-collection>
319
+ <h3>Horizontal cards with right align 9:16 images (one-fourth size)</h3>
320
+ <ontario-card-collection cards-per-row="4">
321
+ <ontario-card
322
+ layout="horizontal"
323
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
324
+ image="https://picsum.photos/169/300"
325
+ horizontal-image-position-type="right"
326
+ horizontal-image-size-type="one-fourth"
327
+ label="Card Title 1"
328
+ ></ontario-card>
329
+ <ontario-card
330
+ layout="horizontal"
331
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
332
+ image="https://picsum.photos/169/300"
333
+ header-colour="sky"
334
+ horizontal-image-position-type="right"
335
+ horizontal-image-size-type="one-fourth"
336
+ label="Card Title 2"
337
+ ></ontario-card>
338
+ <ontario-card
339
+ layout="horizontal"
340
+ image="https://picsum.photos/169/300"
341
+ horizontal-image-position-type="right"
342
+ horizontal-image-size-type="one-fourth"
343
+ label="Card Title 3"
344
+ ></ontario-card>
345
+ <ontario-card
346
+ layout="horizontal"
347
+ header-colour="sky"
348
+ image="https://picsum.photos/169/300"
349
+ horizontal-image-position-type="right"
210
350
  horizontal-image-size-type="one-fourth"
351
+ label="Card Title 4"
352
+ ></ontario-card>
353
+ </ontario-card-collection>
354
+ <h3>Horizontal cards with right align 9:16 images (one-third size)</h3>
355
+ <ontario-card-collection cards-per-row="4">
356
+ <ontario-card
357
+ layout="horizontal"
358
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
359
+ image="https://picsum.photos/169/300"
360
+ horizontal-image-position-type="right"
361
+ horizontal-image-size-type="one-third"
362
+ label="Card Title 1"
363
+ ></ontario-card>
364
+ <ontario-card
365
+ layout="horizontal"
366
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
367
+ image="https://picsum.photos/169/300"
368
+ header-colour="sky"
369
+ horizontal-image-position-type="right"
370
+ horizontal-image-size-type="one-third"
371
+ label="Card Title 2"
372
+ ></ontario-card>
373
+ <ontario-card
374
+ layout="horizontal"
375
+ image="https://picsum.photos/169/300"
376
+ horizontal-image-position-type="right"
377
+ horizontal-image-size-type="one-third"
378
+ label="Card Title 3"
379
+ ></ontario-card>
380
+ <ontario-card
381
+ layout="horizontal"
382
+ header-colour="sky"
383
+ image="https://picsum.photos/169/300"
384
+ horizontal-image-position-type="right"
385
+ horizontal-image-size-type="one-third"
386
+ label="Card Title 4"
387
+ ></ontario-card>
388
+ </ontario-card-collection>
389
+ <h3>Edge cases</h3>
390
+ <ontario-card-collection cards-per-row="4">
391
+ <ontario-card
392
+ header-colour="orange"
393
+ label="Card Title 1 Card Title 1 Card Title 1"
394
+ image="https://picsum.photos/200/300"
395
+ ></ontario-card>
396
+ <ontario-card
397
+ header-colour="sky"
398
+ label="Card Title 2"
399
+ image="https://picsum.photos/200/300"
211
400
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
212
401
  ></ontario-card>
213
402
  <ontario-card
214
- card-type="basic"
215
- label="Card Title 6"
403
+ label="Card Title 3"
404
+ image="https://picsum.photos/200/300"
405
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
406
+ ></ontario-card>
407
+ </ontario-card-collection>
408
+ <ontario-card-collection cards-per-row="4">
409
+ <ontario-card
410
+ layout="horizontal"
411
+ header-colour="orange"
412
+ label="Card Title 1 Card Title 1 Card Title 1"
413
+ image="https://picsum.photos/200/300"
414
+ horizontal-image-position-type="left"
415
+ horizontal-image-size-type="one-third"
416
+ ></ontario-card>
417
+ <ontario-card
418
+ layout="horizontal"
419
+ header-colour="sky"
420
+ label="Card Title 2"
216
421
  image="https://picsum.photos/200/300"
217
422
  horizontal-image-position-type="left"
218
423
  horizontal-image-size-type="one-fourth"
219
424
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
220
425
  ></ontario-card>
221
426
  <ontario-card
222
- card-type="basic"
223
- label="Card Title 7"
427
+ layout="horizontal"
428
+ label="Card Title 3"
224
429
  image="https://picsum.photos/200/300"
225
430
  horizontal-image-position-type="left"
226
431
  horizontal-image-size-type="one-fourth"
@@ -900,6 +1105,33 @@
900
1105
  number-of-steps="5"
901
1106
  ></ontario-step-indicator>
902
1107
  </div>
1108
+ <hr />
1109
+ <!-- Search box -->
1110
+ <script>
1111
+ window.addEventListener('load', () => {
1112
+ console.log('Loaded Search Box Event Listener');
1113
+ const searchBox = document.getElementById('ontario-search-box');
1114
+ searchBox.performSearch = async ($value) => {
1115
+ console.log('Performing search with value:', $value);
1116
+ };
1117
+
1118
+ searchBox.addEventListener('searchOnSubmit', (event) => {
1119
+ console.log('Search Event:', event);
1120
+ });
1121
+ });
1122
+ </script>
1123
+ <div>
1124
+ <h2 id="search-box">Search box</h2>
1125
+ <ontario-search-box
1126
+ id="ontario-search-box"
1127
+ caption='{
1128
+ "captionText": "Search directory",
1129
+ "captionType": "default"
1130
+ }'
1131
+ hint-text="Search by employee name or organization name."
1132
+ ></ontario-search-box>
1133
+ </div>
1134
+ <hr />
903
1135
  <div>
904
1136
  <!-- Form -->
905
1137
  <form id="sample-form">
@@ -1161,10 +1393,6 @@
1161
1393
  ></ontario-footer>
1162
1394
  <ontario-back-to-top>
1163
1395
  <script>
1164
- function testFunction() {
1165
- alert('HELLO WORLD!');
1166
- }
1167
-
1168
1396
  function activateHeaderType(headerType) {
1169
1397
  const ontarioHeaderElement = document.querySelector('ontario-header');
1170
1398
  ontarioHeaderElement.type = headerType;