@ons/design-system 46.1.3 → 48.0.0

package/scss/main.scss

@@ -5,7 +5,6 @@
 @import 'objects/index';
 @import '../components/access-code/uac';
 @import '../components/address-output/address-output';
-@import '../components/articles/articles';
 @import '../components/autosuggest/autosuggest';
 @import '../components/breadcrumbs/breadcrumbs';
 @import '../components/button/button';
@@ -16,8 +15,8 @@
 @import '../components/collapsible/collapsible';
 @import '../components/content-pagination/content-pagination';
 @import '../components/cookies-banner/cookies-banner';
+@import '../components/document-list/document-list';
 @import '../components/download-resources/download-resources';
-@import '../components/downloads/downloads';
 @import '../components/external-link/external-link';
 @import '../components/feedback/feedback';
 @import '../components/field/field-group';

package/scss/objects/_spacing.scss

@@ -7,6 +7,7 @@
 .ons-summary__group +,
 .ons-collapsible:not(.ons-collapsible--accordion) + {
   .ons-figure,
+  .ons-panel,
   .ons-field,
   .ons-field-group,
   .ons-fieldset,

package/scss/vars/_colors.scss

@@ -47,13 +47,14 @@ $color-branded-supporting-tint: tint($color-branded-supporting, 90%) !default;
 // Assignment
 // =============================================================================
 
-// Headers, footers, banners
+// Headers, footers, banners, page
 $color-header: $color-branded !default;
 $color-header-top: $color-white !default;
 $color-header-top-internal: $color-branded-secondary !default;
 $color-cta-bg: $color-branded-tint !default;
 $color-banner-bg: $color-grey-5 !default;
 $color-banner-bg-dark: $color-grey-15 !default;
+$color-page-light: $color-white !default;
 
 // Typography
 $color-text: $color-black !default;
@@ -68,6 +69,7 @@ $color-text-inverse-link: $color-white !default;
 $color-text-inverse-link-hover: $color-grey-5 !default;
 $color-text-banner-link: $color-grey-100 !default;
 $color-text-banner-link-hover: $color-black !default;
+$color-text-metadata: $color-black !default;
 
 // Foundations
 $color-focus: $color-sun-yellow !default;
@@ -76,8 +78,12 @@ $color-highlight: $color-neon-yellow !default;
 // Borders
 $color-borders: $color-grey-75 !default;
 $color-borders-indent: $color-grey-35 !default;
-$color-document-border: $color-grey-15 !default;
-$color-document-border-focus: $color-black !default;
+$color-borders-list: $color-grey-35 !default;
+$color-borders-document-image: $color-grey-15 !default;
+$color-borders-document-image-focus: $color-black !default;
+
+// Placeholders
+$color-placeholder: $color-grey-15 !default;
 
 // Form elements
 $color-button: $color-leaf-green !default;

package/components/articles/_articles.scss

@@ -1,86 +0,0 @@
-.ons-article {
-  @include mq(s) {
-    align-items: flex-start;
-    display: flex;
-  }
-
-  & + & {
-    border-top: 1px solid $color-grey-75;
-    margin: 1.5rem 0 0;
-    padding: 1.5em 0 0;
-  }
-
-  &__content {
-    max-width: 660px; // Equivalent to 8 Columns;
-  }
-
-  &__image {
-    flex-shrink: 0;
-    margin-bottom: 1rem;
-    max-width: 140px;
-
-    @include mq(s) {
-      display: flex;
-      margin-bottom: 0;
-      margin-right: 1.5rem;
-    }
-  }
-
-  &__image-link {
-    box-sizing: border-box;
-    display: inline-block;
-    outline-offset: 0;
-    vertical-align: top;
-
-    &:focus {
-      box-shadow: 0 0 0 2px $color-black !important;
-      outline: 4px solid $color-focus !important;
-      outline-offset: 2px;
-    }
-  }
-
-  &__meta {
-    color: $color-grey-100;
-    display: flex;
-    margin-bottom: 1rem;
-    padding-left: 0;
-
-    &-item {
-      display: block;
-      margin: 0 1rem 0 0;
-      padding-left: 0;
-    }
-
-    &-link {
-      color: inherit;
-
-      &:hover {
-        color: $color-black;
-        text-decoration: underline solid $color-black 2px;
-      }
-    }
-  }
-
-  // Featured
-  &--featured {
-    background-color: $color-grey-5;
-    border-top: 0;
-    padding-bottom: 0;
-    padding-top: 0;
-
-    .ons-article__image {
-      margin-bottom: 1.5rem;
-      margin-right: 0;
-      max-width: 379px;
-
-      @include mq(m) {
-        margin-bottom: 0;
-        margin-right: 1.5rem;
-      }
-    }
-
-    .ons-article__image img {
-      width: 100%;
-    }
-  }
-}

package/components/articles/_macro.njk

@@ -1,81 +0,0 @@
-{% macro onsArticles(params) %}
-
-
-    {% for article in (params.articles if params.articles is iterable else params.articles.items()) %}
-    <article class="ons-article{% if article.featured %} ons-article--featured {% endif %}{{ ' ' + params.classes if params.classes else '' }}">
-
-
-        {% if article.featured is defined and article.featured %}
-        <div class="ons-container">
-            <div class="ons-grid ons-u-pt-l ons-u-pb-l">
-                <div class="ons-grid__col ons-col-5@m">
-                {% endif %}
-
-                    <div class="ons-article__image" aria-hidden="true">
-
-                        <a class="ons-article__image-link" href="{{ article.url }}" tabindex="-1">
-
-                            {% if article.featured is defined and article.featured %}
-
-                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
-                                    <img height="248" width="379" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
-                                {% else %}
-                                    <img height="248" width="379" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news-medium.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news-medium.png" alt="Image placeholder" loading="lazy">
-                                {% endif %}
-
-                            {% else %}
-
-                                {% if article.image is defined and article.image and article.image.smallSrc is defined and article.image.smallSrc %}
-                                    <img height="92" width="140" srcset="{{ article.image.smallSrc }} 1x, {{ article.image.largeSrc }} 2x" src="{{ article.image.smallSrc }}" alt="{{ article.image.alt }}" loading="lazy">
-                                {% else %}
-                                    <img height="92" width="140" srcset="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png 1x, {{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/large/placeholder-news.png 2x" src="{{ article.placeholderURL if article.placeholderURL is defined and article.placeholderURL }}/img/small/placeholder-news.png" alt="Image placeholder" loading="lazy">
-                                {% endif %}
-
-                            {% endif %}
-
-                        </a>
-
-                    </div>
-
-                {% if article.featured is defined and article.featured %}
-                </div>
-                <div class="ons-grid__col ons-col-7@m">
-                {% endif %}
-
-                    <div class="ons-article__content">
-
-                        <h2 class="ons-article__heading">
-                            <a href="{{ article.url }}">{{ article.title }}</a>
-                        </h2>
-
-                        <ul class="ons-u-fs-s ons-article__meta">
-                            {%- if article.date is defined and article.date %}<li class="ons-article__meta-item"><span class="ons-u-hidden">Posted on </span> <time datetime="{{ article.date.iso }}">{{ article.date.short }}</time></li>{% endif %}
-                            {%- if article.category is defined and article.category %}
-                                <li class="ons-article__meta-item">
-                                    <span class="ons-u-hidden">in </span> 
-                                    {%- if article.category.url is defined and article.category.url %}
-                                        <a class="ons-article__meta-link" href="{{ article.category.url }}">{{ article.category.title }}</a>
-                                    {% else %}
-                                        {{ article.category.title }}
-                                    {% endif %}
-                                </li>
-                            {% endif %}
-                        </ul>
-
-                        {% if article.excerpt is defined and article.excerpt %}
-                        <p class="ons-u-mb-no">{{ article.excerpt | safe }}</p>
-                        {% endif %}
-
-                    </div>
-
-                {% if article.featured is defined and article.featured %}
-                </div>
-            </div>
-        </div>
-        {% endif %}
-
-
-    </article>
-    {% endfor %}
-
-{% endmacro %}

package/components/downloads/_downloads.scss

@@ -1,39 +0,0 @@
-.ons-download {
-  display: flex;
-
-  & + & {
-    border-top: 1px solid $color-grey-75;
-    margin: 1.5rem 0 0;
-    padding: 1.5em 0 0;
-  }
-
-  &__image {
-    flex: 0 0 auto;
-    margin-right: 1.5rem;
-    width: 96px;
-  }
-
-  &__image-link {
-    border: 2px solid $color-grey-15;
-    box-sizing: content-box;
-    display: block;
-    width: 100%;
-
-    &:focus {
-      border-color: $color-document-border-focus;
-      box-shadow: none;
-      outline: 4px solid $color-focus !important;
-      outline-offset: 0;
-    }
-  }
-
-  &__meta {
-    color: $color-grey-100;
-    display: block;
-  }
-
-  &__excerpt {
-    margin-bottom: 0;
-    max-width: 660px; // Equivalent to 8 Columns
-  }
-}

package/components/downloads/_macro.njk

@@ -1,66 +0,0 @@
-{% macro onsDownloads(params) %}
-
-    {% for download in (params.downloads if params.downloads is iterable else params.downloads.items()) %}
-
-    <div class="ons-download{{ ' ' + params.classes if params.classes else '' }}">
-
-        <div class="ons-download__image" aria-hidden="true">
-            <a class="ons-download__image-link" href="{{ download.url }}" tabindex="-1">
-                {% if download.thumbnail is defined and download.thumbnail and download.thumbnail.smallSrc is defined and download.thumbnail.smallSrc and download.thumbnail.largeSrc is defined and download.thumbnail.largeSrc %}
-                    <img srcset="{{ download.thumbnail.smallSrc }} 1x, {{ download.thumbnail.largeSrc }} 2x" src="{{ download.thumbnail.smallSrc }}" alt="" loading="lazy">
-                {% else %}
-                    <img srcset="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png 1x, {{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/large/placeholder-portrait.png 2x" src="{{ download.placeholderURL if download.placeholderURL is defined and download.placeholderURL }}/img/small/placeholder-portrait.png" alt="" loading="lazy">
-                {% endif %}
-            </a>
-        </div>
-
-        <div class="ons-download__content">
-            {% set titleTag = params.titleTag | default("h2") %}
-            <{{ titleTag }} class="ons-u-fs-m ons-u-mt-no ons-u-mb-xs">
-                <a href="{{ download.url }}">{{ download.title }}<span class="ons-u-vh">, 
-
-                {%- if download.meta is defined and download.meta %}
-
-                    {% set metaItems = [] %}
-
-                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType + ' document download'), metaItems) %}{% endif %}
-                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
-                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
-
-                    {{ metaItems|join(', ') }}
-
-                {% endif -%}
-
-                </span></a>
-            </{{ titleTag }}>
-
-            <span class="ons-u-fs-s ons-u-mb-xs ons-download__meta" aria-hidden="true">
-
-                {%- if download.type is defined and download.type %}
-                    {{ download.type }}{%- if download.meta is defined and download.meta %},{% endif %}
-                {% endif %}
-
-                {%- if download.meta is defined and download.meta %}
-
-                    {% set metaItems = [] %}
-
-                    {% if download.meta.fileType is defined and download.meta.fileType %}{% set metaItems = (metaItems.push(download.meta.fileType), metaItems) %}{% endif %}
-                    {% if download.meta.fileSize is defined and download.meta.fileSize %}{% set metaItems = (metaItems.push(download.meta.fileSize), metaItems) %}{% endif %}
-                    {% if download.meta.filePages is defined and download.meta.filePages %}{% set metaItems = (metaItems.push(download.meta.filePages), metaItems) %}{% endif %}
-
-                    {{ metaItems|join(', ') }}
-
-                {% endif -%}
-
-            </span>
-
-            {% if download.excerpt is defined and download.excerpt %}
-                <p class="ons-download__excerpt">{{ download.excerpt | safe }}</p>
-            {% endif %}
-
-        </div>
-
-    </div>
-    {% endfor %}
-
-{% endmacro %}