This document outlines the steps needed to migrate to version 73.0.0 of our Design System library from versions 72.x.x. This release includes several breaking-changes that may impact your projects. Please follow this guide to ensure a smooth transition.

This section will list all the changes that are specific to one component.

- [Table of Contents](#table-of-contents)

- [Hero](#hero)

- [Message List](#message-list)

**_Renamed utility class from ons-js-toc-container to ons-js-table-of-contents-container_**

[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3650)

- **Description of change:** The following classes have been renamed:

- `ons-js-toc-container to ons-js-table-of-contents-container`

- **Reason for change:** The `ons-js-toc-container` utility class has been updated to remove the toc acronym.

This will be a breaking change and will require the update of the old classes name with the new one:

- **Components impacted:**

Table of Contents Component

- **Migration steps:**

1. Locate all instances of the above classes in your codebase.

2. Replace the old class name with the new one.

- <details>

<summary><b>Click for example:</b></summary>

```html

OLD

<div class="ons-grid ons-js-toc-container"></div>

NEW

<div class="ons-grid ons-js-table-of-contents-container"></div>

```

</details>

### **_Hero_**

**Remove breadcrumbs parameter in Hero component**

[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3712)

- **Description of change:** The `breadcrumbs` parameter has been removed from the Hero component.

- **Reason for change:** Following a DAC accessibility issue, breadcrumbs are now positioned outside the Hero to ensure correct structure and semantics.

- **Migration steps:**

1. Locate and Remove all instances of the breadcrumbs parameter within the Hero component.

2. Render the Breadcrumbs component separately, outside of the Hero, as shown in the example below.

- <details>

<summary><b>Click for example</b></summary>

```njk

OLD

{% from "components/hero/_macro.njk" import onsHero %}

{{

onsHero({

"topic": 'Topic',

"title": 'Retail Industry',

"text": 'Sales by retailers',

"breadcrumbs": {

"ariaLabel": 'Breadcrumbs',

"itemsList": [

{

"url": '/',

"text": 'Home'

}

]

},

"variants": 'pale-blue'

})

}}

NEW

{% from "components/hero/_macro.njk" import onsHero %}

{% from "components/breadcrumbs/_macro.njk" import onsBreadcrumbs %}

{% block pageContent %}

{{

onsBreadcrumbs({

"ariaLabel": 'Breadcrumbs',

"variant": "pale-blue",

"itemsList": [

{

"url": '/',

"text": 'Home'

}

]

})

}}

<main id="main-content">

{{

onsHero({

"topic": 'Topic',

"title": 'Retail Industry',

"text": 'Sales by retailers',

"variants": 'pale-blue'

})

}}

</main>

{% endblock %}

```

</details>

### **_Message List_**

**Remove deprecated ariaLabelMsg parameter from MessageList Component**

[**Link to PR**](https://github.com/ONSdigital/design-system/pull/3726)

- **Description of change:** The deprecated `ariaLabelMsg` parameter has been removed and replaced with `bodyLabel` in the MessageList component.

- **Reason for change:** Removed deprecated parameter to ensure a single clear label for message body.

- **Migration steps:**

1. Locate all instances of `ariaLabelMsg` in the MessageList component within your codebase.

2. Replace `ariaLabelMsg` with `bodyLabel`.

- <details>

<summary><b>Click for example:</b></summary>

```njk

OLD

{{

onsMessageList({

"ariaLabel": "Message list for ONS Business Surveys",

"ariaLabelMsg": "Body",

"unreadText": "New",

"fromLabel": "From",

"dateLabel": "Sent",

"hiddenReadLabel": "Read the message",

"ariaLabelMetaData": "Message information",

"messages": [

{

"id": "message-list-example-1",

"subject": {

"url": "#0",

"text": "BRES 2016 survey response query"

},

"unread": true,

"fromText": "ONS Business Surveys Team",

"dateText": "Tue 4 Jul 2020 at 7:47",

"body": "Hi Jacky. Thanks for that information. Your figures have allowed us to create more accurate…"

},

{

"id": "message-list-example-2",

"subject":{

"url": "#0",

"text": "BRES 2015 Enquiry on data"

},

"fromText": "Jacky Turner",

"dateText": "Mon 1 Oct 2019 at 9:52",

"body": "Hi Jacky, Thank you for returning the Business Register and Employment Survey (BRES) 2016…"

}

]

})

}}

NEW

{{

onsMessageList({

"ariaLabel": "Message list for ONS Business Surveys",

"bodyLabel": "Body",

"unreadText": "New",

"fromLabel": "From",

"dateLabel": "Sent",

"hiddenReadLabel": "Read the message",

"ariaLabelMetaData": "Message information",

"messages": [

{

"id": "message-list-example-1",

"subject": {

"url": "#0",

"text": "BRES 2016 survey response query"

},

"unread": true,

"fromText": "ONS Business Surveys Team",

"dateText": "Tue 4 Jul 2020 at 7:47",

"body": "Hi Jacky. Thanks for that information. Your figures have allowed us to create more accurate…"

},

{

"id": "message-list-example-2",

"subject":{

"url": "#0",

"text": "BRES 2015 Enquiry on data"

},

"fromText": "Jacky Turner",

"dateText": "Mon 1 Oct 2019 at 9:52",

"body": "Hi Jacky, Thank you for returning the Business Register and Employment Survey (BRES) 2016…"

}

]

})

}}

```

</details>

## Contact Information

For further assistance, please reach out to our support team:

- **Email:** ons.design.system@ons.gov.uk

// When preceded by another button (for example in a group)

.ons-navigation--neutral &--dropdown {

.ons-btn__inner {

background: var(--ons-color-grey-15);

color: var(--ons-color-black);

.ons-icon {

fill: var(--ons-color-black);

}

}

&:focus {

.ons-btn__inner {

background: var(--ons-color-focus);

}

}

}

.ons-navigation--neutral &--dropdown:active &,

.ons-navigation--neutral &--dropdown.active &,

.ons-navigation--neutral &--dropdown:active:focus &,

.ons-navigation--neutral &--dropdown.active:focus & {

&__inner {

background: var(--ons-color-grey-100);

color: var(--ons-color-white);

.ons-icon {

fill: var(--ons-color-white);

}

}

}