zma/Add accessibility documentation structure and initial guidance pages

.github/workflows/deploy-storybook.yaml

@@ -25,17 +25,18 @@ jobs:
     steps:
     - uses: actions/checkout@v4
 
-    - uses: pnpm/action-setup@v4
-      with:
-        run_install: |
-          args: [ --force ]
+    - name: Setup pnpm
+      uses: pnpm/action-setup@v4
 
     - name: Set Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
         cache: pnpm
 
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
+
     - name: Build and publish
       id: build-publish
       uses: bitovi/github-actions-storybook-to-github-pages@v1.0.3

.github/workflows/npm-publish-pre-release.yaml

@@ -19,9 +19,6 @@ jobs:
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
-        with:
-          run_install: |
-            args: [ --force ]
 
       - name: Setup node
         uses: actions/setup-node@v4

.github/workflows/npm-publish.yaml

@@ -20,9 +20,6 @@ jobs:
 
       - name: Setup pnpm
         uses: pnpm/action-setup@v4
-        with:
-          run_install: |
-            args: [ --force ]
 
       - name: Setup node
         uses: actions/setup-node@v4

.github/workflows/test-build.yaml

@@ -20,17 +20,16 @@ jobs:
     steps:
     - uses: actions/checkout@v4
 
-    - name: Install dependencies
+    - name: Setup pnpm
       uses: pnpm/action-setup@v4
-      with:
-        run_install: |
-          args: [ --force ]
 
     - name: Set Node.js ${{ matrix.node-version }}
       uses: actions/setup-node@v4
       with:
         node-version: ${{ matrix.node-version }}
-        cache: pnpm
+
+    - name: Install dependencies
+      run: pnpm install --frozen-lockfile
 
     - name: Audit packages, run Typescript tests and lint client code
       run: |

.npmrc

@@ -1,3 +1,2 @@
 publish-branch=main
 access=public
-ignore-scripts=true

.storybook/ThemeSwapper.tsx

@@ -18,18 +18,35 @@ export interface ThemeSwapperProps {
 
 export const TextLight = "Mode: Light";
 export const TextDark = "Mode: Dark";
+export const TextSystem = "Mode: System";
 
 const ThemeSwapper = ({ context, children }: ThemeSwapperProps) => {
-  const { mode, setMode } = useColorScheme();
-  //if( !mode ) return
+  const { mode, systemMode, setMode } = useColorScheme();
 
   useEffect(() => {
-    const selectedThemeMode = context.globals.themeMode || TextLight;
-    setMode(selectedThemeMode == TextLight ? "light" : "dark");
-  }, [context.globals.themeMode]);
+    const selectedThemeMode = context.globals.themeMode ?? TextSystem;
+
+    if (selectedThemeMode === TextLight) {
+      setMode("light");
+      return;
+    }
+
+    if (selectedThemeMode === TextDark) {
+      setMode("dark");
+      return;
+    }
+
+    setMode("system");
+  }, [context.globals.themeMode, setMode]);
+
+  const resolvedMode = mode === "system" ? systemMode : mode;
 
   return (
-    <div style={{ backgroundColor: mode === "light" ? "#fafafaaa" : "#000a" }}>
+    <div
+      style={{
+        backgroundColor: resolvedMode === "light" ? "#F6F6F9" : "#0e1017",
+      }}
+    >
       {children}
     </div>
   );

.storybook/preview.tsx

@@ -3,12 +3,32 @@ import { CssBaseline } from "@mui/material";
 import type { Preview } from "@storybook/react";
 
 import { ThemeProvider } from "../src";
-import { GenericTheme, DiamondTheme } from "../src";
-
-import { Context, ThemeSwapper, TextLight, TextDark } from "./ThemeSwapper";
+import { GenericTheme, DiamondTheme, DiamondDSTheme } from "../src";
+import { ThemeSwapper, TextLight, TextDark, TextSystem } from "./ThemeSwapper";
+import "../src/styles/diamondDS/diamond-ds-roles.css";
 
 const TextThemeBase = "Theme: Generic";
 const TextThemeDiamond = "Theme: Diamond";
