Add icons page and chips

layouts/_design-system-base.njk

@@ -58,14 +58,15 @@
 
 {% block cookies %}
   {{ tnaCookieBanner({
-    cookiesUrl: '/design-system/cookies'
+    cookiesUrl: "/design-system/cookies",
+    cookiesPath: "/design-system/"
   }) }}
 {% endblock %}
 
 {% block skipLink %}
   {{ tnaSkipLink({
-    href: 'main-content',
-    text: 'Skip to main content'
+    href: "main-content",
+    text: "Skip to main content"
   }) }}
 {% endblock %}
 

src/content/dates-and-times/index.md

@@ -23,7 +23,12 @@ Good examples of dates are:
 
 You can include a day of the week if space allows:
 
-- Monday 16 October 2023
+<dl class="tna-dl">
+  <dt>Time</dt>
+  <dd>Monday 16 October 2023, 19:00</dd>
+  <dt>Day</dt>
+  <dd>Monday 16 October 2023</dd>
+</dl>
 
 Use the HTML `time` element where possible:
 

src/styles/icons/brand-icon-button/index.njk

@@ -0,0 +1,9 @@
+---
+title: Button with brand icon
+layout: layout-example.njk
+---
+
+<a href="#" class="tna-button" role="button">
+    <i class="fa-brands fa-fw fa-youtube"></i>
+    Watch on YouTube
+</a>

src/styles/icons/chip-list-icons/index.njk

@@ -0,0 +1,26 @@
+---
+title: Chip list with icons
+layout: layout-example.njk
+---
+
+<h3 class="tna-heading-m">My birthday party</h3>
+<ul class="tna-chip-list">
+    <li class="tna-chip-list__item">
+        <span class="tna-chip">
+            <i class="fa-solid fa-fw fa-people-group"></i>
+            In-person
+        </span>
+    </li>
+    <li class="tna-chip-list__item">
+        <span class="tna-chip">
+            <i class="fa-solid fa-fw fa-money-bill-wave"></i>
+            Free
+        </span>
+    </li>
+    <li class="tna-chip-list__item">
+        <span class="tna-chip">
+            <i class="fa-solid fa-fw fa-wheelchair"></i>
+            Wheelchair accessible
+        </span>
+    </li>
+</ul>

src/styles/icons/icon-button/index.njk

@@ -0,0 +1,9 @@
+---
+title: Button with icon
+layout: layout-example.njk
+---
+
+<a href="#" class="tna-button" role="button">
+    <i class="fa-solid fa-fw fa-globe"></i>
+    Explore the collection
+</a>

src/styles/icons/index.md

