Error: The page feedback tool only can only be activated in pages located at "sites/gc-page-feedback/*.html".
-{%- endif -%} diff --git a/_includes/page-details/footer.html b/_includes/page-details/footer.html deleted file mode 100644 index cad6a7932e..0000000000 --- a/_includes/page-details/footer.html +++ /dev/null @@ -1,45 +0,0 @@ - - diff --git a/package-lock.json b/package-lock.json index 39ec8602c9..feebd34906 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1573,7 +1573,7 @@ "code-prettify": { "version": "0.1.0", "resolved": "https://registry.npmjs.org/code-prettify/-/code-prettify-0.1.0.tgz", - "integrity": "sha512-tNOWwXoF3ycqtvLCGPLYds2hKekmZfsPWinbRcLk6BBHBaSf+v+HJOvfg33VfVzYzvQ6zmVq+WO88oKweiJSQg==" + "integrity": "sha1-RocMyMGlDQm61TmzOpg9vUqjSx4=" }, "coffeescript": { "version": "2.5.1", @@ -2362,7 +2362,7 @@ "es5-shim": { "version": "2.3.0", "resolved": "https://registry.npmjs.org/es5-shim/-/es5-shim-2.3.0.tgz", - "integrity": "sha512-lqeBVvMTAbQwqOSVMJbhE/ykQ2tQm5so3tFsEc9fRsN8sxde/4o74WMDPKF/u9SY/d900D59ccra5PhKZI5hIw==" + "integrity": "sha1-kCG8UK1Nmj5TkwjuvTRDcgNVUAM=" }, "es6-iterator": { "version": "2.0.3", @@ -5886,7 +5886,7 @@ "html5shiv": { "version": "3.7.3", "resolved": "https://registry.npmjs.org/html5shiv/-/html5shiv-3.7.3.tgz", - "integrity": "sha512-SZwGvLGNtgp8GbgFX7oXEp8OR1aBt5LliX6dG0kdD1kl3KhMonN0QcSa/A3TsTgFewaGCbIryQunjayWDXzxmw==" + "integrity": "sha1-14qEo2e8uacQEA1XgCw4ewhGMdI=" }, "htmlparser2": { "version": "3.10.1", @@ -6546,7 +6546,7 @@ "jquery": { "version": "2.2.4", "resolved": "https://registry.npmjs.org/jquery/-/jquery-2.2.4.tgz", - "integrity": "sha512-lBHj60ezci2u1v2FqnZIraShGgEXq35qCzMv4lITyHGppTnA13rwR0MgwyNJh9TnDs3aXUvd1xjAotfraMHX/Q==" + "integrity": "sha1-LInWiJterFIqfuoywUUhVZxsvwI=" }, "jquery-validation": { "version": "1.19.5", @@ -6666,7 +6666,7 @@ "jsonpointer.js": { "version": "0.4.0", "resolved": "https://registry.npmjs.org/jsonpointer.js/-/jsonpointer.js-0.4.0.tgz", - "integrity": "sha512-2bf/1crAmPpsmj1I6rDT6W0SOErkrNBpb555xNWcMVWYrX6VnXpG0GRMQ2shvOHwafpfse8q0gnzPFYVH6Tqdg==" + "integrity": "sha1-ACyxI/dnqv3rAZYTLOXE+ZQcyro=" }, "jsprim": { "version": "1.4.1", @@ -7414,7 +7414,7 @@ "mgrs": { "version": "0.0.0", "resolved": "https://registry.npmjs.org/mgrs/-/mgrs-0.0.0.tgz", - "integrity": "sha512-YQm8HnF5Ty7EH+X+Pn9h8P4tdE7Jcyvm6RJ6Ed8HdyTZIZQ5yMa7apQQF58KMfC7wKFaBbtyGBAcTWBAfeHchw==" + "integrity": "sha1-qqK0gpMXv4ERipYNMlbgbdlnS40=" }, "micromatch": { "version": "3.1.10", @@ -8719,7 +8719,7 @@ "proj4": { "version": "2.3.3", "resolved": "https://registry.npmjs.org/proj4/-/proj4-2.3.3.tgz", - "integrity": "sha512-ZmXyIEcq1+fQROkr92rFdXLTPZyBFtcxyagu1cVSFtPfK8MOcctakofmAzHDovut2/UIZpzVqMVX69rAly4/Uw==", + "integrity": "sha1-SWp2hXivQ55Gd6CFpjmh8ZjLvc0=", "requires": { "mgrs": "0.0.0" } diff --git a/sites/gc-page-feedback/_base.scss b/sites/feedback/_base.scss similarity index 63% rename from sites/gc-page-feedback/_base.scss rename to sites/feedback/_base.scss index 10692aba5a..2c9336d52e 100644 --- a/sites/gc-page-feedback/_base.scss +++ b/sites/feedback/_base.scss @@ -2,10 +2,21 @@ @title: Page feedback tool - Base */ -/* In noscript/basic HTML mode... */ -.no-js, -.wb-disable { - .gc-pft { +#gc-pft { + details { + margin-bottom: 15px; + margin-top: 0; + } + + .gc-pft-no { + details summary { + font-weight: $bold-weight; + } + } + + /* In noscript/basic HTML mode... */ + .no-js &, + .wb-disable & { /* Disable row gutters (default selector isn't specific-enough) */ .row-no-gutters { @extend .row-no-gutters; diff --git a/sites/gc-page-feedback/_print.scss b/sites/feedback/_print.scss similarity index 57% rename from sites/gc-page-feedback/_print.scss rename to sites/feedback/_print.scss index 5f9c4031db..b206302f22 100644 --- a/sites/gc-page-feedback/_print.scss +++ b/sites/feedback/_print.scss @@ -3,5 +3,5 @@ */ .gc-pft { - @extend %gcweb-print-display-none-important; + display: none !important; } diff --git a/sites/gc-page-feedback/_screen-sm-min.scss b/sites/feedback/_screen-sm-min.scss similarity index 100% rename from sites/gc-page-feedback/_screen-sm-min.scss rename to sites/feedback/_screen-sm-min.scss diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-en.html b/sites/feedback/ajax/deprecated/report-problem-v1-en.html new file mode 100644 index 0000000000..21a260c3da --- /dev/null +++ b/sites/feedback/ajax/deprecated/report-problem-v1-en.html @@ -0,0 +1,57 @@ +This page feedback form is using analytics data attributes.
-<div data-ajax-replace="ajax/report-problem-aa-en.html">
- <div class="row row-no-gutters">
- <div class="col-sm-9 col-md-6 col-lg-5">
- <a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
- </div>
- </div>
-</div>Ce formulaire de commentaires de page utilise des attributs de données analytiques.
-<div data-ajax-replace="ajax/report-problem-aa-fr.html">
- <div class="row row-no-gutters">
- <div class="col-sm-11 col-md-7 col-lg-6">
- <a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
- </div>
- </div>
-</div>Displays the Page feedback form
+Provide feedback on any given page through a form.
+There is no evaluation and report available for this component.
+ +This component supports the following variants:
All variants are comprised of two sub-components:
+To show the page feedback form, create a <div> with the following data attribute: data-ajax-replace="ajax/report-problem-en.html".
For the basic HTML version, a link element should be created inside a <div> that points to the report a problem form page: <div><a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a></div>
For more information about Data Ajax plugin, please visit Data Ajax documentation page
+<div> with the following data attributes:
+ data-ajax-replace="ajax/page-feedback-en.html"data-feedback-theme="[Text defining the theme of your page]"data-feedback-section="[Text defining the section where your page resides]"<div> that points to the report a problem form page: <div><a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a></div>.<meta name="dcterms.creator" content="[Department name]">For more information about Data Ajax plugin, please visit Data Ajax documentation page.
-There is no evaluation and report available for this component.
+To apply this variant's optional attributes on any given page, you will need to do the following in the page's front-matter:
+feedbackData to an object containing the following customizable strings:
+ section: to define the section where your page resides.theme: to define the theme of your page.For example:
+"feedbackData": {
+ "theme": "Theme",
+ "section": "Section"
+}<div> with the following data attributes:
+ data-ajax-replace="ajax/page-feedback-contact-en.html"data-feedback-link="[Contact link text]"data-feedback-url="[Contact link URL]"data-feedback-theme="[Text defining the theme of your page]"data-feedback-section="[Text defining the section where your page resides]"<div> that points to the report a problem form page: <div><a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a></div>.<meta name="dcterms.creator" content="[Department name]">For more information about Data Ajax plugin, please visit Data Ajax documentation page.
+ +To apply this variant on any given page, you will need to do the following in the page's front-matter:
+feedbackPath to "ajax/page-feedback-contact-en.html"feedbackContact to an object containing the following customizable strings:
+ link: to define the contact link's text.url: to define the contact link's URL.feedbackData to an object containing the following customizable strings:
+ section: to define the section where your page resides.theme: to define the theme of your page.For example:
+"feedbackPath": "ajax/page-feedback-contact-en.html",
+"feedbackContact": {
+ "link": "Contact link",
+ "url": "https://canada.ca"
+},
+"feedbackData": {
+ "theme": "Theme",
+ "section": "Section"
+}Here is a list of changes that happened since the previous iteration:
| CSS Class | -Template | -Visual rendering | -Schema | +Breaking | +
+
|
+
|---|---|---|---|---|---|
| Additions | +n/a | ||||
| n.a. | -Version 2.0 | -n.a. | -n.a. | +Fixes | +n/a |
Template migration notes
-The html inserted by the Data Ajax plugin can be found on the following page: https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-en.html.
-<div data-ajax-replace="ajax/report-problem-en.html">
- <div class="row row-no-gutters">
- <div class="col-sm-9 col-md-6 col-lg-5">
- <a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
- </div>
- </div>
-</div><details class="brdr-0">
- <summary class="btn btn-default text-center">Report a problem on this page</summary>
- <div class="well row">
- <div class="gc-rprt-prblm">
- <div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" id="wb-auto-4">
- { feedback form }
- </div>
- <div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" id="wb-auto-5">
- <h3>Thank you for your help!</h3>
- <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p>
- </div>
- </div>
- </div>
-</details>Implemented ajax files reference
+<div> with the following data attribute: data-ajax-replace="ajax/report-problem-en.html".<div> that points to the report a problem form page: <div><a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a></div>.<div class="row row-no-gutters"> - <div class="col-sm-9 col-md-6 col-lg-5"> - <details class="brdr-0"> - <summary class="btn btn-default text-center">Report a problem on this page</summary> - <div class="well row"> - <div class="gc-rprt-prblm"> - <div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl"> - <form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" - data-wb-postback='{ - "success": ".success-message", - "failure": ".failure-message"}' - data-wb-jsonmanager='{ - "name": "rap", - "extractor": [ - { "interface": "referer", "path": "externalReferer" }, - { "selector": "title", "path": "pageTitle" }, - { "interface": "locationHref", "path": "submissionPage" }, - { "selector": "html", "attr": "lang", "path": "lang" }, - { "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" }, - { "selector": "meta[name=\"dcterms.subject\"]", "attr": "content", "path": "subject" } - ] - }'> - <div data-wb-json='{ - "url": "#[rap]", - "mapping": [ - { "selector": "input", "attr": "name", "value": "/@id" }, - { "selector": "input", "attr": "value", "value": "/@value" } - ] - }'> - <template> - <input type="hidden" name=" value=" /> - </template> - </div> - <fieldset> - <legend> - <span class="field-name">Please select all that apply:</span> - </legend> - <div class="checkbox"> - <label for="problem1"> - <input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working - </label> - <input name="problem1" type="hidden" value="> - </div> - <div class="checkbox"> - <label for="problem2"> - <input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake - </label> - <input name="problem2" type="hidden" value="> - </div> - <div class="checkbox"> - <label for="problem3"> - <input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing - </label> - <input name="problem3" type="hidden" value="> - </div> - <div class="checkbox"> - <label for="problem4"> - <input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong - </label> - <input name="problem4" type="hidden" value="> - </div> - <div class="checkbox"> - <label for="problem5"> - <input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account - </label> - <input name="problem5" type="hidden" value="> - </div> - <div class="checkbox"> - <label for="problem11"> - <input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for - </label> - <input name="problem11" type="hidden" value="> - </div> - <div class="checkbox"> - <label for="problem12"> - <input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list - </label> - <input name="problem12" type="hidden" value="> - </div> - </fieldset> - <button type="submit" class="btn btn-primary">Submit</button> - </form> - </div> - <div class="success-message hide"> - <h3>Thank you for your help!</h3> - <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p> - </div> - <p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p> - </div> - </div> - </details> - </div> +avec l'attribut de données suivant :For more information about Data Ajax plugin, please visit Data Ajax documentation page.
+++ +Adobe Analytics implementation
+To implement Adobe Analytics in the Report a problem form, simply add the attribute
+data-gc-analytics-rapto every checkbox with the value being the same as the current language's label, followed by a dash and followed by the other language's label.For example:
++<div class="checkbox"> + <label for="problem2"> + <input name="problem2" id="problem2" type="checkbox" value="Yes" data-gc-analytics-rap="It has a spelling mistake-Il y a une erreur d'orthographe ou de grammaire">It has a spelling mistake + </label> + <input name="problem2" type="hidden" value=""> </div>Hidden input fields
+The Report a problem variant leverages JSON Manager and Data JSON to get information about the page and generate hidden input fields in the form.
+
Here is the list of tags that need to be present in the page:
++
+ +- +
+<meta name="dcterms.creator" content="[Department name]">
+ Where [Department name] is a department name from canada.ca controlled vocabulary, i.e.:gc:institutions/service-canada+- +
<meta name="dcterms.subject" content="[The subject of the page]">GCWeb Jekyll specific
+To apply this variant on any given page, you will need to set the variable
-feedbackPathto"ajax/report-problem-en.html"in the page's front-matter or in the site configurations (_config.yml).Previous versions
+Code sample
+{%- highlight html -%} +++{%- endhighlight -%}+ ++-+ +Version 3.0
-+<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" > - <fieldset> - <legend> - <span class="field-name">Please select all that apply:</span> - </legend> - <div class="checkbox"> - <label for="problem1"> - <input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working - </label> - <input name="problem1" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem2"> - <input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake - </label> - <input name="problem2" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem3"> - <input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing - </label> - <input name="problem3" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem4"> - <input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong - </label> - <input name="problem4" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem5"> - <input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account - </label> - <input name="problem5" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem11"> - <input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for - </label> - <input name="problem11" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem12"> - <input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list - </label> - <input name="problem12" type="hidden" value=""> - </div> - </fieldset> - <strong><button type="submit" class="btn btn-primary">Submit</button></strong> - </form> - <div class="success-message hide"> - <h3>Thank you for your help!</h3> - <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p> - </div> - <p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>Ajaxed-in content
+ {%- highlight html -%} + {%- include_relative ajax/report-problem-en.html -%} + {%- endhighlight -%}Previous iterations
+-+ +Version 2.0
-+<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" > - <fieldset> - <legend> - <span class="field-name">Please select all that apply:</span> - </legend> - <div class="checkbox"> - <label for="problem1"> - <input name="problem1" id="problem1" type="checkbox" value="Yes" >A link, button or video is not working - </label> - <input name="problem1" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem2"> - <input name="problem2" id="problem2" type="checkbox" value="Yes" >It has a spelling mistake - </label> - <input name="problem2" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem3"> - <input name="problem3" id="problem3" type="checkbox" value="Yes" >Information is missing - </label> - <input name="problem3" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem4"> - <input name="problem4" id="problem4" type="checkbox" value="Yes" >Information is outdated or wrong - </label> - <input name="problem4" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem5"> - <input name="problem5" id="problem5" type="checkbox" value="Yes" >Login error when trying to access an account (e.g. My Service Canada Account) - </label> - <input name="problem5" type="hidden" value=""> - </div> - <ul> - <li class="checkbox"> - <label for="problem6a"> - <input name="problem6" id="problem6a" type="checkbox" value="Yes" >GC Key access - </label> - <input name="problem6" type="hidden" value=""> - </li> - <li class="checkbox"> - <label for="problem7"> - <input name="problem7" id="problem7" type="checkbox" value="Yes" >SecureKey Concierge (Banking Credential) access - </label> - <input name="problem7" type="hidden" value=""> - </li> - <li class="checkbox"> - <label for="problem8"> - <input name="problem8" id="problem8" type="checkbox" value="Yes" >Personal Access Code (PAC) problems or EI Access Code (AC) problems - </label> - <input name="problem8" type="hidden" value=""> - </li> - <li class="checkbox"> - <label for="problem9"> - <input name="problem9" id="problem9" type="checkbox" value="Yes" >Social Insurance Number (SIN) validation problems - </label> - <input name="problem9" type="hidden" value=""> - </li> - <li class="checkbox"> - <label for="problem10"> - <input name="problem10" id="problem10" type="checkbox" value="Yes" >Other login error not in this list - </label> - <input name="problem10" type="hidden" value=""> - </li> - </ul> - <div class="checkbox"> - <label for="problem11"> - <input name="problem11" id="problem11" type="checkbox" value="Yes" >I can't find what I'm looking for - </label> - <input name="problem11" type="hidden" value=""> - </div> - <div class="checkbox"> - <label for="problem12"> - <input name="problem12" id="problem12" type="checkbox" value="Yes" >Other issue not in this list - </label> - <input name="problem12" type="hidden" value=""> - </div> - </fieldset> - <strong><button type="submit" class="btn btn-primary">Submit</button></strong> - </form> - <div class="success-message hide"> - <h3>Thank you for your help!</h3> - <p>You will not receive a reply. For enquiries, please <a href="https://www.canada.ca/en/contact.html">contact us</a>.</p> - </div> - <p class="failure-message hide">Something went wrong. Please submit your information via an alternative method.</p>Iteration 3
+Here is a list of changes that happened since the previous iteration:
++
+ ++ +Breaking ++ ++
+- Removed login error sub-options.
+- Renamed login error option.
++ +Additions +n/a ++ +Fixes +n/a +Code sample
+ {%- highlight html -%} +++ {%- endhighlight -%} ++ +++Ajaxed-in content
+ {%- highlight html -%} + {%- include_relative ajax/deprecated/report-problem-v3-en.html -%} + {%- endhighlight -%} +-+Version 1.0
-+<form action="#"> - <fieldset> - <legend><span class="field-name">Please select all that apply:</span></legend> - <div class="checkbox"> - <label for="gc-rprt-prblm-f1"> - <input type="checkbox" name="problem1" value="Yes" id="gc-rprt-prblm-f1" />A link, button or video is not working - </label> - <input name="problem1" type="hidden" value="No" /> - </div> - <div class="checkbox"> - <label for="gc-rprt-prblm-f2"> - <input type="checkbox" name="problem2" value="Yes" id="gc-rprt-prblm-f2" />It has a spelling mistake - </label> - <input name="problem2" type="hidden" value="No" /> - </div> - <div class="checkbox"> - <label for="gc-rprt-prblm-f3"> - <input type="checkbox" name="problem3" value="Yes" id="gc-rprt-prblm-f3" />Information is missing - </label> - <input name="problem3" type="hidden" value="No" /> - </div> - <div class="checkbox"> - <label for="gc-rprt-prblm-f4"> - <input type="checkbox" name="problem4" value="Yes" id="gc-rprt-prblm-f4" />Information is outdated or wrong - </label> - <input name="problem4" type="hidden" value="No" /> - </div> - <div class="checkbox"> - <label for="gc-rprt-prblm-f5"> - <input type="checkbox" name="problem5" value="Yes" id="gc-rprt-prblm-f5" />I can't find what I'm looking for - </label> - <input name="problem5" type="hidden" value="No" /> - </div> - <div class="checkbox"> - <label for="gc-rprt-prblm-f6"> - <input type="checkbox" name="problem6" value="Yes" id="gc-rprt-prblm-f6" />Other issue not in this list - </label> - <input name="problem6" type="hidden" value="No" /> - </div> - </fieldset> - <button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Submit</button> - </form>Iteration 2
+Here is a list of changes that happened since the previous iteration:
++
+ ++ +Breaking ++ ++
+- Rework of the template to use data-ajax. Includes fallback for basic HTML version.
+- Updated form: +
++
+- Now implements wb-postback for form validation and no longer uses data-toggle on submit.
+- Added login error options (problem 5 to problem 10).
+- Added error and success messages.
++ +Additions +n/a ++ +Fixes +n/a +Code sample
+ {%- highlight html -%} +++ {%- endhighlight -%} ++ +++Ajaxed-in content
+ {%- highlight html -%} + {%- include_relative ajax/deprecated/report-problem-v2-en.html -%} + {%- endhighlight -%} ++diff --git a/sites/feedback/feedback-docs-fr.html b/sites/feedback/feedback-docs-fr.html index e2f4452235..304b663e77 100644 --- a/sites/feedback/feedback-docs-fr.html +++ b/sites/feedback/feedback-docs-fr.html @@ -1,396 +1,349 @@ --- { - "title": "Commentaires de page (SUP) - Documentation", + "title": "Zone de rétroaction - Documentation", "language": "fr", "altLangPage": "feedback-docs-en.html", - "breadcrumbs": [ - { "title": "Canada.ca", "link": "https://www.canada.ca/en.html" } - ], "secondlevel": false, - "dateModified": "2022-04-26", - "share": "true", - "feedbackPath": "ajax/report-problem-fr.html" - + "dateModified": "2023-01-10", + "share": "true" } --- -Iteration 1
+Code sample
+ {%- highlight html -%} + {%- include_relative ajax/deprecated/report-problem-v1-en.html -%} + {%- endhighlight -%}-
- Statut
- Stable
+- Version
+- 3.0.0
- Type
-- Fonctionnalité du site Canada.ca
-- Dernière révision
-- 2022-04-26
+- Fonctionnalité globale de site de Canada.ca
Objectif
-Affiche le formulaire de commentaires sur la page
+Introduction
+Objectif
+Obtenir une rétroaction des utilisateurs sur une page donnée via un formulaire.
-Exemple pratique
+Évaluation et rapport
+Il n'y a pas d'évaluation ni de rapport disponible pour cette composante.
+ +Orientation
-
+- Exemple de formulaire de commentaires de page
-- Exemple de formulaire de commentaires de page en utilisant les attributs de données analytiques
-- Exemple de formulaire de commentaires de page version 1
+- Outil de rétroaction sur la page
+- Signaler un problème sur cette page
+Variantes
+Ce composant prend en charge les variantes suivantes :
++
+- Outil de rétroaction sur la page (par défaut)
+- Outil de rétroaction sur la page avec lien de contact
+- Signaler un problème sur cette page (SUP)
+-Note
+Toutes les variantes sont composées de deux sous-composants :
++
+- Le premier est utilisé pour l'intégration sur la page.
+- Le second est le formulaire qui est inséré dynamiquement via un appel Ajax.
+Comment mettre en œuvre
+Variante 1: Outil de rétroaction sur la page (par défaut)
+Itération 1
+ +Exemple(s) pratique(s)
-
- -
Pour afficher le formulaire de commentaires de page, créez une code><div>
data-ajax-replace="ajax/report-problem-fr.html". -Pour la version HTML simplifiée, un élément de lien doit être créé qui pointe vers la page du formulaire de signalement d'un problème :
-<a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>Pour plus d'informations sur le plugiciel Data Ajax, veuillez visiter Page de documentation Data Ajax
+
<div> avec les attributs suivants :
+ data-ajax-replace="ajax/page-feedback-en.html"data-feedback-theme="[Texte définissant le thème de votre page]"data-feedback-section="[Texte définissant la section où réside votre page]"<div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a></div>.<meta name="dcterms.creator" content="[Nom du département]">Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.
+ +Pour appliquer les attributs facultatifs de cette variante sur une page donnée, vous devrez procéder comme suit dans le front-matter de la page :
+feedbackData à un objet contenant les chaînes de caractères suivantes :
+ section : pour définir la section où réside votre page.theme : pour définir le thème de votre page.Par exemple :
+"feedbackData": {
+ "theme": "Thème",
+ "section": "Section"
+}Il n'y a pas d'évaluation ni de rapport disponible pour ce composant.
+<div> avec les attributs suivants :
+ data-ajax-replace="ajax/page-feedback-contact-en.html"data-feedback-link="[Texte du lien de contact]"data-feedback-url="[URL du lien de contact]"data-feedback-theme="[Texte définissant le thème de votre page]"data-feedback-section="[Texte définissant la section où réside votre page]"<div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a></div>.<meta name="dcterms.creator" content="[Nom du département]">Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.
-| Majeurs | +
+
|
+ ||||
|---|---|---|---|---|---|
| Classe CSS | -Gabarit | -Rendu visuel | -Schéma | +Additions | +n/a |
| n.d. | -Version 2.0 | -n.d. | -n.d. | +Correctifs | +n/a |
Notes sur la migration du gabarit
-Le html inséré par le plugiciel Data Ajax se trouve sur la page suivante : https://github.com/wet-boew/GCWeb/blob/master/sites/feedback/ajax/report-problem-fr.html.
-<div data-ajax-replace="ajax/report-problem-fr.html">
- <div class="row row-no-gutters">
- <div class="col-sm-11 col-md-7 col-lg-6">
- <a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
- </div>
- </div>
-</div><details class="brdr-0">
- <summary class="btn btn-default text-center">Signaler un problème sur cette page</summary>
- <div class="well row">
- <div class="gc-rprt-prblm">
- <div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl" >
- { formulaire de commentaires }
- </div>
- <div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl hide" >
- <h3>Merci pour votre aide !</h3>
- <p>Vous ne recevrez pas de réponse. Pour toute demande, veuillez <a href="https://www.canada.ca/fr/contact.html">nous contacter</a>.</p>
- </div>
- </div>
- </div>
-</details>Référence des fichiers ajax implémentés
+<div class="row row-no-gutters"><div class="col-sm-11 col-md-7 col-lg-6">
- <details class="brdr-0">
- <summary class="btn btn-default text-center">Signaler un problème ou une erreur sur cette page</summary>
- <div class="well row">
- <div class="gc-rprt-prblm">
- <div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
- <form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback"
- data-wb-postback='{
- "success": ".success-message",
- "failure": ".failure-message"}'
- data-wb-jsonmanager='{
- "name": "rap",
- "extractor": [
- { "interface": "referer", "path": "externalReferer" },
- { "selector": "title", "path": "pageTitle" },
- { "interface": "locationHref", "path": "submissionPage" },
- { "selector": "html", "attr": "lang", "path": "lang" },
- { "selector": "meta[name=\"dcterms.creator\"]", "attr": "content", "path": "pageOwner" },
- { "selector": "meta[name=\"dcterms.subject\"]", "attr": "content", "path": "subject" }
- ]
- }'>
- <div data-wb-json='{
- "url": "#[rap]",
- "mapping": [
- { "selector": "input", "attr": "name", "value": "/@id" },
- { "selector": "input", "attr": "value", "value": "/@value" }
- ]
- }'>
- <template>
- <input type="hidden" name=" value=" />
- </template>
- </div>
- <fieldset>
- <legend>
- <span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
- </legend>
- <div class="checkbox">
- <label for="problem1">
- <input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
- </label>
- <input name="problem1" type="hidden" value=">
- </div>
- <div class="checkbox">
- <label for="problem2">
- <input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
- </label>
- <input name="problem2" type="hidden" value=">
- </div>
- <div class="checkbox">
- <label for="problem3">
- <input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
- </label>
- <input name="problem3" type="hidden" value=">
- </div>
- <div class="checkbox">
- <label for="problem4">
- <input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
- </label>
- <input name="problem4" type="hidden" value=">
- </div>
- <div class="checkbox">
- <label for="problem5">
- <input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
- </label>
- <input name="problem5" type="hidden" value=">
- </div>
- <div class="checkbox">
- <label for="problem11">
- <input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
- </label>
- <input name="problem11" type="hidden" value=">
- </div>
- <div class="checkbox">
- <label for="problem12">
- <input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
- </label>
- <input name="problem12" type="hidden" value=">
- </div>
- </fieldset>
- <button type="submit" class="btn btn-primary">Soumettre</button>
- </form>
- </div>
- <div class="success-message hide">
- <h3>Merci de votre aide!</h3>
- <p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
- </div>
- <p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>
- </div>
- </div>
- </details>
- </div>
-</div>
-<div> avec l'attribut suivant : data-ajax-replace="ajax/report-problem-fr.html".<div> qui pointe vers la page du formulaire de signalement d'un problème : <div><a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a></div>.Pour plus d'informations sur le plugin Data Ajax, veuillez visiter la page de documentation Data Ajax.
+Pour implémenter Adobe Analytics dans le formulaire Signaler un problème, ajoutez simplement l'attribut data-gc-analytics-rap à chaque case à cocher avec la valeur étant la même que le "label" de la langue actuelle, suivie d'un tiret et suivi par le "label" de l'autre langue.
Par exemple :
+<div class="checkbox">
+ <label for="problem2">
+ <input name="problem2" id="problem2" type="checkbox" value="Yes" data-gc-analytics-rap="Il y a une erreur d'orthographe ou de grammaire-It has a spelling mistake">Il y a une erreur d'orthographe ou de grammaire
+ </label>
+ <input name="problem2" type="hidden" value="">
+</div>La variante Signaler un problème utilise JSON Manager et Data JSON pour obtenir des informations sur la page et générer des champs de saisie masqués dans le formulaire.
+
Voici la liste des balises qui doivent être présentes dans la page :
+<meta name="author" content="[Nom du service]">gc:institutions/service-canada
+ <meta name="dcterms.subject" content="[Le sujet de la page]">Pour appliquer cette variante sur une page donnée, vous devrez définir la variable feedbackPath à "ajax/report-problem-fr.html" dans l'en-tête de la page ou dans les configurations du site (_config.yml).
<form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}">
- <fieldset>
- <legend>
- <span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
- </legend>
- <div class="checkbox">
- <label for="problem1">
- <input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
- </label>
- <input name="problem1" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem2">
- <input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
- </label>
- <input name="problem2" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem3">
- <input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
- </label>
- <input name="problem3" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem4">
- <input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
- </label>
- <input name="problem4" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem5">
- <input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte
- </label>
- <input name="problem5" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem11">
- <input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
- </label>
- <input name="problem11" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem12">
- <input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
- </label>
- <input name="problem12" type="hidden" value="">
- </div>
- </fieldset>
- <strong><button type="submit" class="btn btn-primary">Soumettre</button></strong>
-</form><div class="success-message hide">
- <h3>Merci de votre aide!</h3>
- <p>Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-</div>
-<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p><form action="/sites/feedback/feedback-form-destination.html" id="gc-rprt-prblm-form" class="wb-postback" data-wb-postback="{"success":".success-message","failure":".failure-message","content":".form-content"}" >
- <fieldset>
- <legend>
- <span class="field-name">Veuillez sélectionner toutes les cases qui s'appliquent :</span>
- </legend>
- <div class="checkbox">
- <label for="problem1">
- <input name="problem1" id="problem1" type="checkbox" value="Yes" >Un lien, un bouton ou une vidéo ne fonctionne pas
- </label>
- <input name="problem1" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem2">
- <input name="problem2" id="problem2" type="checkbox" value="Yes" >Il y a une erreur d'orthographe ou de grammaire
- </label>
- <input name="problem2" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem3">
- <input name="problem3" id="problem3" type="checkbox" value="Yes" >Les renseignements sont incomplets
- </label>
- <input name="problem3" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem4">
- <input name="problem4" id="problem4" type="checkbox" value="Yes" >L'information n'est plus à jour ou est erronée
- </label>
- <input name="problem4" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem5">
- <input name="problem5" id="problem5" type="checkbox" value="Yes" >Message d'erreur à l'ouverture de la session lorsque je tente d'accéder à un compte (ex. Mon dossier Service Canada)
- </label>
- <input name="problem5" type="hidden" value="">
- </div>
- <ul>
- <li class="checkbox">
- <label for="problem6a">
- <input name="problem6" id="problem6a" type="checkbox" value="Yes" >Accès CléGC
- </label>
- <input name="problem6" type="hidden" value="">
- </li>
- <li class="checkbox">
- <label for="problem7">
- <input name="problem7" id="problem7" type="checkbox" value="Yes" >Accès SecureKey Service de Concierge (justificatifs d'identité bancaires)
- </label>
- <input name="problem7" type="hidden" value="">
- </li>
- <li class="checkbox">
- <label for="problem8">
- <input name="problem8" id="problem8" type="checkbox" value="Yes" >Problème avec le Code d'accès personnel (CAP) ou avec le Code d'accès (CA) de l'assurance emploi
- </label>
- <input name="problem8" type="hidden" value="">
- </li>
- <li class="checkbox">
- <label for="problem9">
- <input name="problem9" id="problem9" type="checkbox" value="Yes" >Problème lié à la validation du numéro d'assurance sociale (NAS)
- </label>
- <input name="problem9" type="hidden" value="">
- </li>
- <li class="checkbox">
- <label for="problem10">
- <input name="problem10" id="problem10" type="checkbox" value="Yes" >Autre erreur lors de l'ouverture de session qui ne figure pas sur cette liste
- </label>
- <input name="problem10" type="hidden" value="">
- </li>
- </ul>
- <div class="checkbox">
- <label for="problem11">
- <input name="problem11" id="problem11" type="checkbox" value="Yes" >Je n'arrive pas à trouver ce que je cherche
- </label>
- <input name="problem11" type="hidden" value="">
- </div>
- <div class="checkbox">
- <label for="problem12">
- <input name="problem12" id="problem12" type="checkbox" value="Yes" >Autre problème qui ne figure pas sur cette liste
- </label>
- <input name="problem12" type="hidden" value="">
- </div>
- </fieldset>
- <strong><button type="submit" class="btn btn-primary">Soumettre</button></strong>
-</form><div class="success-message hide">
- <h3>Merci de votre aide!</h3>
- <p>Vous ne recevrez pas de réponse. Pour toute question, s'il vous plaît <a href="https://www.canada.ca/fr/contact.html">contactez-nous</a>.</p>
-</div>
-<p class="failure-message hide">Nous somme désolé, un problème est survenu lors de la soumission de votre formulaire. Veuillez nous envoyer l'information via une méthode alternative.</p>Voici une liste des changements qui se sont produits depuis l'itération précédente :
+| Majeurs | +
+
|
+
|---|---|
| Additions | +n/a | +
| Correctifs | +n/a | +
<form action="#">
- <fieldset>
- <legend><span class="field-name">Veuillez cocher toutes les réponses pertinentes :</span></legend>
- <div class="checkbox">
- <label for="gc-rprt-prblm-f1">
- <input type="checkbox" name="problem1" value="Oui" id="gc-rprt-prblm-f1" />Un lien, un bouton ou une vidéo ne fonctionne pas
- </label>
- <input name="problem1" type="hidden" value="Non" />
- </div>
- <div class="checkbox">
- <label for="gc-rprt-prblm-f2">
- <input type="checkbox" name="problem2" value="Oui" id="gc-rprt-prblm-f2" />Il y a une erreur d'orthographe ou de grammaire
- </label>
- <input name="problem2" type="hidden" value="Non" />
- </div>
- <div class="checkbox">
- <label for="gc-rprt-prblm-f3">
- <input type="checkbox" name="problem3" value="Oui" id="gc-rprt-prblm-f3" />Les renseignements sont incomplets
- </label>
- <input name="problem3" type="hidden" value="Non" />
- </div>
- <div class="checkbox">
- <label for="gc-rprt-prblm-f4">
- <input type="checkbox" name="problem4" value="Oui" id="gc-rprt-prblm-f4" />L'information n'est plus à jour ou est erronée
- </label>
- <input name="problem4" type="hidden" value="Non" />
- </div>
- <div class="checkbox">
- <label for="gc-rprt-prblm-f5">
- <input type="checkbox" name="problem5" value="Oui" id="gc-rprt-prblm-f5" />Je n'arrive pas à trouver ce que je cherche
- </label>
- <input name="problem5" type="hidden" value="Non" />
- </div>
- <div class="checkbox">
- <label for="gc-rprt-prblm-f6">
- <input type="checkbox" name="problem6" value="Oui" id="gc-rprt-prblm-f6" />Autre problème qui ne figure pas sur cette liste
- </label>
- <input name="problem6" type="hidden" value="Non" />
- </div>
- </fieldset>
- <button type="submit" class="btn btn-primary wb-toggle" data-toggle='{"stateOff": "hide", "stateOn": "show", "selector": ".gc-rprt-prblm-tggl"}'>Soumettre</button>
-</form>Here is a list of changes that happened since the previous itération:
+| Majeurs | +
+
|
+
|---|---|
| Additions | +n/a | +
| Correctifs | +n/a | +
This page feedback form leverage the version 2 of the page-details container which leverage the data ajax plugin.
-Data ajax replace links:
-The version 2 of the page-details container leverage a progressive enhancement design and that is why a link element need be created to point at the report a problem form page: <a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>. You can experience that fallback through the basic HTML version mode.
<div data-ajax-replace="ajax/report-problem-en.html">
- <div class="row row-no-gutters">
- <div class="col-sm-9 col-md-6 col-lg-5">
- <a class="btn btn-default btn-block" href="https://www.canada.ca/en/report-problem.html">Report a problem on this page</a>
- </div>
- </div>
-</div>Ce formulaire de commentaires de page exploite la version 2 du conteneur page-details qui exploite le plugiciel data ajax.
-Data ajax remplace les liens :
-La version 2 du conteneur page-details implique une conception d'amélioration progressive et c'est pourquoi un lien doit être créé pour pointer vers la page du formulaire de signalement d'un problème : <a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème sur cette page</a>. Vous pouvez faire l'expérience de ce repli via le mode de version HTML de base.
<div data-ajax-replace="ajax/report-problem-fr.html">
- <div class="row row-no-gutters">
- <div class="col-sm-11 col-md-7 col-lg-6">
- <a class="btn btn-default btn-block" href="https://www.canada.ca/fr/signaler-probleme.html">Signaler un problème ou une erreur sur cette page </a>
- </div>
- </div>
-</div>