+const TextThemeDiamondDS = "Theme: DiamondDS";
+
+function resolveTheme(selectedTheme: string) {
+  switch (selectedTheme) {
+    case TextThemeBase:
+      return GenericTheme;
+    case TextThemeDiamond:
+      return DiamondTheme;
+    case TextThemeDiamondDS:
+    default:
+      return DiamondDSTheme;
+  }
+}
+
+function resolveDefaultMode(selectedThemeMode: string) {
+  if (selectedThemeMode === TextLight) return "light";
+  if (selectedThemeMode === TextDark) return "dark";
+
+  return "system";
+}
 
 export const decorators = [
   (StoriesWithPadding: React.FC) => {
@@ -18,24 +38,21 @@ export const decorators = [
       </div>
     );
   },
-  (StoriesWithThemeSwapping: React.FC, context: Context) => {
-    return (
-      <ThemeSwapper context={context}>
-        <StoriesWithThemeSwapping />
-      </ThemeSwapper>
-    );
-  },
-  (StoriesWithThemeProvider: React.FC, context: Context) => {
-    const selectedTheme = context.globals.theme || TextThemeBase;
-    const selectedThemeMode = context.globals.themeMode || TextLight;
+
+  (Story, context) => {
+    const selectedTheme = context.globals.theme || TextThemeDiamondDS;
+    const selectedThemeMode = context.globals.themeMode || TextSystem;
 
     return (
       <ThemeProvider
-        theme={selectedTheme == TextThemeBase ? GenericTheme : DiamondTheme}
-        defaultMode={selectedThemeMode == TextLight ? "light" : "dark"}
+        theme={resolveTheme(selectedTheme)}
+        defaultMode={resolveDefaultMode(selectedThemeMode)}
       >
         <CssBaseline />
-        <StoriesWithThemeProvider />
+
+        <ThemeSwapper context={context}>
+          <Story />
+        </ThemeSwapper>
       </ThemeProvider>
     );
   },
@@ -48,7 +65,7 @@ const preview: Preview = {
       toolbar: {
         title: "Theme",
         icon: "cog",
-        items: [TextThemeBase, TextThemeDiamond],
+        items: [TextThemeBase, TextThemeDiamond, TextThemeDiamondDS],
         dynamicTitle: true,
       },
     },
@@ -57,14 +74,14 @@ const preview: Preview = {
       toolbar: {
         title: "Theme Mode",
         icon: "mirror",
-        items: [TextLight, TextDark],
+        items: [TextLight, TextDark, TextSystem],
         dynamicTitle: true,
       },
     },
   },
   initialGlobals: {
-    theme: "Theme: Diamond",
-    themeMode: "Mode: Light",
+    theme: TextThemeDiamondDS,
+    themeMode: TextSystem,
   },
   parameters: {
     controls: {
@@ -79,11 +96,13 @@ const preview: Preview = {
       storySort: {
         order: [
           "Introduction",
-          "Components",
+          "Helpers",
           "Theme",
           "Theme/Logos",
           "Theme/Colours",
-          "Helpers",
+          "Accessibility",
+          "MUI",
+          "Components",
         ],
       },
     },

changelog.md

@@ -2,6 +2,9 @@
 
 ## [Unreleased]
 
+### Changed
+- **Breaking** `keycloak-js` has been moved from a direct dependency to a peer and optional dependency, so must now be installed by the consuming application.
+
 ### Fixed
 - Icon imports were causing issues downstream when components are unit tested.
 

package.json

@@ -49,10 +49,9 @@
     "storybook:publish": "gh-pages -b storybook/publish -d storybook-static"
   },
   "dependencies": {
-    "keycloak-js": "^26.2.1",
+    "@mui/icons-material": "^7.0.0",
     "react-icons": "^5.3.0",
-    "utif": "^3.1.0",
-    "@mui/icons-material": "^7.0.0"
+    "utif": "^3.1.0"
   },
   "peerDependencies": {
     "@emotion/react": "^11.13.3",
@@ -61,7 +60,7 @@
     "@jsonforms/material-renderers": "^3.7.0",
     "@jsonforms/react": "^3.7.0",
     "@mui/material": "^7.0.0",
-    "@mui/icons-material": "^7.0.0",
+    "keycloak-js": "^26.2.1",
     "react": "^18.3.1"
   },
   "devDependencies": {
@@ -71,6 +70,7 @@
     "@babel/preset-typescript": "^7.26.10",
     "@chromatic-com/storybook": "^3.2.2",
     "@eslint/eslintrc": "^3.2.0",
+    "@eslint/js": "^10.0.1",
     "@rollup/plugin-commonjs": "^28.0.1",
     "@rollup/plugin-image": "^3.0.3",
     "@rollup/plugin-json": "^6.1.0",
@@ -118,17 +118,22 @@
     "typescript-eslint": "^8.15.0",
     "vitest": "^3.2.4"
   },
+  "optionalDependencies": {
+    "keycloak-js": "^26.2.1"
+  },
   "pnpm": {
     "overrides": {
+      "fast-uri": "^3.1.2",
       "lodash": "^4.18.1",
       "qs@>=6.13.0 <6.14.0": "6.14.1",
       "js-yaml@^4.1.0": "4.1.1",
       "brace-expansion@^1.1.0": "1.1.12",
       "brace-expansion@^2.0.0": "2.0.2",
       "@babel/runtime@^7.26.0": "7.27.6",
       "esbuild@>=0.24.0 <0.25.0": "0.25.0",
-      "webpack@^5.0.0": "5.104.1"
+      "webpack@^5.0.0": "5.104.1",
+      "fast-uri@<3.1.2": "3.1.2"
     }
   },
-  "packageManager": "pnpm@9.12.3+sha256.24235772cc4ac82a62627cd47f834c72667a2ce87799a846ec4e8e555e2d4b8b"
+  "packageManager": "pnpm@10.26.0"
 }