@@ -0,0 +1,39 @@
+---
+layout: collection-page.njk
+title: Icons
+group: styles
+---
+
+{% from "_example.njk" import example %}
+
+Use icons sparingly to reinforce call to actions and support small pieces of information such as metadata.
+
+Icons should appear alongside text at the same font size.
+
+Don't rely on icons alone to convey meaning.
+
+## Call to action icons
+
+The main call to action button on a page can use an icon to add visual impact. Avoid using icons in all call to action buttons.
+
+{{ example({ group: "styles", item: "icons", example: "icon-button", html: true, nunjucks: false, open: false, size: "xxs" }) }}
+
+## Brand icons
+
+Use brand icons to add visual information to external site links.
+
+{{ example({ group: "styles", item: "icons", example: "brand-icon-button", html: true, nunjucks: false, open: false, size: "xxs" }) }}
+
+## Displaying information with icons
+
+Use a [description list](/design-system/styles/lists/#description-lists) to show a list of fields and values. If space allows, the titles can be enhanced with icons.
+
+{{ example({ group: "styles", item: "lists", example: "description-list-icons-plain", html: true, nunjucks: false, open: false, size: "s" }) }}
+
+### Chip lists with icons
+
+For smaller lists of metadata, icons can be used inside a [chip list](/design-system/styles/lists/#chip-lists).
+
+Ensure the text in the chips would still make sense even if the icons were removed.
+
+{{ example({ group: "styles", item: "icons", example: "chip-list-icons", html: true, nunjucks: false, open: false, size: "xs" }) }}

src/styles/lists/chip-list/index.njk

@@ -0,0 +1,28 @@
+---
+title: Chip list
+layout: layout-example.njk
+---
+
+<ul class="tna-chip-list">
+    <li class="tna-chip-list__item">
+        <span class="tna-chip">In-person</span>
+    </li>
+    <li class="tna-chip-list__item">
+        <span class="tna-chip">Free</span>
+    </li>
+    <li class="tna-chip-list__item">
+        <span class="tna-chip">Wheelchair accessible</span>
+    </li>
+</ul>
+
+<ul class="tna-chip-list">
+    <li class="tna-chip-list__item">
+        <a href="#" class="tna-chip tna-chip">Spicy</a>
+    </li>
+    <li class="tna-chip-list__item">
+        <a href="#" class="tna-chip tna-chip">Vegan</a>
+    </li>
+    <li class="tna-chip-list__item">
+        <a href="#" class="tna-chip tna-chip">Fewer than 600 calories</a>
+    </li>
+</ul>

src/styles/lists/index.md

@@ -14,25 +14,26 @@ group: styles
 
 {{ example({ group: "styles", item: "lists", example: "ordered-list", html: true, nunjucks: false, open: false, size: "xs" }) }}
 
-## Definition lists
+## Description lists
 
-{{ example({ group: "styles", item: "lists", example: "definition-list", html: true, nunjucks: false, open: false, size: "m" }) }}
+{{ example({ group: "styles", item: "lists", example: "description-list", html: true, nunjucks: false, open: false, size: "m" }) }}
 
-{{ example({ group: "styles", item: "lists", example: "definition-list-icons", html: true, nunjucks: false, open: false, size: "m" }) }}
+{{ example({ group: "styles", item: "lists", example: "description-list-icons", html: true, nunjucks: false, open: false, size: "m" }) }}
 
 ## Plain lists
 
+{{ example({ group: "styles", item: "lists", example: "unordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }}
 
+{{ example({ group: "styles", item: "lists", example: "ordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }}
 
+{{ example({ group: "styles", item: "lists", example: "description-list-plain", html: true, nunjucks: false, open: false, size: "m" }) }}
 
+{{ example({ group: "styles", item: "lists", example: "description-list-icons-plain", html: true, nunjucks: false, open: false, size: "m" }) }}
 
+## Chip lists
 
+You can use a chip list to display a list of [chips](/design-system/styles/typography/#chips).
 
+The chips in a chip list can be links and can also contain [chip icons](/design-system/styles/icons/#chip-lists-with-icons).
 
-{{ example({ group: "styles", item: "lists", example: "unordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }}
-
-{{ example({ group: "styles", item: "lists", example: "ordered-list-plain", html: true, nunjucks: false, open: false, size: "xs" }) }}
-
-{{ example({ group: "styles", item: "lists", example: "definition-list-plain", html: true, nunjucks: false, open: false, size: "m" }) }}
-
-{{ example({ group: "styles", item: "lists", example: "definition-list-icons-plain", html: true, nunjucks: false, open: false, size: "m" }) }}
+{{ example({ group: "styles", item: "lists", example: "chip-list", html: true, nunjucks: false, open: false, size: "xs" }) }}

src/styles/typography/chip-plain/index.njk

@@ -0,0 +1,6 @@
+---
+title: Chip
+layout: layout-example.njk
+---
+
+<div class="tna-chip tna-chip--plain">Online event</div>

src/styles/typography/chip/index.njk

@@ -0,0 +1,6 @@
+---
+title: Plain chip
+layout: layout-example.njk
+---
+
+<span class="tna-chip">Online event</span>

src/styles/typography/index.md

@@ -22,9 +22,7 @@ Large and extra large headings are Supria Sans Cond Medium and smaller headings
 
 Sometimes you may need to make it clear that a page is part of a larger section or group. To do this, you can use a heading group with a supertitle above the main heading.
 
-The supertitle should be short, at most about 2–3 words or 12–15 characters.
-
-By default, the supertitle is a contrasting colour to the text, usually inverted. It is controlled by the accent colour of the page.
+The supertitle style uses [chips](#chips).
 
 {{ example({ group: "styles", item: "typography", example: "headings-with-separate-supertitles", html: true, nunjucks: false, open: false, size: "xs" }) }}
 
@@ -65,3 +63,19 @@ Use bold sparingly. Overuse will make it difficult for users to know which parts
 ## Blockquotes
 
 {{ example({ group: "styles", item: "typography", example: "blockquote", html: true, nunjucks: false, open: false, size: "s" }) }}
+
+## Chips
+
+Chips are small "tags" of information. They are used in the [supertitles of heading groups](#headings-with-supertitles) as well as in the top left of some [card components](/design-system/components/card/).
+
+The chip should be short, at most about 2–3 words or 12–15 characters.
+
+{{ example({ group: "styles", item: "typography", example: "chip", html: true, nunjucks: false, open: false, size: "xxs" }) }}
+
+By default, the chip is a contrasting colour to the text, usually inverted. It is controlled by the accent colour of the page.
+
+You can use a plain style chip to avoid too much contrast in visually complex pages.
+
+{{ example({ group: "styles", item: "typography", example: "chip-plain", html: true, nunjucks: false, open: false, size: "xxs" }) }}
+
+Chips can be presented in a list format with a [chip list](/design-system/styles/lists/#chip-lists).