Add Chromatic

.github/workflows/chromatic.yml

@@ -0,0 +1,27 @@
+# Chromatic recommend having this on "push" so we have it as a separate workflow
+# https://www.chromatic.com/docs/github-actions/#recommended-configuration-for-build-events
+
+name: "Chromatic"
+
+on: push
+
+jobs:
+  chromatic:
+    name: Run Chromatic
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - uses: actions/setup-node@v4
+        with:
+          node-version: 20
+      - name: Install dependencies
+        run: npm ci
+      - name: Run Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true
+          exitOnceUploaded: true

.gitignore

@@ -6,4 +6,6 @@ storybook-static/
 .vscode
 
 src/chartdata/fenton/*.*
-src/testParameters/measurements/fenton/*.*
+src/testParameters/measurements/fenton/*.*
+
+build-storybook.log

package.json

@@ -66,6 +66,7 @@
         "@types/react": "18.2.55",
         "@types/styled-components": "5.1.34",
         "autoprefixer": "10.4.20",
+        "chromatic": "11.18.0",
         "eslint-config-prettier": "9.1.0",
         "eslint-plugin-prettier": "5.2.1",
         "eslint-plugin-storybook": "^0.6.15",

src/testParameters/styles/tanner1Styles.ts

@@ -322,4 +322,20 @@ export const Tanner1Styles = {
         size: 14,
         style: 'normal',
     },
+    toggleTooltipStyle: {
+        backgroundColor: '#333',
+        color: '#fff',
+        fontSize: 14,
+        fontFamily: 'Montserrat',
+        fontWeight: 400,
+        fontStyle: 'regular',
+        borderRadius: 4
+    },
+    referenceTextStyle: {
+        fontSize: 8,
+        fontFamily: 'Arial',
+        color: '#000000',
+        fontWeight: 200,
+        fontStyle: 'normal',
+    }
 };

src/testParameters/styles/tanner2Styles.ts

@@ -322,4 +322,20 @@ export const Tanner2Styles = {
         size: 14,
         style: 'normal',
     },
+    toggleTooltipStyle: {
+        backgroundColor: '#333',
+        color: '#fff',
+        fontSize: 14,
+        fontFamily: 'Montserrat',
+        fontWeight: 400,
+        fontStyle: 'regular',
+        borderRadius: 4
+    },
+    referenceTextStyle: {
+        fontSize: 8,
+        fontFamily: 'Arial',
+        color: '#000000',
+        fontWeight: 200,
+        fontStyle: 'normal',
+    }
 };

src/testParameters/styles/tanner3Styles.ts

@@ -322,4 +322,20 @@ export const Tanner3Styles = {
         size: 14,
         style: 'normal',
     },
+    toggleTooltipStyle: {
+        backgroundColor: '#333',
+        color: '#fff',
+        fontSize: 14,
+        fontFamily: 'Montserrat',
+        fontWeight: 400,
+        fontStyle: 'regular',
+        borderRadius: 4
+    },
+    referenceTextStyle: {
+        fontSize: 8,
+        fontFamily: 'Arial',
+        color: '#000000',
+        fontWeight: 200,
+        fontStyle: 'normal',
+    }
 };

src/testParameters/styles/traditionalBoysStyles.ts

@@ -321,4 +321,20 @@ export const traditionalBoysStyles = {
         size: 14,
         style: 'normal',
     },
+    toggleTooltipStyle: {
+        backgroundColor: '#333',
+        color: '#fff',
+        fontSize: 14,
+        fontFamily: 'Montserrat',
+        fontWeight: 400,
+        fontStyle: 'regular',
+        borderRadius: 4
+    },
+    referenceTextStyle: {
+        fontSize: 8,
+        fontFamily: 'Arial',
+        color: '#000000',
+        fontWeight: 200,
+        fontStyle: 'normal',
+    }
 };

src/testParameters/styles/traditionalGirlsStyles.ts

@@ -321,4 +321,20 @@ export const traditionalGirlsStyles = {
         size: 14,
         weight: 'normal',
     },
+    toggleTooltipStyle: {
+        backgroundColor: '#333',
+        color: '#fff',
+        fontSize: 14,
+        fontFamily: 'Montserrat',
+        fontWeight: 400,
+        fontStyle: 'regular',
+        borderRadius: 4
+    },
+    referenceTextStyle: {
+        fontSize: 8,
+        fontFamily: 'Arial',
+        color: '#000000',
+        fontWeight: 200,
+        fontStyle: 'normal',
+    }
 };