Breaking: Convert indicator to jsx, add outer container (fixes 230)

[oliverfoster]

fixes #230

New

• Added .pagelevelprogress__indicator-outer as a style neutral container
• Used css variable --adapt-pagelevelprogress-percentage on each container to allow use in other styling

Breaking

• Switch from hbs to jsx templates

[cahirodoherty-learningpool]

👀

[oliverfoster]

js-indicator-aria-label was there so that the view could use jquery to update the dom after it had been initially rendered by handlebars.

Instead it now updates a css variable on the outer and then uses that variable in the stylesheet to update the width. It means that it's easier for any other template / styling to repurpose the css variable, say if you wanted to do a column chart instead of a bar chart. Rather than the view targeting the bar element directly, css cascades the value through the descendants and it can be picked up by any descendant rule.

adapt-contrib-pageLevelProgress/js/PageLevelProgressIndicatorView.js

Lines 41 to 48 in 0f37cef

	setPercentageComplete() {
	const percentage = this.calculatePercentage();
	this.model.set('percentageComplete', percentage);
	this.$el.css({
	'--adapt-pagelevelprogress-percentage': percentage + '%'
	});
	return percentage;
	}

adapt-contrib-pageLevelProgress/less/pageLevelProgressIndicator.less

Lines 23 to 29 in 0f37cef

	&__indicator-bar {
	display: block;
	height: inherit;
	min-width: 15%;
	background-color: @black;
	width: var(--adapt-pagelevelprogress-percentage);
	}

It can be done like this, or I can use the value in the template and set the style width value on the element.

[joe-allen-89]

Looking good, one change and one query.

[joe-allen-89]

👍 All working as expected.

[guywillis]

👀

[kirsty-hames]

Works as expected thanks 👍

[github-actions]

🎉 This PR is included in version 8.0.0 🎉

The release is available on GitHub release

Your semantic-release bot 📦🚀