@ons/design-system 72.9.1 → 72.10.0

package/components/chart/utilities.js

@@ -0,0 +1,96 @@
+// Utility function to merge two configs together
+export const mergeConfigs = (baseConfig, newConfig) => {
+    // If newConfig is null/undefined, return baseConfig
+    if (!newConfig) return baseConfig;
+
+    // Create a new object to store the merged result
+    const merged = { ...baseConfig };
+
+    // Iterate through all keys in newConfig
+    Object.keys(newConfig).forEach((key) => {
+        // Get values from both configs for this key
+        const baseValue = merged[key];
+        const newValue = newConfig[key];
+
+        // If both values are objects (and not null), recursively merge them
+        if (
+            baseValue &&
+            newValue &&
+            typeof baseValue === 'object' &&
+            typeof newValue === 'object' &&
+            !Array.isArray(baseValue) &&
+            !Array.isArray(newValue)
+        ) {
+            merged[key] = mergeConfigs(baseValue, newValue);
+        } else {
+            // For non-objects and arrays use the new value
+            // If the new value is null/undefined, use the base value
+            merged[key] = newValue ?? baseValue;
+        }
+    });
+
+    return merged;
+};
+
+// Helper function to process the range and reference line annotations plus any plot lines config
+// ready to pass to the responsive rules
+export const preparePlotLinesAndBands = (
+    annotations = undefined,
+    rangeAnnotations = undefined,
+    rangeAnnotationsOptions = undefined,
+    referenceLineAnnotationsOptions = undefined,
+    commonChartOptions,
+    chartType,
+) => {
+    const totalPointAndRangeAnnotations = (annotations ? annotations.length : 0) + (rangeAnnotations ? rangeAnnotations.length : 0);
+
+    // Both range and reference line annotations are added to the axis objects, so we need to correctly combine them before we can pass them to the config.
+    let desktopRangeAnnotations = {};
+    let mobileRangeAnnotations = {};
+    let desktopReferenceLineAnnotations = {};
+    let mobileReferenceLineAnnotations = {};
+    let desktopAllPlotLines = {};
+    let mobileAllPlotLines = {};
+    let desktopAllPlotLinesAndBands = {};
+    let mobileAllPlotLinesAndBands = {};
+
+    // get the desktop and mobile range annotations
+    if (rangeAnnotationsOptions) {
+        desktopRangeAnnotations = rangeAnnotationsOptions.getRangeAnnotationsOptionsDesktop(chartType);
+        mobileRangeAnnotations = rangeAnnotationsOptions.getRangeAnnotationsOptionsMobile(annotations ? annotations.length : 0, chartType);
+    }
+
+    // get the desktop and mobile reference line annotations
+    if (referenceLineAnnotationsOptions) {
+        desktopReferenceLineAnnotations = referenceLineAnnotationsOptions.getReferenceLineAnnotationsOptionsDesktop();
+        mobileReferenceLineAnnotations = referenceLineAnnotationsOptions.getReferenceLineAnnotationsOptionsMobile(
+            totalPointAndRangeAnnotations,
+            chartType,
+        );
+    }
+
+    // We also need to combine the zero line (and any future plot lines) with the reference line annotations here, as otherwise
+    // it gets overridden by the reference line annotations config
+    let plotLineOptions = commonChartOptions.getPlotLines();
+
+    if (desktopReferenceLineAnnotations.yAxis !== undefined) {
+        let desktopMergedPlotLines = desktopReferenceLineAnnotations.yAxis.plotLines.concat(plotLineOptions.yAxis.plotLines);
+        let mobileMergedPlotLines = mobileReferenceLineAnnotations.yAxis.plotLines.concat(plotLineOptions.yAxis.plotLines);
+        desktopAllPlotLines = { ...desktopReferenceLineAnnotations };
+        mobileAllPlotLines = { ...mobileReferenceLineAnnotations };
+        desktopAllPlotLines.yAxis.plotLines = desktopMergedPlotLines;
+        mobileAllPlotLines.yAxis.plotLines = mobileMergedPlotLines;
+    } else {
+        desktopAllPlotLines = { ...plotLineOptions };
+        mobileAllPlotLines = { ...plotLineOptions };
+    }
+
+    // combine the desktop and mobile range and reference line annotations, along with other plot lines, ready to pass to the config
+    desktopAllPlotLinesAndBands = mergeConfigs(desktopRangeAnnotations, desktopAllPlotLines);
+    mobileAllPlotLinesAndBands = mergeConfigs(mobileRangeAnnotations, mobileAllPlotLines);
+
+    return {
+        desktopAllPlotLinesAndBands,
+        mobileAllPlotLinesAndBands,
+    };
+};

package/components/details-panel/_macro.njk

@@ -4,7 +4,11 @@
             <div class="ons-container ons-details-panel__banner-contents">
                 <span class="ons-details-panel__info-icon ons-u-mr-2xs" aria-hidden="true">i</span>
                 <div class="ons-details-panel__banner-body">
-                    <h3 class="ons-details-panel__banner-title ons-u-mb-2xs">{{ params.title }}</h3>
+                    {% set titleTag = params.headingLevel | default(2) %}
+                    {% set openingTag = "<h" ~ titleTag %}
+                    {% set closingTag = "</h" ~ titleTag ~ ">" %}
+                    {{ openingTag | safe }}
+                    class="ons-details-panel__banner-title ons-u-fs-m ons-u-mb-2xs">{{ params.title }}{{ closingTag | safe }}
                     <div class="ons-details-panel__banner-detail ons-js-details-heading">
                         <span class="ons-details-panel__banner-detail-title ons-js-corrections-details-title ons-u-mr-3xs"
                             >Show detail</span

