ONSdigital / design-system

ONS Design System
https://service-manual.ons.gov.uk/design-system
MIT License
31 stars 20 forks source link

[Bug]: Section Navigation #3270

Closed alessioventuriniAND closed 2 months ago

alessioventuriniAND commented 2 months ago

What happened?

On the last design system release a bug was introduced in the section navigation component. When the section navigation is used without sections and with just items and a title this happens : Screenshot 2024-07-18 at 09 09 46

What was the expected outcome?

Screenshot 2024-07-18 at 09 10 30

How is this problem impacting your service?

We can't release the service manual until this bug is fixed.

What list of steps can be followed to reproduce the bug or issue?

{{
    onsSectionNavigation({
        "variants": "vertical",
        "id": "section-menu",
        "title": "testing",
        "currentPath": "#section-6",
        "itemsList": [
            {
                "title": "Section 1",
                "url": "#section-1",
                "anchors": [
                    {
                        "title": "Sub section 1",
                        "url": "#sub-section-1"
                    },
                    {
                        "title": "Sub section 2",
                        "url": "#sub-section-2"
                    },
                    {
                        "title": "Sub section 3",
                        "url": "#sub-section-3"
                    }
                ]
            }
        ]

    })
}}

Example

To fix this problem all that we need to do is to add | safe in the below code on line 59 of the section navigation macro :

 {% if params.title %}
                {{ openingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }}
                class="ons-u-fs-r--b ons-u-mb-s">{{ params.title }}{{ closingHeadingTag | replace(headingLevel, sectionTitleHeadingLevel | string) | safe }} <-- here
            {% endif %}

What version of the ONS Design System are you using?

70.0.8

What devices are you seeing the problem on?

Desktop, Mobile, Tablet

Device details

No response

What operating systems are you seeing the problem on?

No response

Operating system details

No response

What browsers are you seeing the problem on?

Firefox, Chrome, Safari, Microsoft Edge, Microsoft Internet Explorer

Browser details

No response