Services and information - Common design pattern

Status: Up to spec
Type: Common design pattern
Last review: 2019-01-08
Conforming to: Content and IA spec 1.5.1
Specification: Common design patterns - Services and information
Technical name: gc-srvinfo

Working example

Evaluation and report

There is no evaluation and report available for this component

API (Version 3.0)

CSS Class	Template	Visual rendering	Schema
Version 1.3	Version 3.0	Version 1.1	Version 1.1

CSS Class (v1.3)

gc-srvinfo: Component: Service and information
gc-drmt: Component: (Deprecated) Doormat link. Defined inside a Service and information component.

Version notes

Version 1.3

Added: gc-srvinfo

Version 1.2 (between v4.0.28.1 and v4.0.27)

Depricated: gc-drmt

Version 1.1 (between v4.0.21 and v4.0.26)

Added: gc-drmt

Version 1.0

There were no exclusive CSS class

Template (v3.0)

Notes:

The heading level are ajusted based on the context of use
The following are the official supported/versionned markup
Template for each grouping and column rendering

<section class="gc-srvinfo">
	<h2>[[comp:SrvInfo dct:title]]</h2>

	<!-- Two column && ( Subheading || Demand ) [default] -->
	<div data-if="comp:SrvInfo comp:srvInfoCol == comp:SrvInfo2Col &&
					( comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSubheading ||
					comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoDemand )" class="wb-eqht row">
		<div data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
			<p>[[comp:Doormat dct:description]]</p>
		</div>
	</div>

	<!-- One column && ( Subheading || Demand ) -->
	<div data-if="comp:SrvInfo comp:srvInfoCol == comp:SrvInfo1Col &&
					( comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSubheading ||
					comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoDemand )" data-for="comp:Doormat in (comp:SrvInfo comp:doormats )">
		<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
		<p>[[comp:Doormat dct:description]]</p>
	</div>

	<!-- Three column && ( Subheading || Demand ) -->
	<div data-if="comp:SrvInfo comp:srvInfoCol == comp:SrvInfo3Col &&
					( comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSubheading ||
					comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoDemand )" class="wb-eqht row">
		<div data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6 col-lg-4">
			<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
			<p>[[comp:Doormat dct:description]]</p>
		</div>
	</div>

	<!-- Sequential (One column only) -->
	<div data-if="comp:SrvInfo comp:srvInfoGroupAs == comp:SrvInfoSequential">
		<ol>
			<li data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )">
				<h3><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
				<p>[[comp:Doormat dct:description]]</p>
			</li>
		</ol>
	</div>

</section>

Previous version

v4.0.28.1 to v4.0.27 testCase-v4.0.27 (2.0)

Clearfix removed
Doormat component explicit name CSS removed
More services and information when more than 10 doormat, removed

v4.0.26 to v4.0.22 testCase-v4.0.22 (1.2)

Separated column layout from section delimited

v4.0.21 testCase-v4.0.21 (1.1)

Limit default visible result to 10

v4.0.20 to v4.0.5 testCase-v4.0.5 (1.0)

Initial template

