qc-trousse-sdg 1.4.0-develop.1 → 1.4.0

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 (293) hide show
  1. package/README.md +22 -5
  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/fonts/open-sans-v43-latin-500.woff2 +0 -0
  6. package/dist/fonts/open-sans-v43-latin-500italic.woff2 +0 -0
  7. package/dist/fonts/open-sans-v43-latin-600.woff2 +0 -0
  8. package/dist/fonts/open-sans-v43-latin-600italic.woff2 +0 -0
  9. package/dist/fonts/open-sans-v43-latin-700.woff2 +0 -0
  10. package/dist/fonts/open-sans-v43-latin-700italic.woff2 +0 -0
  11. package/dist/fonts/open-sans-v43-latin-italic.woff2 +0 -0
  12. package/dist/fonts/open-sans-v43-latin-regular.woff2 +0 -0
  13. package/dist/fonts/roboto-mono-v30-latin-500.woff2 +0 -0
  14. package/dist/fonts/roboto-mono-v30-latin-500italic.woff2 +0 -0
  15. package/dist/fonts/roboto-mono-v30-latin-600.woff2 +0 -0
  16. package/dist/fonts/roboto-mono-v30-latin-600italic.woff2 +0 -0
  17. package/dist/fonts/roboto-mono-v30-latin-700.woff2 +0 -0
  18. package/dist/fonts/roboto-mono-v30-latin-700italic.woff2 +0 -0
  19. package/dist/fonts/roboto-mono-v30-latin-italic.woff2 +0 -0
  20. package/dist/fonts/roboto-mono-v30-latin-regular.woff2 +0 -0
  21. package/dist/fonts/roboto-v48-latin-500.woff2 +0 -0
  22. package/dist/fonts/roboto-v48-latin-500italic.woff2 +0 -0
  23. package/dist/fonts/roboto-v48-latin-600.woff2 +0 -0
  24. package/dist/fonts/roboto-v48-latin-600italic.woff2 +0 -0
  25. package/dist/fonts/roboto-v48-latin-700.woff2 +0 -0
  26. package/dist/fonts/roboto-v48-latin-700italic.woff2 +0 -0
  27. package/dist/fonts/roboto-v48-latin-italic.woff2 +0 -0
  28. package/dist/fonts/roboto-v48-latin-regular.woff2 +0 -0
  29. package/dist/img/icon/adresse.svg +4 -0
  30. package/dist/img/icon/arrow-up.svg +3 -0
  31. package/dist/img/icon/calendar.svg +1 -0
  32. package/dist/img/icon/checkmark.svg +3 -0
  33. package/dist/img/icon/chevron-up-thin.svg +5 -0
  34. package/dist/img/{chevron-white.svg → icon/chevron-up.svg} +1 -1
  35. package/{public/img → dist/img/icon}/clipboard.svg +3 -3
  36. package/dist/img/icon/clock.svg +1 -0
  37. package/dist/img/icon/email.svg +1 -0
  38. package/dist/img/icon/error.svg +1 -0
  39. package/{public/img/exclamation-white.svg → dist/img/icon/exclamation.svg} +2 -2
  40. package/{public/img → dist/img/icon}/external-link.svg +2 -2
  41. package/dist/img/icon/information.svg +1 -0
  42. package/dist/img/icon/ligth-bulb.svg +1 -0
  43. package/{public/img → dist/img/icon}/minus.svg +1 -1
  44. package/dist/img/icon/note.svg +1 -0
  45. package/dist/img/icon/phone.svg +1 -0
  46. package/dist/img/{plus.svg → icon/plus.svg} +1 -1
  47. package/{public/img → dist/img/icon}/question-mark.svg +2 -2
  48. package/dist/img/icon/search-thin.svg +10 -0
  49. package/dist/img/icon/search.svg +1 -0
  50. package/dist/img/icon/success.svg +1 -0
  51. package/dist/img/icon/user.svg +6 -0
  52. package/dist/img/icon/warning.svg +1 -0
  53. package/dist/img/icon/website.svg +1 -0
  54. package/dist/img/icon/xclose.svg +1 -0
  55. package/dist/js/qc-sdg.min.js +1 -1
  56. package/package.json +11 -3
  57. package/playwright.config.ts +79 -0
  58. package/plugins/buildDevDoc.js +36 -0
  59. package/plugins/buildHtmlDoc.js +43 -0
  60. package/plugins/buildTestFixtures.js +37 -0
  61. package/public/css/qc-doc-sdg.css +4 -67
  62. package/public/css/qc-sdg-design-tokens.css +17 -0
  63. package/public/css/qc-sdg-no-grid.css +2001 -1108
  64. package/public/css/qc-sdg.css +1999 -1106
  65. package/public/img/checkmark.svg +3 -0
  66. package/public/img/question.svg +10 -0
  67. package/public/index.html +3104 -1387
  68. package/public/js/qc-doc-sdg.js +5705 -285
  69. package/public/js/qc-sdg.js +5660 -1415
  70. package/rollup.config.js +67 -41
  71. package/scripts/buildImagesMap.js +85 -0
  72. package/scripts/check-release-note.sh +11 -0
  73. package/scripts/compile-doc.sh +4 -0
  74. package/src/doc/_index.html +100 -0
  75. package/src/doc/_nav.html +53 -0
  76. package/src/doc/_test.html +32 -0
  77. package/src/doc/components/Code.svelte +6 -2
  78. package/src/doc/components/TopNav.svelte +8 -9
  79. package/src/doc/components/color-doc.svelte +1 -1
  80. package/src/doc/ejs/layout/index.ejs +129 -0
  81. package/src/doc/qc-doc-sdg.js +1 -2
  82. package/src/doc/scss/components/_code.scss +1 -1
  83. package/src/doc/scss/jQueryUI/_jquery-ui.autocomplete.scss +1 -0
  84. package/src/doc/scss/qc-doc-sdg.scss +1 -1
  85. package/src/doc/scss/settings/_base.scss +4 -0
  86. package/src/sdg/_components.js +9 -2
  87. package/src/sdg/{components → bases}/Icon/Icon.svelte +13 -6
  88. package/src/sdg/bases/Icon/IconDoc.ejs +129 -0
  89. package/src/sdg/{components → bases}/Icon/IconWC.svelte +3 -1
  90. package/src/sdg/bases/Icon/Test/IconEmbeddedTest.html +1 -0
  91. package/src/sdg/bases/Icon/Test/IconEmbeddedTest.svelte +168 -0
  92. package/src/sdg/bases/Icon/Test/iconTest.html +156 -0
  93. package/src/sdg/bases/Icon/_icon.html +254 -0
  94. package/src/sdg/bases/Icon/_icons.scss +47 -0
  95. package/src/sdg/{scss/base → bases/accessibility}/_accessibility.scss +1 -1
  96. package/src/sdg/bases/colors/_colors.html +112 -0
  97. package/src/sdg/bases/figures/_figure.html +16 -0
  98. package/src/sdg/{scss/base → bases/form}/_form.scss +10 -3
  99. package/src/sdg/bases/grid/_grid.html +118 -0
  100. package/src/sdg/bases/headings/_headings.html +18 -0
  101. package/src/sdg/bases/headings/_headings.scss +25 -0
  102. package/src/sdg/{scss/base → bases/layout}/_layout.scss +1 -4
  103. package/src/sdg/bases/links/_links.html +104 -0
  104. package/src/sdg/bases/links/_links.scss +51 -0
  105. package/src/sdg/bases/lists/_lists.html +27 -0
  106. package/src/sdg/bases/separator/_separator.html +7 -0
  107. package/src/sdg/bases/separator/_separator.scss +5 -0
  108. package/src/sdg/bases/shadings/_shadings.html +14 -0
  109. package/src/sdg/{scss/base → bases/shadings}/_shadings.scss +1 -1
  110. package/src/sdg/bases/typography/_font.html +45 -0
  111. package/src/sdg/bases/typography/_fonts.scss +162 -0
  112. package/src/sdg/bases/typography/_paragraph.html +17 -0
  113. package/src/sdg/bases/typography/_paragraph.scss +33 -0
  114. package/src/sdg/components/Alert/Alert.svelte +2 -5
  115. package/src/sdg/components/Alert/AlertWC.svelte +3 -2
  116. package/src/sdg/components/Alert/_alert.html +110 -0
  117. package/src/sdg/{scss/components → components/Alert}/_alert.scss +1 -1
  118. package/src/sdg/components/Button/Button.svelte +50 -0
  119. package/src/sdg/components/Button/ButtonWC.svelte +36 -0
  120. package/src/sdg/components/Button/Test/buttonTest.html +349 -0
  121. package/src/sdg/components/Button/_button.html +186 -0
  122. package/src/sdg/components/Button/_button.scss +202 -0
  123. package/src/sdg/components/CharCount/_charCount.html +7 -0
  124. package/src/sdg/components/Checkbox/Checkbox.svelte +77 -0
  125. package/src/sdg/components/Checkbox/CheckboxWC.svelte +49 -0
  126. package/src/sdg/components/Checkbox/_checkbox.html +86 -0
  127. package/src/sdg/components/Checkbox/_checkbox.scss +70 -0
  128. package/src/sdg/components/Checkbox/updateInput.svelte.js +23 -0
  129. package/src/sdg/components/ChoiceGroup/ChoiceGroup.svelte +56 -0
  130. package/src/sdg/components/ChoiceGroup/ChoiceGroupWC.svelte +47 -0
  131. package/src/sdg/components/ChoiceGroup/Test/ChoiceGroupeEmbededTest.svelte +261 -0
  132. package/src/sdg/components/ChoiceGroup/Test/checkboxEmbeddedTest.html +1 -0
  133. package/src/sdg/components/ChoiceGroup/Test/checkboxTest.html +253 -0
  134. package/src/sdg/components/ChoiceGroup/Test/radiosEmbeddedTest.html +1 -0
  135. package/src/sdg/components/ChoiceGroup/Test/radiosTest.html +185 -0
  136. package/src/sdg/components/ChoiceGroup/ToggleSwitchGroupWC.svelte +56 -0
  137. package/src/sdg/components/ChoiceGroup/_choiceGroup.html +285 -0
  138. package/src/sdg/components/ChoiceGroup/_choiceGroup.scss +32 -0
  139. package/src/sdg/components/ChoiceGroup/_selectionButton.scss +53 -0
  140. package/src/sdg/components/ChoiceGroup/_selectionButtons.html +130 -0
  141. package/src/sdg/components/DropdownList/DropdownList.svelte +394 -0
  142. package/src/sdg/components/DropdownList/DropdownListButton/DropdownListButton.svelte +43 -0
  143. package/src/sdg/components/DropdownList/DropdownListButton/_dropdownListButton.scss +65 -0
  144. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItems.svelte +110 -0
  145. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/DropdownListItemsMultiple.svelte +185 -0
  146. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsMultiple/_dropdownListItemsMultiple.scss +19 -0
  147. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/DropdownListItemsSingle.svelte +136 -0
  148. package/src/sdg/components/DropdownList/DropdownListItems/DropdownListItemsSingle/_dropdownListItemsSingle.scss +11 -0
  149. package/src/sdg/components/DropdownList/DropdownListItems/_dropdownListItems.scss +67 -0
  150. package/src/sdg/components/DropdownList/SelectWC.svelte +158 -0
  151. package/src/sdg/components/DropdownList/Test/DropdownListEmbeddedTest.svelte +89 -0
  152. package/src/sdg/components/DropdownList/Test/dropdownListEmbeddedTest.html +1 -0
  153. package/src/sdg/components/DropdownList/Test/dropdownListTest.html +194 -0
  154. package/src/sdg/components/DropdownList/Test/dropdownListTestUtils.js +113 -0
  155. package/src/sdg/components/DropdownList/_dropdownList.scss +73 -0
  156. package/src/sdg/components/DropdownList/_select.html +212 -0
  157. package/src/sdg/components/ExternalLink/ExternalLink.svelte +1 -1
  158. package/src/sdg/components/Fieldset/Fieldset.svelte +73 -0
  159. package/src/sdg/components/Fieldset/_fieldset.scss +95 -0
  160. package/src/sdg/components/FormError/FormError.svelte +51 -0
  161. package/src/sdg/components/FormError/_formError.scss +21 -0
  162. package/src/sdg/components/FormfieldRow/_formfieldRow.html +108 -0
  163. package/src/sdg/components/IconButton/IconButton.svelte +1 -1
  164. package/src/sdg/components/IconButton/_iconButton.scss +14 -0
  165. package/src/sdg/components/Label/Label.svelte +28 -0
  166. package/src/sdg/components/Label/LabelText.svelte +4 -0
  167. package/src/sdg/components/Label/_label.scss +19 -0
  168. package/src/sdg/components/Notice/Notice.svelte +1 -2
  169. package/src/sdg/components/Notice/NoticeWC.svelte +3 -0
  170. package/src/sdg/components/Notice/_notice.html +141 -0
  171. package/src/sdg/{scss/components → components/Notice}/_notice.scss +1 -1
  172. package/src/sdg/components/PivFooter/PivFooter.svelte +8 -9
  173. package/src/sdg/components/PivFooter/PivFooterWC.svelte +6 -14
  174. package/src/sdg/components/PivFooter/_pivFooter.html +153 -0
  175. package/src/sdg/{scss/components → components/PivFooter}/_pivFooter.scss +1 -1
  176. package/src/sdg/components/PivHeader/PivHeader.svelte +47 -53
  177. package/src/sdg/components/PivHeader/PivHeaderWC.svelte +9 -20
  178. package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.html +1 -0
  179. package/src/sdg/components/PivHeader/Test/pivHeaderEmbeddedTest.svelte +28 -0
  180. package/src/sdg/components/PivHeader/Test/pivHeaderTest.html +43 -0
  181. package/src/sdg/components/PivHeader/_pivHeader.html +221 -0
  182. package/src/sdg/{scss/components → components/PivHeader}/_pivHeader.scss +55 -77
  183. package/src/sdg/components/RadioButton/_radioButton.html +24 -0
  184. package/src/sdg/components/RadioButton/_radioButton.scss +29 -0
  185. package/src/sdg/components/SearchBar/SearchBar.svelte +12 -32
  186. package/src/sdg/components/SearchBar/_searchBar.html +125 -0
  187. package/src/sdg/{scss/components → components/SearchBar}/_searchBar.scss +3 -3
  188. package/src/sdg/components/SearchInput/SearchInput.svelte +26 -4
  189. package/src/sdg/components/SearchInput/SearchInputWC.svelte +3 -1
  190. package/src/sdg/components/SearchInput/_searchInput.html +85 -0
  191. package/src/sdg/{scss/components → components/SearchInput}/_searchInput.scss +27 -2
  192. package/src/sdg/components/TextField/Doc/TextFieldDemo.svelte +143 -0
  193. package/src/sdg/components/TextField/Test/TextFieldEmbededTest.svelte +129 -0
  194. package/src/sdg/components/TextField/Test/textFieldEmbeddedTest.html +1 -0
  195. package/src/sdg/components/TextField/Test/textFieldTest.html +121 -0
  196. package/src/sdg/components/TextField/TextField.svelte +171 -0
  197. package/src/sdg/components/TextField/TextFieldWC.svelte +90 -0
  198. package/src/sdg/components/TextField/_textField.html +218 -0
  199. package/src/sdg/components/TextField/_textField.scss +110 -0
  200. package/src/sdg/components/TextField/textFieldUtils.js +19 -0
  201. package/src/sdg/components/ToTop/ToTop.svelte +2 -4
  202. package/src/sdg/components/ToTop/_toTop.html +45 -0
  203. package/src/sdg/{scss/components → components/ToTop}/_toTop.scss +2 -2
  204. package/src/sdg/components/ToggleSwitch/Test/ToggleSwitchEmbeddedTest.svelte +46 -0
  205. package/src/sdg/components/ToggleSwitch/Test/toggleSwitchEmbeddedTest.html +1 -0
  206. package/src/sdg/components/ToggleSwitch/Test/toggleSwitchTest.html +34 -0
  207. package/src/sdg/components/ToggleSwitch/ToggleSwitch.svelte +34 -0
  208. package/src/sdg/components/ToggleSwitch/ToggleSwitchWC.svelte +66 -0
  209. package/src/sdg/components/ToggleSwitch/_toggleSwitch.html +160 -0
  210. package/src/sdg/components/ToggleSwitch/_toggleSwitch.scss +97 -0
  211. package/src/sdg/components/utils.js +81 -1
  212. package/src/sdg/qc-sdg-test.js +6 -0
  213. package/src/sdg/scss/lib/_functions.scss +10 -2
  214. package/src/sdg/scss/lib/_mixins.scss +63 -26
  215. package/src/sdg/scss/qc-sdg.scss +1 -1
  216. package/src/sdg/scss/qc-sgd-no-grid.scss +30 -18
  217. package/src/sdg/scss/settings/_base.scss +5 -33
  218. package/src/sdg/scss/settings/_images.scss +30 -0
  219. package/src/sdg/scss/settings/_tokens.scss +23 -0
  220. package/src/sdg/scss/utilities/_display.scss +1 -1
  221. package/src/sdg/scss/utilities/_states.scss +13 -0
  222. package/tests/button.spec.ts +11 -0
  223. package/tests/choice-group.spec.ts +36 -0
  224. package/tests/dropdown-list.spec.ts +529 -0
  225. package/tests/icon.spec.ts +19 -0
  226. package/tests/pivHeader.spec.ts +22 -0
  227. package/tests/textfield.spec.ts +21 -0
  228. package/tests/toggle-switch.spec.ts +20 -0
  229. package/dist/img/arrow-up-white.svg +0 -3
  230. package/dist/img/chevron-blue.svg +0 -3
  231. package/dist/img/clipboard.svg +0 -8
  232. package/dist/img/error-white.svg +0 -1
  233. package/dist/img/error.svg +0 -1
  234. package/dist/img/exclamation-white.svg +0 -37
  235. package/dist/img/external-link-white.svg +0 -18
  236. package/dist/img/external-link.svg +0 -10
  237. package/dist/img/facebook.svg +0 -6
  238. package/dist/img/information-white.svg +0 -1
  239. package/dist/img/information.svg +0 -1
  240. package/dist/img/linkedin.svg +0 -5
  241. package/dist/img/loupe-piv-fonce.svg +0 -1
  242. package/dist/img/minus.svg +0 -6
  243. package/dist/img/qc-sprite.svg +0 -1
  244. package/dist/img/question-mark.svg +0 -47
  245. package/dist/img/success-white.svg +0 -1
  246. package/dist/img/success.svg +0 -1
  247. package/dist/img/twitter.svg +0 -8
  248. package/dist/img/warning.svg +0 -1
  249. package/dist/img/xclose-blue.svg +0 -6
  250. package/dist/img/xclose-white.svg +0 -1
  251. package/dist/img/youtube.svg +0 -3
  252. package/public/img/ampoule.svg +0 -1
  253. package/public/img/arrow-up-white.svg +0 -3
  254. package/public/img/chevron-blue.svg +0 -3
  255. package/public/img/chevron-white.svg +0 -3
  256. package/public/img/error-white.svg +0 -1
  257. package/public/img/error.svg +0 -1
  258. package/public/img/external-link-white.svg +0 -18
  259. package/public/img/facebook.svg +0 -6
  260. package/public/img/information-white.svg +0 -1
  261. package/public/img/information.svg +0 -1
  262. package/public/img/linkedin.svg +0 -5
  263. package/public/img/logo-piv-footer-mess.png +0 -0
  264. package/public/img/loupe-piv-droite.svg +0 -1
  265. package/public/img/loupe-piv-fonce.svg +0 -1
  266. package/public/img/note.svg +0 -1
  267. package/public/img/piv-bas-MCE-theme-clair.png +0 -0
  268. package/public/img/piv-bas-MCE-theme-sombre.png +0 -0
  269. package/public/img/piv-logo-pied-de-page.svg +0 -37
  270. package/public/img/plus.svg +0 -6
  271. package/public/img/qc-sprite.svg +0 -1
  272. package/public/img/quebec-logo.svg +0 -13
  273. package/public/img/success-white.svg +0 -1
  274. package/public/img/success.svg +0 -1
  275. package/public/img/twitter.svg +0 -8
  276. package/public/img/warning.svg +0 -1
  277. package/public/img/xclose-blue.svg +0 -6
  278. package/public/img/xclose-white.svg +0 -1
  279. package/public/img/youtube.svg +0 -3
  280. package/src/doc/scss/components/_button.scss +0 -61
  281. package/src/sdg/components/PivFooter/_defaultCopyright.svelte +0 -11
  282. package/src/sdg/components/PivHeader/_defaultLinks.svelte +0 -24
  283. package/src/sdg/components/QcCustomElement.js +0 -10
  284. package/src/sdg/scss/base/_fonts.scss +0 -29
  285. package/src/sdg/scss/base/_typography.scss +0 -94
  286. package/src/sdg/scss/components/_icons.scss +0 -169
  287. package/src/sdg/scss/components/_separator.scss +0 -5
  288. /package/dist/img/{loupe-piv-droite.svg → piv-search.svg} +0 -0
  289. /package/src/sdg/{scss/base → bases/colors}/_colors.scss +0 -0
  290. /package/src/sdg/{scss/base → bases/figures}/_figure.scss +0 -0
  291. /package/src/sdg/{scss → bases}/grid/_grid-lib.scss +0 -0
  292. /package/src/sdg/{scss → bases}/grid/_grid.scss +0 -0
  293. /package/src/sdg/{scss/base → bases/lists}/_lists.scss +0 -0
package/public/index.html CHANGED
@@ -1,1416 +1,3133 @@
1
1
  <!DOCTYPE html>
