Merge pull request #371 from creativedotdesign/dev

Merge Dev into Master

.git-ftp-ignore

@@ -1,9 +1,9 @@
-src
+/src/
 node_modules
 .vscode
 .editorconfig
 .env
-.eslintrc.js
+.eslintrc.cjs
 .git
 .github
 .gitignore
@@ -18,14 +18,14 @@ composer.json
 composer.lock
 package.json
 package-lock.json
-postcss.config.ts
+postcss.config.cts
 tsconfig.json
-vite.config.js
 phpcs.xml
-\*.md
-cypress
-cypress.config.js
-prettier.config.js
+**/*.md
+/cypress/
+cypress.config.ts
+prettier.config.cjs
 stylelint.config.ts
 tailwind.config.ts
 vite.config.ts
+vite-env.d.ts

.github/workflows/dev.yml

@@ -16,6 +16,13 @@ jobs:
         with:
           fetch-depth: 2
 
+      # Set up Node.js version 20
+      - name: Set up Node.js 20
+        uses: actions/setup-node@v3
+        with:
+          node-version: '20'
+          cache: 'npm'
+
       - name: Get Composer Cache Directory
         id: composer-cache
         run: |
@@ -60,6 +67,14 @@ jobs:
         run: |
           echo "${{ secrets.DEPLOY_KEY }}" > deploy_key
           chmod 600 ./deploy_key
+
+          # Deleting 'dist' folder on the server if it exists
+          echo "Checking and deleting 'dist' folder on the server if it exists..."
+          ssh -i ./deploy_key -o StrictHostKeyChecking=no ${{ steps.dotenv.outputs.SSH_LOGIN }} 'if [ -d "${{ steps.dotenv.outputs.DEPLOYMENT_PATH }}${{ steps.dotenv.outputs.VITE_THEME_PATH }}/dist" ]; then rm -rf ${{ steps.dotenv.outputs.DEPLOYMENT_PATH }}${{ steps.dotenv.outputs.VITE_THEME_PATH }}/dist; fi'
+
+          # Starting rsync operation
+          echo "Starting rsync operation..."
+
           rsync -chav --delete \
             -e 'ssh -i ./deploy_key -o StrictHostKeyChecking=no' \
             --exclude-from='.git-ftp-ignore' \

.gitignore

@@ -6,14 +6,14 @@
 !.env
 !.gitkeep
 !.gitattributes
-!.eslintrc.js
 !.stylelintrc.js
 !.env
 !.prettierrc.js
 !.git-ftp-ignore
 !.github
 !.npmrc
 !.prettierignore
+!.eslintrc.cjs
 
 # ignore node/grunt dependency directories
 node_modules/
@@ -31,6 +31,8 @@ yarn-debug.log
 # cypress
 cypress/videos/
 cypress/screenshots/
+cypress/axe-reports/
+cypress/downloads/
 
 # vitest
-*.ts.snap
+*.ts.snap

CHANGELOG.md

@@ -1,3 +1,26 @@
+# 4.2.0 (2024-01-04)
+
+### Features
+
+- Remove GraphQL from all vue instances ([522d3d9](https://github.com/creativedotdesign/tofino/commit/522d3d9a96381bbc5b0e3e7a42931572643124b7))
+- Add Copyright, ALT, Media Credit to images ([a3a5a60](https://github.com/creativedotdesign/tofino/commit/a3a5a603d40ad7bcb8c529922d5110d37cb831f1))
+- Add Title and Class support to SVG Files. Fixes [#366](https://github.com/creativedotdesign/tofino/issues/366) ([05c88ad](https://github.com/creativedotdesign/tofino/commit/05c88ad7c2543c78267fe38d3f0f78382ed8a981))
+
+### Bug Fixes
+
+- Convert WP Classes to Tailwind versions. Fixes [#361](https://github.com/creativedotdesign/tofino/issues/361) ([bc3e2bc](https://github.com/creativedotdesign/tofino/commit/bc3e2bc9bb07d4c5add35873e039d719b0a7a2c9))
+
+### Build / CI
+
+- Deps & Build Updates ([e927a3c](https://github.com/creativedotdesign/tofino/commit/e927a3c4d78b79e57982edac2f7678bc352cf74b))
+- Use Node v20 for GH Action ([539392b](https://github.com/creativedotdesign/tofino/commit/539392b81e252ae9c0af290bca2d3cc9465ee051))
+- Allow files to be hashed ([4f73e74](https://github.com/creativedotdesign/tofino/commit/4f73e741d44b78c42d36705fc0f008d238e6d0ce))
+- Delete dist folder on server if it exists before deployment ([bd6c55d](https://github.com/creativedotdesign/tofino/commit/bd6c55d0536b935b99fc104e9f0a649fe7efc4b8))
+
+### Tests
+
+- Convert tests to latest Cypress and TS ([4947415](https://github.com/creativedotdesign/tofino/commit/4947415302f5dc0c7592789cc49f0f68ac576aac))
+
 # 4.1.0 (2023-11-26)
 
 ### Features

README.md

@@ -14,8 +14,8 @@ Heavily inspired the by awesome WordPress starter theme [Sage](https://github.co
 
 | Prerequisite      | How to check  | How to install                                  |
 | ----------------- | ------------- | ----------------------------------------------- |
-| PHP >= 8.1.0      | `php -v`      | [php.net](http://php.net/manual/en/install.php) |
-| Node.js >= 18.0.0 | `node -v`     | [nodejs.org](http://nodejs.org/)                |
+| PHP >= 8.2.0      | `php -v`      | [php.net](http://php.net/manual/en/install.php) |
+| Node.js >= 20.0.0 | `node -v`     | [nodejs.org](http://nodejs.org/)                |
 | Composer >= 2.0.0 | `composer -V` | [getcomposer.org](http://getcomposer.org)       |
 
 ## Installation
@@ -35,7 +35,7 @@ Important: You MUST set `WP_ENVIRONMENT_TYPE` to `development` or `local` in you
 
 ## Features
 
-- [TailwindCSS](http://tailwindcss.com/) (v3.3)
+- [TailwindCSS](http://tailwindcss.com/) (v3.4)
 - Multilingual ready (WPML)
 - Responsive
 - General Options via ACF
@@ -88,7 +88,7 @@ node_modules
 .vscode
 .editorconfig
 .env
-.eslintrc.js
+.eslintrc.cjs
 .git
 .github
 .gitignore
@@ -103,15 +103,16 @@ composer.json
 composer.lock
 package.json
 package-lock.json
-postcss.config.ts
+postcss.config.cts
 tsconfig.json
-vite.config.js
+vite.config.ts
 phpcs.xml
 \*.md
 cypress
-cypress.config.js
-prettier.config.js
+cypress.config.ts
+prettier.config.cjs
 stylelint.config.ts
 tailwind.config.ts
 vite.config.ts
+vite-env.d.ts
 ```

composer.json

@@ -22,7 +22,7 @@
     "tofino"
   ],
   "require": {
-    "php": ">=7.4.0",
+    "php": ">=8.2.0",
     "composer/installers": "~v2.2.0",
     "respect/validation": "^2.2.4"
   },

cypress.config.js → cypress.config.ts

@@ -1,17 +1,25 @@
-const { defineConfig } = require('cypress');
+import { defineConfig } from 'cypress';
+import * as dotenv from 'dotenv';
+import setupPlugins from './cypress/plugins/index';
 
-module.exports = defineConfig({
+dotenv.config();
+
+export default defineConfig({
   video: false,
   enableScreenshots: true,
   axeIgnoreContrast: true,
   e2e: {
     // We've imported your old cypress plugins here.
     // You may want to clean this up later by importing these.
     setupNodeEvents(on, config) {
-      return require('./cypress/plugins/index.js')(on, config);
+      setupPlugins(on, config);
     },
+    baseUrl: process.env.VITE_ASSET_URL,
     specPattern: 'cypress/e2e/**/*{spec,cy}.{js,ts}',
   },
