diff --git a/src/components/related-content/_macro-options.md b/src/components/related-content/_macro-options.md new file mode 100644 index 0000000000..5cfaeb3b5a --- /dev/null +++ b/src/components/related-content/_macro-options.md @@ -0,0 +1,15 @@ +| Name | Type | Required | Description | +| --------- | ------------ | ------------------------------ | ----------------------------------------------------------------------------------------- | +| title | string | true (false if `Row` provided) | The title for the related content | +| body | string | true (false if `Row` provided) | The contents of the related content. This can be a string of HTML | +| ariaLabel | string | true | Descriptive landmark label to allow a screen reader user greater understanding of purpose | +| classes | string | false | Custom classes to add to the related content | +| rows | `Array` | false | An array of Row objects | + +## Row + +| Name | Type | Required | Description | +| --------- | ------------------------------------------------------ | -------- | --------------------------- | +| id | string | true | id of the itemsList | +| title | string | true | The title of the row | +| itemsList | `Array` [_(ref)_](/styles/typography/#lists) | true | A list of links for the row | diff --git a/src/components/related-content/_macro.njk b/src/components/related-content/_macro.njk index f612792aeb..b93144e3e4 100644 --- a/src/components/related-content/_macro.njk +++ b/src/components/related-content/_macro.njk @@ -1,17 +1,45 @@ {% macro onsRelatedContent(params) %} +{% from "components/lists/_macro.njk" import onsList %} + {% if params is defined and params and params.classes is defined and params.classes %} - {% set classes = ' ' + params.classes %} + {% set classes = ' ' + params.classes %} {% endif %} - + {% endmacro %} diff --git a/src/components/related-content/_related-content.scss b/src/components/related-content/_related-content.scss index fb9b27e6f6..90b6ba4887 100644 --- a/src/components/related-content/_related-content.scss +++ b/src/components/related-content/_related-content.scss @@ -1,5 +1,17 @@ .related-content { @extend .u-mt-m; border-top: 5px solid $color-branded; - padding: 1rem 0; + padding-top: 1rem; + + &__section { + & + & { + border-top: 1px solid $color-grey-2; + margin: 2rem 0 0; + padding: 2em 0 0; + } + + > :last-child { + margin-bottom: 0; + } + } } diff --git a/src/components/related-content/examples/related-content-branded/index.njk b/src/components/related-content/examples/related-content-census/index.njk similarity index 86% rename from src/components/related-content/examples/related-content-branded/index.njk rename to src/components/related-content/examples/related-content-census/index.njk index 7d41d06a71..593e68a025 100644 --- a/src/components/related-content/examples/related-content-branded/index.njk +++ b/src/components/related-content/examples/related-content-census/index.njk @@ -1,12 +1,12 @@ --- "theme": census --- - {% from "components/related-content/_macro.njk" import onsRelatedContent %} {% from "components/lists/_macro.njk" import onsList %} {% call onsRelatedContent({ - "title": 'Free language helpline' + "title": 'Free language helpline', + "ariaLabel": 'Contact details to support languages' }) %} diff --git a/src/components/related-content/examples/related-content/index.njk b/src/components/related-content/examples/related-content/index.njk index c489a1653e..30d698008c 100644 --- a/src/components/related-content/examples/related-content/index.njk +++ b/src/components/related-content/examples/related-content/index.njk @@ -2,7 +2,8 @@ {% from "components/lists/_macro.njk" import onsList %} {% call onsRelatedContent({ - "title": 'Free language helpline' + "title": 'Free language helpline', + "ariaLabel": 'Contact details to support languages' }) %} diff --git a/src/components/related-content/examples/related-links-multiple-rows/index.njk b/src/components/related-content/examples/related-links-multiple-rows/index.njk new file mode 100644 index 0000000000..fb1034db95 --- /dev/null +++ b/src/components/related-content/examples/related-links-multiple-rows/index.njk @@ -0,0 +1,57 @@ +--- +"theme": census +--- +{% from "components/related-content/_macro.njk" import onsRelatedContent %} + +{{ + onsRelatedContent({ + "ariaLabel": 'Related links to help with the census', + "rows": [ + { + "id": 'related-help-with-the-census', + "title": 'Help with the census', + "itemsList": [ + { + "text": 'I’m moving house', + "url": '#0' + }, + { + "text": 'What if I’m away or abroad on Census Day?', + "url": '#0' + }, + { + "text": 'Get an access code or paper census', + "url": '#0' + }, + { + "text": 'Find a census support centre', + "url": '#0' + }, + { + "text": 'Languages', + "url": '#0' + }, + { + "text": 'Accessibility', + "url": '#0' + } + ] + }, + { + "id": 'related-content', + "title": 'Related content', + "itemsList": [ + { + "text": 'How we will contact or visit you', + "url": '#0' + }, + { + "text": 'Media enquiries', + "url": '#0' + } + ] + } + ] + + }) +}} diff --git a/src/components/related-content/examples/related-links-single-row/index.njk b/src/components/related-content/examples/related-links-single-row/index.njk new file mode 100644 index 0000000000..ffad597c01 --- /dev/null +++ b/src/components/related-content/examples/related-links-single-row/index.njk @@ -0,0 +1,28 @@ +{% from "components/related-content/_macro.njk" import onsRelatedContent %} + +{{ + onsRelatedContent({ + "ariaLabel": 'Related links to help with the census', + "rows": [ + { + "id": 'related-content', + "title": 'Related content', + "itemsList": [ + { + "text": 'Find a census support centre', + "url": '#0' + }, + { + "text": 'Languages', + "url": '#0' + }, + { + "text": 'Contact us', + "url": '#0' + } + ] + } + ] + + }) +}} diff --git a/src/components/related-content/index.njk b/src/components/related-content/index.njk index 42bb9fdf28..d80fa5d30c 100644 --- a/src/components/related-content/index.njk +++ b/src/components/related-content/index.njk @@ -7,22 +7,31 @@ title: Related content Related content is used to provide additional information for the user. +## Related links +Can include single or multiple rows of related links. + +### Single row (default) {{ - onsPanel({ - "body": "This component requires documentation." - }) + patternlibExample({"path": "components/related-content/examples/related-links-single-row/index.njk"}) +}} + +### Multiple rows (census) + +{{ + patternlibExample({"path": "components/related-content/examples/related-links-multiple-rows/index.njk"}) }} -## Related content +## Related content (census) Contact details to support languages. + +### Language helpline (default) {{ patternlibExample({"path": "components/related-content/examples/related-content/index.njk"}) }} -## Related content with Census branding -Contact details to support languages. +### Language helpline (census) {{ - patternlibExample({"path": "components/related-content/examples/related-content-branded/index.njk"}) + patternlibExample({"path": "components/related-content/examples/related-content-census/index.njk"}) }} ## Research on this component diff --git a/src/components/related-links/_macro.njk b/src/components/related-links/_macro.njk deleted file mode 100644 index 95abf3a033..0000000000 --- a/src/components/related-links/_macro.njk +++ /dev/null @@ -1,14 +0,0 @@ -{% macro onsRelatedLinks(params) %} - {% from "components/lists/_macro.njk" import onsList %} - -{% endmacro %} diff --git a/src/components/related-links/_related-links.scss b/src/components/related-links/_related-links.scss deleted file mode 100644 index 01008798f5..0000000000 --- a/src/components/related-links/_related-links.scss +++ /dev/null @@ -1,5 +0,0 @@ -.related-links { - @extend .u-mt-m; - padding: 1rem 0; - border-top: 5px solid $color-branded; -} diff --git a/src/components/related-links/examples/related-links-census/index.njk b/src/components/related-links/examples/related-links-census/index.njk deleted file mode 100644 index 51c7935fb1..0000000000 --- a/src/components/related-links/examples/related-links-census/index.njk +++ /dev/null @@ -1,24 +0,0 @@ ---- -"theme": census ---- -{% from "components/related-links/_macro.njk" import onsRelatedLinks %} -{{- - onsRelatedLinks({ - "id": 'related-links', - "title": 'Related content', - "itemsList": [ - { - "url": '#', - "text": 'About this service' - }, - { - "url": '#', - "text": 'Help and support' - }, - { - "url": '#', - "text": 'Contact us' - } - ] - }) -}} diff --git a/src/components/related-links/examples/related-links/index.njk b/src/components/related-links/examples/related-links/index.njk deleted file mode 100644 index a66849ae83..0000000000 --- a/src/components/related-links/examples/related-links/index.njk +++ /dev/null @@ -1,21 +0,0 @@ -{% from "components/related-links/_macro.njk" import onsRelatedLinks %} -{{- - onsRelatedLinks({ - "id": 'related-links', - "title": 'Related content', - "itemsList": [ - { - "url": '#', - "text": 'About this service' - }, - { - "url": '#', - "text": 'Help and support' - }, - { - "url": '#', - "text": 'Contact us' - } - ] - }) -}} diff --git a/src/components/related-links/index.njk b/src/components/related-links/index.njk deleted file mode 100644 index f0bcb6b6ed..0000000000 --- a/src/components/related-links/index.njk +++ /dev/null @@ -1,41 +0,0 @@ ---- -title: Related links ---- -{% from "views/partials/example/_macro.njk" import patternlibExample %} -{% from "components/external-link/_macro.njk" import onsExternalLink %} -{% from "components/panel/_macro.njk" import onsPanel %} - -{{ - onsPanel({ - "body": "This component requires documentation." - }) -}} - -## Related links - default -{{ - patternlibExample({"path": "components/related-links/examples/related-links/index.njk"}) -}} - -## Related links - census -{{ - patternlibExample({"path": "components/related-links/examples/related-links-census/index.njk"}) -}} - -## Research on this component -{% call onsPanel() %} - If you have conducted any user research using this component, please feed back your findings via the - {{ - onsExternalLink({ - "url": "https://github.com/ONSdigital/design-system/discussions/718", - "linkText": "Design System forum" - }) - }} -{% endcall %} - -## Design System forum -{{ - onsExternalLink({ - "url": "https://github.com/ONSdigital/design-system/discussions/718", - "linkText": "Discuss 'Related links' on GitHub" - }) -}}