Skip to content

Commit

Permalink
Update parameter names in document list component (#3299)
Browse files Browse the repository at this point in the history
* add initial changes

* update
  • Loading branch information
precious-onyenaucheya-ons authored Sep 5, 2024
1 parent ba475a7 commit 195bd75
Show file tree
Hide file tree
Showing 13 changed files with 226 additions and 142 deletions.
22 changes: 14 additions & 8 deletions src/components/document-list/_macro-options.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,8 +12,7 @@
| ----------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| classes | string | false | Custom classes to add to each document list item |
| attributes | object | false | HTML attributes (for example, data attributes) to add to each document list item |
| title | string | true | The title for the document |
| url | string | true | The URL for the document link (either a file or web page) |
| title | `Object<Title>` | true | An object containing text and url of the [title](#title) |
| description | string | false | A short HTML extract of text (for example, a short sentence to give some context of the document) |
| thumbnail | `Object<Thumbnail>` | false | An object containing path and filename attributes for the [thumbnail image](#thumbnail). Renders a placeholder instead if set to `true` |
| metadata | `Object<Metadata>` | false | An object for a [list of information about document](#metadata), for example, date, type and size |
Expand All @@ -30,13 +29,13 @@

### Metadata

| Name | Type | Required | Description |
| ---- | -------------- | -------- | ------------------------------------------------------------------------------------------------------------- |
| type | `<Object>Type` | false | An object for a list item describing the [type of document](#type), for example, “Dataset” or “Press release” |
| date | `<Object>Date` | false | An object for the [date](#date) the document was published or updated |
| file | `<Object>File` | false | An object to describe the [details of the downloadable file](#file) such as format and size |
| Name | Type | Required | Description |
| ------ | ---------------- | -------- | --------------------------------------------------------------------------------------------------------------- |
| object | `Object<Object>` | false | An object for a list item describing the [type of document](#object), for example, “Dataset” or “Press release” |
| date | `Object<Date>` | false | An object for the [date](#date) the document was published or updated |
| file | `Object<File>` | false | An object to describe the [details of the downloadable file](#file) such as format and size |

#### Type
#### Object

| Name | Type | Required | Description |
| ---- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
Expand All @@ -60,3 +59,10 @@
| fileType | string | true | Format of the file, for example, PDF, DOC, XLS |
| fileSize | string | true | Size of the file in megabytes or kilobytes, for example, “850KB” |
| filePages | string | false | Number of pages in the file, for example, “16 pages” |

#### Title

| Name | Type | Required | Description |
| ---- | ------ | -------- | --------------------------------------------------------- |
| text | string | true | The title for the document |
| url | string | true | The URL for the document link (either a file or web page) |
26 changes: 13 additions & 13 deletions src/components/document-list/_macro.njk
Original file line number Diff line number Diff line change
Expand Up @@ -15,7 +15,7 @@
>
<a
class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
href="{{ document.url }}"
href="{{ document.title.url }}"
tabindex="-1"
>
{% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
Expand All @@ -35,8 +35,8 @@
class="ons-document-list__item-header{{ ' ons-document-list__item-header--reverse' if document.showMetadataFirst == true }}"
>
{{ openingTag | safe }} class="ons-document-list__item-title ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
<a href="{{ document.url }}"
>{{ document.title }}
<a href="{{ document.title.url }}"
>{{ document.title.text }}
{%- if document.metadata and document.metadata.file -%}
<span class="ons-u-vh">
{%
Expand All @@ -63,23 +63,23 @@
</li>
{% endif %}

{%- if document.metadata.type and document.metadata.type.text -%}
{%- if document.metadata.object and document.metadata.object.text -%}
<li class="ons-document-list__item-attribute{{ ' ons-u-mr-no' if document.metadata.file }}">
{% set metadataType %}
{% set metadataObject %}
<span
{% if not document.metadata.file and not document.metadata.type.url %}class="ons-u-fw-b"{% endif %}
>{{ document.metadata.type.text }}{%- if document.metadata.type.ref -%}:{% elif document.metadata.file %},{% endif %}</span
{% if not document.metadata.file and not document.metadata.object.url %}class="ons-u-fw-b"{% endif %}
>{{ document.metadata.object.text }}{%- if document.metadata.object.ref -%}:{% elif document.metadata.file %},{% endif %}</span
>
{% endset %}
{%- if document.metadata.type.url -%}
<a class="ons-document-list__attribute-link" href="{{ document.metadata.type.url }}">
{{ metadataType | safe }}
{%- if document.metadata.object.url -%}
<a class="ons-document-list__attribute-link" href="{{ document.metadata.object.url }}">
{{ metadataObject | safe }}
</a>
{% else %}
{{ metadataType | safe }}
{{ metadataObject | safe }}
{% endif %}
{%- if document.metadata.type.ref -%}
<span>{{ document.metadata.type.ref }}</span>
{%- if document.metadata.object.ref -%}
<span>{{ document.metadata.object.ref }}</span>
{% endif %}
</li>
{% endif %}
Expand Down
22 changes: 12 additions & 10 deletions src/components/document-list/_macro.spec.js
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,10 @@ import axe from '../../tests/helpers/axe';
import { renderComponent } from '../../tests/helpers/rendering';

const EXAMPLE_DOCUMENT_LIST_BASIC = {
url: '#0',
title: 'Crime and justice',
title: {
text: 'Crime and justice',
url: '#0',
},
description: 'Some description',
};

Expand All @@ -30,10 +32,10 @@ const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_FILE = {
},
};

const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE = {
const EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT = {
...EXAMPLE_DOCUMENT_LIST_BASIC,
metadata: {
type: {
object: {
text: 'Poster',
url: '#0',
ref: 'some ref',
Expand All @@ -49,7 +51,7 @@ const EXAMPLE_DOCUMENT_LIST_WITH_MULTIPLE = {
largeSrc: '/example-large.png',
},
metadata: {
type: {
object: {
text: 'Poster',
url: '#0',
ref: 'some ref',
Expand Down Expand Up @@ -256,11 +258,11 @@ describe('macro: document list', () => {
});
});

describe('mode: with metadata `type` configuration', () => {
describe('mode: with metadata `object` configuration', () => {
it('passes jest-axe checks', async () => {
const $ = cheerio.load(
renderComponent('document-list', {
documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE],
documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT],
}),
);

Expand All @@ -271,7 +273,7 @@ describe('macro: document list', () => {
it('has the provided `url`', () => {
const $ = cheerio.load(
renderComponent('document-list', {
documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE],
documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT],
}),
);

Expand All @@ -280,13 +282,13 @@ describe('macro: document list', () => {
});

it('has expected `text`', () => {
const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] }));
const text = $('.ons-document-list__attribute-link > span').text().trim();
expect(text).toBe('Poster:');
});

it('has expected `ref`', () => {
const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_TYPE] }));
const $ = cheerio.load(renderComponent('document-list', { documents: [EXAMPLE_DOCUMENT_LIST_WITH_METADATA_OBJECT] }));
const text = $('.ons-document-list__attribute-link + span').text().trim();
expect(text).toBe('some ref');
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -14,10 +14,12 @@
"smallSrc": '/img/small/census-monuments-lights-featured.jpg',
"largeSrc": '/img/large/census-monuments-lights-featured.jpg'
},
"url": '#0',
"title": 'Landmarks are lighting up purple to mark Census Day',
"title": {
"text": 'Landmarks are lighting up purple to mark Census Day',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Press releases',
"url": '#0'
},
Expand Down
24 changes: 15 additions & 9 deletions src/components/document-list/example-document-list-articles.njk
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,12 @@
"smallSrc": '/img/small/census-monuments-lights.jpg',
"largeSrc": '/img/large/census-monuments-lights.jpg'
},
"url": '#0',
"title": 'Landmarks are lighting up purple to mark Census Day',
"title": {
"text": 'Landmarks are lighting up purple to mark Census Day',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Press releases',
"url": '#0'
},
Expand All @@ -27,10 +29,12 @@
"smallSrc": '/img/small/ons-award-winners.jpg',
"largeSrc": '/img/large/ons-award-winners.jpg'
},
"url": '#0',
"title": 'Office for National Statistics win top Royal Statistical Society award',
"title": {
"text": 'Office for National Statistics win top Royal Statistical Society award',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Press releases',
"url": '#0'
},
Expand All @@ -43,10 +47,12 @@
},
{
"thumbnail": true,
"url": '#0',
"title": 'Five Office for National Statistics names in New Year’s Honours',
"title": {
"text": 'Five Office for National Statistics names in New Year’s Honours',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Press releases',
"url": '#0'
},
Expand Down
24 changes: 15 additions & 9 deletions src/components/document-list/example-document-list-downloads.njk
Original file line number Diff line number Diff line change
Expand Up @@ -4,10 +4,12 @@
"documents": [
{
"thumbnail": true,
"url": '#',
"title": 'Including everyone in Census 2021',
"title": {
"text": 'Including everyone in Census 2021',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Poster'
},
"file": {
Expand All @@ -20,10 +22,12 @@
},
{
"thumbnail": true,
"url": '#',
"title": 'Community handbook for Census 2021',
"title": {
"text": 'Community handbook for Census 2021',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Booklet'
},
"file": {
Expand All @@ -36,10 +40,12 @@
},
{
"thumbnail": true,
"url": '#',
"title": 'Census 2021 matters to everyone',
"title": {
"text": 'Census 2021 matters to everyone',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Poster'
},
"file": {
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,10 +6,12 @@
{
"featured": true,
"showMetadataFirst": true,
"url": '#0',
"title": 'Crime and justice',
"title": {
"text": 'Crime and justice',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Topic'
}
},
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,21 +6,25 @@
{
"featured": true,
"showMetadataFirst": true,
"url": '#0',
"title": 'Crime and justice',
"title": {
"text": 'Crime and justice',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Topic'
}
},
"description": '<p>Figures on <mark>crime</mark> levels and trends for England and Wales based primarily on two sets of statistics: the <mark>Crime</mark> Survey for England and Wales (CSEW) and police recorded <mark>crime</mark> data.</p>
<p>View all <a href="#0">datasets</a> or <a href="#0">publications</a> related to <a href="#0">Crime and justice</a></p>'
},
{
"url": '#0',
"title": 'Disability and crime',
"title": {
"text": 'Disability and crime',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Dataset'
},
"date": {
Expand All @@ -33,10 +37,12 @@
"description": '<p>Domestic abuse and sexual assault outcomes for disabled people in England and Wales aged 16 to 59 years, with analysis by age, sex, impairment type, impairment severity, country and region using the <mark>Crime</mark> Survey for England and Wales (CSEW) data.</p>'
},
{
"url": '#0',
"title": 'Disability and crime, UK: 2019 (Latest release)',
"title": {
"text": 'Disability and crime, UK: 2019 (Latest release)',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'Statistical bulletin'
},
"date": {
Expand All @@ -49,10 +55,12 @@
"description": '<p>An overview of published data on disability and <mark>crime</mark> in the UK and analysis of the experience of domestic abuse and sexual assault for disabled adults aged 16 to 59 years in England and Wales. Analysis by age, sex and impairment type.</p>'
},
{
"url": '#0',
"title": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016',
"title": {
"text": 'Hate crime by disability status, Crime Survey for England and Wales (CSEW) combined years 2013 and 2014 to 2015 and 2016',
"url": '#0'
},
"metadata": {
"type": {
"object": {
"text": 'User requested data',
"ref": 'Ref 008052'
},
Expand Down
Loading

0 comments on commit 195bd75

Please sign in to comment.