<section>
	<h2>[[comp:SrvInfo dct:title]]</h2>

	<!-- v4.0.28.1 to v4.0.27
		* Clearfix removed
		* Doormat component explicit name CSS removed
		* More services and information when more than 10 doormat, removed
	-->
	<div data-if="testCase-v4.0.27" class="wb-eqht row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<div class="col-md-6">
				<section>
					<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
					<p>[[comp:Doormat dct:description]]</p>
				</section>
			</div>
		</template>
	</div>

	<!-- v4.0.26  to v4.0.22
		* Separated column layout from section delimited
	-->
	<div data-if="testCase-v4.0.22" class="row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<div data-if="IterationIndex <= 10" class="col-md-6">
				<section class="gc-drmt">
					<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
					<p>[[comp:Doormat dct:description]]</p>
				</section>
			</div>
			<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
			<template data-if="IterationIndex > 10">
				<details class="mrgn-tp-md brdr-0">
					<summary class="btn btn-default text-center">Show more services and informations</summary>
					<div class="row">
						<template data-for="comp:Doormat in IterationCollection">
							<div class="col-md-6">
								<section class="gc-drmt">
									<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
									<p>[[comp:Doormat dct:description]]</p>
								</section>
							</div>
							<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
						</template>
					</div>
				</details>
			</template>
		</template>
	</div>

	<!-- v4.0.21
		* Limit default visible result to 10
	-->
	<div data-if="testCase-v4.0.21" class="wb-eqht row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<section data-if="IterationIndex <= 10" class="col-md-6 gc-drmt">
				<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
				<p>[[comp:Doormat dct:description]]</p>
			</section>
			<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
			<template data-if="IterationIndex > 10">
				<details class="mrgn-tp-md brdr-0">
					<summary class="btn btn-default text-center">Show more services and informations</summary>
					<div class="row">
						<template data-for="comp:Doormat in IterationCollection">
							<section class="col-md-6 gc-drmt">
									<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
									<p>[[comp:Doormat dct:description]]</p>
							</section>
							<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
						</template>
					</div>
				</details>
			</template>
		</template>
	</div>

	<!-- v4.0.20 to v4.0.5 -->
	<div data-if="testCase-v4.0.5" class="row">
		<template data-for="comp:Doormat in ( comp:SrvInfo comp:doormats )" class="col-md-6">
			<section class="col-md-6">
				<h3 class="h5"><a data-bind="(href = comp:Doormat foaf:page)">[[comp:Doormat dct:title]]</a></h3>
				<p>[[comp:Doormat dct:description]]</p>
			</section>
			<div data-if="IterationIndex mod( 2 )" class="clearfix"></div>
		</template>
	</div>
</section>

Visual rendering (v1.1)

Doormat header comp:Doormat dct:title

Same style as the heading level 5: Lato, 20px, bold
Set the margin top as the same as heading level 5 (h5)
Set the margin bottom to be small: 5px

Doormat description comp:Doormat dct:description

Desktop: Noto sans, 17px, plain text
Smaller devices: Noto sans, 19px, plain text

Previous version

on and prior v4.0.29 (1.0): Doormat header comp:Doormat dct:title is the same style as the heading level 5

Schema (v1.1)

#
# Schema of the Service and Information component
#

@prefix rdf: <http://www.w3.org/1999/02/22-rdf-syntax-ns#> .
@prefix rdfs: <http://www.w3.org/2000/01/rdf-schema#> .
@prefix xsd: <http://www.w3.org/2001/XMLSchema#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix skos: <http://www.w3.org/2004/02/skos/core#> .
@prefix wms: <http://vocab.canada.ca/wms> .
@prefix comp: <http://vocab.canada.ca/wms/component> .


comp:SrvInfo
	dct:issued "2018-12-28"^^xsd:date ;
	a rdfs:Class, wms:Component ;
	wms:componentName "gc-srvinfo" ;
	rdfs:label "Service and information"@en ;
	rdfs:label "Service et renseignements"@fr ;
	rdfs:isDefinedBy <https://www.canada.ca/en/treasury-board-secretariat/services/government-communications/canada-content-information-architecture-specification/common-design-patterns.html#services-information>@en;
	rdfs:isDefinedBy <https://www.canada.ca/fr/secretariat-conseil-tresor/services/communications-gouvernementales/specifications-contenu-architecture-information-canada/configurations-conception-communes.html#services-renseignements>@fr;

comp:Doormat
	dct:issued "2018-12-28"^^xsd:date ;
	a rdfs:Class, wms:Component ;
	rdfs:label "Doormat link"@en ;
	rdfs:label "Liens avec description connexe"@fr ;

comp:doormats
	dct:issued "2018-12-28"^^xsd:date ;
	a rdf:Property ;
	rdfs:domains comp:SrvInfo ;
	rdfs:range comp:Doormat .

comp:srvInfoGroupAs
	dct:issued "2018-12-28"^^xsd:date ;
	rdfs:label "Type for this group of doormat links"@en ;
	rdfs:domains comp:SrvInfo ;
	rdfs:range comp:SrvInfoDemand ;
	rdfs:range comp:SrvInfoSequential ;
	rdfs:range comp:SrvInfoSubheading .

