@qhealth-design-system/core 1.22.1 → 1.23.0

package/.storybook/assets/image-position-demo-portrait.svg

@@ -0,0 +1,54 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 900" width="600" height="900" role="img" aria-label="A three by three grid of labelled zones used to show which part of an image survives a crop">
+  <title>Image position demo sheet, portrait</title>
+
+  <!--
+    The portrait twin of image-position-demo.svg, 2:3 instead of 3:2. A wide
+    crop of this one has plenty of height to spare, so the vertical half of each
+    position name has something to do.
+  -->
+
+  <g font-family="'Helvetica Neue', Arial, sans-serif" font-weight="700" text-anchor="middle">
+    <!-- Top row -->
+    <rect x="0" y="0" width="200" height="300" fill="#7ca3d4" />
+    <text x="100" y="140" font-size="28" fill="#0b1c30">LEFT</text>
+    <text x="100" y="176" font-size="28" fill="#0b1c30">TOP</text>
+
+    <rect x="200" y="0" width="200" height="300" fill="#a8c3e6" />
+    <text x="300" y="162" font-size="32" fill="#0b1c30">TOP</text>
+
+    <rect x="400" y="0" width="200" height="300" fill="#7ca3d4" />
+    <text x="500" y="140" font-size="28" fill="#0b1c30">RIGHT</text>
+    <text x="500" y="176" font-size="28" fill="#0b1c30">TOP</text>
+
+    <!-- Middle row -->
+    <rect x="0" y="300" width="200" height="300" fill="#c9dcb4" />
+    <text x="100" y="462" font-size="32" fill="#1b2b12">LEFT</text>
+
+    <rect x="200" y="300" width="200" height="300" fill="#f0ead2" />
+    <circle cx="300" cy="450" r="70" fill="none" stroke="#2b2b2b" stroke-width="4" />
+    <circle cx="300" cy="450" r="34" fill="none" stroke="#2b2b2b" stroke-width="4" />
+    <circle cx="300" cy="450" r="6" fill="#2b2b2b" />
+    <text x="300" y="562" font-size="26" fill="#2b2b2b">CENTER</text>
+
+    <rect x="400" y="300" width="200" height="300" fill="#c9dcb4" />
+    <text x="500" y="462" font-size="32" fill="#1b2b12">RIGHT</text>
+
+    <!-- Bottom row -->
+    <rect x="0" y="600" width="200" height="300" fill="#e8b98c" />
+    <text x="100" y="740" font-size="28" fill="#31200d">LEFT</text>
+    <text x="100" y="776" font-size="26" fill="#31200d">BOTTOM</text>
+
+    <rect x="200" y="600" width="200" height="300" fill="#f2d3b3" />
+    <text x="300" y="762" font-size="30" fill="#31200d">BOTTOM</text>
+
+    <rect x="400" y="600" width="200" height="300" fill="#e8b98c" />
+    <text x="500" y="740" font-size="28" fill="#31200d">RIGHT</text>
+    <text x="500" y="776" font-size="26" fill="#31200d">BOTTOM</text>
+  </g>
+
+  <!-- Zone edges, drawn over the fills so they read as one grid. -->
+  <g stroke="#2b2b2b" stroke-width="3" opacity="0.55">
+    <path d="M200 0V900M400 0V900M0 300H600M0 600H600" />
+  </g>
+  <rect x="1.5" y="1.5" width="597" height="897" fill="none" stroke="#2b2b2b" stroke-width="3" />
+</svg>

package/.storybook/assets/image-position-demo.svg

