@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/src/index.html CHANGED
@@ -14,6 +14,7 @@
14
14
  <a href="https://designsystem.ontario.ca/">Ontario Design System</a> web components now available!!!
15
15
  </ontario-critical-alert>
16
16
  <ontario-header
17
+ id="ontarioHeader"
17
18
  type="serviceOntario"
18
19
  application-header-info='{
19
20
  "title": "Application name",
@@ -22,6 +23,10 @@
22
23
  "maxSubheaderTabletLinks": "2",
23
24
  "maxSubheaderMobileLinks": "1"
24
25
  }'
26
+ language-toggle-options='{
27
+ "englishLink": "/",
28
+ "frenchLink" : "/french.html"
29
+ }'
25
30
  >
26
31
  </ontario-header>
27
32
 
@@ -57,6 +62,7 @@
57
62
  <li><a href="#text-inputs">Text inputs</a></li>
58
63
  <li><a href="#date-input">Date input</a></li>
59
64
  <li><a href="#step-indicator">Step indicator</a></li>
65
+ <li><a href="#search-box">Search Box</a></li>
60
66
  <li><a href="#form">Form example</a></li>
61
67
  </ol>
62
68
  <hr />
@@ -171,58 +177,280 @@
171
177
  <div>
172
178
  <h2 id="card">Card Collection & Card</h2>
173
179
  <div>
180
+ <h3>Basic cards (no images)</h3>
174
181
  <ontario-card-collection cards-per-row="4">
175
- <ontario-card-collection cards-per-row="2">
176
- <ontario-card
177
- card-type="horizonal"
178
- label="Card Title 1"
179
- image="https://picsum.photos/200/300"
180
- card-link="https://google.ca"
181
- horizontal-image-position-type="left"
182
- horizontal-image-size-type="one-fourth"
183
- description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
184
- >
185
- </ontario-card>
186
- <ontario-card
187
- card-type="horizonal"
188
- label="Card Title 2"
189
- image="https://picsum.photos/200/300"
190
- horizontal-image-position-type="left"
191
- horizontal-image-size-type="one-fourth"
192
- description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
193
- >
194
- </ontario-card>
195
- </ontario-card-collection>
196
182
  <ontario-card
197
- card-type="basic"
198
- label="Card Title 3"
199
- image="https://picsum.photos/200/300"
183
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
184
+ label="Card Title 1"
185
+ >
186
+ </ontario-card>
187
+ <ontario-card
188
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
189
+ header-colour="sky"
190
+ label="Card Title 2"
191
+ >
192
+ </ontario-card>
193
+ <ontario-card label="Card Title 3"> </ontario-card>
194
+ <ontario-card header-colour="sky" label="Card Title 4"> </ontario-card>
195
+ </ontario-card-collection>
196
+
197
+ <h3>Basic cards with 4:3 images</h3>
198
+ <ontario-card-collection cards-per-row="4">
199
+ <ontario-card
200
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
201
+ image="https://picsum.photos/300/225"
202
+ label="Card Title 1"
203
+ >
204
+ </ontario-card>
205
+ <ontario-card
206
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
207
+ image="https://picsum.photos/300/225"
208
+ header-colour="sky"
209
+ label="Card Title 2"
210
+ >
211
+ </ontario-card>
212
+ <ontario-card image="https://picsum.photos/300/225" label="Card Title 3"> </ontario-card>
213
+ <ontario-card header-colour="sky" image="https://picsum.photos/300/225" label="Card Title 4">
214
+ </ontario-card>
215
+ </ontario-card-collection>
216
+
217
+ <h3>Basic cards with 16:9 images</h3>
218
+ <ontario-card-collection cards-per-row="4">
219
+ <ontario-card
220
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
221
+ image="https://picsum.photos/300/169"
222
+ label="Card Title 1"
223
+ >
224
+ </ontario-card>
225
+ <ontario-card
226
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
227
+ image="https://picsum.photos/300/169"
228
+ header-colour="sky"
229
+ label="Card Title 2"
230
+ >
231
+ </ontario-card>
232
+ <ontario-card image="https://picsum.photos/300/169" label="Card Title 3"> </ontario-card>
233
+ <ontario-card header-colour="sky" image="https://picsum.photos/300/169" label="Card Title 4">
234
+ </ontario-card>
235
+ </ontario-card-collection>
236
+
237
+ <h3>Basic cards with 2:1 images</h3>
238
+ <ontario-card-collection cards-per-row="4">
239
+ <ontario-card
240
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
241
+ image="https://picsum.photos/300/150"
242
+ label="Card Title 1"
243
+ >
244
+ </ontario-card>
245
+ <ontario-card
246
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
247
+ image="https://picsum.photos/300/150"
248
+ header-colour="sky"
249
+ label="Card Title 2"
250
+ >
251
+ </ontario-card>
252
+ <ontario-card image="https://picsum.photos/300/150" label="Card Title 3"> </ontario-card>
253
+ <ontario-card header-colour="sky" image="https://picsum.photos/300/150" label="Card Title 4">
254
+ </ontario-card>
255
+ </ontario-card-collection>
256
+
257
+ <h3>Horizontal cards with left align 9:16 images (one-fourth size)</h3>
258
+ <ontario-card-collection cards-per-row="4">
259
+ <ontario-card
260
+ layout="horizontal"
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"
200
263
  horizontal-image-position-type="left"
