@financial-times/n-myft-ui 25.0.1 → 26.0.0

package/.circleci/config.yml

@@ -79,6 +79,9 @@ jobs:
           command: .circleci/shared-helpers/helper-generate-build-state-artifacts
           when: always
       - *cache_npm_cache
+      - run:
+          name: Compile JSX templates
+          command: npm run build-package
       - store_artifacts:
           path: build-state
           destination: build-state

package/README.md

@@ -38,3 +38,53 @@ make demo
 ```
 
 View the demo on `localhost:5005`
+
+
+## Migration Guide
+
+### Upgrading from v25
+
+V25 introduces some major changes to n-myft-ui components. Some of the components have been moved from handlebars to jsx. 
+
+These components include:
+- csrf-token
+- follow-button
+- save-for-later
+- pin-button
+- concept-list
+- collections
+- InstantAlert
+
+A consumer of any of these components needs to render them directly as `jsx` components in a parent `jsx` component or use the `renderReactComponent` helper function provided by `@financial-times/dotcom-server-handlebars` in a consuming handlebars template/partial. 
+
+#### Example rendering in a jsx component
+```jsx
+import { SaveForLater } from '@financial-times/n-myft-ui';
+
+export default function Consumer() {
+	return (
+		<SaveForLater contentId={contentId} saveButtonWithIcon={true} flags={{myFtApiWrite:myFtApiWrite}}/>
+	)
+}
+```
+
+More examples of rendering these components can be found [here](https://github.com/Financial-Times/n-myft-ui/blob/main/demos/templates/demo.jsx) with component props passed in [here](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/demos/app.js#L54).
+
+
+#### Example rendering in a handlebars partial
+To render a jsx component in a handlebars partial, consumers need to add the `helpers` provided by `@financial-times/dotcom-server-handlebars` to the PageKitHandlebars config in `express app engine` [see example](https://github.com/Financial-Times/n-myft-ui/blob/dfbf06d10f78756871cfe8d2aeb863ce4bcca1e1/demos/app.js#L41). 
+
+```hbs
+<div>
+	<h2 class="demo-section__title">
+		Follow button
+	</h2>
+
+	{{#followButton}}
+		{{{renderReactComponent localPath="node_modules/@financial-times/n-myft-ui/components/follow-button/follow-button" flags=flags variant="standard" conceptId="0000-0000-0000-0000" name="Follow Item" directType="http://www.ft.com/ontology/product/Brand"}}}
+	{{/followButton}}
+</div>
+```
+
+More examples of rendering jsx in handlebars partials can be found [here](https://github.com/Financial-Times/n-myft-ui/blob/main/demos/templates/demo.html)
+