@ons/design-system 70.0.7 → 70.0.9

package/components/document-list/document-list.scss

@@ -1,184 +1,180 @@
 .ons-document-list {
-  @extend .ons-list--bare;
+    @extend .ons-list--bare;
 
-  margin-bottom: 0;
+    margin-bottom: 0;
 
-  &__item {
-    border-bottom: 1px solid var(--ons-color-borders-light);
-    margin: 0 0 1.5rem;
-    padding: 0 0 1.5rem;
+    &__item {
+        border-bottom: 1px solid var(--ons-color-borders-light);
+        margin: 0 0 1.5rem;
+        padding: 0 0 1.5rem;
 
-    @include mq(xs) {
-      align-items: flex-start;
-      display: flex;
-    }
+        @include mq(xs) {
+            align-items: flex-start;
+            display: flex;
+        }
 
-    &:last-of-type {
-      border-bottom: 0;
-      margin: 0;
-    }
-  }
+        &:last-of-type {
+            border-bottom: 0;
+            margin: 0;
+        }
 
-  &__item-image {
-    flex: 0 0 auto;
-    margin-bottom: 1rem;
-    width: 136px;
+        // Featured document
+        &--featured {
+            background-color: var(--ons-color-banner-bg);
+            border-bottom: 0;
+            display: block;
+            outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
+            outline-offset: -2px;
+            padding: 2rem;
+
+            @include mq(m) {
+                align-items: flex-start;
+                display: flex;
+
+                .ons-container {
+                    display: flex;
+                }
+            }
 
-    @include mq(xs) {
-      margin-right: 1.5rem;
-    }
+            // Increase thumbnail image size
+            .ons-document-list__item-image {
+                width: 248px;
+
+                & &__image-link {
+                    &--placeholder {
+                        height: 96px;
+                    }
+                }
+
+                @include mq(m) {
+                    margin-right: 2.5rem;
+                    width: 379px;
+
+                    & &__image-link {
+                        &--placeholder {
+                            height: 248px;
+                        }
+                    }
+                }
+            }
 
-    @include mq(m) {
-      margin-bottom: 0;
-    }
-  }
+            // Show metadata above title
+            .ons-document-list__item-header {
+                &--reverse {
+                    display: flex;
+                    flex-direction: column-reverse;
+                    margin-bottom: 0.5rem;
+                }
+            }
 
-  &__item-image & {
-    &__image-link {
-      &--placeholder {
-        height: 96px;
-      }
+            // Increase font size
+            .ons-document-list__item-title {
+                @extend .ons-u-fs-l;
+            }
+
+            // If featured item is first in same list
+            + .ons-document-list__item {
+                border-top: 0;
+                margin-top: 0;
+            }
+        }
+
+        // If featured item is full width
+        &--full-width {
+            padding: 2rem 0;
+        }
     }
-  }
 
-  &__item-image--file {
-    width: 96px;
-  }
+    &__item-image {
+        flex: 0 0 auto;
+        margin-bottom: 1rem;
+        width: 136px;
 
-  &__item-image--file & {
-    &__image-link {
-      border-color: var(--ons-color-borders-document-image);
+        @include mq(xs) {
+            margin-right: 1.5rem;
+        }
 
-      &--placeholder {
-        height: 136px;
-      }
+        @include mq(m) {
+            margin-bottom: 0;
+        }
     }
-  }
-
-  &__image-link {
-    border: 2px solid transparent;
-    box-sizing: content-box;
-    display: block;
-    width: 100%;
-
-    &:focus {
-      background-color: var(--ons-color-image-placeholder) !important;
-      border: 2px solid var(--ons-color-borders-document-image-focus);
-      box-shadow: none;
-      outline: 4px solid var(--ons-color-focus) !important;
-      outline-offset: 0;
+
+    &__item-image & {
+        &__image-link {
+            &--placeholder {
+                height: 96px;
+            }
+        }
     }
 
-    &--placeholder {
-      background-clip: padding-box;
-      background-color: var(--ons-color-borders-document-image);
-      background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
-      background-position: center;
-      background-repeat: no-repeat;
-      background-size: 32px 32px;
-      height: 100%;
+    &__item-image--file {
+        width: 96px;
     }
-  }
 
-  &__item-metadata {
-    @extend .ons-list--bare;
+    &__item-image--file & {
+        &__image-link {
+            border-color: var(--ons-color-borders-document-image);
 
-    line-height: 1.2 !important;
-  }
+            &--placeholder {
+                height: 136px;
+            }
+        }
+    }
 
-  &__item-attribute {
-    color: var(--ons-color-text-metadata);
-    display: inline-block;
-    margin: 0 1rem 0 0;
+    &__image-link {
+        border: 2px solid transparent;
+        box-sizing: content-box;
+        display: block;
+        width: 100%;
+
+        &:focus {
+            background-color: var(--ons-color-image-placeholder) !important;
+            border: 2px solid var(--ons-color-borders-document-image-focus);
+            box-shadow: none;
+            outline: 4px solid var(--ons-color-focus) !important;
+            outline-offset: 0;
+        }
 
-    @extend .ons-u-fs-s;
-  }
+        &--placeholder {
+            background-clip: padding-box;
+            background-color: var(--ons-color-borders-document-image);
+            background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3e%3cpath fill='%23fff' d='M0 19.39c.49-1 1-2 1.55-2.93A31.59 31.59 0 0 1 0 11.72v7.67ZM3 0S0 0 0 3.7v2a34.85 34.85 0 0 0 2.17 9.76A31.2 31.2 0 0 1 8.3 8.3c4.84-4.16 11.36-7 20.21-8.29Zm28.84 2c-10.11 1-17 3.86-22 8.1a29.78 29.78 0 0 0-6.49 8C7.26 25.65 14.66 31.19 27 32h1.21A3.71 3.71 0 0 0 32 27.91V2a.41.41 0 0 1-.16 0Zm-26 21.49a25.94 25.94 0 0 1-3-4.4A48 48 0 0 0 0 25.71V32h20.23a26.41 26.41 0 0 1-14.39-8.49Z'/%3e%3c/svg%3e");
+            background-position: center;
+            background-repeat: no-repeat;
+            background-size: 32px 32px;
+            height: 100%;
+        }
+    }
 
-  &__attribute-link {
-    color: inherit;
+    &__item-metadata {
+        @extend .ons-list--bare;
 
-    &:hover {
-      color: var(--ons-color-text-metadata);
-      text-decoration: underline solid var(--ons-color-text-metadata) 2px;
+        line-height: 1.2 !important;
     }
-  }
 
-  &__item-description {
-    margin-bottom: 0;
-    max-width: 660px; // Equivalent to 8 Columns
+    &__item-attribute {
+        color: var(--ons-color-text-metadata);
+        display: inline-block;
+        margin: 0 1rem 0 0;
 
-    p:last-of-type {
-      margin-bottom: 0;
+        @extend .ons-u-fs-s;
     }
-  }
-}
-
-// Featured document
-.ons-document-list {
-  &__item {
-    &--featured {
-      background-color: var(--ons-color-banner-bg);
-      border-bottom: none;
-      display: block;
-      outline: 2px solid transparent; // Add transparent outline because Windows High Contrast Mode doesn't show background
-      outline-offset: -2px;
-      padding: 2rem;
-
-      @include mq(m) {
-        align-items: flex-start;
-        display: flex;
-
-        .ons-container {
-          display: flex;
-        }
-      }
 
-      // Increase thumbnail image size
-      .ons-document-list__item-image {
-        width: 248px;
+    &__attribute-link {
+        color: inherit;
 
-        & &__image-link {
-          &--placeholder {
-            height: 96px;
-          }
+        &:hover {
+            color: var(--ons-color-text-metadata);
+            text-decoration: underline solid var(--ons-color-text-metadata) 2px;
         }
+    }
 
-        @include mq(m) {
-          margin-right: 2.5rem;
-          width: 379px;
+    &__item-description {
+        margin-bottom: 0;
+        max-width: 660px; // Equivalent to 8 Columns
 
-          & &__image-link {
-            &--placeholder {
-              height: 248px;
-            }
-          }
-        }
-      }
-
-      // Show metadata above title
-      .ons-document-list__item-header {
-        &--reverse {
-          display: flex;
-          flex-direction: column-reverse;
-          margin-bottom: 0.5rem;
+        p:last-of-type {
+            margin-bottom: 0;
         }
-      }
-
-      // Increase font size
-      .ons-document-list__item-title {
-        @extend .ons-u-fs-l;
-      }
-
-      // If featured item is first in same list
-      & + .ons-document-list__item {
-        border-top: none;
-        margin-top: 0;
-      }
-    }
-
-    // If featured item is full width
-    &--full-width {
-      padding: 2rem 0;
     }
-  }
 }

package/components/document-list/example-document-list-article-featured.njk

@@ -1,31 +1,33 @@
 ---
-"fullWidth": true
+'fullWidth': true
 ---
 
 {% from "components/document-list/_macro.njk" import onsDocumentList %}
 
-{{ onsDocumentList({
-    "documents": [
-        {
-            "featured": true,
-            "fullWidth": true,
-            "thumbnail": {
-                "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',
-            "metadata": {
-                "type": {
-                    "text": 'Press releases',
-                    "url": '#0'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "featured": true,
+                "fullWidth": true,
+                "thumbnail": {
+                    "smallSrc": '/img/small/census-monuments-lights-featured.jpg',
+                    "largeSrc": '/img/large/census-monuments-lights-featured.jpg'
                 },
-                "date": {
-                    "iso": '2022-01-01',
-                    "short": '1 January 2022'
-                }
-            },
-            "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
-        }
-    ]
-}) }}
+                "url": '#0',
+                "title": 'Landmarks are lighting up purple to mark Census Day',
+                "metadata": {
+                    "type": {
+                        "text": 'Press releases',
+                        "url": '#0'
+                    },
+                    "date": {
+                        "iso": '2022-01-01',
+                        "short": '1 January 2022'
+                    }
+                },
+                "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
+            }
+        ]
+    })
+}}

package/components/document-list/example-document-list-articles.njk

@@ -1,60 +1,62 @@
 {% from "components/document-list/_macro.njk" import onsDocumentList %}
 
-{{ onsDocumentList({
-    "documents": [
-        {
-            "thumbnail": {
-                "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',
-            "metadata": {
-                "type": {
-                    "text": 'Press releases',
-                    "url": '#0'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "thumbnail": {
+                    "smallSrc": '/img/small/census-monuments-lights.jpg',
+                    "largeSrc": '/img/large/census-monuments-lights.jpg'
                 },
-                "date": {
-                    "iso": '2022-01-01',
-                    "short": '1 January 2022'
-                }
-            },
-            "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
-        },
-        {
-            "thumbnail": {
-                "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',
-            "metadata": {
-                "type": {
-                    "text": 'Press releases',
-                    "url": '#0'
+                "url": '#0',
+                "title": 'Landmarks are lighting up purple to mark Census Day',
+                "metadata": {
+                    "type": {
+                        "text": 'Press releases',
+                        "url": '#0'
+                    },
+                    "date": {
+                        "iso": '2022-01-01',
+                        "short": '1 January 2022'
+                    }
                 },
-                "date": {
-                    "iso": '2021-07-15',
-                    "short": '15 July 2021'
-                }
+                "description": 'Hundreds of buildings & landmarks across England and Wales are lighting up purple this weekend to celebrate the census and its importance to communities.'
             },
-            "description": 'The Office for National Statistics’ (ONS) analysis showing that people from certain ethnicities had a higher risk of dying from COVID-19 has been recognised by the Royal Statistical Society (RSS) with the renowned Campion Award.'
-        },
-        {
-            "thumbnail": true,
-            "url": '#0',
-            "title": 'Five Office for National Statistics names in New Year’s Honours',
-            "metadata": {
-                "type": {
-                    "text": 'Press releases',
-                    "url": '#0'
+            {
+                "thumbnail": {
+                    "smallSrc": '/img/small/ons-award-winners.jpg',
+                    "largeSrc": '/img/large/ons-award-winners.jpg'
                 },
-                "date": {
-                    "iso": '2022-01-01',
-                    "short": '1 January 2022'
-                }
+                "url": '#0',
+                "title": 'Office for National Statistics win top Royal Statistical Society award',
+                "metadata": {
+                    "type": {
+                        "text": 'Press releases',
+                        "url": '#0'
+                    },
+                    "date": {
+                        "iso": '2021-07-15',
+                        "short": '15 July 2021'
+                    }
+                },
+                "description": 'The Office for National Statistics’ (ONS) analysis showing that people from certain ethnicities had a higher risk of dying from COVID-19 has been recognised by the Royal Statistical Society (RSS) with the renowned Campion Award.'
             },
-            "description": 'After another year in which data and statistics have dominated public debate, five Office for National Statistics (ONS) employees have been recognised for their contributions to statistics, public health and the census in the New Year’s Honours list.'
-        }
-    ]
-}) }}
+            {
+                "thumbnail": true,
+                "url": '#0',
+                "title": 'Five Office for National Statistics names in New Year’s Honours',
+                "metadata": {
+                    "type": {
+                        "text": 'Press releases',
+                        "url": '#0'
+                    },
+                    "date": {
+                        "iso": '2022-01-01',
+                        "short": '1 January 2022'
+                    }
+                },
+                "description": 'After another year in which data and statistics have dominated public debate, five Office for National Statistics (ONS) employees have been recognised for their contributions to statistics, public health and the census in the New Year’s Honours list.'
+            }
+        ]
+    })
+}}

package/components/document-list/example-document-list-downloads.njk

@@ -1,53 +1,55 @@
 {% from "components/document-list/_macro.njk" import onsDocumentList %}
-{{ onsDocumentList({
-    "documents": [
-        {
-            "thumbnail": true,
-            "url": '#',
-            "title": 'Including everyone in Census 2021',
-            "metadata": {
-                "type": {
-                  "text": 'Poster'
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "thumbnail": true,
+                "url": '#',
+                "title": 'Including everyone in Census 2021',
+                "metadata": {
+                    "type": {
+                      "text": 'Poster'
+                    },
+                    "file": {
+                        "fileType": 'PDF',
+                        "fileSize": '499KB',
+                        "filePages": '1 page'
+                    }
                 },
-                "file": {
-                    "fileType": 'PDF',
-                    "fileSize": '499KB',
-                    "filePages": '1 page'
-                }
+                "description": 'Empty belly poster, aimed at advertising census events.'
             },
-            "description": 'Empty belly poster, aimed at advertising census events.'
-        },
-        {
-            "thumbnail": true,
-            "url": '#',
-            "title": 'Community handbook for Census 2021',
-            "metadata": {
-                "type": {
-                    "text": 'Booklet'
+            {
+                "thumbnail": true,
+                "url": '#',
+                "title": 'Community handbook for Census 2021',
+                "metadata": {
+                    "type": {
+                        "text": 'Booklet'
+                    },
+                    "file": {
+                        "fileType": 'PDF',
+                        "fileSize": '3.3MB',
+                        "filePages": '16 pages'
+                    }
                 },
-                "file": {
-                    "fileType": 'PDF',
-                    "fileSize": '3.3MB',
-                    "filePages": '16 pages'
-                }
+                "description": 'This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community.'
             },
-            "description": 'This handbook explains what the census is, why it matters to everyone and how we can work together to spread the word within your community.'
-        },
-        {
-            "thumbnail": true,
-            "url": '#',
-            "title": 'Census 2021 matters to everyone',
-            "metadata": {
-                "type": {
-                    "text": 'Poster'
+            {
+                "thumbnail": true,
+                "url": '#',
+                "title": 'Census 2021 matters to everyone',
+                "metadata": {
+                    "type": {
+                        "text": 'Poster'
+                    },
+                    "file": {
+                        "fileType": 'PDF',
+                        "fileSize": '866KB',
+                        "filePages": '1 page'
+                    }
                 },
-                "file": {
-                    "fileType": 'PDF',
-                    "fileSize": '866KB',
-                    "filePages": '1 page'
-                }
-            },
-            "description": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.'
-        }
-    ]
-}) }}
+                "description": 'By taking part and encouraging others to do the same, you’ll make sure your community gets the services it needs.'
+            }
+        ]
+    })
+}}

package/components/document-list/example-document-list-search-result-featured.njk

@@ -1,19 +1,21 @@
 {% from "components/document-list/_macro.njk" import onsDocumentList %}
 
-{{ onsDocumentList({
-    "documents": [
-        {
-            "featured": true,
-            "showMetadataFirst": true,
-            "url": '#0',
-            "title": 'Crime and justice',
-            "metadata": {
-                "type": {
-                    "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 crime 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>'
-        }
-    ]
-}) }}
+{{
+    onsDocumentList({
+        "documents": [
+            {
+                "featured": true,
+                "showMetadataFirst": true,
+                "url": '#0',
+                "title": 'Crime and justice',
+                "metadata": {
+                    "type": {
+                        "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 crime 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>'
+            }
+        ]
+    })
+}}