TASK-10510: Bumping up version of NodeJS to 22.x

.github/labeler.yml

@@ -1,2 +1,3 @@
 ':eyes: needs review':
-  - 'packages/**/*'
+  - changed_files:
+    - 'packages/**/*'

.github/workflows/build.yml

@@ -6,19 +6,20 @@ on:
     branches:
       - main
   pull_request:
+  workflow_dispatch:
 
 jobs:
   libraries:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm ci

.github/workflows/codeql-analysis.yml

@@ -35,11 +35,11 @@ jobs:
 
     steps:
     - name: Checkout repository
-      uses: actions/checkout@v2
+      uses: actions/checkout@v4
 
     # Initializes the CodeQL tools for scanning.
     - name: Initialize CodeQL
-      uses: github/codeql-action/init@v1
+      uses: github/codeql-action/init@v3
       with:
         languages: ${{ matrix.language }}
         # If you wish to specify custom queries, you can do so here or in a config file.
@@ -50,7 +50,7 @@ jobs:
     # Autobuild attempts to build any compiled languages  (C/C++, C#, or Java).
     # If this step fails, then you should remove it and run the build manually (see below)
     - name: Autobuild
-      uses: github/codeql-action/autobuild@v1
+      uses: github/codeql-action/autobuild@v3
 
     # ℹ️ Command-line programs to run using the OS shell.
     # 📚 https://git.io/JvXDl
@@ -64,4 +64,4 @@ jobs:
     #   make release
 
     - name: Perform CodeQL Analysis
-      uses: github/codeql-action/analyze@v1
+      uses: github/codeql-action/analyze@v3

.github/workflows/e2e.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
   pull_request:
+  workflow_dispatch:
 
 jobs:
   testing:
@@ -13,12 +14,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install

.github/workflows/labeller.yml

@@ -2,11 +2,12 @@ name: 'Label PR'
 on:
   pull_request:
     types: [opened, reopened, ready_for_review]
+  workflow_dispatch:
 
 jobs:
   triage:
     runs-on: ubuntu-latest
     steps:
-      - uses: actions/labeler@v2
+      - uses: actions/labeler@v5
         with:
           repo-token: '${{ secrets.GITHUB_TOKEN }}'

.github/workflows/libby.yml

@@ -6,19 +6,20 @@ on:
     branches:
       - main
   pull_request:
+  workflow_dispatch:
 
 jobs:
   build:
     runs-on: ubuntu-latest
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - run: npm ci

.github/workflows/regression.yml

@@ -12,12 +12,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install

.github/workflows/unit.yml

@@ -5,6 +5,7 @@ on:
     branches:
       - main
   pull_request:
+  workflow_dispatch:
 
 jobs:
   testing:
@@ -13,12 +14,12 @@ jobs:
 
     strategy:
       matrix:
-        node-version: [16.x]
+        node-version: [22.x]
 
     steps:
-      - uses: actions/checkout@v2
+      - uses: actions/checkout@v4
       - name: Use Node.js ${{ matrix.node-version }}
-        uses: actions/setup-node@v1
+        uses: actions/setup-node@v4
         with:
           node-version: ${{ matrix.node-version }}
       - name: Install

.turbo/config.json

@@ -0,0 +1,3 @@
+{
+  "baseBranch": "origin/main"
+}

CHANGELOG.md

@@ -1,4 +1,13 @@
 
+## 7.2.7 (2025-07-09)
+
+#### Features
+* `design-tokens`, `matchbox`, `matchbox-css`, `matchbox-icons`, `matchbox-media`, `next-template-matchbox`, `cra-template-matchbox`
+  * [#1124](https://github.com/SparkPost/matchbox/pull/1124) TASK-10510 - bump version of Node.js to 22.x ([@dkoerichbird](https://github.com/dkoerichbird))
+
+#### Committers: 1
+- Doug Koerich ([@dkoerichbird](https://github.com/dkoerichbird))
+
 ## 7.2.0 (2022-07-18)
 
 #### Features

cypress/integration/Drawer.spec.js

@@ -30,20 +30,26 @@ describe('Drawer component', () => {
   it('traps focus', () => {
     cy.wait(500); // waits for Drawer to enter
     cy.get('body').tab();
+    cy.focused().then($el => { console.log('FOCUSED ELEMENT:', $el[0]); });
     cy.focused().should('have.text', 'Close');
     cy.focused().tab();
+    cy.focused().then($el => { console.log('FOCUSED ELEMENT:', $el[0]); });
     cy.focused().should('have.text', 'Button 1');
     cy.focused().tab();
+    cy.focused().then($el => { console.log('FOCUSED ELEMENT:', $el[0]); });
     cy.focused().should('have.text', 'Button 2');
     cy.focused().tab();
+    cy.focused().then($el => { console.log('FOCUSED ELEMENT:', $el[0]); });
     cy.focused().should('have.text', 'Close');
   });
 
   it('returns focus on close', () => {
     cy.wait(500); // waits for Drawer to enter
     cy.get('body').tab();
+    cy.focused().then($el => { console.log('FOCUSED ELEMENT:', $el[0]); });
     cy.focused().should('have.text', 'Close');
     cy.get('body').type('{esc}');
+    cy.focused().then($el => { console.log('FOCUSED ELEMENT:', $el[0]); });
     cy.focused().should('have.text', 'On the right');
   });
 });

libby/scss.scss

@@ -1,9 +1,9 @@
-@import '~@sparkpost/design-tokens/tokens';
+@use '~@sparkpost/design-tokens/tokens';
 
 .green {
-  background: color(green, 400);
+  background: get-color(green, 400);
 }
 
 .white {
-  background: color(white);
+  background: get-color(white);
 }