Language selection

Search

Provisional functionality - GCWeb theme

Unstable feature

To be used at your own risk. All functionalities described below can be removed in any subsequent minor/major release and are excluded from the GCWeb public API.

Learn more about the design decision around provisional features.

The documentation and/or working examples for those features could be incomplete or not available.

On this page

Feature availability

The following table describes until which version of GCWeb each provisional feature will be available. The features' availability will be re-evaluated at every release. A withdrawn provisional feature would be notified one version in advance.

.experimental depricated

.experimental is now deprecated and it will not be supported in 6 months. It has to be replaced by .provisional

Status description
<not specified>
Provisional
Withdrawn
The feature are not available
Supported
The feature are included and supported by the GCWeb public API.
Withdrawn after v.Major.Minor
The v.Major.Minor represent the last version where that feature is available. Authors must consider an alternative or remove that feature.
Name Description Available in Status
CSS .bg-pnkDy and .bg-pnkDy.well.header-rwd Pink day background color v5.1
CSS .pnkDy-theme set global Apply global template color change for the pink day color, as that property is defined on the <html> or <body> element v5.1
CSS .dark-theme set global Apply global template color change for full black, as that property is defined on the <html> or <body> element v5.1
CSS .bg-img-hdng Add a background image to a heading. v5.1
CSS .icon-warning-light Change the color to #DF7200 v7.0
Template .gc-pg-hlpfl "Page success widget" design pattern to let users share their experience on the page. v7.0
Plugin .wb-chtwzrd

Transforms a simple form into a conversation like experience used as a wizard.

v7.0
Component .gc-subway

GC subway map navigation for Service initiation template.

v8.0.1
CSS .gc-chckbxrdio

Adopt the new large input touch targets for checkboxes and radio-buttons

v8.0.1
Component .gc-followus

New layout and design pattern. To support the theme/topic beta template.

v9.1.0
Component .gc-topic-bg

Promotional image and page header. To support the theme/topic beta template.

v9.1.0
Component .gc-contributors

New layout and design pattern. To support the theme/topic beta template.

v9.1.0

For more provisional features, check out the WET-BOEW provisional features page.

Stabilized features
Name Description Available in Status
CSS .p-0 Set a padding of 0px v5.1 Supported in GCWeb since v6.0
CSS .mb-sm-5 Set a margin bottom of 50px for view port from small screen and up v5.1 Supported in GCWeb since v6.0
CSS .p-sm-3 Set a padding of 15px for view port from small screen and up v5.1 Supported in GCWeb since v6.0
CSS .px-sm-3 Set a left and right padding of 15px for view port from small screen and up v5.1 Supported in GCWeb since v6.0
CSS .bg-darker Full black background color v5.1 Supported in GCWeb since v9.0
CSS .bg-gctheme and .bg-gctheme.well.header-rwd GCWeb theme default background color v5.1 Supported in GCWeb since v9.0
CSS .bg-cover Background size cover v5.1 Supported in GCWeb since v9.0
Plugin [data-bgimg] Take the URL value and set it as the background image. To be replaced by CSS4 selector. v5.1 Supported in GCWeb since v9.0
CSS .stretched-link Propagates the clickable area around an hyperlink tag up to a relatively positioned parent. v5.1 Supported via GCWeb since v6.0
CSS .alert-danger Adopt the new danger alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .alert-warning Adopt the new warning alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .alert-success Adopt the new success alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .alert-info Adopt the new info alert design, without a background colour. v7.0 Supported in GCWeb since v9.0
CSS .gc-thickline H1 with short bold red underline v8.0.1 Supported in GCWeb since v9.0

Provisional feature documentation

CSS provisional features must be accompanied by the class .provisional within his context of use.

Provisional feature working examples

In this section

Responsive well header with a background image

Heading

Secondary title

Responsive well header with background image and padding controls

Mostly for campaing pages with content-fluid width.

Heading

Secondary title

<div class="provisional bg-cover" data-bgimg="demos/tabs/img/investinourfuture.jpg">
	<div class="container p-0 p-sm-3">
		<div class="well header-rwd mrgn-tp-md mrgn-bttm-md bg-dark text-white brdr-0">
			<h4 class="mrgn-tp-md">Heading</h4>
			<p>Secondary title</p>
		</div>
	</div>
</div>

Margin bottom small view port and up

Heading

Secondary title

Second well

Theme template colors

Javascript code sample to schedule the CSS addition for pink day

The following script adds the CSS class only on April 10, 2019 based on local time.

