Copy text
Using ‘data-copy-element’
{{ aspExample({ code: "<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">
Reference Number
</dt>
<dd class=\"asp-summary-list__value\">
<span class=\"js-copy-text\">1234567890</span>
</dd>
<dd class=\"asp-summary-list__actions\">
<button class=\"asp-copy asp-js-copy-button\" data-copy-element=\".js-copy-text\" style=\"display:none\">
<span class=\"asp-js-copy-button__span\">Copy</span>
<span class=\"sr-only\">Reference Number</span>
</button>
</dd>
</dl>
</div>", nunjucks: "", json: "", title: "", example: "default", id: "6961308db2367" }) }}
Copy HTML
Using ‘data-copy-html’
{{ aspExample({ code: "<div class=\"asp-summary-list-container\">
<dl class=\"asp-summary-list\">
<dt class=\"asp-summary-list__key\">
HTML
</dt>
<dd class=\"asp-summary-list__value\">
<span class=\"js-copy-html\"><span>1234567890</span></span>
</dd>
<dd class=\"asp-summary-list__actions\">
<button class=\"asp-copy asp-js-copy-button\" data-copy-html=\".js-copy-html\" style=\"display:none\">
<span class=\"asp-js-copy-button__span\">Copy</span>
<span class=\"sr only\">HTML</span>
</button>
</dd>
</dl>
</div>", nunjucks: "", json: "", title: "", example: "default", id: "6961308db2367" }) }}
WIP
– When clicked, “Copy” turns into “Copied”:–
— until focus is lost from the button
— for 5 seconds
— aria-polite is read out to a screen reader as “Copied X”
– No JS fallback = button does not show.
Status of development
The below criteria all need to be met for a component to be considered as fully developed for use within the ASP Digital Design System.
{{ aspTable({
head: [
{ text: 'Development criteria'},
{ text: 'Status'}
],
rows: [
{
cells: [
{ text: 'WCAG 2.2 compliant'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'WCAG 2.1 compliant'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'HTML / Nunjucks version'},
{ html: '<span class="asp-status asp-status–green">Completed</span>'}
]
},
{
cells: [
{ text: 'Figma version'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'M365 versions'},
{ html: '<span class="asp-status">Not started</span>'}
]
},
{
cells: [
{ text: 'Documentation'},
{ html: '<span class="asp-status asp-status–yellow">In progress</span>'}
]
}
]
}) }}