-
Notifications
You must be signed in to change notification settings - Fork 130
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
General:
* Rename "page success widget" to "page feedback tool"
* Turn it into a site component
Jekyll:
* Change the tool into an include
* Use sub-includes for parameter/string variable declarations
* Add a pageFeedback variable to enable the tool in page templates
* Add pageFeedback sub-variables to optionally override the default values of the tool's form parameters:
* institutionopt
* themeopt
* sectionopt
* pageTitle (true re-uses the current page's title, without " - Canada.ca")
* language (true re-uses the current page's language)
* submissionPage (true re-uses the current page's URL)
* Update the page details footer include to accommodate the tool:
* Declare col-modified = "col-xs-12" only once at the beginning of variable assignments
* Support pageFeedback and prioritize it over report a problem
* Make pageFeedback take priority over noReportProblem (i.e. setting former to true and latter to false will show the page feedback tool)
SCSS:
* Add new classes (tied to the gc-pft class):
* nojs-col-sm-12
* nojs-pr-sm-0
* nojs-text-left
* Increase the share widget's top margin to make it look vertically-centered when used alongside the tool in small/medium view and over
* Depends on the has() pseudo-class
HTML:
* Rename the gc-pg-hlpfl id/class prefix to gc-pft
* Rename the gc-pg-hlpfl-btn class to gc-pft-btns ("s" suffix)
* Use a fieldset for "Did you find what you were looking for?" and its yes/no buttons
* Change "Did you find what you were looking for?" into a legend
* Improve layout:
* Remove heading classes
* Use form classes (i.e. chkbxrdio-grp, field-name and form-group)
* Increase spacing between groups of content
* Move the details field's secondary information paragraph below the field
* JS mode:
* Center-align "Did you find what you were looking for?" in extra-small view
* Vertically-center "Did you find what you were looking for?" and yes/no buttons in small view and over
* Noscript/Basic HTML mode:
* Position the yes button directly below "Did you find what you were looking for?" in all views
* Use aria-live regions to announce transition messages to screen reader users:
* "Tell us why below:" upon pressing the no button
* "Thank you for your feedback." upon pressing the yes button or submitting the no button's questionnaire
* Add aria-describedby attributes to:
* Programmatically-associate the yes button to the "If not, tell us why below:" paragraph in noscript/basic HTML mode (to make screen readers announce the no button's instructions right after the yes button)
* Programmatically-associate the secondary information paragraph to the more details field
Content:
* Add a visually-hidden "Page feedback" H3 heading
* Add a period to the end of "Thank you for your feedback"
* Add "below" to the end of "If not, tell us why:" in noscript/basic HTML mode
* Add a visually-hidden "Tell us why below:" paragraph in JS mode
* Combine "Please provide more details" and "Maximum 300 characters" into the same label
* Write all values in an "EN-FR" format, derived from labels
Demo pages:
* Add a standard demo page (pageFeedback enabled)
* Add a custom demo page (pageFeedback with sub-variables)
Provisional functionality page:
* Portray the widget as stable in the feature availability table
* Remove "page success widget" section/example
Co-authored-by: David Elisma <[email protected]>- Loading branch information
Showing
22 changed files
with
671 additions
and
179 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,12 @@ | ||
| <!-- | ||
| NOTES: | ||
| -For testing/ease of development | ||
| -Only works when pageDetails is enabled in "/sites/gc-page-feedback/*.html" | ||
| -Remove this file before merging | ||
| --> | ||
| {%- if page.dir == "/sites/gc-page-feedback/" -%} | ||
| {%- include_relative includes/css.html -%} | ||
| {%- include_relative includes/gc-page-feedback.html -%} | ||
| {%- else -%} | ||
| <p><strong>Error:</strong> The page feedback tool only can only be activated in pages located at "sites/gc-page-feedback/*.html".</p> | ||
| {%- endif -%} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,45 @@ | ||
| <!-- | ||
| NOTES: | ||
| -For testing/ease of development | ||
| -Remove this file before merging | ||
| --> | ||
| <footer class="pagedetails{% if include.addContainer %} container{% endif %}"> | ||
| <h2 class="wb-inv">{{ i18nText-pageDetails }}</h2> | ||
|
|
||
| {% assign col-modified = "col-xs-12" %} | ||
| {%- if page.pageFeedback or page.noReportProblem != true -%} | ||
| {% assign col-feedback = "col-sm-8 col-md-9 col-lg-9" %} | ||
| {%- if page.share -%} | ||
| {% assign col-share = "col-sm-4 col-md-3" %} | ||
| {%- endif -%} | ||
| {%- else -%} | ||
| {%- if page.share -%} | ||
| {% assign col-share = "col-sm-4 col-md-3 col-sm-push-8 col-md-push-9" %} | ||
| {% assign col-modified = "col-sm-6 col-md-5 col-lg-4 col-sm-pull-4 col-md-pull-3" %} | ||
| {%- endif -%} | ||
| {%- endif -%} | ||
|
|
||
| <div class="row"> | ||
| {%- if page.pageFeedback or page.noReportProblem != true -%} | ||
| <div class="{{ col-feedback }}"> | ||
| {%- if page.pageFeedback -%} | ||
| {% include gc-page-feedback/gc-page-feedback.html %} | ||
| {%- else -%} | ||
| {%- unless page.noReportProblem -%} | ||
| {% include feedback/feedback.html %} | ||
| {%- endunless -%} | ||
| {%- endif -%} | ||
| </div> | ||
| {%- endif -%} | ||
| {%- if page.share -%} | ||
| <div class="wb-share {{ col-share }}" data-wb-share='{"lnkClass": "btn btn-default btn-block"}'></div> | ||
| {%- endif -%} | ||
|
|
||
| <div class="{{ col-modified }}"> | ||
| <dl id="wb-dtmd"> | ||
| <dt>{{ i18nText-dateModified }}</dt> | ||
| <dd><time property="dateModified">{{ page.dateModified }}</time></dd> | ||
| </dl> | ||
| </div> | ||
| </div> | ||
| </footer> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,24 @@ | ||
| /* | ||
| @title: Page feedback tool - Base | ||
| */ | ||
|
|
||
| /* In noscript/basic HTML mode... */ | ||
| .no-js, | ||
| .wb-disable { | ||
| .gc-pft { | ||
| /* 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; | ||
| } | ||
| } | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| /* | ||
| @title: Page feedback tool - Print view | ||
| */ | ||
|
|
||
| .gc-pft { | ||
| @extend %gcweb-print-display-none-important; | ||
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| /* | ||
| @title: Page feedback tool - Small view and over | ||
| */ | ||
|
|
||
| /* In noscript/basic HTML mode... */ | ||
| .no-js, | ||
| .wb-disable { | ||
| .gc-pft { | ||
| /* Disable the legend's right padding */ | ||
| .nojs-pr-sm-0 { | ||
| padding-right: 0 !important; | ||
| } | ||
| } | ||
| } |
Oops, something went wrong.