From 1a206571778fb72d9261dfa8d0ff915082dfab00 Mon Sep 17 00:00:00 2001
From: Murray Lippiatt <58863567+murrlipp@users.noreply.github.com>
Date: Fri, 20 Dec 2024 16:17:39 +0000
Subject: [PATCH] docs: apply tabbed view to components (#1038)

- button menu
- date picker
- interruption card
---
 docs/components/button-menu.md       | 20 +++++++++++++++++++-
 docs/components/date-picker.md       | 18 ++++++++++++++++++
 docs/components/interruption-card.md | 14 ++++++++++++++
 3 files changed, 51 insertions(+), 1 deletion(-)

diff --git a/docs/components/button-menu.md b/docs/components/button-menu.md
index adcbbf5cd..a634151c4 100644
--- a/docs/components/button-menu.md
+++ b/docs/components/button-menu.md
@@ -11,8 +11,12 @@ eleventyNavigation:
 
 <span class="govuk-caption-xl">The button menu is a versatile component that allows users to view tasks as buttons in a collapsible menu.</span>
 
-{% example "/examples/button-menu", 250 %}
 
+{% tabs "Contents" %}
+
+{% tab "Overview" %}
+
+{% example "/examples/button-menu", 250 %}
 
 ## Overview
 
@@ -55,6 +59,10 @@ There’s also the:
 - [summary list component on the GOV.UK Design System](https://design-system.service.gov.uk/components/summary-list/)
 - [identity bar component](/components/identity-bar/)
 
+{% endtab %}
+
+{% tab "How to use" %}
+
 ## How to use
 
 ### Position on the page
@@ -119,6 +127,10 @@ Users may believe that menu buttons with the same title (particularly generic ti
 
 Content can run into a second line.
 
+{% endtab %}
+
+{% tab "Examples" %}
+
 ## Examples
 
 ### Within a case management system
@@ -132,3 +144,9 @@ The location of the buttons helps users to know what the tasks relate to.
 Adding a button menu to the multi select component helps users complete common tasks quickly, for example assigning cases.
 
 <p><img src="{{ 'assets/images/button-menu-multi-select-example-2024.png' | rev | url }}" alt="An example of a button menu and GOV.UK default button on a Ministry of Justice webpage. The grey button menu is to the right of the green button. This is next to the H2 title 'Case management'. Both are below the H1 title 'Case management'. The title of the green button is 'Record review' and the button menu is 'Print options', which contains: Print case, Print review, Print investigation and Print referral."></p>
+
+{% endtab %}
+
+{% endtabs %}
+
+<hr />
\ No newline at end of file
diff --git a/docs/components/date-picker.md b/docs/components/date-picker.md
index c704f5cfb..146b45dee 100644
--- a/docs/components/date-picker.md
+++ b/docs/components/date-picker.md
@@ -11,6 +11,10 @@ eleventyNavigation:
 
 <span class="govuk-caption-xl">The date picker component enables users to select a date from a calendar.  </span>
 
+{% tabs "Contents" %}
+
+{% tab "Overview" %}
+
 {% example "/examples/date-picker", 590 %}
 
 ## Overview
@@ -43,6 +47,10 @@ Date pickers are fully navigable using a keyboard, but can be slow for keyboard-
 
 There's also the ['Ask users for dates' pattern in the GOV.UK Design System](https://design-system.service.gov.uk/patterns/dates/).
 
+{% endtab %}
+
+{% tab "How to use" %}
+
 ## How to use
 
 ### Hint text
@@ -105,6 +113,10 @@ Follow the [GOV.UK Design System guidance on error messages](https://design-syst
 
 If you're using more than one date picker, give each text field its own error summary and message (even if the error is the same).
 
+{% endtab %}
+
+{% tab "Examples" %}
+
 ## Examples
 
 ### Filtering information with a date picker
@@ -114,3 +126,9 @@ If you're using more than one date picker, give each text field its own error su
 ### Asking a question with a date picker
 
 <p><img src="{{ 'assets/images/date-picker-question-example-2024.png' | rev | url }}" alt="A screenshot with the title 'What date do you want to view appointments for?' Underneath is the title 'Date' and then a text input field with the calendar icon. Underneath that is a green 'Continue' button."></p>
+
+{% endtab %}
+
+{% endtabs %}
+
+<hr />
\ No newline at end of file
diff --git a/docs/components/interruption-card.md b/docs/components/interruption-card.md
index f1e8492a5..7476dbbbe 100644
--- a/docs/components/interruption-card.md
+++ b/docs/components/interruption-card.md
@@ -11,6 +11,10 @@ eleventyNavigation:
 
 <span class="govuk-caption-xl">The interruption card component pauses a user’s journey with important information.</span>
 
+{% tabs "Contents" %}
+
+{% tab "Overview" %}
+
 {% example "/examples/interruption-card", 590 %}
 
 ## Overview
@@ -113,6 +117,10 @@ There’s also the:
 - [GOV.UK Design System panel](https://design-system.service.gov.uk/components/panel/)
 - [GOV.UK Design System notification banner](https://design-system.service.gov.uk/components/notification-banner/)
 
+{% endtab %}
+
+{% tab "How to use" %}
+
 ## How to use
 
 ### What to add to it
@@ -170,3 +178,9 @@ If a lot of interruption cards are emerging in a service, it might be a sign tha
 Users completing the same journey multiple times in a service will become overexposed to a particular interruption card. This could be a poor user experience if the card is used to highlight something important and the user has already seen it several times.
 
 Consider limiting the amount of times a particular interruption card is shown to users at the same stage of the journey.
+
+{% endtab %}
+
+{% endtabs %}
+
+<hr />
\ No newline at end of file