@financial-times/n-myft-ui 23.1.3 → 25.0.0

package/.circleci/config.yml

@@ -2,19 +2,12 @@
 # template: component
 
 references:
-
-  container_config_node12: &container_config_node12
+  container_config_node: &container_config_node
     working_directory: ~/project/build
     docker:
       - image: circleci/node:12-browsers
 
-  container_config_lambda_node12: &container_config_lambda_node12
-    working_directory: ~/project/build
-    docker:
-      - image: lambci/lambda:build-nodejs12.x
-
-  workspace_root: &workspace_root
-    ~/project
+  workspace_root: &workspace_root ~/project
 
   attach_workspace: &attach_workspace
     attach_workspace:
@@ -22,31 +15,31 @@ references:
 
   npm_cache_keys: &npm_cache_keys
     keys:
-        - v3-dependency-npm-{{ checksum "package.json" }}-
-        - v3-dependency-npm-{{ checksum "package.json" }}
-        - v3-dependency-npm-
+      - v8-dependency-npm-{{ checksum "package-lock.json" }}-
+      - v8-dependency-npm-{{ checksum "package-lock.json" }}
+      - v8-dependency-npm-
 
   cache_npm_cache: &cache_npm_cache
     save_cache:
-        key: v3-dependency-npm-{{ checksum "package.json" }}-{{ epoch }}
-        paths:
+      key: v8-dependency-npm-{{ checksum "package-lock.json" }}-{{ epoch }}
+      paths:
         - ./node_modules/
 
   restore_npm_cache: &restore_npm_cache
     restore_cache:
-        <<: *npm_cache_keys
+      <<: *npm_cache_keys
 
   filters_ignore_gh_pages: &filters_ignore_gh_pages
     branches:
       ignore: gh_pages
 
-  filters_only_master: &filters_only_master
+  filters_only_main: &filters_only_main
     branches:
-      only: master
+      only: main
 
-  filters_ignore_master: &filters_ignore_master
+  filters_ignore_main: &filters_ignore_main
     branches:
-      ignore: master
+      ignore: main
 
   filters_ignore_tags: &filters_ignore_tags
     tags:
@@ -59,14 +52,18 @@ references:
     branches:
       ignore: /.*/
 
-version: 2
+version: 2.1
 
-jobs:
+orbs:
+  node: circleci/node@4.6.0
 
+jobs:
   build:
-    <<: *container_config_node12
+    <<: *container_config_node
     steps:
       - checkout
+      - node/install-npm:
+        version: "7"
       - run:
           name: Checkout next-ci-shared-helpers
           command: git clone --depth 1 git@github.com:Financial-Times/next-ci-shared-helpers.git .circleci/shared-helpers
@@ -74,9 +71,6 @@ jobs:
       - run:
           name: Install project dependencies
           command: make install
-      - run:
-          name: shared-helper / npm-install-peer-deps
-          command: .circleci/shared-helpers/helper-npm-install-peer-deps
       - run:
           name: shared-helper / npm-update
           command: .circleci/shared-helpers/helper-npm-update
@@ -85,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
@@ -94,7 +91,7 @@ jobs:
             - build
 
   test:
-    <<: *container_config_node12
+    <<: *container_config_node
     parallelism: 1
     steps:
       - *attach_workspace
@@ -111,7 +108,7 @@ jobs:
           destination: test-results
 
   publish:
-    <<: *container_config_node12
+    <<: *container_config_node
     steps:
       - *attach_workspace
       - run:
@@ -123,7 +120,7 @@ jobs:
           command: .circleci/shared-helpers/helper-npm-version-and-publish-public
 
   deploy:
-    <<: *container_config_node12
+    <<: *container_config_node
     steps:
       - *attach_workspace
       - add_ssh_keys:
@@ -149,7 +146,7 @@ workflows:
             - build
       - deploy:
           filters:
-            <<: *filters_only_master
+            <<: *filters_only_main
           requires:
             - build
   build-test-publish:
