Edits and reworked use cases based on team input

Edits from code review

Revise 'do not use' mentions

Author: calvin-lau-sig7

src/components/panel/index.md

@@ -1,6 +1,6 @@
 ---
 title: Panel
-description: The Panel component is a visible container used on confirmation or results pages
+description: Use the Panel component to display important information in within confirmation and interruption pages
 section: Components
 aliases: confirmation box, results box, reference number, application complete, application number
 backlogIssueId: 55
@@ -16,10 +16,8 @@ The Panel component is a visible container used to highlight important content.
 
 Use the Panel component to display important information within:
 
-- Confirmation pages, which tell the user they’ve successfully completed the transaction
-- Interruption pages, which pause the user journey to give important information
-
-See guidance on [Confirmation pages](/patterns/confirmation-pages/) and [Interruption pages](/patterns/interruption-pages/).
+- [Confirmation pages](/patterns/confirmation-pages/), which tell the user they’ve successfully completed the transaction
+- [Interruption pages](/patterns/interruption-pages/), which pause the user journey to give important information
 
 ## When not to use this component
 
@@ -37,16 +35,16 @@ The confirmation panel is part of a [Confirmation page](/patterns/confirmation-p
 
 ### How to write confirmation panel text
 
-Keep your panel text brief, as it's only meant for a high-level explanation of what has happened. For example, 'Application complete'.
-
-Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information is less likely to wrap around the panel, which can happen when using the zoom function on mobiles.
+Keep your panel text brief, as it's only meant for a high-level explanation of what has happened.
 
-If you need to give detailed information, or more context, use the description text under the heading text.
+Aim to use short words and phrases to make sure highlighted information is easy to read at different screen sizes. For example, shorter amounts of information are less likely to wrap around the panel, which can happen when using the zoom function on mobiles.
 
 ## Interruption panel
 
 The interruption panel is part of an [Interruption page](/patterns/interruption-pages/) and shows the user important information that they’d miss if shown any other way.
 
 Within the panel is a ‘continue’ button that the user must interact with to resume their journey.
 
-The information itself is usually shown as heading with some description text, possibly a bullet or numbered list.
+The information itself is usually shown as heading with some description text, possibly with bullet points and numbered steps
+
+[EXAMPLE]

src/patterns/interruption-pages/index.md

@@ -12,48 +12,59 @@ layout: layout-pane.njk
 
 Use Interruption pages to pause the user’s journey to give them important information that they’d miss if shown any other way.
 
-The NHS Design System and Ministry of Justice (MOJ) Design System both include interruption pages or cards. The guidance on this page is based on their work.
-
-See [Interruption page on NHS Design System](https://service-manual.nhs.uk/design-system/patterns/interruption-page) and [Interruption card on MOJ Design System](https://design-patterns.service.justice.gov.uk/components/interruption-card/)
+{{ example({ group: "components", item: "panel", example: "default", html: true, nunjucks: true, open: false, size: "m", loading: "eager" }) }}
 
 ## When to use this pattern
 
-Think carefully before you choose to use an Interruption page, doing this might get in the way of the user completing their task.
-
-Both of the NHS Design System and MOJ Design System provide use cases for using Interruption pages to:
+Think carefully before you choose to use an Interruption page, as doing this might get in the way of the user completing their task.
 
-- warn the user when they’re doing something unusual that's likely to be a mistake
-- confirm something that cannot be undone (asking the user if they’re sure about doing something)
+Use Interruption pages to warn the user before they:
 
-The MOJ Design System also provide use cases to:
+- do something unusual that’s probably a mistake
+- do something that cannot be undone (asking the user “Are you sure?”)
+- give an answer that conflicts with existing information
 
-- warn the user when their answer conflicts with existing information the service knows about
-- end a journey when a confirmation page is not appropriate
-- show important information ahead of a task
+You can also use Interruption pages:
 
-We’ve also seen that many services in government use Interruption pages to show other types of important information that might otherwise get missed. See our [‘Interruption card’ discussion on GitHub](https://github.com/alphagov/govuk-design-system-backlog/issues/27) to see these examples.
+- instead of Confirmation pages to show a more varied journey outcomes (that are different to a straightforward success, rejection or completion)
+- to show the user important information ahead of a task
 
 ## When not to use this pattern
 
-Do not use Interruption pages unless you’re confident that both:
+Only use Interruption pages if you’re confident that:
 
-- there's evidence of a clear need to interrupt the user journey
-- this is the only way to give the user information that they’d otherwise miss
+1. There’s evidence of a clear need to interrupt the user journey.
+2. This is the only way to give the user information and that they’d otherwise miss it.
 
 Read guidance in the Service Manual, particularly to [Map and understand a user's whole problem](https://www.gov.uk/service-manual/design/map-a-users-whole-problem), to find ways to improve the user journey and the organisational processes behind them.
 
 ## How it works
 
-Interruption pages pause the user journey to show important information that they might otherwise miss.
+Interruption pages pause the user journey to show important information.
 
 On the page, the important information is shown within an Interruption panel, to help ensure the user does not miss it.
 
-The panel includes a ‘continue’ button that the user must interact with to resume their journey. Information within the panel is usually shown as heading with some description text, possibly a bullet or numbered list.
+The panel includes a ‘continue’ button that the user must interact with to resume their journey. Information within the panel is usually shown as heading with some description text, possibly with bullet points and numbered steps.
 
-To ensure the interruption is useful, keep information within the panel short. Do not place any other components or form elements inside the panel.
+Keep information within the panel short. Do not place any other components or form elements inside the panel.
 
 ## Research on this pattern
 
+This pattern was originally contributed by the NHS Design System. We thank the team for working with us to publish the [Interruption panel variant of the Panel component](/components/panel/) and this pattern.
+
+Guidance in this pattern is based on:
+
+- [Interruption page on NHS Design System](https://service-manual.nhs.uk/design-system/patterns/interruption-page)
+- [Interruption card on Ministry of Justice (MOJ) Design System](https://design-patterns.service.justice.gov.uk/components/interruption-card/)
+
+### Other uses of Interruption pages
+
+We’ve seen that many services in government use Interruption pages to show other types of important information that might otherwise get missed.
+
+See our [‘Interruption card’ discussion on GitHub](https://github.com/alphagov/govuk-design-system-backlog/issues/27) to see these examples.
+
+### Next steps
+
 We’d like to get more feedback from service teams to help us improve this pattern.
 
-We'd particularly like to better understand the ways services use Interruption pages, so that we can provide better guidance to ensure they're used effectively and consistently across government.
+We'd particularly like to better understand the ways services use Interruption pages, so that we can provide better guidance on ‘When to use this pattern’ and ‘When not to use this pattern’ to ensure they're used effectively and consistently across government.