And/Or decision points (Conjunctions)

Providing a more visual seperation between two decision points by a visual cue (or) based on user testing. Also provide a connecting conjunction to show two parts are connected (and).

GCWeb implementation plan

2021-06 - Engage with TBS to show them this design pattern
2021-06 - Provide UX research and analysis to describe how pattern helps usability
2021-10 - Review and identify requirement to make this functionality enterprise ready
2021-11 - Produce accessibility and usability report on its usage on Canada.ca
2022-02 - Have this feature as provisional feature in GCWeb and get TBS to publish guidance on how to use it.

Todo and for future consideration

Review code and governance to balance optimal accessibility and ease of implimentation by users.

Lead: CRA - Christopher Oakes (@christopher-o)

Base configurations

Link to French examples

Not all screen readers can read CSS text, so include the word or concept of "or" with wb-inv class.

Some options are:

Adding option X of X to all headers
Adding the word "or" as part of the last statement in each column (except the last column)

Never stacked (always side-by-side)

Header A: Option 1 of 2

This is content for header A

Header B: Option 2 of 2

This is content for header B

Header A

This is content for header A

Header B

This is content for header B

Always stacked (mobile first, no side-by-side)

Header A: Option 1 of 2

This is content for header A

Header B: Option 2 of 2

This is content for header B

Header A

This is content for header A

Header B

This is content for header B

Code

//Never stacked "or"
<div class="cnjnctn-type-or cnjnctn-xs">
	<div class="cnjnctn-col">
		<h4 class="text-muted">Header A<span class="wb-inv">: Option 1 of 2</span></h4>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h4 class="text-muted">Header B<span class="wb-inv">: Option 2 of 2</span></h4>
		<p>This is content for header B</p>
	</div>
</div>
//Never stacked "and"
<div class="cnjnctn-type-and cnjnctn-xs">
	<div class="cnjnctn-col">
		<h4 class="text-muted">Header A</h4>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h4 class="text-muted">Header B</h4>
		<p>This is content for header B</p>
	</div>
</div>

//Always stacked "or"
<div class="cnjnctn-type-or"> 
	<div class="cnjnctn-col"> 
		<h4 class="text-muted">Header A<span class="wb-inv">: Option 1 of 2</span></h4>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h4 class="text-muted">Header B<span class="wb-inv">: Option 2 of 2</span></h4>
		<p>This is content for header B</p>
	</div>
</div>
//Always stacked "and"
<div class="cnjnctn-type-and"> 
	<div class="cnjnctn-col"> 
		<h4 class="text-muted">Header A</h4>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h4 class="text-muted">Header B</h4>
		<p>This is content for header B</p>
	</div>
</div>

Responsive design

Note: all designs going forward will use the "or" model to simplify the amount of examples.

Stacks on extra small devices, phones (<768px)

Header A: Option 1 of 2

This is content for header A

Header B: Option 2 of 2

This is content for header B

Stacks on small devices, tablets (768px to 992px)

Header A: Option 1 of 2

This is content for header A

Header B: Option 2 of 2

This is content for header B

Stacks on medium devices (992px to 1200px)

Header A: Option 1 of 2

This is content for header A

Header B: Option 2 of 2

This is content for header B

Code

//Stacks on extra small devices, phones	
<div class="cnjnctn-type-or cnjnctn-sm">
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header A<span class="wb-inv">: Option 1 of 2</span></h5>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header B<span class="wb-inv">: Option 2 of 2</span></h5>
		<p>This is content for header B</p>
	</div>
</div>				
//Stacks on small devices, tablets	
<div class="cnjnctn-type-or cnjnctn-md">
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header A<span class="wb-inv">: Option 1 of 2</span></h5>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header B<span class="wb-inv">: Option 2 of 2</span></h5>
		<p>This is content for header B</p>
	</div>
</div>				
//Stacks on medium devices
<div class="cnjnctn-type-or cnjnctn-lg">
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header A<span class="wb-inv">: Option 1 of 2</span></h5>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header B<span class="wb-inv">: Option 2 of 2</span></h5>
		<p>This is content for header B</p>
	</div>
</div>

Use the always stacked design to stack across all resolutions.

Extended configurations

Column count

Three columns (example stacks on small devices)

Header A: Option 1 of 3

This is content for header A

Header B: Option 2 of 3

This is content for header B

Header C: Option 3 of 3

This is content for header C

Four columns (example stacks on medium devices)

Header A: Option 1 of 4

This is content for header A

Header B: Option 2 of 4

This is content for header B

Header C: Option 3 of 4

This is content for header C

Header D: Option 4 of 4

This is content for header D

Code

//Three columns (example stacks on small devices)
<div class="cnjnctn-type-or cnjnctn-md">
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header A<span class="wb-inv">: Option 1 of 3</span></h5>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header B<span class="wb-inv">: Option 2 of 3</span></h5>
		<p>This is content for header B</p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header C<span class="wb-inv">: Option 3 of 3</span></h5>
		<p>This is content for header C</p>
	</div>
</div>
//Four columns (example stacks on medium devices)
<div class="cnjnctn-type-or cnjnctn-lg">
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header A<span class="wb-inv">: Option 1 of 4</span></h5>
		<p>This is content for header A </p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header B<span class="wb-inv">: Option 2 of 4</span></h5>
		<p>This is content for header B</p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header C<span class="wb-inv">: Option 3 of 4</span></h5>
		<p>This is content for header C</p>
	</div>
	<div class="cnjnctn-col">
		<h5 class="text-muted">Header D<span class="wb-inv">: Option 4 of 4</span></h5>
		<p>This is content for header D</p>
	</div>
</div>

If you require more than four options (columns), consider the always stacked default design.

Width of column

To accommodate options that might be lopsided in the amount of text but a need to be visually pleasing, the columns can be set to a percentage of itself to allow larger content to wrap less. The default is 100% (cnjnctn-col).

Note: The width cannot be adjusted based on different resolutions, best to stack the columns when content becomes difficult to read on smaller devices.

Column set to 90% of original width (example stacks on medium devices)