201
264
  horizontal-image-size-type="one-fourth"
265
+ label="Card Title 1"
266
+ >
267
+ </ontario-card>
268
+ <ontario-card
269
+ layout="horizontal"
202
270
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
271
+ image="https://picsum.photos/169/300"
272
+ header-colour="sky"
273
+ horizontal-image-position-type="left"
274
+ horizontal-image-size-type="one-fourth"
275
+ label="Card Title 2"
203
276
  >
204
277
  </ontario-card>
205
278
  <ontario-card
206
- card-type="basic"
207
- label="Card Title 4"
208
- image="https://picsum.photos/200/300"
279
+ layout="horizontal"
280
+ image="https://picsum.photos/169/300"
281
+ horizontal-image-position-type="left"
282
+ horizontal-image-size-type="one-fourth"
283
+ label="Card Title 3"
284
+ >
285
+ </ontario-card>
286
+ <ontario-card
287
+ layout="horizontal"
288
+ header-colour="sky"
289
+ image="https://picsum.photos/169/300"
209
290
  horizontal-image-position-type="left"
210
291
  horizontal-image-size-type="one-fourth"
292
+ label="Card Title 4"
293
+ >
294
+ </ontario-card>
295
+ </ontario-card-collection>
296
+
297
+ <h3>Horizontal cards with left align 9:16 images (one-third size)</h3>
298
+ <ontario-card-collection cards-per-row="4">
299
+ <ontario-card
300
+ layout="horizontal"
211
301
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
302
+ image="https://picsum.photos/169/300"
303
+ horizontal-image-position-type="left"
304
+ horizontal-image-size-type="one-third"
305
+ label="Card Title 1"
212
306
  >
213
307
  </ontario-card>
214
308
  <ontario-card
215
- card-type="basic"
216
- label="Card Title 5"
217
- image="https://picsum.photos/200/300"
309
+ layout="horizontal"
310
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
311
+ image="https://picsum.photos/169/300"
312
+ header-colour="sky"
218
313
  horizontal-image-position-type="left"
314
+ horizontal-image-size-type="one-third"
315
+ label="Card Title 2"
316
+ >
317
+ </ontario-card>
318
+ <ontario-card
319
+ layout="horizontal"
320
+ image="https://picsum.photos/169/300"
321
+ horizontal-image-position-type="left"
322
+ horizontal-image-size-type="one-third"
323
+ label="Card Title 3"
324
+ >
325
+ </ontario-card>
326
+ <ontario-card
327
+ layout="horizontal"
328
+ header-colour="sky"
329
+ image="https://picsum.photos/169/300"
330
+ horizontal-image-position-type="left"
331
+ horizontal-image-size-type="one-third"
332
+ label="Card Title 4"
333
+ >
334
+ </ontario-card>
335
+ </ontario-card-collection>
336
+
337
+ <h3>Horizontal cards with right align 9:16 images (one-fourth size)</h3>
338
+ <ontario-card-collection cards-per-row="4">
339
+ <ontario-card
340
+ layout="horizontal"
341
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
342
+ image="https://picsum.photos/169/300"
343
+ horizontal-image-position-type="right"
344
+ horizontal-image-size-type="one-fourth"
345
+ label="Card Title 1"
346
+ >
347
+ </ontario-card>
348
+ <ontario-card
349
+ layout="horizontal"
350
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
351
+ image="https://picsum.photos/169/300"
352
+ header-colour="sky"
353
+ horizontal-image-position-type="right"
354
+ horizontal-image-size-type="one-fourth"
355
+ label="Card Title 2"
356
+ >
357
+ </ontario-card>
358
+ <ontario-card
359
+ layout="horizontal"
360
+ image="https://picsum.photos/169/300"
361
+ horizontal-image-position-type="right"
362
+ horizontal-image-size-type="one-fourth"
363
+ label="Card Title 3"
364
+ >
365
+ </ontario-card>
366
+ <ontario-card
367
+ layout="horizontal"
368
+ header-colour="sky"
369
+ image="https://picsum.photos/169/300"
370
+ horizontal-image-position-type="right"
219
371
  horizontal-image-size-type="one-fourth"
372
+ label="Card Title 4"
373
+ >
374
+ </ontario-card>
375
+ </ontario-card-collection>
376
+
377
+ <h3>Horizontal cards with right align 9:16 images (one-third size)</h3>
378
+ <ontario-card-collection cards-per-row="4">
379
+ <ontario-card
380
+ layout="horizontal"
381
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
382
+ image="https://picsum.photos/169/300"
383
+ horizontal-image-position-type="right"
384
+ horizontal-image-size-type="one-third"
385
+ label="Card Title 1"
386
+ >
387
+ </ontario-card>
388
+ <ontario-card
389
+ layout="horizontal"
390
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
391
+ image="https://picsum.photos/169/300"
392
+ header-colour="sky"
393
+ horizontal-image-position-type="right"
394
+ horizontal-image-size-type="one-third"
395
+ label="Card Title 2"
396
+ >
397
+ </ontario-card>
398
+ <ontario-card
399
+ layout="horizontal"
400
+ image="https://picsum.photos/169/300"
401
+ horizontal-image-position-type="right"
402
+ horizontal-image-size-type="one-third"
403
+ label="Card Title 3"
404
+ >
405
+ </ontario-card>
406
+ <ontario-card
407
+ layout="horizontal"
408
+ header-colour="sky"
409
+ image="https://picsum.photos/169/300"
410
+ horizontal-image-position-type="right"
411
+ horizontal-image-size-type="one-third"
412
+ label="Card Title 4"
413
+ >
414
+ </ontario-card>
415
+ </ontario-card-collection>
416
+
417
+ <h3>Edge cases</h3>
418
+ <ontario-card-collection cards-per-row="4">
419
+ <ontario-card
420
+ header-colour="orange"
421
+ label="Card Title 1 Card Title 1 Card Title 1"
422
+ image="https://picsum.photos/200/300"
423
+ >
424
+ </ontario-card>
425
+ <ontario-card
426
+ header-colour="sky"
427
+ label="Card Title 2"
428
+ image="https://picsum.photos/200/300"
220
429
  description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
221
430
  >
222
431
  </ontario-card>
223
432
  <ontario-card
224
- card-type="basic"
225
- label="Card Title 6"
433
+ label="Card Title 3"
434
+ image="https://picsum.photos/200/300"
435
+ description="Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum Lorem Ipsum"
436
+ >
437
+ </ontario-card>
438
+ </ontario-card-collection>
439
+
440
+ <ontario-card-collection cards-per-row="4">
441
+ <ontario-card
442
+ layout="horizontal"
443
+ header-colour="orange"
444
+ label="Card Title 1 Card Title 1 Card Title 1"
445
+ image="https://picsum.photos/200/300"
446
+ horizontal-image-position-type="left"
447
+ horizontal-image-size-type="one-third"
448
+ >
449
+ </ontario-card>
450
+ <ontario-card
451
+ layout="horizontal"
452
+ header-colour="sky"
453
+ label="Card Title 2"
226
454
  image="https://picsum.photos/200/300"
227
455
  horizontal-image-position-type="left"
228
456
  horizontal-image-size-type="one-fourth"
@@ -230,8 +458,8 @@
230
458
  >
231
459
  </ontario-card>
232
460
  <ontario-card
233
- card-type="basic"
234
- label="Card Title 7"
461
+ layout="horizontal"
462
+ label="Card Title 3"
235
463
  image="https://picsum.photos/200/300"
236
464
  horizontal-image-position-type="left"
237
465
  horizontal-image-size-type="one-fourth"
@@ -937,6 +1165,36 @@
937
1165
  number-of-steps="5"
938
1166
  ></ontario-step-indicator>
939
1167
  </div>
1168
+ <hr />
1169
+
1170
+ <!-- Search box -->
1171
+ <script>
1172
+ window.addEventListener('load', () => {
1173
+ console.log('Loaded Search Box Event Listener');
1174
+ const searchBox = document.getElementById('ontario-search-box');
1175
+ searchBox.performSearch = async ($value) => {
1176
+ console.log('Performing search with value:', $value);
1177
+ };
1178
+
1179
+ searchBox.addEventListener('searchOnSubmit', (event) => {
1180
+ console.log('Search Event:', event);
1181
+ });
1182
+ });
1183
+ </script>
1184
+
1185
+ <div>
1186
+ <h2 id="search-box">Search box</h2>
1187
+ <ontario-search-box
1188
+ id="ontario-search-box"
1189
+ caption='{
1190
+ "captionText": "Search directory",
1191
+ "captionType": "default"
1192
+ }'
1193
+ hint-text="Search by employee name or organization name."
1194
+ ></ontario-search-box>
1195
+ </div>
1196
+
1197
+ <hr />
940
1198
  <div>
941
1199
  <!-- Form -->
942
1200
  <form id="sample-form">
@@ -1203,10 +1461,6 @@
1203
1461
  <ontario-back-to-top />
1204
1462
 
1205
1463
  <script>
1206
- function testFunction() {
1207
- alert('HELLO WORLD!');
1208
- }
1209
-
1210
1464
  function activateHeaderType(headerType) {
1211
1465
  const ontarioHeaderElement = document.querySelector('ontario-header');
1212
1466
  ontarioHeaderElement.type = headerType;