Improve content in the styles section with more examples and page gro…

…uping
nationalarchives · Dec 13, 2024 · fd68cc7 · fd68cc7
1 parent c8b9815
commit fd68cc7
Show file tree

Hide file tree

Showing 34 changed files with 753 additions and 468 deletions.
diff --git a/layouts/collection-page-index.njk b/layouts/collection-page-index.njk
@@ -32,21 +32,46 @@
     </div>
     {%- endif %}
     <nav id="{{ group }}-list" class="tna-section tna-!--no-padding-bottom" aria-label="{{ groupTitle }} pages">
-      <ul class="tna-container">
+      {% set subGroups = [] %}
       {% for item in collections[group] %}
-        <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
-          {{ tnaCard({
-            title: item.title,
-            headingLevel: 2,
-            headingSize: "s",
-            href: "/design-system/" + item.path.replace("index.html", ""),
-            text: item.description,
-            fullAreaClick: true,
-            classes: "tna-card--heading-link-arrow"
-          }) }}
-        </li>
-      {%- endfor %}
-      </div>
+        {% if item.subGroup and item.subGroup not in subGroups %}
+          {% set subGroups = subGroups.concat(item.subGroup) %}
+        {% endif %}
+      {% endfor %}
+      {% set subGroups = subGroups | sort %}
+      {% set subGroups = subGroups.concat("") %}
+      {% for subGroup in subGroups %}
+        {% set subGroupItems = [] %}
+        {% for item in collections[group] %}
+          {% if item.subGroup == subGroup or (subGroup == "" and not item.subGroup) %}
+            {% set subGroupItems = subGroupItems.concat(item) %}
+          {% endif %}
+        {% endfor %}
+        {% if subGroupItems | length %}
+          {% if subGroups | length > 1 %}
+          <div class="tna-container">
+            <div class="tna-column tna-column--full">
+              <h2 class="tna-heading-m tna-!--margin-bottom-s">{{ subGroup | capitalize or "Other " + groupTitle | lower }}</h2>
+            </div>
+          </div>
+          {% endif %}
+          <ul class="tna-container">
+          {% for item in subGroupItems %}
+            <li class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--width-1-2-small tna-column--full-tiny tna-!--margin-bottom-l">
+              {{ tnaCard({
+                title: item.title,
+                headingLevel: 3 if subGroups | length > 1 else 2,
+                headingSize: "s",
+                href: "/design-system/" + item.path.replace("index.html", ""),
+                text: item.description,
+                fullAreaClick: true,
+                classes: "tna-card--heading-link-arrow"
+              }) }}
+            </li>
+          {%- endfor %}
+          </ul>
+        {% endif %}
+      {% endfor %}
     </nav>
   </main>
 {% endblock %}

diff --git a/layouts/collection-page.njk b/layouts/collection-page.njk
@@ -44,31 +44,49 @@
       {{ contents | safe }}
     </main>
     <div id="{{ group }}-list" class="tna-column tna-column--width-1-4 tna-column--width-1-3-medium tna-column--full-small tna-column--full-tiny tna-section tna-!--hide-on-print" role="navigation" aria-label="{{ groupTitle }} navigation">
-      {% set items = [] %}
+      {% set subGroups = [] %}
       {% for item in collections[group] %}
