@financial-times/n-myft-ui 29.0.4 → 29.0.6

package/components/collections/collections.html

@@ -74,7 +74,7 @@
 							,
 						{{~/unless~}}
 					{{~/concepts~}}"
-				aria-label="Add all topics in the {{title}} collection to my F T"
+				aria-label="Add all to myFT: {{title}} collection"
 				data-alternate-label="Remove all topics in the {{title}} collection from my F T"
 				data-alternate-text="Added"
 				title="Add all topics in the {{title}} collection to my F T">

package/components/follow-button/follow-button.html

@@ -26,7 +26,7 @@
 		></div>
 		<button
 			{{#ifAll setFollowButtonStateToSelected @root.cacheablePersonalisedUrl}}
-				aria-label="Remove {{name}} from myFT"
+				aria-label="Added {{name}} to myFT: click to remove"
 				title="Remove {{name}} from myFT"
 				data-alternate-label="Add {{name}} to myFT"
 				aria-pressed="true"
@@ -41,7 +41,7 @@
 				{{/if}}
 			{{else}}
 				aria-pressed="false"
-				aria-label="Add {{name}} to myFT"
+				aria-label="Add to myFT: {{name}}"
 				title="Add {{name}} to myFT"
 				data-alternate-label="Remove {{name}} from myFT"
 				{{#if alternateText}}

package/demos/app.js

@@ -42,6 +42,7 @@ app.engine('.html', new PageKitHandlebars({
 app.use('/public', nExpress.static(path.join(__dirname, '../public'), { redirect: false }));
 
 app.get('/', (req, res) => {
+	res.locals.cacheablePersonalisedUrl = true;
 	res.render('demo', Object.assign({
 		title: 'n-myft-ui demo',
 		flags: {

package/demos/templates/demo.html

@@ -26,22 +26,20 @@
 			class="demo-section">
 			<div class="o-grid-row">
 				<div data-o-grid-colspan="12">
-					<h2
-						class="demo-section__title">
-						Follow button
-					</h2>
-
 					{{#followButton}}
+						<h2
+							class="demo-section__title">
+							Follow button
+						</h2>
 						{{> n-myft-ui/components/follow-button/follow-button}}
 					{{/followButton}}
 
-					<h2
-						class="demo-section__title">
-						x-dash follow button
-					</h2>
-
 					{{#followButton}}
-						{{> n-myft-ui/components/follow-button/follow-button buttonText=name}}
+						<h2
+							class="demo-section__title">
+							Unfollow button
+						</h2>
+						{{> n-myft-ui/components/follow-button/follow-button setFollowButtonStateToSelected=true }}
 					{{/followButton}}
 
 					{{#saveButton}}
@@ -86,7 +84,6 @@
 						{{> n-myft-ui/components/instant-alert/instant-alert }}
 					{{/instantAlert}}
 
-
 				</div>
 			</div>
 		</section>

package/myft/main.scss

@@ -24,17 +24,6 @@ $spacing-unit: 20px;
 	display: inline-block;
 }
 
-// article lists modal
-@include oForms($opts: (
-	'elements': ('text', 'checkbox', 'toggle')
-));
-
-@include oButtons($opts: (
-	'sizes': ('big'),
-	'types': ('primary', 'secondary'),
-	'themes': ('inverse')
-));
-
 // experimental flash animation on header icon
 @include myftHeaderIconFlash;
 
@@ -205,6 +194,16 @@ $spacing-unit: 20px;
 }
 
 .myft-ui-create-list-variant {
+	@include oButtons($opts: (
+		'sizes': ('big'),
+		'types': ('primary', 'secondary'),
+		'themes': ('inverse')
+	));
+
+	@include oForms($opts: (
+		'elements': ('text', 'checkbox', 'toggle')
+	));
+
 	border-radius: 10px;
 	border: 1px solid oColorsByName('black-5');
 	background: oColorsByName('white-80');

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@financial-times/n-myft-ui",
-  "version": "29.0.4",
+  "version": "29.0.6",
   "description": "Client side component for interaction with myft",
   "main": "server.js",
   "scripts": {