Skip to content

Commit

Permalink
Minor - Merge pull request #2098 from Garneauma/WET-219
Browse files Browse the repository at this point in the history 
Feedback: implementing Page Feedback Tool

Minor - Feedback - Provisional - Add the change-set "Page Feedback Tool"
  • Loading branch information
@duboisp
duboisp authored Aug 15, 2023
2 parents fe0b5ba + 0d81214 commit f15e141
Show file tree
Hide file tree
Showing 56 changed files with 1,669 additions and 1,525 deletions.
4 changes: 2 additions & 2 deletions Gruntfile.coffee
View file
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
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
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
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
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

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
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
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
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

0 comments on commit f15e141

Please sign in to comment.