Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Feedback: implementing Page Feedback Tool #2098

Merged
merged 2 commits into from
Aug 15, 2023
Merged

Feedback: implementing Page Feedback Tool #2098

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
529715d
Page feedback tool: Revamp
EricDunsworth Dec 6, 2022
0d81214
Feedback: implementing Page Feedback Tool
Garneauma Jan 13, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
4 changes: 2 additions & 2 deletions Gruntfile.coffee
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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:
Expand Down
4 changes: 2 additions & 2 deletions _config.yml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down
42 changes: 31 additions & 11 deletions _data/sites.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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": "feedback-en.html"
"path": "page-feedback-en.html"
},
{
"title": "Formulaire de commentaire de page",
"title": "Outil de rétroaction sur la page",
"language": "fr",
"path": "feedback-fr.html"
"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": "Report a problem",
"language": "en",
"path": "report-problem-en.html"
},
{
"title": "Signaler un problème",
"language": "fr",
"path": "report-problem-fr.html"
}
]
}
Expand Down
90 changes: 10 additions & 80 deletions components/provisional-en.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{ "title": "GCWeb home", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-en.html" }
],
"secondlevel": false,
"dateModified": "2021-01-19",
"dateModified": "2022-12-06",
"share": "true"
}
---
Expand Down Expand Up @@ -93,9 +93,16 @@ <h3>Provisional feature removal first notice</h3>
</tr>
<tr>
<th>Template <code>.gc-pg-hlpfl</code></th>
<td>"Page success widget" design pattern to let users share their experience on the page.</td>
<td>
<p>"Page success widget" design pattern to let users share their experience on the page.</p>
<p>Feature has been revised and renamed to "page feedback tool" (<code>.gc-pft</code>):</p>
<ul>
<li><a href="../sites/gc-page-feedback/gc-page-feedback-en.html">Page feedback tool - Canada.ca site functionality</a></li>
<li><a href="../sites/gc-page-feedback/gc-page-feedback-custom-en.html">Page feedback tool with custom parameters - Canada.ca site functionality</a></li>
</ul>
</td>
<td>v7.0</td>
<td></td>
<td>Stable (vX.X.X) (TODO)</td>
</tr>
<tr>
<th>Plugin <code>.wb-chtwzrd</code></th>
Expand Down Expand Up @@ -402,80 +409,3 @@ <h3 id="icon-warning">Icon warning color</h3>
<span class="glyphicon glyphicon-warning-sign provisional icon-warning-light mrgn-rght-md"></span> With "provisional icon-warning-light" class
</p>
</div>
<h3 id="gc-pg-hlpfl">Page success widget</h3>
<p>Planned to eventually replace Report a problem. Uses multiple features: <code>wb-postback</code> and <code>data-wb-doaction</code> plugins, as well as <code>nojs-*</code> styles and Font Awesome.</p>
<div class="row row-no-gutters mrgn-tp-xl">
<div class="col-sm-7 col-lg-6">
<section class="provisional gc-pg-hlpfl">
<div class="well mrgn-bttm-0">
<form id="gc-pg-hlpfl-frm" action="index-en.html" method="post" autocomplete="off" class="provisional wb-postback" data-wb-postback="{&quot;success&quot;:&quot;.gc-pg-hlpfl-thnk&quot;,&quot;content&quot;:&quot;#gc-pg-hlpfl-frm&quot;}">
<input type="hidden" name="pageTitle" value="Provisional functionality - GCWeb theme">
<input type="hidden" name="submissionPage" value="https://wet-boew.github.io/themes-dist/GCWeb/provisional-en.html">
<input type="hidden" name="tid" value="1234">
<input type="hidden" name="auke" value="5678">
<div class="gc-pg-hlpfl-btn">
<div class="row row-no-gutters">
<div class="col-xs-12 col-sm-7 mrgn-tp-sm">
<h2 class="mrgn-tp-sm h5">Did you find what you were looking for?</h2>
</div>
<div class="col-xs-8 col-sm-5 text-right">
<button type="submit" name="helpful" value="Yes" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-primary mrgn-lft-sm nojs-hide" data-wb-doaction="[
{&quot;action&quot;:&quot;removeClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-no&quot;,&quot;class&quot;:&quot;nojs-show&quot;},
{&quot;action&quot;:&quot;addClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-btn&quot;,&quot;class&quot;:&quot;hide&quot;}
]">No</button>
</div>
</div>
</div>
<p class="h3 hidden nojs-show">If not, tell us why:</p>
<div class="gc-pg-hlpfl-no nojs-show">
<fieldset>
<legend class="h4 mrgn-tp-0 mrgn-bttm-md">What was wrong?</legend>
<div class="radio">
<label>
<input name="problem" id="problem01" type="radio" value="The answer I need is missing">
The answer I need is missing
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem02" type="radio" value="The information isn’t clear">
The information isn’t clear
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem03" type="radio" value="I’m not in the right place">
I’m not in the right place
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem04" type="radio" value="Something is broken or incorrect">
Something is broken or incorrect
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem05" type="radio" value="Other reason">
Other reason
</label>
</div>
</fieldset>
<label for="problem06">Please provide more details</label>
<p class="small">
<strong>(Don’t include any personal information)</strong>
<br>
<span class="small">Maximum 300 characters</span>
</p>
<textarea name="details" id="problem06" class="full-width" maxlength="300"></textarea>
<button type="submit" name="helpful" value="No" class="btn btn-primary mrgn-tp-md mrgn-bttm-sm">Submit</button>
</div>
</form>
<div class="gc-pg-hlpfl-thnk hide">
<p class="h6 mrgn-tp-sm mrgn-bttm-sm"><span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"></span> Thank you for your feedback</p>
</div>
</div>
</section>
</div>
</div>
91 changes: 10 additions & 81 deletions components/provisional-fr.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
{ "title": "Accueil GCWeb", "link": "https://wet-boew.github.io/themes-dist/GCWeb/index-fr.html" }
],
"secondlevel": false,
"dateModified": "2021-01-19",
"dateModified": "2022-12-06",
"share": "true"
}
---
Expand Down Expand Up @@ -95,9 +95,16 @@ <h3>Provisional feature removal first notice</h3>
</tr>
<tr>
<th>Gabarit <code>.gc-pg-hlpfl</code></th>
<td>"Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page.</td>
<td>
<p>"Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page.</p>
<p>Cette fonctionnalité a été révisée et renommée «&nbsp;outil de rétroaction sur la page&nbsp;» (<code>.gc-pft</code>)&nbsp;:</p>
<ul>
<li><a href="../sites/gc-page-feedback/gc-page-feedback-fr.html">Outil de rétroaction sur la page - Fonctionnalité du site Canada.ca</a></li>
<li><a href="../sites/gc-page-feedback/gc-page-feedback-custom-fr.html">Outil de rétroaction sur la page avec paramètres personnalisés - Fonctionnalité du site Canada.ca</a></li>
</ul>
</td>
<td>v7.0</td>
<td></td>
<td>Stable (vX.X.X) (TODO)</td>
</tr>
<tr>
<th>Plugin <code>.wb-chtwzrd</code></th>
Expand Down Expand Up @@ -408,81 +415,3 @@ <h3 id="#icon-warning">Icon warning color</h3>
</p>
</div>
</div>
<h3 id="gc-pg-hlpfl">Widget succès de page</h3>
<p>Est prévu pour remplacer Signaler un problème ou une erreur sur cette page éventuellement. Utilises plusieurs fonctionnalités&nbsp;: les plugiciels <code>wb-postback</code> et <code>data-wb-doaction</code>, ainsi que les styles <code>nojs-*</code> puis Font Awesome.</p>
<div class="row row-no-gutters mrgn-tp-xl">
<div class="col-sm-7 col-lg-6">
<section class="provisional gc-pg-hlpfl">
<div class="well mrgn-bttm-0">
<form id="gc-pg-hlpfl-frm" action="index-fr.html" method="get" autocomplete="off" class="provisional wb-postback" data-wb-postback="{&quot;success&quot;:&quot;.gc-pg-hlpfl-thnk&quot;,&quot;content&quot;:&quot;#gc-pg-hlpfl-frm&quot;}">
<input type="hidden" name="pageTitle" value="Fonctionalités provisoires - Thème de GCWeb">
<input type="hidden" name="submissionPage" value="https://wet-boew.github.io/themes-dist/GCWeb/provisional-fr.html">
<input type="hidden" name="tid" value="1234">
<input type="hidden" name="auke" value="5678">
<div class="gc-pg-hlpfl-btn">
<div class="row row-no-gutters">
<div class="col-xs-12 col-sm-7 mrgn-tp-sm">
<h2 class="mrgn-tp-sm h5">Avez-vous trouvé ce que vous cherchiez?</h2>
</div>
<div class="col-xs-8 col-sm-5 text-right">
<button type="submit" name="helpful" value="Yes" class="btn btn-primary">Oui</button>
<button type="button" class="btn btn-primary mrgn-lft-sm nojs-hide" data-wb-doaction="[
{&quot;action&quot;:&quot;removeClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-no&quot;,&quot;class&quot;:&quot;nojs-show&quot;},
{&quot;action&quot;:&quot;addClass&quot;,&quot;source&quot;:&quot;.gc-pg-hlpfl-btn&quot;,&quot;class&quot;:&quot;hide&quot;}
]">Non</button>
</div>
</div>
</div>
<p class="h3 hidden nojs-show">Sinon, dites nous pourquoi&nbsp;:</p>
<div class="gc-pg-hlpfl-no nojs-show">
<fieldset>
<legend class="h4 mrgn-tp-0 mrgn-bttm-md">Qu’est-ce qui n’allait pas?</legend>
<div class="radio">
<label>
<input name="problem" id="problem01" type="radio" value="I can’t find what I’m looking for">
La réponse dont j’ai besoin n’est pas là
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem02" type="radio" value="The information isn’t clear">
L'information n'est pas claire
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem03" type="radio" value="I’m not in the right place">
Je ne suis pas au bon endroit
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem04" type="radio" value="Something is broken or incorrect">
Quelque chose est brisé ou incorrect
</label>
</div>
<div class="radio">
<label>
<input name="problem" id="problem05" type="radio" value="Other reason">
Autre raison
</label>
</div>
</fieldset>
<label for="problem06">Veuillez fournir plus de détails</label>
<p class="small">
<strong>(N’incluez pas d’information personnelle)</strong>
<br>
<span class="small">Maximum de 300 caractères</span>
</p>
<textarea name="details" id="problem06" class="full-width" maxlength="300"></textarea>
<br>
<button type="submit" name="helpful" value="No" class="btn btn-primary mrgn-tp-md mrgn-bttm-sm">Soumettre</button>
</div>
</form>
<div class="gc-pg-hlpfl-thnk hide">
<p class="h6 mrgn-tp-sm mrgn-bttm-sm"><span class="far fa-check-circle text-success mrgn-rght-sm" aria-hidden="true"></span> Merci de vos commentaires</p>
</div>
</div>
</section>
</div>
</div>
2 changes: 1 addition & 1 deletion package-lock.json
View file
Open in desktop

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

33 changes: 33 additions & 0 deletions sites/feedback/_base.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,33 @@
/*
@title: Page feedback tool - Base
*/

#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;
}

/* Make the legend full width */
.nojs-col-sm-12 {
@extend .col-sm-12;
}

/* Left-align the legend and yes/no buttons */
.nojs-text-left {
text-align: left;
}
}
}
7 changes: 7 additions & 0 deletions sites/feedback/_print.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,7 @@
/*
@title: Page feedback tool - Print view
*/

#gc-pft {
display: none !important;
}
16 changes: 16 additions & 0 deletions sites/feedback/_screen-md-min.scss
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,16 @@
/*
* Share/feedback-specific overrides (medium view and over)
*/

/* 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 ) {
+ {
.wb-share-inited {
margin-top: 16px;
}
}
}
}
}
Loading
Loading