From f17fa4db9045e968e7ec9817a7079de8762cb848 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Tue, 25 Aug 2026 13:25:12 -0400 Subject: [PATCH 01/12] feature(documentation): footer component for portals --- patterns/atoms_components/avatar.schema.json | 21 +++ patterns/atoms_components/link.schema.json | 15 ++ .../atoms_components/navigation.schema.json | 15 ++ .../guidance_common_elements_for_portals.md | 149 ++++++++++++++++++ .../footer-meta-item.schema.json | 18 +++ patterns/organisms_landmarks/footer-data.json | 82 ++++++++++ .../organisms_landmarks/footer.schema.json | 16 ++ 7 files changed, 316 insertions(+) create mode 100644 patterns/atoms_components/avatar.schema.json create mode 100644 patterns/atoms_components/link.schema.json create mode 100644 patterns/atoms_components/navigation.schema.json create mode 100644 patterns/guidance_common_elements_for_portals.md create mode 100644 patterns/molecules_regions/footer-meta-item.schema.json create mode 100644 patterns/organisms_landmarks/footer-data.json create mode 100644 patterns/organisms_landmarks/footer.schema.json diff --git a/patterns/atoms_components/avatar.schema.json b/patterns/atoms_components/avatar.schema.json new file mode 100644 index 0000000..2ea7d0d --- /dev/null +++ b/patterns/atoms_components/avatar.schema.json @@ -0,0 +1,21 @@ +{ + "$id": "/patterns/atoms_components/avatar.schema", + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Avatar", + "type": "object", + "properties": { + "src": { + "type": "string" + }, + "alt": { + "type": "string" + }, + "width": { + "type": "integer" + }, + "height": { + "type": "integer" + } + }, + "required": ["src", "alt", "width", "height"] +} \ No newline at end of file diff --git a/patterns/atoms_components/link.schema.json b/patterns/atoms_components/link.schema.json new file mode 100644 index 0000000..72bb8a1 --- /dev/null +++ b/patterns/atoms_components/link.schema.json @@ -0,0 +1,15 @@ +{ + "$id": "/patterns/atoms_components/link.schema", + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Link", + "type": "object", + "properties": { + "children": { + "type": "object" + }, + "url": { + "type": "string" + } + }, + "required": ["children", "url"] +} \ No newline at end of file diff --git a/patterns/atoms_components/navigation.schema.json b/patterns/atoms_components/navigation.schema.json new file mode 100644 index 0000000..2a0449d --- /dev/null +++ b/patterns/atoms_components/navigation.schema.json @@ -0,0 +1,15 @@ +{ + "$id": "/patterns/atoms_components/navigation.schema", + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Navigation", + "type": "object", + "properties": { + "renderLinks": { + "type": "object" + }, + "renderTitle": { + "type": "object" + } + }, + "required": ["renderLinks"] +} \ No newline at end of file diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md new file mode 100644 index 0000000..e6ca812 --- /dev/null +++ b/patterns/guidance_common_elements_for_portals.md @@ -0,0 +1,149 @@ +# Guidance for common elements across portals. + +## Contents + +Pages +Templates +Landmarks (Organisms ) +Regions (Molecules) +Components (Atoms) + + +## Footer +For the footer, my first option was based on well-known public organizations and their commitment to a11y, so I got inspiration from the Government of Canada and the Government of UK. + +Definition of elements inside the footer. +For the elements inside a footer, let's combine what we know with the resources we want to mimic, like the UK Government. For this particular case, we used Nielsen Norman Group guidelines, which outline what a common user looks for in a footer. +For example illumina include the following disclaimer: +> For Research Use Only, Not for use in diagnostic procedures (except as specifically noted). + + + +# What elements are mandatory and optional for us? +Only the meta information should be mandatory. + +## The meta information is mandatory. +- Terms and conditions +- Image Logo + +## Visual representation + +```mermaid +--- +config: + treemap: + showValues: false +--- + +treemap-beta +"Footer" + "Meta Footer" + "Terms and conditions": 80 + "Image Logo": 20 + "Navigation Links": 80 + +``` + +## Specific to our case +### Contact and support links +- Help, questions and comments +- Privacy policy +- Accessibility statement +- Terms and conditions + +### Navigation links +- Languages +- License +- Copyright + +### Images +- Image Logo + +## Authentication Components +Login / Sign In: Usually positioned in the top right header. +Register / Create Account: For new users. +Forgot Password / Account Recovery: A critical flow for users who lose access. +Multi-Factor Authentication (MFA): Secondary verification prompts (e.g., SMS, Authenticator apps). +Session Timeout Warning: A modal or banner that warns users before they are automatically logged out. +My Profile / Account Settings: The authenticated state that replaces the "Login" button. +Sign Out / Log Out. + +## Header structure +For the header we can organize the elements in the following way: +
+{{ Image Logo link to home. }} +{{ Search bar. }} +{{ Menu options. }} +{{ Authentication components. }} +
+ +## Account creation and login experience +For the oauth page we can mimic a technology product. +Integrate https://cilogon.org/example/ in the flow. + +After Click in Log in: +
// inside main + {{Header and welcoming message}} +
+ {{ Enter your email }} + {{ Sign up or sing in submit button }} +
+ {{ List of sign up or sign in options }} // passkey, Google, ... + {{ By proceeding, you agree to the Terms of Service and Privacy Notice }} +
+ +After submit the form: +
// inside main + {{Header and welcoming message}} +
+ {{ your email }} // hidden field no editable + {{ your pass }} // hidden field if required + {{ Sign in submit button }} +
+ {{ By proceeding, you agree to the Terms of Service and Privacy Notice }} + {{ Use a different account link }} + {{ Forgot password link }} // only visible if user exist +
+ +If is a new user we confirm the email. + + +## Error pages +The error page will have a indirect error cause message followed by the http status code. + +
+{{ Header with the Response status text group }} // Page not found +{{ Instructions to go back - Link}} +{{ response status code and specific text}} +{{ Report and feedback form}} // Is this page useful? Yes No [Report a problem Form ] +
+ +the form could be something like: +``` +Help us improve [Name of service] + +Do not include personal or financial information like your National Insurance number or credit card details. +What were you doing? +What went wrong? +``` + +## User profile/account controls +After login the header shows the user menu instead of the log in. + // Hamburger button with two elements "My settings" and "Sign out" +{{ My settings }} +{{ Sign out }} + + +The settings page will have 2 sections: User Profile and security. And, the delete account link. + + +## Menu options +At the moment one element to change the language. + diff --git a/patterns/molecules_regions/footer-meta-item.schema.json b/patterns/molecules_regions/footer-meta-item.schema.json new file mode 100644 index 0000000..83ae3ca --- /dev/null +++ b/patterns/molecules_regions/footer-meta-item.schema.json @@ -0,0 +1,18 @@ +{ + "$id": "/patterns/molecules_regions/footer-meta-item.schema", + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Footer Meta Item", + "type": "object", + "required": ["terms_conditions", "logo"], + "properties": { + "terms_conditions": { + "$ref": "/patterns/atoms_components/link.schema.json" + }, + "logo": { + "$ref": "/patterns/atoms_components/avatar.schema.json" + }, + "variant": { + "type": "string" + } + } +} \ No newline at end of file diff --git a/patterns/organisms_landmarks/footer-data.json b/patterns/organisms_landmarks/footer-data.json new file mode 100644 index 0000000..660ca09 --- /dev/null +++ b/patterns/organisms_landmarks/footer-data.json @@ -0,0 +1,82 @@ +{ + "meta": { + "terms_conditions": { + "url": "/terms-and-conditions", + "children": { + "text": "Terms & Conditions" + } + }, + "logo": { + "src": "/assets/images/company-logo-light.svg", + "alt": "Acme Corporation Logo", + "width": 180, + "height": 48 + }, + "variant": "dark-mode" + }, + "navigation": [ + { + "renderTitle": { + "text": "Products" + }, + "renderLinks": { + "items": [ + { + "url": "/products/platform", + "children": { "text": "Our Platform" } + }, + { + "url": "/products/pricing", + "children": { "text": "Pricing" } + }, + { + "url": "/products/integrations", + "children": { "text": "Integrations" } + } + ] + } + }, + { + "renderTitle": { + "text": "Resources" + }, + "renderLinks": { + "items": [ + { + "url": "/blog", + "children": { "text": "Blog" } + }, + { + "url": "/documentation", + "children": { "text": "Documentation" } + }, + { + "url": "/community", + "children": { "text": "Community Forum" } + } + ] + } + }, + { + "renderTitle": { + "text": "Company" + }, + "renderLinks": { + "items": [ + { + "url": "/about", + "children": { "text": "About Us" } + }, + { + "url": "/careers", + "children": { "text": "Careers" } + }, + { + "url": "/contact", + "children": { "text": "Contact Us" } + } + ] + } + } + ] +} diff --git a/patterns/organisms_landmarks/footer.schema.json b/patterns/organisms_landmarks/footer.schema.json new file mode 100644 index 0000000..bc3d638 --- /dev/null +++ b/patterns/organisms_landmarks/footer.schema.json @@ -0,0 +1,16 @@ +{ + "$id": "/patterns/molecules_regions/footer.schema", + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Footer Meta Item", + "type": "object", + "required": ["navigation", "meta"], + "properties": { + "meta": { + "$ref": "/patterns/molecules_regions/footer-meta-item.schema.json" + }, + "navigation": { + "type": "array", + "items": { "$ref": "/patterns/atoms_components/navigation.schema.json" } + } + } +} \ No newline at end of file From 88840b00d5dea27cc1f21b5c219b8c9b04598fe5 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Tue, 25 Aug 2026 15:59:23 -0400 Subject: [PATCH 02/12] feature(documentation): initial contrib guide --- patterns/docs/CONTRIBUTING.md | 121 ++++++++++++++++ .../guidance_common_elements_for_portals.md | 136 ++++++++++++------ .../footer-data.json | 0 3 files changed, 216 insertions(+), 41 deletions(-) create mode 100644 patterns/docs/CONTRIBUTING.md rename patterns/{organisms_landmarks => pages}/footer-data.json (100%) diff --git a/patterns/docs/CONTRIBUTING.md b/patterns/docs/CONTRIBUTING.md new file mode 100644 index 0000000..8e23aef --- /dev/null +++ b/patterns/docs/CONTRIBUTING.md @@ -0,0 +1,121 @@ +# Contributing + +## Check with our team + +When contributing to this repository, please first discuss the change you wish to make via issue, +email, or any other method with the owners of this repository before making a change. + +## Review our design system + +This is a mix of concepts between [atomic design][atomic-design-brad-frost] and [HTML elements reference][element] for a more deliberate and hierarchical manner to represent the components across the portals. + + +Pages +: Final User interface, fusions the template and the content. + +Templates +: Template consists of elements and groups of elements without data. + +Landmarks (Organisms): +: Complex user interfaces, they are subsections of a page, and we want the user to be able to navigate directly to them. + +Regions (Molecules) +: They are a group of elements that have a single responsibility. + +Components (Atoms) +: Non divisible element, part of the page. + +We based our decisions on well-known public organizations and their commitment to accessibility, so the list is not limited to: + - [The Government of Canada][canada] + - [The Government of UK][uk] + - [Atomic Design by Brad Frost][atomic-design-brad-frost] + - [MDN][MDN] + - [Splunk][splunk] + +You may merge the Pull Request in once you have the sign-off of two other developers, or if you + do not have permission to do that, you may request the second reviewer to merge it for you. + +## Code of Conduct + +### Our Pledge + +In the interest of fostering an open and welcoming environment, we as +contributors and maintainers pledge to making participation in our project and +our community a harassment-free experience for everyone, regardless of age, body +size, disability, ethnicity, gender identity and expression, level of experience, +nationality, personal appearance, race, religion, or sexual identity and +orientation. + +### Our Standards + +Examples of behavior that contributes to creating a positive environment +include: + +* Using welcoming and inclusive language +* Being respectful of differing viewpoints and experiences +* Gracefully accepting constructive criticism +* Focusing on what is best for the community +* Showing empathy towards other community members + +Examples of unacceptable behavior by participants include: + +* The use of sexualized language or imagery and unwelcome sexual attention or +advances +* Trolling, insulting/derogatory comments, and personal or political attacks +* Public or private harassment +* Publishing others' private information, such as a physical or electronic + address, without explicit permission +* Other conduct which could reasonably be considered inappropriate in a + professional setting + +### Our Responsibilities + +Project maintainers are responsible for clarifying the standards of acceptable +behavior and are expected to take appropriate and fair corrective action in +response to any instances of unacceptable behavior. + +Project maintainers have the right and responsibility to remove, edit, or +reject comments, commits, code, wiki edits, issues, and other contributions +that are not aligned to this Code of Conduct, or to ban temporarily or +permanently any contributor for other behaviors that they deem inappropriate, +threatening, offensive, or harmful. + +### Scope + +This Code of Conduct applies both within project spaces and in public spaces +when an individual is representing the project or its community. Examples of +representing a project or community include using an official project e-mail +address, posting via an official social media account, or acting as an appointed +representative at an online or offline event. Representation of a project may be +further defined and clarified by project maintainers. + +### Enforcement + +Instances of abusive, harassing, or otherwise unacceptable behavior may be +reported by contacting the project team at [INSERT EMAIL ADDRESS]. All +complaints will be reviewed and investigated and will result in a response that +is deemed necessary and appropriate to the circumstances. The project team is +obligated to maintain confidentiality with regard to the reporter of an incident. +Further details of specific enforcement policies may be posted separately. + +Project maintainers who do not follow or enforce the Code of Conduct in good +faith may face temporary or permanent repercussions as determined by other +members of the project's leadership. + +### Attribution + +This Code of Conduct is adapted from the [Contributor Covenant][homepage] + +[homepage]: http://contributor-covenant.org + +[canada]: https://design-system.canada.ca + +[uk]: https://design-system.service.gov.uk + +[atomic-design-brad-frost]: https://atomicdesign.bradfrost.com + +[MDN]: https://developer.mozilla.org/en-US/docs/Learn_web_development/Howto/Design_and_accessibility + +[splunk]: https://splunkui.splunk.com/DesignSystem/DesignPrinciples#splunk-ui-design-system-principles + +[element]: https://developer.mozilla.org/en-US/docs/Web/API/Element diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index e6ca812..00e95b5 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -1,39 +1,54 @@ +_Under construction_ 🏗️ + # Guidance for common elements across portals. -## Contents +We value contributions and feedback and want you to contribute effectively. To make your contribution experience as smooth as possible [please reach out to us first][contrib]. + +# Contents -Pages -Templates -Landmarks (Organisms ) -Regions (Molecules) -Components (Atoms) +## Pages 📑 +- [ ] Terms and conditions +>[!TIP] +> For example Canada includes the following: +> _[Terms and conditions](https://www.justice.gc.ca/eng/terms-avis/index.html#usa)_. +- [ ] Disclaimer +>[!TIP] +> For example illumina includes the following disclaimer: +> _For Research Use Only, Not for use in diagnostic procedures (except as specifically noted)_. -## Footer -For the footer, my first option was based on well-known public organizations and their commitment to a11y, so I got inspiration from the Government of Canada and the Government of UK. +## Templates +### Footer Definition of elements inside the footer. + +> [!NOTE] _What elements are mandatory and optional to us?_ +> +> The **meta information** is mandatory. + + For the elements inside a footer, let's combine what we know with the resources we want to mimic, like the UK Government. For this particular case, we used Nielsen Norman Group guidelines, which outline what a common user looks for in a footer. -For example illumina include the following disclaimer: -> For Research Use Only, Not for use in diagnostic procedures (except as specifically noted). + - Contextual header and links + - Secondary header and navigation items + - Links to our services + - Terms and conditions + - Image Logo + + +Example: +```
{{ contextual header }} {{ contextual links }} {{ images }} -{{ Your services links }} // links to your services: ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text. {{ Secondary navigation }} // links out of your service +{{ Your services links }} // links to your services: ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text. {{ meta information }}
+``` -# What elements are mandatory and optional for us? -Only the meta information should be mandatory. - -## The meta information is mandatory. -- Terms and conditions -- Image Logo - -## Visual representation +Visual representation ```mermaid --- @@ -47,48 +62,67 @@ treemap-beta "Meta Footer" "Terms and conditions": 80 "Image Logo": 20 - "Navigation Links": 80 + "Navigation Links": 100 + "Services Links": 100 + "Contextual Links" + "Header": 20 + "Links": 80 ``` -## Specific to our case -### Contact and support links +Specific to our case +Contact and support links - Help, questions and comments - Privacy policy - Accessibility statement - Terms and conditions -### Navigation links +Navigation links - Languages - License - Copyright -### Images +Images - Image Logo -## Authentication Components -Login / Sign In: Usually positioned in the top right header. -Register / Create Account: For new users. -Forgot Password / Account Recovery: A critical flow for users who lose access. -Multi-Factor Authentication (MFA): Secondary verification prompts (e.g., SMS, Authenticator apps). -Session Timeout Warning: A modal or banner that warns users before they are automatically logged out. -My Profile / Account Settings: The authenticated state that replaces the "Login" button. +### Authentication Components +Definition of elements inside the Auth. +Login / Sign In +: Usually positioned in the top right header. + +Register / Create Account +: For new users. + +Forgot Password / Account Recovery +: A critical flow for users who lose access. + +Multi-Factor Authentication (MFA) +: Secondary verification prompts (e.g., SMS, Authenticator apps). + +Session Timeout Warning +: A modal or banner that warns users before they are automatically logged out. + +My Profile / Account Settings +: The authenticated state that replaces the "Login" button. Sign Out / Log Out. -## Header structure +### Header structure For the header we can organize the elements in the following way: +```
{{ Image Logo link to home. }} {{ Search bar. }} {{ Menu options. }} {{ Authentication components. }}
- -## Account creation and login experience +``` +Account creation and login experience +: For the oauth page we can mimic a technology product. Integrate https://cilogon.org/example/ in the flow. After Click in Log in: +```
// inside main {{Header and welcoming message}}
@@ -98,8 +132,11 @@ After Click in Log in: {{ List of sign up or sign in options }} // passkey, Google, ... {{ By proceeding, you agree to the Terms of Service and Privacy Notice }}
+``` -After submit the form: +After submit the form +: +```
// inside main {{Header and welcoming message}} @@ -111,39 +148,56 @@ After submit the form: {{ Use a different account link }} {{ Forgot password link }} // only visible if user exist
+``` If is a new user we confirm the email. -## Error pages +### Error pages The error page will have a indirect error cause message followed by the http status code. - +```
{{ Header with the Response status text group }} // Page not found {{ Instructions to go back - Link}} {{ response status code and specific text}} {{ Report and feedback form}} // Is this page useful? Yes No [Report a problem Form ]
- +``` the form could be something like: ``` Help us improve [Name of service] - Do not include personal or financial information like your National Insurance number or credit card details. What were you doing? What went wrong? ``` -## User profile/account controls +## Landmarks (Organisms) +### User profile/account controls After login the header shows the user menu instead of the log in. +``` // Hamburger button with two elements "My settings" and "Sign out" {{ My settings }} {{ Sign out }} +``` The settings page will have 2 sections: User Profile and security. And, the delete account link. -## Menu options +### Menu options At the moment one element to change the language. +## Regions (Molecules) +- Contextual header and links +- Secondary header and navigation items +- API Tokens list + +## Components (Atoms) +- Headers +- Text +- Link +- Button + +## References + +[contrib]: patterns/docs/CONTRIBUTING.md. \ No newline at end of file diff --git a/patterns/organisms_landmarks/footer-data.json b/patterns/pages/footer-data.json similarity index 100% rename from patterns/organisms_landmarks/footer-data.json rename to patterns/pages/footer-data.json From b2d03098bb2d5610f0eb976f34eca410e7784e06 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Wed, 26 Aug 2026 10:55:59 -0400 Subject: [PATCH 03/12] feature(documentation): grammar check --- patterns/docs/CONTRIBUTING.md | 14 +++++----- .../guidance_common_elements_for_portals.md | 28 +++++++++---------- 2 files changed, 21 insertions(+), 21 deletions(-) diff --git a/patterns/docs/CONTRIBUTING.md b/patterns/docs/CONTRIBUTING.md index 8e23aef..d50b4b0 100644 --- a/patterns/docs/CONTRIBUTING.md +++ b/patterns/docs/CONTRIBUTING.md @@ -11,19 +11,19 @@ This is a mix of concepts between [atomic design][atomic-design-brad-frost] and Pages -: Final User interface, fusions the template and the content. +: Final user interface that fuses the template and the content. Templates -: Template consists of elements and groups of elements without data. +: Templates consist of elements and groups of elements without data. -Landmarks (Organisms): -: Complex user interfaces, they are subsections of a page, and we want the user to be able to navigate directly to them. +Landmarks (Organisms) +: Complex user interfaces; these are subsections of a page that we want the user to be able to navigate directly to. Regions (Molecules) -: They are a group of elements that have a single responsibility. +: A group of elements that has a single responsibility. Components (Atoms) -: Non divisible element, part of the page. +: A non-divisible element that is part of the page. We based our decisions on well-known public organizations and their commitment to accessibility, so the list is not limited to: - [The Government of Canada][canada] @@ -32,7 +32,7 @@ We based our decisions on well-known public organizations and their commitment t - [MDN][MDN] - [Splunk][splunk] -You may merge the Pull Request in once you have the sign-off of two other developers, or if you +You may merge the Pull Request once you have the sign-off of two other developers, or if you do not have permission to do that, you may request the second reviewer to merge it for you. ## Code of Conduct diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index 00e95b5..520e15b 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -1,8 +1,8 @@ _Under construction_ 🏗️ -# Guidance for common elements across portals. +# Guide for common elements across portals. -We value contributions and feedback and want you to contribute effectively. To make your contribution experience as smooth as possible [please reach out to us first][contrib]. +We value contributions and feedback and want you to contribute effectively. To make your contribution experience as smooth as possible, [please reach out to us first][contrib]. # Contents @@ -10,11 +10,11 @@ We value contributions and feedback and want you to contribute effectively. To m - [ ] Terms and conditions >[!TIP] -> For example Canada includes the following: +> For example, Canada includes the following: > _[Terms and conditions](https://www.justice.gc.ca/eng/terms-avis/index.html#usa)_. - [ ] Disclaimer >[!TIP] -> For example illumina includes the following disclaimer: +> For example, Illumina includes the following disclaimer: > _For Research Use Only, Not for use in diagnostic procedures (except as specifically noted)_. ## Templates @@ -22,7 +22,7 @@ We value contributions and feedback and want you to contribute effectively. To m ### Footer Definition of elements inside the footer. -> [!NOTE] _What elements are mandatory and optional to us?_ +> [!NOTE] _What elements are mandatory and optional for us?_ > > The **meta information** is mandatory. @@ -86,7 +86,7 @@ Images - Image Logo ### Authentication Components -Definition of elements inside the Auth. +Definition of elements inside the authentication components. Login / Sign In : Usually positioned in the top right header. @@ -118,23 +118,23 @@ For the header we can organize the elements in the following way: ``` Account creation and login experience : -For the oauth page we can mimic a technology product. +For the OAuth page, we can mimic a technology product. Integrate https://cilogon.org/example/ in the flow. -After Click in Log in: +After clicking Log in: ```
// inside main {{Header and welcoming message}} {{ Enter your email }} - {{ Sign up or sing in submit button }} + {{ Sign up or sign in submit button }} {{ List of sign up or sign in options }} // passkey, Google, ... {{ By proceeding, you agree to the Terms of Service and Privacy Notice }}
``` -After submit the form +After submitting the form : ```
// inside main @@ -150,11 +150,11 @@ After submit the form
``` -If is a new user we confirm the email. +If it is a new user, we confirm the email. ### Error pages -The error page will have a indirect error cause message followed by the http status code. +The error page will have an indirect error cause message followed by the HTTP status code. ```
{{ Header with the Response status text group }} // Page not found @@ -173,7 +173,7 @@ What went wrong? ## Landmarks (Organisms) ### User profile/account controls -After login the header shows the user menu instead of the log in. +After logging in, the header shows the user menu instead of the login. ``` // Hamburger button with two elements "My settings" and "Sign out" {{ My settings }} @@ -185,7 +185,7 @@ The settings page will have 2 sections: User Profile and security. And, the dele ### Menu options -At the moment one element to change the language. +At the moment, there is one element to change the language. ## Regions (Molecules) - Contextual header and links From 3a2f6a0302be488bbe91d5b7b7551f52a57ba299 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Wed, 26 Aug 2026 19:43:04 -0400 Subject: [PATCH 04/12] feature(documentation): add grammar check and contents to the main guide --- patterns/docs/users_personas.md | 98 ++++++++++++++ .../guidance_common_elements_for_portals.md | 127 ++++++++++++++---- 2 files changed, 196 insertions(+), 29 deletions(-) create mode 100644 patterns/docs/users_personas.md diff --git a/patterns/docs/users_personas.md b/patterns/docs/users_personas.md new file mode 100644 index 0000000..bd803e1 --- /dev/null +++ b/patterns/docs/users_personas.md @@ -0,0 +1,98 @@ +# PCGL User Personas and Context + +This document outlines the user personas, their actions (verbs), and their relationships with the system elements within the Pan-Canadian Genome Library (PCGL) platform. + +## System Context Diagram + +```mermaid +C4Context + title PCGL Platform - User Personas and Context Diagram + + Enterprise_Boundary(pcgl, "Pan-Canadian Genome Library (PCGL)") { + System(admin_tools, "Administration & Identity", "COManage, OIDC, System Config") + System(submission_sys, "Data Submission System", "Score CLI, Song manifests, Schema validation") + System(daco_portal, "DACO Portal", "Data Access Committee operations and applications") + System(research_portal, "Research Portal", "Data discovery and access") + System(tre, "TRE (Trusted Research Environment)", "Secure data analysis environment") + System(participant_portal, "Participant Portal", "PHI isolated, consent management") + System(reporting_module, "Reporting Module", "Compliance, QC, milestones") + System(infrastructure, "SD4H Infrastructure", "K8s, Globus, S3, Pipelines") + } + + %% Personas - Administrative & Support + Person(super_admin, "Super-Admin", "Highest privilege group.") + Person(data_admin, "Data Admin", "Manages data-related administrative operations.") + Person(op_support, "Operational Support", "Assists data submitters with onboarding and setup.") + Person(devops, "DevOps & Infrastructure", "Manages SD4H Kubernetes clusters, monitoring, backups.") + + %% Personas - Data Submission & Research + Person(submitter, "Data Submitter", "Submits clinical and/or genomic data to a specific study.") + Person(researcher, "Researcher", "Discovers data and requests access.") + Person(daco_collaborator, "DACO Collaborator", "Project members wanting controlled data access.") + Person(signing_official, "Signing Official", "Legally commits entity to data access agreements.") + + %% Personas - Governance + Person(dac_chair, "DAC Chair", "Issues final approval or rejection of data access requests.") + Person(dac_member, "DAC Member", "Views and reviews submitted data access applications.") + Person(daco_admin, "DACO Admin", "Admin of the PCGL DACO Portal.") + + %% Personas - Other + Person(participant, "Study Participant", "Interacts with the Participant Portal.") + Person(funder, "Funding Body Rep", "Views compliance reports and project milestones.") + + System_Ext(external_platforms, "External Platforms", "gnomAD, Cloud Analysis (GA4GH APIs)") + + %% Relationships - Administrative + Rel(super_admin, admin_tools, "Manages groups, OIDC, config, roles") + Rel(data_admin, admin_tools, "Registers studies, schemas, assigns submitters") + Rel(data_admin, submission_sys, "Flags submissions as validated, configures settings") + Rel(op_support, submission_sys, "Creates studies, registers participants, wrangles data, submits on behalf") + Rel(devops, infrastructure, "Manages clusters, backups, storage, deploys, monitors health") + Rel(devops, tre, "Provisions TRE instances") + + %% Relationships - Submission + Rel(submitter, submission_sys, "Uploads clinical TSV, deposits files via Score CLI, registers Song manifests") + + %% Relationships - Research & Access + Rel(researcher, research_portal, "Discovers data") + Rel(researcher, daco_portal, "Requests access") + Rel(researcher, tre, "Accesses individual-level data for approved studies, exports data") + Rel(signing_official, daco_portal, "Signs Data Access Applications") + Rel(daco_collaborator, daco_portal, "Requests access to controlled data") + + %% Relationships - Governance + Rel(dac_chair, daco_portal, "Approves, rejects, or revokes data access requests") + Rel(dac_member, daco_portal, "Reviews applications, requests clarifications") + Rel(daco_admin, daco_portal, "Imports, activates, and deactivates studies") + + %% Relationships - Other + Rel(participant, participant_portal, "Provides e-consent, views data usage, withdraws consent, updates contact") + Rel(funder, reporting_module, "Views reports, QC metrics, data ingestion status (Read-only)") + Rel(external_platforms, research_portal, "Accesses PCGL data programmatically via GA4GH APIs") + + UpdateLayoutConfig($c4ShapeInRow="3", $c4BoundaryInRow="2") +``` + +## Persona Definitions + +### Administrative & Infrastructure Support +* **Super-Admin:** Full super-admin access to the PCGL platform. Can manage all COManage groups, OIDC clients, enrollment flows, and system-wide configuration. Can create new roles and designate other admins. This is the highest-privilege group. +* **Data Admin:** Manages data-related administrative operations across the platform. Can register new studies, register custom schemas, assign data submitters to studies, flag submissions as validated, and configure data-related settings. Does not have system-level infrastructure access. +* **Operational Support:** Operational support staff who assist data submitters with onboarding, study setup, and submission issues. Can create studies, register participants, perform data wrangling, and manage day-to-day submission operations (including submitting clinical and genomics data on behalf of a data submitter). Does not have system admin access, only create/edit data permissions. +* **DevOps & Infrastructure:** DevOps and infrastructure staff responsible for managing the SD4H Kubernetes clusters, monitoring, backups, disaster recovery, storage management, and service deployments. Can trigger pipeline runs, manage Globus endpoints, manage S3 buckets and keys, provision TRE instances, and monitor all system health. Does not make data governance or access decisions. + +### Data Submission & Research +* **Data Submitter:** Submits clinical and/or genomic data to a specific study. Can upload clinical TSV/metadata, deposit genomic files via Score CLI, register file metadata with Song manifests, register participants, validate data against schemas, and view submission status. Scoped strictly to the studies they are assigned to. +* **Researcher:** Any authenticated user who discovers data through the Research Portal and/or requests access through the DACO portal. Before access approval, can log into the research portal and DACO portal. After DAC approval, can view individual-level data for approved studies, export/download approved data, and access the TRE. A researcher may also be a data_submitter for a different study. +* **Signing Official:** Signing official of any Data Access Application. They must be a qualified representative of a legal entity who has the administrative power to legally commit that entity to the terms and conditions of the data access agreement. Examples of institutional representatives include, but are not limited to: a Vice-President Research, a Research Director, or a Contracts Officer for the entity. +* **DACO Collaborator:** Researchers or post-docs or students who are part of a project as the applicant, and want to access controlled data for research purposes. + +### Data Governance (DACO) +* **DAC Chair:** Chair of a Data Access Committee. The only role that can issue final approval or rejection of data access requests in the DACO portal. Can also revoke previously granted access. Currently there is only one DAC for PCGL. A Local DAC is a DAC independent of the PCGL DAC and controls data access for studies under its governance. Only one Chair is allowed for Local DAC users. +* **DAC Member:** Member of a Data Access Committee who can view and review submitted data access applications, add review comments, and request clarifications from applicants. Cannot approve or reject applications, as only the DAC Chair can make final decisions. +* **DACO Admin:** Admin of the PCGL DACO Portal. The admin has two responsibilities: 1. Import studies. 2. Activate/Deactivate studies. + +### Other Participants & External Entities +* **Study Participant:** A study participant who interacts with the Participant Portal. Can provide electronic consent, view how their data is used, see study results/summaries, withdraw consent, discover new research opportunities, and update their contact information. The Participant Portal contains PHI and is isolated from other PCGL components. Participants authenticate separately from other PCGL users. +* **Funding Body Rep:** Representatives of funding bodies (e.g., Genome Canada) who need to view compliance reports, QC metrics, data ingestion status, and project milestones for the projects they fund. Access is read-only and limited to the Reporting Module. Do not interact with data directly. +* **External Platforms:** External platforms and applications (e.g., gnomAD, commercial cloud analysis solutions) that access PCGL data programmatically via GA4GH APIs (DRS, htsget, refget). Authenticated via registered OIDC clients or API keys rather than individual user credentials. Access is scoped to authorized datasets. diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index 520e15b..a7e5f04 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -6,6 +6,19 @@ We value contributions and feedback and want you to contribute effectively. To m # Contents +- [Pages 📑](#pages-) +- [Templates](#templates) + - [Footer](#footer) + - [Header structure](#header-structure) + - [Error pages](#error-pages) +- [Landmarks (Organisms)](#landmarks-organisms) + - [User profile/account controls](#user-profileaccount-controls) + - [Menu options](#menu-options) +- [Regions (Molecules)](#regions-molecules) + - [Authentication Components](#authentication-components) +- [Components (Atoms)](#components-atoms) +- [References](#references) + ## Pages 📑 - [ ] Terms and conditions @@ -85,43 +98,68 @@ Navigation links Images - Image Logo -### Authentication Components -Definition of elements inside the authentication components. -Login / Sign In -: Usually positioned in the top right header. - -Register / Create Account -: For new users. - -Forgot Password / Account Recovery -: A critical flow for users who lose access. - -Multi-Factor Authentication (MFA) -: Secondary verification prompts (e.g., SMS, Authenticator apps). - -Session Timeout Warning -: A modal or banner that warns users before they are automatically logged out. - -My Profile / Account Settings -: The authenticated state that replaces the "Login" button. -Sign Out / Log Out. ### Header structure For the header we can organize the elements in the following way: ```
+{{ Menu options. }} {{ Image Logo link to home. }} {{ Search bar. }} -{{ Menu options. }} {{ Authentication components. }}
``` -Account creation and login experience + +Visual representation + +```mermaid +--- +config: + treemap: + showValues: false +--- + +treemap-beta +"Header" + "Menu": 20 + "Link" + "Image Logo": 20 + "Search Bar": 20 + "Authentication" + "Menu": 20 + +``` + +Login experience +: +The user experience is provided by CILogon, example: + +```mermaid + +sequenceDiagram + autonumber + actor User + participant RA as Research App + participant CP as CILogon Proxy + participant IdP as Campus IdP + participant CO as COmanage / JWT + + User->>RA: Attempts to access app + RA->>CP: Redirect to Proxy + CP->>User: Prompt for Institution Discovery + User->>CP: Selects Campus + CP->>IdP: Select & Redirect + IdP->>User: Prompt for Credentials + User->>IdP: Authenticates + IdP->>CO: SAML Assertion (AuthnResponse) + Note over CP,CO: CILogon and COmanage process claims/groups + CO->>RA: Issue Token (JWT) + RA->>User: Grant Access +``` + +After attempting to access the app, the user will be redirected to their institution. We cannot know exactly what the institution's login components look like, but they might be similar to the following example. : -For the OAuth page, we can mimic a technology product. -Integrate https://cilogon.org/example/ in the flow. -After clicking Log in: ```
// inside main {{Header and welcoming message}} @@ -129,7 +167,7 @@ After clicking Log in: {{ Enter your email }} {{ Sign up or sign in submit button }} - {{ List of sign up or sign in options }} // passkey, Google, ... + {{ List of sign up or sign in options }} // passkey, Google, Institution... {{ By proceeding, you agree to the Terms of Service and Privacy Notice }}
``` @@ -146,11 +184,11 @@ After submitting the form {{ By proceeding, you agree to the Terms of Service and Privacy Notice }} {{ Use a different account link }} - {{ Forgot password link }} // only visible if user exist + {{ Forgot password link }} // only visible if user exists ``` -If it is a new user, we confirm the email. +If it is a new user, we confirm their email address. ### Error pages @@ -191,6 +229,34 @@ At the moment, there is one element to change the language. - Contextual header and links - Secondary header and navigation items - API Tokens list +### Authentication Components +Definition of elements inside the authentication components. + + +> [!NOTE] _What elements are mandatory and optional for us?_ +> +> The **CILogon Identity Provider Button** is mandatory. + + +Login / Sign In / Sign Out / Log Out. +: The login experience is provided by the CILogon Identity Provider. For example, see https://cilogon.org/example/ +: +
+ + +
+ + +>[!TIP] CILogon has several [customization options][cilogon-config] which change the behavior and/or content of the CILogon website. + +My Profile / Account Settings +: The authenticated state that replaces the "Login" button. +The authentication settings are managed by the identity provider organization, for example: + ## Components (Atoms) - Headers @@ -200,4 +266,7 @@ At the moment, there is one element to change the language. ## References -[contrib]: patterns/docs/CONTRIBUTING.md. \ No newline at end of file +[contrib]: patterns/docs/CONTRIBUTING.md. +[cilogon-device]: https://www.cilogon.org/device +[cilogon-skin]: https://www.cilogon.org/skins#h.52ndu647pi2y +[cilogon-config]: https://cilogon.org/skin/config-example.xml \ No newline at end of file From 2d82b1cfa5ff9030f8ad59151017c460043b024d Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Wed, 26 Aug 2026 22:20:04 -0400 Subject: [PATCH 05/12] feature(documentation): adding structure linking resources and now is more easy to read --- .../guidance_common_elements_for_portals.md | 126 +++++++++++++----- .../footer-meta-item.schema.json | 3 - 2 files changed, 95 insertions(+), 34 deletions(-) diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index a7e5f04..14e9c4f 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -4,9 +4,15 @@ _Under construction_ 🏗️ We value contributions and feedback and want you to contribute effectively. To make your contribution experience as smooth as possible, [please reach out to us first][contrib]. +### How to read this guide +Throughout this document, you will see HTML structures containing tokens like `{{ my_design_token }}`. This logicless syntax represents dynamic data. +- **For Designers:** These tokens represent the elements or text nodes that need to be accounted for in your designs. +- **For Developers:** Every token maps directly to a property in a corresponding `*.schema.json` file. These schemas dictate the strict data contract your React components must accept as props. + + # Contents -- [Pages 📑](#pages-) +- [Pages](#pages) - [Templates](#templates) - [Footer](#footer) - [Header structure](#header-structure) @@ -19,7 +25,7 @@ We value contributions and feedback and want you to contribute effectively. To m - [Components (Atoms)](#components-atoms) - [References](#references) -## Pages 📑 +## Pages - [ ] Terms and conditions >[!TIP] @@ -50,18 +56,27 @@ For the elements inside a footer, let's combine what we know with the resources Example: -``` +```html
-{{ contextual header }} -{{ contextual links }} -{{ images }} -{{ Secondary navigation }} // links out of your service -{{ Your services links }} // links to your services: ‘Privacy’, ‘Accessibility’, ‘Cookies’ and ‘Terms and conditions’ for the link text. -{{ meta information }} + {{ contextual_header }} + {{ contextual_links }} + {{ images }} + {{ secondary_navigation }} + {{ services_links }} + {{ meta_information }}
``` -Visual representation +| Design Token | Schema (Property) | Description | +| --- | --- | --- | +| `{{ contextual_header }}` | [`navigation.schema.json#/properties/renderTitle`][navigation-schema] | The title of the contextual area. | +| `{{ contextual_links }}` | [`navigation.schema.json#/properties/renderLinks`][navigation-schema] | Links providing context to the current page. | +| `{{ images }}` | [`avatar.schema.json`][avatar-schema] | Logos or visual elements displayed in the footer. | +| `{{ secondary_navigation }}` | [`navigation.schema.json`][navigation-schema] | Links leading out of the service or to secondary areas. | +| `{{ services_links }}` | [`navigation.schema.json`][navigation-schema] | Core service links like Privacy, Accessibility, Cookies, etc. | +| `{{ meta_information }}` | [`footer-meta-item.schema.json`][footer-meta-schema] | Mandatory copyright or meta details. | + +**Visual representation** ```mermaid --- @@ -83,33 +98,48 @@ treemap-beta ``` -Specific to our case -Contact and support links +**Specific to our case** + +**_Contact and support links_** - Help, questions and comments - Privacy policy - Accessibility statement - Terms and conditions -Navigation links +**_Navigation links_** - Languages - License - Copyright -Images +**_Images_** - Image Logo +**_Services_** +- Administration & Identity +- Data Submission System +- Research Portal +- Participant Portal +- SD4H Infrastructure + ### Header structure For the header we can organize the elements in the following way: -``` +```html
-{{ Menu options. }} -{{ Image Logo link to home. }} -{{ Search bar. }} -{{ Authentication components. }} + {{ menu_options }} + {{ image_logo }} + {{ search_bar }} + {{ authentication_components }}
``` +| Template Token | Schema Property | Description | +| --- | --- | --- | +| `{{ menu_options }}` | [`todo.schema.json#/properties/menuOptions`](./schemas/header.schema.json) | List of navigation items for the main menu. | +| `{{ image_logo }}` | [`link.schema.json`][link-schema] | URL, alt text, and link for the portal's logo. | +| `{{ search_bar }}` | [`todo.schema.json#/properties/searchBar`](./schemas/header.schema.json) | Configuration for the search input component. | +| `{{ authentication_components }}` | [Authentication Components](#authentication-components) | User profile, login, or settings controls. | + Visual representation ```mermaid @@ -129,10 +159,12 @@ treemap-beta "Menu": 20 ``` - -Login experience +### Login +**Login experience** : -The user experience is provided by CILogon, example: +The user experience is provided by CILogon. For example: +> [!CAUTION] +> For the real specs visit the IAM documentation. ```mermaid @@ -187,9 +219,7 @@ After submitting the form {{ Forgot password link }} // only visible if user exists ``` - -If it is a new user, we confirm their email address. - +You should be forwarder to the PCGL app. ### Error pages The error page will have an indirect error cause message followed by the HTTP status code. @@ -201,7 +231,7 @@ The error page will have an indirect error cause message followed by the HTTP st {{ Report and feedback form}} // Is this page useful? Yes No [Report a problem Form ]
``` -the form could be something like: +The form could be something like: ``` Help us improve [Name of service] Do not include personal or financial information like your National Insurance number or credit card details. @@ -219,7 +249,14 @@ After logging in, the header shows the user menu instead of the login. ``` -The settings page will have 2 sections: User Profile and security. And, the delete account link. + +
+🚧 Account settings (Work in Progress) + +The settings page will have two sections: User Profile and Security, as well as a link to delete the account. +What information is available ? `voPerson` ? +
+ ### Menu options @@ -259,14 +296,41 @@ The authentication settings are managed by the identity provider organization, f ## Components (Atoms) -- Headers - Text -- Link +- [Link][link-schema] - Button ## References -[contrib]: patterns/docs/CONTRIBUTING.md. +### Design Guidelines +- [Nielsen Norman Group: Footers](https://www.nngroup.com/articles/footers/) +- [GOV.UK Design System](https://design-system.service.gov.uk/) + +### Authentication (CILogon) +- [CILogon Device Setup][cilogon-device] +- [CILogon Skin Customization][cilogon-skin] +- [CILogon Configuration Example][cilogon-config] + +### Internal Documentation +- [Contribution Guidelines][contrib] +- [Footer components][footer-data] +- [Footer schema][footer-schema] +- [Footer meta item schema][footer-meta-schema] +- [Navigation schema][navigation-schema] +- [Link schema][link-schema] +- [Avatar schema][avatar-schema] + + + +[contrib]: patterns/docs/CONTRIBUTING.md [cilogon-device]: https://www.cilogon.org/device [cilogon-skin]: https://www.cilogon.org/skins#h.52ndu647pi2y -[cilogon-config]: https://cilogon.org/skin/config-example.xml \ No newline at end of file +[cilogon-config]: https://cilogon.org/skin/config-example.xml +[footer-data]: ./pages/footer-data.json +[footer-schema]: ./organisms_landmarks/footer.schema.json +[footer-meta-schema]: ./molecules_regions/footer-meta-item.schema.json +[navigation-schema]: ./atoms_components/navigation.schema.json +[link-schema]: ./atoms_components/link.schema.json +[avatar-schema]: ./atoms_components/avatar.schema.json +[menu_options]: ./# +[search_bar]: ./# diff --git a/patterns/molecules_regions/footer-meta-item.schema.json b/patterns/molecules_regions/footer-meta-item.schema.json index 83ae3ca..01f8f3a 100644 --- a/patterns/molecules_regions/footer-meta-item.schema.json +++ b/patterns/molecules_regions/footer-meta-item.schema.json @@ -10,9 +10,6 @@ }, "logo": { "$ref": "/patterns/atoms_components/avatar.schema.json" - }, - "variant": { - "type": "string" } } } \ No newline at end of file From 9e2179443c34c9872e57183d3e2d82650b918d18 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Fri, 28 Aug 2026 12:08:05 -0400 Subject: [PATCH 06/12] feature(documentation): adding the schema for the header --- patterns/atoms_components/avatar.schema.json | 2 +- patterns/atoms_components/link.schema.json | 2 +- .../atoms_components/navigation.schema.json | 6 +- patterns/docs/CONTRIBUTING.md | 4 +- .../guidance_common_elements_for_portals.md | 204 +++++++++++------- .../footer-meta-item.schema.json | 2 +- .../organisms_landmarks/footer.schema.json | 6 +- .../organisms_landmarks/header.schema.json | 21 ++ 8 files changed, 159 insertions(+), 88 deletions(-) create mode 100644 patterns/organisms_landmarks/header.schema.json diff --git a/patterns/atoms_components/avatar.schema.json b/patterns/atoms_components/avatar.schema.json index 2ea7d0d..fd06ea2 100644 --- a/patterns/atoms_components/avatar.schema.json +++ b/patterns/atoms_components/avatar.schema.json @@ -1,5 +1,5 @@ { - "$id": "/patterns/atoms_components/avatar.schema", + "$id": "atoms_components/avatar.schema", "$schema": "http://json-schema.org/draft-07/schema#", "title": "Avatar", "type": "object", diff --git a/patterns/atoms_components/link.schema.json b/patterns/atoms_components/link.schema.json index 72bb8a1..8d863be 100644 --- a/patterns/atoms_components/link.schema.json +++ b/patterns/atoms_components/link.schema.json @@ -1,5 +1,5 @@ { - "$id": "/patterns/atoms_components/link.schema", + "$id": "atoms_components/link.schema", "$schema": "http://json-schema.org/draft-07/schema#", "title": "Link", "type": "object", diff --git a/patterns/atoms_components/navigation.schema.json b/patterns/atoms_components/navigation.schema.json index 2a0449d..66a9fa9 100644 --- a/patterns/atoms_components/navigation.schema.json +++ b/patterns/atoms_components/navigation.schema.json @@ -1,13 +1,13 @@ { - "$id": "/patterns/atoms_components/navigation.schema", + "$id": "atoms_components/navigation.schema", "$schema": "http://json-schema.org/draft-07/schema#", "title": "Navigation", "type": "object", "properties": { - "renderLinks": { + "render_links": { "type": "object" }, - "renderTitle": { + "render_title": { "type": "object" } }, diff --git a/patterns/docs/CONTRIBUTING.md b/patterns/docs/CONTRIBUTING.md index d50b4b0..220a8a4 100644 --- a/patterns/docs/CONTRIBUTING.md +++ b/patterns/docs/CONTRIBUTING.md @@ -11,10 +11,10 @@ This is a mix of concepts between [atomic design][atomic-design-brad-frost] and Pages -: Final user interface that fuses the template and the content. +: The data inserted in the designs. Final user interface that fuses the template and the content. Templates -: Templates consist of elements and groups of elements without data. +: Designs without data. Templates consist of elements and groups of elements without data. Landmarks (Organisms) : Complex user interfaces; these are subsections of a page that we want the user to be able to navigate directly to. diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index 14e9c4f..d5cf196 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -1,4 +1,4 @@ -_Under construction_ 🏗️ + # Guide for common elements across portals. @@ -9,16 +9,27 @@ Throughout this document, you will see HTML structures containing tokens like `{ - **For Designers:** These tokens represent the elements or text nodes that need to be accounted for in your designs. - **For Developers:** Every token maps directly to a property in a corresponding `*.schema.json` file. These schemas dictate the strict data contract your React components must accept as props. +> [!WARNING] +> **_Under construction labels_** +> +> Consider slowing down in the sections that contain the _Under construction_ symbols: 🚧 🏗️ 👷🏾‍♀️ 🦺 ⚠️ +> This document will point out the work in progress using construction symbols. + +At the moment, we face some challenges trying to standardize the design token language. The aim is to follow a standard so any app will be competent enough to translate the design tokens into code or visualizations. We have chosen JSON given its versatility in representing data. + - [ ] [Modular schemas ⚠️ 🏗️](https://json-schema.org/understanding-json-schema/structuring) If in the future we have a CMS. + # Contents - [Pages](#pages) - [Templates](#templates) - - [Footer](#footer) - - [Header structure](#header-structure) + - [Footer](#footer-template) + - [Header structure](#header-template) - [Error pages](#error-pages) - [Landmarks (Organisms)](#landmarks-organisms) - - [User profile/account controls](#user-profileaccount-controls) + - [Header](#header) + - [Footer](#footer) + - [User profile/account controls](#account-settings) - [Menu options](#menu-options) - [Regions (Molecules)](#regions-molecules) - [Authentication Components](#authentication-components) @@ -27,54 +38,24 @@ Throughout this document, you will see HTML structures containing tokens like `{ ## Pages -- [ ] Terms and conditions +- [ ] ⚠️ 🏗️ Terms and conditions >[!TIP] > For example, Canada includes the following: > _[Terms and conditions](https://www.justice.gc.ca/eng/terms-avis/index.html#usa)_. -- [ ] Disclaimer +- [ ] ⚠️ 🏗️ Disclaimer >[!TIP] > For example, Illumina includes the following disclaimer: > _For Research Use Only, Not for use in diagnostic procedures (except as specifically noted)_. +- [ ] ⚠️ 🏗️ Header +- [ ] ⚠️ 🏗️ Footer +- [ ] ⚠️ 🏗️ User settings +- [ ] ⚠️ 🏗️ Menu -## Templates - -### Footer -Definition of elements inside the footer. - -> [!NOTE] _What elements are mandatory and optional for us?_ -> -> The **meta information** is mandatory. - - -For the elements inside a footer, let's combine what we know with the resources we want to mimic, like the UK Government. For this particular case, we used Nielsen Norman Group guidelines, which outline what a common user looks for in a footer. - - Contextual header and links - - Secondary header and navigation items - - Links to our services - - Terms and conditions - - Image Logo - - -Example: -```html -
- {{ contextual_header }} - {{ contextual_links }} - {{ images }} - {{ secondary_navigation }} - {{ services_links }} - {{ meta_information }} -
-``` +## Templates -| Design Token | Schema (Property) | Description | -| --- | --- | --- | -| `{{ contextual_header }}` | [`navigation.schema.json#/properties/renderTitle`][navigation-schema] | The title of the contextual area. | -| `{{ contextual_links }}` | [`navigation.schema.json#/properties/renderLinks`][navigation-schema] | Links providing context to the current page. | -| `{{ images }}` | [`avatar.schema.json`][avatar-schema] | Logos or visual elements displayed in the footer. | -| `{{ secondary_navigation }}` | [`navigation.schema.json`][navigation-schema] | Links leading out of the service or to secondary areas. | -| `{{ services_links }}` | [`navigation.schema.json`][navigation-schema] | Core service links like Privacy, Accessibility, Cookies, etc. | -| `{{ meta_information }}` | [`footer-meta-item.schema.json`][footer-meta-schema] | Mandatory copyright or meta details. | +### Footer Template +[🔗 definition](#footer) **Visual representation** @@ -122,25 +103,10 @@ treemap-beta - SD4H Infrastructure -### Header structure -For the header we can organize the elements in the following way: -```html -
- {{ menu_options }} - {{ image_logo }} - {{ search_bar }} - {{ authentication_components }} -
-``` - -| Template Token | Schema Property | Description | -| --- | --- | --- | -| `{{ menu_options }}` | [`todo.schema.json#/properties/menuOptions`](./schemas/header.schema.json) | List of navigation items for the main menu. | -| `{{ image_logo }}` | [`link.schema.json`][link-schema] | URL, alt text, and link for the portal's logo. | -| `{{ search_bar }}` | [`todo.schema.json#/properties/searchBar`](./schemas/header.schema.json) | Configuration for the search input component. | -| `{{ authentication_components }}` | [Authentication Components](#authentication-components) | User profile, login, or settings controls. | +### Header Template +[🔗 definition](#header) -Visual representation +**Visual representation** ```mermaid --- @@ -156,6 +122,7 @@ treemap-beta "Image Logo": 20 "Search Bar": 20 "Authentication" + "CILogon Button": 80 "Menu": 20 ``` @@ -219,7 +186,7 @@ After submitting the form {{ Forgot password link }} // only visible if user exists ``` -You should be forwarder to the PCGL app. +You should be forwarded to the PCGL app. ### Error pages The error page will have an indirect error cause message followed by the HTTP status code. @@ -240,39 +207,121 @@ What went wrong? ``` ## Landmarks (Organisms) -### User profile/account controls -After logging in, the header shows the user menu instead of the login. -``` - // Hamburger button with two elements "My settings" and "Sign out" -{{ My settings }} -{{ Sign out }} - + +### Header +For the header we can organize the elements in the following way: +```html +
+ {{ menu_options }} + {{ image_logo }} + {{ search_bar }} + {{ authentication_components }} +
``` +> [!NOTE] _What elements are mandatory and optional for us?_ +> +> The [**authentication component**](#authentication-components) is a MUST. +> The rest of the elements are optional. + + +| Template Token | Schema Property | Description | +| --- | --- | --- | +| `{{ menu }}` | [`header.schema.json#/properties/render_menu`][header-schema] | List of navigation items for the main menu. | +| `{{ image_logo }}` | [`link.schema.json`][link-schema] | URL, alt text, and link for the portal's logo. | +| `{{ search_bar }}` | [`header.schema.json#/properties/render_search_bar`][header-schema] | Configuration for the search input component. | +| `{{ authentication_components }}` | [Authentication Components](#authentication-components) | Mandatory User profile, login, or settings controls. | +### Account Settings
🚧 Account settings (Work in Progress) The settings page will have two sections: User Profile and Security, as well as a link to delete the account. What information is available ? `voPerson` ? +This might not be relevant because the user technically will not have an account.
+For the Account settings we can organize the elements in the following way: +```html +
+
+ {{ user_profile }} +
+
+ {{ security }} +
+
+ {{ API_tokens }} +
+ {{ delete_account }} +
+``` + +### Footer +Definition of elements inside the footer. + +> [!NOTE] _What elements are mandatory and optional for us?_ +> +> The **meta information** is a MUST. +> The rest of the elements are optional. + +For the elements inside a footer, let's combine what we know with the resources we want to mimic, like the UK Government. For this particular case, we used Nielsen Norman Group guidelines, which outline what a common user looks for in a footer. + + - Contextual header and links + - Secondary header and navigation items + - Links to our services + - Terms and conditions + - Image Logo +Example: +```html +
+ {{ contextual_header }} + {{ contextual_links }} + {{ images }} + {{ secondary_navigation }} + {{ services_links }} + {{ meta_information }} +
+``` + +| Design Token | Schema (Property) | Description | +| --- | --- | --- | +| `{{ contextual_header }}` | [`navigation.schema.json#/properties/renderTitle`][navigation-schema] | The title of the contextual area. | +| `{{ contextual_links }}` | [`navigation.schema.json#/properties/renderLinks`][navigation-schema] | Links providing context to the current page. | +| `{{ images }}` | [`avatar.schema.json`][avatar-schema] | Logos or visual elements displayed in the footer. | +| `{{ secondary_navigation }}` | [`navigation.schema.json`][navigation-schema] | Links leading out of the service or to secondary areas. | +| `{{ services_links }}` | [`navigation.schema.json`][navigation-schema] | Core service links like Privacy, Accessibility, Cookies, etc. | +| `{{ meta_information }}` | [`footer-meta-item.schema.json`][footer-meta-schema] | Mandatory copyright or meta details. | + + +## Regions (Molecules) +- [ ] 🚧 Contextual header and links +- [ ] 🚧 Secondary header and navigation items +- [ ] 🚧 API Tokens list + ### Menu options At the moment, there is one element to change the language. -## Regions (Molecules) -- Contextual header and links -- Secondary header and navigation items -- API Tokens list ### Authentication Components +**User profile/account controls** +Before logging in, we must show the **CILogon Identity Provider Button** in the header. +After logging in, the header shows the user menu instead of the **CILogon Identity Provider Button**. +``` +
// Hamburger button with two elements "My settings" and "Sign out" +{{ user name }} +{{ My Settings }} +{{ Log Out }} +
+``` + Definition of elements inside the authentication components. > [!NOTE] _What elements are mandatory and optional for us?_ > -> The **CILogon Identity Provider Button** is mandatory. +> The **CILogon Identity Provider Button** is a MUST. Login / Sign In / Sign Out / Log Out. @@ -290,9 +339,9 @@ style="cursor:help;" /> >[!TIP] CILogon has several [customization options][cilogon-config] which change the behavior and/or content of the CILogon website. -My Profile / Account Settings -: The authenticated state that replaces the "Login" button. -The authentication settings are managed by the identity provider organization, for example: +### My Profile / Account Settings +The authentication settings are managed by the identity provider organization. + ## Components (Atoms) @@ -332,5 +381,6 @@ The authentication settings are managed by the identity provider organization, f [navigation-schema]: ./atoms_components/navigation.schema.json [link-schema]: ./atoms_components/link.schema.json [avatar-schema]: ./atoms_components/avatar.schema.json +[header-schema]: ./organisms_landmarks/header.schema.json [menu_options]: ./# [search_bar]: ./# diff --git a/patterns/molecules_regions/footer-meta-item.schema.json b/patterns/molecules_regions/footer-meta-item.schema.json index 01f8f3a..12cb42d 100644 --- a/patterns/molecules_regions/footer-meta-item.schema.json +++ b/patterns/molecules_regions/footer-meta-item.schema.json @@ -1,5 +1,5 @@ { - "$id": "/patterns/molecules_regions/footer-meta-item.schema", + "$id": "molecules_regions/footer-meta-item.schema", "$schema": "http://json-schema.org/draft-07/schema#", "title": "Footer Meta Item", "type": "object", diff --git a/patterns/organisms_landmarks/footer.schema.json b/patterns/organisms_landmarks/footer.schema.json index bc3d638..f441caf 100644 --- a/patterns/organisms_landmarks/footer.schema.json +++ b/patterns/organisms_landmarks/footer.schema.json @@ -1,9 +1,9 @@ { - "$id": "/patterns/molecules_regions/footer.schema", + "$id": "organisms_landmarks/footer.schema", "$schema": "http://json-schema.org/draft-07/schema#", - "title": "Footer Meta Item", + "title": "Footer", "type": "object", - "required": ["navigation", "meta"], + "required": ["meta"], "properties": { "meta": { "$ref": "/patterns/molecules_regions/footer-meta-item.schema.json" diff --git a/patterns/organisms_landmarks/header.schema.json b/patterns/organisms_landmarks/header.schema.json new file mode 100644 index 0000000..59a6171 --- /dev/null +++ b/patterns/organisms_landmarks/header.schema.json @@ -0,0 +1,21 @@ +{ + "$id": "organisms_landmarks/header", + "$schema": "http://json-schema.org/draft-07/schema#", + "title": "Header", + "type": "object", + "required": ["render_auth"], + "properties": { + "render_auth": { + "type": "object" + }, + "render_menu": { + "type": "object" + }, + "image_logo": { + "$ref": "/patterns/atoms_components/link.schema.json" + }, + "render_search_bar": { + "type": "object" + } + } +} \ No newline at end of file From 162a1b3a5891262692dbff7df9e4ac8efd373143 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Fri, 28 Aug 2026 12:15:27 -0400 Subject: [PATCH 07/12] feature(documentation): testing if we can link figma --- .../guidance_common_elements_for_portals.md | 25 +++++++++++-------- patterns/templates/figma.md | 3 +++ 2 files changed, 18 insertions(+), 10 deletions(-) create mode 100644 patterns/templates/figma.md diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index d5cf196..967076b 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -219,8 +219,9 @@ For the header we can organize the elements in the following way: ``` -> [!NOTE] _What elements are mandatory and optional for us?_ -> +> [!NOTE] +> _What elements are mandatory and optional for us?_ +> > The [**authentication component**](#authentication-components) is a MUST. > The rest of the elements are optional. @@ -260,7 +261,8 @@ For the Account settings we can organize the elements in the following way: ### Footer Definition of elements inside the footer. -> [!NOTE] _What elements are mandatory and optional for us?_ +> [!NOTE] +> _What elements are mandatory and optional for us?_ > > The **meta information** is a MUST. > The rest of the elements are optional. @@ -319,25 +321,28 @@ After logging in, the header shows the user menu instead of the **CILogon Identi Definition of elements inside the authentication components. -> [!NOTE] _What elements are mandatory and optional for us?_ +> [!NOTE] +> _What elements are mandatory and optional for us?_ > > The **CILogon Identity Provider Button** is a MUST. -Login / Sign In / Sign Out / Log Out. -: The login experience is provided by the CILogon Identity Provider. For example, see https://cilogon.org/example/ -: -
+**Login / Sign In / Sign Out / Log Out.** + +The login experience is provided by the CILogon Identity Provider. For example, see https://cilogon.org/example/ + +
- +
->[!TIP] CILogon has several [customization options][cilogon-config] which change the behavior and/or content of the CILogon website. +> [!TIP] +> CILogon has several [customization options][cilogon-config] which change the behavior and/or content of the CILogon website. ### My Profile / Account Settings The authentication settings are managed by the identity provider organization. diff --git a/patterns/templates/figma.md b/patterns/templates/figma.md new file mode 100644 index 0000000..ec68834 --- /dev/null +++ b/patterns/templates/figma.md @@ -0,0 +1,3 @@ +# Footer template + + From 0b456cd8a6d823c414da059520d0e80476c33c45 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Tue, 1 Sep 2026 16:23:34 -0400 Subject: [PATCH 08/12] adding the footer as a component --- patterns/common_elements/footer.md | 31 +++++++++++++++++++ .../guidance_common_elements_for_portals.md | 29 +++++++++++------ patterns/templates/figma.md | 2 +- 3 files changed, 51 insertions(+), 11 deletions(-) create mode 100644 patterns/common_elements/footer.md diff --git a/patterns/common_elements/footer.md b/patterns/common_elements/footer.md new file mode 100644 index 0000000..40a3a04 --- /dev/null +++ b/patterns/common_elements/footer.md @@ -0,0 +1,31 @@ +# Footer + +## Overview + +The PCGL Footer identity, documentation, definition and properties are based on the [Canada design system](https://design-system.canada.ca/en/components/footer/) and the [Canadian Institutes +of Health Research visual identity](https://cihr-irsc.gc.ca/e/50426.html). + +## Properties + +| Property | Attribute | Description| Type| Default | +| ------------------- | -------------------- | ---------- | --- | ----------- | +| [meta](/patterns/molecules_regions/footer-meta-item.schema.json) | `meta` | Object containing the items for sub-footer. | `object` | `{terms_conditions, logo}` | +| [navigation_sections](/patterns/atoms_components/navigation.schema) | `navigation` | Slot for displaying a band with lists of link items. Format: { render_title, render_links } | `object` | `undefined` | + + +## Slots + +[**navigation_sections**](/patterns/atoms_components/navigation.schema): Accepts a function to display contextual and external navigation items. + +### Diagram +```mermaid + block + block + columns 1 + navigation["navigation"] + meta["meta"] + style navigation stroke-dasharray:8px + end +``` + +> Check out the [template](/patterns/templates/figma.md). \ No newline at end of file diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index 967076b..869e826 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -126,6 +126,9 @@ treemap-beta "Menu": 20 ``` + +---------------------------------------------- + ### Login **Login experience** : @@ -188,6 +191,8 @@ After submitting the form ``` You should be forwarded to the PCGL app. +---------------------------------------------- + ### Error pages The error page will have an indirect error cause message followed by the HTTP status code. ``` @@ -206,6 +211,9 @@ What were you doing? What went wrong? ``` +---------------------------------------------- + + ## Landmarks (Organisms) ### Header @@ -233,6 +241,8 @@ For the header we can organize the elements in the following way: | `{{ search_bar }}` | [`header.schema.json#/properties/render_search_bar`][header-schema] | Configuration for the search input component. | | `{{ authentication_components }}` | [Authentication Components](#authentication-components) | Mandatory User profile, login, or settings controls. | +---------------------------------------------- + ### Account Settings
🚧 Account settings (Work in Progress) @@ -258,6 +268,8 @@ For the Account settings we can organize the elements in the following way: ``` +---------------------------------------------- + ### Footer Definition of elements inside the footer. @@ -297,6 +309,7 @@ Example: | `{{ services_links }}` | [`navigation.schema.json`][navigation-schema] | Core service links like Privacy, Accessibility, Cookies, etc. | | `{{ meta_information }}` | [`footer-meta-item.schema.json`][footer-meta-schema] | Mandatory copyright or meta details. | +---------------------------------------------- ## Regions (Molecules) - [ ] 🚧 Contextual header and links @@ -306,6 +319,8 @@ Example: ### Menu options At the moment, there is one element to change the language. +---------------------------------------------- + ### Authentication Components **User profile/account controls** Before logging in, we must show the **CILogon Identity Provider Button** in the header. @@ -331,19 +346,12 @@ Definition of elements inside the authentication components. The login experience is provided by the CILogon Identity Provider. For example, see https://cilogon.org/example/ -
- - -
- > [!TIP] > CILogon has several [customization options][cilogon-config] which change the behavior and/or content of the CILogon website. +---------------------------------------------- + ### My Profile / Account Settings The authentication settings are managed by the identity provider organization. @@ -357,8 +365,9 @@ The authentication settings are managed by the identity provider organization. ## References ### Design Guidelines -- [Nielsen Norman Group: Footers](https://www.nngroup.com/articles/footers/) +- [GC Design System](https://design-system.canada.ca/) - [GOV.UK Design System](https://design-system.service.gov.uk/) +- [Nielsen Norman Group: Footers](https://www.nngroup.com/articles/footers/) ### Authentication (CILogon) - [CILogon Device Setup][cilogon-device] diff --git a/patterns/templates/figma.md b/patterns/templates/figma.md index ec68834..fff4c86 100644 --- a/patterns/templates/figma.md +++ b/patterns/templates/figma.md @@ -1,3 +1,3 @@ # Footer template - +[![Footer in Figma](https://figmage.com/images/OGsh5fysd9u2_Sit8EY5m.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1143-178&t=q0WjkNykSAe0izih-1) From a9ce16f4526a67009a13d217a6915f4c9b8d1942 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Thu, 3 Sep 2026 14:09:10 -0400 Subject: [PATCH 09/12] feature(documentation): adding templates --- patterns/common_elements/footer.md | 11 ++-- patterns/common_elements/header.md | 46 +++++++++++++++ .../guidance_common_elements_for_portals.md | 58 +++++++++++-------- patterns/templates/figma.md | 33 ++++++++++- 4 files changed, 115 insertions(+), 33 deletions(-) create mode 100644 patterns/common_elements/header.md diff --git a/patterns/common_elements/footer.md b/patterns/common_elements/footer.md index 40a3a04..e1a128b 100644 --- a/patterns/common_elements/footer.md +++ b/patterns/common_elements/footer.md @@ -2,26 +2,25 @@ ## Overview -The PCGL Footer identity, documentation, definition and properties are based on the [Canada design system](https://design-system.canada.ca/en/components/footer/) and the [Canadian Institutes -of Health Research visual identity](https://cihr-irsc.gc.ca/e/50426.html). +The PCGL Footer identity, documentation, definition, and properties are based on the [Canada design system](https://design-system.canada.ca/en/components/footer/) and the [Canadian Institutes of Health Research visual identity](https://cihr-irsc.gc.ca/e/50426.html). ## Properties | Property | Attribute | Description| Type| Default | | ------------------- | -------------------- | ---------- | --- | ----------- | -| [meta](/patterns/molecules_regions/footer-meta-item.schema.json) | `meta` | Object containing the items for sub-footer. | `object` | `{terms_conditions, logo}` | -| [navigation_sections](/patterns/atoms_components/navigation.schema) | `navigation` | Slot for displaying a band with lists of link items. Format: { render_title, render_links } | `object` | `undefined` | +| [meta](/patterns/molecules_regions/footer-meta-item.schema.json) | `meta` | Object containing items for the sub-footer. | `object` | `{terms_conditions, logo}` | +| [navigation_sections](/patterns/atoms_components/navigation.schema.json) | `navigation` | Slot for displaying a band with lists of link items. Format: `{ render_title, render_links }` | `object` | `undefined` | ## Slots -[**navigation_sections**](/patterns/atoms_components/navigation.schema): Accepts a function to display contextual and external navigation items. +[**navigation_sections**](/patterns/atoms_components/navigation.schema.json): Accepts a function to display contextual and external navigation items. ### Diagram ```mermaid block + columns 1 block - columns 1 navigation["navigation"] meta["meta"] style navigation stroke-dasharray:8px diff --git a/patterns/common_elements/header.md b/patterns/common_elements/header.md new file mode 100644 index 0000000..7080a3e --- /dev/null +++ b/patterns/common_elements/header.md @@ -0,0 +1,46 @@ +# Header + +## Overview + +The PCGL Header identity, documentation, definition, and properties are based on the [Canada design system](https://design-system.canada.ca/en/components/header/code/#section-essential) and the [DACO portal visual identity](https://www.figma.com/design/DMs06XLL2oAlCQlRktXYqA/PCGL-Design-Mockups---REBRAND--Copy-?node-id=2025-565&t=lLoqA9iHKkFA7Qb2-0). + +## Properties + +| Property | Attribute | Description| Type| Default | +| ------------------- | -------------------- | ---------- | --- | ----------- | +| [accessibility_links](/patterns/atoms_components/link.schema.json) | `a11y-links` | Object containing hidden skip links for navigation accessibility. | `object` | `{ url, children }` | +| [menu_options](/patterns/atoms_components/navigation.schema.json) | `render-menu` | Slot containing the items for navigation. | `object` | `undefined` | +| [logo](/patterns/atoms_components/avatar.schema.json) | `logo` | Object containing the wordmark as an image wrapped inside an anchor or link. | `object`| `{ src, alt, width, height }` | +| [lang](/patterns/atoms_components/link.schema.json) | `render_lang` | Slot for switching between available language versions. | `object` | `undefined` | +| **search_bar** | `render_search` | Slot for displaying a search bar. | `object` | `undefined` | +| [auth](/patterns/atoms_components/link.schema.json) | `render_auth` | Slot for displaying the authentication component. | `object` | `undefined` | + + +## Slots + +[**render-menu**](/patterns/atoms_components/navigation.schema.json): Accepts a function to display contextual and external navigation items, such a hamburger menu for example. + +**`render_lang`**: Accepts a function to display the language toggle component. + +**`render_search`**: Accepts a function to display the search component. + +**`render_auth`**: Accepts a function to display the authentication component. + +### Diagram +```mermaid + block + columns 1 + accessibility_links + block:group1 + columns 12 + navigation logo children lang search_bar auth + end + classDef optional stroke-dasharray:8px + class navigation optional + class lang optional + class search_bar optional + class children optional + +``` + +> Check out the [template](/patterns/templates/figma.md). \ No newline at end of file diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index 869e826..f270329 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -1,8 +1,8 @@ -# Guide for common elements across portals. +# Guide for Common Elements Across Portals -We value contributions and feedback and want you to contribute effectively. To make your contribution experience as smooth as possible, [please reach out to us first][contrib]. +We value contributions and feedback and want you to contribute effectively. To make your experience as smooth as possible, [please reach out to us first][contrib]. ### How to read this guide Throughout this document, you will see HTML structures containing tokens like `{{ my_design_token }}`. This logicless syntax represents dynamic data. @@ -12,11 +12,11 @@ Throughout this document, you will see HTML structures containing tokens like `{ > [!WARNING] > **_Under construction labels_** > -> Consider slowing down in the sections that contain the _Under construction_ symbols: 🚧 🏗️ 👷🏾‍♀️ 🦺 ⚠️ +> Please note the sections containing the sections that contain the _Under construction_ symbols: 🚧 🏗️ 👷🏾‍♀️ 🦺 ⚠️ > This document will point out the work in progress using construction symbols. -At the moment, we face some challenges trying to standardize the design token language. The aim is to follow a standard so any app will be competent enough to translate the design tokens into code or visualizations. We have chosen JSON given its versatility in representing data. - - [ ] [Modular schemas ⚠️ 🏗️](https://json-schema.org/understanding-json-schema/structuring) If in the future we have a CMS. +At the moment, we face some challenges trying to standardize the design token language. The aim is to follow a standard so any application is capable of translating the design tokens into code or visualizations. We have chosen JSON given its versatility in representing data. + - [ ] [Modular schemas ⚠️ 🏗️](https://json-schema.org/understanding-json-schema/structuring): To be considered if a CMS is introduced in the future.. # Contents @@ -39,11 +39,11 @@ At the moment, we face some challenges trying to standardize the design token la ## Pages - [ ] ⚠️ 🏗️ Terms and conditions ->[!TIP] +> [!TIP] > For example, Canada includes the following: > _[Terms and conditions](https://www.justice.gc.ca/eng/terms-avis/index.html#usa)_. - [ ] ⚠️ 🏗️ Disclaimer ->[!TIP] +> [!TIP] > For example, Illumina includes the following disclaimer: > _For Research Use Only, Not for use in diagnostic procedures (except as specifically noted)_. - [ ] ⚠️ 🏗️ Header @@ -131,10 +131,10 @@ treemap-beta ### Login **Login experience** -: + The user experience is provided by CILogon. For example: > [!CAUTION] -> For the real specs visit the IAM documentation. +> For the actual specifications, visit the IAM documentation. ```mermaid @@ -160,7 +160,7 @@ sequenceDiagram ``` After attempting to access the app, the user will be redirected to their institution. We cannot know exactly what the institution's login components look like, but they might be similar to the following example. -: + ```
// inside main @@ -174,14 +174,14 @@ After attempting to access the app, the user will be redirected to their institu
``` -After submitting the form -: +**After submitting the form** + ```
// inside main {{Header and welcoming message}}
- {{ your email }} // hidden field no editable - {{ your pass }} // hidden field if required + {{ your email }} // non-editable hidden field + {{ your password }} // hidden field if required {{ Sign in submit button }}
{{ By proceeding, you agree to the Terms of Service and Privacy Notice }} @@ -189,12 +189,13 @@ After submitting the form {{ Forgot password link }} // only visible if user exists
``` -You should be forwarded to the PCGL app. +**You should be forwarded to the PCGL app.** ---------------------------------------------- ### Error pages -The error page will have an indirect error cause message followed by the HTTP status code. + +The error page displays a user-friendly error message followed by the HTTP status code. ```
{{ Header with the Response status text group }} // Page not found @@ -206,7 +207,7 @@ The error page will have an indirect error cause message followed by the HTTP st The form could be something like: ``` Help us improve [Name of service] -Do not include personal or financial information like your National Insurance number or credit card details. +Do not include personal or financial information like your Social Insurance Number or credit card details. What were you doing? What went wrong? ``` @@ -217,8 +218,11 @@ What went wrong? ## Landmarks (Organisms) ### Header -For the header we can organize the elements in the following way: + +For the header, we can organize the elements as follows: + ```html +{{ accessibility_links }}
{{ menu_options }} {{ image_logo }} @@ -231,6 +235,9 @@ For the header we can organize the elements in the following way: > _What elements are mandatory and optional for us?_ > > The [**authentication component**](#authentication-components) is a MUST. +> +> The **skip links component** is a MUST. +> > The rest of the elements are optional. @@ -239,7 +246,7 @@ For the header we can organize the elements in the following way: | `{{ menu }}` | [`header.schema.json#/properties/render_menu`][header-schema] | List of navigation items for the main menu. | | `{{ image_logo }}` | [`link.schema.json`][link-schema] | URL, alt text, and link for the portal's logo. | | `{{ search_bar }}` | [`header.schema.json#/properties/render_search_bar`][header-schema] | Configuration for the search input component. | -| `{{ authentication_components }}` | [Authentication Components](#authentication-components) | Mandatory User profile, login, or settings controls. | +| `{{ authentication_components }}` | [Authentication Components](#authentication-components) | Mandatory user profile, login, or settings controls. | ---------------------------------------------- @@ -248,11 +255,12 @@ For the header we can organize the elements in the following way: 🚧 Account settings (Work in Progress) The settings page will have two sections: User Profile and Security, as well as a link to delete the account. -What information is available ? `voPerson` ? +What information is available? `voPerson` ? This might not be relevant because the user technically will not have an account.
-For the Account settings we can organize the elements in the following way: +For the account settings, we can organize the elements as follows: + ```html
@@ -317,7 +325,7 @@ Example: - [ ] 🚧 API Tokens list ### Menu options -At the moment, there is one element to change the language. +Currently, there is one element for toggling the language. ---------------------------------------------- @@ -333,7 +341,7 @@ After logging in, the header shows the user menu instead of the **CILogon Identi ``` -Definition of elements inside the authentication components. +Definition of authentication component elements. > [!NOTE] @@ -348,7 +356,7 @@ The login experience is provided by the CILogon Identity Provider. For example, > [!TIP] -> CILogon has several [customization options][cilogon-config] which change the behavior and/or content of the CILogon website. +> CILogon has several [customization options][cilogon-config] that change the behavior and/or content of the CILogon website. ---------------------------------------------- @@ -385,7 +393,7 @@ The authentication settings are managed by the identity provider organization. -[contrib]: patterns/docs/CONTRIBUTING.md +[contrib]: /patterns/docs/CONTRIBUTING.md [cilogon-device]: https://www.cilogon.org/device [cilogon-skin]: https://www.cilogon.org/skins#h.52ndu647pi2y [cilogon-config]: https://cilogon.org/skin/config-example.xml diff --git a/patterns/templates/figma.md b/patterns/templates/figma.md index fff4c86..c34acea 100644 --- a/patterns/templates/figma.md +++ b/patterns/templates/figma.md @@ -1,3 +1,32 @@ -# Footer template +# Header Template +## Checklist -[![Footer in Figma](https://figmage.com/images/OGsh5fysd9u2_Sit8EY5m.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1143-178&t=q0WjkNykSAe0izih-1) +| Safety item | Rationale | +| -------- | -------- | +| Has Skip Link | Skip links can help users quickly move past blocks of content they do not want to navigate through. | +| Has Signature Link | The header is the first thing a visitor sees. | +| Has French link | REquired by Official Languages Act. | +| Has authentication | PCGL uses CILogon / COManage to manage users for all portals and services. | +| Has nav | Do we need it? | +| Has menu | Do we need it? | +| Has breadcrumbs | Do we need it? | + + +[![Header in Figma](https://figmage.com/images/xqoxLWROc9qZahZc6oDMe.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1186-10062&t=fgVwPHZ10gsSXnGK-0) + +[![Header in Figma](https://figmage.com/images/O2DoTazqHbGJMwKeKBy76.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1186-10062&t=fgVwPHZ10gsSXnGK-0) + +# Footer Template +## Check List + + +| Safety item | Rationale | +| -------- | -------- | +| Has Meta info | Marks the end of the page and displays site metadata. | +| Has Signature Mark | Required to acknowledge CIHR support and promote research. | +| Has main band | Identifies links to common PCGL themes or services. | +| Has contextual band | Do we need specific links to the site or product? | + + + +[![Footer in Figma](https://figmage.com/images/omrbSuEDEOQUg48eGdpRi.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1143-178&t=q0WjkNykSAe0izih-1) \ No newline at end of file From 9eecc57ad7b928df4be198a7169b08fde554e16a Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Thu, 3 Sep 2026 17:17:51 -0400 Subject: [PATCH 10/12] feature(documentation): grammar check for contributing guide --- patterns/docs/CONTRIBUTING.md | 34 +++++++++++++++++----------------- 1 file changed, 17 insertions(+), 17 deletions(-) diff --git a/patterns/docs/CONTRIBUTING.md b/patterns/docs/CONTRIBUTING.md index 220a8a4..cbe7cbd 100644 --- a/patterns/docs/CONTRIBUTING.md +++ b/patterns/docs/CONTRIBUTING.md @@ -1,46 +1,46 @@ # Contributing -## Check with our team +## Check With Our Team -When contributing to this repository, please first discuss the change you wish to make via issue, -email, or any other method with the owners of this repository before making a change. +When contributing to this repository, please first discuss the changes you wish to make via an issue, email, or any other method with the repository owners before starting work. -## Review our design system +## Review Our Guidelines -This is a mix of concepts between [atomic design][atomic-design-brad-frost] and [HTML elements reference][element] for a more deliberate and hierarchical manner to represent the components across the portals. +These guidelines combine concepts from [Atomic Design][atomic-design-brad-frost] and the [MDN HTML elements reference][element] to provide a structured, hierarchical approach to representing components across portals. Pages -: The data inserted in the designs. Final user interface that fuses the template and the content. +: Specific instances where templates are populated with real data, representing the final user interface. Templates -: Designs without data. Templates consist of elements and groups of elements without data. +: Page-level layouts that arrange components and regions without specific content or data. Landmarks (Organisms) -: Complex user interfaces; these are subsections of a page that we want the user to be able to navigate directly to. +: Complex UI sections representing major areas of a page (e.g., header, footer) that users can navigate to directly. Regions (Molecules) -: A group of elements that has a single responsibility. +: A group of components combined to serve a single responsibility. Components (Atoms) -: A non-divisible element that is part of the page. +: An indivisible UI element (e.g., button, link, avatar) that serves as a fundamental building block. -We based our decisions on well-known public organizations and their commitment to accessibility, so the list is not limited to: +Our decisions draw inspiration from established design systems, accessibility standards, and industry best practices, including but not limited to: - [The Government of Canada][canada] - - [The Government of UK][uk] + - [The UK Government][uk] - [Atomic Design by Brad Frost][atomic-design-brad-frost] - [MDN][MDN] - [Splunk][splunk] -You may merge the Pull Request once you have the sign-off of two other developers, or if you - do not have permission to do that, you may request the second reviewer to merge it for you. +## Pull Request Process + +You may merge a pull request once you have the sign-off of two other developers. If you do not have permission to merge, you may request the second reviewer to merge it on your behalf. ## Code of Conduct ### Our Pledge In the interest of fostering an open and welcoming environment, we as -contributors and maintainers pledge to making participation in our project and +contributors and maintainers pledge to make participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and @@ -104,9 +104,9 @@ members of the project's leadership. ### Attribution -This Code of Conduct is adapted from the [Contributor Covenant][homepage] +This Code of Conduct is adapted from the [Contributor Covenant][homepage]. -[homepage]: http://contributor-covenant.org +[homepage]: https://contributor-covenant.org [canada]: https://design-system.canada.ca From 123a538769b001d6546ba9782c6b84b1cbe21208 Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Thu, 3 Sep 2026 17:55:28 -0400 Subject: [PATCH 11/12] feature(documentation): Adding a link to the figma templates --- .../guidance_common_elements_for_portals.md | 31 ++++++++++--------- patterns/templates/figma.md | 19 ++++++++---- 2 files changed, 29 insertions(+), 21 deletions(-) diff --git a/patterns/guidance_common_elements_for_portals.md b/patterns/guidance_common_elements_for_portals.md index f270329..26b7f83 100644 --- a/patterns/guidance_common_elements_for_portals.md +++ b/patterns/guidance_common_elements_for_portals.md @@ -1,6 +1,7 @@ +# Guide for Common Elements Across Portals -# Guide for Common Elements Across Portals +[TL;DR: Figma Templates](/patterns/templates/figma.md) We value contributions and feedback and want you to contribute effectively. To make your experience as smooth as possible, [please reach out to us first][contrib]. @@ -12,11 +13,11 @@ Throughout this document, you will see HTML structures containing tokens like `{ > [!WARNING] > **_Under construction labels_** > -> Please note the sections containing the sections that contain the _Under construction_ symbols: 🚧 🏗️ 👷🏾‍♀️ 🦺 ⚠️ +> Please note the sections marked with "under construction" symbols: 🚧 🏗️ 👷🏾‍♀️ 🦺 ⚠️ > This document will point out the work in progress using construction symbols. At the moment, we face some challenges trying to standardize the design token language. The aim is to follow a standard so any application is capable of translating the design tokens into code or visualizations. We have chosen JSON given its versatility in representing data. - - [ ] [Modular schemas ⚠️ 🏗️](https://json-schema.org/understanding-json-schema/structuring): To be considered if a CMS is introduced in the future.. + - [ ] [Modular schemas ⚠️ 🏗️](https://json-schema.org/understanding-json-schema/structuring): To be considered if a CMS is introduced in the future. # Contents @@ -181,7 +182,7 @@ After attempting to access the app, the user will be redirected to their institu {{Header and welcoming message}}
{{ your email }} // non-editable hidden field - {{ your password }} // hidden field if required + {{ your password }} // hidden field if required {{ Sign in submit button }}
{{ By proceeding, you agree to the Terms of Service and Privacy Notice }} @@ -189,13 +190,13 @@ After attempting to access the app, the user will be redirected to their institu {{ Forgot password link }} // only visible if user exists
``` -**You should be forwarded to the PCGL app.** +**You will then be redirected to the PCGL application.** ---------------------------------------------- ### Error pages -The error page displays a user-friendly error message followed by the HTTP status code. +The error page displays a user-friendly error message followed by the HTTP status code. ```
{{ Header with the Response status text group }} // Page not found @@ -207,7 +208,7 @@ The error page displays a user-friendly error message followed by the HTTP statu The form could be something like: ``` Help us improve [Name of service] -Do not include personal or financial information like your Social Insurance Number or credit card details. +Do not include personal or financial information, such as your Social Insurance Number (SIN) or credit card details. What were you doing? What went wrong? ``` @@ -232,7 +233,7 @@ For the header, we can organize the elements as follows: ``` > [!NOTE] -> _What elements are mandatory and optional for us?_ +> _Which elements are mandatory and which are optional?_ > > The [**authentication component**](#authentication-components) is a MUST. > @@ -255,7 +256,7 @@ For the header, we can organize the elements as follows: 🚧 Account settings (Work in Progress) The settings page will have two sections: User Profile and Security, as well as a link to delete the account. -What information is available? `voPerson` ? +What information is available? `voPerson`? This might not be relevant because the user technically will not have an account. @@ -282,12 +283,12 @@ For the account settings, we can organize the elements as follows: Definition of elements inside the footer. > [!NOTE] -> _What elements are mandatory and optional for us?_ +> _Which elements are mandatory and which are optional?_ > > The **meta information** is a MUST. > The rest of the elements are optional. -For the elements inside a footer, let's combine what we know with the resources we want to mimic, like the UK Government. For this particular case, we used Nielsen Norman Group guidelines, which outline what a common user looks for in a footer. +For the elements inside a footer, let's combine our requirements with established best practices, such as the UK Government Design System and Nielsen Norman Group guidelines, which outline what users typically look for in a footer. - Contextual header and links - Secondary header and navigation items @@ -345,18 +346,18 @@ Definition of authentication component elements. > [!NOTE] -> _What elements are mandatory and optional for us?_ +> _Which elements are mandatory and which are optional?_ > > The **CILogon Identity Provider Button** is a MUST. -**Login / Sign In / Sign Out / Log Out.** +**Login / Sign In / Sign Out / Log Out** -The login experience is provided by the CILogon Identity Provider. For example, see https://cilogon.org/example/ +The login experience is provided by the CILogon Identity Provider. For example, see the [CILogon example](https://cilogon.org/example/). > [!TIP] -> CILogon has several [customization options][cilogon-config] that change the behavior and/or content of the CILogon website. +> CILogon has several [customization options][cilogon-config] that change the behavior and content of the CILogon website. ---------------------------------------------- diff --git a/patterns/templates/figma.md b/patterns/templates/figma.md index c34acea..4d236c5 100644 --- a/patterns/templates/figma.md +++ b/patterns/templates/figma.md @@ -4,9 +4,9 @@ | Safety item | Rationale | | -------- | -------- | | Has Skip Link | Skip links can help users quickly move past blocks of content they do not want to navigate through. | -| Has Signature Link | The header is the first thing a visitor sees. | -| Has French link | REquired by Official Languages Act. | -| Has authentication | PCGL uses CILogon / COManage to manage users for all portals and services. | +| Has Signature Link | The home icon link is the first element a visitor sees. | +| Has French link | Required by the Official Languages Act. | +| Has authentication | PCGL uses CILogon / COmanage to manage users for all portals and services. | | Has nav | Do we need it? | | Has menu | Do we need it? | | Has breadcrumbs | Do we need it? | @@ -14,19 +14,26 @@ [![Header in Figma](https://figmage.com/images/xqoxLWROc9qZahZc6oDMe.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1186-10062&t=fgVwPHZ10gsSXnGK-0) +_PCGL research portal header based on DACO designs_ + [![Header in Figma](https://figmage.com/images/O2DoTazqHbGJMwKeKBy76.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1186-10062&t=fgVwPHZ10gsSXnGK-0) +_Government of Canada header design without the Signature Link_ + + # Footer Template -## Check List +## Checklist | Safety item | Rationale | | -------- | -------- | -| Has Meta info | Marks the end of the page and displays site metadata. | +| Has meta info | Marks the end of the page and displays site metadata. | | Has Signature Mark | Required to acknowledge CIHR support and promote research. | | Has main band | Identifies links to common PCGL themes or services. | | Has contextual band | Do we need specific links to the site or product? | -[![Footer in Figma](https://figmage.com/images/omrbSuEDEOQUg48eGdpRi.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1143-178&t=q0WjkNykSAe0izih-1) \ No newline at end of file +[![Footer in Figma](https://figmage.com/images/omrbSuEDEOQUg48eGdpRi.png)](https://www.figma.com/design/x9uA02XOaDzi6QGGNxpuWJ/Ant-Design-System-for-Figma--Free-version---Community-?node-id=1143-178&t=q0WjkNykSAe0izih-1) + +_Example including the meta item and DACO designs_ From 44719f9fef21a70d7daa66a03661638aed9fb40e Mon Sep 17 00:00:00 2001 From: Jose Miguel Date: Wed, 9 Sep 2026 10:38:24 -0400 Subject: [PATCH 12/12] feature(documentation): moving the folder --- .../patterns}/atoms_components/avatar.schema.json | 0 .../patterns}/atoms_components/link.schema.json | 0 .../patterns}/atoms_components/navigation.schema.json | 0 {patterns => design_decisions/patterns}/common_elements/footer.md | 0 {patterns => design_decisions/patterns}/common_elements/header.md | 0 {patterns => design_decisions/patterns}/docs/CONTRIBUTING.md | 0 {patterns => design_decisions/patterns}/docs/users_personas.md | 0 .../patterns}/guidance_common_elements_for_portals.md | 0 .../patterns}/molecules_regions/footer-meta-item.schema.json | 0 .../patterns}/organisms_landmarks/footer.schema.json | 0 .../patterns}/organisms_landmarks/header.schema.json | 0 {patterns => design_decisions/patterns}/pages/footer-data.json | 0 {patterns => design_decisions/patterns}/templates/figma.md | 0 13 files changed, 0 insertions(+), 0 deletions(-) rename {patterns => design_decisions/patterns}/atoms_components/avatar.schema.json (100%) rename {patterns => design_decisions/patterns}/atoms_components/link.schema.json (100%) rename {patterns => design_decisions/patterns}/atoms_components/navigation.schema.json (100%) rename {patterns => design_decisions/patterns}/common_elements/footer.md (100%) rename {patterns => design_decisions/patterns}/common_elements/header.md (100%) rename {patterns => design_decisions/patterns}/docs/CONTRIBUTING.md (100%) rename {patterns => design_decisions/patterns}/docs/users_personas.md (100%) rename {patterns => design_decisions/patterns}/guidance_common_elements_for_portals.md (100%) rename {patterns => design_decisions/patterns}/molecules_regions/footer-meta-item.schema.json (100%) rename {patterns => design_decisions/patterns}/organisms_landmarks/footer.schema.json (100%) rename {patterns => design_decisions/patterns}/organisms_landmarks/header.schema.json (100%) rename {patterns => design_decisions/patterns}/pages/footer-data.json (100%) rename {patterns => design_decisions/patterns}/templates/figma.md (100%) diff --git a/patterns/atoms_components/avatar.schema.json b/design_decisions/patterns/atoms_components/avatar.schema.json similarity index 100% rename from patterns/atoms_components/avatar.schema.json rename to design_decisions/patterns/atoms_components/avatar.schema.json diff --git a/patterns/atoms_components/link.schema.json b/design_decisions/patterns/atoms_components/link.schema.json similarity index 100% rename from patterns/atoms_components/link.schema.json rename to design_decisions/patterns/atoms_components/link.schema.json diff --git a/patterns/atoms_components/navigation.schema.json b/design_decisions/patterns/atoms_components/navigation.schema.json similarity index 100% rename from patterns/atoms_components/navigation.schema.json rename to design_decisions/patterns/atoms_components/navigation.schema.json diff --git a/patterns/common_elements/footer.md b/design_decisions/patterns/common_elements/footer.md similarity index 100% rename from patterns/common_elements/footer.md rename to design_decisions/patterns/common_elements/footer.md diff --git a/patterns/common_elements/header.md b/design_decisions/patterns/common_elements/header.md similarity index 100% rename from patterns/common_elements/header.md rename to design_decisions/patterns/common_elements/header.md diff --git a/patterns/docs/CONTRIBUTING.md b/design_decisions/patterns/docs/CONTRIBUTING.md similarity index 100% rename from patterns/docs/CONTRIBUTING.md rename to design_decisions/patterns/docs/CONTRIBUTING.md diff --git a/patterns/docs/users_personas.md b/design_decisions/patterns/docs/users_personas.md similarity index 100% rename from patterns/docs/users_personas.md rename to design_decisions/patterns/docs/users_personas.md diff --git a/patterns/guidance_common_elements_for_portals.md b/design_decisions/patterns/guidance_common_elements_for_portals.md similarity index 100% rename from patterns/guidance_common_elements_for_portals.md rename to design_decisions/patterns/guidance_common_elements_for_portals.md diff --git a/patterns/molecules_regions/footer-meta-item.schema.json b/design_decisions/patterns/molecules_regions/footer-meta-item.schema.json similarity index 100% rename from patterns/molecules_regions/footer-meta-item.schema.json rename to design_decisions/patterns/molecules_regions/footer-meta-item.schema.json diff --git a/patterns/organisms_landmarks/footer.schema.json b/design_decisions/patterns/organisms_landmarks/footer.schema.json similarity index 100% rename from patterns/organisms_landmarks/footer.schema.json rename to design_decisions/patterns/organisms_landmarks/footer.schema.json diff --git a/patterns/organisms_landmarks/header.schema.json b/design_decisions/patterns/organisms_landmarks/header.schema.json similarity index 100% rename from patterns/organisms_landmarks/header.schema.json rename to design_decisions/patterns/organisms_landmarks/header.schema.json diff --git a/patterns/pages/footer-data.json b/design_decisions/patterns/pages/footer-data.json similarity index 100% rename from patterns/pages/footer-data.json rename to design_decisions/patterns/pages/footer-data.json diff --git a/patterns/templates/figma.md b/design_decisions/patterns/templates/figma.md similarity index 100% rename from patterns/templates/figma.md rename to design_decisions/patterns/templates/figma.md