2
- <!--suppress ALL -->
3
- <html lang="fr">
4
- <head>
5
- <meta charset="UTF-8">
6
- <meta name="viewport"
7
- content="width=device-width, initial-scale=1.0">
8
- <link rel="stylesheet"
9
- href="css/qc-sdg.css">
10
- <link rel="stylesheet"
11
- href="css/qc-doc-sdg.css">
12
- <title>Documentation technique du Système de design gouvernemental</title>
13
- <script defer
14
- src='js/qc-sdg.js'
15
- sdg-css-filename="qc-sdg.css">
16
- </script>
17
- <script defer
18
- src='js/qc-doc-sdg.js'
19
- sdg-css-filename="qc-doc-sdg.css">
20
- </script>
21
- </head>
22
- <body>
23
- <header>
24
- <qc-piv-header id="pivEntete"
25
- title-text="Trousse de développement du Système de design gouvernemental"
26
- alt-logo="Signature du gouvernement du Québec. Accédez au Système de design gouvernemental.">
27
- </qc-piv-header>
28
- </header>
29
- <qc-doc-top-nav></qc-doc-top-nav>
30
- <div class="qc-container">
31
- <h1>
32
- <span class="qc-subhead" id="version"></span>
33
- Documentation technique
34
- </h1>
35
- <nav class="main-menu" _
36
- aria-label="Navigation principale">
37
- <h2 class="qc-h4">Bases</h2>
38
- <ul>
39
- <li><a href='#couleurs'>Couleurs</a></li>
40
- <li><a href='#grille'>Grille horizontale</a></li>
41
- <li><a href='#figures'>Figures</a></li>
42
- <li><a href='#liens'>Liens</a></li>
43
- <li><a href='#liste'>Liste</a></li>
44
- <li><a href='#titre'>Niveaux de titres</a></li>
45
- <li><a href='#ombrages'>Ombrages</a></li>
46
- <li><a href='#paragraphes'>Paragraphes</a></li>
47
- <li><a href='#polices'>Polices de caractères</a></li>
48
- <li><a href='#separator'>Séparateur</a></li>
49
- </ul>
50
- <h2 class="qc-h4">Composants</h2>
51
- <ul>
52
- <li><a href='#alert'>Alerte générale</a></li>
53
- <li><a href='#notice'>Avis</a></li>
54
- <li><a href='#search-bar'>Barre de recherche</a></li>
55
- <li><a href='#piv'>Composants du PIV</a>
56
- <ul>
57
- <li><a href='#piv-header'>Bandeau d'en-tête du PIV</a>
58
- <li><a href='#piv-footer'>Pied de page du PIV</a>
59
- </ul>
60
- </li>
61
- <li><a href="#toTop">Haut de page</a></li>
62
-
63
- </ul>
64
- </nav>
2
+ <!--suppress ALL -->
3
+ <html lang="fr">
4
+ <head>
5
+ <meta charset="UTF-8">
6
+ <meta name="viewport"
7
+ content="width=device-width, initial-scale=1.0">
8
+ <link rel="stylesheet"
9
+ href="css/qc-sdg.css">
10
+ <link rel="stylesheet"
11
+ href="css/qc-doc-sdg.css">
12
+ <title>Documentation technique du Système de design gouvernemental</title>
13
+ <script defer
14
+ src='js/qc-sdg.js'
15
+ sdg-css-filename="qc-sdg.css">
16
+ </script>
17
+ <script defer
18
+ src='js/qc-doc-sdg.js'
19
+ sdg-css-filename="qc-doc-sdg.css">
20
+ </script>
21
+ </head>
22
+ <body>
23
+ <header>
24
+ <qc-piv-header id="pivEntete"
25
+ title-text="Trousse de développement du Système de design gouvernemental"
26
+ alt-logo="Signature du gouvernement du Québec. Accédez au Système de design gouvernemental.">
27
+ </qc-piv-header>
28
+ </header>
29
+ <qc-doc-top-nav></qc-doc-top-nav>
30
+ <div class="qc-container">
31
+ <h1>
32
+ <span class="qc-subhead" id="version"></span>
33
+ Documentation technique
34
+ </h1>
35
+ <nav class="main-menu"
36
+ aria-label="Navigation principale">
37
+ <h2 class="qc-h4">Bases</h2>
38
+ <ul>
39
+ <li><a href='#couleurs'>Couleurs</a></li>
40
+ <li><a href='#grille'>Grille horizontale (grille de 8 px)</a></li>
41
+ <li><a href='#images'>Images</a></li>
42
+ <li><a href="#icons">Iconographie</a></li>
43
+ <li><a href='#liens'>Liens</a></li>
44
+ <li><a href='#liste'>Liste</a></li>
45
+ <li><a href='#titre'>Niveaux de titres</a></li>
46
+ <li><a href='#ombrages'>Ombrages</a></li>
47
+ <li><a href='#paragraphes'>Paragraphes</a></li>
48
+ <li><a href='#polices'>Polices de caractères</a></li>
49
+ <li><a href='#separator'>Séparateur</a></li>
50
+ </ul>
51
+ <h2 class="qc-h4">Composants</h2>
52
+ <ul>
53
+ <li><a href='#alert'>Alerte générale</a></li>
54
+ <li><a href='#notice'>Avis</a></li>
55
+ <li><a href='#search-bar'>Barre de recherche</a></li>
56
+ <li><a href='#buttons'>Boutons</a></li>
57
+ <li>
58
+ <a href='#formulaires'>Formulaires</a>
59
+ <ul>
60
+ <li><a href="#radios-checkboxes">Boutons radio, cases à cocher et boutons de sélection</a>
61
+ <ul>
62
+ <li><a href="#choice-group">Groupe de boutons radio et de cases à cocher</a></li>
63
+ <li><a href="#checkbox">Case à cocher unique</a></li>
64
+ <li><a href="#selection-button">Boutons de sélection</a></li>
65
+ </ul>
66
+ </li>
67
+ <li><a href="#textfield">Champ texte</a></li>
68
+ <li><a href="#search-input">Champ de recherche</a></li>
69
+ <li><a href="#toggle-switch">Commutateur</a></li>
70
+ <li><a href="#select">Liste déroulante</a></li>
71
+ <li><a href="#champs-alignes">Champs alignés horizontalement</a></li>
72
+ </ul>
73
+
74
+ </li>
75
+ <li><a href="#toTop">Haut de page</a></li>
76
+ </ul>
77
+ <h2 class="qc-h4">Modèles</h2>
78
+ <ul>
79
+ <li><a href='#piv-header'>Bandeau d’en-tête du PIV</a>
80
+ <li><a href='#piv-footer'>Pied de page du PIV</a>
81
+ </ul>
82
+
83
+ </nav>
84
+ </div>
85
+ <main id="main">
86
+ <div class="qc-container">
87
+ <hr/>
88
+ <section id="couleurs">
89
+ <h2 >Couleurs</h2>
90
+
91
+ <h3>Couleurs d’arrière-plan</h3>
92
+
93
+ <qc-color-doc token="white"
94
+ title="Blanc"
95
+ border="true"
96
+ ></qc-color-doc>
97
+
98
+
99
+ <h3>Couleur du texte</h3>
100
+
101
+ <qc-color-doc token="text-primary"
102
+ title="Bleu foncé"
103
+ >
104
+ </qc-color-doc>
105
+
106
+ <h3>Couleurs principales</h3>
107
+
108
+ <qc-color-doc token="blue-pale"
109
+ title="Bleu pale"
110
+ ></qc-color-doc>
111
+
112
+ <qc-color-doc token="blue-light"
113
+ title="Bleu clair"
114
+ ></qc-color-doc>
115
+ <qc-color-doc token="blue-regular"
116
+ title="Bleu"
117
+ ></qc-color-doc>
118
+ <qc-color-doc token="blue-piv"
119
+ title="Bleu PIV"
120
+ ></qc-color-doc>
121
+ <qc-color-doc token="blue-medium"
122
+ title="Bleu moyen"
123
+ ></qc-color-doc>
124
+ <qc-color-doc token="blue-dark"
125
+ title="Bleu foncé"
126
+ ></qc-color-doc>
127
+
128
+ <h3>Couleur d’accent</h3>
129
+
130
+ <qc-color-doc token="accent"
131
+ title="Rose"
132
+ ></qc-color-doc>
133
+
134
+ <h3>Niveaux de gris</h3>
135
+
136
+ <qc-color-doc token="grey-pale"
137
+ title="Gris pale"
138
+ ></qc-color-doc>
139
+
140
+ <qc-color-doc token="grey-light"
141
+ title="Gris clair"
142
+ ></qc-color-doc>
143
+ <qc-color-doc token="grey-regular"
144
+ title="Gris"
145
+ ></qc-color-doc>
146
+ <qc-color-doc token="grey-medium"
147
+ title="Gris moyen"
148
+ ></qc-color-doc>
149
+ <qc-color-doc token="grey-dark"
150
+ title="Gris foncé"
151
+ ></qc-color-doc>
152
+
153
+ <h3>Couleurs fonctionnelles</h3>
154
+
155
+ <h4>Rouges</h4>
156
+
157
+ <qc-color-doc token="pink-pale"
158
+ title="Rose pâle"
159
+ ></qc-color-doc>
160
+ <qc-color-doc token="pink-regular"
161
+ title="Rose"
162
+ ></qc-color-doc>
163
+ <qc-color-doc token="red-regular"
164
+ title="Rouge"
165
+ ></qc-color-doc>
166
+ <qc-color-doc token="red-dark"
167
+ title="Rouge foncé"
168
+ ></qc-color-doc>
169
+
170
+ <h4>Verts</h4>
171
+
172
+ <qc-color-doc token="green-pale"
173
+ title="Vert pâle"
174
+ ></qc-color-doc>
175
+ <qc-color-doc token="green-regular"
176
+ title="Vert"
177
+ ></qc-color-doc>
178
+ <qc-color-doc token="green-dark"
179
+ title="Vert foncé"
180
+ ></qc-color-doc>
181
+
182
+ <h4>Jaunes</h4>
183
+
184
+ <qc-color-doc token="yellow-pale"
185
+ title="Jaune pâle"
186
+ ></qc-color-doc>
187
+ <qc-color-doc token="yellow-regular"
188
+ title="Jaune"
189
+ ></qc-color-doc>
190
+ <qc-color-doc token="yellow-dark"
191
+ title="Jaune foncé"
192
+ ></qc-color-doc>
193
+
194
+ <h4>Violet</h4>
195
+
196
+ <qc-color-doc token="purple"
197
+ title="Violet"
198
+ ></qc-color-doc>
199
+ </section>
200
+
201
+ <hr/>
202
+
203
+ <!-- grille horizontale -->
204
+ <h2 id="grille">Grille horizontale</h2>
205
+ <qc-doc-exemple caption="Présentation de la grille sur 12 colonnes"
206
+ code-target-id="exemple-grille"
207
+ >
208
+ <div id="grid-samples">
209
+ <div id="background">
210
+ <div class="qc-row">
211
+ <div class="qc-col-1">
212
+ <div></div>
213
+ </div>
214
+ <div class="qc-col-1">
215
+ <div></div>
216
+ </div>
217
+ <div class="qc-col-1">
218
+ <div></div>
219
+ </div>
220
+ <div class="qc-col-1">
221
+ <div></div>
222
+ </div>
223
+ <div class="qc-col-1">
224
+ <div></div>
225
+ </div>
226
+ <div class="qc-col-1">
227
+ <div></div>
228
+ </div>
229
+ <div class="qc-col-1">
230
+ <div></div>
231
+ </div>
232
+ <div class="qc-col-1">
233
+ <div></div>
234
+ </div>
235
+ <div class="qc-col-1">
236
+ <div></div>
237
+ </div>
238
+ <div class="qc-col-1">
239
+ <div></div>
240
+ </div>
241
+ <div class="qc-col-1">
242
+ <div></div>
243
+ </div>
244
+ <div class="qc-col-1">
245
+ <div></div>
246
+ </div>
247
+ </div>
65
248
  </div>
66
- <main id="main">
67
- <div class="qc-container">
68
- <hr/>
69
- <!-- couleurs -->
70
- <h2 id="couleurs">Couleurs</h2>
249
+ <div id="exemple-grille">
250
+ <div class="qc-row">
251
+ <div class="qc-col-12">
252
+ <div>12</div>
253
+ </div>
254
+ </div>
255
+ <div class="qc-row">
256
+ <div class=" qc-col-md-6">
257
+ <div>6</div>
258
+ </div>
259
+ <div class="qc-col-md-6">
260
+ <div>6</div>
261
+ </div>
262
+ </div>
263
+ <div class="qc-row">
264
+ <div class=" qc-col-md-4">
265
+ <div>4</div>
266
+ </div>
267
+ <div class=" qc-col-md-4">
268
+ <div>4</div>
269
+ </div>
270
+ <div class=" qc-col-md-4">
271
+ <div>4</div>
272
+ </div>
273
+ </div>
71
274
 
72
- <h3>Couleurs d’arrière-plan</h3>
275
+ <div class="qc-row">
276
+ <div class="qc-col-3">
277
+ <div>3</div>
278
+ </div>
279
+ <div class="qc-col-3">
280
+ <div>3</div>
281
+ </div>
282
+ <div class="qc-col-3">
283
+ <div>3</div>
284
+ </div>
285
+ <div class="qc-col-3">
286
+ <div>3</div>
287
+ </div>
288
+ </div>
73
289
 
74
- <qc-color-doc token="white"
75
- title="Blanc"
76
- border="true"
77
- ></qc-color-doc>
290
+ <div class="qc-row">
291
+ <div class="qc-col-md-9 ">
292
+ <div>9</div>
293
+ </div>
294
+ <div class="qc-col-md-3 ">
295
+ <div>3</div>
296
+ </div>
297
+ </div>
78
298
 
299
+ <div class="qc-row">
300
+ <div class="qc-col-md-3 ">
301
+ <div>3</div>
302
+ </div>
303
+ <div class="qc-col-md-9 ">
304
+ <div>9</div>
305
+ </div>
306
+ </div>
307
+ </div>
79
308
 
80
- <h3>Couleur du texte</h3>
309
+ </div>
310
+ </qc-doc-exemple>
311
+ <p>
312
+ <strong>Points de rupture</strong><br/>
313
+ <code>--qc-breakpoint-sm<br>
314
+ --qc-breakpoint-md<br>
315
+ --qc-breakpoint-lg
316
+ </code>
317
+ </p>
318
+ <p>
319
+ <strong>Gouttière</strong><br/>
320
+ <code>--qc-breakpoint-gutter</code>
321
+ </p>
322
+ <hr/>
323
+ <h2 id="images">Images</h2>
324
+ <p>Les figures servent en général pour l’affichage des images.</p>
325
+ <qc-doc-exemple id="exemple-figure"
326
+ caption="Exemple d’affichage d’une image"
327
+ >
328
+ <figure>
329
+ <img src="img/figure-sample.png"
330
+ alt="Image avec légende">
331
+ <figcaption>
332
+ <p>La légende de l’image <br>
333
+ <em>La source de l’image</em>
334
+ </p>
335
+ </figcaption>
336
+ </figure>
337
+ </qc-doc-exemple>
338
+ <!-- <qc-code target-id="exemple-figure"></qc-code>-->
339
+ <hr/>
340
+
341
+ <h2 id="icons">Iconographie (qc-icon)</h2>
342
+
343
+ <p> Le composant <code>qc-icon</code> permet d’afficher une icône avec la bonne couleur quel que soit le thème.</p>
344
+
345
+ <h3>Exemples</h3>
346
+ <qc-doc-exemple caption="Exemples d'utilisation d'icônes avec différentes propriétés."
347
+ id="icons-exemple">
348
+ <div>
349
+ <qc-icon type="success" color="pink-regular" size="xs"></qc-icon>
350
+ <qc-icon type="success" color="blue-piv" size="sm"></qc-icon>
351
+ <qc-icon type="success" color="grey-dark" size="md"></qc-icon>
352
+ <qc-icon type="success" color="blue-regular" size="lg"></qc-icon>
353
+ <qc-icon type="success" color="success" size="xl"></qc-icon>
354
+ </div>
355
+ <div>
356
+ <qc-icon type="arrow-up" size="lg" rotate="-90"></qc-icon>
357
+ <qc-icon type="arrow-up" size="lg" rotate="90"></qc-icon>
358
+ <qc-icon type="arrow-up" size="lg" rotate="180"></qc-icon>
359
+ <qc-icon type="arrow-up" size="lg"></qc-icon>
360
+ </div>
81
361
 
82
- <qc-color-doc token="text-primary"
83
- title="Bleu foncé"
84
- >
85
- </qc-color-doc>
86
-
87
- <h3>Couleurs principales</h3>
88
-
89
- <qc-color-doc token="blue-pale"
90
- title="Bleu pale"
91
- ></qc-color-doc>
92
-
93
- <qc-color-doc token="blue-light"
94
- title="Bleu clair"
95
- ></qc-color-doc>
96
- <qc-color-doc token="blue-regular"
97
- title="Bleu"
98
- ></qc-color-doc>
99
- <qc-color-doc token="blue-piv"
100
- title="Bleu PIV"
101
- ></qc-color-doc>
102
- <qc-color-doc token="blue-medium"
103
- title="Bleu moyen"
104
- ></qc-color-doc>
105
- <qc-color-doc token="blue-dark"
106
- title="Bleu foncé"
107
- ></qc-color-doc>
108
-
109
- <h3>Couleur d’accent</h3>
110
-
111
- <qc-color-doc token="accent"
112
- title="Rose"
113
- ></qc-color-doc>
114
-
115
- <h3>Niveaux de gris</h3>
116
-
117
- <qc-color-doc token="grey-pale"
118
- title="Gris pale"
119
- ></qc-color-doc>
120
-
121
- <qc-color-doc token="grey-light"
122
- title="Gris clair"
123
- ></qc-color-doc>
124
- <qc-color-doc token="grey-regular"
125
- title="Gris"
126
- ></qc-color-doc>
127
- <qc-color-doc token="grey-medium"
128
- title="Gris moyen"
129
- ></qc-color-doc>
130
- <qc-color-doc token="grey-dark"
131
- title="Gris foncé"
132
- ></qc-color-doc>
133
-
134
- <h3>Couleurs fonctionnelles</h3>
135
-
136
- <h4>Rouges</h4>
137
-
138
- <qc-color-doc token="pink-pale"
139
- title="Rose pâle"
140
- ></qc-color-doc>
141
- <qc-color-doc token="pink-regular"
142
- title="Rose"
143
- ></qc-color-doc>
144
- <qc-color-doc token="red-regular"
145
- title="Rouge"
146
- ></qc-color-doc>
147
- <qc-color-doc token="red-dark"
148
- title="Rouge foncé"
149
- ></qc-color-doc>
150
-
151
- <h4>Verts</h4>
152
-
153
- <qc-color-doc token="green-pale"
154
- title="Vert pâle"
155
- ></qc-color-doc>
156
- <qc-color-doc token="green-regular"
157
- title="Vert"
158
- ></qc-color-doc>
159
- <qc-color-doc token="green-dark"
160
- title="Vert foncé"
161
- ></qc-color-doc>
162
-
163
- <h4>Jaunes</h4>
164
-
165
- <qc-color-doc token="yellow-pale"
166
- title="Jaune pâle"
167
- ></qc-color-doc>
168
- <qc-color-doc token="yellow-regular"
169
- title="Jaune"
170
- ></qc-color-doc>
171
- <qc-color-doc token="yellow-dark"
172
- title="Jaune foncé"
173
- ></qc-color-doc>
174
-
175
- <h4>Violet</h4>
176
-
177
- <qc-color-doc token="purple"
178
- title="Violet"
179
- ></qc-color-doc>
180
-
181
- <hr/>
182
-
183
- <!-- grille horizontale -->
184
- <h2 id="grille">Grille horizontale</h2>
185
- <qc-doc-exemple caption="Présentation de la grille sur 12 colonnes"
186
- code-target-id="exemple-grille"
187
- >
188
- <div id="grid-samples">
189
- <div id="background">
190
- <div class="qc-row">
191
- <div class="qc-col-1">
192
- <div></div>
193
- </div>
194
- <div class="qc-col-1">
195
- <div></div>
196
- </div>
197
- <div class="qc-col-1">
198
- <div></div>
199
- </div>
200
- <div class="qc-col-1">
201
- <div></div>
202
- </div>
203
- <div class="qc-col-1">
204
- <div></div>
205
- </div>
206
- <div class="qc-col-1">
207
- <div></div>
208
- </div>
209
- <div class="qc-col-1">
210
- <div></div>
211
- </div>
212
- <div class="qc-col-1">
213
- <div></div>
214
- </div>
215
- <div class="qc-col-1">
216
- <div></div>
217
- </div>
218
- <div class="qc-col-1">
219
- <div></div>
220
- </div>
221
- <div class="qc-col-1">
222
- <div></div>
223
- </div>
224
- <div class="qc-col-1">
225
- <div></div>
226
- </div>
227
- </div>
228
- </div>
229
- <div id="exemple-grille">
230
- <div class="qc-row">
231
- <div class="qc-col-12">
232
- <div>12</div>
233
- </div>
234
- </div>
235
- <div class="qc-row">
236
- <div class=" qc-col-md-6">
237
- <div>6</div>
238
- </div>
239
- <div class="qc-col-md-6">
240
- <div>6</div>
241
- </div>
242
- </div>
243
- <div class="qc-row">
244
- <div class=" qc-col-md-4">
245
- <div>4</div>
246
- </div>
247
- <div class=" qc-col-md-4">
248
- <div>4</div>
249
- </div>
250
- <div class=" qc-col-md-4">
251
- <div>4</div>
252
- </div>
253
- </div>
254
-
255
- <div class="qc-row">
256
- <div class="qc-col-3">
257
- <div>3</div>
258
- </div>
259
- <div class="qc-col-3">
260
- <div>3</div>
261
- </div>
262
- <div class="qc-col-3">
263
- <div>3</div>
264
- </div>
265
- <div class="qc-col-3">
266
- <div>3</div>
267
- </div>
268
- </div>
269
-
270
- <div class="qc-row">
271
- <div class="qc-col-md-9 ">
272
- <div>9</div>
273
- </div>
274
- <div class="qc-col-md-3 ">
275
- <div>3</div>
276
- </div>
277
- </div>
278
-
279
- <div class="qc-row">
280
- <div class="qc-col-md-3 ">
281
- <div>3</div>
282
- </div>
283
- <div class="qc-col-md-9 ">
284
- <div>9</div>
285
- </div>
286
- </div>
287
- </div>
288
-
289
- </div>
290
- </qc-doc-exemple>
291
- <p>
292
- <strong>Points de rupture</strong><br/>
293
- <code>--qc-breakpoint-sm<br>
294
- --qc-breakpoint-md<br>
295
- --qc-breakpoint-lg
296
- </code>
297
- </p>
298
- <p>
299
- <strong>Gouttière</strong><br/>
300
- <code>--qc-breakpoint-gutter</code>
301
- </p>
302
-
303
- <hr/>
304
-
305
- <!-- images -->
306
- <h2 id="figures">Figures</h2>
307
- <p>Les figures servent en général pour l’affichage des images.</p>
308
- <qc-doc-exemple id="exemple-figure"
309
- caption="Exemple d’affichage d’une image"
310
- >
311
- <figure>
312
- <img src="img/figure-sample.png"
313
- alt="Image avec légende">
314
- <figcaption>
315
- <p>La légende de l'image <br>
316
- <em>La source de l'image</em>
317
- </p>
318
- </figcaption>
319
- </figure>
320
- </qc-doc-exemple>
321
- <!-- <qc-code target-id="exemple-figure"></qc-code>-->
322
-
323
- <hr/>
324
-
325
- <!-- liens -->
326
- <h2 id="liens">Liens</h2>
327
- <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
362
+
363
+ </qc-doc-exemple>
364
+ <style>
365
+ #icons-exemple {
366
+ div:has(> qc-icon) {
367
+ margin-bottom: var(--qc-spacer-content-block-mb);
368
+ }
369
+ qc-icon {
370
+ margin-right: var(--qc-spacer-sm);
371
+ }
372
+ }
373
+ </style>
374
+
375
+ <qc-doc-exemple caption="Exemple d'icône personnalisée en base64.">
376
+ <qc-icon
377
+ src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pgo8IS0tIEdlbmVyYXRvcjogQWRvYmUgSWxsdXN0cmF0b3IgMTYuMC4wLCBTVkcgRXhwb3J0IFBsdWctSW4gLiBTVkcgVmVyc2lvbjogNi4wMCBCdWlsZCAwKSAgLS0+CjwhRE9DVFlQRSBzdmcgUFVCTElDICItLy9XM0MvL0RURCBTVkcgMS4xLy9FTiIgImh0dHA6Ly93d3cudzMub3JnL0dyYXBoaWNzL1NWRy8xLjEvRFREL3N2ZzExLmR0ZCI+CjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iQ2FwYV8xIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHhtbG5zOnhsaW5rPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5L3hsaW5rIiB4PSIwcHgiIHk9IjBweCIKCSB3aWR0aD0iOTczLjFweCIgaGVpZ2h0PSI5NzMuMXB4IiB2aWV3Qm94PSIwIDAgOTczLjEgOTczLjEiIHN0eWxlPSJlbmFibGUtYmFja2dyb3VuZDpuZXcgMCAwIDk3My4xIDk3My4xOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSIKCT4KPGc+Cgk8cGF0aCBkPSJNNTAyLjI5LDc4OC4xOTloLTQ3Yy0zMy4xLDAtNjAsMjYuOS02MCw2MHY2NC45YzAsMzMuMSwyNi45LDYwLDYwLDYwaDQ3YzMzLjEwMSwwLDYwLTI2LjksNjAtNjB2LTY0LjkKCQlDNTYyLjI5LDgxNSw1MzUuMzkxLDc4OC4xOTksNTAyLjI5LDc4OC4xOTl6IiBmaWxsPSIjZmZmIi8+Cgk8cGF0aCBkPSJNMTcwLjg5LDI4NS44bDg2LjcsMTAuOGMyNy41LDMuNCw1My42LTEyLjQsNjMuNS0zOC4zYzEyLjUtMzIuNywyOS45LTU4LjUsNTIuMi03Ny4zYzMxLjYwMS0yNi42LDcwLjktNDAsMTE3LjktNDAKCQljNDguNywwLDg3LjUsMTIuOCwxMTYuMywzOC4zYzI4LjgsMjUuNiw0My4xLDU2LjIsNDMuMSw5Mi4xYzAsMjUuOC04LjEsNDkuNC0yNC4zLDcwLjhjLTEwLjUsMTMuNi00Mi44LDQyLjItOTYuNyw4NS45CgkJYy01NCw0My43LTg5Ljg5OSw4My4wOTktMTA3Ljg5OSwxMTguMDk5Yy0xOC40LDM1LjgwMS0yNC44LDc1LjUtMjYuNCwxMTUuMzAxYy0xLjM5OSwzNC4xLDI1LjgsNjIuNSw2MCw2Mi41aDQ5CgkJYzMxLjIsMCw1Ny0yMy45LDU5LjgtNTQuOWMyLTIyLjI5OSw1LjctMzkuMTk5LDExLjMwMS01MC42OTljOS4zOTktMTkuNzAxLDMzLjY5OS00NS43MDEsNzIuNjk5LTc4LjEKCQlDNzIzLjU5LDQ3Ny44LDc3Mi43OSw0MjguNCw3OTUuODkxLDM5MmMyMy0zNi4zLDM0LjYtNzQuOCwzNC42LTExNS41YzAtNzMuNS0zMS4zLTEzOC05NC0xOTMuNGMtNjIuNi01NS40LTE0Ny04My4xLTI1My04My4xCgkJYy0xMDAuOCwwLTE4Mi4xLDI3LjMtMjQ0LjEsODJjLTUyLjgsNDYuNi04NC45LDEwMS44LTk2LjIsMTY1LjVDMTM5LjY5LDI2Ni4xLDE1Mi4zOSwyODMuNSwxNzAuODksMjg1Ljh6IiBmaWxsPSIjZmZmIi8+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPGc+CjwvZz4KPC9zdmc+Cg=="
378
+ />
379
+ </qc-doc-exemple>
380
+
381
+ <h3>Documentation technique</h3>
382
+
383
+ <h4>Attributs</h4>
384
+ <div class="table-overflow">
385
+ <table class="qc-table qc-striped component-attributes-description">
386
+ <thead>
387
+ <tr>
388
+ <th>Nom</th>
389
+ <th>Valeur attendue</th>
390
+ <th>Valeur par défaut</th>
391
+ <th>Description</th>
392
+ </tr>
393
+ </thead>
394
+ <tbody>
395
+ <tr>
396
+ <td>type</td>
397
+ <td>Texte</td>
398
+ <td>""</td>
399
+ <td>Nom de l’icône à afficher, à prendre dans la liste ci-dessous.</td>
400
+ </tr>
401
+ <tr>
402
+ <td>label</td>
403
+ <td>Texte</td>
404
+ <td>""</td>
405
+ <td>Texte alternatif pour l’accessibilité. Sert de libellé pour les lecteurs d’écran.</td>
406
+ </tr>
407
+ <tr>
408
+ <td>rotate</td>
409
+ <td>Nombre</td>
410
+ <td>na</td>
411
+ <td>Rotation de l'image en degrés dans le sens horaire.</td>
412
+ </tr>
413
+ <tr>
414
+ <td>size</td>
415
+ <td>xs, sm, md, lg ou xl</td>
416
+ <td>md</td>
417
+ <td>Taille de l’icône.</td>
418
+ </tr>
419
+ <tr>
420
+ <td>color</td>
421
+ <td>Toute valeur correspondant à un jeton de couleur une fois précédée de <code>‑‑qc‑color‑</code>. Par exemple, "text-primary" donne la couleur de <code>--qc-color-text-primary</code></td>
422
+ <td>text-primary</td>
423
+ <td>Couleur de l'icône.</td>
424
+ </tr>
425
+ <tr>
426
+ <td>width</td>
427
+ <td>Toute valeur acceptée par la directive css <code>width</code></td>
428
+ <td>auto</td>
429
+ <td>Largeur personnalisée de l’icône.</td>
430
+ </tr>
431
+ <tr>
432
+ <td>height</td>
433
+ <td>Toute valeur acceptée par la directive css <code>height</code></td>
434
+ <td>auto</td>
435
+ <td>Hauteur personnalisée de l’icône.</td>
436
+ </tr>
437
+ <tr>
438
+ <td>src</td>
439
+ <td>Toute valeur acceptée par la fonction css <code>url()</code></td>
440
+ <td>na</td>
441
+ <td>Chemin pour afficher une icône personnalisée.</td>
442
+ </tr>
443
+ </tbody>
444
+ </table>
445
+ </div>
446
+
447
+ <h4>Liste des icônes</h4>
448
+
449
+ <div class="table-overflow">
450
+ <table class="qc-table qc-striped component-attributes-description">
451
+ <thead>
452
+ <tr>
453
+ <th>Nom</th>
454
+ <th>Aperçu</th>
455
+ </tr>
456
+ </thead>
457
+ <tbody>
458
+
459
+ <tr>
460
+ <td>adresse</td>
461
+ <td><qc-icon type="adresse" size="lg" /></td>
462
+ </tr>
463
+
464
+ <tr>
465
+ <td>arrow-up</td>
466
+ <td><qc-icon type="arrow-up" size="lg" /></td>
467
+ </tr>
468
+
469
+ <tr>
470
+ <td>calendar</td>
471
+ <td><qc-icon type="calendar" size="lg" /></td>
472
+ </tr>
473
+
474
+ <tr>
475
+ <td>checkmark</td>
476
+ <td><qc-icon type="checkmark" size="lg" /></td>
477
+ </tr>
478
+
479
+ <tr>
480
+ <td>chevron-up-thin</td>
481
+ <td><qc-icon type="chevron-up-thin" size="lg" /></td>
482
+ </tr>
483
+
484
+ <tr>
485
+ <td>chevron-up</td>
486
+ <td><qc-icon type="chevron-up" size="lg" /></td>
487
+ </tr>
488
+
489
+ <tr>
490
+ <td>clipboard</td>
491
+ <td><qc-icon type="clipboard" size="lg" /></td>
492
+ </tr>
493
+
494
+ <tr>
495
+ <td>clock</td>
496
+ <td><qc-icon type="clock" size="lg" /></td>
497
+ </tr>
498
+
499
+ <tr>
500
+ <td>email</td>
501
+ <td><qc-icon type="email" size="lg" /></td>
502
+ </tr>
503
+
504
+ <tr>
505
+ <td>error</td>
506
+ <td><qc-icon type="error" size="lg" /></td>
507
+ </tr>
508
+
509
+ <tr>
510
+ <td>exclamation</td>
511
+ <td><qc-icon type="exclamation" size="lg" /></td>
512
+ </tr>
513
+
514
+ <tr>
515
+ <td>external-link</td>
516
+ <td><qc-icon type="external-link" size="lg" /></td>
517
+ </tr>
518
+
519
+ <tr>
520
+ <td>information</td>
521
+ <td><qc-icon type="information" size="lg" /></td>
522
+ </tr>
523
+
524
+ <tr>
525
+ <td>ligth-bulb</td>
526
+ <td><qc-icon type="ligth-bulb" size="lg" /></td>
527
+ </tr>
528
+
529
+ <tr>
530
+ <td>minus</td>
531
+ <td><qc-icon type="minus" size="lg" /></td>
532
+ </tr>
533
+
534
+ <tr>
535
+ <td>note</td>
536
+ <td><qc-icon type="note" size="lg" /></td>
537
+ </tr>
538
+
539
+ <tr>
540
+ <td>phone</td>
541
+ <td><qc-icon type="phone" size="lg" /></td>
542
+ </tr>
543
+
544
+ <tr>
545
+ <td>plus</td>
546
+ <td><qc-icon type="plus" size="lg" /></td>
547
+ </tr>
548
+
549
+ <tr>
550
+ <td>question-mark</td>
551
+ <td><qc-icon type="question-mark" size="lg" /></td>
552
+ </tr>
553
+
554
+ <tr>
555
+ <td>search-thin</td>
556
+ <td><qc-icon type="search-thin" size="lg" /></td>
557
+ </tr>
558
+
559
+ <tr>
560
+ <td>search</td>
561
+ <td><qc-icon type="search" size="lg" /></td>
562
+ </tr>
563
+
564
+ <tr>
565
+ <td>success</td>
566
+ <td><qc-icon type="success" size="lg" /></td>
567
+ </tr>
568
+
569
+ <tr>
570
+ <td>user</td>
571
+ <td><qc-icon type="user" size="lg" /></td>
572
+ </tr>
573
+
574
+ <tr>
575
+ <td>warning</td>
576
+ <td><qc-icon type="warning" size="lg" /></td>
577
+ </tr>
578
+
579
+ <tr>
580
+ <td>website</td>
581
+ <td><qc-icon type="website" size="lg" /></td>
582
+ </tr>
583
+
584
+ <tr>
585
+ <td>xclose</td>
586
+ <td><qc-icon type="xclose" size="lg" /></td>
587
+ </tr>
588
+
589
+ </tbody>
590
+ </table>
591
+ </div>
592
+
593
+
594
+
595
+ <hr/>
596
+ <h2 id="liens">Liens</h2>
597
+ <qc-doc-exemple caption="Exemple de différents liens hypertexte selon leurs états.">
598
+ <dl>
599
+ <dt>Lien interne</dt>
600
+ <dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
601
+ <dd>
602
+ <qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
603
+ </dd>
604
+
605
+ <dt>Lien au survol (pseudo-classe :hover)</dt>
606
+ <dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
607
+ <dd>
608
+ <qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
609
+ </qc-external-link>
610
+ </dd>
611
+ <dt>Lien au focus (pseudo-classe :focus)</dt>
612
+ <dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
613
+ <dd>
614
+ <qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
615
+ </qc-external-link>
616
+ </dd>
617
+ <dt>Lien au clic (pseudo-classe :active)</dt>
618
+ <dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
619
+ <dd>
620
+ <qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
621
+ </qc-external-link>
622
+ </dd>
623
+ <dt>Lien visité (pseudo-classe :visited)</dt>
624
+ <dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
625
+ <dd>
626
+ <qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
627
+ </qc-external-link>
628
+ </dd>
629
+ </dl>
630
+ </qc-doc-exemple>
631
+
632
+
633
+ <h3>Lien externe (qc-external-link)</h3>
634
+
635
+ <p>Le composant <code>qc-external-link</code> ajoute une icône à la fin du lien, séparée du dernier mot par
636
+ une espace insécable.</p>
637
+ <p>NB : le composant <code>qc-external-link</code> est ouvert, c-à-d. qu'il ne contient pas de DOM d’ombre (<i>shadow
638
+ DOM</i>).</p>
639
+
640
+ <h4>Exemples</h4>
641
+
642
+ <qc-doc-exemple
643
+ caption="Exemple de lien externe avec différentes tailles de police. Réduire la fenêtre pour constater que l’icône ne se sépare pas du lien au passage à la ligne.">
644
+ <p class="qc-font-size-xl">
645
+ Lorem ipsum
646
+ <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
647
+ adipiscing</a></qc-external-link>
648
+ elit
649
+ </p>
650
+ <p class="qc-font-size-lg">
651
+ Lorem ipsum
652
+ <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
653
+ adipiscing</a></qc-external-link>
654
+ elit
655
+ </p>
656
+ <p class="qc-font-size-md">
657
+ Lorem ipsum
658
+ <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
659
+ adipiscing</a></qc-external-link>
660
+ elit
661
+ </p>
662
+ <p class="qc-font-size-sm">
663
+ Lorem ipsum
664
+ <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
665
+ adipiscing</a></qc-external-link>
666
+ elit
667
+ </p>
668
+
669
+
670
+ </qc-doc-exemple>
671
+
672
+ <h4>Attributs</h4>
673
+ <div class="table-overflow">
674
+ <table class="qc-table qc-striped component-attributes-description">
675
+ <thead>
676
+ <tr>
677
+ <th>Nom</th>
678
+ <th>Valeur attendue</th>
679
+ <th>Valeur par défaut</th>
680
+ <th>Description</th>
681
+ </tr>
682
+ </thead>
683
+ <tbody>
684
+ <tr>
685
+ <td>img-alt</td>
686
+ <td>Texte</td>
687
+ <td>
328
688
  <dl>
329
- <dt>Lien interne</dt>
330
- <dd><a href="javascript:;" class="not-visited">Lien interne</a></dd>
331
- <dd>
332
- <qc-external-link><a href="javascript:;" class="not-visited">Lien externe</a></qc-external-link>
333
- </dd>
334
-
335
- <dt>Lien au survol (pseudo-classe :hover)</dt>
336
- <dd><a href="javascript:;" class="pseudo-hover">Lien interne</a></dd>
337
- <dd>
338
- <qc-external-link><a href="javascript:;" class="pseudo-hover">Lien externe</a>
339
- </qc-external-link>
340
- </dd>
341
- <dt>Lien au focus (pseudo-classe :focus)</dt>
342
- <dd><a href="javascript:;" class="pseudo-focus">Lien interne</a></dd>
343
- <dd>
344
- <qc-external-link><a href="javascript:;" class="pseudo-focus">Lien externe</a>
345
- </qc-external-link>
346
- </dd>
347
- <dt>Lien au clic (pseudo-classe :active)</dt>
348
- <dd><a href="javascript:;" class="pseudo-active">Lien interne</a></dd>
349
- <dd>
350
- <qc-external-link><a href="javascript:;" class="pseudo-active">Lien externe</a>
351
- </qc-external-link>
352
- </dd>
353
- <dt>Lien visité (pseudo-classe :visited)</dt>
354
- <dd><a href="javascript:;" class="pseudo-visited">Lien interne</a></dd>
355
- <dd>
356
- <qc-external-link><a href="javascript:;" class="pseudo-visited">Lien externe</a>
357
- </qc-external-link>
358
- </dd>
689
+ <dt>Français</dt>
690
+ <dd>Ce lien dirige vers un autre site.</dd>
691
+ <dt>Anglais</dt>
692
+ <dd>This link directs to another site.</dd>
359
693
  </dl>
360
- </qc-doc-exemple>
361
-
362
-
363
- <h3>Lien externe (qc-external-link)</h3>
364
-
365
- <p>Le composant <code>qc-external-link</code> ajoute une icône à la fin du lien, séparée du dernier mot par
366
- une espace insécable.</p>
367
- <p>NB : le composant <code>qc-external-link</code> est ouvert, c-à-d. qu'il ne contient pas de DOM d'ombre (<i>shadow
368
- DOM</i>).</p>
369
-
370
- <h4>Exemples</h4>
371
-
372
- <qc-doc-exemple
373
- caption="Exemple de lien externe avec différentes tailles de police. Réduire la fenêtre pour constater que l’icône ne se sépare pas du lien au passage à la ligne.">
374
- <p class="qc-font-size-xl">
375
- Lorem ipsum
376
- <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
377
- adipiscing</a></qc-external-link>
378
- elit
379
- </p>
380
- <p class="qc-font-size-lg">
381
- Lorem ipsum
382
- <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
383
- adipiscing</a></qc-external-link>
384
- elit
385
- </p>
386
- <p class="qc-font-size-md">
387
- Lorem ipsum
388
- <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
389
- adipiscing</a></qc-external-link>
390
- elit
391
- </p>
392
- <p class="qc-font-size-sm">
393
- Lorem ipsum
394
- <qc-external-link><a href="http://www.external.domain.com/">Lorem ipsum dolor sit amet, consectetur
395
- adipiscing</a></qc-external-link>
396
- elit
397
- </p>
398
-
399
-
400
- </qc-doc-exemple>
401
-
402
- <h4>Attributs</h4>
403
- <div class="table-overflow">
404
- <table class="qc-table qc-striped component-attributes-description">
405
- <thead>
406
- <tr>
407
- <th>Nom</th>
408
- <th>Valeur attendue</th>
409
- <th>Valeur par défaut</th>
410
- <th>Description</th>
411
- </tr>
412
- </thead>
413
- <tbody>
414
- <tr>
415
- <td>img-alt</td>
416
- <td>Texte</td>
417
- <td>
418
- <dl>
419
- <dt>Français</dt>
420
- <dd>Ce lien dirige vers un autre site.</dd>
421
- <dt>Anglais</dt>
422
- <dd>This link directs to another site.</dd>
423
- </dl>
424
- </td>
425
- <td>Texte alternatif de l’image du lien externe.</td>
426
- </tr>
427
- </tbody>
428
- </table>
694
+ </td>
695
+ <td>Texte alternatif de l’image du lien externe.</td>
696
+ </tr>
697
+ </tbody>
698
+ </table>
699
+ </div>
700
+ <hr/>
701
+ <h2 id="liste">Liste</h2>
702
+ <qc-doc-exemple caption="Exemple de listes">
703
+
704
+ <ul>
705
+ <li>Élément de liste 1</li>
706
+ <li>Élément de liste 2</li>
707
+ <li>Élément de liste 3
708
+ <ul>
709
+ <li>Élément de liste 3.1</li>
710
+ <li>Élément de liste 3.2</li>
711
+ </ul>
712
+ </li>
713
+ <li>Élément de liste 4</li>
714
+ </ul>
715
+ <ol>
716
+ <li>Élément de liste 1</li>
717
+ <li>Élément de liste 2</li>
718
+ <li>Élément de liste 3
719
+ <ol>
720
+ <li>Élément de liste 3.1</li>
721
+ <li>Élément de liste 3.2</li>
722
+ </ol>
723
+ </li>
724
+ <li>Élément de liste 4</li>
725
+ </ol>
726
+ <p>Lorem ipsum dolor sit amet</p>
727
+ </qc-doc-exemple>
728
+ <hr/>
729
+ <h2 id="titre">Niveaux de titres</h2>
730
+ <qc-doc-exemple caption="Exemples de titres"
731
+ code-target-id="liste-titres"
732
+ >
733
+ <div role="presentation"
734
+ id="liste-titres"
735
+ >
736
+ <h1 class="qc-h1">Titre de niveau 1</h1>
737
+ <h1 id="exemple-titre-h1"
738
+ class="qc-h1"><span class="qc-subhead ">Surtitre</span>Titre de niveau 1 avec surtitre
739
+ </h1>
740
+ <h2 class="qc-h2">Titre de niveau 2</h2>
741
+ <h3 class="qc-h3">Titre de niveau 3</h3>
742
+ <h4 class="qc-h4">Titre de niveau 4</h4>
743
+ <h5 class="qc-h5">Titre de niveau 5</h5>
744
+ <h6 class="qc-h6">Titre de niveau 6</h6>
745
+ </div>
746
+ </qc-doc-exemple>
747
+ <hr/>
748
+ <h2 id="ombrages">Ombrages</h2>
749
+ <p>Pour appliquer un ombrage sur un élément, il suffit de lui appliquer la classe <code>qc-shading-X</code>,
750
+ X étant le niveau d’élévation. </p>
751
+ <qc-doc-exemple
752
+ caption="Exemple des différents niveaux d’élévation."
753
+ code-target-id="liste-elevation">
754
+ <div id="liste-elevation">
755
+ <div class="qc-shading-0">Élévation 0</div>
756
+ <div class="qc-shading-1">Élévation 1</div>
757
+ <div class="qc-shading-2">Élévation 2</div>
758
+ <div class="qc-shading-3">Élévation 3</div>
759
+ <div class="qc-shading-4">Élévation 4</div>
760
+ </div>
761
+ </qc-doc-exemple>
762
+ <hr/>
763
+ <h2 id="paragraphes">Paragraphes</h2>
764
+ <qc-doc-exemple caption="Exemple de paragraphes">
765
+ <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien vitae tempor porttitor.
766
+ Morbi tincidunt lorem et neque commodo varius. Suspendisse pretium risus sit amet nisi tempus, ut
767
+ euismod ex euismod. Nulla eget ullamcorper justo. Quisque cursus eget ex eget cursus. Suspendisse
768
+ potenti. Donec a risus viverra dolor sodales elementum. In lobortis ligula vitae libero pretium,
769
+ vitae fermentum nulla varius. Sed felis libero, facilisis vitae turpis in, ullamcorper bibendum
770
+ erat.</p>
771
+ <p>Aliquam rutrum sollicitudin lorem, vitae elementum tellus cursus ut. Vivamus in sodales risus.
772
+ Maecenas neque ante, faucibus non lobortis et, auctor non sem. Integer nec hendrerit dolor. Mauris
773
+ odio elit, viverra quis dolor sit amet, finibus auctor ex. Aliquam dapibus vestibulum metus a
774
+ blandit. Etiam vitae augue id dui interdum viverra. In at metus nec augue accumsan iaculis.
775
+ Suspendisse interdum, orci quis posuere ultrices, neque orci gravida diam, eu gravida nulla justo ac
776
+ nisi. Nullam vitae sapien id augue imperdiet vehicula id et risus. Cras egestas aliquam magna eu
777
+ aliquam. Sed aliquam semper est in imperdiet. Pellentesque non ultrices nibh. Nullam hendrerit
778
+ dictum gravida. Aliquam vel arcu in odio dapibus malesuada.</p>
779
+ </qc-doc-exemple>
780
+ <hr/>
781
+ <h2 id="polices">Polices de caractères</h2>
782
+ <div class="font-titles">
783
+ <h3><strong>Roboto</strong></h3>
784
+ <qc-doc-exemple id="font-roboto"
785
+ caption="Exemple de texte en Roboto, avec différentes graisses."
786
+ >
787
+ <div style="font-family: var(--qc-font-family-header);">
788
+ <p style="font-weight:var(--qc-font-weight-header-regular);">
789
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
790
+ <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
791
+ </p>
792
+ <p style="font-weight:var(--qc-font-weight-header-medium);">
793
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
794
+ <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
795
+ </p>
796
+ <p style="font-weight:var(--qc-font-weight-header-bold);">
797
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
798
+ <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
799
+ </p>
800
+ </div>
801
+ </qc-doc-exemple>
802
+ <!-- <qc-code target-id="font-roboto"></qc-code>-->
803
+ </div>
804
+ <div>
805
+ <h3><strong>Open Sans</strong></h3>
806
+ <qc-doc-exemple id="font-open-sans"
807
+ caption="Exemple de texte en Open Sans, avec différentes graisses."
808
+ >
809
+ <div style="font-family: var(--qc-font-family-content);">
810
+ <p style="font-weight:var(--qc-font-weight-content-regular);">
811
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
812
+ <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
813
+ </p>
814
+ <p style="font-weight:var(--qc-font-weight-content-medium);">
815
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
816
+ <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
817
+ </p>
818
+ <p style="font-weight:var(--qc-font-weight-content-bold);">
819
+ ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
820
+ <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
821
+ </p>
822
+ </div>
823
+ </qc-doc-exemple>
824
+ <!-- <qc-code target-id="font-open-sans"></qc-code>-->
825
+ </div>
826
+ <hr/>
827
+ <h2 id="separator">Séparateur</h2>
828
+
829
+ <qc-doc-exemple caption="Exemple de séparateur">
830
+ <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
831
+ <hr/>
832
+ <p>A autem consequuntur cum cupiditate dignissimos, dolore doloribus,</p>
833
+ </qc-doc-exemple>
834
+ <hr/>
835
+ <h2 id="alert">Alerte générale (qc-alert)</h2>
836
+ <h3>Exemples</h3>
837
+ <h4>Alerte jaune</h4>
838
+ <p>
839
+ <a href="javascript:;"
840
+ id="show-qc-alert"
841
+ hidden
842
+ >
843
+ Réafficher l’alerte
844
+ </a>
845
+ </p>
846
+
847
+ <qc-doc-exemple id="alert-warning"
848
+ caption="Exemple d’alerte jaune">
849
+ <qc-alert id="alerte-masquable"
850
+ type="warning"
851
+ maskable="true"
852
+ content="Alerte jaune d’importance élevée"
853
+ >
854
+ </qc-alert>
855
+ </qc-doc-exemple>
856
+ <!-- <qc-code target-id="alert-warning"></qc-code>-->
857
+
858
+ <h4>Alerte bleue</h4>
859
+ <qc-doc-exemple id="alert-general"
860
+ caption="Exemple d’alerte générale">
861
+ <qc-alert type="general"
862
+ maskable="false">
863
+ <p>Alerte bleue d’importance modérée <a href="javascript:;">avec un lien textuel</a></p>
864
+ </qc-alert>
865
+ </qc-doc-exemple>
866
+
867
+ <!-- <qc-code target-id="alert-general"></qc-code>-->
868
+
869
+ <h3>Documentation technique</h3>
870
+
871
+ <h4>Attributs</h4>
872
+ <div class="table-overflow">
873
+ <table class="qc-table qc-striped component-attributes-description">
874
+ <thead>
875
+ <tr>
876
+ <th>Nom</th>
877
+ <th>Valeur attendue</th>
878
+ <th>Valeur par défaut</th>
879
+ <th>Description</th>
880
+ </tr>
881
+ </thead>
882
+ <tr>
883
+ <td>type</td>
884
+ <td>"general" ou "warning"</td>
885
+ <td>"general"</td>
886
+ <td>Type de l’alerte : s'il s'agit d’une alerte bleue ou jaune</td>
887
+ </tr>
888
+ <tr>
889
+ <td>maskable</td>
890
+ <td>"true" ou "false"</td>
891
+ <td>"true"</td>
892
+ <td>Afficher le bouton de fermeture de l’alerte</td>
893
+ </tr>
894
+ <tr>
895
+ <td>content</td>
896
+ <td>Texte</td>
897
+ <td>Chaine vide</td>
898
+ <td>Afficher le contenu de l’alerte</td>
899
+ </tr>
900
+ <tr>
901
+ <td>hide</td>
902
+ <td>"true" ou "false"</td>
903
+ <td>"false"</td>
904
+ <td>Masque ou affiche l’alerte</td>
905
+ </tr>
906
+ <tr>
907
+ <td>full-width</td>
908
+ <td>"true" ou "false"</td>
909
+ <td>"false"</td>
910
+ <td>Affiche le contenu de l’alerte dans un conteneur pleine-largeur (classe css
911
+ qc-container-fluid)
912
+ </td>
913
+ </tr>
914
+ </table>
915
+ </div>
916
+
917
+ <h4>Événement JS</h4>
918
+
919
+ <p>Un événement JS <code class="qc-bg-color-grey-pale">qc.alert.hide</code> est émis à la fermeture de
920
+ l’alerte</p>
921
+ <script id="qc-alert-event-exemple">
922
+ /* Fermer l’alerte jaune pour voir un message dans la console de votre navigateur */
923
+ document.addEventListener(
924
+ 'qc.alert.hide',
925
+ (e) => {
926
+ console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
927
+ }
928
+ )
929
+ </script>
930
+ <qc-code target-id="qc-alert-event-exemple"
931
+ language="javascript"></qc-code>
932
+
933
+ <h4>Zone d’ajout de contenu HTML</h4>
934
+
935
+ <p>Ci-dessous, la zone d’ajout de contenu HTML (balise &lt;slot&gt;) délimitée en pointillé.</p>
936
+ <qc-doc-exemple caption="Présentation des zone d’ajout de contenu"
937
+ hide-code
938
+ >
939
+ <qc-alert id="qc-alert-slots">
940
+ <div style="border:2px dashed; padding: var(--qc-spacer-xs);">
941
+ Contenu par défaut
942
+ </div>
943
+ </qc-alert>
944
+ </qc-doc-exemple>
945
+ <hr/>
946
+ <h2 id="notice">Avis (qc-notice)</h2>
947
+ <h3>Exemples</h3>
948
+
949
+ <qc-doc-exemple id="exemple-avis-neutre"
950
+ caption="Exemple d’avis complémentaires"
951
+ >
952
+ <qc-notice type="advice"
953
+ icon="ligth-bulb"
954
+ title="Nouvelle règlementation"
955
+ content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
956
+ </qc-notice>
957
+ <qc-notice type="note"
958
+ icon="note"
959
+ title="Nouvelle règlementation"
960
+ content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
961
+ </qc-notice>
962
+ </qc-doc-exemple>
963
+
964
+ <qc-doc-exemple caption="Exemple d’information">
965
+ <qc-notice type="information"
966
+ title="Nouvelle règlementation"
967
+ content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
968
+ </qc-notice>
969
+ </qc-doc-exemple>
970
+ <!-- <qc-code target-id="exemple-avis-neutre" ></qc-code>-->
971
+
972
+
973
+ <qc-doc-exemple id="exemple-avis-avertissement"
974
+ caption="Exemple d’avertissement (avec et sans <i><code>slot</code></i>)"
975
+ >
976
+ <qc-notice type="warning"
977
+ title="Migration des contenus"
978
+ content="Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20 avril.">
979
+ </qc-notice>
980
+
981
+ <qc-notice type="warning">
982
+ <h2>Migration des contenus</h2>
983
+ <p>Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20
984
+ avril.</p>
985
+ </qc-notice>
986
+ </qc-doc-exemple>
987
+
988
+ <!-- <qc-code target-id="exemple-avis-avertissement" ></qc-code>-->
989
+
990
+
991
+ <qc-doc-exemple id="exemple-avis-succes"
992
+ caption="Exemple d’avis de succès"
993
+ >
994
+ <qc-notice type="success"
995
+ title="Votre demande d’inscription a été reçue"
996
+ content="Votre code de confirmation sera envoyé par courriel.">
997
+ </qc-notice>
998
+ </qc-doc-exemple>
999
+ <!-- <qc-code target-id="exemple-avis-succes" ></qc-code>-->
1000
+
1001
+
1002
+ <qc-doc-exemple id="exemple-avis-erreur"
1003
+ caption="Exemple d’avis d’erreur"
1004
+ >
1005
+ <qc-notice type="error"
1006
+ title="Des erreurs sont présentes dans le formulaire :">
1007
+ <ul>
1008
+ <li>
1009
+ <a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
1010
+ </li>
1011
+ <li>
1012
+ <a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
1013
+ </li>
1014
+ <li>
1015
+ <a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
1016
+ </li>
1017
+ </ul>
1018
+ </qc-notice>
1019
+ </qc-doc-exemple>
1020
+
1021
+ <!-- <qc-code target-id="exemple-avis-erreur" ></qc-code>-->
1022
+
1023
+ <h3>Documentation technique</h3>
1024
+
1025
+ <h4>Attributs</h4>
1026
+ <div class="table-overflow">
1027
+ <table class="qc-table qc-striped component-attributes-description">
1028
+ <thead>
1029
+ <tr>
1030
+ <th>Nom</th>
1031
+ <th>Valeur attendue</th>
1032
+ <th>Valeur par défaut</th>
1033
+ <th>Description</th>
1034
+ </tr>
1035
+ </thead>
1036
+ <tbody>
1037
+ <tr>
1038
+ <td>title</td>
1039
+ <td>Texte</td>
1040
+ <td>Chaine vide</td>
1041
+ <td>Titre de l’avis</td>
1042
+ </tr>
1043
+ <tr>
1044
+ <td>type</td>
1045
+ <td>information, warning, success, error, advice, note</td>
1046
+ <td>information (si absence de type)</td>
1047
+ <td>Le type d’avis</td>
1048
+ </tr>
1049
+ <tr>
1050
+ <td>content</td>
1051
+ <td>Texte</td>
1052
+ <td>Chaîne vide</td>
1053
+ <td>Le contenu de l’avis, il doit contenir du texte structuré avec des balises sémantiques.</td>
1054
+ </tr>
1055
+ <tr>
1056
+ <td>header</td>
1057
+ <td>h1,h3,h2,h3,h4,h5,h6</td>
1058
+ <td>h2</td>
1059
+ <td>La balise du niveau de titre de l’avis</td>
1060
+ </tr>
1061
+ <tr>
1062
+ <td>icon</td>
1063
+ <td>Toute clé de la map $images dans settings/_base.scss</td>
1064
+ <td>information
1065
+ <qc-icon icon="information" aria-hidden="true" size="nm"></qc-icon>
1066
+ (si absence de type)
1067
+ </td>
1068
+ <td>Défini l’icône pour les avis neutres</td>
1069
+ </tr>
1070
+ </tbody>
1071
+ </table>
1072
+ </div>
1073
+ <h4>Zone d’ajout de contenu HTML</h4>
1074
+
1075
+ <p>Ci-dessous, la zone d’ajout de contenu HTML (balise &lt;slot&gt;) délimitée en pointillé.</p>
1076
+
1077
+ <qc-doc-exemple id="presentation-slots-avis"
1078
+ caption="Présentation des emplacements disponibles dans les avis."
1079
+ hide-code
1080
+ >
1081
+ <qc-notice id="qc-notice-slots">
1082
+ <div style="border:2px dashed; padding: var(--qc-spacer-xs);">
1083
+ Contenu par défaut
1084
+ </div>
1085
+ </qc-notice>
1086
+ </qc-doc-exemple>
1087
+ <hr/>
1088
+ <h2 id="search-bar">Barre de recherche</h2>
1089
+ <h3>Exemples</h3>
1090
+ <qc-doc-exemple caption="Exemple de barre de recherche">
1091
+ <form action="http://www.quebec.ca/resultats-de-recherche">
1092
+ <qc-search-bar name="tx_solr[q]"></qc-search-bar>
1093
+ </form>
1094
+ </qc-doc-exemple>
1095
+
1096
+ <qc-doc-exemple caption="Exemple de barre de recherche sur fond blanc et bleu PIV">
1097
+
1098
+ <qc-search-bar></qc-search-bar>
1099
+
1100
+ <div style="margin: var(--qc-spacer-content-block-mb) 0 0;
1101
+ padding: var(--qc-spacer-md);
1102
+ background-color: var(--qc-color-blue-piv);">
1103
+ <qc-search-bar piv-background></qc-search-bar>
1104
+ </div>
1105
+
1106
+ </qc-doc-exemple>
1107
+
1108
+ <h3>Saisie semi-automatique (<i>autocomplete</i>)</h3>
1109
+
1110
+ <p>La barre de recherche n’offre pas encore la possibilité d’ajouter des suggestions à la saisie de texte.
1111
+ Cependant il vous est possible d’utiliser votre propre bibliothèque javascript. Voici un exemple avec
1112
+ jQuery UI.</p>
1113
+
1114
+ <qc-doc-exemple caption="Exemple de barre de recherche avec saisie semi-automatique basée sur jQuery UI">
1115
+
1116
+ <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
1117
+ <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
1118
+
1119
+ <qc-search-bar class="autocomplete-search-bar"
1120
+ input-placeholder="Tapez 'aaa' pour faire apparaître de nombreuses suggestions…"
1121
+ style="margin-bottom: var(--qc-spacer-content-block-mb)"
1122
+ ></qc-search-bar>
1123
+
1124
+ <script>
1125
+ $(function () {
1126
+ $.widget("ui.autocomplete", $.ui.autocomplete, {
1127
+ _resizeMenu: function () {
1128
+ // pour donner au panneau des suggestions la largeur de la barre de recherche
1129
+ let component = this.element.closest("qc-search-bar");
1130
+ this.menu.element.outerWidth(component.outerWidth());
1131
+ },
1132
+ });
1133
+ // personnalisation des messages jquery ui pour le lecteur d’écran en français
1134
+ $.extend($.ui.autocomplete.prototype.options.messages, {
1135
+ noResults: "Aucun résultat trouvé.",
1136
+ results: function (count) {
1137
+ let s = count > 1 ? "s" : ''
1138
+ return `${count} résultat${s} disponible${s}, utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.`;
1139
+ }
1140
+ });
1141
+
1142
+ $(".autocomplete-search-bar input[type=search]").autocomplete({
1143
+ source: [...Array(1000)].map((v, k) => "aaaa - " + k)
1144
+ });
1145
+ })
1146
+
1147
+
1148
+ </script>
1149
+
1150
+ </qc-doc-exemple>
1151
+
1152
+
1153
+ <h3>Attributs</h3>
1154
+ <div class="table-overflow">
1155
+ <table class="qc-table qc-striped component-attributes-description">
1156
+ <thead>
1157
+ <tr>
1158
+ <th>Nom</th>
1159
+ <th>Valeur attendue</th>
1160
+ <th>Valeur par défaut</th>
1161
+ <th>Description</th>
1162
+ </tr>
1163
+ </thead>
1164
+ <tbody>
1165
+ <tr>
1166
+ <td>name</td>
1167
+ <td>Texte</td>
1168
+ <td>q</td>
1169
+ <td>Nom du champ dans le formulaire</td>
1170
+ </tr>
1171
+ <tr>
1172
+ <td>value</td>
1173
+ <td>Texte</td>
1174
+ <td>Chaîne vide</td>
1175
+ <td>Valeur du champ dans le formulaire</td>
1176
+ </tr>
1177
+ <tr>
1178
+ <td>input-*</td>
1179
+ <td>na</td>
1180
+ <td>na</td>
1181
+ <td>Tout attribut commençant par <code>input-</code> sera ajouté au champ texte du composant.
1182
+ </td>
1183
+ </tr>
1184
+ <tr>
1185
+ <td>submit-aria-label</td>
1186
+ <td>Texte</td>
1187
+ <td>Lancer la recherche/Submit search</td>
1188
+ <td>Valeur de l’attribut aria-label du bouton</td>
1189
+ </tr>
1190
+ <tr>
1191
+ <td>submit-*</td>
1192
+ <td>na</td>
1193
+ <td>na</td>
1194
+ <td>Tout attribut commençant par <code>submit-</code> sera ajouté au bouton du composant. Utile
1195
+ par exemple pour lui donner un nom et une valeur.
1196
+ </td>
1197
+ </tr>
1198
+ <tr>
1199
+ <td>piv-background</td>
1200
+ <td>Aucune (simplement ajouter l’attribut)</td>
1201
+ <td>False</td>
1202
+ <td>Indique que la barre de recherche est sur fond bleu PIV</td>
1203
+ </tr>
1204
+ </tbody>
1205
+ </table>
1206
+ </div>
1207
+
1208
+ <h3>Zone d’ajout de contenu HTML</h3>
1209
+ <p>Aucune zone d’ajout de contenu n'est définie pour ce composant.</p>
1210
+
1211
+ <h3>Précision concernant le DOM d’ombre (Shadow DOM)</h3>
1212
+ <p>Ce composant ne contient pas de DOM d’ombre.</p>
1213
+ <hr/>
1214
+ <h2 id="buttons">Boutons</h2>
1215
+ <h3>Exemples</h3>
1216
+
1217
+ <qc-doc-exemple caption="Exemples des différentes variantes de boutons.">
1218
+ <div class="qc-row">
1219
+ <div class="qc-col-sm-12 qc-col-lg-3">
1220
+ <div>
1221
+ <button class="qc-button qc-primary">Principal</button>
429
1222
  </div>
