fix(PPDSC-2117): resolve conflicts

.circleci/config.yml

@@ -860,6 +860,55 @@ jobs:
       - slack/status:
           <<: *slack_status
 
+  test_newskit_in_nextjs_app:
+    executor: cypress
+    steps:
+      - checkout
+      - attach_workspace:
+          at: ~/project
+      - run:
+          name: Install yalc and create-next-app
+          command: | 
+            yarn global add yalc && yarn add create-next-app@latest 
+      - run:
+          name: Yalc publish and run create-nextjs-app
+          command: | 
+            cd dist
+            yalc publish
+            cd ..
+            npx create-next-app@latest newskit-integration-test
+      - run: 
+          name: Prepare the NextJs app
+          command: |
+            echo "Adding nedded files into the NextJs app"
+
+            cp ./scripts/templates-integration-test/index.txt ./newskit-integration-test/pages/index.js
+            cp ./scripts/templates-integration-test/cypress.json ./newskit-integration-test/
+            mkdir -p ./newskit-integration-test/cypress/integration
+            cp ./scripts/templates-integration-test/theme-checker.spec.js ./newskit-integration-test/cypress/integration
+
+        
+            echo "Installing needed packages into the NextJS app"
+
+            cd newskit-integration-test
+            yalc add newskit
+            yarn add start-server-and-test
+            # Temp downgrading React. Needed for avoiding Hydration error with React v18 https://github.com/vercel/next.js/discussions/35773
+            yarn add [email protected]
+            yarn add [email protected]
+            yarn add -D [email protected];
+      - run:
+          name: Serve and test app with Cypress
+          command: |
+            cd newskit-integration-test
+            yarn build
+            yarn start-test start 3000 'yarn cypress run'
+      - slack/status:
+          <<: *slack_status
+
+
+
+
 # ========== FILTERS START    ==========
 
 only_on_trigger_release_tag: &only_on_trigger_release_tag
@@ -885,9 +934,9 @@ workflows:
   pull_request:
     when:
       matches:
-          # Supporting Pr branches starting with feat/, docs/, fix/, chore/, style/, refactor/, perf/, test/, etc.
-          pattern: '^build\/.*|chore\/.*|ci\/.*|docs\/.*|feat\/.*|fix\/.*|improvement\/.*|perf\/.*|refactor\/.*|revert\/.*|style\/.*|test\/.*|^dependabot\/.*'
-          value: << pipeline.git.branch >>
+        # Supporting Pr branches starting with feat/, docs/, fix/, chore/, style/, refactor/, perf/, test/, etc.
+        pattern: '^build\/.*|chore\/.*|ci\/.*|docs\/.*|feat\/.*|fix\/.*|improvement\/.*|perf\/.*|refactor\/.*|revert\/.*|style\/.*|test\/.*|^dependabot\/.*'
+        value: << pipeline.git.branch >>
     jobs:
       - install_deps
       - install_cypress
@@ -912,6 +961,9 @@ workflows:
       - test_unit_docs:
           requires:
             - build_icons
+      - test_newskit_in_nextjs_app:
+          requires: 
+            - build_components
       - test_e2e_comps:
           context: ncu-product-platforms-context
           requires:
@@ -949,7 +1001,7 @@ workflows:
       - approve_publish_npm_pr:
           type: approval
           requires:
-            - build_components
+            - test_newskit_in_nextjs_app
             - lint
             - test_unit_comps
             - test_unit_docs
@@ -1086,12 +1138,15 @@ workflows:
           requires:
             - build_docs_dev
             - install_cypress
+      - test_newskit_in_nextjs_app:
+          requires: 
+            - build_components
 
       # Jobs for deploying unstable NewsKit version
       - approve_publish_npm_dev:
           type: approval
           requires:
-            - build_components
+            - test_newskit_in_nextjs_app
             - lint
             - test_unit_comps
             - test_unit_docs
@@ -1270,6 +1325,10 @@ workflows:
             - test_unit_docs
             - test_e2e_comps
             - test_e2e_docs_prod
+      - test_newskit_in_nextjs_app:
+          <<: *only_on_version_tag
+          requires: 
+            - build_components
 
       - publish_npm:
           <<: *only_on_version_tag
@@ -1280,7 +1339,7 @@ workflows:
             - test_unit_docs
             - test_e2e_comps
             - test_e2e_docs_prod
-            - build_components
+            - test_newskit_in_nextjs_app
 
       # Deploying newskit.co.uk and storybook to Staging then to Prod environment.
       - eks_flux_deploy:

Makefile

@@ -15,6 +15,7 @@ BASE_URI = ${SITE_BASE_URL}${BASE_PATH}/
 install:
 	yarn install --frozen-lockfile
 
+# When changing the version, make sure it matches the one used in the `test_newskit_in_nextjs_app` CircleCI's job.
 install_cypress:
 	yarn add -D [email protected];
 

package.json

@@ -1,6 +1,6 @@
 {
   "name": "newskit",
-  "version": "5.4.2",
+  "version": "5.4.5",
   "description": "A React Component library implementing the News design language",
   "keywords": [
     "react",

scripts/generate-icons/used-icons-list.json

@@ -21,6 +21,7 @@
     "Email",
     "Error",
     "ErrorOutline",
+    "GraphicEq",
     "HighlightOff",
     "Image",
     "Info",

scripts/templates-integration-test/cypress.json

@@ -0,0 +1,4 @@
+{
+  "baseUrl": "http://localhost:3000",
+  "video": false
+}

scripts/templates-integration-test/index.txt

@@ -0,0 +1,12 @@
+// Template for populating the index.js file in the NextJS app;
+// built from the `test_newskit_in_nextjs_app` CircleCi job.
+
+import {ThemeChecker, newskitLightTheme, ThemeProvider} from 'newskit';
+
+export default function Home() {
+  return (
+    <ThemeProvider theme={newskitLightTheme}>
+      <ThemeChecker />
+    </ThemeProvider>
+  );
+}

scripts/templates-integration-test/theme-checker.spec.js

@@ -0,0 +1,6 @@
+describe('Theme Checker', () => {
+  it('Visits the home page and expect to find a play pause button', () => {
+    cy.visit('/');
+    cy.get('[data-testid="audio-player-play-button"]');
+  });
+});