Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

'Document list' component to replace downloads and articles, and use for search results #2011

Merged
merged 34 commits into from
Mar 21, 2022
Merged
Show file tree
Hide file tree
Changes from 30 commits
Commits
Show all changes
34 commits
Select commit Hold shift + click to select a range
38236e8
added document component first draft
jrbarnes9 Feb 11, 2022
dc11da2
refector
jrbarnes9 Feb 11, 2022
604ec13
added date
jrbarnes9 Feb 11, 2022
fc436ff
added more metadata options
jrbarnes9 Feb 14, 2022
eda8daf
corrected page template heading levels
jrbarnes9 Feb 25, 2022
55472db
added examples of differenet document types
jrbarnes9 Feb 25, 2022
835bf0d
added featured docs
jrbarnes9 Mar 2, 2022
4cf19e0
fixed issues with examples
jrbarnes9 Mar 3, 2022
97ca373
used new document component in news pattern
jrbarnes9 Mar 3, 2022
21db4af
documentation
jrbarnes9 Mar 3, 2022
6a8f3b4
more documentation
jrbarnes9 Mar 3, 2022
fd6b4e1
fixed bug #1664
jrbarnes9 Mar 4, 2022
adb022a
replaced download resources with new document component
jrbarnes9 Mar 4, 2022
7503238
removed old components replaced by document
jrbarnes9 Mar 4, 2022
955b158
removed unnecessary change
jrbarnes9 Mar 4, 2022
033ff74
removed unused document examples
jrbarnes9 Mar 4, 2022
05e7f4d
revert unrelated changes
jrbarnes9 Mar 4, 2022
2a5b855
removed scss imports for removed components
jrbarnes9 Mar 4, 2022
7f7c461
removed old placeholder thumbnail pngs
jrbarnes9 Mar 4, 2022
704c5c1
removed unused imports from guide example
jrbarnes9 Mar 4, 2022
4a171e6
revert removed onsList from guide rtl example
jrbarnes9 Mar 4, 2022
4552a0b
macro options docs
jrbarnes9 Mar 7, 2022
04bef51
refactored download resources pattern to use document list
jrbarnes9 Mar 7, 2022
194de78
fix for border and margin showing when preceded by hidden item
jrbarnes9 Mar 7, 2022
2e04182
revert test
jrbarnes9 Mar 7, 2022
1813ba7
updated downloadable resources examples [test-visual]
jrbarnes9 Mar 7, 2022
1e8eebc
remove bottom border from inline featured doc
jrbarnes9 Mar 8, 2022
bfa65ba
changed name of component and fixed featured image size
jrbarnes9 Mar 10, 2022
d6d75cd
updated example folder names
jrbarnes9 Mar 10, 2022
817eca3
adjusted metadata line height
jrbarnes9 Mar 10, 2022
7b01eb2
pr suggestion
jrbarnes9 Mar 11, 2022
69ec835
Update src/components/document-list/_macro.njk
jrbarnes9 Mar 11, 2022
54913db
Update src/components/document-list/_macro.njk
jrbarnes9 Mar 11, 2022
f4ada78
Merge branch '1797-search-result' of github.com:ONSdigital/design-sys…
jrbarnes9 Mar 11, 2022
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
86 changes: 0 additions & 86 deletions src/components/articles/_articles.scss

This file was deleted.

32 changes: 0 additions & 32 deletions src/components/articles/_macro-options.md

This file was deleted.

81 changes: 0 additions & 81 deletions src/components/articles/_macro.njk

This file was deleted.

22 changes: 0 additions & 22 deletions src/components/articles/examples/articles-featured/index.njk

This file was deleted.

31 changes: 0 additions & 31 deletions src/components/articles/examples/articles-multiple/index.njk

This file was deleted.

18 changes: 0 additions & 18 deletions src/components/articles/examples/articles-single/index.njk

This file was deleted.

51 changes: 0 additions & 51 deletions src/components/articles/index.njk

This file was deleted.

61 changes: 61 additions & 0 deletions src/components/document-list/_macro-options.md
Original file line number Diff line number Diff line change
@@ -0,0 +1,61 @@
| Name | Type | Required | Description |
| ---------- | ----------------- | -------- | ---------------------------------------------------------------------------------- |
| id | string | false | ID for the document list element |
| classes | string | false | Classes for the document list element |
| attributes | object | false | HTML attributes (for example, data attributes) to add to the document list element |
| documents | `Array<Document>` | true | An array of document list items to render in the documents list |

## 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. Renders a placeholder instead if set to `true` |
| metadata | `<Object>Metadata` | false | An object for a list of information about document, 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 | If set to `true`, adds class `ons-container--wide` to the `div` set with `fullWidth` |

### Thumbnail

| Name | Type | Required | Description |
| -------- | ------ | -------- | ------------------------------------------- |
| smallSrc | string | true | Path to the non-retina version of the image |
| largeSrc | string | true | Path to the retina version of the image |

### Metadata

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

#### Type

| Name | Type | Required | Description |
| ---- | ------ | -------- | ---------------------------------------------------------------------------------------------------------------------------------- |
| text | string | true | Label for the type of document, for example “User requested data”. |
| url | string | false | URL `href` for the type. Can be used to filter a list of documents by category. |
| ref | string | false | Text for a sub-type or reference. Can be used to give extra detail about the type, for example, “User requested data: Ref 008052”. |

#### Date

| Name | Type | Required | Description |
| ---------- | ------- | -------- | ------------------------------------------------------------------------------------------------------------------------------------ |
| iso | string | true | ISO format meachine-readable date, for example, `2020-05-20` |
| short | string | true | Displayed short format of the date, for example, “20 May 2020” |
| prefix | string | false | Label to prefix the date for context, for example, “Last updated” (Defaults to “Published”). Is automatically suffixed with a colon. |
| showPrefix | boolean | false | Displays the `prefix` when set to `true`. Otherwise it will be hidden. Use when context is required. |

#### File

| Name | Type | Required | Description |
| --------- | ------ | -------- | ---------------------------------------------------------------- |
| 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” |
Loading