430
- <hr/>
431
-
432
- <!-- liste -->
433
- <h2 id="liste">Liste</h2>
434
- <qc-doc-exemple caption="Exemple de listes">
435
-
436
- <ul>
437
- <li>Élément de liste 1</li>
438
- <li>Élément de liste 2</li>
439
- <li>Élément de liste 3
440
- <ul>
441
- <li>Élément de liste 3.1</li>
442
- <li>Élément de liste 3.2</li>
443
- </ul>
444
- </li>
445
- <li>Élément de liste 4</li>
446
- </ul>
447
- <ol>
448
- <li>Élément de liste 1</li>
449
- <li>Élément de liste 2</li>
450
- <li>Élément de liste 3
451
- <ol>
452
- <li>Élément de liste 3.1</li>
453
- <li>Élément de liste 3.2</li>
454
- </ol>
455
- </li>
456
- <li>Élément de liste 4</li>
457
- </ol>
458
- <p>Lorem ipsum dolor sit amet</p>
459
- </qc-doc-exemple>
460
-
461
- <qc-doc-exemple caption="Exemple de liste simple de définition">
462
- <dl>
463
- <dt>Terme 1</dt>
464
- <dd>Définition 1</dd>
465
- <dt>Terme 2</dt>
466
- <dd>Définition 2</dd>
467
- </dl>
468
- <p>Lorem ipsum dolor sit amet</p>
469
- </qc-doc-exemple>
470
-
471
- <hr/>
472
-
473
- <!-- niveaux de titres -->
474
- <h2 id="titre">Niveaux de titres</h2>
475
- <qc-doc-exemple caption="Exemples de titres"
476
- code-target-id="liste-titres"
477
- >
478
- <div role="presentation"
479
- id="liste-titres"
480
- >
481
- <h1 class="qc-h1">Titre de niveau 1</h1>
482
- <h1 id="exemple-titre-h1"
483
- class="qc-h1"><span class="qc-subhead ">Surtitre</span>Titre de niveau 1 avec surtitre
484
- </h1>
485
- <h2 class="qc-h2">Titre de niveau 2</h2>
486
- <h3 class="qc-h3">Titre de niveau 3</h3>
487
- <h4 class="qc-h4">Titre de niveau 4</h4>
488
- <h5 class="qc-h5">Titre de niveau 5</h5>
489
- <h6 class="qc-h6">Titre de niveau 6</h6>
490
- </div>
491
- </qc-doc-exemple>
492
-
493
- <hr/>
494
-
495
- <!-- ombrages -->
496
- <h2 id="ombrages">Ombrages</h2>
497
- <p>Pour appliquer un ombrage sur un élément, il suffit de lui appliquer la classe <code>qc-shading-X</code>,
498
- X étant le niveau d’élévation. </p>
499
- <qc-doc-exemple
500
- caption="Exemple des différents niveaux d’élévation."
501
- code-target-id="liste-elevation">
502
- <div id="liste-elevation">
503
- <div class="qc-shading-0">Élévation 0</div>
504
- <div class="qc-shading-1">Élévation 1</div>
505
- <div class="qc-shading-2">Élévation 2</div>
506
- <div class="qc-shading-3">Élévation 3</div>
507
- <div class="qc-shading-4">Élévation 4</div>
508
- </div>
509
- </qc-doc-exemple>
510
-
511
- <hr/>
512
-
513
- <!-- paragraphes -->
514
- <h2 id="paragraphes">Paragraphes</h2>
515
- <qc-doc-exemple caption="Exemple de paragraphe">
516
- <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin iaculis sapien vitae tempor porttitor.
517
- Morbi tincidunt lorem et neque commodo varius. Suspendisse pretium risus sit amet nisi tempus, ut
518
- euismod ex euismod. Nulla eget ullamcorper justo. Quisque cursus eget ex eget cursus. Suspendisse
519
- potenti. Donec a risus viverra dolor sodales elementum. In lobortis ligula vitae libero pretium,
520
- vitae fermentum nulla varius. Sed felis libero, facilisis vitae turpis in, ullamcorper bibendum
521
- erat.</p>
522
- <p>Aliquam rutrum sollicitudin lorem, vitae elementum tellus cursus ut. Vivamus in sodales risus.
523
- Maecenas neque ante, faucibus non lobortis et, auctor non sem. Integer nec hendrerit dolor. Mauris
524
- odio elit, viverra quis dolor sit amet, finibus auctor ex. Aliquam dapibus vestibulum metus a
525
- blandit. Etiam vitae augue id dui interdum viverra. In at metus nec augue accumsan iaculis.
526
- Suspendisse interdum, orci quis posuere ultrices, neque orci gravida diam, eu gravida nulla justo ac
527
- nisi. Nullam vitae sapien id augue imperdiet vehicula id et risus. Cras egestas aliquam magna eu
528
- aliquam. Sed aliquam semper est in imperdiet. Pellentesque non ultrices nibh. Nullam hendrerit
529
- dictum gravida. Aliquam vel arcu in odio dapibus malesuada.</p>
530
- </qc-doc-exemple>
531
-
532
- <hr/>
533
-
534
- <!-- polices de caractères -->
535
- <h2 id="polices">Polices de caractères</h2>
536
- <div class="font-titles">
537
- <h3><strong>Roboto</strong></h3>
538
- <qc-doc-exemple id="font-roboto"
539
- caption="Exemple de texte en roboto, avec différentes graisses."
540
- >
541
- <div style="font-family: var(--qc-font-family-header);">
542
- <p style="font-weight:var(--qc-font-weight-header-regular);">
543
- ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
544
- <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
545
- </p>
546
- <p style="font-weight:var(--qc-font-weight-header-medium);">
547
- ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
548
- <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
549
- </p>
550
- <p style="font-weight:var(--qc-font-weight-header-bold);">
551
- ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
552
- <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
553
- </p>
554
- </div>
555
- </qc-doc-exemple>
556
- <!-- <qc-code target-id="font-roboto"></qc-code>-->
1223
+ <div>
1224
+ <button class="qc-button qc-primary qc-button-rounded">Principal</button>
557
1225
  </div>
558
1226
  <div>
559
- <h3><strong>Open Sans</strong></h3>
560
- <qc-doc-exemple id="font-open-sans"
561
- caption="Exemple de texte en open sans, avec différentes graisses."
562
- >
563
- <div style="font-family: var(--qc-font-family-content);">
564
- <p style="font-weight:var(--qc-font-weight-content-regular);">
565
- ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
566
- <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
567
- </p>
568
- <p style="font-weight:var(--qc-font-weight-content-medium);">
569
- ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
570
- <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
571
- </p>
572
- <p style="font-weight:var(--qc-font-weight-content-bold);">
573
- ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789<br>
574
- <i>ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789,abcdefghijklmnopqrstuvwxyz0123456789</i>
575
- </p>
576
- </div>
577
- </qc-doc-exemple>
578
- <!-- <qc-code target-id="font-open-sans"></qc-code>-->
1227
+ <button class="qc-button qc-primary" disabled>Principal</button>
579
1228
  </div>
580
-
581
- <!-- Séparateur -->
582
- <h2 id="separator">Séparateur</h2>
583
-
584
- <qc-doc-exemple caption="Exemple de séparateur">
585
- <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
586
- <hr/>
587
- <p>A autem consequuntur cum cupiditate dignissimos, dolore doloribus,</p>
588
- </qc-doc-exemple>
589
-
590
- <!-- <qc-code target-id="separateur-exemple"></qc-code>-->
591
-
592
- <hr/>
593
-
594
- <!-- alerte générale -->
595
- <h2 id="alert">Alerte générale (qc-alert)</h2>
596
- <h3>Exemples</h3>
597
- <h4>Alerte jaune</h4>
598
- <p>
599
- <a href="javascript:;"
600
- id="show-qc-alert"
601
- hidden
602
- >
603
- Réafficher l'alerte
604
- </a>
605
- </p>
606
-
607
- <qc-doc-exemple id="alert-warning"
608
- caption="Exemple d'alerte jaune">
609
- <qc-alert id="alerte-masquable"
610
- type="warning"
611
- maskable="true"
612
- content="Alerte jaune d'importance élevée"
613
- >
614
- </qc-alert>
615
- </qc-doc-exemple>
616
- <!-- <qc-code target-id="alert-warning"></qc-code>-->
617
-
618
- <h4>Alerte bleue</h4>
619
- <qc-doc-exemple id="alert-general"
620
- caption="Exemple d'alerte générale">
621
- <qc-alert type="general"
622
- maskable="false">
623
- <p>Alerte bleue d'importance modérée <a href="javascript:;">avec un lien textuel</a></p>
624
- </qc-alert>
625
- </qc-doc-exemple>
626
-
627
- <!-- <qc-code target-id="alert-general"></qc-code>-->
628
-
629
- <h3>Documentation technique</h3>
630
-
631
- <h4>Attributs</h4>
632
- <div class="table-overflow">
633
- <table class="qc-table qc-striped component-attributes-description">
634
- <thead>
635
- <tr>
636
- <th>Nom</th>
637
- <th>Valeur attendue</th>
638
- <th>Valeur par défaut</th>
639
- <th>Description</th>
640
- </tr>
641
- </thead>
642
- <tr>
643
- <td>type</td>
644
- <td>"general" ou "warning"</td>
645
- <td>"general"</td>
646
- <td>Type de l'alerte : s'il s'agit d'une alerte bleue ou jaune</td>
647
- </tr>
648
- <tr>
649
- <td>maskable</td>
650
- <td>"true" ou "false"</td>
651
- <td>"true"</td>
652
- <td>Afficher le bouton de fermeture de l'alerte</td>
653
- </tr>
654
- <tr>
655
- <td>content</td>
656
- <td>Texte</td>
657
- <td>Chaine vide</td>
658
- <td>Afficher le contenu de l'alerte</td>
659
- </tr>
660
- <tr>
661
- <td>hide</td>
662
- <td>"true" ou "false"</td>
663
- <td>"false"</td>
664
- <td>Masque ou affiche l'alerte</td>
665
- </tr>
666
- <tr>
667
- <td>full-width</td>
668
- <td>"true" ou "false"</td>
669
- <td>"false"</td>
670
- <td>Affiche le contenu de l’alerte dans un conteneur pleine-largeur (classe css
671
- qc-container-fluid)
672
- </td>
673
- </tr>
674
- </table>
1229
+ <div>
1230
+ <button class="qc-button qc-primary qc-compact">Principal</button>
675
1231
  </div>
676
-
677
- <h4>Événement JS</h4>
678
-
679
- <p>Un événement JS <code class="qc-bg-color-grey-pale">qc.alert.hide</code> est émis à la fermeture de
680
- l'alerte</p>
681
- <script id="qc-alert-event-exemple">
682
- /* Fermer l'alerte jaune pour voir un message dans la console de votre navigateur */
683
- document.addEventListener(
684
- 'qc.alert.hide',
685
- (e) => {
686
- console.log('Fermeture de l\'alerte id=\'' + e.target.id + '\'');
687
- }
688
- )
689
- </script>
690
- <qc-code target-id="qc-alert-event-exemple"
691
- language="javascript"></qc-code>
692
-
693
- <h4>Zone d'ajout de contenu HTML</h4>
694
-
695
- <p>Ci-dessous, la zone d'ajout de contenu HTML (balise &lt;slot&gt;) délimitée en pointillé.</p>
696
- <qc-doc-exemple caption="Présentation des zone d'ajout de contenu"
697
- hide-code
698
- >
699
- <qc-alert id="qc-alert-slots">
700
- <div style="border:2px dashed; padding: var(--qc-spacer-xs);">
701
- Contenu par défaut
702
- </div>
703
- </qc-alert>
704
- </qc-doc-exemple>
705
- <!-- <qc-code target-id="qc-alert-slots"></qc-code>-->
706
-
707
- <hr/>
708
-
709
- <!-- avis -->
710
- <h2 id="notice">Avis (qc-notice)</h2>
711
- <h3>Exemples</h3>
712
-
713
- <qc-doc-exemple id="exemple-avis-neutre"
714
- caption="Exemple d’avis neutres"
715
- >
716
- <qc-notice type="advice"
717
- icon="ampoule"
718
- title="Nouvelle règlementation"
719
- content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
720
- </qc-notice>
721
- <qc-notice type="note"
722
- icon="note"
723
- title="Nouvelle règlementation"
724
- content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
725
- </qc-notice>
726
- </qc-doc-exemple>
727
-
728
- <qc-doc-exemple caption="Exemple d’information">
729
- <qc-notice type="information"
730
- title="Nouvelle règlementation"
731
- content="Les nouveaux règlements de pêche seront en vigeur à partir du 12 mai.">
732
- </qc-notice>
733
- </qc-doc-exemple>
734
- <!-- <qc-code target-id="exemple-avis-neutre" ></qc-code>-->
735
-
736
-
737
- <qc-doc-exemple id="exemple-avis-avertissement"
738
- caption="Exemple d’avertissement (avec et sans <i><code>slot</code></i>)"
739
- >
740
- <qc-notice type="warning"
741
- title="Migration des <i>contenus</i>"
742
- content="Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20 avril.">
743
- </qc-notice>
744
-
745
- <qc-notice type="warning">
746
- <h2>Migration des <i>contenus</i></h2>
747
- <p>Les contenus seront transférés dans Québec.ca à partir du 16 février et le site sera fermé le 20
748
- avril.</p>
749
- </qc-notice>
750
- </qc-doc-exemple>
751
-
752
- <!-- <qc-code target-id="exemple-avis-avertissement" ></qc-code>-->
753
-
754
-
755
- <qc-doc-exemple id="exemple-avis-succes"
756
- caption="Exemple d’avis de succès"
757
- >
758
- <qc-notice type="success"
759
- title="Votre demande d'inscription a été reçue"
760
- content="Votre code de confirmation sera envoyé par courriel.">
761
- </qc-notice>
762
- </qc-doc-exemple>
763
- <!-- <qc-code target-id="exemple-avis-succes" ></qc-code>-->
764
-
765
-
766
- <qc-doc-exemple id="exemple-avis-erreur"
767
- caption="Exemple d’avis d’erreur"
768
- >
769
- <qc-notice type="error"
770
- title="Des erreurs sont présentes dans le formulaire.">
771
- <ul>
772
- <li>
773
- <a href="javascript:;">Le champ « Nom de famille » est obligatoire ;</a>
774
- </li>
775
- <li>
776
- <a href="javascript:;">Le champ « Prénom » est obligatoire ;</a>
777
- </li>
778
- <li>
779
- <a href="javascript:;">Le champ « Numéro de dossier » est obligatoire.</a>
780
- </li>
781
- </ul>
782
- </qc-notice>
783
- </qc-doc-exemple>
784
-
785
- <!-- <qc-code target-id="exemple-avis-erreur" ></qc-code>-->
786
-
787
- <h3>Documentation technique</h3>
788
-
789
- <h4>Attributs</h4>
790
- <div class="table-overflow">
791
- <table class="qc-table qc-striped component-attributes-description">
792
- <thead>
793
- <tr>
794
- <th>Nom</th>
795
- <th>Valeur attendue</th>
796
- <th>Valeur par défaut</th>
797
- <th>Description</th>
798
- </tr>
799
- </thead>
800
- <tbody>
801
- <tr>
802
- <td>title</td>
803
- <td>Texte</td>
804
- <td>Chaine vide</td>
805
- <td>Titre de l'avis</td>
806
- </tr>
807
- <tr>
808
- <td>type</td>
809
- <td>information, warning, success, error, advice, note</td>
810
- <td>information (si absence de type)</td>
811
- <td>Le type d'avis</td>
812
- </tr>
813
- <tr>
814
- <td>content</td>
815
- <td>Texte</td>
816
- <td>Chaîne vide</td>
817
- <td>Le contenu de l'avis, il doit contenir du texte structuré avec des balises sémantiques.</td>
818
- </tr>
819
- <tr>
820
- <td>header</td>
821
- <td>h1,h3,h2,h3,h4,h5,h6</td>
822
- <td>h2</td>
823
- <td>La balise du niveau de titre de l'avis</td>
824
- </tr>
825
- <tr>
826
- <td>icon</td>
827
- <td>Toute clé de la map $images dans settings/_base.scss</td>
828
- <td>information
829
- <qc-icon icon="information" aria-hidden="true" size="nm"></qc-icon>
830
- (si absence de type)
831
- </td>
832
- <td>Défini l’icône pour les avis neutres</td>
833
- </tr>
834
- </tbody>
835
- </table>
1232
+ <div>
1233
+ <button class="qc-button qc-primary qc-compact qc-button-rounded">Principal</button>
836
1234
  </div>