( function( d ) {
"use strict";

var t = new Date(),
	msT = t.getTime(),
	s = new Date( 2019, 3, 10, 0, 1 ),
	e = new Date( 2019, 3, 10, 23, 59 );

if ( s.getTime() < msT && msT < e.getTime() ) {
	d.getElementsByTagName( "html" )[ 0 ].classList.add ("pnkDy-theme", "provisional");
}

} )( document );

Background image on heading

Mostly for Services and information section.

Impact Assessment

Impact assessments process

Learn about the purpose and steps of impact assessments under the Impact Assessment Act.

Canadian Impact Assessment Registry

Information on potential and current IAs of projects subject to the federal IA process.

How to get involved

Public

Learn how the public can participate in impact assessments.

Indigenous

Learn about the Indigenous consultation process in impact assessments.

In the following example, adding the .stretched-link class to the hyperlink found inside the <h3> tag will result in propagating the clickable area all the way up to the parent <div> with the .col-xy-z class because it has a "relative" position.

Learn more about Canada’s Digital Charter

Learn how Canada’s Digital Charter will build a foundation of trust in a digital world.

National Indigenous History Month

Celebrate National Indigenous History Month in June

Icon warning color

Adding provisional icon-warning-light in the class will change the color

Without "provisional icon-warning-light" class

With "provisional icon-warning-light" class

Page success widget

Planned to eventually replace Report a problem. Uses multiple features: wb-postback and data-wb-doaction plugins, as well as nojs-* styles and Font Awesome.

Did you find what you were looking for?

What was wrong?

(Don’t include any personal information)
Maximum 300 characters

Thank you for your feedback

Chat wizard - How to implement

There are two ways to implement the chat wizard. The more common way is to code a form, and add according classes and data attributes. The other way is to load it from a JSON file, which will generate both the form and the wizard, is useful in case one would want to implement the same chat wizard on multiple pages.

1. Code a form

  1. Code a form that has a decision tree logic, with the idea that an answer could affect what the next question would be. At the moment, all choices of answer to a question must be radio buttons only.
  2. Wrap your form in a section, aside or div tag with a class named “.provisional.wb-chtwzrd”, along with the class “.hidden” to avoid the basic form to flicker on load. Other options are:
    • A data attribute named “data-wb-chtwzrd-avatar” can be added with a path to an image in order to change the default avatar in the bubble and the chat window. Recommended dimensions are 45x45 pixels.
    • A class named “.wb-chtwzrd-inline” can be added to have the chat experience inside the content and not in a separate window. This feature should only be used on a dedicated page, since it will start right away and steals the show to other content.
  3. Give it a title (outside of you form) as an H2. That heading will be the title of the form, as well as the title of the chat window and the text of the notification message.
  4. The action of your form will be the default destination page at the end of the flow. The method will define if the form will be submitted through the URL bar or in the body at the end. You can give it a name attribute too, for tracking purposes.
  5. You will need to start your form with a greetings paragraph. That paragraph must have a “.wb-chtwzrd-greetings” class and will be the first message coming from the bot when the chat window is opened.
  6. Same thing for the last message at the end of the conversation which is a farewell paragraph that you can put at the bottom of your form and that needs to have the “.wb-chtwzrd-farewell” class.
  7. If you add a regular paragraph right after your greetings one, this will be considered as an introduction message, which will be mentioned by the bot right after the greetings.
  8. The submit button is necessary as it indicates what the final submit button will show at the end of the conversation. Plus, you can add a data attribute there named “data-wb-chtwzrd-replace” that allows you to give a different value to your chat wizard than what’s in the form. This data attribute can be used on almost every textual tag inside the “.provisional.wb-chtwzrd” container to indicate what the chat wizard should display different than what the form displays.
  9. In the form itself, each question must be wrapped around a fieldset tag, with a unique ID attribute. 10. The question has to be in a legend tag, to which for instance you can use the “data-wb-chtwzrd-replace” attribute to have a more conversation-based question for the wizard.
  10. Choices of answer must be in an unordered list, with a class named “.list-unstyled” to not show the bullet points and a class “.mrgn-tp-md” for spacing at your own taste.
  11. The label tag has to wrap your input of type radio, with the text value wrapped in a span tag.
  12. The input itself has a name that represents that question in the final GET query string or POST, along with the value attribute for this input in particular. Also:
    • The data attribute named “data-wb-chtwzrd-next” must be used on the inputs to indicate the next question (fieldset ID) to present to the user. The last question of any possible conversation in the decision tree must have that data attribute set to “none”, in order to end the conversation.
    • The data attribute name “data-wb-chtwzrd-url” provides the plugin with the updated destination of the redirection at the final submit.
  13. If you want an external button to enable the chat wizard in addtition to the chat wizard bubble, you can add a button with the class named .wb-chtwzrd-btn.
  14. If you only want external button to enable the chat wizard instead of chat bubble, simply add the class named .wb-chtwzrd-btn-extrnl on your chat wizard and the chat bubble will not be displayed.

