feat: Inset text documentation

src/wmnds/components/inset-text/_example.njk

@@ -0,0 +1,13 @@
+{% raw %}
+{% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}
+
+{{
+    wmndsInsetText({
+        id: null,
+        contentText: "Inset text",
+        contentHTML: "<strong>Example of inset text HTML</strong>",
+        classes: null,
+        label: "Inset text example"
+    })
+}}
+{% endraw %}

src/wmnds/components/inset-text/_inset-text.njk

@@ -1,11 +1,15 @@
 {% macro wmndsInsetText(params) %}
 
 {# Set #}
-{% set html = params.html if params.html else "Type something" %} {# set content #}
-{% set label = params.label if params.label else "" %} {# set content #}
+{% set id = params.id if params.id else "inset_text" %} {# set content #}
+{% set contentText = params.contentText if params.contentText else "Type something" %} {# set content #}
+{% set contentHTML = params.contentHTML if params.contentHTML else null %} {# set content #}
+{% set label = params.label if params.label else "Inset text" %} {# set content #}
+{% set classes = " " + params.classes if params.classes else "" %} {# set content #}
+{% set _content = contentHTML | safe if contentHTML else contentText %} {# change content based on what user has input #}
 
-<div class="wmnds-inset-text" {% if params.label %} aria-label="{{ label }}" {% endif %}>
-    {{html | safe }}
+<div {% if params.id %}id="{{ id }}"{% endif %} class="wmnds-inset-text{{classes}}" {% if params.label %}aria-label="{{ label }}"{% endif %}>
+    {{ _content }}
 </div>
 
 {% endmacro %}

src/wmnds/components/inset-text/_properties.njk.json

@@ -0,0 +1,29 @@
+{
+  "wmndsInsetTextProps": [
+    {
+      "name": "contentText",
+      "type": "string",
+      "description": "<strong>Required.</strong> Specifies the content that will be part of the inset text. If <code class='wmnds-website-inline-code'>contentHTML</code> is supplied, this is ignored."
+    },
+    {
+      "name": "contentHTML",
+      "type": "string",
+      "description": "<strong>Required.</strong> The HTML content to use within the component."
+    },
+    {
+      "name": "id",
+      "type": "string",
+      "description": "Id attribute to add to the inset text container."
+    },
+    {
+      "name": "classes",
+      "type": "string",
+      "description": "Classes to add to the inset text container."
+    },
+    {
+      "name": "label",
+      "type": "string",
+      "description": "<strong>Required.</strong> The label to be attached to the component for accessibility purposes."
+    }
+  ]
+}

src/wmnds/patterns/contact-details/_contact-details.njk

@@ -13,7 +13,7 @@
         wmndsWarningText({
             contentText: warningText,
             icon: warningIcon,
-            classese: "wmnds-p-b-sm"
+            classes: "wmnds-p-b-sm"
         })
     }}
     {{content | safe}}

src/www/pages/components/inset-text/index.njk.md

@@ -0,0 +1,90 @@
+{% extends "www/_layouts/layout-left-pane.njk" %}
+{% set pageTitle = "Inset Text" %}
+{% from "www/_partials/component-example/component-example.njk" import compExample %}
+{% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}
+
+{% block content %}
+
+{% markdown %}
+{# About #}
+
+## Inset Text
+
+### What does it do?
+
+- Allows users to identify important content on the page as they scan the page.
+
+### When to use it?
+
+- When you have content that needs to standout from what's around it, such as a quote, example or additional information.
+
+### When not to use it?
+
+- In close proximity to visually prominent elements. Users don't notice it.
+- To highlight important information that is key to the transaction/service or time critical. Use <a href="/components/warning-text" target="_self">Warning Text</a> instead.
+
+### How to use it?
+
+- Use inset text sparingly. They're less effective if overused.
+- Users with visual disabilities may not be able to see the colour that helps it stand out. Instead, they may rely on a hidden label to recognise it. Hide <span>Information:</span> inside the Inset Text <code class="wmnds-website-inline-code"> div </code> so that users with screen readers understand this information is different to body text.
+
+{% endmarkdown %}
+
+{{
+    compExample([
+        wmndsInsetText({
+            contentHTML: "<strong>Example of inset text</strong>"
+        })
+    ], {
+      componentPath: "wmnds/components/inset-text/",
+      njk: true,
+      njkProps: wmndsInsetTextProps,
+      js: false,
+      iframe: false
+    })
+  }}
+{# End inset text #}
+
+{% markdown %}
+
+{# Question #}
+
+## Example Callout
+
+<h3>What does it do?</h3>
+
+- Highlight a contextual example to provide help users understand the broader page content.
+
+<h3>When to use it?</h3>
+
+- When a contextual example might help the user understand the information.
+
+<h3>When not to use it?</h3>
+
+- When the information is simple enough for our user's to understand. Don't give an example for the sake of it.
+
+<h3>How to use it?</h3>
+
+- Use a concise heading that a user can easily scan and understand.
+- Make sure the heading is relevant to both the content it's supporting and the context it is providing in the main body text.
+- Add an <code class="wmnds-website-inline-code">aria-label</code> to the parent Example Callout <code class="wmnds-website-inline-code"> div </code> so that users with screen readers understand that the information is important.
+
+{% endmarkdown %}
+
+{{
+    compExample([
+        wmndsInsetText({
+            contentHTML:  "Example Callout title<br>Example callout description.",
+            label: "Example Callout"
+        })
+    ], {
+      componentPath: "wmnds/components/inset-text/",
+      njk: true,
+      njkProps: wmndsInsetTextProps,
+      js: false,
+      iframe: false
+    })
+  }}
+{# End inset text #}
+
+{% endblock %}

src/www/pages/patterns/contact-details/index.njk

@@ -53,8 +53,7 @@
         compExample([
             wmndsInsetText(
                 {
-                    thinner : true,
-                    html: "Customer Services<br>Transport for West Midlands<br>16 Summer Lane<br>Birmingham<br>B19 3SD"
+                    contentHTML: "Customer Services<br>Transport for West Midlands<br>16 Summer Lane<br>Birmingham<br>B19 3SD"
                 }
             )
         ])
@@ -65,15 +64,15 @@
 
     {{
         compExample([
-            wmndsInsetText({html:
+            wmndsInsetText({
+                contentHTML:
                 wmndsContactDetails({
                     warningText: "We are currently experiencing problems with our <br>telephone systems and cannot answer calls",
                     warningIcon: "general-warning-triangle",
-                    content: "
-    <a href=\"mailto:[email protected]\">[email protected]</a><br>
-    Telephone: <a href=\"tel:03453036760\">0345 303 6760</a><br>
-    Monday to Tuesday and Thursday to Friday, 9am - 5pm, <br>
-    Wednesday, 9.30am - 5pm"
+                    content: "<a href=\"mailto:[email protected]\">[email protected]</a><br>
+                    Telephone: <a href=\"tel:03453036760\">0345 303 6760</a><br>
+                    Monday to Tuesday and Thursday to Friday, 9am - 5pm, <br>
+                    Wednesday, 9.30am - 5pm"
                 }) | indent(6) | trim
             })
         ])
@@ -86,19 +85,19 @@
     {{
         compExample([
             wmndsInsetText({
-                html: "
-    <p>Transport for West Midlands</p>
-    <p>
-        <a href=\"https://twitter.com/wmnetwork\">Twitter</a><br>
-        <a href=\"https://www.facebook.com/westmidlandsnetwork\">Facebook</a><br>
-    </p>
-    <p>
-        <a href=\"https://www.wmnetwork.co.uk/get-in-touch/contact-us/\">Submit an enquiry</a><br>
-        Telephone: <a href=\"tel:03453036760\">0345 303 6760<br></a>
-    </p>
-    Monday to Tuesday and Thursday to Friday, 9am - 5pm, <br>
-    Wednesday, 9.30am - 5pm<br>
-    Saturday and Sunday, closed
+                contentHTML: "
+                <p>Transport for West Midlands</p>
+                <p>
+                    <a href=\"https://twitter.com/wmnetwork\">Twitter</a><br>
+                    <a href=\"https://www.facebook.com/westmidlandsnetwork\">Facebook</a><br>
+                </p>
+                <p>
+                    <a href=\"https://www.wmnetwork.co.uk/get-in-touch/contact-us/\">Submit an enquiry</a><br>
+                    Telephone: <a href=\"tel:03453036760\">0345 303 6760<br></a>
+                </p>
+                Monday to Tuesday and Thursday to Friday, 9am - 5pm, <br>
+                Wednesday, 9.30am - 5pm<br>
+                Saturday and Sunday, closed
                 "
             })
         ])

src/www/pages/styles/a-to-z-content-style-guide/index.njk

@@ -3,7 +3,6 @@
 {# Imports #}
 {%- from "wmnds/components/content-tiles/normal/_normal.njk" import wmndsContentTilesNormal -%}
 {% from "wmnds/components/link/link/_link.njk" import wmndsLink %}
-{% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}
 {% from "wmnds/components/icon/_icon.njk" import wmndsIcon %}
 {# Set array of tiles #}
 {% block content %}