837
- <h4>Zone d'ajout de contenu HTML</h4>
1235
+ <div>
1236
+ <button class="qc-button qc-primary qc-compact" disabled>Principal</button>
1237
+ </div>
1238
+ </div>
838
1239
 
839
- <p>Ci-dessous, la zone d'ajout de contenu HTML (balise &lt;slot&gt;) délimitée en pointillé.</p>
1240
+ <div class="qc-col-sm-12 qc-col-lg-3">
1241
+ <div>
1242
+ <button class="qc-button qc-secondary">Secondaire</button>
1243
+ </div>
1244
+ <div>
1245
+ <button class="qc-button qc-secondary qc-button-rounded">Secondaire</button>
1246
+ </div>
1247
+ <div>
1248
+ <button class="qc-button qc-secondary" disabled>Secondaire</button>
1249
+ </div>
1250
+ <div>
1251
+ <button class="qc-button qc-secondary qc-compact">Secondaire</button>
1252
+ </div>
1253
+ <div>
1254
+ <button class="qc-button qc-secondary qc-compact qc-button-rounded">Secondaire</button>
1255
+ </div>
1256
+ <div>
1257
+ <button class="qc-button qc-secondary qc-compact" disabled>Secondaire</button>
1258
+ </div>
1259
+ </div>
840
1260
 