There you have it! A conversational-like experience driven by a fairly simple form.

2. Import a JSON File

Accepting JSON File as an input for batch deployments. If you have a JSON file that follows the Data API logic shown below, it can be implemented as a chat wizard instance.

JSON File API

{
	"header":{
		"method": "GET (default) or POST [GET]",
		"defaultDestination": "Default results page after submission [results-en.html]",
		"avatar": "Custom avatar URL [https://www.canada.ca/etc/designs/canada/wet-boew/assets/default-avatar.png]",
		"inline": "If provided with any value, it will put the chat wizard inside the content instead of a seperate window [true]",
		"first": "ID attribute of first question (will pick the first question in the form if not set) [q1]",
		"formType": "formType dynamic (default) or static for the basic form [dynamic]",
		"name":"Name attribute on the form for tracking purposes. Chat's form has -chat appended automatically [example]",
		"form": {
			"title": "Title for basic form [Help us help you]",
			"instructions": "Introduction paragraph before basic form [If you are an employer or organization looking for funding, you can find relevant information on the <a href='pagex.html'>funding page</a>.]",
			"sendButton": "Text for the submit button in the basic form [Search now]"
		},
		"title":"Title of wizard [I can help you find the information you need]",
		"greetings":"Greetings message as first interaction with user [Hi! I can help direct you to programs and services you might be interested in. Let's begin...]",
		"instructions": "More instructions or information before the questionnaire starts [First, if you are an employer or organization looking for funding, you can find relevant information on the <a href='pagex.html'>funding page</a>.]",
		"farewell":"Farewell message as last interaction after last question is answered [Thank you. I have built a page with results you may find resourceful.]",
		"sendButton":"Text for the submit button after last question is answered [Show results]"
	},
	"questions":{
		"q1":{
			"name":"Name of the question [describe]",
			"input":"Input type [radio]",
			"labelForm":"Question in the form [What would you describe yourself as?]",
			"label":"Question in the wizard [Are you:]",
			"choices":[
				{
					"content":"Choice of answer for an input [a young Canadian]",
					"value":"Value for the submission [young-canadian]",
					"next":"Next question ID [q2]",
					"url":"result page if this answer is selected [results-en.html]"
				},
				{
					"...":"More choices"
				}
			]
		},
		"q2":{
			"...":"More questions"
		}
	}
}

All you need on your page is to add a data attribute named “data-wb-chtwzrd-src” to your section, aside or div tag that has the “.provisional.wb-chtwzrd” class, and provide it with the path to your JSON file.

GC Subway map navigation

In order to use the provisional subway map navigation, you will need to complete the following steps:

  1. First, you'll need a <nav> element with both the "provisional" and the "gc-subway" classes. Inside of that <nav>, put your first <h1>; it will be the smaller, gray-ish, upper one.
  2. Add a <ul> next to that <h1>. Put the links to your other pages related to that service initiation template in there.
  3. The rest just needs your own main content for that page. Do not forget the navigation buttons at the bottom of the pages. If you want the left column to stop being at 2/3 of the width on desktop at some point, then you can stop the propagation by using any HTML element with a "gc-subway-section-end" class on it; that element needs to be a sibling of your <nav class="gc-subway">.
  4. If you want to use the new bold short red underline underneath your regular H1, then add both the "provisional" and "gc-thickline" classes on it.

See raw code in action by checking out the working example.

Checkboxes and radio-buttons

Large input touch targets support input and use

A long time issue with checkboxes and radio buttons has been that labels don't look clickable to most people

Even using designs that highlight the label text or put the input and label with a grey outline, studies showed that people still wanted to click the input design.

Design specification

  1. Question
  2. Selected radio button
  3. Unselected radio button
  4. Radio button label

Usage

Radio buttons are used in the following patterns:

Checkboxes are used in the following patterns:

Demo and code

Checkboxes and radio buttons (Canada.ca design pattern)

Report a problem on this page
Please select all that apply:

Thank you for your help!

You will not receive a reply. For enquiries, please contact us.

Date modified: