@financial-times/n-myft-ui 24.0.2 → 25.0.0-beta.1

package/demos/templates/demo.html

@@ -48,35 +48,35 @@
 						<h2 class="demo-section__title">
 							Save button
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId }}}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Unsave button
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId isSaved=true }}}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Save button with icon
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later saveButtonWithIcon=true }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true }}}
 					{{/saveButton}}
 
 					{{#saveButton}}
 						<h2 class="demo-section__title">
 							Unsave button with icon
 						</h2>
-						{{> n-myft-ui/components/save-for-later/save-for-later isSaved=true saveButtonWithIcon=true }}
+						{{{renderReactComponent localPath="components/save-for-later/save-for-later" flags=@root.flags title=title contentId=contentId saveButtonWithIcon=true isSaved=true }}}
 					{{/saveButton}}
 
 					<h2 class="demo-section__title">
 						Pin button
 					</h2>
 					{{#each pinButton}}
-						{{> n-myft-ui/components/pin-button/pin-button }}
+						{{{renderReactComponent localPath="components/pin-button/pin-button" flags=@root.flags title=title id=id name=name directType=directType showPrioritiseButton=showPrioritiseButton }}}
 					{{/each}}
 
 					{{#instantAlert}}
@@ -449,7 +449,7 @@
 
 				{{#collections}}
 					<div data-o-grid-colspan="3">
-						{{> n-myft-ui/components/collections/collections }}
+						{{{renderReactComponent localPath="components/collections/collections" flags=@root.flags concepts=this.concepts title=this.title liteStyle=this.liteStyle collectionName=this.collectionName trackable=this.trackable}}}
 					</div>
 				{{/collections}}
 			</div>
@@ -471,7 +471,7 @@
 
 				{{#each conceptList}}
 					<div data-o-grid-colspan="3">
-						{{> n-myft-ui/components/concept-list/concept-list }}
+						{{{renderReactComponent localPath="components/concept-list/concept-list" flags=@root.flags concepts=this.concepts contentType=this.contentType conceptListTitle=this.conceptListTitle trackable=this.trackable}}}
 					</div>
 				{{/each}}
 			</div>

package/demos/templates/demo.jsx

@@ -1,5 +1,9 @@
 import React from 'react';
 import FollowButton from '../../components/follow-button/follow-button';
+import ConceptList from '../../components/concept-list/concept-list';
+import Collections from '../../components/collections/collections';
+import { SaveForLater } from '../../components';
+import { PinButton } from '../../components';
 
 export default function Demo (props) {
 
@@ -7,9 +11,13 @@ export default function Demo (props) {
 		title,
 		flags,
 		followButton,
+		conceptList,
+		collections,
+		saveButton,
+		pinButton
 	} = props;
 
-	const followButtonProps = {...followButton, flags};
+	const followButtonProps = { ...followButton, flags };
 
 	return (
 		<div className="o-grid-container o-grid-container--snappy demo-container">
@@ -25,9 +33,93 @@ export default function Demo (props) {
 							Follow button
 						</h2>
 						<FollowButton {...followButtonProps} />
+
+
+						<h2
+							className="demo-section__title">
+							x-dash follow button
+						</h2>
+
+						<FollowButton {...followButtonProps} buttonText={followButton.name} />
+
+
+						<h2 className="demo-section__title">
+							Save button
+						</h2>
+						<SaveForLater flags={flags} {...saveButton} />
+
+						<h2 className="demo-section__title">
+							Unsave button
+						</h2>
+						<SaveForLater flags={flags} {...saveButton} isSaved={true} />
+
+						<h2 className="demo-section__title">
+							Unsave button with icon
+						</h2>
+						<SaveForLater flags={flags} {...saveButton} saveButtonWithIcon={true} />
+
+						<h2 className="demo-section__title">
+							Save button with icon
+						</h2>
+						<SaveForLater flags={flags} {...saveButton} isSaved={true} saveButtonWithIcon={true} />
+
+						<h2 className="demo-section__title">
+						Pin button
+						</h2>
+
+						{pinButton.map((item, index) => <PinButton key={index} {...item}/>)}
+
+					</div>
+				</div>
+			</section>
+
+			<section
+				id="topic-list"
+				className="demo-section">
+				<div className="o-grid-row">
+					<div data-o-grid-colspan="12">
+						<h2 className="demo-section__title">
+							Topic list
+						</h2>
+
+						<p className="demo-section__description">
+							A list of topics to follow
+						</p>
+					</div>
+
+					{
+						conceptList && conceptList.map((list, index) =>
+							<div key={index} data-o-grid-colspan="3">
+								<ConceptList {...list} flags={flags} />
+							</div>)
+					}
+
+				</div>
+			</section>
+
+			<section
+				id="collections"
+				className="demo-section">
+				<div className="o-grid-row">
+					<div data-o-grid-colspan="12">
+						<h2 className="demo-section__title">
+							Collections
+						</h2>
+
+						<p className="demo-section__description">
+							Curated collections of topics to follow.
+						</p>
 					</div>
+
+					{collections.map((collection, index) => (
+						<div key={index} data-o-grid-colspan="3">
+							<Collections {...collection} flags={flags} />
+						</div>
+					))}
+
 				</div>
 			</section>
+
 		</div>
 	)
 }