qc-trousse-sdg 1.4.4 → 1.4.5

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 (59) hide show
  1. package/README.md +75 -53
  2. package/dist/css/qc-sdg-design-tokens.min.css +1 -1
  3. package/dist/css/qc-sdg-no-grid.min.css +1 -1
  4. package/dist/css/qc-sdg.min.css +1 -1
  5. package/dist/img/QUEBEC_blanc.svg +3 -12
  6. package/dist/img/QUEBEC_couleur.svg +3 -23
  7. package/dist/js/qc-sdg.min.js +1 -1
  8. package/index.html +1 -1
  9. package/package.json +1 -1
  10. package/public/css/qc-sdg-design-tokens.css +0 -2
  11. package/public/css/qc-sdg-no-grid.css +119 -87
  12. package/public/css/qc-sdg.css +119 -87
  13. package/public/img/QUEBEC_blanc.svg +3 -12
  14. package/public/img/QUEBEC_couleur.svg +3 -23
  15. package/public/img/favicon.ico +0 -0
  16. package/public/index.html +13 -0
  17. package/public/js/qc-doc-sdg.js +443 -1380
  18. package/public/js/qc-sdg.js +320 -577
  19. package/src/doc/_index.html +3 -0
  20. package/src/sdg/_components.js +0 -1
  21. package/src/sdg/bases/form/_form.scss +0 -4
  22. package/src/sdg/components/Alert/Alert.svelte +1 -1
  23. package/src/sdg/components/Checkbox/Checkbox.svelte +3 -3
  24. package/src/sdg/components/Checkbox/CheckboxWC.svelte +3 -3
  25. package/src/sdg/components/Checkbox/{updateInput.svelte.js → updateChoiceInput.svelte.js} +6 -1
  26. package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte +2 -2
  27. package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte +3 -0
  28. package/src/sdg/components/ChoiceGroup/Test/checkboxBaselineTest.html +3 -0
  29. package/src/sdg/components/DropdownList/DropdownList.svelte +4 -7
  30. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte +1 -6
  31. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss +3 -8
  32. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss +1 -2
  33. package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss +2 -4
  34. package/src/sdg/components/DropdownList/SelectWC.svelte +31 -50
  35. package/src/sdg/components/DropdownList/Test/DropdownListSvelteTest.svelte +37 -2
  36. package/src/sdg/components/DropdownList/Test/{dropdownListTest.html → dropdownListBaselineTest.html} +19 -1
  37. package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js +14 -0
  38. package/src/sdg/components/DropdownList/_dropdownList.scss +11 -16
  39. package/src/sdg/components/DropdownList/_select.html +9 -0
  40. package/src/sdg/components/Fieldset/_fieldset.scss +17 -4
  41. package/src/sdg/components/Label/_label.scss +1 -0
  42. package/src/sdg/components/PivFooter/PivFooter.svelte +2 -2
  43. package/src/sdg/components/PivHeader/PivHeader.svelte +79 -74
  44. package/src/sdg/components/PivHeader/Test/pivHeaderBaselineTest.html +12 -1
  45. package/src/sdg/components/PivHeader/Test/pivHeaderTest.js +9 -0
  46. package/src/sdg/components/PivHeader/_pivHeader.html +1 -0
  47. package/src/sdg/components/PivHeader/_pivHeader.scss +46 -19
  48. package/src/sdg/components/TextField/Test/textFieldBaselineTest.html +24 -5
  49. package/src/sdg/components/TextField/TextField.svelte +29 -25
  50. package/src/sdg/components/TextField/TextFieldWC.svelte +8 -0
  51. package/src/sdg/components/TextField/_textField.scss +6 -13
  52. package/src/sdg/qc-sdg-test.js +4 -0
  53. package/src/sdg/scss/settings/_tokens.scss +0 -4
  54. package/tests/buildSvelteTestsIgnore.json +2 -1
  55. package/tests/dropdown-list-baseline.spec.ts +51 -4
  56. package/tests/piv-header-baseline.spec.ts +3 -0
  57. package/src/sdg/components/Button/Button.svelte +0 -50
  58. package/src/sdg/components/Button/ButtonWC.svelte +0 -36
  59. package/tests/piv-header-svelte.spec.ts +0 -11
package/index.html CHANGED
@@ -1,6 +1,6 @@
1
1
  <!DOCTYPE html>
2
2
  <html lang="fr">
3
3
  <head>
4
- <meta http-equiv="refresh" content="0;url=/public/index.html" />
4
+ <meta http-equiv="refresh" content="0;url=./public/index.html" />
5
5
  </head>
6
6
  </html>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "qc-trousse-sdg",
3
- "version": "1.4.4",
3
+ "version": "1.4.5",
4
4
  "description": "Trousse de développement du Système de design gouvernemental du Québec",
5
5
  "main": "index.js",
6
6
  "scripts": {
package/public/css/qc-sdg-design-tokens.css CHANGED
@@ -154,8 +154,6 @@
154
154
  --qc-size-max-width-md: 24.9rem;
155
155
  --qc-size-max-width-lg: 52.8rem;
156
156
  --qc-size-max-width-xl: 82.5rem;
157
- --qc-size-input-max-width: var(--qc-size-max-width-md);
158
- --qc-size-textarea-max-width: var(--qc-size-max-width-lg);
159
157
  --qc-size-textarea-min-height: 10.8rem;
160
158
  --qc-size-search-bar-max-width: 64rem;
161
159
  --qc-grid-gutter: 32px;
package/public/css/qc-sdg-no-grid.css CHANGED
@@ -223,8 +223,6 @@ label.qc-choicefield-label input.qc-choicefield.qc-compact {
223
223
  --qc-size-max-width-md: 24.9rem;
224
224
  --qc-size-max-width-lg: 52.8rem;
225
225
  --qc-size-max-width-xl: 82.5rem;
226
- --qc-size-input-max-width: var(--qc-size-max-width-md);
227
- --qc-size-textarea-max-width: var(--qc-size-max-width-lg);
228
226
  --qc-size-textarea-min-height: 10.8rem;
229
227
  --qc-size-search-bar-max-width: 64rem;
230
228
  --qc-grid-gutter: 32px;
@@ -596,10 +594,6 @@ legend {
596
594
  padding: 0;
597
595
  }
598
596
 
599
- qc-select select {
600
- appearance: none;
601
- }
602
-
603
597
  h1, .qc-h1 {
604
598
  font-family: var(--qc-font-family-header);
605
599
  font-size: var(--qc-font-size-h1);
@@ -1437,28 +1431,44 @@ qc-piv-header {
1437
1431
  }
1438
1432
  .qc-piv-header .piv-top {
1439
1433
  display: flex;
1434
+ flex-wrap: nowrap;
1435
+ gap: var(--qc-spacer-sm);
1440
1436
  align-items: start;
1441
1437
  min-width: 7.2rem;
1442
1438
  }
1443
- .qc-piv-header .piv-top .logo {
1439
+ .qc-piv-header .piv-top .signature-group {
1444
1440
  display: flex;
1445
- flex-basis: 25.6rem;
1446
- margin-right: 0;
1441
+ flex-grow: 1;
1442
+ flex-wrap: wrap;
1443
+ align-items: start;
1444
+ margin-right: auto;
1447
1445
  }
1448
- .qc-piv-header .piv-top .logo [role=img] {
1449
- background-image: var(--logo-src);
1450
- background-repeat: no-repeat;
1451
- background-size: 100%;
1452
- background-position: center;
1453
- margin-right: 16px;
1446
+ .qc-piv-header .piv-top .signature-group > * {
1447
+ min-height: 7.2rem;
1448
+ }
1449
+ .qc-piv-header .piv-top .signature-group .logo {
1450
+ display: flex;
1451
+ align-items: center;
1452
+ flex-basis: 26.4rem;
1453
+ }
1454
+ .qc-piv-header .piv-top .signature-group .logo a {
1455
+ display: flex;
1456
+ height: fit-content;
1457
+ width: fit-content;
1458
+ outline-offset: 0.4rem;
1459
+ }
1460
+ .qc-piv-header .piv-top .signature-group .logo a img {
1461
+ display: flex;
1462
+ flex-basis: min-content;
1454
1463
  min-width: 150px;
1455
1464
  width: 100%;
1465
+ height: 100%;
1456
1466
  max-width: 20rem;
1457
- min-height: 7.2rem;
1467
+ min-height: 4rem;
1458
1468
  }
1459
1469
  .qc-piv-header .piv-top .title {
1460
- align-items: center;
1461
- align-self: center;
1470
+ display: block;
1471
+ align-content: center;
1462
1472
  }
1463
1473
  .qc-piv-header .piv-top .right-section {
1464
1474
  min-width: fit-content;
@@ -1503,9 +1513,13 @@ qc-piv-header {
1503
1513
  padding-bottom: var(--qc-spacer-md);
1504
1514
  }
1505
1515
 
1516
+ .page-title {
1517
+ display: inline-block;
1518
+ }
1519
+
1506
1520
  qc-piv-header a,
1507
1521
  .qc-piv-header a {
1508
- --qc-color-link-focus-outline: var(--qc-color-blue-pale);
1522
+ --qc-color-link-focus-outline: #dae6f0;
1509
1523
  --qc-color-link-hover: white;
1510
1524
  --qc-color-link-text: white;
1511
1525
  --qc-color-link-visited: white;
@@ -1557,10 +1571,6 @@ qc-piv-header a:focus-visible:has(img), qc-piv-header a:focus:has(img),
1557
1571
  margin-right: auto;
1558
1572
  min-width: 0;
1559
1573
  }
1560
- .qc-piv-header .piv-top .logo img {
1561
- width: 100%;
1562
- margin-right: 1.6rem;
1563
- }
1564
1574
  .qc-piv-header .piv-top .title {
1565
1575
  display: none;
1566
1576
  }
@@ -1580,6 +1590,12 @@ qc-piv-header a:focus-visible:has(img), qc-piv-header a:focus:has(img),
1580
1590
  flex-wrap: wrap;
1581
1591
  }
1582
1592
  }
1593
+ .no-link-title {
1594
+ margin: 0;
1595
+ font-weight: var(--qc-font-weight-regular);
1596
+ font-size: var(--qc-font-size-md);
1597
+ }
1598
+
1583
1599
  qc-piv-footer {
1584
1600
  margin-top: 4rem;
1585
1601
  padding-bottom: 4rem;
@@ -2048,7 +2064,7 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
2048
2064
  gap: 0 3.2rem;
2049
2065
  flex-wrap: wrap;
2050
2066
  margin-bottom: 3.2rem;
2051
- margin-top: -0.8rem;
2067
+ margin-top: calc(-1 * var(--qc-spacer-xs));
2052
2068
  }
2053
2069
  .qc-formfield-row > .qc-form-error {
2054
2070
  width: 100%;
@@ -2056,13 +2072,38 @@ input[type=radio].qc-choicefield:checked.qc-compact::before {
2056
2072
  .qc-formfield-row qc-textfield,
2057
2073
  .qc-formfield-row .qc-textfield {
2058
2074
  margin-top: var(--qc-spacer-xs);
2059
- display: block;
2060
- width: auto;
2061
2075
  margin-bottom: 0;
2076
+ min-width: 0;
2077
+ }
2078
+ .qc-formfield-row qc-textfield [size=xs] input,
2079
+ .qc-formfield-row .qc-textfield [size=xs] input {
2080
+ width: 6.3rem;
2081
+ max-width: 6.3rem;
2082
+ }
2083
+ .qc-formfield-row qc-textfield [size=sm] input,
2084
+ .qc-formfield-row .qc-textfield [size=sm] input {
2085
+ width: 15.6rem;
2086
+ max-width: 15.6rem;
2087
+ }
2088
+ .qc-formfield-row qc-textfield [size=md] input,
2089
+ .qc-formfield-row .qc-textfield [size=md] input {
2090
+ width: 24.9rem;
2091
+ max-width: 24.9rem;
2092
+ }
2093
+ .qc-formfield-row qc-textfield [size=lg] input,
2094
+ .qc-formfield-row .qc-textfield [size=lg] input {
2095
+ width: 52.8rem;
2096
+ max-width: 52.8rem;
2097
+ }
2098
+ .qc-formfield-row qc-textfield [size=xl] input,
2099
+ .qc-formfield-row .qc-textfield [size=xl] input {
2100
+ width: 82.5rem;
2101
+ max-width: 82.5rem;
2062
2102
  }
2063
- .qc-formfield-row .qc-dropdown-list-root {
2103
+ .qc-formfield-row .qc-select {
2064
2104
  margin-top: var(--qc-spacer-xs);
2065
2105
  margin-bottom: 0;
2106
+ width: fit-content;
2066
2107
  }
2067
2108
 
2068
2109
  input[type=checkbox].qc-choicefield:checked {
@@ -2117,6 +2158,7 @@ input[type=checkbox].qc-choicefield.qc-compact:checked::after {
2117
2158
  .qc-textfield label {
2118
2159
  font-weight: var(--qc-font-weight-content-bold);
2119
2160
  display: block;
2161
+ width: fit-content;
2120
2162
  }
2121
2163
  .qc-label.qc-compact, qc-textfield label.qc-compact,
2122
2164
  .qc-textfield label.qc-compact {
@@ -2191,42 +2233,55 @@ qc-textfield textarea:disabled {
2191
2233
  padding: 0.6rem;
2192
2234
  }
2193
2235
 
2194
- .qc-textfield input, qc-textfield input,
2195
- .qc-textfield input + .qc-textfield-charcount,
2196
- qc-textfield input + .qc-textfield-charcount {
2197
- max-width: var(--qc-size-input-max-width);
2236
+ [size=xs] {
2237
+ max-width: 100%;
2238
+ }
2239
+
2240
+ [size=sm] {
2241
+ max-width: 100%;
2242
+ }
2243
+
2244
+ [size=md] {
2245
+ max-width: 100%;
2246
+ }
2247
+
2248
+ [size=lg] {
2249
+ max-width: 100%;
2198
2250
  }
2199
2251
 
2200
- .qc-textfield textarea, qc-textfield textarea,
2201
- .qc-textfield textarea + .qc-textfield-charcount,
2202
- qc-textfield textarea + .qc-textfield-charcount {
2203
- max-width: var(--qc-size-textarea-max-width);
2252
+ [size=xl] {
2253
+ max-width: 100%;
2204
2254
  }
2205
2255
 
2206
2256
  [size=xs] input, [size=xs] input + .qc-textfield-charcount,
2207
2257
  [size=xs] textarea,
2208
2258
  [size=xs] textarea + .qc-textfield-charcount {
2209
- max-width: 6.3rem;
2259
+ max-width: 100%;
2260
+ width: 6.3rem;
2210
2261
  }
2211
2262
  [size=sm] input, [size=sm] input + .qc-textfield-charcount,
2212
2263
  [size=sm] textarea,
2213
2264
  [size=sm] textarea + .qc-textfield-charcount {
2214
- max-width: 15.6rem;
2265
+ max-width: 100%;
2266
+ width: 15.6rem;
2215
2267
  }
2216
2268
  [size=md] input, [size=md] input + .qc-textfield-charcount,
2217
2269
  [size=md] textarea,
2218
2270
  [size=md] textarea + .qc-textfield-charcount {
2219
- max-width: 24.9rem;
2271
+ max-width: 100%;
2272
+ width: 24.9rem;
2220
2273
  }
2221
2274
  [size=lg] input, [size=lg] input + .qc-textfield-charcount,
2222
2275
  [size=lg] textarea,
2223
2276
  [size=lg] textarea + .qc-textfield-charcount {
2224
- max-width: 52.8rem;
2277
+ max-width: 100%;
2278
+ width: 52.8rem;
2225
2279
  }
2226
2280
  [size=xl] input, [size=xl] input + .qc-textfield-charcount,
2227
2281
  [size=xl] textarea,
2228
2282
  [size=xl] textarea + .qc-textfield-charcount {
2229
- max-width: 82.5rem;
2283
+ max-width: 100%;
2284
+ width: 82.5rem;
2230
2285
  }
2231
2286
 
2232
2287
  .qc-textfield textarea, qc-textfield textarea {
@@ -2352,21 +2407,15 @@ qc-textfield textarea + .qc-textfield-charcount {
2352
2407
  }
2353
2408
  .qc-dropdown-list-multiple label {
2354
2409
  margin: 0;
2355
- padding-left: var(--qc-spacer-xs);
2356
- padding-right: var(--qc-spacer-xs);
2410
+ padding: var(--qc-spacer-xs);
2357
2411
  flex-grow: 1;
2358
- align-items: center;
2359
- }
2360
- .qc-dropdown-list-multiple .qc-choicefield {
2361
- margin-top: 0 !important;
2362
2412
  }
2363
2413
  .qc-dropdown-list-multiple .qc-choicefield:focus {
2364
2414
  outline: none;
2365
2415
  }
2366
2416
 
2367
2417
  .qc-dropdown-list-single {
2368
- padding-left: var(--qc-spacer-xs);
2369
- padding-right: var(--qc-spacer-xs);
2418
+ padding: var(--qc-spacer-xs);
2370
2419
  margin: 0;
2371
2420
  }
2372
2421
 
@@ -2375,7 +2424,7 @@ li[aria-selected=true] {
2375
2424
  }
2376
2425
 
2377
2426
  .qc-dropdown-list-items {
2378
- max-height: var(--dropdown-items-height);
2427
+ max-height: calc(var(--dropdown-items-height) * 0.1 * 1rem);
2379
2428
  overflow-y: auto;
2380
2429
  overflow-x: hidden;
2381
2430
  }
@@ -2404,14 +2453,12 @@ li[aria-selected=true] {
2404
2453
  }
2405
2454
  .qc-dropdown-list-items * {
2406
2455
  overflow: hidden;
2407
- white-space: nowrap;
2408
- text-overflow: ellipsis;
2409
2456
  }
2410
2457
 
2411
2458
  .qc-dropdown-list-multiple, .qc-dropdown-list-single {
2412
2459
  display: flex;
2413
2460
  align-items: center;
2414
- height: 4rem;
2461
+ min-height: 4rem;
2415
2462
  }
2416
2463
  .qc-dropdown-list-multiple.qc-dropdown-list-active:hover, .qc-dropdown-list-single.qc-dropdown-list-active:hover {
2417
2464
  background-color: var(--qc-color-grey-pale);
@@ -2494,27 +2541,10 @@ li[aria-selected=true] {
2494
2541
  align-content: center;
2495
2542
  }
2496
2543
 
2497
- .qc-dropdown-list-margin {
2544
+ .qc-select {
2545
+ display: block;
2498
2546
  margin-bottom: 3.2rem;
2499
- }
2500
-
2501
- .qc-dropdown-list-root {
2502
- width: 100%;
2503
- }
2504
- .qc-dropdown-list-root-xs {
2505
- max-width: var(--qc-size-max-width-xs);
2506
- }
2507
- .qc-dropdown-list-root-sm {
2508
- max-width: var(--qc-size-max-width-sm);
2509
- }
2510
- .qc-dropdown-list-root-md {
2511
- max-width: var(--qc-size-max-width-md);
2512
- }
2513
- .qc-dropdown-list-root-lg {
2514
- max-width: var(--qc-size-max-width-lg);
2515
- }
2516
- .qc-dropdown-list-root-xl {
2517
- max-width: var(--qc-size-max-width-xl);
2547
+ max-width: 100%;
2518
2548
  }
2519
2549
 
2520
2550
  .qc-dropdown-list-container {
@@ -2523,21 +2553,6 @@ li[aria-selected=true] {
2523
2553
  .qc-dropdown-list-container .qc-label {
2524
2554
  margin-bottom: 0.4rem;
2525
2555
  }
2526
- .qc-dropdown-list-container-xs {
2527
- max-width: var(--qc-size-max-width-xs);
2528
- }
2529
- .qc-dropdown-list-container-sm {
2530
- max-width: var(--qc-size-max-width-sm);
2531
- }
2532
- .qc-dropdown-list-container-md {
2533
- max-width: var(--qc-size-max-width-md);
2534
- }
2535
- .qc-dropdown-list-container-lg {
2536
- max-width: var(--qc-size-max-width-lg);
2537
- }
2538
- .qc-dropdown-list-container-xl {
2539
- max-width: var(--qc-size-max-width-xl);
2540
- }
2541
2556
 
2542
2557
  .qc-dropdown-list {
2543
2558
  display: flex;
@@ -2545,6 +2560,8 @@ li[aria-selected=true] {
2545
2560
  border: 0.1rem solid var(--qc-color-grey-medium);
2546
2561
  min-height: 4rem;
2547
2562
  background-color: var(--qc-color-background);
2563
+ max-width: 100%;
2564
+ min-width: 0;
2548
2565
  }
2549
2566
  .qc-dropdown-list.qc-dropdown-list-invalid {
2550
2567
  border: 0.2rem solid var(--qc-color-red-regular) !important;
@@ -2552,6 +2569,21 @@ li[aria-selected=true] {
2552
2569
  .qc-dropdown-list.qc-dropdown-list-invalid > .qc-dropdown-button {
2553
2570
  height: 3.6rem;
2554
2571
  }
2572
+ .qc-dropdown-list-xs {
2573
+ width: var(--qc-size-max-width-xs);
2574
+ }
2575
+ .qc-dropdown-list-sm {
2576
+ width: var(--qc-size-max-width-sm);
2577
+ }
2578
+ .qc-dropdown-list-md {
2579
+ width: var(--qc-size-max-width-md);
2580
+ }
2581
+ .qc-dropdown-list-lg {
2582
+ width: var(--qc-size-max-width-lg);
2583
+ }
2584
+ .qc-dropdown-list-xl {
2585
+ width: var(--qc-size-max-width-xl);
2586
+ }
2555
2587
 
2556
2588
  .qc-dropdown-list-search {
2557
2589
  margin: var(--qc-spacer-xs);