comp:SrvInfoDemand
	a rdfs:Class ;
	rdfs:label "Demand-based"@en .

comp:SrvInfoSequential
	a rdfs:Class ;
	rdfs:label "Demand-based"@en .

comp:SrvInfoSubheading
	a rdfs:Class ;
	rdfs:label "Demand-based"@en .

comp:srvInfoCol
	dct:issued "2018-12-31"^^xsd:date ;
	rdfs:label "Column layout rendering"@en ;
	a rdf:Property ;
	rdfs:range comp:SrvInfo1Col ;
	rdfs:range comp:SrvInfo2Col ;
	rdfs:range comp:SrvInfo3Col .

comp:SrvInfo1Col
	a rdfs:Class ;
	rdfs:label "One Column"@en .

comp:SrvInfo2Col
	a rdfs:Class ;
	rdfs:label "Two Column"@en .

comp:SrvInfo3Col
	a rfds:Class ;
	rdfs:label "Three Column"@en
	rdfs:comment "Used essentially for the home page" .

Shapes graphs

#
# Shape graph of the Service and Information component
#

@prefix sh: <http://www.w3.org/ns/shacl#> .
@prefix dct: <http://purl.org/dc/terms/> .
@prefix foaf: <http://xmlns.com/foaf/0.1/> .
@prefix comp: <http://vocab.canada.ca/wms/component> .

comp:SrvInfoShape
	a sh:NodeShape ;
	sh:targetClass comp:SrvInfo ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path comp:doormats ;
			sh:minExclusive 0 ;
			sh:severity sh:Warning ;
		]
	)
	sh:property [
		sh:path comp:srvInfoGroupAs ;
		sh:in ( comp:SrvInfoDemand comp:SrvInfoSequential comp:SrvInfoSubheading ) ;
		sh:severity sh:Violation ;
		sh:defaultValue comp:SrvInfoSubheading ;
	]
	sh:property [
		sh:path comp:srvInfoCol ;
		sh:in ( comp:SrvInfo1Col comp:SrvInfo2Col comp:SrvInfo3Col ) ;
		sh:severity sh:Violation ;
		sh:defaultValue comp:SrvInfo2Col ;
	] .

comp:DoormatShape
	a sh:NodeShape ;
	sh:targetClass comp:Doormat ;
	sh:and (
		[
			sh:path dct:title ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path dct:description ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
		[
			sh:path foaf:page ;
			sh:uniqueLang true ;
			sh:severity sh:Violation ;
		]
	) .

Previous version

on and prior v4.0.29 (1.0)

Same as 1.1 without:

comp:srvInfoGroupAs
comp:SrvInfoDemand
comp:SrvInfoSequential
comp:SrvInfoSubheading
comp:srvInfoCol
comp:SrvInfo1Col
comp:SrvInfo2Col
comp:SrvInfo3Col

JSON-LD sample

{
	"@context": {
		"foaf": "http://xmlns.com/foaf/0.1/",
		"dct": "http://purl.org/dc/terms/",
		"comp": "http://vocab.canada.ca/wms/component"
	},
	"dct:title": "Services et renseignements",
	"comp:srvInfoGroupAs": "comp:SrvInfoDemand",
	"comp:srvInfoCol": "comp:SrvInfo2Col",
	"comp:doormats": [
		{
			"foaf:page": "https://www.canada.ca/doormat/link",
			"dct:title": "[Doormat title]",
			"dct:description": "[Doormat description]"
		},
		{
			"foaf:page": "https://www.canada.ca/doormat/link/2",
			"dct:title": "[Doormat title 2]",
			"dct:description": "[Doormat description 2]"
		},
		{
			"foaf:page": "https://www.canada.ca/doormat/link/3",
			"dct:title": "[Doormat title 3]",
			"dct:description": "[Doormat description 3]"
		}
	]
}

Reference

SHACL Shapes Constraint Language (https://www.w3.org/TR/shacl/)

Page details

Date modified:: 2019-01-08