Skip to content

Commit

Permalink
improved logic for document list component (#2721)
Browse files Browse the repository at this point in the history 
* improved featured logic

* remove unecessary condition

* update documentation
  • Loading branch information
@precious-onyenaucheya-ons
precious-onyenaucheya-ons authored Jul 19, 2023
1 parent 9d249d2 commit e67d7e5
Show file tree
Hide file tree
Showing 3 changed files with 19 additions and 21 deletions.
24 changes: 12 additions & 12 deletions src/components/document-list/_macro-options.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -8,18 +8,18 @@

## Document

| Name | Type | Required | Description |
| ----------- | ------------------- | -------- | --------------------------------------------------------------------------------------------------------------------------------------- |
| 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) |
| 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 |
| featured | boolean | false | Will render a featured variant of the document if set to `true` |
| fullWidth | boolean | false | If set to `true`, wraps the `featured` document in a `div` with class `ons-container` for a “full-bleed” layout |
| wide | boolean | false | Set to `true` to increase the maximum width of the layout container to 1280px. |
| Name | Type | Required | Description |
| ----------- | ------------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| 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) |
| 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 |
| featured | boolean | false | Will render a featured variant of the document if set to `true` |
| fullWidth | boolean | false | If set to `true`, wraps the `featured` document in a `div` with class `ons-container` for a “full-bleed” layout. Can only be set when featured is set to true. |
| wide | boolean | false | Set to `true` to increase the maximum width of the layout container to 1280px. |

### Thumbnail

Expand Down
12 changes: 5 additions & 7 deletions src/components/document-list/_macro.njk
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,9 +2,9 @@
<ul{% if params.id %} id="{{ params.id }}"{% endif %} class="ons-document-list{{ ' ' + params.classes if params.classes else '' }}"{% if params.attributes %}{% for attribute, value in (params.attributes.items() if params.attributes is mapping and params.attributes.items else params.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
{% for document in params.documents %}

<li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>
<li class="ons-document-list__item{{ ' ons-document-list__item--featured' if document.featured }}{{ ' ons-document-list__item--full-width' if document.featured and document.fullWidth == true }}{{ ' ' + document.classes if document.classes else '' }}"{% if document.attributes %}{% for attribute, value in (document.attributes.items() if document.attributes is mapping and document.attributes.items else document.attributes) %} {{attribute}}="{{value}}"{% endfor %}{% endif %}>

{% if document.fullWidth == true %}
{% if document.featured and document.fullWidth == true %}

<div class="ons-container{{ ' ons-container--wide' if document.wide == true }}">

Expand Down Expand Up @@ -50,10 +50,8 @@

{%- if document.metadata.date %}
<li class="ons-document-list__item-attribute">
{% if document.metadata.date -%}
{% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
<span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
{%- endif -%}
{% set prefixClasses = "ons-u-fw-b" if document.metadata.date.showPrefix == true else "ons-u-vh" %}
<span class="{{ prefixClasses }}">{{ document.metadata.date.prefix | default("Published") }}: </span>
{% if document.metadata.date.iso -%}
<time datetime="{{ document.metadata.date.iso }}">{{ document.metadata.date.short }}</time>
{%- endif %}
Expand Down Expand Up @@ -99,7 +97,7 @@

</div>

{% if document.fullWidth == true %}
{% if document.featured and document.fullWidth == true %}

</div>

Expand Down
4 changes: 2 additions & 2 deletions src/components/document-list/_macro.spec.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -117,7 +117,7 @@ describe('macro: document list', () => {
it('has the correct container if `fullWidth`', () => {
const $ = cheerio.load(
renderComponent('document-list', {
documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true }],
documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true }],
}),
);

Expand All @@ -127,7 +127,7 @@ describe('macro: document list', () => {
it('has the correct container class if `fullWidth` and `wide`', () => {
const $ = cheerio.load(
renderComponent('document-list', {
documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, fullWidth: true, wide: true }],
documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, featured: true, fullWidth: true, wide: true }],
}),
);

Expand Down

0 comments on commit e67d7e5

Please sign in to comment.