841
- <qc-doc-exemple id="presentation-slots-avis"
842
- caption="Présentation des emplacements disponibles dans les avis."
843
- hide-code
844
- >
845
- <qc-notice id="qc-notice-slots">
846
- <div style="border:2px dashed; padding: var(--qc-spacer-xs);">
847
- Contenu par défaut
848
- </div>
849
- </qc-notice>
850
- </qc-doc-exemple>
851
- <!-- <qc-code target-id="presentation-slots-avis" ></qc-code>-->
852
-
853
- <h2 id="search-bar">Barre de recherche</h2>
854
- <h3>Exemples</h3>
855
- <qc-doc-exemple caption="Exemple de barre de recherche lançant une recherche dans quebec.ca">
856
- <form action="http://www.quebec.ca/resultats-de-recherche">
857
- <qc-search-bar name="tx_solr[q]"></qc-search-bar>
858
- </form>
859
- </qc-doc-exemple>
860
-
861
- <qc-doc-exemple caption="Exemple de barre de recherche sur fond blanc et bleu PIV">
862
-
863
- <qc-search-bar></qc-search-bar>
864
-
865
- <div style="margin: var(--qc-spacer-content-block-mb) 0 0;
866
- padding: var(--qc-spacer-md);
867
- background-color: var(--qc-color-blue-piv);">
868
- <qc-search-bar piv-background></qc-search-bar>
869
- </div>
870
-
871
- </qc-doc-exemple>
872
-
873
- <h3>Saisie semi-automatique (<i>autocomplete</i>)</h3>
874
-
875
- <p>La barre de recherche n’offre pas encore la possibilité d’ajouter des suggestions à la saisie de texte.
876
- Cependant il vous est possible d’utiliser votre propre bibliothèque javascript. Voici un exemple avec
877
- jQuery UI.</p>
878
-
879
- <qc-doc-exemple caption="Exemple de barre de recherche avec saisie semi-automatique basée sur jQuery UI">
880
-
881
- <script src="https://code.jquery.com/jquery-3.7.1.js"></script>
882
- <script src="https://code.jquery.com/ui/1.14.1/jquery-ui.js"></script>
883
-
884
- <qc-search-bar class="autocomplete-search-bar"
885
- input-placeholder="Tapez 'aaa' pour faire apparaître de nombreuses suggestions…"
886
- style="margin-bottom: var(--qc-spacer-content-block-mb)"
887
- ></qc-search-bar>
888
-
889
- <script>
890
- $(function () {
891
- $.widget("ui.autocomplete", $.ui.autocomplete, {
892
- _resizeMenu: function () {
893
- // pour donner au panneau des suggestions la largeur de la barre de recherche
894
- let component = this.element.closest("qc-search-bar");
895
- this.menu.element.outerWidth(component.outerWidth());
896
- },
897
- });
898
- // personnalisation des messages jquery ui pour le lecteur d’écran en français
899
- $.extend($.ui.autocomplete.prototype.options.messages, {
900
- noResults: "Aucun résultat trouvé.",
901
- results: function (count) {
902
- let s = count > 1 ? "s" : ''
903
- return `${count} résultat${s} disponible${s}, utilisez les flèches directionnelles haut et bas pour vous déplacer dans la liste.`;
904
- }
905
- });
906
-
907
- $(".autocomplete-search-bar input[type=search]").autocomplete({
908
- source: [...Array(1000)].map((v, k) => "aaaa - " + k)
909
- });
910
- })
911
-
912
-
913
- </script>
914
-
915
- </qc-doc-exemple>
916
-
917
-
918
- <h3>Attributs</h3>
919
- <div class="table-overflow">
920
- <table class="qc-table qc-striped component-attributes-description">
921
- <thead>
922
- <tr>
923
- <th>Nom</th>
924
- <th>Valeur attendue</th>
925
- <th>Valeur par défaut</th>
926
- <th>Description</th>
927
- </tr>
928
- </thead>
929
- <tbody>
930
- <tr>
931
- <td>name</td>
932
- <td>Texte</td>
933
- <td>q</td>
934
- <td>Nom du champs dans le formulaire</td>
935
- </tr>
936
- <tr>
937
- <td>value</td>
938
- <td>Texte</td>
939
- <td>Chaine vide</td>
940
- <td>Valeur du champs dans le formulaire</td>
941
- </tr>
942
- <tr>
943
- <td>input-*</td>
944
- <td>na</td>
945
- <td>na</td>
946
- <td>Tout attribut commençant par <code>input-</code> sera ajouté au champ texte du composant.
947
- </td>
948
- </tr>
949
- <tr>
950
- <td>submit-aria-label</td>
951
- <td>Texte</td>
952
- <td>Lancer la recherche/Submit search</td>
953
- <td>Valeur de l’attribut aria-label du bouton</td>
954
- </tr>
955
- <tr>
956
- <td>submit-*</td>
957
- <td>na</td>
958
- <td>na</td>
959
- <td>Tout attribut commençant par <code>input-</code> sera ajouté au bouton du composant. Utile
960
- par exemple pour lui donner un nom et une valeur.
961
- </td>
962
- </tr>
963
- <tr>
964
- <td>piv-background</td>
965
- <td>Aucune (simplement ajouter l'attribut)</td>
966
- <td>False</td>
967
- <td>Indique que la barre de recherche est sur fond bleu PIV</td>
968
- </tr>
969
- </tbody>
970
- </table>
1261
+ <div class="qc-col-sm-12 qc-col-lg-3">
1262
+ <div>
1263
+ <button class="qc-button qc-tertiary">Tertiaire</button>
971
1264
  </div>
1265
+ <div>
1266
+ <button class="qc-button qc-tertiary qc-button-rounded">Tertiaire</button>
1267
+ </div>
1268
+ <div>
1269
+ <button class="qc-button qc-tertiary" disabled>Tertiaire</button>
1270
+ </div>
1271
+ <div>
1272
+ <button class="qc-button qc-tertiary qc-compact">Tertiaire</button>
1273
+ </div>
1274
+ <div>
1275
+ <button class="qc-button qc-tertiary qc-compact qc-button-rounded">Tertiaire</button>
1276
+ </div>
1277
+ <div>
1278
+ <button class="qc-button qc-tertiary qc-compact" disabled>Tertiaire</button>
1279
+ </div>
1280
+ </div>
972
1281
 
973
- <h3>Zone d'ajout de contenu HTML</h3>
974
- <p>Aucune zone d'ajout de contenu n'est définie pour ce composant</p>
1282
+ <div class="qc-col-sm-12 qc-col-lg-3">
1283
+ <div>
1284
+ <button class="qc-button qc-danger">Avertissement</button>
1285
+ </div>
1286
+ <div>
1287
+ <button class="qc-button qc-danger qc-button-rounded">Avertissement</button>
1288
+ </div>
1289
+ <div>
1290
+ <button class="qc-button qc-danger" disabled>Avertissement</button>
1291
+ </div>
1292
+ <div>
1293
+ <button class="qc-button qc-danger qc-compact">Avertissement</button>
1294
+ </div>
1295
+ <div>
1296
+ <button class="qc-button qc-danger qc-compact qc-button-rounded">Avertissement</button>
1297
+ </div>
1298
+ <div>
1299
+ <button class="qc-button qc-danger qc-compact" disabled>Avertissement</button>
1300
+ </div>
1301
+ </div>
1302
+ </div>
975
1303
 
976
- <h3>Précision concernant le DOM d’ombre (Shadow dom)</h3>
977
- <p>Ce composant ne contient pas de DOM d'ombre.</p>
1304
+ <div>
1305
+ <button class="qc-button qc-simple">
1306
+ <qc-icon type="information"></qc-icon>
1307
+ Action
1308
+ </button>
978
1309
 
979
- <!-- PIV -->
980
- <h2 id="piv">Composants du PIV</h2>
981
- <!-- bandeau d'entête PIV -->
982
- <h3 id="piv-header">Bandeau d'en-tête du PIV (qc-piv-header)</h3>
1310
+ <button class="qc-button qc-simple" disabled>
1311
+ <qc-icon type="plus"></qc-icon>
1312
+ Action
1313
+ </button>
1314
+ </div>
1315
+ <div>
1316
+ <button class="qc-button qc-simple qc-compact">
1317
+ <qc-icon type="information"></qc-icon>
1318
+ Action
1319
+ </button>
1320
+
1321
+ <button class="qc-button qc-simple qc-compact" disabled>
1322
+ <qc-icon type="plus"></qc-icon>
1323
+ Action
1324
+ </button>
1325
+ </div>
983
1326
 
984
- <h4>Exemples</h4>
985
- <!-- TODO remplacer les aria-label des qc-doc-exemple par aria-labelby et cibler le titre -->
986
- <qc-doc-exemple id="pivEnteteExempleLiens"
987
- caption="Exemple de bandeau d’entête PIV de base"
988
- >
989
- <qc-piv-header alt-logo="Accédez à Québec.ca"
990
- join-us-url="#join-us"
991
- alt-language-url="#fakeEnglish"
992
- >
993
- </qc-piv-header>
994
- </qc-doc-exemple>
995
- <!-- <qc-code target-id="pivEnteteExempleLiens"></qc-code>-->
1327
+ </qc-doc-exemple>
996
1328
 
997
- <qc-doc-exemple id="pivEnteteExempleRecherche"
998
- caption="Exemple de personnalisation des liens du bandeau d’entête PIV"
999
- >
1000
- <qc-piv-header
1001
- title-text="Nom du site"
1002
- title-url="https://www.quebec.ca/"
1003
- alt-logo="Accédez à Québec.ca"
1004
- >
1005
- <nav slot="links"
1006
- aria-label="Navigation PIV">
1007
- <ul>
1008
- <li><a href="#fakeEnglish">English</a>
1009
- </li>
1010
- <li><a href="javascript:;">Nous joindre</a>
1011
- </li>
1012
- </ul>
1013
- </nav>
1014
- </qc-piv-header>
1015
- </qc-doc-exemple>
1016
- <!-- <qc-code target-id="pivEnteteExempleRecherche"></qc-code>-->
1017
-
1018
- <qc-doc-exemple caption="Exemple de bandeau d’entête PIV avec recherche personnalisée"
1329
+ <qc-doc-exemple caption="Exemples de boutons avec icône.<br/>NB: voir la section <a href='#icons'>Icônes</a> pour plus de détails concernant le composant <code>qc-icon</code>.">
1330
+ <div>
1331
+ <button class="qc-button qc-primary">
1332
+ <qc-icon type="arrow-up" rotate="-90"></qc-icon>
1333
+ Précédent
1334
+ </button>
1019
1335
 
1020
- >
1021
- <div id="pivEnteteExempleRecherchePersonnalisee">
1022
- <qc-piv-header title-text="Nom du site"
1023
- alt-logo="Accédez à Québec.ca"
1024
- enable-search="true"
1025
- show-search="true"
1026
- >
1027
- <ul slot="links">
1028
- <li><a href="#fakeEnglish">English</a>
1029
- </li>
1030
- <li><a href="javascript:;">Nous joindre</a>
1031
- </li>
1032
- </ul>
1033
-
1034
- <form slot="search-zone"
1035
- method="get"
1036
- action="https://www.google.ca/search"
1037
- >
1038
- <qc-search-bar name="q" piv-background></qc-search-bar>
1039
- </form>
1040
- </qc-piv-header>
1041
- </div>
1042
- </qc-doc-exemple>
1043
-
1044
-
1045
- <h4>Documentation technique</h4>
1046
- <h5>Attributs</h5>
1047
- <div class="table-overflow">
1048
- <table class="qc-table qc-striped component-attributes-description">
1049
- <thead>
1050
- <tr>
1051
- <th>Nom</th>
1052
- <th>Valeur attendue</th>
1053
- <th>Valeur par défaut</th>
1054
- <th>Description</th>
1055
- </tr>
1056
- </thead>
1057
- <tbody>
1058
- <tr>
1059
- <td>title-text</td>
1060
- <td>Texte</td>
1061
- <td>Chaine vide</td>
1062
- <td>Titre au milieu du bandeau (dans un hyperlien)</td>
1063
- </tr>
1064
- <tr>
1065
- <td>title-url</td>
1066
-
1067
- <td>Adresse</td>
1068
- <td>/</td>
1069
- <td>Url de l'hyperlien du titre</td>
1070
- </tr>
1071
- <tr>
1072
- <td>logo-url</td>
1073
- <td>Adresse</td>
1074
- <td>/</td>
1075
- <td>Adresse du lien du Logo</td>
1076
- </tr>
1077
- <tr>
1078
- <td>logo-src</td>
1079
- <td>Adresse</td>
1080
- <td>adresse du logo inclus dans la trousse</td>
1081
- <td>Adresse du logo</td>
1082
- </tr>
1083
- <tr>
1084
- <td>logo-alt</td>
1085
- <td>texte</td>
1086
- <td>Logo du gouvernement du Québec/Logo of government of Québec</td>
1087
- <td>Attribut « alt » de la balise img du logo</td>
1088
- </tr>
1089
- <tr>
1090
- <td>alt-language-text</td>
1091
- <td>Texte</td>
1092
- <td>English/Français</td>
1093
- <td>Texte du lien de changement de langue</td>
1094
- </tr>
1095
- <tr>
1096
- <td>alt-language-url</td>
1097
- <td>Adresse</td>
1098
- <td>vide</td>
1099
- <td>L'url de l'autre langue. Si vide, le lien n'apparaît pas.</td>
1100
- </tr>
1101
- <tr>
1102
- <td>join-us-text</td>
1103
- <td>Texte</td>
1104
- <td>Nous joindre/Contact us</td>
1105
- <td>Texte du lien « Nous joindre »</td>
1106
- </tr>
1107
- <tr>
1108
- <td>join-us-url</td>
1109
- <td>Adresse</td>
1110
- <td>Vide</td>
1111
- <td>Adresse du lien « Nous joindre ». Si vide, le lien n'apparait pas.</td>
1112
- </tr>
1113
- <tr>
1114
- <td>go-to-content</td>
1115
- <td>"true" ou "false"</td>
1116
- <td>"true"</td>
1117
- <td>Afficher ou non le lien pour aller directement au contenu.</td>
1118
- </tr>
1119
- <tr>
1120
- <td>go-to-content-text</td>
1121
- <td>Texte</td>
1122
- <td>Passer au contenu/Skip to content</td>
1123
- <td>Texte du lien pour passer directement au contenu.</td>
1124
- </tr>
1125
- <tr>
1126
- <td>go-to-content-anchor</td>
1127
- <td>id du 1<sup>er</sup> élément de contenu</td>
1128
- <td>"main"</td>
1129
- <td>Cible du lien pour passer directement au contenu.</td>
1130
- </tr>
1131
- <tr>
1132
- <td>full-width</td>
1133
- <td>"true" ou "false"</td>
1134
- <td>"false"</td>
1135
- <td>Affiche le bandeau en pleine largeur. (classe de conteneur « qc‑container‑fluid »)</td>
1136
- </tr>
1137
- <tr>
1138
- <td>enable-search</td>
1139
- <td>"true" ou "false"</td>
1140
- <td>"false"</td>
1141
- <td>
1142
- Active la recherche dans le bandeau PIV :
1143
- <ul>
1144
- <li style="margin-bottom: 0">le bouton de recherche en forme de loupe est alors
1145
- affiché ;
1146
- </li>
1147
- <li>au clic, il affiche le formulaire de recherche.</li>
1148
- </ul>
1149
- </td>
1150
- </tr>
1151
- <tr>
1152
- <td>show-search</td>
1153
- <td>"true" ou "false"</td>
1154
- <td>"false"</td>
1155
- <td>Affiche le formulaire de recherche (normalement caché tant que le bouton de recherche n'a
1156
- pas été pressé).
1157
- </td>
1158
- </tr>
1159
-
1160
- <tr>
1161
- <td>display-search-text</td>
1162
- <td>Texte</td>
1163
- <td>Cliquer pour faire une recherche / Click to search</td>
1164
- <td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour afficher la
1165
- barre de recherche.
1166
- </td>
1167
- </tr>
1168
- <tr>
1169
- <td>hide-search-text</td>
1170
- <td>Texte</td>
1171
- <td>Masquer la barre de recherche / Hide search bar</td>
1172
- <td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d'écran pour masquer la
1173
- barre de recherche.
1174
- </td>
1175
- </tr>
1176
- </tbody>
1177
- </table>
1178
- </div>
1179
- <h5>Zones d'ajout de contenu HTML</h5>
1336
+ <button class="qc-button qc-primary">
1337
+ Suivant
1338
+ <qc-icon type="arrow-up" rotate="90"></qc-icon>
1339
+ </button>
1340
+ </div>
1341
+ </qc-doc-exemple>
1342
+
1343
+ <qc-doc-exemple caption="Exemples avec un lien et un bouton de soumission.">
1344
+ <a href="javascript:void(0);"
1345
+ class="qc-button qc-primary"
1346
+ role="button"
1347
+ >
1348
+ Action
1349
+ </a>
1350
+ <input type="submit" value="Action" class="qc-button qc-primary" />
1351
+ </qc-doc-exemple>
1352
+
1353
+
1354
+ <h3>Classes CSS</h3>
1355
+
1356
+ <div class="table-overflow">
1357
+ <table class="qc-table qc-striped">
1358
+ <thead>
1359
+ <tr>
1360
+ <th>Classe / Attribut</th>
1361
+ <th>Description</th>
1362
+ </tr>
1363
+ </thead>
1364
+ <tbody>
1365
+ <tr>
1366
+ <td><code>qc‑button</code></td>
1367
+ <td>Classe de base obligatoire pour tous les boutons. Définit la typographie, la taille, les marges, le padding, et le comportement responsive.</td>
1368
+ </tr>
1369
+ <tr>
1370
+ <td><code>qc‑compact</code></td>
1371
+ <td>Variante compacte du bouton avec des dimensions réduites et un padding plus petit.</td>
1372
+ </tr>
1373
+ <tr>
1374
+ <td><code>qc‑button‑rounded</code></td>
1375
+ <td>Ajoute un rayon de bordure pour arrondir les coins du bouton.</td>
1376
+ </tr>
1377
+ <tr>
1378
+ <td><code>qc‑primary</code></td>
1379
+ <td>Bouton principal avec fond bleu et texte blanc.</td>
1380
+ </tr>
1381
+ <tr>
1382
+ <td><code>qc‑secondary</code></td>
1383
+ <td>Bouton secondaire avec fond blanc et texte bleu.</td>
1384
+ </tr>
1385
+ <tr>
1386
+ <td><code>qc‑tertiary</code></td>
1387
+ <td>Bouton tertiaire avec fond blanc et texte bleu.</td>
1388
+ </tr>
1389
+ <tr>
1390
+ <td><code>qc‑danger</code></td>
1391
+ <td>Bouton d’avertissement avec fond rouge et texte blanc.</td>
1392
+ </tr>
1393
+ <tr>
1394
+ <td><code>qc‑simple</code></td>
1395
+ <td>Bouton sans fond ni bordure.</td>
1396
+ </tr>
1397
+ </tbody>
1398
+ </table>
1399
+ </div>
1400
+
1401
+ <hr/>
1402
+ <h2 id="formulaires">Formulaires</h2>
1403
+ <h3 id="radios-checkboxes">Boutons radios et cases à cocher</h3>
1404
+ <h4 id="choice-group">Groupe de boutons radio et de cases à cocher (qc-choice-group)</h4>
1405
+
1406
+ <h5>Exemples</h5>
1407
+ <p>
1408
+ Les groupes d'éléments de choix sont également disponibles sous forme de <a href="#selection-button">boutons de sélection</a>.
1409
+ </p>
1410
+
1411
+ <qc-doc-exemple caption="Exemple de groupes de boutons radio et de cases à cocher avec différents états">
1412
+ <qc-choice-group legend="Sélectionnez vos options"
1413
+ name="options-multiples"
1414
+ >
1415
+ <label>
1416
+ <input type="checkbox"
1417
+ value="1"
1418
+ checked
1419
+ />
1420
+ <span >Option 1</span>
1421
+ </label>
1422
+ <label>
1423
+ <input type="checkbox"
1424
+ value="2"
1425
+ />
1426
+ <span >Option 2</span>
1427
+ </label>
1428
+ <label>
1429
+ <input type="checkbox"
1430
+ value="3"
1431
+ disabled
1432
+ />
1433
+ <span >Option 3 (désactivée)</span>
1434
+ </label>
1435
+ </qc-choice-group>
1436
+
1437
+ <qc-choice-group legend="Sélectionnez une option"
1438
+ name="choix-unique"
1439
+ >
1440
+ <label>
1441
+ <input type="radio"
1442
+ value="1"
1443
+ checked
1444
+ />
1445
+ <span >Option 1</span>
1446
+ </label>
1447
+ <label>
1448
+ <input type="radio"
1449
+ value="2"
1450
+ />
1451
+ <span >Option 2</span>
1452
+ </label>
1453
+ <label>
1454
+ <input type="radio"
1455
+ value="3"
1456
+ disabled
1457
+ />
1458
+ <span >Option 3 (désactivée)</span>
1459
+ </label>
1460
+ </qc-choice-group>
1461
+ </qc-doc-exemple>
1462
+
1463
+ <qc-doc-exemple caption="Exemple d’un groupe au petit format">
1464
+ <qc-choice-group legend="Sélectionnez vos options"
1465
+ name="options-multiples"
1466
+ compact
1467
+ >
1468
+ <label>
1469
+ <input type="checkbox"
1470
+ value="1"
1471
+ checked
1472
+ />
1473
+ <span >Option 1</span>
1474
+ </label>
1475
+ <label>
1476
+ <input type="checkbox"
1477
+ value="2"
1478
+ />
1479
+ <span >Option 2</span>
1480
+ </label>
1481
+ <label>
1482
+ <input type="checkbox"
1483
+ value="3"
1484
+ disabled
1485
+ />
1486
+ <span >Option 3 (désactivée)</span>
1487
+ </label>
1488
+ </qc-choice-group>
1489
+
1490
+ <qc-choice-group legend="Sélectionnez une option"
1491
+ name="choix-unique"
1492
+ compact
1493
+ >
1494
+ <label>
1495
+ <input type="radio"
1496
+ value="1"
1497
+ checked
1498
+ />
1499
+ <span >Option 1</span>
1500
+ </label>
1501
+ <label>
1502
+ <input type="radio"
1503
+ value="2"
1504
+ />
1505
+ <span >Option 2</span>
1506
+ </label>
1507
+ <label>
1508
+ <input type="radio"
1509
+ value="3"
1510
+ disabled
1511
+ />
1512
+ <span >Option 3 (désactivée)</span>
1513
+ </label>
1514
+ </qc-choice-group>
1515
+ </qc-doc-exemple>
1516
+
1517
+ <qc-doc-exemple caption="Exemple de validation de formulaire avec des groupes de choix">
1518
+ <form id="checkbox-form">
1519
+ <qc-choice-group
1520
+ legend="Sur quelle plateforme consultez-vous www.quebec.ca ?"
1521
+ name="plateforme"
1522
+ required
1523
+ invalid-text="Veuillez sélectionner une plateforme."
1524
+ >
1525
+ <label>
1526
+ <input type="checkbox"
1527
+ value="ordinateur"
1528
+ />
1529
+ <span>Ordinateur</span>
1530
+ </label>
1531
+ <label>
1532
+ <input type="checkbox"
1533
+ value="tablette"
1534
+ />
1535
+ <span>Tablette</span>
1536
+ </label>
1537
+ <label>
1538
+ <input type="checkbox"
1539
+ value="telephone_intelligent"
1540
+ />
1541
+ <span>Téléphone intelligent</span>
1542
+ </label>
1543
+ </qc-choice-group>
1544
+
1545
+ <qc-choice-group
1546
+ legend="Quel thème préférez-vous ?"
1547
+ name="theme"
1548
+ required
1549
+ invalid-text="Veuillez sélectionner un thème."
1550
+ >
1551
+ <label>
1552
+ <input type="radio"
1553
+ value="clair"
1554
+ />
1555
+ <span>Le thème clair</span>
1556
+ </label>
1557
+ <label>
1558
+ <input type="radio"
1559
+ value="sombre"
1560
+ />
1561
+ <span>Le thème sombre</span>
1562
+ </label>
1563
+
1564
+ </qc-choice-group>
1565
+
1566
+ <button class="qc-button qc-primary qc-compact" type="submit">
1567
+ Soumettre
1568
+ </button>
1569
+ </form>
1570
+
1571
+ <script>
1572
+
1573
+ document
1574
+ .getElementById("checkbox-form")
1575
+ .addEventListener("submit", (event) => {
1576
+ event.preventDefault();
1577
+ let doSubmit = true;
1578
+ event
1579
+ .target
1580
+ .querySelectorAll("qc-choice-group[required]")
1581
+ .forEach(group => {
1582
+ let valid = false;
1583
+ group.querySelectorAll("input")
1584
+ .forEach(checkbox => {
1585
+ if (checkbox.checked) {
1586
+ valid = true;
1587
+ }
1588
+ })
1589
+ if (!valid) {
1590
+ group.invalid = true;
1591
+ doSubmit = false;
1592
+ }
1593
+ })
1594
+ if(doSubmit) {
1595
+ const formData = new FormData(event.target);
1596
+ let alertParts = ["Formulaire soumis avec les données suivantes :"];
1597
+ for (const [key, value] of formData.entries()) {
1598
+ alertParts.push(`${key} : ${value}`);
1599
+ }
1600
+ alert(alertParts.join("\n"));
1601
+ }
1602
+ })
1603
+ </script>
1604
+ </qc-doc-exemple>
1605
+
1606
+
1607
+ <h5 id="choice-group-doc">Attributs de qc-choice-group</h5>
1608
+
1609
+ <div class="table-overflow">
1610
+ <table class="qc-table qc-striped component-attributes-description">
1611
+ <thead>
1612
+ <tr>
1613
+ <th>Nom</th>
1614
+ <th>Valeur attendue</th>
1615
+ <th>Valeur par défaut</th>
1616
+ <th>Description</th>
1617
+ </tr>
1618
+ </thead>
1619
+ <tbody>
1620
+ <tr>
1621
+ <td>legend</td>
1622
+ <td>Texte</td>
1623
+ <td>""</td>
1624
+ <td>Légende du groupe</td>
1625
+ </tr>
1626
+ <tr>
1627
+ <td>name</td>
1628
+ <td>Texte</td>
1629
+ <td>""</td>
1630
+ <td>Nom commun à tous les champs du groupe</td>
1631
+ </tr>
1632
+ <tr>
1633
+ <td>compact</td>
1634
+ <td>na</td>
1635
+ <td>na</td>
1636
+ <td>Affiche les champs au format compact</td>
1637
+ </tr>
1638
+ <tr>
1639
+ <td>required</td>
1640
+ <td>na</td>
1641
+ <td>na</td>
1642
+ <td>Indique que la sélection est obligatoire en ajoutant un astérisque dans la légende.</td>
1643
+ </tr>
1644
+ <tr>
1645
+ <td>invalid</td>
1646
+ <td>na</td>
1647
+ <td>na</td>
1648
+ <td>
1649
+ Affiche le message d'erreur. Voir l'exemple de validation de formulaire avec des groupes de choix.
1650
+ <br/>NB : `invalid` prend automatiquement la valeur `false` dès qu’un champ est coché.
1651
+ </td>
1652
+ </tr>
1653
+ <tr>
1654
+ <td>invalid-text</td>
1655
+ <td>Texte</td>
1656
+ <td>"Le champ {nom du champ} est obligatoire" ou "{field name} field is required"</td>
1657
+ <td>Message d’erreur à afficher lorsque le groupe est invalide.</td>
1658
+ </tr>
1659
+ <tr>
1660
+ <td>selection-button</td>
1661
+ <td>na</td>
1662
+ <td>na</td>
1663
+ <td>Affiche les champs au format de boutons de sélection dans une grille.</td>
1664
+ </tr>
1665
+ <tr>
1666
+ <td>column-count</td>
1667
+ <td>Nombre</td>
1668
+ <td>1</td>
1669
+ <td><b>Boutons de sélection uniquement </b>: nombre de colonnes de la grille de boutons de sélection.
1670
+ <br/> Si la fenêtre est au format mobile (<code>--qc-breakpoint-sm</code>), la grille passe automatiquement à une colonne.
1671
+ </td>
1672
+ </tr>
1673
+ <tr>
1674
+ <td>inline</td>
1675
+ <td>na</td>
1676
+ <td>na</td>
1677
+ <td><b>Boutons de sélection uniquement</b> : affiche les boutons de sélection sur une rangée.</td>
1678
+ </tr>
1679
+ </tbody>
1680
+ </table>
1681
+ </div>
1682
+
1683
+ <p>Pour les autres attributs, voir la rubrique de <a href="#selection-button-attributes">boutons de sélection</a>.</p>
1684
+
1685
+ <h5>Zone d’ajout de contenu HTML</h5>
1686
+
1687
+ <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>
1688
+
1689
+
1690
+ <hr/>
1691
+
1692
+
1693
+ <h4 id="checkbox">Case à cocher unique (qc-checkbox)</h4>
1694
+
1695
+ <qc-doc-exemple caption="Exemple d’une case à cocher obligatoire.">
1696
+ <form id="exemple-tos-form">
1697
+ <qc-checkbox required >
1698
+ <label>
1699
+ <input type="checkbox"
1700
+ name="consentement"
1701
+ value="oui"
1702
+ id="consentement"
1703
+ />
1704
+ <span >J’accepte les conditions d’utilisation</span>
1705
+ </label>
1706
+ </qc-checkbox>
1707
+
1708
+ <button class="qc-button qc-primary qc-compact"
1709
+ type="submit">
1710
+ S'inscrire
1711
+ </button>
1712
+ </form>
1713
+
1714
+ <script>
1715
+ const tosForm = document.getElementById("exemple-tos-form");
1716
+ const consentement = document.getElementById("consentement");
1717
+ tosForm.addEventListener("submit", (event) => {
1718
+ event.preventDefault();
1719
+ if(consentement.checked) {
1720
+ const formData = new FormData(event.target);
1721
+ let alertParts = ["Formulaire soumis avec les données suivantes :"];
1722
+ for (const [key, value] of formData.entries()) {
1723
+ alertParts.push(`${key} : ${value}`);
1724
+ }
1725
+ alert(alertParts.join("\n"));
1726
+ } else {
1727
+ consentement.closest('qc-checkbox').invalid = true;
1728
+ }
1729
+ })
1730
+ </script>
1731
+ </qc-doc-exemple>
1732
+
1733
+
1734
+ <h4>Attributs de qc-checkbox</h4>
1735
+ <div class="table-overflow">
1736
+ <table class="qc-table qc-striped component-attributes-description">
1737
+ <thead>
1738
+ <tr>
1739
+ <th>Nom</th>
1740
+ <th>Valeur attendue</th>
1741
+ <th>Valeur par défaut</th>
1742
+ <th>Description</th>
1743
+ </tr>
1744
+ </thead>
1745
+ <tbody>
1746
+ <tr>
1747
+ <td>compact</td>
1748
+ <td>na</td>
1749
+ <td>na</td>
1750
+ <td>Affiche la case à cocher au format compact</td>
1751
+ </tr>
1752
+ <tr>
1753
+ <td>required</td>
1754
+ <td>na</td>
1755
+ <td>na</td>
1756
+ <td>Ajoute un astérisque pour indiquer que la sélection est obligatoire.</td>
1757
+ </tr>
1758
+ <tr>
1759
+ <td>invalid</td>
1760
+ <td>na</td>
1761
+ <td>na</td>
1762
+ <td>
1763
+ Affiche le message d’erreur (voir l’exemple de case à cocher obligatoire).
1764
+ <br/>NB : `invalid` prend automatiquement la valeur `false` dès que la case est cochée.
1765
+ </td>
1766
+ </tr>
1767
+ <tr>
1768
+ <td>invalid-text</td>
1769
+ <td>Texte</td>
1770
+ <td>"Le champ {nom du champ} est obligatoire" ou "{field name} field is required"</td>
1771
+ <td>Message d’erreur à afficher lorsque la case est invalide.</td>
1772
+ </tr>
1773
+ </tbody>
1774
+ </table>
1775
+ </div>
1776
+
1777
+
1778
+ <hr/>
1779
+ <h4 id="selection-button">Boutons de sélection</h4>
1780
+
1781
+ <h5>Exemples</h5>
1782
+ <qc-doc-exemple caption="Exemple de boutons radio sous forme de boutons de sélection avec différents états.">
1783
+ <qc-choice-group legend="Sélectionnez une option :"
1784
+ name="ex-radio-select"
1785
+ selection-button
1786
+ column-count="2"
1787
+ >
1788
+ <label>
1789
+ <input type="radio"
1790
+ value="1"
1791
+ checked
1792
+ />
1793
+ <span class="qc-tile">
1794
+ <span class="qc-tile-text">Option 1</span>
1795
+ <span class="qc-tile-description">Ceci est une <b>longue</b> description servant à montrer l'affichage des boutons de sélection.</span>
1796
+ </span>
1797
+ </label>
1798
+
1799
+ <label>
1800
+ <input type="radio"
1801
+ value="2"
1802
+ />
1803
+ <span class="qc-tile">
1804
+ <span class="qc-tile-text">Option 2</span>
1805
+ </span>
1806
+ </label>
1807
+ <label>
1808
+ <input type="radio"
1809
+ value="3"
1810
+ disabled
1811
+ />
1812
+ <span class="qc-tile">
1813
+ <span class="qc-tile-text">Option 3 (désactivée)</span>
1814
+ </span>
1815
+ </label>
1816
+ </qc-choice-group>
1817
+ </qc-doc-exemple>
1818
+
1819
+ <qc-doc-exemple
1820
+ caption="Exemple d’un groupe de cases à cocher sous forme de boutons de sélection avec différents états."
1821
+ >
1822
+ <qc-choice-group
1823
+ name="exemple-checkbox-select"
1824
+ legend="Sélectionnez vos options"
1825
+ selection-button
1826
+ column-count="2">
1827
+ <label>
1828
+ <input type="checkbox"
1829
+ value="1"
1830
+ checked
1831
+ />
1832
+ <span class="qc-tile">
1833
+ <span class="qc-tile-text">Option 1</span>
1834
+ <span class="qc-tile-description">Ceci est une <b>longue</b> description servant à montrer l'affichage des boutons de sélection.</span>
1835
+ </span>
1836
+ </label>
1837
+
1838
+ <label>
1839
+ <input type="checkbox"
1840
+ value="2"
1841
+ />
1842
+ <span class="qc-tile">
1843
+ <span class="qc-tile-text">Option 2</span>
1844
+ </span>
1845
+ </label>
1846
+ <label>
1847
+ <input type="checkbox"
1848
+ value="3"
1849
+ disabled
1850
+ />
1851
+ <span class="qc-tile">
1852
+ <span class="qc-tile-text">Option 3 (désactivée)</span>
1853
+ </span>
1854
+ </label>
1855
+ </qc-choice-group>
1856
+ </qc-doc-exemple>
1857
+
1858
+ <qc-doc-exemple caption="Exemple de boutons radio sous forme de boutons de sélection sur une rangée.">
1859
+ <qc-choice-group legend="Choisissez une option :"
1860
+ name="ex-radio-select-inline"
1861
+ selection-button
1862
+ inline
1863
+ >
1864
+ <label>
1865
+ <input type="radio"
1866
+ value="1"
1867
+ checked
1868
+ />
1869
+ <span>1</span>
1870
+ </label>
1871
+ <label>
1872
+ <input type="radio"
1873
+ value="2"
1874
+ />
1875
+ <span>2</span>
1876
+ </label>
1877
+ <label>
1878
+ <input type="radio"
1879
+ value="3"
1880
+ />
1881
+ <span>3</span>
1882
+ </label>
1883
+ <label>
1884
+ <input type="radio"
1885
+ value="4"
1886
+ />
1887
+ <span>4</span>
1888
+ </label>
1889
+ <label>
1890
+ <input type="radio"
1891
+ value="5"
1892
+ />
1893
+ <span>5</span>
1894
+ </label>
1895
+ <label>
1896
+ <input type="radio"
1897
+ value="6"
1898
+ disabled
1899
+ />
1900
+ <span>6</span>
1901
+ </label>
1902
+
1903
+ </qc-choice-group>
1904
+ </qc-doc-exemple>
1905
+
1906
+ <h5>Documentation technique</h5>
1907
+ <p>Voir <a href="#choice-group-doc">la documentation technique du composant qc-choice-group</a>.</p>
1908
+
1909
+
1910
+ <hr/>
1911
+ <h3 id="textfield">Champ texte</h3>
1912
+ <h4>Exemples</h4>
1913
+
1914
+ <qc-doc-exemple caption="Exemples 1 - différents champs de texte. Soumettre le formulaire pour voir les messages d'erreur.">
1915
+ <form id="formulaire-champs-textes">
1916
+ <qc-textfield
1917
+ label="Nom complet"
1918
+ size="md"
1919
+ required
1920
+ >
1921
+ <input type="text"
1922
+ name="code-postal"
1923
+ placeholder="ex : Jean Tremblay"
1924
+ />
1925
+ </qc-textfield>
1926
+
1927
+ <qc-textfield
1928
+ label="Champ désactivé"
1929
+ size="md"
1930
+ >
1931
+ <input type="text"
1932
+ name="disabled-field"
1933
+ placeholder="Ce champ est désactivé"
1934
+ disabled
1935
+ />
1936
+ </qc-textfield>
1937
+
1938
+ <qc-textfield
1939
+ label="Champ de texte multiligne"
1940
+ description="Lorem ipsum dolor sit amet, consectetur adipiscing elit."
1941
+ size="lg"
1942
+ max-length="10"
1943
+ required
1944
+ >
1945
+ <textarea name="zone-xxl"></textarea>
1946
+ </qc-textfield>
1947
+
1948
+ <button type="submit" class="qc-button qc-primary qc-compact">Envoyer</button>
1949
+ </form>
1950
+
1951
+ <script>
1952
+ const textfieldForm = document.getElementById("formulaire-champs-textes");
1953
+ textfieldForm.addEventListener("submit", (event) => {
1954
+ event.preventDefault();
1955
+ let isValid = true;
1956
+ textfieldForm
1957
+ .querySelectorAll("qc-textfield[required]")
1958
+ .forEach(formfield => {
1959
+ if (formfield.invalidAtSubmit) {
1960
+ formfield.invalid = true;
1961
+ isValid = false;
1962
+ }
1963
+ })
1964
+ if (isValid) {
1965
+ const formData = new FormData(textfieldForm);
1966
+ let alertParts = ["Formulaire soumis avec les données suivantes :"];
1967
+ for (const [key, val] of formData.entries()) {
1968
+ alertParts.push(`${key} : ${val}`);
1969
+ }
1970
+ alert(alertParts.join("\n"));
1971
+ }
1972
+ });
1973
+ </script>
1974
+ </qc-doc-exemple>
1975
+
1976
+ <qc-doc-exemple id="textfield-sizes" caption="Illustration des différentes tailles de champs texte.">
1977
+
1978
+ <qc-textfield
1979
+ label="Taille extra-petite"
1980
+ size="xs"
1981
+ >
1982
+ <input type="text"
1983
+ placeholder="xs"
1984
+ />
1985
+ </qc-textfield>
1986
+
1987
+ <qc-textfield
1988
+ label="Taille petite"
1989
+ size="sm"
1990
+ >
1991
+ <input type="text"
1992
+ placeholder="sm"
1993
+ />
1994
+ </qc-textfield>
1995
+
1996
+ <qc-textfield
1997
+ label="Taille moyenne"
1998
+ size="md"
1999
+ >
2000
+ <input type="text"
2001
+ placeholder="md"
2002
+ />
2003
+ </qc-textfield>
2004
+ <qc-textfield
2005
+ label="Taille large"
2006
+ size="lg"
2007
+ >
2008
+ <input type="text"
2009
+ placeholder="lg"
2010
+ />
2011
+ </qc-textfield>
2012
+ <qc-textfield
2013
+ label="Taille extra-large"
2014
+ size="xl"
2015
+ >
2016
+ <input type="text"
2017
+ placeholder="xl"
2018
+ />
2019
+ </qc-textfield>
2020
+
2021
+ </qc-doc-exemple>
2022
+
2023
+
2024
+ <h4>Documentation technique</h4>
2025
+
2026
+ <h4>Attributs</h4>
2027
+ <div class="table-overflow">
2028
+ <table class="qc-table qc-striped component-attributes-description">
2029
+ <thead>
2030
+ <tr>
2031
+ <th>Nom</th>
2032
+ <th>Valeur attendue</th>
2033
+ <th>Valeur par défaut</th>
2034
+ <th>Description</th>
2035
+ </tr>
2036
+ </thead>
2037
+ <tbody>
2038
+ <tr>
2039
+ <td>label</td>
2040
+ <td>Texte</td>
2041
+ <td>""</td>
2042
+ <td>Texte du libellé du champ</td>
2043
+ </tr>
2044
+ <tr>
2045
+ <td>size</td>
2046
+ <td>"xs", "sm", "md", "lg", "xl"</td>
2047
+ <td>lg pour les champs simple (<code>input</code>) <br>
2048
+ xl pour les champs multilignes (<code>textarea</code>),
2049
+ </td>
2050
+ <td>Largeur du champ</td>
2051
+ </tr>
2052
+ <tr>
2053
+ <td>required</td>
2054
+ <td>na</td>
2055
+ <td>na</td>
2056
+ <td>Marque le champ comme obligatoire</td>
2057
+ </tr>
2058
+ <tr>
2059
+ <td>description</td>
2060
+ <td>Texte</td>
2061
+ <td>""</td>
2062
+ <td>Texte descriptif affiché sous l'étiquette</td>
2063
+ </tr>
2064
+ <tr>
2065
+ <td>max-length</td>
2066
+ <td>Nombre</td>
2067
+ <td>null</td>
2068
+ <td>Indique la limite de caractères pour le champ</td>
2069
+ </tr>
2070
+ <tr>
2071
+ <td>invalid</td>
2072
+ <td>na</td>
2073
+ <td>na</td>
2074
+ <td>Indique que le champ est invalide en affichant un message selon l'erreur.
2075
+ <dl>
2076
+ <dt>Français</dt>
2077
+ <dd>Le champ XXX est obligatoire.</dd>
2078
+ <dd>La limite de caractères du champ XXX est dépassée.</dd>
2079
+ <dt>Anglais</dt>
2080
+ <dd>XXX field is required.</dd>
2081
+ <dd>The character limit for the ${label} field has been exceeded.</dd>
2082
+ </dl>
2083
+ </td>
2084
+ </tr>
2085
+ <tr>
2086
+ <td>invalid-text</td>
2087
+ <td>Texte</td>
2088
+ <td>aucune</td>
2089
+ <td>Message d'erreur personnalisé affiché lorsque le champ est invalide</td>
2090
+ </tr>
2091
+ </tbody>
2092
+ </table>
2093
+ </div>
2094
+
2095
+ <h4>Champs alignés horizontalement (classe <code>qc-textfield-row</code>)</h4>
2096
+
2097
+ <p>Les champs regroupés sur une ligne peuvent être placés dans un div avec la classe <code>qc-textfield-row</code>. De cette façon, les messages d'erreur ne provoquent pas de décalage. <br/>
2098
+ Voir le code des champs Téléphone et Poste dans l'exemple ci-dessus.</p>
2099
+
2100
+ <h4>Propriété js</h4>
2101
+ <div class="table-overflow">
2102
+ <table class="qc-table qc-striped component-attributes-description">
2103
+ <thead>
2104
+ <tr>
2105
+ <th>Nom</th>
2106
+ <th>Valeur</th>
2107
+ <th>Description</th>
2108
+ </tr>
2109
+ </thead>
2110
+ <tbody>
2111
+ <tr>
2112
+ <td>invalidAtSubmit</td>
2113
+ <td>Booléen</td>
2114
+ <td>Indique si le champ serait invalide s'il était soumis. La vérification porte sur <code>required</code> et <code>max-length</code></td>
2115
+ </tr>
2116
+ <tr>
2117
+ <tr>
2118
+ <td>maxlengthReached</td>
2119
+ <td>Booléen</td>
2120
+ <td>Indique si la limite de caractère est dépassée.</td>
2121
+ </tr>
2122
+ </tbody>
2123
+ </table>
2124
+ </div>
2125
+
2126
+ <h5>Zone d’ajout de contenu HTML</h5>
2127
+
2128
+ <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu par défaut.</p>
2129
+
2130
+ <hr/>
2131
+ <h2 id="search-input">Champ de recherche</h2>
2132
+ <h3>Exemples</h3>
2133
+
2134
+ <qc-doc-exemple caption="Exemples de champs de recherche">
2135
+ <qc-search-input
2136
+ placeholder="Rechercher un article"
2137
+ aria-label="Rechercher un article"
2138
+ clear-aria-label="Effacer le texte"
2139
+ left-icon
2140
+ ></qc-search-input>
2141
+
2142
+ <br>
2143
+
2144
+ <qc-search-input
2145
+ value="Climat"
2146
+ placeholder="Rechercher un sujet"
2147
+ aria-label="Rechercher un sujet"
2148
+ clear-aria-label="Effacer le texte"
2149
+ left-icon
2150
+ ></qc-search-input>
2151
+
2152
+ <br>
2153
+
2154
+ <qc-search-input
2155
+ placeholder="Recherche désactivée"
2156
+ aria-label="Recherche désactivée"
2157
+ disabled
2158
+ left-icon
2159
+ clear-aria-label="Effacer le texte"
2160
+ ></qc-search-input>
2161
+ </qc-doc-exemple>
2162
+
2163
+ <h3>Documentation technique</h3>
2164
+
2165
+ <h4>Attributs</h4>
2166
+ <div class="table-overflow">
2167
+ <table class="qc-table qc-striped component-attributes-description">
2168
+ <thead>
2169
+ <tr>
2170
+ <th>Nom</th>
2171
+ <th>Valeur attendue</th>
2172
+ <th>Valeur par défaut</th>
2173
+ <th>Description</th>
2174
+ </tr>
2175
+ </thead>
2176
+ <tbody>
2177
+ <tr>
2178
+ <td>value</td>
2179
+ <td>Texte</td>
2180
+ <td>""</td>
2181
+ <td>Valeur inscrite par défaut dans le champ de recherche.</td>
2182
+ </tr>
2183
+ <tr>
2184
+ <td>placeholder</td>
2185
+ <td>Texte</td>
2186
+ <td>""</td>
2187
+ <td>Texte indicatif affiché lorsque le champ est vide.</td>
2188
+ </tr>
2189
+ <tr>
2190
+ <td>aria-label</td>
2191
+ <td>Texte</td>
2192
+ <td>"Rechercher..." ou "Search..."</td>
2193
+ <td>Libellé accessible pour les lecteurs d'écrans.</td>
2194
+ </tr>
2195
+ <tr>
2196
+ <td>clear-aria-label</td>
2197
+ <td>Texte</td>
2198
+ <td>"Effacer le texte" ou "Clear text"</td>
2199
+ <td>Libellé accessible du bouton pour effacer le champ.</td>
2200
+ </tr>
2201
+ <tr>
2202
+ <td>disabled</td>
2203
+ <td>na</td>
2204
+ <td>na</td>
2205
+ <td>Désactive le champ.</td>
2206
+ </tr>
2207
+ <tr>
2208
+ <td>name</td>
2209
+ <td>Texte</td>
2210
+ <td>""</td>
2211
+ <td>Nom du champ utilisé lors de la soumission du formulaire.</td>
2212
+ </tr>
2213
+ </tbody>
2214
+ </table>
2215
+ </div>
2216
+
2217
+ <hr/>
2218
+ <!-- Commutateur -->
2219
+ <h3 id="toggle-switch">Commutateur</h3>
2220
+ <p>
2221
+ Le commutateur peut être utilisé seul ou en groupe. Contrairement aux <a href="#checkbox">cases à cocher</a>, le
2222
+ commutateur agit immédiatement sur la page où il est inséré.
2223
+ </p>
2224
+
2225
+ <h4>Exemples</h4>
2226
+ <qc-doc-exemple
2227
+ caption="Exemple de commutateurs seuls avec leurs libellés respectivement à gauche et à droite."
2228
+ >
2229
+ <div style="display: flex; flex-direction: column; gap: 2.4rem">
2230
+ <qc-toggle-switch
2231
+ id="switch-status"
2232
+ label="Afficher l'état du commutateur à la console."
2233
+ ></qc-toggle-switch>
2234
+ <qc-toggle-switch
2235
+ id="switch-status-2"
2236
+ label="Libellé aligné à droite (afficher au format mobile pour voir la différence)."
2237
+ text-align="end"
2238
+ ></qc-toggle-switch>
2239
+ </div>
1180
2240
 
1181
- <p>Ci-dessous, les zones d'ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
1182
- <qc-doc-exemple id="qc-piv-header-slots"
1183
- caption="Présentation des zones d'ajout de contenu dans le PIV"
1184
- hide-code
2241
+ <script>
2242
+ document.getElementById("switch-status")
2243
+ .addEventListener("change", (event) => {
2244
+ console.log(`'switch-status' mis à ${event.target.checked}`);
2245
+ });
2246
+ </script>
2247
+ </qc-doc-exemple>
2248
+
2249
+ <qc-doc-exemple caption="Exemple de commutateurs en groupe avec différents états">
2250
+ <qc-toggle-switch-group
2251
+ id="switch-group"
2252
+ legend="Préférences de notifications de messages"
2253
+ justified
2254
+ max-width="25.6rem"
2255
+ >
2256
+ <qc-toggle-switch
2257
+ id="nouveaux-messages"
2258
+ label="Nouveaux messages"
2259
+ checked
2260
+ ></qc-toggle-switch>
2261
+ <qc-toggle-switch
2262
+ id="modifications-messages"
2263
+ label="Modifications de messages"
2264
+ ></qc-toggle-switch>
2265
+ <qc-toggle-switch
2266
+ id="messages-supprimes"
2267
+ label="Messages supprimés (désactivé)"
2268
+ disabled
2269
+ ></qc-toggle-switch>
2270
+ </qc-toggle-switch-group>
2271
+ <script>
2272
+ document.getElementById("switch-group").querySelectorAll("qc-toggle-switch")
2273
+ .forEach(switchElement => {
2274
+ switchElement.addEventListener("change", (event) => {
2275
+ console.log(`'${event.target.id}' mis à ${event.target.checked}`);
2276
+ });
2277
+ });
2278
+ </script>
2279
+ </qc-doc-exemple>
2280
+
2281
+ <h4>Documentation technique</h4>
2282
+
2283
+ <h5>Attributs de <code>qc-toggle-switch</code></h5>
2284
+ <table class="qc-table qc-striped component-attributes-description">
2285
+ <thead>
2286
+ <tr>
2287
+ <th>Nom</th>
2288
+ <th>Valeur attendue</th>
2289
+ <th>Valeur par défaut</th>
2290
+ <th>Description</th>
2291
+ </tr>
2292
+ </thead>
2293
+ <tbody>
2294
+ <tr>
2295
+ <td>label</td>
2296
+ <td>Contenu HTML</td>
2297
+ <td></td>
2298
+ <td>Contenu du libellé du commutateur</td>
2299
+ </tr>
2300
+ <tr>
2301
+ <td>checked</td>
2302
+ <td>na</td>
2303
+ <td>na</td>
2304
+ <td>Active le commutateur par défaut</td>
2305
+ </tr>
2306
+ <tr>
2307
+ <td>disabled</td>
2308
+ <td>na</td>
2309
+ <td>na</td>
2310
+ <td>Désactive le commutateur</td>
2311
+ </tr>
2312
+ <tr>
2313
+ <td>justified</td>
2314
+ <td>na</td>
2315
+ <td>na</td>
2316
+ <td>
2317
+ Permet au commutateur et son libellé de prendre toute la largeur disponible
2318
+ </td>
2319
+ </tr>
2320
+ <tr>
2321
+ <td>text-align</td>
2322
+ <td>"start" ou "end"</td>
2323
+ <td>"start"</td>
2324
+ <td>Alignement du texte du libellé</td>
2325
+ </tr>
2326
+ </tbody>
2327
+ </table>
2328
+
2329
+ <h5>Attributs de <code>qc-toggle-switch-group</code></h5>
2330
+ <table class="qc-table qc-striped component-attributes-description">
2331
+ <thead>
2332
+ <tr>
2333
+ <th>Nom</th>
2334
+ <th>Valeur attendue</th>
2335
+ <th>Valeur par défaut</th>
2336
+ <th>Description</th>
2337
+ </tr>
2338
+ </thead>
2339
+ <tbody>
2340
+ <tr>
2341
+ <td>legend</td>
2342
+ <td>Contenu HTML</td>
2343
+ <td></td>
2344
+ <td>Contenu de la légende du groupe de commutateurs</td>
2345
+ </tr>
2346
+ <tr>
2347
+ <td>disabled</td>
2348
+ <td>na</td>
2349
+ <td>na</td>
2350
+ <td>Désactive le groupe de commutateurs</td>
2351
+ </tr>
2352
+ <tr>
2353
+ <td>justified</td>
2354
+ <td>na</td>
2355
+ <td>na</td>
2356
+ <td>
2357
+ Permet au commutateur et son libellé de prendre toute la largeur disponible.
2358
+ <br> N.B. : Cette valeur a priorité sur celle des commutateurs du groupe.
2359
+ </td>
2360
+ </tr>
2361
+ <tr>
2362
+ <td>text-align</td>
2363
+ <td>"start" ou "end"</td>
2364
+ <td>"start"</td>
2365
+ <td>
2366
+ Alignement du texte des libellés des commutateurs.
2367
+ <br> N.B. : Cette valeur a priorité sur celle des commutateurs du groupe.
2368
+ </td>
2369
+ </tr>
2370
+ <tr>
2371
+ <td>max-width</td>
2372
+ <td>Toute valeur acceptée par la directive css <code>max-width</code></td>
2373
+ <td>"fit-content"</td>
2374
+ <td>Largeur maximale des commutateurs dans le groupe</td>
2375
+ </tr>
2376
+ </tbody>
2377
+ </table>
2378
+ <hr/>
2379
+ <h3 id="select">Liste déroulante</h3>
2380
+
2381
+ <h4>Exemples</h4>
2382
+
2383
+ <qc-doc-exemple caption="Exemple de listes déroulantes en sélection dans différents états">
2384
+ <qc-select id="qc-select-single-choice">
2385
+ <label for="select-single-choice">Choix unique</label>
2386
+ <select id="select-single-choice">
2387
+ <option value="" selected>Faire une sélection</option>
2388
+ <option value="1">Option 1</option>
2389
+ <option value="2">Option 2</option>
2390
+ <option value="3">Option 3</option>
2391
+ <option value="4">Option 4</option>
2392
+ <option value="5">Option 5</option>
2393
+ <option value="6">Option 6</option>
2394
+ <option value="7">Option 7</option>
2395
+ <option value="8">Option 8</option>
2396
+ <option value="9">Option 9</option>
2397
+ <option value="10">Option 10</option>
2398
+ <option value="11">Option 11</option>
2399
+ <option value="12">Option 12</option>
2400
+ <option value="13">Option 13</option>
2401
+ <option value="14">Option 14</option>
2402
+ <option value="15">Option 15</option>
2403
+ <option value="16" disabled>Option 16 (désactivée)</option>
2404
+ </select>
2405
+ </qc-select>
2406
+
2407
+ <qc-select id="qc-select-single-choice-search" enable-search>
2408
+ <label for="select-single-choice-search">Choix unique avec recherche</label>
2409
+ <select id="select-single-choice-search">
2410
+ <option value="" selected>Faire une sélection</option>
2411
+ <option value="1">Option 1</option>
2412
+ <option value="2">Option 2</option>
2413
+ <option value="3">Option 3</option>
2414
+ <option value="4">Option 4</option>
2415
+ <option value="5">Option 5</option>
2416
+ <option value="6">Option 6</option>
2417
+ <option value="7">Option 7</option>
2418
+ <option value="8">Option 8</option>
2419
+ <option value="9">Option 9</option>
2420
+ <option value="10">Option 10</option>
2421
+ <option value="11">Option 11</option>
2422
+ <option value="12">Option 12</option>
2423
+ <option value="13">Option 13</option>
2424
+ <option value="14">Option 14</option>
2425
+ <option value="15">Option 15</option>
2426
+ <option value="16">Option 16</option>
2427
+ </select>
2428
+ </qc-select>
2429
+
2430
+ <qc-select id="qc-select-multiple-choices">
2431
+ <label for="select-multiple-choices">Choix multiples</label>
2432
+ <select multiple id="select-multiple-choices">
2433
+ <option value="1">Option 1</option>
2434
+ <option value="2" selected>Option 2</option>
2435
+ <option value="3" selected>Option 3</option>
2436
+ <option value="4" disabled>Option 4 (désactivée)</option>
2437
+ </select>
2438
+ </qc-select>
2439
+
2440
+ <qc-select id="qc-select-disabled">
2441
+ <label for="select-disabled">Désactivé</label>
2442
+ <select id="select-disabled" disabled></select>
2443
+ </qc-select>
2444
+
2445
+ <qc-select id="qc-select-invalid"
2446
+ invalid
2447
+ required >
2448
+ <label for="select-invalid">État invalide</label>
2449
+ <select id="select-invalid"
2450
+ >
2451
+ <option value=""></option>
2452
+ <option value="1" >Option 1</option>
2453
+ <option value="2">Option 2</option>
2454
+ </select>
2455
+ </qc-select>
2456
+ </qc-doc-exemple>
2457
+
2458
+ <h4>Documentation technique</h4>
2459
+
2460
+ <h5>Attributs</h5>
2461
+ <div class="table-overflow">
2462
+ <table class="qc-table qc-striped component-attributes-description">
2463
+ <thead>
2464
+ <tr>
2465
+ <th>Nom</th>
2466
+ <th>Valeur attendue</th>
2467
+ <th>Valeur par défaut</th>
2468
+ <th>Description</th>
2469
+ </tr>
2470
+ </thead>
2471
+ <tbody>
2472
+ <tr>
2473
+ <td>id</td>
2474
+ <td>Texte</td>
2475
+ <td>Chaîne de caractères aléatoire</td>
2476
+ <td>Identifiant de la liste déroulante</td>
2477
+ </tr>
2478
+ <tr>
2479
+ <td>label</td>
2480
+ <td>Contenu HTML</td>
2481
+ <td>""</td>
2482
+ <td>
2483
+ Libellé de la liste déroulante.
2484
+ <br>N.B. : Le contenu de l'élément <code>label</code> en slot est utilisé en priorité.
2485
+ </td>
2486
+ </tr>
2487
+ <tr>
2488
+ <td>width</td>
2489
+ <td>"xs", "sm", "md", "lg", "xl"</td>
2490
+ <td>"md"</td>
2491
+ <td>
2492
+ Largeur de la liste déroulante. Voir <a href="#textfield-sizes">l'illustration des tailles de champ texte</a>
2493
+ pour une indication visuelle des tailles disponibles.
2494
+ </td>
2495
+ </tr>
2496
+ <tr>
2497
+ <td>enable-search</td>
2498
+ <td>na</td>
2499
+ <td>na</td>
2500
+ <td>Affiche un champ de recherche instantanée dans le haut des options de la liste déroulante</td>
2501
+ </tr>
2502
+ <tr>
2503
+ <td>required</td>
2504
+ <td>na</td>
2505
+ <td>na</td>
2506
+ <td>Indique aux internautes que la sélection est obligatoire en ajoutant un astérisque dans le libellé</td>
2507
+ </tr>
2508
+ <tr>
2509
+ <td>disabled</td>
2510
+ <td>na</td>
2511
+ <td>na</td>
2512
+ <td>
2513
+ Désactive la liste déroulante
2514
+ <br>N.B. : L'attribut <code>disabled</code> de l'élément <code>select</code> en slot est utilisé en priorité.
2515
+ </td>
2516
+ </tr>
2517
+ <tr>
2518
+ <td>invalid</td>
2519
+ <td>na</td>
2520
+ <td>na</td>
2521
+ <td>
2522
+ Indique si la liste déroulante est dans un état invalide
2523
+ <br/>NB : <code>invalid</code> prend automatiquement la valeur <code>false</code>
2524
+ dès que l'attribut <code>value</code> est modifié.
2525
+ </td>
2526
+ </tr>
2527
+ <tr>
2528
+ <td>invalid-text</td>
2529
+ <td>Texte</td>
2530
+ <td>Le champ (libellé du champ) est obligatoire. / (libellé du champ) field is required.</td>
2531
+ <td>Message d’erreur à afficher lorsque la liste déroulante est invalide</td>
2532
+ </tr>
2533
+ <tr>
2534
+ <td>placeholder</td>
2535
+ <td>Texte</td>
2536
+ <td>Faire une sélection / Select an option</td>
2537
+ <td>
2538
+ <i>Placeholder</i> de la boîte de la liste déroulante
2539
+ <br> N.B. : Si non précisé, le <i>placeholder</i> prend le texte de la première option avec une valeur vide (<code>value=""</code>).
2540
+ Voir l'exemple de <a href="#qc-select-single-choice">liste déroulante avec choix unique</a>.
2541
+ </td>
2542
+ </tr>
2543
+ <tr>
2544
+ <td>search-placeholder</td>
2545
+ <td>Texte</td>
2546
+ <td>""</td>
2547
+ <td><i>Placeholder</i> du champ de recherche</td>
2548
+ </tr>
2549
+ <tr>
2550
+ <td>no-options-message</td>
2551
+ <td>Contenu HTML</td>
2552
+ <td>Aucun élément/No item</td>
2553
+ <td>Texte indiquant l'absence d'options dans la liste.</td>
2554
+ </tr>
2555
+ <tr>
2556
+ <td>multiple</td>
2557
+ <td>na</td>
2558
+ <td>na</td>
2559
+ <td>
2560
+ Active la sélection multiple.
2561
+ <br>N.B. : L'attribut <code>multiple</code> de l'élément <code>select</code> est utilisé en priorité.
2562
+ </td>
2563
+ </tr>
2564
+ </tbody>
2565
+ </table>
2566
+ </div>
2567
+
2568
+ <h5>Propriété JS</h5>
2569
+
2570
+ <div class="table-overflow">
2571
+ <table class="qc-table qc-striped component-attributes-description">
2572
+ <thead>
2573
+ <tr>
2574
+ <th>Nom</th>
2575
+ <th>Type</th>
2576
+ <th>Description</th>
2577
+ </tr>
2578
+ </thead>
2579
+ <tbody>
2580
+ <tr>
2581
+ <td>value</td>
2582
+ <td>Tableau de chaîne de caractères</td>
2583
+ <td>Valeur(s) sélectionnée(s) dans la liste déroulante</td>
2584
+ </tr>
2585
+ </tbody>
2586
+ </table>
2587
+ </div>
2588
+
2589
+ <h5>Zone d'ajout de contenu HTML</h5>
2590
+ <p>Ce composant ne comporte qu'une seule zone d'ajout de contenu.</p>
2591
+
2592
+ <hr/>
2593
+ <h3 id="champs-alignes">Champs alignés horizontalement (classe <code>qc‑textfield‑row</code>)</h3>
2594
+
2595
+ <p>Les champs regroupés sur une ligne doivent être placés dans un div avec la classe <code>qc-textfield-row</code> pour correctement afficher les messages d’erreur en cas de soumission invalide.</p>
2596
+
2597
+ <h4>Exemple</h4>
2598
+ <qc-doc-exemple caption="Exemple de champs sur une seule ligne">
2599
+ <form id="formulaire-champ-alignes">
2600
+ <div class="qc-formfield-row">
2601
+ <qc-textfield
2602
+ label="Téléphone"
2603
+ size="sm"
2604
+ required
2605
+ ><input type="text"
2606
+ name="telephone"
2607
+ placeholder="(123) 456-7890"
2608
+ /></qc-textfield>
2609
+
2610
+ <qc-textfield
2611
+ label="Poste"
2612
+ size="xs"
2613
+ required
1185
2614
  >
1186
- <qc-piv-header
1187
- style="margin-bottom: var(--qc-spacer-content-block-mb);"
1188
- enable-search="true"
1189
- show-search="true">
1190
- <div slot="search-zone"
1191
- style="border:2px dashed;padding: var(--qc-spacer-xs);">
1192
- slot="search-zone"
1193
- </div>
1194
- <div slot="links"
1195
- style="border:2px dashed;padding: var(--qc-spacer-xs);"
1196
- >
1197
- slot="links"
1198
- </div>
1199
- </qc-piv-header>
1200
- </qc-doc-exemple>
1201
-
1202
- <!-- <qc-code target-id="qc-piv-header-slots"></qc-code>-->
1203
-
1204
- <h3 id="piv-footer">Pied de page du PIV (qc-piv-footer)</h3>
1205
-
1206
- <h4>Exemples</h4>
1207
-
1208
-
1209
- <qc-doc-exemple id="piv-footer-1"
1210
- caption="Exemple de pied de page du PIV de base">
1211
- <qc-piv-footer>
1212
- <nav aria-label="Navigation du pied-de-page">
1213
- <ul>
1214
- <li><a href="/">Accessibilité</a></li>
1215
- <li><a href="/">Plan du site</a></li>
1216
- <li><a href="/">Accès à l'information</a></li>
1217
- <li><a href="/">Politique de confidentialité</a></li>
1218
- <li><a href="/">Condition d'utilisation</a></li>
1219
- <li><a href="/">À propos de Québec.ca</a></li>
1220
- </ul>
1221
- </nav>
1222
- </qc-piv-footer>
1223
- </qc-doc-exemple>
1224
- <!-- <qc-code target-id="piv-footer-1"></qc-code>-->
1225
-
1226
- <qc-doc-exemple id="piv-footer-ex-2"
1227
- caption="Exemple de pied de page du PIV personnalisé."
2615
+ <input type="text"
2616
+ name="poste"
2617
+ />
2618
+ </qc-textfield>
2619
+ </div>
2620
+ <div class="qc-formfield-row">
2621
+ <qc-select
2622
+ id="dropdown-list-restaurants"
2623
+ placeholder="Type de restaurant"
2624
+ enable-search
2625
+ search-placeholder="Rechercher un type de restaurant"
2626
+ required
2627
+ invalid-text="Veuillez choisir un type de restaurant."
1228
2628
  >
1229
- <qc-piv-footer
1230
- logo-src="img/piv-MCE-theme-clair.svg"
1231
- logo-src-dark-theme="img/piv-MCE-theme-sombre.svg"
1232
- >
1233
- <nav aria-label="Navigation du pied-de-page">
1234
- <ul>
1235
- <li><a href="/">Accessibilité</a></li>
1236
- <li><a href="/">Plan du site</a></li>
1237
- <li><a href="/">S'informer sur clicSÉQUR - Citoyens</a></li>
1238
- <li><a href="/">FAQ</a></li>
1239
- </ul>
1240
- </nav>
1241
- <qc-external-link slot="copyright">
1242
- <a
1243
- target="_blank"
1244
- rel="noopener"
1245
- href="https://www.quebec.ca/droit-auteur">
1246
- © Gouvernement du Québec, 2023
1247
- </a>
1248
- </qc-external-link>
1249
- </qc-piv-footer>
1250
- </qc-doc-exemple>
1251
- <!-- <qc-code target-id="piv-footer-ex-2"></qc-code>-->
1252
-
1253
- <h4>Documentation technique</h4>
1254
-
1255
- <h5>Attributs</h5>
1256
- <div class="table-overflow">
1257
- <table class="qc-table qc-striped component-attributes-description">
1258
- <thead>
1259
- <tr>
1260
- <th>Nom</th>
1261
- <th>Valeur attendue</th>
1262
- <th>Valeur par défaut</th>
1263
- <th>Description</th>
1264
- </tr>
1265
- </thead>
1266
- <tbody>
1267
- <tr>
1268
- <td>logo-url</td>
1269
- <td>Adresse du lien au clic sur l’image</td>
1270
- <td>/</td>
1271
- <td>Cible du lien contenant le logo</td>
1272
- </tr>
1273
- <tr>
1274
- <td>logo-src</td>
1275
- <td>Le chemin de l’image en thème clair.</td>
1276
- <td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
1277
- <td>Adresse de l'image du pied de page en thème clair (fond transparent, texte et drapeaux en
1278
- couleur, voir <a href="#piv-footer-ex-2">l'exemple de pied de page PIV personnalisé</a>).
1279
- </td>
1280
- </tr>
1281
- <tr>
1282
- <td>logo-src-dark-theme</td>
1283
- <td>Le chemin de l’image en thème sombre.</td>
1284
- <td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
1285
- <td>Adresse de l'image du pied de page en thème sombre (fond transparent, texte et drapeaux en
1286
- blanc, voir <a href="#piv-footer-ex-2">l'exemple de pied de page PIV personnalisé</a>).
1287
- </td>
1288
- </tr>
1289
- <tr>
1290
- <td>logo-alt</td>
1291
- <td>Texte</td>
1292
- <td>
1293
- <dl>
1294
- <dt>Français</dt>
1295
- <dd>Logo du gouvernement du Québec</dd>
1296
- <dt>Anglais</dt>
1297
- <dd>Logo of government of Québec</dd>
1298
- </dl>
1299
- </td>
1300
- <td>Texte alternatif du logo pour les lecteurs d'écran</td>
1301
- </tr>
1302
- <tr>
1303
- <td>logo-width</td>
1304
- <td>Nombre</td>
1305
- <td>139</td>
1306
- <td>Largeur de l’image en px</td>
1307
- </tr>
1308
- <tr>
1309
- <td>logo-height</td>
1310
- <td>Nombre</td>
1311
- <td>35</td>
1312
- <td>Hauteur de l’image en px</td>
1313
- </tr>
1314
- <tr>
1315
- <td>copyright-text</td>
1316
- <td>Texte</td>
1317
- <td>© Gouvernement du Québec, &lt;année en cours AAAA&gt;</td>
1318
- <td>Texte du lien de changement de langue</td>
1319
- </tr>
1320
- <tr>
1321
- <td>copyright-url</td>
1322
- <td>Adresse</td>
1323
- <td>
1324
- <dl>
1325
- <dt>Français</dt>
1326
- <dd>https://www.quebec.ca/droit-auteur</dd>
1327
- <dt>Anglais</dt>
1328
- <dd>https://www.quebec.ca/en/copyright</dd>
1329
- </dl>
1330
- </td>
1331
- <td>L'adresse de la page du droit d'auteur sur quebec.ca</td>
1332
- </tr>
1333
- </tbody>
1334
- </table>
1335
- </div>
1336
-
1337
- <qc-notice type="information">Les images du pied de page PIV doivent respecter
1338
- <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
1339
- normes graphiques du système d’identification visuel</a>. Nous vous invitons à privilégier le format
1340
- SVG, qui permet de conserver la lisibilité de l’image en cas de zoom..
1341
- </qc-external-link>
1342
- </qc-notice>
1343
-
1344
- <h5>Zones d'ajout de contenu HTML</h5>
1345
-
1346
- <p>Ci-dessous, les zones d'ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
1347
- <qc-doc-exemple id="qc-piv-footer-slots"
1348
- caption="Présentation des zones d'ajout de contenu du pied-de-page PIV">
1349
- <qc-piv-footer>
1350
- <div style="border:2px dashed;padding: var(--qc-spacer-xs);">
1351
- Contenu par défaut
1352
- </div>
1353
- <div slot="copyright"
1354
- style="border:2px dashed;padding: var(--qc-spacer-xs);">
1355
- slot="copyright"
1356
- </div>
1357
- </qc-piv-footer>
1358
- </qc-doc-exemple>
1359
- <!-- <qc-code target-id="qc-piv-footer-slots"></qc-code>-->
1360
-
1361
- <hr/>
1362
-
1363
- <!-- haut de page -->
1364
- <h2 id="toTop">Haut de page</h2>
1365
- <p>
1366
- Le composant <i>haut de page</i> est la flèche qui permet à l'utilisateur de remonter vers le haut de
1367
- page. Il s'affiche quand l'utilisateur commence à défiler vers le haut.
1368
- Il disparaît quand l'utilisateur commence à défiler vers le bas.
1369
- </p>
1370
- <h4>Exemple</h4>
1371
- <qc-doc-exemple caption="Présentation du composant retour en haut de page"
1372
- code-target-id="to-top-exemple"
2629
+ <label for="dropdown-list-restaurants-select">Type de restaurant</label>
2630
+ <select id="dropdown-list-restaurants-select"
2631
+ name="restaurants">
2632
+ <option value="">Veuillez faire un choix</option>
2633
+ <option value="Pizzeria">Pizzeria</option>
2634
+ <option value="Pâtisserie">Pâtisserie</option>
2635
+ <option value="Steakhouse">Steakhouse</option>
2636
+ <option value="Bar">Bar</option>
2637
+ <option value="Casse-croûte">Casse-croûte</option>
2638
+ <option value="Boîte à pâtes">Boîte à pâtes</option>
2639
+ <option value="Restaurant à burgers">Restaurant à burgers</option>
2640
+ </select>
2641
+ </qc-select>
2642
+
2643
+ <qc-select
2644
+ id="dropdown-list-regions"
2645
+ placeholder="Sélectionner une région"
2646
+ enable-search
2647
+ required
2648
+ search-placeholder="Rechercher les régions"
1373
2649
  >
1374
- <qc-to-top demo="true"/>
1375
- </qc-doc-exemple>
1376
- <div id="to-top-exemple">
1377
- <qc-to-top></qc-to-top>
1378
- </div>
1379
-
1380
- <h3>Documentation technique</h3>
1381
-
1382
- <h4>Attributs</h4>
1383
- <div class="table-overflow">
1384
- <table class="qc-table qc-striped">
1385
- <thead>
1386
- <tr>
1387
- <th>Nom</th>
1388
- <th>Valeur attendue</th>
1389
- <th>Valeur par défaut</th>
1390
- <th>Description</th>
1391
- </tr>
1392
- </thead>
1393
- <tbody>
1394
- <tr>
1395
- <td>text</td>
1396
- <td>Texte</td>
1397
- <td>Retour en haut / Back to top</td>
1398
- <td>la valeur de l'attribut "text" de l'élément.</td>
1399
- </tr>
1400
- <tr>
1401
- <td>demo</td>
1402
- <td>"true" ou "false"</td>
1403
- <td>false</td>
1404
- <td>Pour utiliser le composant en démonstration uniquement.</td>
1405
- </tr>
1406
- </tbody>
1407
- </table>
1408
- </div>
2650
+ <label for="dropdown-list-regions-select">Régions desservies</label>
2651
+ <select id="dropdown-list-regions-select" multiple name="regions">
2652
+ <option value="Capitale-nationale">Capitale-nationale</option>
2653
+ <option value="Centre-du-Québec" >Centre-du-Québec</option>
2654
+ <option value="Montérégie" >Montérégie</option>
2655
+ <option value="Outaouais">Outaouais</option>
2656
+ <option value="Saguenay-Lac-Saint-Jean">Saguenay-Lac-Saint-Jean</option>
2657
+ <option value="Gaspésie-Îles-de-la-Madeleine">Gaspésie-Îles-de-la-Madeleine</option>
2658
+ <option value="Nord-du-Québec">Nord-du-Québec</option>
2659
+ <option value="Bas-Saint-Laurent">Bas-Saint-Laurent</option>
2660
+ </select>
2661
+ </qc-select>
1409
2662
  </div>
1410
- </main>
1411
- <footer>
1412
- <qc-piv-footer></qc-piv-footer>
1413
- </footer>
1414
- <script src='js/qc-doc-exemple.js'></script>
1415
- </body>
1416
- </html>
2663
+ <button type="submit" class="qc-button qc-primary qc-compact">Envoyer</button>
2664
+ </form>
2665
+
2666
+
2667
+ </qc-doc-exemple>
2668
+ <script>
2669
+ const formfieldRowForm = document.getElementById("formulaire-champ-alignes");
2670
+ formfieldRowForm.addEventListener("submit", (event) => {
2671
+ event.preventDefault();
2672
+ let isValid = true;
2673
+ formfieldRowForm
2674
+ .querySelectorAll("qc-textfield[required], [required] select")
2675
+ .forEach(formfield => {
2676
+ console.log(formfield, formfield.value ?? "no value")
2677
+ if ((formfield.invalidAtSubmit ?? false)) { // textfield
2678
+ formfield.invalid = true;
2679
+ isValid = false;
2680
+ }
2681
+ if ((formfield.value === "")) { // select
2682
+ formfield.closest("qc-select").invalid = true;
2683
+ isValid = false;
2684
+ }
2685
+ })
2686
+ if (isValid) {
2687
+ const formData = new FormData(formfieldRowForm);
2688
+ let alertParts = ["Formulaire soumis avec les données suivantes :"];
2689
+ for (const [key, val] of formData.entries()) {
2690
+ alertParts.push(`${key} : ${val}`);
2691
+ }
2692
+ alert(alertParts.join("\n"));
2693
+ }
2694
+ });
2695
+ </script>
2696
+
2697
+ <h4>Documentation technique</h4>
2698
+ <p>Placer les champs à regrouper sur une seule ligne dans un div avec la classe <code>qc-formfield-row</code></p>
2699
+
2700
+
2701
+
2702
+ <hr/>
2703
+ <h2 id="toTop">Haut de page</h2>
2704
+ <p>
2705
+ Le composant <i>haut de page</i> est la flèche qui permet à l’utilisateur de revenir en haut de la
2706
+ page. Il s'affiche quand l’utilisateur commence à défiler vers le haut.
2707
+ Il disparaît quand l’utilisateur commence à défiler vers le bas.
2708
+ </p>
2709
+ <h4>Exemple</h4>
2710
+ <qc-doc-exemple caption="Présentation du composant retour en haut de page"
2711
+ code-target-id="to-top-exemple"
2712
+ >
2713
+ <qc-to-top demo="true"/>
2714
+ </qc-doc-exemple>
2715
+ <div id="to-top-exemple">
2716
+ <qc-to-top></qc-to-top>
2717
+ </div>
2718
+
2719
+ <h3>Documentation technique</h3>
2720
+
2721
+ <h4>Attributs</h4>
2722
+ <div class="table-overflow">
2723
+ <table class="qc-table qc-striped">
2724
+ <thead>
2725
+ <tr>
2726
+ <th>Nom</th>
2727
+ <th>Valeur attendue</th>
2728
+ <th>Valeur par défaut</th>
2729
+ <th>Description</th>
2730
+ </tr>
2731
+ </thead>
2732
+ <tbody>
2733
+ <tr>
2734
+ <td>text</td>
2735
+ <td>Texte</td>
2736
+ <td>Retour en haut / Back to top</td>
2737
+ <td>la valeur de l’attribut "text" de l’élément.</td>
2738
+ </tr>
2739
+ <tr>
2740
+ <td>demo</td>
2741
+ <td>"true" ou "false"</td>
2742
+ <td>false</td>
2743
+ <td>Pour utiliser le composant en démonstration uniquement.</td>
2744
+ </tr>
2745
+ </tbody>
2746
+ </table>
2747
+ </div>
2748
+ <hr/>
2749
+ <h2 id="piv-header">Bandeau d’en-tête du PIV (qc-piv-header)</h2>
2750
+
2751
+ <h3>Exemples</h3>
2752
+ <!-- TODO remplacer les aria-label des qc-doc-exemple par aria-labelby et cibler le titre -->
2753
+ <qc-doc-exemple id="pivEnteteExempleLiens"
2754
+ caption="Exemple de bandeau d’en-tête PIV de base"
2755
+ >
2756
+ <qc-piv-header alt-logo="Accédez à Québec.ca"
2757
+ join-us-url="#join-us"
2758
+ alt-language-url="#fakeEnglish"
2759
+ >
2760
+ </qc-piv-header>
2761
+ </qc-doc-exemple>
2762
+ <!-- <qc-code target-id="pivEnteteExempleLiens"></qc-code>-->
2763
+
2764
+ <qc-doc-exemple id="pivEnteteExempleRecherche"
2765
+ caption="Exemple de personnalisation des liens du bandeau d’en-tête PIV"
2766
+ >
2767
+ <qc-piv-header
2768
+ title-text="Titre du site ou du service"
2769
+ title-url="https://www.quebec.ca/"
2770
+ alt-logo="Accédez à Québec.ca"
2771
+ >
2772
+ <nav slot="links"
2773
+ aria-label="Navigation PIV">
2774
+ <ul>
2775
+ <li><a href="#fakeEnglish">English</a>
2776
+ </li>
2777
+ <li><a href="javascript:;">Nous joindre</a>
2778
+ </li>
2779
+ </ul>
2780
+ </nav>
2781
+ </qc-piv-header>
2782
+ </qc-doc-exemple>
2783
+ <!-- <qc-code target-id="pivEnteteExempleRecherche"></qc-code>-->
2784
+
2785
+ <qc-doc-exemple caption="Exemple de bandeau d’en-tête PIV avec recherche personnalisée"
2786
+
2787
+ >
2788
+ <div id="pivEnteteExempleRecherchePersonnalisee">
2789
+ <qc-piv-header title-text="Titre du site ou du service"
2790
+ alt-logo="Accédez à Québec.ca"
2791
+ enable-search="true"
2792
+ show-search="true"
2793
+ >
2794
+ <ul slot="links">
2795
+ <li><a href="#fakeEnglish">English</a>
2796
+ </li>
2797
+ <li><a href="javascript:;">Nous joindre</a>
2798
+ </li>
2799
+ </ul>
2800
+
2801
+ <form slot="search-zone"
2802
+ method="get"
2803
+ action="https://www.google.ca/search"
2804
+ >
2805
+ <qc-search-bar name="q" piv-background></qc-search-bar>
2806
+ </form>
2807
+ </qc-piv-header>
2808
+ </div>
2809
+ </qc-doc-exemple>
2810
+
2811
+
2812
+ <h3>Documentation technique</h3>
2813
+ <h4>Attributs</h4>
2814
+ <div class="table-overflow">
2815
+ <table class="qc-table qc-striped component-attributes-description">
2816
+ <thead>
2817
+ <tr>
2818
+ <th>Nom</th>
2819
+ <th>Valeur attendue</th>
2820
+ <th>Valeur par défaut</th>
2821
+ <th>Description</th>
2822
+ </tr>
2823
+ </thead>
2824
+ <tbody>
2825
+ <tr>
2826
+ <td>title-text</td>
2827
+ <td>Texte</td>
2828
+ <td>Chaîne vide</td>
2829
+ <td>Titre au milieu du bandeau (dans un hyperlien)</td>
2830
+ </tr>
2831
+ <tr>
2832
+ <td>title-url</td>
2833
+
2834
+ <td>Adresse</td>
2835
+ <td>/</td>
2836
+ <td>URL de l’hyperlien du titre</td>
2837
+ </tr>
2838
+ <tr>
2839
+ <td>logo-url</td>
2840
+ <td>Adresse</td>
2841
+ <td>/</td>
2842
+ <td>Adresse du lien du logo</td>
2843
+ </tr>
2844
+ <tr>
2845
+ <td>logo-src</td>
2846
+ <td>Adresse</td>
2847
+ <td>Adresse du logo inclus dans la trousse</td>
2848
+ <td>Adresse du logo</td>
2849
+ </tr>
2850
+ <tr>
2851
+ <td>logo-alt</td>
2852
+ <td>texte</td>
2853
+ <td>Logo du gouvernement du Québec/Logo of government of Québec</td>
2854
+ <td>Attribut « alt » de la balise img du logo</td>
2855
+ </tr>
2856
+ <tr>
2857
+ <td>alt-language-text</td>
2858
+ <td>Texte</td>
2859
+ <td>English/Français</td>
2860
+ <td>Texte du lien de changement de langue</td>
2861
+ </tr>
2862
+ <tr>
2863
+ <td>alt-language-url</td>
2864
+ <td>Adresse</td>
2865
+ <td>vide</td>
2866
+ <td>L’URL de l’autre langue. Si vide, le lien n'apparaît pas.</td>
2867
+ </tr>
2868
+ <tr>
2869
+ <td>join-us-text</td>
2870
+ <td>Texte</td>
2871
+ <td>Nous joindre/Contact us</td>
2872
+ <td>Texte du lien « Nous joindre »</td>
2873
+ </tr>
2874
+ <tr>
2875
+ <td>join-us-url</td>
2876
+ <td>Adresse</td>
2877
+ <td>Vide</td>
2878
+ <td>Adresse du lien « Nous joindre ». Si vide, le lien n'apparaît pas.</td>
2879
+ </tr>
2880
+ <tr>
2881
+ <td>go-to-content</td>
2882
+ <td>"true" ou "false"</td>
2883
+ <td>"true"</td>
2884
+ <td>Afficher ou non le lien pour aller directement au contenu.</td>
2885
+ </tr>
2886
+ <tr>
2887
+ <td>go-to-content-text</td>
2888
+ <td>Texte</td>
2889
+ <td>Passer au contenu/Skip to content</td>
2890
+ <td>Texte du lien pour passer directement au contenu.</td>
2891
+ </tr>
2892
+ <tr>
2893
+ <td>go-to-content-anchor</td>
2894
+ <td>id du 1<sup>er</sup> élément de contenu</td>
2895
+ <td>"main"</td>
2896
+ <td>Cible du lien pour passer directement au contenu.</td>
2897
+ </tr>
2898
+ <tr>
2899
+ <td>full-width</td>
2900
+ <td>"true" ou "false"</td>
2901
+ <td>"false"</td>
2902
+ <td>Affiche le bandeau en pleine largeur (classe de conteneur « qc‑container‑fluid »).</td>
2903
+ </tr>
2904
+ <tr>
2905
+ <td>enable-search</td>
2906
+ <td>"true" ou "false"</td>
2907
+ <td>"false"</td>
2908
+ <td>
2909
+ Active la recherche dans le bandeau PIV :
2910
+ <ul>
2911
+ <li style="margin-bottom: 0">le bouton de recherche en forme de loupe est alors
2912
+ affiché ;
2913
+ </li>
2914
+ <li>au clic, il affiche le formulaire de recherche.</li>
2915
+ </ul>
2916
+ </td>
2917
+ </tr>
2918
+ <tr>
2919
+ <td>show-search</td>
2920
+ <td>"true" ou "false"</td>
2921
+ <td>"false"</td>
2922
+ <td>Affiche le formulaire de recherche (normalement caché tant que le bouton de recherche n'a
2923
+ pas été pressé).
2924
+ </td>
2925
+ </tr>
2926
+
2927
+ <tr>
2928
+ <td>display-search-text</td>
2929
+ <td>Texte</td>
2930
+ <td>Cliquer pour faire une recherche / Click to search</td>
2931
+ <td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d’écran pour afficher la
2932
+ barre de recherche.
2933
+ </td>
2934
+ </tr>
2935
+ <tr>
2936
+ <td>hide-search-text</td>
2937
+ <td>Texte</td>
2938
+ <td>Masquer la barre de recherche / Hide search bar</td>
2939
+ <td>Texte du bouton de recherche (en forme de loupe) pour les lecteurs d’écran pour masquer la
2940
+ barre de recherche.
2941
+ </td>
2942
+ </tr>
2943
+ </tbody>
2944
+ </table>
2945
+ </div>
2946
+ <h4>Zones d’ajout de contenu HTML</h4>
2947
+
2948
+ <p>Ci-dessous, les zones d’ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
2949
+ <qc-doc-exemple id="qc-piv-header-slots"
2950
+ caption="Présentation des zones d’ajout de contenu dans le PIV"
2951
+ hide-code
2952
+ >
2953
+ <qc-piv-header
2954
+ style="margin-bottom: var(--qc-spacer-content-block-mb);"
2955
+ enable-search="true"
2956
+ show-search="true">
2957
+ <div slot="search-zone"
2958
+ style="border:2px dashed;padding: var(--qc-spacer-xs);">
2959
+ slot="search-zone"
2960
+ </div>
2961
+ <div slot="links"
2962
+ style="border:2px dashed;padding: var(--qc-spacer-xs);"
2963
+ >
2964
+ slot="links"
2965
+ </div>
2966
+ </qc-piv-header>
2967
+ </qc-doc-exemple>
2968
+
2969
+ <!-- <qc-code target-id="qc-piv-header-slots"></qc-code>-->
2970
+
2971
+ <hr/>
2972
+ <h2 id="piv-footer">Pied de page du PIV (qc-piv-footer)</h2>
2973
+
2974
+ <h3>Exemples</h3>
2975
+
2976
+
2977
+ <qc-doc-exemple id="piv-footer-1"
2978
+ caption="Exemple de pied de page du PIV de base">
2979
+ <qc-piv-footer>
2980
+ <nav aria-label="Navigation du pied de page">
2981
+ <ul>
2982
+ <li><a href="/">Accessibilité</a></li>
2983
+ <li><a href="/">Plan du site</a></li>
2984
+ <li><a href="/">Accès à l’information</a></li>
2985
+ <li><a href="/">Politique de confidentialité</a></li>
2986
+ <li><a href="/">Conditions d’utilisation</a></li>
2987
+ <li><a href="/">À propos de Québec.ca</a></li>
2988
+ </ul>
2989
+ </nav>
2990
+ </qc-piv-footer>
2991
+ </qc-doc-exemple>
2992
+ <!-- <qc-code target-id="piv-footer-1"></qc-code>-->
2993
+
2994
+ <qc-doc-exemple id="piv-footer-ex-2"
2995
+ caption="Exemple de pied de page du PIV personnalisé."
2996
+ >
2997
+ <qc-piv-footer
2998
+ logo-src="img/piv-MCE-theme-clair.svg"
2999
+ logo-src-dark-theme="img/piv-MCE-theme-sombre.svg"
3000
+ >
3001
+ <nav aria-label="Navigation du pied de page">
3002
+ <ul>
3003
+ <li><a href="/">Accès à l’information</a></li>
3004
+ <li><a href="/">Politique de confidentialité</a></li>
3005
+ </ul>
3006
+ </nav>
3007
+ <qc-external-link slot="copyright">
3008
+ <a
3009
+ target="_blank"
3010
+ rel="noopener"
3011
+ href="https://www.quebec.ca/droit-auteur">
3012
+ © Gouvernement du Québec, 2023
3013
+ </a>
3014
+ </qc-external-link>
3015
+ </qc-piv-footer>
3016
+ </qc-doc-exemple>
3017
+ <!-- <qc-code target-id="piv-footer-ex-2"></qc-code>-->
3018
+
3019
+ <h3>Documentation technique</h3>
3020
+
3021
+ <h4>Attributs</h4>
3022
+ <div class="table-overflow">
3023
+ <table class="qc-table qc-striped component-attributes-description">
3024
+ <thead>
3025
+ <tr>
3026
+ <th>Nom</th>
3027
+ <th>Valeur attendue</th>
3028
+ <th>Valeur par défaut</th>
3029
+ <th>Description</th>
3030
+ </tr>
3031
+ </thead>
3032
+ <tbody>
3033
+ <tr>
3034
+ <td>logo-url</td>
3035
+ <td>Adresse du lien au clic sur l’image</td>
3036
+ <td>/</td>
3037
+ <td>Cible du lien contenant le logo</td>
3038
+ </tr>
3039
+ <tr>
3040
+ <td>logo-src</td>
3041
+ <td>Le chemin de l’image en thème clair.</td>
3042
+ <td>Le chemin vers l’image dist/img/QUEBEC_couleur.svg de la trousse</td>
3043
+ <td>Adresse de l’image du pied de page en thème clair (fond transparent, texte et drapeaux en
3044
+ couleur, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
3045
+ </td>
3046
+ </tr>
3047
+ <tr>
3048
+ <td>logo-src-dark-theme</td>
3049
+ <td>Le chemin de l’image en thème sombre.</td>
3050
+ <td>Le chemin vers l’image dist/img/QUEBEC_blanc.svg de la trousse</td>
3051
+ <td>Adresse de l’image du pied de page en thème sombre (fond transparent, texte et drapeaux en
3052
+ blanc, voir <a href="#piv-footer-ex-2">l’exemple de pied de page PIV personnalisé</a>).
3053
+ </td>
3054
+ </tr>
3055
+ <tr>
3056
+ <td>logo-alt</td>
3057
+ <td>Texte</td>
3058
+ <td>
3059
+ <dl>
3060
+ <dt>Français</dt>
3061
+ <dd>Logo du gouvernement du Québec</dd>
3062
+ <dt>Anglais</dt>
3063
+ <dd>Logo of government of Québec</dd>
3064
+ </dl>
3065
+ </td>
3066
+ <td>Texte alternatif du logo pour les lecteurs d’écran</td>
3067
+ </tr>
3068
+ <tr>
3069
+ <td>logo-width</td>
3070
+ <td>Nombre</td>
3071
+ <td>139</td>
3072
+ <td>Largeur de l’image en px</td>
3073
+ </tr>
3074
+ <tr>
3075
+ <td>logo-height</td>
3076
+ <td>Nombre</td>
3077
+ <td>35</td>
3078
+ <td>Hauteur de l’image en px</td>
3079
+ </tr>
3080
+ <tr>
3081
+ <td>copyright-text</td>
3082
+ <td>Texte</td>
3083
+ <td>© Gouvernement du Québec, &lt;année en cours AAAA&gt;</td>
3084
+ <td>Texte du lien de droit d'auteur affiché dans le pied de page.</td>
3085
+ </tr>
3086
+ <tr>
3087
+ <td>copyright-url</td>
3088
+ <td>Adresse</td>
3089
+ <td>
3090
+ <dl>
3091
+ <dt>Français</dt>
3092
+ <dd>https://www.quebec.ca/droit-auteur</dd>
3093
+ <dt>Anglais</dt>
3094
+ <dd>https://www.quebec.ca/en/copyright</dd>
3095
+ </dl>
3096
+ </td>
3097
+ <td>L’adresse de la page du droit d’auteur sur quebec.ca</td>
3098
+ </tr>
3099
+ </tbody>
3100
+ </table>
3101
+ </div>
3102
+
3103
+ <qc-notice type="information">Les images du pied de page PIV doivent respecter
3104
+ <qc-external-link><a href="https://www.piv.gouv.qc.ca/fileadmin/documents/guide/section1_general.pdf">les
3105
+ normes graphiques du système d’identification visuelle.</a>. Nous vous invitons à privilégier le format
3106
+ SVG, qui permet de conserver la lisibilité de l’image en cas de zoom.
3107
+ </qc-external-link>
3108
+ </qc-notice>
3109
+
3110
+ <h4>Zones d’ajout de contenu HTML</h4>
3111
+
3112
+ <p>Ci-dessous, les zones d’ajout de contenu HTML (balise &lt;slot&gt;) délimitées en pointillé.</p>
3113
+ <qc-doc-exemple id="qc-piv-footer-slots"
3114
+ caption="Présentation des zones d’ajout de contenu du pied de page PIV">
3115
+ <qc-piv-footer>
3116
+ <div style="border:2px dashed;padding: var(--qc-spacer-xs);">
3117
+ Contenu par défaut
3118
+ </div>
3119
+ <div slot="copyright"
3120
+ style="border:2px dashed;padding: var(--qc-spacer-xs);">
3121
+ slot="copyright"
3122
+ </div>
3123
+ </qc-piv-footer>
3124
+ </qc-doc-exemple>
3125
+ <hr/>
3126
+ </div>
3127
+ </main>
3128
+ <footer>
3129
+ <qc-piv-footer></qc-piv-footer>
3130
+ </footer>
3131
+ <script src='js/qc-doc-exemple.js'></script>
3132
+ </body>
3133
+ </html>