Feedback: implementing Page Feedback Tool

_config.yml

@@ -6,8 +6,8 @@ website: "https://wet-boew.github.io/GCWeb/" # URL of your public facing website
 global:
   lang: fr
   feedbackPath:
-    en: "/sites/feedback/ajax/report-problem-en.html"
-    fr: "/sites/feedback/ajax/report-problem-fr.html"
+    en: "https://wet-boew.github.io/GCWeb/sites/feedback/ajax/page-feedback-en.html"
+    fr: "https://wet-boew.github.io/GCWeb/sites/feedback/ajax/page-feedback-fr.html"
   # contextualFooter: # Contextual footer settings
   #   title:
   #     fr: "Référence d'implémentation de Canada.ca"

_data/sites.json

@@ -171,39 +171,69 @@
 		"modified": "dct:modified"
 	},
 	"title": {
-		"en": "Report a problem (RAP) - Feedback",
-		"fr": "Signaler un problème (SUP) - Commentaires"
+		"en": "Feedback area",
+		"fr": "Zone de rétroaction"
 	},
 	"description": {
-		"en": "Documentation on how to use the page feedback form.",
-		"fr": "Documentation sur l'utilisation de formulaire de commentaires de page."
+		"en": "Documentation on how to use the elements of the feedback area.",
+		"fr": "Documentation sur l'utilisation des éléments de la zone commentaires."
 	},
-	"modified": "2022-04-26",
+	"modified": "2023-01-10",
 	"componentName": "feedback",
 	"status": "stable",
 	"pages": {
 		"docs": [
 			{
-				"title": "Documentation for Page feedback form",
+				"title": "Documentation for the feedback area",
 				"language": "en",
 				"path": "feedback-docs-en.html"
 			},
 			{
-				"title": "Documentation pour formulaire de commentaire de page",
+				"title": "Documentation pour la zone de rétroaction",
 				"language": "fr",
 				"path": "feedback-docs-fr.html"
 			}
 		],
 		"examples": [
 			{
-				"title": "Page feedback form",
+				"title": "Page feedback tool",
+				"language": "en",
+				"path": "page-feedback-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page",
+				"language": "fr",
+				"path": "page-feedback-fr.html"
+			},
+			{
+				"title": "Page feedback tool with contact link",
+				"language": "en",
+				"path": "page-feedback-contact-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page avec lien de contact",
+				"language": "fr",
+				"path": "page-feedback-contact-fr.html"
+			},
+			{
+				"title": "Page feedback tool without comment",
+				"language": "en",
+				"path": "page-feedback-no-form-en.html"
+			},
+			{
+				"title": "Outil de rétroaction sur la page sans commentaire",
+				"language": "fr",
+				"path": "page-feedbac-no-formk-fr.html"
+			},
+			{
+				"title": "Report a problem",
 				"language": "en",
-				"path": "feedback-en.html"
+				"path": "report-problem-en.html"
 			},
 			{
-				"title": "Formulaire de commentaire de page",
+				"title": "Signaler un problème",
 				"language": "fr",
-				"path": "feedback-fr.html"
+				"path": "report-problem-fr.html"
 			}
 		]
 	}
@@ -344,50 +374,6 @@
 		]
 	}
 }
-,{
-	"@context": {
-		"@version": 1.1,
-		"dct": "http://purl.org/dc/terms/",
-		"title": { "@id": "dct:title", "@container": "@language" },
-		"description": { "@id": "dct:description", "@container": "@language" },
-		"modified": "dct:modified"
-	},
-	"title": {
-		"en": "Page feedback tool",
-		"fr": "Outil de rétroaction sur la page"
-	},
-	"description": {
-		"en": "Page feedback tool for Canada.ca",
-		"fr": "Outil de rétroaction sur la page pour Canada.ca"
-	},
-	"modified": "2022-12-06",
-	"componentName": "gc-page-feedback",
-	"status": "stable",
-	"pages": {
-		"examples": [
-			{
-				"title": "Page feedback tool",
-				"language": "en",
-				"path": "gc-page-feedback-en.html"
-			},
-			{
-				"title": "Outil de rétroaction sur la page",
-				"language": "fr",
-				"path": "gc-page-feedback-fr.html"
-			},
-			{
-				"title": "Page feedback tool with custom parameters",
-				"language": "en",
-				"path": "gc-page-feedback-custom-en.html"
-			},
-			{
-				"title": "Outil de rétroaction sur la page avec paramètres personnalisés",
-				"language": "fr",
-				"path": "gc-page-feedback-custom-fr.html"
-			}
-		]
-	}
-}
 ,{
 	"@context": {
 		"@version": 2.0,

sites/gc-page-feedback/_base.scss → 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;

sites/gc-page-feedback/_print.scss → sites/feedback/_print.scss

@@ -3,5 +3,5 @@
  */
 
 .gc-pft {
-	@extend %gcweb-print-display-none-important;
+	display: none !important;
 }

sites/feedback/ajax/deprecated/report-problem-v1-en.html

@@ -0,0 +1,57 @@
+<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="gc-rprt-prblm">
+				<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
+					<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>
+				</div>
+				<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl 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>
+			</div>
+		</details>
+	</div>
+</div>