@@ -0,0 +1,55 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 900 600" width="900" height="600" role="img" aria-label="A three by three grid of labelled zones used to show which part of an image survives a crop">
+  <title>Image position demo sheet</title>
+
+  <!--
+    A 3:2 test sheet for the image position stories. Every zone is labelled and
+    colour-coded, so a cropped copy of this image tells you at a glance which
+    part of it stayed in frame. (Class names are spelled out in the stories, not
+    here: a double hyphen is illegal inside an XML comment.)
+  -->
+
+  <g font-family="'Helvetica Neue', Arial, sans-serif" font-weight="700" text-anchor="middle">
+    <!-- Top row -->
+    <rect x="0" y="0" width="300" height="200" fill="#7ca3d4" />
+    <text x="150" y="92" font-size="30" fill="#0b1c30">LEFT</text>
+    <text x="150" y="128" font-size="30" fill="#0b1c30">TOP</text>
+
+    <rect x="300" y="0" width="300" height="200" fill="#a8c3e6" />
+    <text x="450" y="112" font-size="34" fill="#0b1c30">TOP</text>
+
+    <rect x="600" y="0" width="300" height="200" fill="#7ca3d4" />
+    <text x="750" y="92" font-size="30" fill="#0b1c30">RIGHT</text>
+    <text x="750" y="128" font-size="30" fill="#0b1c30">TOP</text>
+
+    <!-- Middle row -->
+    <rect x="0" y="200" width="300" height="200" fill="#c9dcb4" />
+    <text x="150" y="312" font-size="34" fill="#1b2b12">LEFT</text>
+
+    <rect x="300" y="200" width="300" height="200" fill="#f0ead2" />
+    <circle cx="450" cy="300" r="70" fill="none" stroke="#2b2b2b" stroke-width="4" />
+    <circle cx="450" cy="300" r="34" fill="none" stroke="#2b2b2b" stroke-width="4" />
+    <circle cx="450" cy="300" r="6" fill="#2b2b2b" />
+    <text x="450" y="392" font-size="26" fill="#2b2b2b">CENTER</text>
+
+    <rect x="600" y="200" width="300" height="200" fill="#c9dcb4" />
+    <text x="750" y="312" font-size="34" fill="#1b2b12">RIGHT</text>
+
+    <!-- Bottom row -->
+    <rect x="0" y="400" width="300" height="200" fill="#e8b98c" />
+    <text x="150" y="492" font-size="30" fill="#31200d">LEFT</text>
+    <text x="150" y="528" font-size="30" fill="#31200d">BOTTOM</text>
+
+    <rect x="300" y="400" width="300" height="200" fill="#f2d3b3" />
+    <text x="450" y="512" font-size="34" fill="#31200d">BOTTOM</text>
+
+    <rect x="600" y="400" width="300" height="200" fill="#e8b98c" />
+    <text x="750" y="492" font-size="30" fill="#31200d">RIGHT</text>
+    <text x="750" y="528" font-size="30" fill="#31200d">BOTTOM</text>
+  </g>
+
+  <!-- Zone edges, drawn over the fills so they read as one grid. -->
+  <g stroke="#2b2b2b" stroke-width="3" opacity="0.55">
+    <path d="M300 0V600M600 0V600M0 200H900M0 400H900" />
+  </g>
+  <rect x="1.5" y="1.5" width="897" height="597" fill="none" stroke="#2b2b2b" stroke-width="3" />
+</svg>

package/.storybook/globals.js

@@ -40,7 +40,16 @@ export const dummyLink = "https://www.google.com";
 // Served locally from .storybook/assets (a staticDir) so Chromatic snapshots
 // are deterministic — an external image URL loads intermittently at capture
 // time, making the image flicker in/out between builds.
-export const dummyImageLink = "/Culex_annulirostris_female2.jpg";
+export const dummyImageLink = "Culex_annulirostris_female2.jpg";
+
+// Sheets of nine labelled zones, one landscape and one portrait. Cropped, they
+// name the part of themselves that survived, which a photograph cannot do. The
+// image position stories use both: object-position can only slide an image
+// along the axis its crop overflows, so showing the horizontal and the vertical
+// halves of the utility takes a wide source and a tall one.
+export const imagePositionDemoImage = "image-position-demo.svg";
+export const imagePositionDemoImagePortrait =
+  "image-position-demo-portrait.svg";
 
 // Path to the icon sprite, relative to the Storybook preview iframe. Used for
 // <use href> references and the coreSiteIcons metadata across stories.

package/.storybook/preview.js

@@ -24,6 +24,7 @@ const preview = {
           },
         ],
       },
