From 51085cfc40d997c04ec9c70fde6073e7d70f103f Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Thu, 29 Feb 2024 10:49:30 -0800 Subject: [PATCH 1/6] base.hmtl created --- app/templates/admin_template.html | 2 +- app/templates/new/base.html | 65 ++++++++++ app/templates/new/components/footer/README.md | 15 +++ .../new/components/footer/macro-options.json | 115 +++++++++++++++++ app/templates/new/components/footer/macro.njk | 3 + .../new/components/footer/template.njk | 117 ++++++++++++++++++ app/templates/new/components/header/README.md | 15 +++ .../new/components/header/macro-options.json | 88 +++++++++++++ app/templates/new/components/header/macro.njk | 3 + .../new/components/header/template.njk | 104 ++++++++++++++++ .../new/components/skip-link/README.md | 15 +++ .../components/skip-link/macro-options.json | 32 +++++ .../new/components/skip-link/macro.njk | 3 + .../new/components/skip-link/template.njk | 7 ++ app/templates/new/templates_glossary.md | 27 ++++ 15 files changed, 610 insertions(+), 1 deletion(-) create mode 100644 app/templates/new/base.html create mode 100644 app/templates/new/components/footer/README.md create mode 100644 app/templates/new/components/footer/macro-options.json create mode 100644 app/templates/new/components/footer/macro.njk create mode 100644 app/templates/new/components/footer/template.njk create mode 100644 app/templates/new/components/header/README.md create mode 100644 app/templates/new/components/header/macro-options.json create mode 100644 app/templates/new/components/header/macro.njk create mode 100644 app/templates/new/components/header/template.njk create mode 100644 app/templates/new/components/skip-link/README.md create mode 100644 app/templates/new/components/skip-link/macro-options.json create mode 100644 app/templates/new/components/skip-link/macro.njk create mode 100644 app/templates/new/components/skip-link/template.njk create mode 100644 app/templates/new/templates_glossary.md diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index c48f768ce..bd4383579 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -1,4 +1,4 @@ -{% extends "main_template.html" %} +{% extends "new/base.html" %} {% from "components/banner.html" import banner %} {% block headIcons %} diff --git a/app/templates/new/base.html b/app/templates/new/base.html new file mode 100644 index 000000000..38ffb049d --- /dev/null +++ b/app/templates/new/base.html @@ -0,0 +1,65 @@ +{% from "./components/skip-link/macro.njk" import usaSkipLink -%} +{% from "./components/header/macro.njk" import usaHeader -%} +{% from "./components/footer/macro.njk" import usaFooter -%} +{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #} +{%- set assetUrl = assetUrl | default(assetPath) -%} + + + + + {% block pageTitle %}Notify.gov{% endblock %} + + + + {% if config['NR_MONITOR_ON'] %} + {% include "partials/newrelic.html" -%} + {% endif %} + + {# Ensure that older IE versions always render with the correct rendering engine #} + + + {% block headIcons %} + + + + + {% endblock %} + + {% block head %}{% endblock %} + {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #} + {% block meta %} + + + {% endblock %} + + + + {% block bodyStart %}{% endblock %} + + {% block skipLink %} + {{ usaSkipLink({ + "href": '#main-content', + "text": 'Skip to main content' + }) }} + {% endblock %} + + {% block header %} + {{ usaHeader({}) }} + {% endblock %} + + {% block main %} +
+ {% block beforeContent %}{% endblock %} +
+ {% block content %}{% endblock %} +
+
+ {% endblock %} + + {% block footer %} + {{ usaFooter({}) }} + {% endblock %} + + {% block bodyEnd %}{% endblock %} + + diff --git a/app/templates/new/components/footer/README.md b/app/templates/new/components/footer/README.md new file mode 100644 index 000000000..49c5a7082 --- /dev/null +++ b/app/templates/new/components/footer/README.md @@ -0,0 +1,15 @@ +# Footer + +## Installation + +See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. + +## Guidance and Examples + +Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer). + +## Component options + +Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. + +See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details. diff --git a/app/templates/new/components/footer/macro-options.json b/app/templates/new/components/footer/macro-options.json new file mode 100644 index 000000000..f6e2967db --- /dev/null +++ b/app/templates/new/components/footer/macro-options.json @@ -0,0 +1,115 @@ +[ + { + "name": "meta", + "type": "object", + "required": false, + "description": "Object containing options for the meta navigation.", + "params": [ + { + "name": "visuallyHiddenTitle", + "type": "string", + "description": "Title for a meta item section, which defaults to Support links" + }, + { + "name": "html", + "type": "string", + "description": "HTML to add to the meta section of the footer, which will appear below any links specified using meta.items." + }, + { + "name": "text", + "type": "string", + "description": "Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored." + }, + { + "name": "items", + "type": "array", + "required": false, + "description": "Array of items for use in the meta section of the footer.", + "params": [ + { + "name": "text", + "type": "string", + "required": false, + "description": "List item text in the meta section of the footer." + }, + { + "name": "href", + "type": "string", + "required": false, + "description": "List item href attribute in the meta section of the footer." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the anchor in the footer meta section." + } + ] + } + ] + }, + { + "name": "navigation", + "type": "array", + "required": false, + "description": "Array of items for use in the navigation section of the footer.", + "params": [ + { + "name": "title", + "type": "string", + "required": false, + "description": "Title for a section" + }, + { + "name": "columns", + "type": "integer", + "required": false, + "description": "Amount of columns to display items in navigation section of the footer." + }, + { + "name": "items", + "type": "array", + "required": false, + "description": "Array of items to display in the list in navigation section of the footer.", + "params": [ + { + "name": "text", + "type": "string", + "required": false, + "description": "List item text in the navigation section of the footer." + }, + { + "name": "href", + "type": "string", + "required": false, + "description": "List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the anchor in the footer navigation section." + } + ] + } + ] + }, + { + "name": "containerClasses", + "type": "string", + "required": false, + "description": "Classes that can be added to the inner container, useful if you want to make the footer full width." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the footer component container." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the footer component container." + } +] diff --git a/app/templates/new/components/footer/macro.njk b/app/templates/new/components/footer/macro.njk new file mode 100644 index 000000000..d0f92f065 --- /dev/null +++ b/app/templates/new/components/footer/macro.njk @@ -0,0 +1,3 @@ +{% macro usaFooter(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/app/templates/new/components/footer/template.njk b/app/templates/new/components/footer/template.njk new file mode 100644 index 000000000..6864f718a --- /dev/null +++ b/app/templates/new/components/footer/template.njk @@ -0,0 +1,117 @@ + + +
+
+
+
+
+

beta.notify.gov

+

An official website of the General + Services Administration

+
+
+
+ +
+
+
+ Looking for U.S. government information and services? +
+ Visit USA.gov +
+
+
diff --git a/app/templates/new/components/header/README.md b/app/templates/new/components/header/README.md new file mode 100644 index 000000000..a3ea34967 --- /dev/null +++ b/app/templates/new/components/header/README.md @@ -0,0 +1,15 @@ +# Header + +## Installation + +See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. + +## Guidance and Examples + +Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header). + +## Component options + +Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. + +See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details. diff --git a/app/templates/new/components/header/macro-options.json b/app/templates/new/components/header/macro-options.json new file mode 100644 index 000000000..4411e8100 --- /dev/null +++ b/app/templates/new/components/header/macro-options.json @@ -0,0 +1,88 @@ +[ + { + "name": "homepageUrl", + "type": "string", + "required": false, + "description": "The url of the homepage. Defaults to /" + }, + { + "name": "assetsPath", + "type": "string", + "required": false, + "description": "The public path for the assets folder. If not provided it defaults to /assets/images" + }, + { + "name": "productName", + "type": "string", + "required": false, + "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)" + }, + { + "name": "serviceName", + "type": "string", + "required": false, + "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)" + }, + { + "name": "serviceUrl", + "type": "string", + "required": false, + "description": "Url for the service name anchor." + }, + { + "name": "navigation", + "type": "array", + "required": false, + "description": "An array of navigation item objects.", + "params": [ + { + "name": "text", + "type": "string", + "required": false, + "description": "Text of the navigation item." + }, + { + "name": "href", + "type": "string", + "required": false, + "description": "Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item." + }, + { + "name": "active", + "type": "boolean", + "required": false, + "description": "Flag to mark the navigation item as active or not." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the navigation item anchor." + } + ] + }, + { + "name": "navigationClasses", + "type": "string", + "required": false, + "description": "Classes for the navigation section of the header." + }, + { + "name": "containerClasses", + "type": "string", + "required": false, + "description": "Classes for the container, useful if you want to make the header fixed width." + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the header container." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the header container." + } +] diff --git a/app/templates/new/components/header/macro.njk b/app/templates/new/components/header/macro.njk new file mode 100644 index 000000000..3f0101fc2 --- /dev/null +++ b/app/templates/new/components/header/macro.njk @@ -0,0 +1,3 @@ +{% macro usaHeader(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/app/templates/new/components/header/template.njk b/app/templates/new/components/header/template.njk new file mode 100644 index 000000000..6cc8cabd8 --- /dev/null +++ b/app/templates/new/components/header/template.njk @@ -0,0 +1,104 @@ + +
+
+
+
+
+ +
+ + +
+
+ +
+
+ + +
+
+ + {% if current_user.is_authenticated %} + + {% endif %} +
+ +
diff --git a/app/templates/new/components/skip-link/README.md b/app/templates/new/components/skip-link/README.md new file mode 100644 index 000000000..feb7c6614 --- /dev/null +++ b/app/templates/new/components/skip-link/README.md @@ -0,0 +1,15 @@ +# Skip link + +## Installation + +See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. + +## Guidance and Examples + +Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link). + +## Component options + +Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. + +See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example-default) for details. diff --git a/app/templates/new/components/skip-link/macro-options.json b/app/templates/new/components/skip-link/macro-options.json new file mode 100644 index 000000000..9a36a1267 --- /dev/null +++ b/app/templates/new/components/skip-link/macro-options.json @@ -0,0 +1,32 @@ +[ + { + "name": "text", + "type": "string", + "required": true, + "description": "If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored." + }, + { + "name": "html", + "type": "string", + "required": true, + "description": "If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored." + }, + { + "name": "href", + "type": "string", + "required": true, + "description": "The value of the skip link href attribute. Defaults to" + }, + { + "name": "classes", + "type": "string", + "required": false, + "description": "Classes to add to the skip link." + }, + { + "name": "attributes", + "type": "object", + "required": false, + "description": "HTML attributes (for example data attributes) to add to the skip link." + } +] diff --git a/app/templates/new/components/skip-link/macro.njk b/app/templates/new/components/skip-link/macro.njk new file mode 100644 index 000000000..4b1d7ff9a --- /dev/null +++ b/app/templates/new/components/skip-link/macro.njk @@ -0,0 +1,3 @@ +{% macro usaSkipLink(params) %} + {%- include "./template.njk" -%} +{% endmacro %} diff --git a/app/templates/new/components/skip-link/template.njk b/app/templates/new/components/skip-link/template.njk new file mode 100644 index 000000000..e0dad15a8 --- /dev/null +++ b/app/templates/new/components/skip-link/template.njk @@ -0,0 +1,7 @@ + + {{- params.html | safe if params.html else params.text -}} + + + + Skip to main content + diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md new file mode 100644 index 000000000..cdf824871 --- /dev/null +++ b/app/templates/new/templates_glossary.md @@ -0,0 +1,27 @@ + +# New Templates Glossary + +This document serves as a glossary for the templates directory structure of the project. + +## Directory Structure + +- `/templates` + - **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised). + - `base.html`: The main base template from which all other templates inherit. + - `/admin` + - `admin-base.html`: A specialized layout for admin pages. It extends `base.html` but can include additional styling, scripts, or components specific to admin interfaces to enhance security and organization. + - `withnav.html`: A variation of the base layout that includes a sidebar. + - `/error`: Templates for handling HTTP errors + - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized) + - `header.html`: Template for the site's header, included in `base.html`. + - `footer.html`: Template for the site's footer, included in `base.html`. + - **/partials**: For smaller, reusable pieces of templates, like navigation breadcrumbs or pagination controls we could put this folder into components but if it's more specific to layouts, we can move it into that folder as a sub directory + - **/views** (or **/pages**): Individual page templates that use the base layouts, components, and partials to present content. + +### Best Practices + +- Use **inheritance** (`{% extends %}`) to build on base layouts. +- Employ **components** (`{% include %}`) for reusable UI elements to keep the code DRY and facilitate easier updates. + +### Notes +- Macro json files are just guides on how to structure a dict. It's not actually being used as data being passed to components From dd37e277a54c6bea8aa84c2acc4202afb23d2d10 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Thu, 29 Feb 2024 10:56:50 -0800 Subject: [PATCH 2/6] updated relative path --- app/templates/new/base.html | 6 +- app/templates/new/components/footer/README.md | 15 --- .../new/components/footer/macro-options.json | 115 ----------------- app/templates/new/components/footer/macro.njk | 3 - .../new/components/footer/template.njk | 117 ------------------ app/templates/new/components/header/README.md | 15 --- .../new/components/header/macro-options.json | 88 ------------- app/templates/new/components/header/macro.njk | 3 - .../new/components/header/template.njk | 104 ---------------- .../new/components/skip-link/README.md | 15 --- .../components/skip-link/macro-options.json | 32 ----- .../new/components/skip-link/macro.njk | 3 - .../new/components/skip-link/template.njk | 7 -- 13 files changed, 3 insertions(+), 520 deletions(-) delete mode 100644 app/templates/new/components/footer/README.md delete mode 100644 app/templates/new/components/footer/macro-options.json delete mode 100644 app/templates/new/components/footer/macro.njk delete mode 100644 app/templates/new/components/footer/template.njk delete mode 100644 app/templates/new/components/header/README.md delete mode 100644 app/templates/new/components/header/macro-options.json delete mode 100644 app/templates/new/components/header/macro.njk delete mode 100644 app/templates/new/components/header/template.njk delete mode 100644 app/templates/new/components/skip-link/README.md delete mode 100644 app/templates/new/components/skip-link/macro-options.json delete mode 100644 app/templates/new/components/skip-link/macro.njk delete mode 100644 app/templates/new/components/skip-link/template.njk diff --git a/app/templates/new/base.html b/app/templates/new/base.html index 38ffb049d..2db02b21a 100644 --- a/app/templates/new/base.html +++ b/app/templates/new/base.html @@ -1,6 +1,6 @@ -{% from "./components/skip-link/macro.njk" import usaSkipLink -%} -{% from "./components/header/macro.njk" import usaHeader -%} -{% from "./components/footer/macro.njk" import usaFooter -%} +{% from "../components/components/skip-link/macro.njk" import usaSkipLink -%} +{% from "../components/components/header/macro.njk" import usaHeader -%} +{% from "../components/components/footer/macro.njk" import usaFooter -%} {# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #} {%- set assetUrl = assetUrl | default(assetPath) -%} diff --git a/app/templates/new/components/footer/README.md b/app/templates/new/components/footer/README.md deleted file mode 100644 index 49c5a7082..000000000 --- a/app/templates/new/components/footer/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Footer - -## Installation - -See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. - -## Guidance and Examples - -Find out when to use the footer component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/footer). - -## Component options - -Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. - -See [options table](https://design-system.service.gov.uk/components/footer/#options-example-default) for details. diff --git a/app/templates/new/components/footer/macro-options.json b/app/templates/new/components/footer/macro-options.json deleted file mode 100644 index f6e2967db..000000000 --- a/app/templates/new/components/footer/macro-options.json +++ /dev/null @@ -1,115 +0,0 @@ -[ - { - "name": "meta", - "type": "object", - "required": false, - "description": "Object containing options for the meta navigation.", - "params": [ - { - "name": "visuallyHiddenTitle", - "type": "string", - "description": "Title for a meta item section, which defaults to Support links" - }, - { - "name": "html", - "type": "string", - "description": "HTML to add to the meta section of the footer, which will appear below any links specified using meta.items." - }, - { - "name": "text", - "type": "string", - "description": "Text to add to the meta section of the footer, which will appear below any links specified using meta.items. If meta.html is specified, this option is ignored." - }, - { - "name": "items", - "type": "array", - "required": false, - "description": "Array of items for use in the meta section of the footer.", - "params": [ - { - "name": "text", - "type": "string", - "required": false, - "description": "List item text in the meta section of the footer." - }, - { - "name": "href", - "type": "string", - "required": false, - "description": "List item href attribute in the meta section of the footer." - }, - { - "name": "attributes", - "type": "object", - "required": false, - "description": "HTML attributes (for example data attributes) to add to the anchor in the footer meta section." - } - ] - } - ] - }, - { - "name": "navigation", - "type": "array", - "required": false, - "description": "Array of items for use in the navigation section of the footer.", - "params": [ - { - "name": "title", - "type": "string", - "required": false, - "description": "Title for a section" - }, - { - "name": "columns", - "type": "integer", - "required": false, - "description": "Amount of columns to display items in navigation section of the footer." - }, - { - "name": "items", - "type": "array", - "required": false, - "description": "Array of items to display in the list in navigation section of the footer.", - "params": [ - { - "name": "text", - "type": "string", - "required": false, - "description": "List item text in the navigation section of the footer." - }, - { - "name": "href", - "type": "string", - "required": false, - "description": "List item href attribute in the navigation section of the footer. Both `text` and `href` attributes need to be present to create a link." - }, - { - "name": "attributes", - "type": "object", - "required": false, - "description": "HTML attributes (for example data attributes) to add to the anchor in the footer navigation section." - } - ] - } - ] - }, - { - "name": "containerClasses", - "type": "string", - "required": false, - "description": "Classes that can be added to the inner container, useful if you want to make the footer full width." - }, - { - "name": "classes", - "type": "string", - "required": false, - "description": "Classes to add to the footer component container." - }, - { - "name": "attributes", - "type": "object", - "required": false, - "description": "HTML attributes (for example data attributes) to add to the footer component container." - } -] diff --git a/app/templates/new/components/footer/macro.njk b/app/templates/new/components/footer/macro.njk deleted file mode 100644 index d0f92f065..000000000 --- a/app/templates/new/components/footer/macro.njk +++ /dev/null @@ -1,3 +0,0 @@ -{% macro usaFooter(params) %} - {%- include "./template.njk" -%} -{% endmacro %} diff --git a/app/templates/new/components/footer/template.njk b/app/templates/new/components/footer/template.njk deleted file mode 100644 index 6864f718a..000000000 --- a/app/templates/new/components/footer/template.njk +++ /dev/null @@ -1,117 +0,0 @@ -
- {#
- Return to top -
#} -
-
-
-
- {# {% if params.navigation %} - - {% endif %} #} -
-
-
- {% if params.meta %} -

{{ params.meta.visuallyHiddenTitle | default("Support links") }}

- {% if params.meta.items %} - {% for item in params.meta.items %} - - {{ item.text }} - - {% endfor %} - {% endif %} - {% if params.meta.text or params.meta.html %} -
- {{ params.meta.html | safe if params.meta.html else params.meta.text }} -
- {% endif %} - {% endif %} -
-
-
- -
- -
-
-
-
-
-

beta.notify.gov

-

An official website of the General - Services Administration

-
-
-
- -
-
-
- Looking for U.S. government information and services? -
- Visit USA.gov -
-
-
diff --git a/app/templates/new/components/header/README.md b/app/templates/new/components/header/README.md deleted file mode 100644 index a3ea34967..000000000 --- a/app/templates/new/components/header/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Header - -## Installation - -See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. - -## Guidance and Examples - -Find out when to use the header component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/header). - -## Component options - -Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. - -See [options table](https://design-system.service.gov.uk/components/header/#options-example-default) for details. diff --git a/app/templates/new/components/header/macro-options.json b/app/templates/new/components/header/macro-options.json deleted file mode 100644 index 4411e8100..000000000 --- a/app/templates/new/components/header/macro-options.json +++ /dev/null @@ -1,88 +0,0 @@ -[ - { - "name": "homepageUrl", - "type": "string", - "required": false, - "description": "The url of the homepage. Defaults to /" - }, - { - "name": "assetsPath", - "type": "string", - "required": false, - "description": "The public path for the assets folder. If not provided it defaults to /assets/images" - }, - { - "name": "productName", - "type": "string", - "required": false, - "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)" - }, - { - "name": "serviceName", - "type": "string", - "required": false, - "description": "Header title that is placed next to GOV.UK. Used for product names (i.e. Pay, Verify)" - }, - { - "name": "serviceUrl", - "type": "string", - "required": false, - "description": "Url for the service name anchor." - }, - { - "name": "navigation", - "type": "array", - "required": false, - "description": "An array of navigation item objects.", - "params": [ - { - "name": "text", - "type": "string", - "required": false, - "description": "Text of the navigation item." - }, - { - "name": "href", - "type": "string", - "required": false, - "description": "Url of the navigation item anchor. Both `href` and `text` attributes for navigation items need to be provided to create an item." - }, - { - "name": "active", - "type": "boolean", - "required": false, - "description": "Flag to mark the navigation item as active or not." - }, - { - "name": "attributes", - "type": "object", - "required": false, - "description": "HTML attributes (for example data attributes) to add to the navigation item anchor." - } - ] - }, - { - "name": "navigationClasses", - "type": "string", - "required": false, - "description": "Classes for the navigation section of the header." - }, - { - "name": "containerClasses", - "type": "string", - "required": false, - "description": "Classes for the container, useful if you want to make the header fixed width." - }, - { - "name": "classes", - "type": "string", - "required": false, - "description": "Classes to add to the header container." - }, - { - "name": "attributes", - "type": "object", - "required": false, - "description": "HTML attributes (for example data attributes) to add to the header container." - } -] diff --git a/app/templates/new/components/header/macro.njk b/app/templates/new/components/header/macro.njk deleted file mode 100644 index 3f0101fc2..000000000 --- a/app/templates/new/components/header/macro.njk +++ /dev/null @@ -1,3 +0,0 @@ -{% macro usaHeader(params) %} - {%- include "./template.njk" -%} -{% endmacro %} diff --git a/app/templates/new/components/header/template.njk b/app/templates/new/components/header/template.njk deleted file mode 100644 index 6cc8cabd8..000000000 --- a/app/templates/new/components/header/template.njk +++ /dev/null @@ -1,104 +0,0 @@ - -
-
-
-
-
- -
- - -
-
- -
-
- - -
-
- - {% if current_user.is_authenticated %} - - {% endif %} -
- -
diff --git a/app/templates/new/components/skip-link/README.md b/app/templates/new/components/skip-link/README.md deleted file mode 100644 index feb7c6614..000000000 --- a/app/templates/new/components/skip-link/README.md +++ /dev/null @@ -1,15 +0,0 @@ -# Skip link - -## Installation - -See the [main README quick start guide](https://github.com/alphagov/govuk-frontend#quick-start) for how to install this component. - -## Guidance and Examples - -Find out when to use the skip link component in your service in the [GOV.UK Design System](https://design-system.service.gov.uk/components/skip-link). - -## Component options - -Use options to customize the appearance, content and behavior of a component when using a macro, for example, changing the text. - -See [options table](https://design-system.service.gov.uk/components/skip-link/#options-example-default) for details. diff --git a/app/templates/new/components/skip-link/macro-options.json b/app/templates/new/components/skip-link/macro-options.json deleted file mode 100644 index 9a36a1267..000000000 --- a/app/templates/new/components/skip-link/macro-options.json +++ /dev/null @@ -1,32 +0,0 @@ -[ - { - "name": "text", - "type": "string", - "required": true, - "description": "If `html` is set, this is not required. Text to use within the skip link component. If `html` is provided, the `text` argument will be ignored." - }, - { - "name": "html", - "type": "string", - "required": true, - "description": "If `text` is set, this is not required. HTML to use within the skip link component. If `html` is provided, the `text` argument will be ignored." - }, - { - "name": "href", - "type": "string", - "required": true, - "description": "The value of the skip link href attribute. Defaults to" - }, - { - "name": "classes", - "type": "string", - "required": false, - "description": "Classes to add to the skip link." - }, - { - "name": "attributes", - "type": "object", - "required": false, - "description": "HTML attributes (for example data attributes) to add to the skip link." - } -] diff --git a/app/templates/new/components/skip-link/macro.njk b/app/templates/new/components/skip-link/macro.njk deleted file mode 100644 index 4b1d7ff9a..000000000 --- a/app/templates/new/components/skip-link/macro.njk +++ /dev/null @@ -1,3 +0,0 @@ -{% macro usaSkipLink(params) %} - {%- include "./template.njk" -%} -{% endmacro %} diff --git a/app/templates/new/components/skip-link/template.njk b/app/templates/new/components/skip-link/template.njk deleted file mode 100644 index e0dad15a8..000000000 --- a/app/templates/new/components/skip-link/template.njk +++ /dev/null @@ -1,7 +0,0 @@ - - {{- params.html | safe if params.html else params.text -}} - - - - Skip to main content - From 98297515d8ff71ac059ca0fbdae29a36c8accf20 Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Thu, 29 Feb 2024 16:36:11 -0800 Subject: [PATCH 3/6] updated base.html template to also include admin-template --- app/templates/new/base.html | 368 ++++++++++++++++-- .../new/layouts/withnav_template.html | 41 ++ app/templates/new/templates_glossary.md | 20 +- 3 files changed, 394 insertions(+), 35 deletions(-) create mode 100644 app/templates/new/layouts/withnav_template.html diff --git a/app/templates/new/base.html b/app/templates/new/base.html index 2db02b21a..7f806b660 100644 --- a/app/templates/new/base.html +++ b/app/templates/new/base.html @@ -1,65 +1,373 @@ -{% from "../components/components/skip-link/macro.njk" import usaSkipLink -%} -{% from "../components/components/header/macro.njk" import usaHeader -%} -{% from "../components/components/footer/macro.njk" import usaFooter -%} -{# specify absolute url for the static assets folder e.g. http://wwww.domain.com/assets #} -{%- set assetUrl = assetUrl | default(assetPath) -%} +{% from "components/banner.html" import banner %} +{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%} +{% from "./components/components/header/macro.njk" import usaHeader -%} +{% from "./components/components/footer/macro.njk" import usaFooter -%} + + - {% block pageTitle %}Notify.gov{% endblock %} + + {% block pageTitle %} + {% block per_page_title %} {% endblock %}Notify.gov + <!-- on templates that were using content_template.html, we might need to use the {{ content_page_title }} variable for the per_page_title --> + {% endblock %} + {% if config['NR_MONITOR_ON'] %} {% include "partials/newrelic.html" -%} {% endif %} - {# Ensure that older IE versions always render with the correct rendering engine #} - {% block headIcons %} - - - - + + + + {% endblock %} - {% block head %}{% endblock %} - {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #} - {% block meta %} - - + {% block head %} + + {% block extra_stylesheets %} + {% endblock %} + {% if g.hide_from_search_engines %} + + {% endif %} + + {# The default og:image is added below head so that scrapers see any custom metatags first, and this is just a fallback #} + {% block meta_format_detection %} + + {% endblock %} + {% block meta %} + + + {% endblock %} + {% endblock %} + - {% block bodyStart %}{% endblock %} - + {% block bodyStart %} + {% block extra_javascripts_before_body %} + + + + {% endblock %} + {% endblock %} +
block skipLink {% block skipLink %} {{ usaSkipLink({ "href": '#main-content', "text": 'Skip to main content' }) }} {% endblock %} +
+
block header {% block header %} - {{ usaHeader({}) }} - {% endblock %} + {% if current_user.is_authenticated %} + {% if current_user.platform_admin %} + {% set navigation = [ + { + "href": url_for("main.show_accounts_or_dashboard"), + "text": "Current service", + "active": header_navigation.is_selected('accounts-or-dashboard') + }, + { + "href": url_for('main.get_started'), + "text": "Using Notify", + "active": header_navigation.is_selected('using_notify') + }, + { + "href": url_for('main.features'), + "text": "Features", + "active": header_navigation.is_selected('features') + }, + { + "href": url_for('main.platform_admin_splash_page'), + "text": "Platform admin", + "active": header_navigation.is_selected('platform-admin') + }, + { + "href": url_for('main.support'), + "text": "Contact us", + "active": header_navigation.is_selected('support') + } + ] %} + {% if current_service %} + {% set secondaryNavigation = [ + { + "href": url_for('main.service_settings', service_id=current_service.id), + "text": "Settings", + "active": secondary_navigation.is_selected('settings') + }, + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% else %} + {% set secondaryNavigation = [ + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% endif %} + {% else %} + {% set navigation = [ + { + "href": url_for("main.show_accounts_or_dashboard"), + "text": "Current service", + "active": header_navigation.is_selected('accounts-or-dashboard') + }, + { + "href": url_for('main.get_started'), + "text": "Using Notify", + "active": header_navigation.is_selected('using_notify') + }, + { + "href": url_for('main.features'), + "text": "Features", + "active": header_navigation.is_selected('features') + }, + { + "href": url_for('main.support'), + "text": "Contact us", + "active": header_navigation.is_selected('support') + }, + { + "href": url_for('main.user_profile'), + "text": "User profile", + "active": header_navigation.is_selected('user-profile') + } + ] %} + {% if current_service %} + {% set secondaryNavigation = [ + { + "href": url_for('main.service_settings', service_id=current_service.id), + "text": "Settings", + "active": secondary_navigation.is_selected('settings') + }, + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% else %} + {% set secondaryNavigation = [ + { + "href": url_for('main.sign_out'), + "text": "Sign out" + } + ] %} + {% endif %} + {% endif %} + {% else %} + + {# {% set navigation = [ + { + "href": url_for('main.get_started'), + "text": "Using Notify", + "active": header_navigation.is_selected('using_notify') + }, + { + "href": url_for('main.features'), + "text": "Features", + "active": header_navigation.is_selected('features') + }, + { + "href": url_for('main.support'), + "text": "Contact us", + "active": header_navigation.is_selected('support') + }, + { + "href": url_for('main.sign_in'), + "text": "Sign in", + "active": header_navigation.is_selected('sign-in') + } + ] %} #} + {% endif %} + {{ usaHeader({ + "homepageUrl": url_for('main.show_accounts_or_dashboard'), + "productName": "Notify", + "navigation": navigation, + "navigationClasses": "govuk-header__navigation--end", + "secondaryNavigation": secondaryNavigation, + "assetsPath": asset_path + "images" + }) }} + {% endblock %} +
+ +
block main {% block main %} -
- {% block beforeContent %}{% endblock %} -
- {% block content %}{% endblock %} -
-
+
+ {% block beforeContent %} + {% block backLink %}{% endblock %} + {% endblock %} + {% block mainClasses %} + +
+ {% endblock %} + {% block content %} + {% block flash_messages %} + + {% endblock %} + {% block maincolumn_content %} + {% block fromContentTemplatetwoColumnGrid %} +
+ {% if navigation_links %} +
+ {{ sub_navigation(navigation_links) }} +
+
+ {% else %} +
+ {% endif %} + {% block content_column_content %}{% endblock %} +
+
+ + {% endblock %} + {% endblock %} + {% endblock %} +
+
{% endblock %} +
+
block footer {% block footer %} - {{ usaFooter({}) }} - {% endblock %} - {% block bodyEnd %}{% endblock %} + {% if current_service and current_service.research_mode %} + {% set meta_suffix = 'Built by the Technology Transformation Servicesresearch mode' %} + {% else %} + {% set meta_suffix = 'Built by the Technology Transformation Services' %} + {% endif %} + + {{ usaFooter({ + "classes": "js-footer", + "navigation": [ + { + "title": "About Notify", + "columns": 1, + "items": [ + { + "href": url_for("main.features"), + "text": "Features" + }, + { + "href": url_for("main.roadmap"), + "text": "Roadmap" + }, + { + "href": url_for("main.security"), + "text": "Security" + }, + { + "href": url_for("main.terms"), + "text": "Terms of use" + }, + ] + }, + { + "title": "Using Notify", + "columns": 1, + "items": [ + { + "href": url_for("main.get_started"), + "text": "Get started" + }, + { + "href": url_for("main.pricing"), + "text": "Pricing" + }, + { + "href": url_for("main.trial_mode_new"), + "text": "Trial mode" + }, + { + "href": url_for("main.message_status"), + "text": "Delivery status" + }, + { + "href": url_for("main.guidance_index"), + "text": "Guidance" + }, + { + "href": url_for("main.documentation"), + "text": "API documentation" + } + ] + }, + { + "title": "Support", + "columns": 1, + "items": [ + { + "href": url_for('main.support'), + "text": "Contact us" + }, + ] + }, + ], + "meta": { + "items": meta_items, + "html": meta_suffix + } + }) }} + + {% if current_user.is_authenticated %} + {% block sessionUserWarning %} + +
+
+

+ Your session will end soon. + Please choose to extend your session or sign out. Your session will expire in 5 minutes or less. +

+
+

You have been inactive for too long. + Your session will expire in . +

+
+
+
    +
  • + +
    • +
  • + +
    • +
+
+
+
+ + {% endblock %} + {% endif %} + + {% endblock %} +
+ + {% block bodyEnd %} + {% block extra_javascripts %} + {% endblock %} + + + + + {% endblock %} diff --git a/app/templates/new/layouts/withnav_template.html b/app/templates/new/layouts/withnav_template.html new file mode 100644 index 000000000..78cd85e6a --- /dev/null +++ b/app/templates/new/layouts/withnav_template.html @@ -0,0 +1,41 @@ +{% extends "base.html" %} + +{% block per_page_title %} + {% block service_page_title %}{% endblock %} – {{ current_service.name }} +{% endblock %} + +{% block main %} +
+ {% block serviceNavigation %} + {% include "service_navigation.html" %} + {% endblock %} + +
+ {% if help %} +
+ {% else %} +
+ {% endif %} + {% block sideNavigation %} + {% include "main_nav.html" %} + + {% endblock %} +
+ {% if help %} +
+ {% else %} +
+ {% endif %} + {% block beforeContent %} + {% block backLink %}{% endblock %} + {% endblock %} +
+ {% block content %} + {% include 'flash_messages.html' %} + {% block maincolumn_content %}{% endblock %} + {% endblock %} +
+
+
+
+{% endblock %} diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md index cdf824871..a34d06b01 100644 --- a/app/templates/new/templates_glossary.md +++ b/app/templates/new/templates_glossary.md @@ -6,16 +6,13 @@ This document serves as a glossary for the templates directory structure of the ## Directory Structure - `/templates` + - `base.html`: The main base template from which all other templates inherit. This template is a combination of the old admin_template and main_template.html - **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised). - - `base.html`: The main base template from which all other templates inherit. - - `/admin` - - `admin-base.html`: A specialized layout for admin pages. It extends `base.html` but can include additional styling, scripts, or components specific to admin interfaces to enhance security and organization. - - `withnav.html`: A variation of the base layout that includes a sidebar. + - `withnav_template.html`: A variation of the base layout that includes a sidebar. - `/error`: Templates for handling HTTP errors - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized) - `header.html`: Template for the site's header, included in `base.html`. - `footer.html`: Template for the site's footer, included in `base.html`. - - **/partials**: For smaller, reusable pieces of templates, like navigation breadcrumbs or pagination controls we could put this folder into components but if it's more specific to layouts, we can move it into that folder as a sub directory - **/views** (or **/pages**): Individual page templates that use the base layouts, components, and partials to present content. ### Best Practices @@ -25,3 +22,16 @@ This document serves as a glossary for the templates directory structure of the ### Notes - Macro json files are just guides on how to structure a dict. It's not actually being used as data being passed to components + + + +### Old Layout Templates We Don't Need +- withoutnav_template.html Delete +- main_template.html Delete +- settings_templates.html Delete +- settings_nav.html (move to /new/navigation directory) +- main_nav.html (move to /new/navigation directory) +- service_navigation.html (move to /new/navigation directory) +- org_template, could be under it's own directory called /organization +- org_nav.html (move to /new/navigation directory) +- -content_template.html Delete and consolidate to base template From ebd04e44c2ed61e00bc18995aba25e434498eaed Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Thu, 29 Feb 2024 16:38:41 -0800 Subject: [PATCH 4/6] revert main_Template --- app/templates/admin_template.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/templates/admin_template.html b/app/templates/admin_template.html index bd4383579..c48f768ce 100644 --- a/app/templates/admin_template.html +++ b/app/templates/admin_template.html @@ -1,4 +1,4 @@ -{% extends "new/base.html" %} +{% extends "main_template.html" %} {% from "components/banner.html" import banner %} {% block headIcons %} From 996db0d60bd7765bbffb79f3bf862daf1027f8ae Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Fri, 1 Mar 2024 10:38:07 -0800 Subject: [PATCH 5/6] relative path update --- app/templates/new/base.html | 23 +++++++++++------------ app/templates/new/templates_glossary.md | 6 +++--- 2 files changed, 14 insertions(+), 15 deletions(-) diff --git a/app/templates/new/base.html b/app/templates/new/base.html index 7f806b660..b175cff51 100644 --- a/app/templates/new/base.html +++ b/app/templates/new/base.html @@ -1,7 +1,7 @@ -{% from "components/banner.html" import banner %} -{% from "./components/components/skip-link/macro.njk" import usaSkipLink -%} -{% from "./components/components/header/macro.njk" import usaHeader -%} -{% from "./components/components/footer/macro.njk" import usaFooter -%} +{% from "../components/banner.html" import banner %} +{% from "../components/components/skip-link/macro.njk" import usaSkipLink -%} +{% from "../components/components/header/macro.njk" import usaHeader -%} +{% from "../components/components/footer/macro.njk" import usaFooter -%} @@ -59,16 +59,15 @@ {% endblock %} {% endblock %} -
block skipLink + {% block skipLink %} {{ usaSkipLink({ "href": '#main-content', "text": 'Skip to main content' }) }} {% endblock %} -
-
block header + {% block header %} {% if current_user.is_authenticated %} {% if current_user.platform_admin %} @@ -203,9 +202,9 @@ "assetsPath": asset_path + "images" }) }} {% endblock %} -
+ -
block main + {% block main %}
{% block beforeContent %} @@ -240,9 +239,9 @@
{% endblock %} -
+ -
block footer + {% block footer %} {% if current_service and current_service.research_mode %} @@ -359,7 +358,7 @@ {% endif %} {% endblock %} -
+ {% block bodyEnd %} {% block extra_javascripts %} diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md index a34d06b01..894628d89 100644 --- a/app/templates/new/templates_glossary.md +++ b/app/templates/new/templates_glossary.md @@ -6,7 +6,7 @@ This document serves as a glossary for the templates directory structure of the ## Directory Structure - `/templates` - - `base.html`: The main base template from which all other templates inherit. This template is a combination of the old admin_template and main_template.html + - `base.html`: The main base template from which all other templates inherit. This template is a combination of `main_template`, `admin_template`, `settings_template`, and `content_template`. - **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised). - `withnav_template.html`: A variation of the base layout that includes a sidebar. - `/error`: Templates for handling HTTP errors @@ -20,8 +20,8 @@ This document serves as a glossary for the templates directory structure of the - Use **inheritance** (`{% extends %}`) to build on base layouts. - Employ **components** (`{% include %}`) for reusable UI elements to keep the code DRY and facilitate easier updates. -### Notes -- Macro json files are just guides on how to structure a dict. It's not actually being used as data being passed to components +### Observation Notes +- The macro-options.json files in the header and footer component act as structural guides. They aren't directly used as data passed to the usaFooter function/macro. Instead, these files outline the expected properties and provide a description of their purpose. The `usaFooter` macro component is currently only invoked in the `admin_template`, which will eventually serve as the `base.html` template. This will simplify the approach when we change the footer macros to componenets by eliminating the need to dynamically pass this data from the base.html template. From cea10446f7f8abaeb5c7efc642cea584c8f7ee9d Mon Sep 17 00:00:00 2001 From: Beverly Nguyen Date: Mon, 4 Mar 2024 11:03:22 -0800 Subject: [PATCH 6/6] added notes and org_template --- app/templates/new/layouts/org_template.html | 35 +++++++++++++++++++ .../new/layouts/withnav_template.html | 2 +- app/templates/new/templates_glossary.md | 10 +++--- 3 files changed, 41 insertions(+), 6 deletions(-) create mode 100644 app/templates/new/layouts/org_template.html diff --git a/app/templates/new/layouts/org_template.html b/app/templates/new/layouts/org_template.html new file mode 100644 index 000000000..5e04003fd --- /dev/null +++ b/app/templates/new/layouts/org_template.html @@ -0,0 +1,35 @@ +{% extends "base.html" %} + +{% block per_page_title %} + {% block org_page_title %}{% endblock %} – {{ current_org.name }} +{% endblock %} + +{% block main %} +
+
+ {% if current_user.platform_admin %} + Organizations + {% endif %} +
+ {{ current_org.name }} +
+ Switch service +
+
+
+ {% include "org_nav.html" %} +
+
+ {% block beforeContent %} + {% block backLink %}{% endblock %} + {% endblock %} +
+ {% block content %} + {% include 'flash_messages.html' %} + {% block maincolumn_content %}{% endblock %} + {% endblock %} +
+
+
+
+{% endblock %} diff --git a/app/templates/new/layouts/withnav_template.html b/app/templates/new/layouts/withnav_template.html index 78cd85e6a..412a004d0 100644 --- a/app/templates/new/layouts/withnav_template.html +++ b/app/templates/new/layouts/withnav_template.html @@ -9,7 +9,7 @@ {% block serviceNavigation %} {% include "service_navigation.html" %} {% endblock %} - +
{% if help %}
diff --git a/app/templates/new/templates_glossary.md b/app/templates/new/templates_glossary.md index 894628d89..81325e26c 100644 --- a/app/templates/new/templates_glossary.md +++ b/app/templates/new/templates_glossary.md @@ -6,10 +6,10 @@ This document serves as a glossary for the templates directory structure of the ## Directory Structure - `/templates` - - `base.html`: The main base template from which all other templates inherit. This template is a combination of `main_template`, `admin_template`, `settings_template`, and `content_template`. + - `base.html`: The main base template from which all other templates inherit. This template is a combination of `main_template`, `admin_template`, `withoutnav_template` and `content_template`. - **/layouts**: Contains base templates and shared layouts used across the site. Simply put, it defines the overall structure or skeleton of the application (less frequently revised). - `withnav_template.html`: A variation of the base layout that includes a sidebar. - - `/error`: Templates for handling HTTP errors + - `org_template.html`: A variaton of the withnav_template - **/components**: Houses reusable UI components that can be included in multiple templates and can be tailored with different content or links depending on the context.(more frequently revised or customized) - `header.html`: Template for the site's header, included in `base.html`. - `footer.html`: Template for the site's footer, included in `base.html`. @@ -28,10 +28,10 @@ This document serves as a glossary for the templates directory structure of the ### Old Layout Templates We Don't Need - withoutnav_template.html Delete - main_template.html Delete -- settings_templates.html Delete +- settings_templates.html `withnav_template` can be used to replace `settings_template`. - settings_nav.html (move to /new/navigation directory) - main_nav.html (move to /new/navigation directory) - service_navigation.html (move to /new/navigation directory) -- org_template, could be under it's own directory called /organization +- org_template, could be under it's own directory called /layout/organization - org_nav.html (move to /new/navigation directory) -- -content_template.html Delete and consolidate to base template +- content_template.html Delete