Feedback: implementing Page Feedback Tool

wet-boew · Aug 11, 2023 · a6657f5 · a6657f5
1 parent 529715d
commit a6657f5
Show file tree

Hide file tree

Showing 66 changed files with 1,588 additions and 1,936 deletions.
diff --git a/Gruntfile.coffee b/Gruntfile.coffee
@@ -557,12 +557,12 @@ module.exports = (grunt) ->
 			#	src: "_includes/settings.liquid"
 			jekyllRunLocal:
 				options:
-					banner: """{%- assign setting-resourcesBasePathTheme = "/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/<%= distFolder %>/wet-boew" -%}"""
+					banner: """{%- assign setting-resourcesBasePathTheme = "/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/<%= distFolder %>/wet-boew" -%}{%- assign setting-root = "" -%}"""
 					position: "bottom"
 				src: "<%= jekyllDist %>/_includes/settings.liquid"
 			jekyllRunDemo:
 				options:
-					banner: """{%- assign setting-resourcesBasePathTheme = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/wet-boew" -%}"""
+					banner: """{%- assign setting-resourcesBasePathTheme = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/GCWeb" -%}{%- assign setting-resourcesBasePathWetboew = "/wet-boew-demos/""" + grunt.option('branch') + """/<%= distFolder %>/wet-boew" -%}{%- assign setting-root = "/wet-boew-demos/""" + grunt.option('branch') + """ -%}"""
 					position: "bottom"
 				src: "<%= jekyllDist %>/_includes/settings.liquid"
 			jekyllRunUnminified:

diff --git a/_config.yml b/_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: "/sites/feedback/ajax/page-feedback-en.html"
+    fr: "/sites/feedback/ajax/page-feedback-fr.html"
   # contextualFooter: # Contextual footer settings
   #   title:
   #     fr: "Référence d'implémentation de Canada.ca"

diff --git a/_data/sites.json b/_data/sites.json
@@ -181,39 +181,59 @@
 		"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": "feedback-en.html"
+				"path": "page-feedback-contact-en.html"
 			},
 			{
-				"title": "Formulaire de commentaire de page",
+				"title": "Outil de rétroaction sur la page avec lien de contact",
 				"language": "fr",
-				"path": "feedback-fr.html"
+				"path": "page-feedback-contact-fr.html"
+			},
+			{
+				"title": "Report a problem",
+				"language": "en",
+				"path": "report-problem-en.html"
+			},
+			{
+				"title": "Signaler un problème",
+				"language": "fr",
+				"path": "report-problem-fr.html"
 			}
 		]
 	}
@@ -354,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,

diff --git a/_includes/gc-page-feedback/gc-page-feedback.html b/_includes/gc-page-feedback/gc-page-feedback.html
diff --git a/_includes/page-details/footer.html b/_includes/page-details/footer.html
diff --git a/package-lock.json b/package-lock.json
diff --git a/sites/gc-page-feedback/_base.scss → sites/feedback/_base.scss b/sites/gc-page-feedback/_base.scss → sites/feedback/_base.scss
@@ -2,10 +2,19 @@
   @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 {
+		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/feedback/_print.scss b/sites/feedback/_print.scss
@@ -0,0 +1,7 @@
+/*
+  @title: Page feedback tool - Print view
+ */
+
+#gc-pft {
+	display: none !important;
+}
diff --git a/sites/page-details/_screen-md-min.scss → sites/feedback/_screen-md-min.scss b/sites/page-details/_screen-md-min.scss → sites/feedback/_screen-md-min.scss
@@ -5,10 +5,10 @@
 /* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
 .pagedetails {
 	div {
-		&:has( .gc-pft ) {
+		&:has( #gc-pft ) {
 			+ {
 				.wb-share-inited {
-					margin-top: 21px;
+					margin-top: 16px;
 				}
 			}
 		}

diff --git a/sites/page-details/_screen-sm-min.scss → ...back/_screen-sm-min-to-screen-sm-max.scss b/sites/page-details/_screen-sm-min.scss → ...back/_screen-sm-min-to-screen-sm-max.scss
@@ -5,7 +5,7 @@
 /* Add a larger top margin on the share button (only if its plugin has initialized) if adjacent to the page feedback tool. */
 .pagedetails {
 	div {
-		&:has( .gc-pft ) {
+		&:has( #gc-pft ) {
 			+ {
 				.wb-share-inited {
 					margin-top: 29px;

diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-en.html b/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>
diff --git a/sites/feedback/ajax/deprecated/report-problem-v1-fr.html b/sites/feedback/ajax/deprecated/report-problem-v1-fr.html
@@ -0,0 +1,57 @@
+<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="gc-rprt-prblm">
+				<div class="gc-rprt-prblm-frm gc-rprt-prblm-tggl">
+					<form action="#">
+						<fieldset>
+							<legend><span class="field-name">Veuillez cocher toutes les réponses pertinentes&nbsp;:</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>
+				</div>
+				<div class="gc-rprt-prblm-thnk gc-rprt-prblm-tggl 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>
+			</div>
+		</details>
+	</div>
+</div>
diff --git a/...s/feedback/ajax/report-problem-v2-en.html → ...ajax/deprecated/report-problem-v2-en.html b/...s/feedback/ajax/report-problem-v2-en.html → ...ajax/deprecated/report-problem-v2-en.html
diff --git a/...s/feedback/ajax/report-problem-v2-fr.html → ...ajax/deprecated/report-problem-v2-fr.html b/...s/feedback/ajax/report-problem-v2-fr.html → ...ajax/deprecated/report-problem-v2-fr.html