+      test: "todo",
     },
     viewport: {
       options: {
@@ -66,7 +67,13 @@ const preview = {
     options: {
       storySort: {
         // Force SB to load Introduction page first
-        order: ["Introduction", "1. Core Styles", "2. Layout", "3. Components"],
+        order: [
+          "Introduction",
+          "1. Core Styles",
+          "2. Layout",
+          "3. Components",
+          "4. Templates",
+        ],
       },
     },
   },

package/CHANGELOG.md

@@ -7,6 +7,10 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ## Unreleased
 
+## 1.23.0 - 2026-07-28
+
+## 1.22.2 - 2026-07-01
+
 ## 1.22.1 - 2026-07-01
 
 ## 1.22.0 - 2026-06-30

package/README.md

@@ -49,12 +49,6 @@ Build the Design System CSS, JS, Components and templates
 npm run build
 ```
 
-Static view, start a local server from /dist folder
-
-```bash
-npm run serve
-```
-
 Build Storybook for Component development
         
 ```bash

package/package.json

@@ -1,17 +1,16 @@
 {
   "name": "@qhealth-design-system/core",
-  "version": "1.22.1",
+  "version": "1.23.0",
   "description": "",
   "repository": {
     "type": "git",
     "url": "https://github.com/Qld-Health-Online-Team/design-system"
   },
-  "licence": "MIT",
+  "license": "MIT",
   "main": "index.js",
   "scripts": {
     "build": "webpack --config webpack/webpack.prod.js",
     "build-all": "npm run build && npm run jsdoc",
-    "serve": "webpack-dev-server --open --config webpack/webpack.dev.js",
     "jsdoc": "./node_modules/jsdoc/jsdoc.js -a all -c jsdoc.json -r -R README.md ./src/components/ -d ./documentation/jsdoc",
     "lint:js": "eslint .",
     "lint:styles": "stylelint \"**/*.{css,scss}\"",
@@ -27,72 +26,53 @@
   },
   "keywords": [],
   "author": "",
-  "license": "ISC",
   "devDependencies": {
-    "@babel/core": "^7.22.5",
-    "@babel/plugin-syntax-dynamic-import": "^7.8.3",
-    "@babel/preset-env": "^7.22.5",
-    "@babel/preset-react": "^7.22.5",
     "@chromatic-com/storybook": "^5.2.1",
     "@eslint/css": "^1.3.0",
     "@eslint/js": "^10.0.1",
     "@eslint/json": "^2.0.0",
     "@eslint/markdown": "^8.0.2",
     "@poliklot/prettier-plugin-handlebars": "^0.2.12",
-    "@storybook/addon-a11y": "^10.4.0",
+    "@storybook/addon-a11y": "^10.4.6",
     "@storybook/addon-designs": "^11.1.3",
-    "@storybook/addon-docs": "^10.4.0",
-    "@storybook/addon-themes": "^10.4.0",
-    "@storybook/addon-vitest": "^10.4.1",
-    "@storybook/html-vite": "^10.4.0",
+    "@storybook/addon-docs": "^10.4.6",
+    "@storybook/addon-themes": "^10.4.6",
+    "@storybook/addon-vitest": "^10.4.6",
+    "@storybook/html-vite": "^10.4.6",
     "@vitest/browser-playwright": "^4.1.7",
     "autoprefixer": "^10.4.14",
-    "chromatic": "^17.0.0",
+    "chromatic": "^18.0.0",
     "copy-webpack-plugin": "^11.0.0",
-    "core-js": "^3.31.0",
     "css-loader": "^5.2.6",
     "eslint": "^10.4.1",
     "eslint-config-prettier": "^10.1.8",
-    "eslint-plugin-storybook": "^10.4.0",
-    "eslint-webpack-plugin": "^6.0.0",
+    "eslint-plugin-storybook": "^10.4.6",
     "glob": "^7.2.0",
     "globals": "^17.6.0",
     "handlebars": "^4.7.8",
-    "html-loader": "^0.5.5",
-    "html-webpack-plugin": "^5.5.3",
     "import-glob-loader": "^1.1.0",
-    "imports-loader": "^4.0.1",
     "jsdoc": "^4.0.2",
     "mini-css-extract-plugin": "^2.7.6",
     "playwright": "^1.60.0",
     "postcss-loader": "^7.3.3",
     "postcss-scss": "^4.0.9",
-    "prettier": "3.8.3",
+    "prettier": "3.9.4",
     "sass": "^1.63.6",
     "sass-loader": "^13.3.2",
-    "storybook": "^10.4.0",
-    "string-replace-loader": "^3.1.0",
-    "style-loader": "^3.3.3",
+    "storybook": "^10.4.6",
     "stylelint": "^17.12.0",
     "stylelint-config-standard": "^40.0.0",
     "stylelint-scss": "^7.1.0",
     "terser-webpack-plugin": "^5.3.9",
-    "url-loader": "^4.1.1",
     "vite": "^7.2.6",
     "vite-plugin-sass-glob-import": "^6.0.2",
     "vitest": "^4.1.7",
     "webpack": "^5.88.0",
     "webpack-cli": "^5.1.4",
-    "webpack-dev-server": "^4.15.1"
+    "webpack-merge": "^4.2.2"
   },
   "dependencies": {
-    "extract-loader": "^5.1.0",
-    "handlebars-loader": "^1.7.1",
     "highlight.js": "^11.1.0",
-    "node-jq": "^2.0.0",
-    "prismjs": "^1.29.0",
-    "tinymce": "^5.8.2",
-    "to-string-loader": "^1.1.6",
-    "webpack-merge": "^4.2.2"
+    "prismjs": "^1.29.0"
   }
 }