- {{html | safe }}
+
+ {{ _content }}
{% endmacro %}
\ No newline at end of file
diff --git a/src/wmnds/components/inset-text/_properties.njk.json b/src/wmnds/components/inset-text/_properties.njk.json
new file mode 100644
index 000000000..ffe3b9c8c
--- /dev/null
+++ b/src/wmnds/components/inset-text/_properties.njk.json
@@ -0,0 +1,29 @@
+{
+ "wmndsInsetTextProps": [
+ {
+ "name": "contentText",
+ "type": "string",
+ "description": "
Required. Specifies the content that will be part of the inset text. If
contentHTML is supplied, this is ignored."
+ },
+ {
+ "name": "contentHTML",
+ "type": "string",
+ "description": "
Required. 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": "
Required. The label to be attached to the component for accessibility purposes."
+ }
+ ]
+}
diff --git a/src/wmnds/patterns/contact-details/_contact-details.njk b/src/wmnds/patterns/contact-details/_contact-details.njk
index 28564ad34..3a17a1b26 100644
--- a/src/wmnds/patterns/contact-details/_contact-details.njk
+++ b/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}}
diff --git a/src/www/pages/components/inset-text/index.njk b/src/www/pages/components/inset-text/index.njk
deleted file mode 100644
index e023a55ea..000000000
--- a/src/www/pages/components/inset-text/index.njk
+++ /dev/null
@@ -1,104 +0,0 @@
-{% extends "www/_layouts/layout-left-pane.njk" %}
-{% set pageTitle = "Inset Text" %}
-{% from "www/_partials/component-example/component-example.njk" import compExample %}
-
-
-{% block content %}
-{# 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 Warning Text 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 Information: inside the Inset Text
div so that users with screen readers understand this information is different to body text.
-
-
-
- {% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}
- {{
- compExample([
- wmndsInsetText({
- html: "Example of inset text"
- })
- ])
- }}
- {# End inset text #}
-
-
-
- {# Question #}
-
Example Callout
-
-
What does it do?
-
- -
- Highlight a contextual example to provide help users understand the broader page content.
-
-
-
-
When to use it?
-
- -
- When a contextual example might help the user understand the information.
-
-
-
-
When not to use it?
-
- -
- When the information is simple enough for our user's to understand. Don't give an example for the sake of it.
-
-
-
-
How to use it?
-
- -
- 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
aria-label to the parent Example Callout div so that users with screen readers understand that the information is important.
-
-
-
-
- {% from "wmnds/components/inset-text/_inset-text.njk" import wmndsInsetText %}
- {{
- compExample([
- wmndsInsetText({
- html: "Example Callout title
Example callout description.",
- label: "Example Callout"
- })
- ])
- }}
- {# End inset text #}
-
-{% endblock %}
diff --git a/src/www/pages/components/inset-text/index.njk.md b/src/www/pages/components/inset-text/index.njk.md
new file mode 100644
index 000000000..f3b0e6d67
--- /dev/null
+++ b/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
Warning Text 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
Information: inside the Inset Text
div so that users with screen readers understand this information is different to body text.
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmndsInsetText({
+ contentHTML: "
Example of inset text"
+ })
+ ], {
+ componentPath: "wmnds/components/inset-text/",
+ njk: true,
+ njkProps: wmndsInsetTextProps,
+ js: false,
+ iframe: false
+ })
+ }}
+{# End inset text #}
+
+{% markdown %}
+
+{# Question #}
+
+## Example Callout
+
+
What does it do?
+
+- Highlight a contextual example to provide help users understand the broader page content.
+
+
When to use it?
+
+- When a contextual example might help the user understand the information.
+
+
When not to use it?
+
+- When the information is simple enough for our user's to understand. Don't give an example for the sake of it.
+
+
How to use it?
+
+- 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
aria-label to the parent Example Callout
div so that users with screen readers understand that the information is important.
+
+{% endmarkdown %}
+
+{{
+ compExample([
+ wmndsInsetText({
+ contentHTML: "Example Callout title
Example callout description.",
+ label: "Example Callout"
+ })
+ ], {
+ componentPath: "wmnds/components/inset-text/",
+ njk: true,
+ njkProps: wmndsInsetTextProps,
+ js: false,
+ iframe: false
+ })
+ }}
+{# End inset text #}
+
+{% endblock %}
diff --git a/src/www/pages/patterns/contact-details/index.njk b/src/www/pages/patterns/contact-details/index.njk
index 45da96107..427c31900 100644
--- a/src/www/pages/patterns/contact-details/index.njk
+++ b/src/www/pages/patterns/contact-details/index.njk
@@ -53,8 +53,7 @@
compExample([
wmndsInsetText(
{
- thinner : true,
- html: "Customer Services
Transport for West Midlands
16 Summer Lane
Birmingham
B19 3SD"
+ contentHTML: "Customer Services
Transport for West Midlands
16 Summer Lane
Birmingham
B19 3SD"
}
)
])
@@ -65,15 +64,15 @@
{{
compExample([
- wmndsInsetText({html:
+ wmndsInsetText({
+ contentHTML:
wmndsContactDetails({
warningText: "We are currently experiencing problems with our
telephone systems and cannot answer calls",
warningIcon: "general-warning-triangle",
- content: "
-
customerservice@tfwm.org.uk
- Telephone:
0345 303 6760
- Monday to Tuesday and Thursday to Friday, 9am - 5pm,
- Wednesday, 9.30am - 5pm"
+ content: "
customerservice@tfwm.org.uk
+ Telephone:
0345 303 6760
+ Monday to Tuesday and Thursday to Friday, 9am - 5pm,
+ Wednesday, 9.30am - 5pm"
}) | indent(6) | trim
})
])
@@ -86,19 +85,19 @@
{{
compExample([
wmndsInsetText({
- html: "
-
Transport for West Midlands
-
- Twitter
- Facebook
-
-
- Submit an enquiry
- Telephone: 0345 303 6760
-
- Monday to Tuesday and Thursday to Friday, 9am - 5pm,
- Wednesday, 9.30am - 5pm
- Saturday and Sunday, closed
+ contentHTML: "
+
Transport for West Midlands
+
+ Twitter
+ Facebook
+
+
+ Submit an enquiry
+ Telephone: 0345 303 6760
+
+ Monday to Tuesday and Thursday to Friday, 9am - 5pm,
+ Wednesday, 9.30am - 5pm
+ Saturday and Sunday, closed
"
})
])
diff --git a/src/www/pages/styles/a-to-z-content-style-guide/index.njk b/src/www/pages/styles/a-to-z-content-style-guide/index.njk
index 40b15023f..6111f4cd9 100644
--- a/src/www/pages/styles/a-to-z-content-style-guide/index.njk
+++ b/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 %}