docs(ticket-panel): add ticket panel to Pattern Library site (#368)

Adds the ticket panel component to the Pattern Library site for users to find the component easily.

docs/_includes/layouts/component.njk

@@ -105,6 +105,10 @@
               text: 'Messages',
               href: ('/components/messages' | url)
             },
+            {
+              text: 'Ticket panel',
+              href: ('/components/ticket-panel' | url)
+            },
             {
               text: 'Timeline',
               href: ('/components/timeline' | url)

docs/components/ticket-panel.md

@@ -0,0 +1,47 @@
+---
+layout: layouts/component.njk
+title: Ticket Panel
+---
+
+{% lastUpdated "ticket-panel" %}
+
+{% example "/examples/ticket-panel", 300 %}
+
+## When to use
+
+TBC
+
+## When not to use
+
+TBC
+
+## How to use
+
+This component accepts the following arguments.
+
+### Container
+
+|Name|Type|Required|Description|
+|---|---|---|---|
+|classes|string|No|Classes to add to the ticket panel's container.|
+|attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.|
+
+### Items
+
+|Name|Type|Required|Description|
+|---|---|---|---|
+|text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.|
+|html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.|
+|classes|string|No|Classes to add to the ticket panel's container.|
+|attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.|
+
+### Classes
+
+|Name|
+|---|
+|moj-ticket-panel__content--blue|
+|moj-ticket-panel__content--red|
+|moj-ticket-panel__content--yellow|
+|moj-ticket-panel__content--green|
+|moj-ticket-panel__content--purple|
+|moj-ticket-panel__content--orange|

docs/examples/ticket-panel/index.njk

@@ -0,0 +1,24 @@
+---
+layout: layouts/example.njk
+title: Ticket panel (example)
+arguments: ticket-panel
+---
+
+{%- from "moj/components/ticket-panel/macro.njk" import mojTicketPanel -%}
+
+{{ mojTicketPanel({
+  attributes: {
+    'aria-label': 'Sub navigation 1'
+  },
+  items: [{
+    html: ' <h2 class="govuk-heading-m govuk-!-margin-bottom-2">This is a heading 2</h2>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
+    <a class="govuk-button govuk-!-margin-bottom-1" data-module="govuk-button">
+      Save and continue
+    </a>',
+    attributes: {
+      'aria-label': 'Section 1'
+    },
+    classes: 'moj-ticket-panel__content--blue'
+  }]
+}) }}

src/moj/components/ticket-panel/README.md

@@ -32,14 +32,25 @@ This component accepts the following arguments.
 
 |Name|Type|Required|Description|
 |---|---|---|---|
-|classes|string|No|Classes to add to the timeline's container.|
-|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container.|
+|classes|string|No|Classes to add to the ticket panel's container.|
+|attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.|
 
 ### Items
 
 |Name|Type|Required|Description|
 |---|---|---|---|
 |text|string|Yes|If `html` is set, this is not required. Text to use within the item. If `html` is provided, the `text` argument will be ignored.|
 |html|string|Yes|If `text` is set, this is not required. HTML to use within the item. If `html` is provided, the `text` argument will be ignored.|
-|classes|string|No|Classes to add to the timeline's container.|
-|attributes|object|No|HTML attributes (for example data attributes) to add to the timeline's container.|
+|classes|string|No|Classes to add to the ticket panel's container.|
+|attributes|object|No|HTML attributes (for example data attributes) to add to the ticket panel's container.|
+
+### Classes
+
+|Name|
+|---|
+|moj-ticket-panel__content--blue|
+|moj-ticket-panel__content--red|
+|moj-ticket-panel__content--yellow|
+|moj-ticket-panel__content--green|
+|moj-ticket-panel__content--purple|
+|moj-ticket-panel__content--orange|