package/components/details-panel/_macro.spec.js

@@ -15,6 +15,28 @@ describe('FOR: Macro: Details Panel', () => {
         });
     });
 
+    describe('GIVEN: Params: headingLevel', () => {
+        describe('WHEN: headingLevel is provided', () => {
+            const customParams = {
+                ...EXAMPLE_DETAILS_PANEL,
+                headingLevel: 3,
+            };
+            const $ = cheerio.load(renderComponent('details-panel', customParams));
+            test('THEN: banner title uses the correct heading level', () => {
+                const bannerTitle = $('.ons-details-panel__banner-title');
+                expect(bannerTitle.prop('tagName')).toBe('H3');
+            });
+        });
+
+        describe('WHEN: headingLevel is not provided', () => {
+            const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));
+            test('THEN: banner title uses default heading level (h2)', () => {
+                const bannerTitle = $('.ons-details-panel__banner-title');
+                expect(bannerTitle.prop('tagName')).toBe('H2');
+            });
+        });
+    });
+
     describe('GIVEN: Params: detailsItems', () => {
         describe('WHEN: detailsItems is provided', () => {
             const $ = cheerio.load(renderComponent('details-panel', EXAMPLE_DETAILS_PANEL));

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

@@ -40,7 +40,7 @@
             .ons-document-list__item-image {
                 width: 248px;
 
-                & &__image-link {
+                & &__image {
                     &--placeholder {
                         height: 96px;
                     }
@@ -50,7 +50,7 @@
                     margin-right: 2.5rem;
                     width: 379px;
 
-                    & &__image-link {
+                    & &__image {
                         &--placeholder {
                             height: 248px;
                         }
@@ -100,7 +100,7 @@
     }
 
     &__item-image & {
-        &__image-link {
+        &__image {
             &--placeholder {
                 height: 96px;
             }
@@ -112,7 +112,7 @@
     }
 
     &__item-image--file & {
-        &__image-link {
+        &__image {
             border-color: var(--ons-color-borders);
 
             &--placeholder {
@@ -121,20 +121,12 @@
         }
     }
 
-    &__image-link {
+    &__image {
         border: 2px solid transparent;
         box-sizing: content-box;
         display: block;
         width: 100%;
 
-        &:focus {
-            background-color: var(--ons-color-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 !important;
-        }
-
         &--placeholder {
             background-clip: padding-box;
             background-color: var(--ons-color-placeholder);

package/components/document-list/_macro.njk

@@ -1,32 +1,29 @@
 {% macro onsDocumentList(params) %}
+    {% set titleTag = params.headingLevel | default(2) %}
+    {% set openingTag = "<h" ~ titleTag %}
+    {% set closingTag = "</h" ~ titleTag ~ ">" %}
     <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 %}
-            {% set titleTag = params.headingLevel | default(2) %}
-            {% set openingTag = "<h" ~ titleTag %}
-            {% set closingTag = "</h" ~ titleTag ~ ">" %}
             {% set documentItem %}
                 {% if document.thumbnail %}
                     <div
                         class="ons-document-list__item-image{{ ' ons-document-list__item-image--file' if document.metadata.file }}"
                         aria-hidden="true"
                     >
-                        <a
-                            class="ons-document-list__image-link{{ ' ons-document-list__image-link--placeholder' if not document.thumbnail.smallSrc }}"
-                            href="{{ document.title.url }}"
-                            tabindex="-1"
-                        >
-                            {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
-                                <img
-                                    srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
-                                    src="{{ document.thumbnail.smallSrc }}"
-                                    alt=""
-                                    loading="lazy"
-                                />
-                            {% endif %}
-                        </a>
+                        {% if document.thumbnail.smallSrc and document.thumbnail.largeSrc %}
+                            <img
+                                class="ons-document-list__image"
+                                srcset="{{ document.thumbnail.smallSrc }} 1x, {{ document.thumbnail.largeSrc }} 2x"
+                                src="{{ document.thumbnail.smallSrc }}"
+                                alt=""
+                                loading="lazy"
+                            />
+                        {% else %}
+                            <span class="ons-document-list__image ons-document-list__image--placeholder"> </span>
+                        {% endif %}
                     </div>
                 {% endif %}
 

package/components/document-list/_macro.spec.js

@@ -232,12 +232,12 @@ describe('FOR: Macro: Document list', () => {
             });
 
             test('THEN: has expected srcset attribute', () => {
-                const srcset = $('.ons-document-list__image-link img').attr('srcset');
+                const srcset = $('.ons-document-list__image').attr('srcset');
                 expect(srcset).toBe('/example-small.png 1x, /example-large.png 2x');
             });
 
             test('THEN: has expected src attribute', () => {
-                const src = $('.ons-document-list__image-link img').attr('src');
+                const src = $('.ons-document-list__image').attr('src');
                 expect(src).toBe('/example-small.png');
             });
         });
@@ -249,7 +249,7 @@ describe('FOR: Macro: Document list', () => {
                         documents: [{ ...EXAMPLE_DOCUMENT_LIST_BASIC, thumbnail: true }],
                     }),
                 );
-                expect($('.ons-document-list__image-link').hasClass('ons-document-list__image-link--placeholder')).toBe(true);
+                expect($('.ons-document-list__image').hasClass('ons-document-list__image--placeholder')).toBe(true);
             });
         });
     });