-
Notifications
You must be signed in to change notification settings - Fork 21
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Added more flexibility for related content and combined related links (…
…#1314) * Added more flexibility for related content. Added some documentation and guidance * Added default examples for related content * Removed related links component * Updated markup to use aside instead of a div container * Removed role attribute in favour of aria-label to provide understanding in purpose. Updated macro option as a required entry
- Loading branch information
1 parent
ef32207
commit 358ceb8
Showing
13 changed files
with
167 additions
and
122 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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<Row>` | 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<ListItem>` [_(ref)_](/styles/typography/#lists) | true | A list of links for the row | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 %} | ||
|
|
||
| <div class="related-content{{ classes }}"> | ||
|
|
||
| <h2 class="related-content__title u-fs-r--b u-mb-xs">{{ params.title }}</h2> | ||
| <aside class="related-content{{ classes }}" aria-label="{{ params.ariaLabel }}"> | ||
|
|
||
| <div class="related-content__body"> | ||
| {{ (params.body if params else "") | safe }}{{ caller() if caller }} | ||
|
|
||
| {% if params.rows is defined and params.rows %} | ||
|
|
||
| {% for row in params.rows %} | ||
| <div class="related-content__section"> | ||
| {% if row.title %} | ||
| <h2 class="related-content__title u-fs-r--b u-mb-xs" id="{{ row.id }}">{{ row.title }}</h2> | ||
| {% endif %} | ||
| <nav class="related-content__navigation" aria-labelledby="{{ row.id }}"> | ||
| {{ | ||
| onsList({ | ||
| "classes": 'list--bare', | ||
| "itemsList": row.itemsList | ||
| }) | ||
| }} | ||
| </nav> | ||
| </div> | ||
| {% endfor %} | ||
|
|
||
| {% else %} | ||
|
|
||
| <h2 class="related-content__title u-fs-r--b u-mb-xs">{{ params.title }}</h2> | ||
|
|
||
| <div class="related-content__body"> | ||
| {{ (params.body if params else "") | safe }}{{ caller() if caller }} | ||
| </div> | ||
|
|
||
| {% endif %} | ||
|
|
||
| </div> | ||
|
|
||
| </div> | ||
| </aside> | ||
|
|
||
| {% endmacro %} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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; | ||
| } | ||
| } | ||
| } |
4 changes: 2 additions & 2 deletions
4
...xamples/related-content-branded/index.njk → ...examples/related-content-census/index.njk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
57 changes: 57 additions & 0 deletions
57
src/components/related-content/examples/related-links-multiple-rows/index.njk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
|
|
||
| }) | ||
| }} |
28 changes: 28 additions & 0 deletions
28
src/components/related-content/examples/related-links-single-row/index.njk
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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' | ||
| } | ||
| ] | ||
| } | ||
| ] | ||
|
|
||
| }) | ||
| }} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.
24 changes: 0 additions & 24 deletions
24
src/components/related-links/examples/related-links-census/index.njk
This file was deleted.
Oops, something went wrong.
21 changes: 0 additions & 21 deletions
21
src/components/related-links/examples/related-links/index.njk
This file was deleted.
Oops, something went wrong.
This file was deleted.
Oops, something went wrong.