@unimelb/pattern-lib-vue 16.0.0-alpha.34 → 16.0.0-alpha.36

package/README.md

@@ -17,7 +17,7 @@ The contents of this repository have been produced by The University of Melbourn
 
 The design system requires:
 
-- [Node](https://nodejs.org/en/) (v16)
+- [Node](https://nodejs.org/en/) (>=v22.17.0)
 - [Yarn](https://yarnpkg.com/lang/en/docs/install/) (latest version)
 
 ```bash
@@ -127,11 +127,8 @@ JS files and single-file Vue components are linted on the fly with ESLint. The c
 For your own sanity, make sure to install your code editor's ESLint and stylelint extensions. The following commands are available for on-demand linting and fixing:
 
 - `yarn lint`
-- `yarn lint:fix`
 - `yarn lint:css`
-- `yarn lint:css --fix`
 - `yarn lint:js`
-- `yarn lint:js --fix`
 
 ## Release process
 
@@ -147,7 +144,8 @@ For your own sanity, make sure to install your code editor's ESLint and stylelin
 
 **At the end of the release sprint:**
 
-> [!NOTE] > **Note on versioning**: the version number follows the [semver](http://semver.org/) convention `MAJOR.MINOR.PATCH`, where: `MAJOR` corresponds to a breaking change (e.g. a change in a component's markup), `MINOR` to a new feature (e.g. a new component, a new feature for an existing component, etc.), and `PATCH` to a bug fix or under-the-hood change (e.g. code clean-up, performance improvement, etc.)
+> [!NOTE] 
+> **Note on versioning**: the version number follows the [semver](http://semver.org/) convention `MAJOR.MINOR.PATCH`, where: `MAJOR` corresponds to a breaking change (e.g. a change in a component's markup), `MINOR` to a new feature (e.g. a new component, a new feature for an existing component, etc.), and `PATCH` to a bug fix or under-the-hood change (e.g. code clean-up, performance improvement, etc.)
 
 1. Look at all the PRs that were assigned to `next-release` throughout the sprint and identify the highest-level of change (major, minor or patch). Deduce the next release's version number and rename the milestone accordingly.
 1. Create a new release notes draft based on the following template: `.github/RELEASE_NOTES_TEMPLATE.md`.
@@ -171,7 +169,8 @@ For your own sanity, make sure to install your code editor's ESLint and stylelin
 
 Pre-release builds can be created like this (using the git pre-push hook behind the scenes):
 
-> [!NOTE] > **Note on pre-release versions**: These are legitimate [semver](http://semver.org/) versions. They have the format MAJOR.MINOR.PATCH-beta.NUMBER. **Only** these pre-release versions will be published on `dev`.
+> [!NOTE] 
+> **Note on pre-release versions**: These are legitimate [semver](http://semver.org/) versions. They have the format MAJOR.MINOR.PATCH-beta.NUMBER. **Only** these pre-release versions will be published on `dev`.
 
 1. Check out a clean `dev` branch
 1. in bash `git push` - this will increment the pre-release version number and make a commit to your local repository
@@ -188,13 +187,40 @@ To run the component units tests use `yarn test`. This runs the jest unit and ac
 ### Storybook end-to-end testing
 To run the Storybook stories visual snapshots and story tests use `yarn test:e2e`. 
 
-### Storybook visual snapshot testing
+To view the e2e test report use `yarn test:report`.
 
-You can run the Storybook stories visual snapshot tests using `yarn test:snapshots`. This compares your changes against the baseline visual snapshot. To see the failed snapshot tests run `yarn test:report`.
+**Note:** the visual snapshot testing runs on Playwright and requires Docker to be up and running.
+
+#### Visual snapshot testing
+
+You can run the Storybook stories visual snapshot tests exclusively using `yarn test:snapshots`. This compares your changes against the baseline visual snapshot. To see the failed snapshot tests run `yarn test:report`.
 
 If you wish to update the snapshots with your changes run `yarn test:update:snapshots`.
 
-**Note:** the visual snapshot testing runs on Playwright and requires Docker to be up and running.
+> [!IMPORTANT]
+> Whenever a new story is created or the story name is updated, it is important to update the corresponding `*.spec.js` file for the story.
+
+#### Example
+The story `components/grid/stories/index.stories.js` corresponds to `e2e/tests/components/grid.spec.js`. 
+```
+const component = 'Grid';
+const stories = [
+  'Default',
+  'Desk',
+  'Desk Combination',
+  'Tab',
+  'Tab Combination',
+  'Wide',
+  'Wide Combination',
+  'Center Grid',
+];
+
+testVisualStory(component, stories);
+```
+
+`testVisualStory` will run the snapshot tests on the following viewports:
+- 1280 x 3600 - desktop
+- 480 x 3600 - mobile
 
 ### Testing Pull-requests
 
@@ -229,7 +255,7 @@ Recommended mobile devices for testing:
 ### Visual Regression Tests
 
 > [!IMPORTANT]
-> These tests should be run `exclusively` on your `local` machine to detect visual regressions before merging your `pull-request`.
+> These tests should be run **exclusively** on your **local** machine to detect visual regressions **before merging** your pull-request.
 
 You can test your changes against live `production` sites to ensure nothing breaks.
 

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@unimelb/pattern-lib-vue",
   "description": "A complete design system for the University of Melbourne.",
-  "version": "16.0.0-alpha.34",
+  "version": "16.0.0-alpha.36",
   "repository": {
     "type": "git",
     "url": "https://github.com/unimelb/pattern-lib.git"
@@ -9,7 +9,7 @@
   "author": "The University of Melbourne",
   "license": "UNLICENSED",
   "engines": {
-    "node": ">=22.3.0",
+    "node": ">=22.17.0",
     "yarn": "*"
   },
   "type": "module",
@@ -55,7 +55,7 @@
     "@fontsource-variable/fraunces": "5.0.21",
     "@fontsource/source-sans-pro": "5.0.8",
     "@splidejs/vue-splide": "0.6.12",
-    "@vue/compat": "3.5.4",
+    "@vue/compat": "3.5.22",
     "babel-polyfill": "6.26.0",
     "change-case": "3.1.0",
     "core-js": "3",
@@ -72,7 +72,7 @@
     "throttle-debounce": "2.1.0",
     "uuid": "3.4.0",
     "v-scroll-lock": "1.3.1",
-    "vue": "3.5.4",
+    "vue": "3.5.22",
     "vue-focus-lock": "1.4.0",
     "xss": "1.0.15"
   },
@@ -83,7 +83,7 @@
     "@babel/polyfill": "7.12.1",
     "@babel/preset-env": "7.24.8",
     "@babel/preset-react": "7.24.7",
-    "@playwright/test": "1.53.0",
+    "@playwright/test": "1.56.1",
     "@storybook/addon-essentials": "8.1.11",
     "@storybook/addon-interactions": "8.1.11",
     "@storybook/addon-links": "8.1.11",
@@ -103,8 +103,7 @@
     "@storybook/vue3-webpack5": "8.1.11",
     "@vue/babel-helper-vue-jsx-merge-props": "1.4.0",
     "@vue/babel-plugin-transform-vue-jsx": "1.4.0",
-    "@vue/compiler-sfc": "3.4.31",
-    "@vue/test-utils": "2.4.0-alpha.2",
+    "@vue/test-utils": "2.4.6",
     "@vue/vue3-jest": "29.2.6",
     "babel-core": "6.26.3",
     "babel-helper-vue-jsx-merge-props": "2.0.3",
@@ -182,8 +181,7 @@
     "svgo-loader": "4.0.0",
     "terser-webpack-plugin": "5.3.10",
     "vue-axe": "1.0.7",
-    "vue-html-loader": "1.2.4",
-    "vue-loader": "17.4.2",
+    "vue-loader": "17.3.1",
     "webpack": "5.92.1",
     "webpack-bundle-analyzer": "4.10.2",
     "webpack-cli": "5.1.4",