@@ -173,7 +170,7 @@ workflows:
       - schedule:
           cron: "0 0 * * *"
           filters:
-            <<: *filters_only_master
+            <<: *filters_only_main
     jobs:
       - build:
           context: next-nightly-build

package/.circleci/shared-helpers/helper-npm-install-peer-deps

@@ -11,10 +11,10 @@
 #
 # Why we pass the flags we do to `npm install`:
 #
-# --no-package-lock - While we now use package-lock.json 
-#   in our repos, skip package-lock.json in this instance 
-#   as we don't want to accidentally modify the file 
-#   for subsequent steps in the workflow, e.g cache keys 
+# --no-package-lock - While we now use package-lock.json
+#   in our repos, skip package-lock.json in this instance
+#   as we don't want to accidentally modify the file
+#   for subsequent steps in the workflow, e.g cache keys
 #   and artefact generation.
 #
 # --no-save - We don't want to modify package.json as we
@@ -34,6 +34,7 @@ if [ -e package.json ]; then
 
     npm ls --production --parseable 2>&1 >/dev/null | \
       sed -n -e 's/^npm ERR! peer dep missing: \(.*\),.*/\1/p' | \
-        xargs -I{} npm install --no-package-lock --no-save "{}"
+          xargs -I{} echo -n '"{}" ' | \
+            xargs npm install --no-package-lock --no-save
 
 fi

package/.github/settings.yml

@@ -1,7 +1,7 @@
 _extends: github-apps-config-next
 
 branches:
-  - name: master
+  - name: main
     protection:
       required_pull_request_reviews: null
       required_status_checks:

package/.scss-lint.yml

@@ -1,7 +1,6 @@
 linters:
-
   # Documentation:
-  # https://github.com/causes/scss-lint/blob/master/lib/scss_lint/linter/README.md
+  # https://github.com/causes/scss-lint/blob/HEAD/lib/scss_lint/linter/README.md
 
   # "value !important;" not "value!important ;"
   BangFormat:
@@ -262,7 +261,8 @@ linters:
     enabled: true
     identifier_list: base
     additional_identifiers: []
-    excluded_identifiers: ["user-select", "appearance", "font-smoothing", "osx-font-smoothing"]
+    excluded_identifiers:
+      ["user-select", "appearance", "font-smoothing", "osx-font-smoothing"]
     severity: warning
 
   # No units on zero values: 0 not 0px

package/Makefile

@@ -46,3 +46,4 @@ test:
 	make test-unit
 	make test-build
 	make a11y
+	jest

package/README.md

@@ -16,22 +16,76 @@ These subdirectories may contain a README. If not, please speak to the myft team
 n-myft-ui provides the CSS, JS and most templates for the myFT components on FT.com. We use semver to control rollout of the code.
 
 As of August 2017, The following apps use n-myft-ui:
-* next-front-page
-* next-stream-page
-* next-article
-* next-myft-page
-* next-tour-page
-* next-video-page
-* next-search-page
 
-When you merge to master, you should make a new release and then roll it out to the apps, plus n-topic-card which contains a reference to this so that there aren't missing dependencies.
+- next-front-page
+- next-stream-page
+- next-article
+- next-myft-page
+- next-tour-page
+- next-video-page
+- next-search-page
+
+When you merge to main, you should make a new release and then roll it out to the apps, plus n-topic-card which contains a reference to this so that there aren't missing dependencies.
 
 If you are making a major change, you will need to update the bower.json and package.json files for the above apps. For minor and patch updates, you can rebuild without cache from CircleCI.
 
 ## Running locally
+
 ```
 make install
 make build
 make demo
 ```
+
 View the demo on `localhost:5005`
+
+
+## Migration Guide
+
+### Upgrading from v25
+
+V24 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
+
+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)
+
+
+NB: This branch is the development branch for v25 and all bug fixes for breaking changes related to `jsx` go here.