Code changes required to adopt releases between v1.0.4 and v2.1.0

An additional class is now required on all .m-form-row in order to adopt the light form element styling.

<div class="m-form-row [ Modifier ]">
	...
</div>

Changes to:

<div class="m-form-row m-form-row--light [ Modifier ]">
	...
</div>

Form row

Mark-up structure of validated and errored form rows has been altered in order to match new styling. The messages must now appear before the form inputs rather than after. This changes effects all form components that are wrapped in a form row, including:

• Checkbox and confirmation checkbox
• Date
• Dropdown
• Form row
• Form row help
• Plus/minus number textbox
• Segmented controls (previously known as switches)
• Textarea
• Textbox

<div class="m-form-row is-valid">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" />
		<p class="m-form-row__validation-message">...</p>
	</div>
</div><div class="m-form-row is-error">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" />
		<p class="m-form-row__error-message">...</p>
	</div>
</div>

Changes to:

<div class="m-form-row is-valid">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__validation-message">...</p>
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" />
	</div>
</div><div class="m-form-row is-error">
	<label class="a-label" for="...">...</label>
	<div class="m-form-row__content">
		<p class="m-form-row__error-message">...</p>
		<input type="..." id="..." name="..." class="a-textbox [ Modifier ]" />
	</div>
</div>

Progress bar

Mark-up structure of validated and errored form rows has been altered in order to match new styling. The messages must now appear before the form inputs rather than after. This changes effects all form components that are wrapped in a form row. Please see the progress bar documentation page for further details and examples of usage.

<div class="a-progress-bar">
	<p class="a-progress-bar__step">...<strong>Step ... of ...</strong><p>
	<div class="a-progress-bar__line a-progress-bar__line--[ Modifier ]"><div></div></div>
</div>

Changes to:

<div class="a-progress-bar a-progress-bar--[ Modifier ]-steps a-progress-bar--[ Modifier ]">
	<p class="a-progress-bar__step">...<strong>Step ... of ...</strong></p>
	<div class="a-progress-bar__ui"><div></div></div>
	<div class="a-progress-bar__line"><div></div></div>
</div>

Switches to segmented controls

The data module name for switches was m-radio-switches but has been renamed to m-radio-segmented to match the new taxonomic name. Please see the segmented controls documentation page for further details and examples of usage.

Form row help

While no specific code changes are required, please ensure that the first element in the .m-form-row__help div is an unstyled <p> with no markup tags within it (these may be cropped by the truncation script). Please see the form row help documentation page for further details and examples of usage.

If the help text needs to be localized please update your locale settings.

formHelp : {
	text : 'Help'
}

Changes to:

formHelp : {
	text : 'Help',
	showMore : 'Show more',
	showLess : 'Show less'
}

Modal windows

Required class pod has been removed.

<!-- Promo -->
<div id="..." class="pod modal__content-container modal__content-container--promo">
	...
</div><!-- Promo with hero -->
<div id="..." class="pod modal__content-container modal__content-container--promo modal__content-container--hero-promo" data-modal-hero="[URL to hero image]">
	...
</div>

Changes to:

<!-- Promo -->
<div id="..." class="modal__content-container modal__content-container--promo">
	...
</div><!-- Promo with hero -->
<div id="..." class="modal__content-container modal__content-container--promo modal__content-container--hero-promo" data-modal-hero="[ URL to hero image ]">
	...
</div>

Download cards

Mark-up was changed in the download card group to ensure consistency throughout the layout of the download cards.

<div class="l-columns l-columns--2-large [ Modifiers ]">
	<div class="l-columns__column">
		<h2>Downloads</h2>
		<p>Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.</p>
	</div>
</div>
<div class="l-columns l-columns--2-large [ Modifiers ]">
	<a class="l-columns__column m-card m-card--download [ Modifiers ]" href="...">
		<div class="m-card-content">
			<div class="m-card-content__inner m-card-flex">
				<img src="... alt="..." />
				<div class="m-card-flex__inner">
					<p class="m-card-flex__inner-top m-card-tagline">...</p>
					<h2 class="m-card-flex__inner-top heading heading--2 heading--heavy">...</h2>
				</div>
			</div>
		</div>
	</a>
	...
	<div class="l-columns__column">
		<a href="..." class="btn btn--primary">...</a>
	</div>
</div>

Changes to:

<a class="l-columns__column m-card m-card--download [ Modifiers ]" href="...">
	<div class="m-card-content">
		<div class="m-card-content__inner m-card-content__inner--top">
		<p class="m-card-tagline">...</p>
		<h2 class="heading heading--2 heading--heavy">...</h2>
		</div>
		<div class="m-card-content__inner m-card-content__inner--bottom">
			<p class="m-card-tagline">...</p>
		</div>
	</div>