-        {% set children = [] %}
-        {% set current = item.path == path %}
-        {% if current and headings %}
-          {% for heading in headings %}
-            {% set children = children.concat({
-              text: heading.title,
-              href: "#" + heading.href
+        {% if item.subGroup and item.subGroup not in subGroups %}
+        {% set subGroups = subGroups.concat(item.subGroup) %}
+        {% endif %}
+      {% endfor %}
+      {% set subGroups = subGroups | sort %}
+      {% set subGroups = subGroups.concat("") %}
+      {% if subGroups | length > 1 %}
+      <h2 class="tna-heading-m">{{ groupTitle }}</h2>
+      {% endif %}
+      {% for subGroup in subGroups %}
+        {% set items = [] %}
+        {% for item in collections[group] %}
+          {% if item.subGroup == subGroup or (subGroup == "" and not item.subGroup) %}
+            {% set children = [] %}
+            {% set current = item.path == path %}
+            {% if current and headings %}
+              {% for heading in headings %}
+                {% set children = children.concat({
+                  text: heading.title,
+                  href: "#" + heading.href
+                }) %}
+              {% endfor %}
+            {% endif %}
+            {% set items = items.concat({
+              text: item.title,
+              href: "/design-system/" + item.path.replace("index.html", ""),
+              children: children,
+              current: current
             }) %}
-          {% endfor %}
+          {% endif %}
+        {% endfor %}
+        {% if items | length %}
+          {{ tnaSidebar({
+            title: (subGroup | capitalize or "Other " + groupTitle | lower) if subGroups | length > 1 else groupTitle,
+            headingLevel: 3 if subGroups | length > 1 else 2,
+            headingSize: "s" if subGroups | length > 1 else "m",
+            items: items,
+            type: "pages"
+          }) }}
         {% endif %}
-        {% set items = items.concat({
-          text: item.title,
-          href: "/design-system/" + item.path.replace("index.html", ""),
-          children: children,
-          current: current
-        }) %}
       {% endfor %}
-      {{ tnaSidebar({
-        title: groupTitle,
-        headingLevel: 2,
-        items: items,
-        type: "pages"
-      }) }}
     </div>
     <div class="tna-column tna-column--full tna-!--hide-on-print">
       <hr>

diff --git a/layouts/examples/grid.njk b/layouts/examples/grid.njk
@@ -14,28 +14,96 @@
       justify-content: space-evenly;
     }
 
+    .tna-container,
+    .tna-column {
+      position: relative;
+    }
+
     .tna-container {
-      padding-top: 16px;
+      padding-top: 32px;
       padding-bottom: 16px;
+
+      background: #fad3d4;
     }
 
-    .tna-column {
+    .tna-container--nested {
       margin-top: 16px;
-      margin-bottom: 16px;
 
-      position: relative;
+      background: none;
+    }
 
-      color: #fff;
-      line-height: 3rem;
-      text-align: center;
+    .tna-column {
+      padding-top: 16px;
+      padding-bottom: 16px;
+
+      z-index: 2;
 
-      background: #1e1e1e;
       background-clip: content-box;
     }
 
     .tna-column p {
-      margin-top: 4px;
-      margin-bottom: 4px;
+      padding: 8px 0;
+
+      color: #fff;
+      line-height: 1.65;
+      background: #004c7e;
+    }
+
+    .tna-container::before,
+    .tna-column::before {
+      padding: 4px;
+
+      position: absolute;
+      z-index: 3;
+
+      color: #fff;
+      font-size: 13px;
+      line-height: 1;
+
+      background-color: #fe1d57;
+    }
+
+    .tna-container::before {
+      top: 0;
+      left: 0;
+
+      content: "Container";
+    }
+
+    .tna-container--nested::before {
+      left: 16.5px;
+
+      content: "Nested container";
+    }
+
+    .tna-column::before {
+      top: 0.5px;
+      left: 0.5px;
+
+      content: "Column";
+    }
+
+    .tna-container::after,
+    .tna-column::after {
+      position: absolute;
+      z-index: 1;
+
+      border: 1px #fe1d57 dashed;
+
+      content: "";
+    }
+
+    .tna-container::after {
+      inset: 0;
+    }
+
+    .tna-container--nested::after {
+      right: 16.5px;
+      left: 16.5px;
+    }
+
+    .tna-column::after {
+      inset: 0.5px;
     }
   </style>
 {% endblock %}
diff --git a/layouts/examples/plain.njk b/layouts/examples/plain.njk
@@ -17,10 +17,7 @@
   </style>
 {% endblock %}
 
-{%- set theme = "light" -%}
-{#% if not themeAccent %}
-{%- set themeAccent = "black" -%}
-{% endif %#}
+{%- set theme = theme or "light" -%}
 
 {% block cookies %}{% endblock %}
 {% block header %}{% endblock %}

diff --git a/lib/modules/_frontend-overrides.scss b/lib/modules/_frontend-overrides.scss
@@ -1,4 +1,5 @@
 @use "@nationalarchives/frontend/nationalarchives/tools/media";
+@use "@nationalarchives/frontend/nationalarchives/tools/spacing";
 @use "@nationalarchives/frontend/nationalarchives/tools/typography";
 
 .tna-button {
@@ -20,9 +21,13 @@
   }
 }
 
-.tna-sidebar--pages .tna-sidebar__item-children {
-  @include media.on-mobile {
-    display: none;
+.tna-sidebar {
+  @include spacing.space-above;
+
+  &--pages &__item-children {
+    @include media.on-mobile {
+      display: none;
+    }
   }
 }
 

diff --git a/src/get-started/production/index.md b/src/get-started/production/index.md
@@ -10,4 +10,4 @@ When making services in production, refer to the [National Archives Engineering
 
 ## Include TNA Frontend in your project
 
-See [Using TNA Frontend](https://github.com/nationalarchives/tna-frontend/wiki/Using-TNA-Frontend) in the TNA Frontend wiki for instructions on how to use National Archive styles and components in your applciation.
+See the [TNA Frontend Documentation](https://nationalarchives.github.io/tna-frontend-docs/) for instructions on how to use and customise National Archive styles and components in your applciation.
diff --git a/src/styles/colours/index.md b/src/styles/colours/index.md
@@ -3,6 +3,7 @@ layout: collection-page.njk
 title: Colours
 description: Use colours to add interest to your pages and content.
 group: styles
+subGroup: brand
 ---
 
 {% from "partials/example.njk" import example %}
@@ -48,6 +49,18 @@ Ou full list of web colours can be found in the [colour variables for TNA Fronte
 
 ## Theme colours
 
+### Light theme
+
+The light theme is the default that comes with using `tna-template`.
+
+{{ example({ group: "styles", item: "colours", example: "theme-light", html: false, nunjucks: false, size: "29_75rem", noPadding: true }) }}
+
+### Dark theme
+
+A dark theme can be used by adding the `tna-template--dark-theme` class.
+
+{{ example({ group: "styles", item: "colours", example: "theme-dark", html: false, nunjucks: false, size: "29_75rem", noPadding: true }) }}
+
 ### System theme
 
 The system theme can be used with `tna-template--system-theme` and follows the operating system preference for `prefers-color-scheme` ([MDN Web Docs - prefers-color-scheme](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-color-scheme)) which can either be `light` or `dark`.
@@ -65,18 +78,6 @@ Using the system theme will either display the [light theme](#light-theme) or [d
 </html>
 ```
 
-### Light theme
-
-The light theme is the default that comes with using `tna-template`.
-
-{{ example({ group: "styles", item: "colours", example: "theme-light", html: false, nunjucks: false, size: "29_75rem", noPadding: true }) }}
-
-### Dark theme
-
-A dark theme can be used by adding the `tna-template--dark-theme` class.
-
-{{ example({ group: "styles", item: "colours", example: "theme-dark", html: false, nunjucks: false, size: "29_75rem", noPadding: true }) }}
-
 ## High contrast themes
 
 The high contrast themes are applied on top of the existing light and dark themes. All themes follow the preference for `prefers-contrast` which can be `no-preference`, `more`, `less` or `custom`. See [MDN Web Docs - prefers-contrast](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-contrast).
@@ -172,13 +173,13 @@ The appropriate colours for all child elements such as text and links will also
 
 {{ example({ group: "styles", item: "colours", example: "block-accent-light", html: false, nunjucks: false, size: "18_75rem", noPadding: true }) }}
 
-> On dark themes, a light accent block will change to an accent block.
+> On dark themes, a light accent block will change to an [accent block](#accent).
 
 ## Colour contrast
 
 You must make sure that the contrast ratio of text and interactive elements in your service meets [level AA of the Web Content Accessibility Guidelines (WCAG 2.2)](https://www.w3.org/TR/WCAG22/#contrast-minimum).
 
-We check as many [colour combinations in TNA Frontend](https://nationalarchives.github.io/tna-frontend/iframe.html?args=&id=utilities-colours-combinations--light&viewMode=story) as we can for good contrast but there are still some combinations that should be avoided. For example the error summary component doesn't have enough contrast with its surroundings when used within an accented block.
+In TNA Frontend, we check as many [light colour combinations](https://nationalarchives.github.io/tna-frontend/iframe.html?args=&id=utilities-colours-combinations--light&viewMode=story) and [dark colour combinations](https://nationalarchives.github.io/tna-frontend/iframe.html?args=&id=utilities-colours-combinations--dark&viewMode=story) as we can for good contrast but there are still some combinations that should be avoided. For example the [error summary component](../../components/error-summary/) doesn't have enough contrast with its surroundings when used within an [accented block](#accent).
 
 Ensure you check for proper colour contrast in your service for both text and non-text elements:
Original file line number	Diff line number	Diff line change
Expand Up		@@ -10,4 +10,4 @@ When making services in production, refer to the [National Archives Engineering

		## Include TNA Frontend in your project

		See [Using TNA Frontend](https://github.com/nationalarchives/tna-frontend/wiki/Using-TNA-Frontend) in the TNA Frontend wiki for instructions on how to use National Archive styles and components in your applciation.
		See the [TNA Frontend Documentation](https://nationalarchives.github.io/tna-frontend-docs/) for instructions on how to use and customise National Archive styles and components in your applciation.