+  // env: {
+  //   baseUrl: process.env.VITE_ASSET_URL,
+  // },
   component: {
     setupNodeEvents(on, config) {},
     specPattern: 'src/**/*{spec,cy}.{js,ts}',

cypress/e2e/alert.spec.ts

@@ -0,0 +1,27 @@
+describe('Alert', () => {
+  it('Check if Alert is visible', () => {
+    cy.visit('/');
+
+    cy.checkElementExists('[data-alert-id]', () => {
+      cy.get('[data-alert-id]').should('be.visible');
+    });
+  });
+
+  it('Check Alert is not visable on scroll', () => {
+    cy.checkElementExists('[data-alert-id]', () => {
+      cy.scrollTo(0, '50%');
+
+      cy.get('[data-alert-id]').should('not.inViewport');
+    });
+  });
+
+  it('Check Alert closes', () => {
+    cy.checkElementExists('[data-alert-id]', () => {
+      cy.get('[data-alert-id] .js-close').click();
+
+      cy.get('[data-alert-id]').should('not.exist');
+
+      cy.getCookie('tofino-alert-closed').should('have.property', 'value', 'yes');
+    });
+  });
+});

cypress/e2e/axe.spec.js → cypress/e2e/axe.spec.ts

@@ -1,19 +1,31 @@
 import 'cypress-axe';
 import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from '../../tailwind.config.ts';
+import tailwindConfig from '../../tailwind.config';
+import { screenshotViolations, cypressLog, terminalLog } from '../support/helpers/index';
+
+// Type for viewport sizes
+type ViewportSize = {
+  name: string;
+  width: number;
+  height: number;
+};
+
+// Type for violation callback
+type ViolationCallback = (violations: any[]) => void; // Replace 'any' with the actual type of violations if known
 
 const fullConfig = resolveConfig(tailwindConfig);
-const screens = fullConfig.theme.screens;
+const screens: { [key: string]: string } = fullConfig.theme.screens;
 
-let allViolations = []; // Holds violations from all pages
+let allViolations: any[] = []; // Replace 'any' with the actual type of violations
 
 before(() => {
   allViolations = []; // Reset before the test suite runs
 });
 
-import { screenshotViolations, cypressLog, terminalLog } from '../support/helpers';
-
-export const createAccessibilityCallback = (pageName, breakpointName) => {
+export const createAccessibilityCallback = (
+  pageName: string,
+  breakpointName: string
+): ViolationCallback => {
   cy.task('log', `Running accessibility checks for ${pageName} at ${breakpointName} breakpoint`);
 
   return (violations) => {
@@ -28,7 +40,7 @@ export const createAccessibilityCallback = (pageName, breakpointName) => {
   };
 };
 
-const viewportSizes = [
+const viewportSizes: ViewportSize[] = [
   {
     name: 'Mobile',
     width: 320,

cypress/e2e/navigation.spec.js → cypress/e2e/navigation.spec.ts

@@ -1,13 +1,13 @@
 // Import tailwindcss config file
 import resolveConfig from 'tailwindcss/resolveConfig';
-import tailwindConfig from '../../tailwind.config.js';
+import tailwindConfig from '../../tailwind.config';
 
 const fullConfig = resolveConfig(tailwindConfig);
 const screens = fullConfig.theme.screens;
 
 describe('Navigation Tests', () => {
   it('Mobile Menu, check functionality', () => {
-    cy.baseUrl();
+    cy.visit('/');
 
     // Mobile Viewport
     const mobileHeight = 812;
@@ -55,7 +55,7 @@ describe('Navigation Tests', () => {
   });
 
   it('Navbar is sticky or not sticky', () => {
-    cy.baseUrl();
+    cy.visit('/');
 
     // Desktop Viewport
     cy.viewport(parseInt(screens.lg, 10), 660);

cypress/plugins/index.js → cypress/plugins/index.ts

@@ -1,15 +1,12 @@
-const { startDevServer } = require('@cypress/vite-dev-server');
-require('dotenv').config();
-const axios = require('axios');
-const { createHtmlReport } = require('axe-html-reporter');
-
-module.exports = (on, config) => {
-  on('dev-server:start', (options) => {
-    return startDevServer({ options });
-  });
+import * as dotenv from 'dotenv';
+import axios from 'axios';
+import { createHtmlReport } from 'axe-html-reporter';
+
+dotenv.config();
 
+export default (on: Cypress.PluginEvents, config: Cypress.PluginConfigOptions) => {
   on('task', {
-    processAccessibilityViolations(violations) {
+    processAccessibilityViolations(violations: any[]) {
       createHtmlReport({
         results: { violations: violations },
         options: {
@@ -31,6 +28,11 @@ module.exports = (on, config) => {
           },
         });
 
+        // Check respose status
+        if (response.status !== 200) {
+          throw new Error('Error fetching sitemap');
+        }
+
         const xml = response.data;
         const locs = [...xml.matchAll(`<loc>(.|\n)*?</loc>`)].map(([loc]) =>
           loc.replace('<loc>', '').replace('</loc>', '')
@@ -39,25 +41,23 @@ module.exports = (on, config) => {
         return locs;
       } catch (error) {
         console.error('Error fetching sitemap:', error);
-        throw error; // Re-throw the error to ensure Cypress is aware of the failure
+        throw error;
       }
     },
   });
 
   on('task', {
-    log(message) {
+    log(message: string) {
       console.log(message);
 
       return null;
     },
-    table(message) {
+    table(message: any) {
       console.table(message);
 
       return null;
     },
   });
 
-  config.env.baseUrl = process.env.VITE_ASSET_URL;
-
   return config;
 };