</a>
...
<div class="l-columns__column m-card--download">
	<button class="btn btn--transparent">...</button>
</div>

An issue with IE9 and below was discovered where the browsers were not processing all styles. To fix this the stylesheet have had to be split into two files.

<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/postcss.css" rel="stylesheet" />
<!-- [ Insert custom css for all browsers apart from IE8 here ]-->
<!--<![endif]-->
<!--[if IE 9]>
	<link media="all" href="[ CDN Folder Path ]/css/ie9.css" rel="stylesheet" />
	<!-- [ Insert custom IE9 fixes here ]-->
<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/ie8-below.css" rel="stylesheet" />
	<!-- [ Insert custom IE8 styles and fixes here ]-->
<![endif]--><link media="print" href="[ CDN Folder Path ]/css/print.css" rel="stylesheet" />
<!-- [ Insert custom print styles here ]-->

Changes to:

<link media="all" href="[ CDN Folder Path ]/css/vendor/normalize/normalize.css" rel="stylesheet" />
<!--[if !IE | gt IE 8]><!-->
<link media="all" href="[ CDN Folder Path ]/css/postcss-split1.css" rel="stylesheet" />
<link media="all" href="[ CDN Folder Path ]/css/postcss-split.css" rel="stylesheet" />
<!-- [ Insert custom css for all browsers apart from IE8 here ]-->
<!--<![endif]-->
<!--[if IE 9]>
	<link media="all" href="[ CDN Folder Path ]/css/ie9.css" rel="stylesheet" />
	<!-- [ Insert custom IE9 fixes here ]-->
<![endif]-->
<!--[if lte IE 8]>
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split1.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/postcss.unmq-split.css" rel="stylesheet" />
	<link media="all" href="[ CDN Folder Path ]/css/ie8-below.css" rel="stylesheet" />
	<!-- [ Insert custom IE8 styles and fixes here ]-->
<![endif]--><link media="print" href="[ CDN Folder Path ]/css/print.css" rel="stylesheet" />
<!-- [ Insert custom print styles here ]-->

Show/hide

No markup changes required. This was a JavaScript only change to make the show/hide act as an accordion at mobile screen sizes.

FAQ list

<dl class="definition-list faq-list" data-module="faq-list">
	<dt class="faq-list__question">...</dt>
	<dd class="faq-list__answer">...</dd>
	...
</dl>

Changes to the following to allow for the back link to be more easily customised:

<p class="faq-list-back-link" aria-hidden="true"><a href="#" class="link-icon link-icon--back">...</a></p>
<dl class="definition-list faq-list" data-module="faq-list">
	<dt class="faq-list__question">...</dt>
	<dd class="faq-list__answer">...</dd>
	...
</dl>

Modal

Addition of accent class to correctly colour elements on the dark background colour.

<!-- Promo -->
<div id="..." class="pod modal__content-container modal__content-container--promo">
	...
</div><!-- Promo with hero -->
<div id="..." class="pod modal__content-container modal__content-container--promo modal__content-container--hero-promo" data-modal-hero="[URL to hero image]">
	...
</div>

Changes to:

<!-- Promo -->
<div id="..." class="pod t-accent-dark modal__content-container modal__content-container--promo">
	...
</div><!-- Promo with hero -->
<div id="..." class="pod t-accent-dark modal__content-container modal__content-container--promo modal__content-container--hero-promo" data-modal-hero="[URL to hero image]">
	...
</div>

Footer

Addition of accent class to correctly colour elements on the dark background colour and also the data module attribute to push the footer to the bottom of the browser window if the page is very short.

The addition of the data-module attribute adds the functionailty to push the footer to the bottom of the browser window if the page is shorter than the browser window height. Please note that this will only work if the central content has been correctly wrapped in <div id="main" role="main"> and must not include the contextual help bar.

<footer class="footer" role="contentinfo">
	...
</footer>

Changes to:

<footer class="footer t-accent-dark" role="contentinfo" data-module="footer">
	...
</footer>

Sections

All content within #main must be wrapped inside a div with class section to ensure the correct spacing is maintained.

<div id="main" role="main">
	<div class="l-section">
		...
	</div>
</div>

Multiple sections can be applied to a page to create striped/banded layouts such as on the loyalty page example.

Sections must always wrap l-content-container

Pods and promo card

To ensure that the correct font colours, icons etc are used if the pod/card is placed on a dark accent colour area ensure that the light accent colour class is applied eg.

<div class="pod t-accent-light [ Modifier ]">
	...
</div>