{
	"@context": {
		"@version": 1.1,
		"dct": "http://purl.org/dc/terms/",
		"title": { "@id": "dct:title", "@container": "@language" },
		"description": { "@id": "dct:description", "@container": "@language" },
		"modified": "dct:modified"
	},
	"title": {
		"en": "Most requested",
		"fr": "En demande"
	},
	"description": {
		"en": "Features top tasks related to the page it is on.",
		"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
	},
	"modified": "2025-10-31",
	"componentName": "gc-most-requested",
	"status": "stable",
	"version": "1.2.1",
	"pages": {
		"docs": [
			{
				"title": "Most requested - Documentation",
				"language": "en",
				"path": "gc-most-requested-doc-en.html"
			},
			{
				"title": "En demande - Documentation",
				"language": "fr",
				"path": "gc-most-requested-doc-fr.html"
			}
		],
		"examples": [
			{
				"title": "Most requested",
				"language": "en",
				"path": "gc-most-requested-en.html"
			},
			{
				"title": "En demande",
				"language": "fr",
				"path": "gc-most-requested-fr.html"
			},
			{
				"title": "Most requested - Two items",
				"language": "en",
				"path": "gc-most-requested-two-items-en.html"
			},
			{
				"title": "En demande - Deux éléments",
				"language": "fr",
				"path": "gc-most-requested-two-items-fr.html"
			},
			{
				"title": "Most requested - bad implementation",
				"language": "en",
				"path": "gc-most-requested-bad-en.html"
			},
			{
				"title": "En demande - mauvaise implémentation",
				"language": "fr",
				"path": "gc-most-requested-bad-fr.html"
			}
		]
	},
	"a11yGuidance": "No accessibility guidance.",
	"variations": [
		{
			"name": {
				"en": "Most requested - default",
				"fr": "En demande - par défaut"
			},
			"status": "stable",
			"description": {
				"en": "Features top tasks related to the page it is on.",
				"fr": "Comprend des tâches principales liées à la page sur laquelle elles se trouvent."
			},
			"guidance": {
				"en": "https://design.canada.ca/common-design-patterns/most-requested.html",
				"fr": "https://conception.canada.ca/configurations-conception-communes/en-demande.html"
			},
			"iteration": "_:iteration_mostrequested_4",
			"example": [
				{
					"en": { "href": "gc-most-requested-en.html", "text": "Most requested" },
					"fr": { "href": "gc-most-requested-fr.html", "text": "En demande" }
				},
								{
					"en": { "href": "gc-most-requested-two-items-en.html", "text": "Most requested - Two items" },
					"fr": { "href": "gc-most-requested-two-items-fr.html", "text": "En demande - Deux éléments" }
				},
				{
					"en": { "href": "gc-most-requested-bad-en.html", "text": "Most requested - bad implementation" },
					"fr": { "href": "gc-most-requested-bad-fr.html", "text": "En demande - mauvaise implémentation" }
				}
			],
			"implementation": [
				"_:implement_mostrequested"
			],
			"history": [
				{
					"en": "October 2025 - Fixed the misalignment issue between the list items when there are only two of them.",
					"fr": "Octobre 2025 - Correction du problème d'alignement entre les éléments de la liste lorsqu'il n'y en a que deux."
				},
				{
					"en": "September 2025 - Items are displayed horizontally when there are only two list items on medium screen breakpoint and larger.",
					"fr": "Septembre 2025 - Les éléments sont affichés horizontalement quand il y a seulement deux éléments de liste à partir d'un breakpoint écran moyen et plus."
				},
				{
					"en": "May 2025 - Items are now distributed vertically instead of horizontally.",
					"fr": "Mai 2025 - Les items sont maintenant distribués verticalement plutôt que horizontalement."
				},
				{
					"en": "February 2024 - Initial implementation of the variation.",
					"fr": "Février 2024 - Implémentation initiale de la variante."
				},
				{
					"en": "June 2021 - Provisional implementation of the variation.",
					"fr": "Juin 2021 - Implémentation provisionnelle de la variante."
				}
			]
		}
	],
	"implementation": [
		{
			"@id": "_:implement_mostrequested",
			"iteration": "_:iteration_mostrequested_4",
			"name": {
				"en": "Standard",
				"fr": "Standard"
			},
			"introduction": {
				"en": "This implementation is meant for developers/publishers adding the component manually.",
				"fr": "Cette implémentation est destinée aux développeurs/éditeurs qui ajoutent le composant manuellement."
			},
			"instructions": {
				"en": [
					"Refer to the code sample below.",
					"The component cannot be located inside another element with the class <code>container</code>."
				],
				"fr": [
					"Référez-vous au code qui suit.",
					"La composante ne peut pas être située à l'intérieur d'un autre élément avec la classe <code>container</code>."
				]
			},
			"notes": {
				"en": [
					"The Most requested component on the home page is out of scope of this component."
				],
				"fr": [
					"La composante En demande sur la page d'accueil est exclue de cette composante."
				]
			},
			"sample": {
				"en": [
					{
						"@type": "source-code",
						"description": "Code sample:",
						"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
					}
				],
				"fr": [
					{
						"@type": "source-code",
						"description": "Exemple de code&nbsp;:",
						"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>En demande</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 1]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 2]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 3]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 4]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 5]</a></li>\n\t\t\t<li><a href=\"#\">[Lien vers une tâche principale 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
					}
				]
			}
		}
	],
	"iteration": [
		{
			"@id": "_:iteration_mostrequested_4",
			"name": "Most requested - Iteration 4",
			"date": "2025-10",
			"fixes": [
				"Fixed the misalignment issue between the list items when there are only two of them."
			],
			"detectableBy": ".gc-most-requested:not(.provisional)",
			"predecessor": "_:iteration_mostrequested_3",
			"assets": [
				{
					"@type": "source-code",
					"@language": "en",
					"description": "Code sample",
					"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
				}
			]
		},
		{
			"@id": "_:iteration_mostrequested_3",
			"name": "Most requested - Iteration 3",
			"date": "2025-09",
			"detectableBy": ".gc-most-requested:not(.provisional)",
			"predecessor": "_:iteration_mostrequested_2",
			"additions": [
				"Changed display of list items from vertical to horizontal when there are only two list items on medium screen breakpoint and larger. This does not change the component's core behaviour, so this is a Minor change."
			],
			"assets": [
				{
					"@type": "source-code",
					"@language": "en",
					"description": "Code sample",
					"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
				}
			]
		},
		{
			"@id": "_:iteration_mostrequested_2",
			"name": "Most requested - Iteration 2",
			"date": "2024-11",
			"detectableBy": ".gc-most-requested:not(.provisional)",
			"predecessor": "_:iteration_mostrequested_1",
			"successor": "_:iteration_mostrequested_3",
			"additions": [
				"Changed display of items from flex to column-count. This change is perceptible and a user will notice that change but it won't change the component essential behaviour. So this is a Minor change."
			],
			"assets": [
				{
					"@type": "source-code",
					"@language": "en",
					"description": "Code sample",
					"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
				}
			]
		},
		{
			"@id": "_:iteration_mostrequested_1",
			"name": "Most requested - Iteration 1",
			"date": "2024-02",
			"detectableBy": ".gc-most-requested:not(.provisional)",
			"predecessor": "_:iteration_mostrequested_0",
			"successor": "_:iteration_mostrequested_2",
			"assets": [
				{
					"@type": "source-code",
					"@language": "en",
					"description": "Code sample",
					"code": "<section class=\"gc-most-requested\">\n\t<div class=\"container\">\n\t\t<h2>Most requested</h2>\n\t\t<ul>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 1]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 2]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 3]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 4]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 5]</a></li>\n\t\t\t<li><a href=\"#\">[Top task hyperlink 6]</a></li>\n\t\t</ul>\n\t</div>\n</section>"
				}
			]
		},
		{
			"@id": "_:iteration_mostrequested_0",
			"name": "Most requested - Provisional",
			"date": "2021-06",
			"detectableBy": ".provisional.gc-most-requested",
			"successor": "_:iteration_mostrequested_1"
		}
	],
	"changesets": [
		{
			"@id": "_:cs_mostrequested",
			"name": "Most requested - columns",
			"status": "stable",
			"baseOnIteration": "_:iteration_mostrequested_2",
			"detectableBy": ".gc-most-requested",
			"layout": "On smaller screens, the title is on the top and links are stacked. On medium and larger, the title is on the left and links are distributed over two columns from top to bottom and left to right.",
			"style": "The component has a light gray background.",
			"semantic": "h2 + (ul > li > a)",
			"static": [
				"Most requested",
				"En demande"
			],
			"context": "The component must not be located inside an element with the class \"container\"",
			"schema": [
				"arrays of 'MostRequestedLink'",
				"'MostRequestedLink' object: [ \"task links\", \"task names\" ]"
			],
			"test": [
				"<a href=\"gc-most-requested-provisional-en.html\">Most-requested (provisional)</a>"
			]
		},
		{
			"@id": "_:cs_mostrequested",
			"name": "Most requested",
			"status": "stable",
			"baseOnIteration": "_:iteration_mostrequested_1",
			"detectableBy": ".gc-most-requested",
			"layout": "On smaller screens, the title is on the top and links are stacked. On medium and larger, the title is on the left and links are distributed over two columns from left to right and top to bottom.",
			"style": "The component has a light gray background.",
			"semantic": "h2 + (ul > li > a)",
			"static": [
				"Most requested",
				"En demande"
			],
			"context": "The component must not be located inside an element with the class \"container\"",
			"schema": [
				"arrays of 'MostRequestedLink'",
				"'MostRequestedLink' object: [ \"task links\", \"task names\" ]"
			],
			"test": [
				"<a href=\"gc-most-requested-provisional-en.html\">Most-requested (provisional)</a>"
			]
		}
	]
}