Travel updates
About
What does it do?
- The travel updates widget gives users an overview of any disruptions to transport across the Transport for West Midlands
- It uses the small Disruption indicator component to show how severe the disruption is for a transport mode. The disruption service levels are severe, major, minor and good
- Users can personalise the travel updates widget by adding a specific transport route. This is so users can access disruptions relevant to them straight from the homepage
Shareable Travel Updates Widget
How to use it?
- Place the following snippet in your source code (where you want the widget to appear on the page) and you will be able to use TfWM travel widget on your website.
<div data-widget-host="tfwm-travel-updates-widget"></div>
<script src="//unpkg.com/tfwm-travel-updates-widget@1.2.0/build/static/js/build.min.js"></script>
You will need to inform us that you are going to use travel widget. This is so we can give access and monitor where the widget is being used.
It is recommended that you use the latest release of Shareable Travel Updates Widget in your project. Although, visit Shareable Travel Updates Widget package page for previous releases.
You also can check Shareable Travel Updates Widget repository and report a bug or request a feature, if needed.
TfWM design system CSS must be included in your page.
When to use it?
- The default travel updates widget should be used on the homepage or a page where you offer travel advice
How it works?
The widget shows all current disruptions to bus, train and tram services that have been added to the Disruptions API. It also shows the number of current disruptions on all roads in the West Midlands region.
Users can view disruption information through the disruptions service by clicking on the disruption link or the ‘View all updates’ button.
When more than two types of disruptions occur for a transport mode, the disruption indicator will only show the highest level of disruption. There will still be individual disruption links for each disruption severity.
Default view
When to use it?
- The default travel updates widget should be used on the homepage
How it works?
- The user can view disruption information through the disruptions service by clicking on the small disruption indicator or the disruption link
- The user can add a specific bus, train or tram route to the widget by clicking on the ‘Add services’ button. This will take the user to the disruptions service, where they can search for a transport route and favourite it.
- When more than two types of disruptions occur for a transport mode, the disruption indicator will only show the highest level of disruption. There will still be individual disruption links for each disruption severity.
Travel updates
Train
Good service
Tram
Roads
HTML markup
<div class="wmnds-content-card wmnds-content-card--travel-updates">
<div class="wmnds-p-sm wmnds-col-1">
<h2 class="wmnds-content-card__title">Travel updates</h2>
<div class="wmnds-travel-update">
<div class="wmnds-travel-update__disruption">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--severe wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
</svg>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
</svg>
</div>
<h3 class="wmnds-m-none">Bus</h3>
<div class="wmnds-travel-update__disruption-text">
<div>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
1 severe disruption
</a>
</div>
<div>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
2 major disruptions
</a>
</div>
<div>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
8 minor disruptions
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="wmnds-travel-update">
<div class="wmnds-travel-update__disruption">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
</svg>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
</div>
<h3 class="wmnds-m-none">Train</h3>
<div class="wmnds-travel-update__disruption-text">
<strong>Good service</strong>
</div>
</div>
</div>
<hr>
<div class="wmnds-travel-update">
<div class="wmnds-travel-update__disruption">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
</svg>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
</svg>
</div>
<h3 class="wmnds-m-none">Tram</h3>
<div class="wmnds-travel-update__disruption-text">
<div>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
Major disruption
</a>
</div>
</div>
</div>
</div>
<hr>
<div class="wmnds-travel-update">
<div class="wmnds-travel-update__disruption">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-roads" href="#wmnds-modes-isolated-roads"></use>
</svg>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
</svg>
</div>
<h3 class="wmnds-m-none">Roads</h3>
<div class="wmnds-travel-update__disruption-text">
<div>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
3 minor disruptions
</a>
</div>
</div>
</div>
</div>
<hr>
<!-- Content card actions -->
<div class="wmnds-grid wmnds-grid--spacing-sm-2-lg wmnds-p-t-md">
<div class="wmnds-col-1 wmnds-col-sm-1-2">
<button class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-m-b-md" type="button">
Add services
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
</svg>
</button>
</div>
<div class="wmnds-col-1 wmnds-col-sm-1-2">
<button class="wmnds-btn wmnds-btn--block" type="button">
View all updates
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
Personalised view
When to use it?
- If a user has favourited a transport route through the disruptions service
How it works?
- By favouriting a service through the disruptions service, users can see if any of their services are disrupted within the widget straight from the homepage
- Users can still view all disruptions across the network by clicking on the ‘View all updates’ button
- On mobile devices, the route name and disruption link are hidden behind a dropdown by default. A user can expand each individual transport mode or click on the small disruption indicator to view the disruption in detail.
HTML markup
<div class="wmnds-content-card wmnds-content-card--travel-updates">
<div class="wmnds-p-sm wmnds-col-1">
<h2 class="wmnds-content-card__title">My travel updates</h2>
<div class="wmnds-travel-update wmnds-travel-update--personal">
<div class="wmnds-travel-update__disruption-title">
<h3 class="wmnds-m-none">Bus</h3>
<button class="wmnds-travel-update__disruption-detail-toggle" data-show-details="false">
<svg>
<title>Toggle details</title>
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</button>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">16</span>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
</svg>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Hamstead - Birmingham via Hockley</strong>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
Minor disruption
</a>
</div>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">S16</span>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Solihull - Yardley via Lyndon</strong>
<strong>Good service</strong>
</div>
</div>
</div>
<hr>
<div class="wmnds-travel-update wmnds-travel-update--personal">
<div class="wmnds-travel-update__disruption-title">
<h3 class="wmnds-m-none">Train</h3>
<button class="wmnds-travel-update__disruption-detail-toggle" data-show-details="false">
<svg>
<title>Toggle details</title>
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</button>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--warning wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">Cross City Line</span>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-warning-circle" href="#wmnds-general-warning-circle"></use>
</svg>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
Minor disruption
</a>
</div>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--success wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">Hereford via Worcester</span>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-success" href="#wmnds-general-success"></use>
</svg>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Good service</strong>
</div>
</div>
</div>
<hr>
<div class="wmnds-travel-update wmnds-travel-update--personal">
<div class="wmnds-travel-update__disruption-title">
<h3 class="wmnds-m-none">Tram</h3>
<button class="wmnds-travel-update__disruption-detail-toggle" data-show-details="false">
<svg>
<title>Toggle details</title>
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</button>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--error wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">mm1</span>
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--right">
<use xlink:href="#wmnds-general-warning-triangle" href="#wmnds-general-warning-triangle"></use>
</svg>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Grand Central - St Chad’s</strong>
<a href="//disruptions.wmnetwork.co.uk/" title="link title" target="_blank" class="wmnds-link" rel="noopener noreferrer">
Major disruption
</a>
</div>
</div>
</div>
<hr>
<!-- Content card actions -->
<div class="wmnds-grid wmnds-grid--spacing-sm-2-lg wmnds-p-t-md">
<div class="wmnds-col-1 wmnds-col-sm-1-2">
<button class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-m-b-md" type="button">
Edit your services
</button>
</div>
<div class="wmnds-col-1 wmnds-col-sm-1-2">
<button class="wmnds-btn wmnds-btn--block" type="button">
View all updates
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-chevron-right" href="#wmnds-general-chevron-right"></use>
</svg>
</button>
</div>
</div>
</div>
</div>
Edit view
When to use it?
- The edit view will be shown when a user clicks on the ‘Edit your services’ button if they have personalised the travel updates widget
How it works?
- Users can remove routes they have added through the disruptions service by clicking on the bin icon.
- Users can add more routes to their widget by clicking on the ‘Add services’ button. This will take the user to the disruptions service, where they can search for another transport route and favourite it.
My travel updates
Bus
Hamstead - Birmingham via Hockley
Solihull - Yardley via Lyndon
Train
Tram
Grand Central - St Chad’s
HTML markup
<div class="wmnds-content-card wmnds-content-card--travel-updates">
<div class="wmnds-p-sm wmnds-col-1">
<h2 class="wmnds-content-card__title">My travel updates</h2>
<div class="wmnds-travel-update wmnds-travel-update--personal wmnds-travel-update--edit">
<h3 class="wmnds-m-b-md">Bus</h3>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">16</span>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Hamstead - Birmingham via Hockley</strong>
</div>
<button class="wmnds-travel-update__disruption-delete">
<svg>
<title>Delete service</title>
<use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
</svg>
</button>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-bus" href="#wmnds-modes-isolated-bus"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">S16</span>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Solihull - Yardley via Lyndon</strong>
</div>
<button class="wmnds-travel-update__disruption-delete">
<svg>
<title>Delete service</title>
<use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
</svg>
</button>
</div>
</div>
<hr>
<div class="wmnds-travel-update wmnds-travel-update--personal wmnds-travel-update--edit">
<h3 class="wmnds-m-b-md">Train</h3>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">Cross City Line</span>
</div>
</button>
<button class="wmnds-travel-update__disruption-delete">
<svg>
<title>Delete service</title>
<use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
</svg>
</button>
</div>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow wmnds-disruption-indicator-medium--capitalize">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-rail" href="#wmnds-modes-isolated-rail"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">Hereford via Worcester</span>
</div>
</button>
<button class="wmnds-travel-update__disruption-delete">
<svg>
<title>Delete service</title>
<use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
</svg>
</button>
</div>
</div>
<hr>
<div class="wmnds-travel-update wmnds-travel-update--personal wmnds-travel-update--edit">
<h3 class="wmnds-m-b-md">Tram</h3>
<div class="wmnds-travel-update__disruption">
<button class="wmnds-travel-update__disruption-indicator-btn" aria-expanded="false">
<div class="wmnds-disruption-indicator-medium wmnds-disruption-indicator-medium--with-icon wmnds-disruption-indicator-medium--narrow">
<svg class="wmnds-disruption-indicator-medium__icon wmnds-disruption-indicator-medium__icon--left">
<use xlink:href="#wmnds-modes-isolated-metro" href="#wmnds-modes-isolated-metro"></use>
</svg>
<span class="wmnds-disruption-indicator-medium__service">mm1</span>
</div>
</button>
<div class="wmnds-travel-update__disruption-text">
<strong>Grand Central - St Chad’s</strong>
</div>
<button class="wmnds-travel-update__disruption-delete">
<svg>
<title>Delete service</title>
<use xlink:href="#wmnds-general-trash" href="#wmnds-general-trash"></use>
</svg>
</button>
</div>
</div>
<hr>
<!-- Content card actions -->
<div class="wmnds-grid wmnds-grid--spacing-sm-2-lg wmnds-p-t-md">
<div class="wmnds-col-1 wmnds-col-sm-1-2">
<button class="wmnds-btn wmnds-btn--mode wmnds-btn--block wmnds-m-b-md" type="button">
Add a new service
<svg class="wmnds-btn__icon wmnds-btn__icon--right ">
<use xlink:href="#wmnds-general-expand" href="#wmnds-general-expand"></use>
</svg>
</button>
</div>
<div class="wmnds-col-1 wmnds-col-sm-1-2">
<button class="wmnds-btn wmnds-btn--block" type="button">
Save changes
</button>
</div>
</div>
</div>
</div>