@scottish-government/designsystem-react 0.8.0 → 0.10.0-beta.0

package/static/images/scottish-government--min.svg

@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" viewBox="0 0 157.4 29.9">
+  <defs>
+    <path id="a" d="M0 0h157.4v29.9H0z"/>
+  </defs>
+  <clipPath id="b">
+    <use xlink:href="#a" overflow="visible"/>
+  </clipPath>
+  <path fill="#333e48" d="M154.6 20.3a4 4 0 0 0 2.8-.9l-.7-2.3c-.2.3-.7.5-1.3.5-.8 0-1.3-.7-1.3-1.6V9h2.8V6.4h-2.8V2.7h-3v3.7h-2.3V9h2.3v7.9c0 2.2 1.2 3.4 3.5 3.4m-13.9-2.6c-2.5 0-3.9-2.1-3.9-4.5s1.4-4.5 3.9-4.5 3.9 2.1 3.9 4.5-1.4 4.5-3.9 4.5m0 2.6c4.3 0 7-3.3 7-7.2 0-3.9-2.6-7.1-7-7.1-4.3 0-7 3.2-7 7.1 0 4 2.6 7.2 7 7.2m-13.6 0c2.7 0 4.3-1.2 5.2-2.4l-1.9-1.8a3.6 3.6 0 0 1-3.1 1.6c-2.5 0-4.1-1.9-4.1-4.5s1.7-4.5 4.1-4.5c1.3 0 2.4.5 3.1 1.6l1.9-1.8a6 6 0 0 0-5.2-2.4c-4.1 0-7 3-7 7.1s2.9 7.1 7 7.1m-14.6 0c3.7 0 5.7-1.8 5.7-4.3 0-5.4-8.2-3.6-8.2-6 0-1 1-1.7 2.5-1.7 1.7 0 3.2.7 4 1.6l1.2-2.1a7.7 7.7 0 0 0-5.3-1.9c-3.4 0-5.4 1.9-5.4 4.1 0 5.2 8.2 3.3 8.2 6 0 1.1-.9 1.8-2.7 1.8-1.7 0-3.6-.9-4.6-1.9l-1.4 2.1a8.2 8.2 0 0 0 6 2.3m-10.3 0a2 2 0 0 0 2-2c0-1-.9-1.9-2-1.9s-2 .9-2 1.9c0 1.1.9 2 2 2m-7.5-.3 5.5-13.6H97l-4 10.2-4-10.2h-3L91.5 20h3.2zm-16.3-2.3c-2.5 0-3.9-2.1-3.9-4.5s1.4-4.5 3.9-4.5 3.9 2.1 3.9 4.5-1.4 4.5-3.9 4.5m0 2.6c4.3 0 7-3.3 7-7.2 0-3.9-2.6-7.1-7-7.1s-7 3.2-7 7.1c0 4 2.7 7.2 7 7.2m-16.3-2.9c-2.4 0-3.9-1.7-3.9-4.3 0-2.6 1.5-4.4 3.9-4.4 1.4 0 2.8.8 3.5 1.8v5.1c-.7 1-2.2 1.8-3.5 1.8m-.6 8.1c3.3 0 7-1.3 7-6.2V6.4h-3v1.9a5.2 5.2 0 0 0-4.4-2.2c-3.5 0-6 2.6-6 7 0 4.5 2.6 7 6 7 1.8 0 3.3-.9 4.4-2.3v1.5c0 2.9-2.1 3.8-4 3.8-1.8 0-3.2-.5-4.3-1.7l-1.4 2.1c1.7 1.5 3.4 2 5.7 2" clip-path="url(#b)"/>
+  <path fill="#fff" d="M1.1 0h48.5v29.9H1.1z"/>
+  <path fill="#0065bd" d="m7.9 1.4 17.3 10.2L42.6 1.4zm0 27.1 17.3-10.1 17.4 10.1zm-5.4-24v20.9L19.7 15zm45.7 0v20.9L30.9 15z"/>
+</svg>

package/static/images/scottish-government.svg

@@ -0,0 +1,6 @@
+<svg xmlns="http://www.w3.org/2000/svg" xml:space="preserve" viewBox="0 0 206.7 30.7">
+  <path fill="#fff" d="M0 0h46.8v28.9H0z"/>
+  <path fill="#0065bd" d="m6.5 1.3 16.8 9.9 16.8-9.9zm0 26.2 16.8-9.8 16.8 9.8zM1.3 4.3v20.3L18 14.5zm44.2 0v20.3L28.8 14.5z"/>
+  <path fill="#858b91" d="M202.7 26.1c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-15.3 0v-1.1c.6.8 1.6 1.3 2.6 1.3 2.1 0 3.6-1.6 3.6-4.2s-1.5-4.2-3.6-4.2c-1 0-1.9.5-2.6 1.3v-4.2h-1.8v11.2h1.8zm0-2.4v-3.2c.4-.6 1.3-1.1 2.1-1.1 1.4 0 2.3 1.1 2.3 2.7s-.9 2.7-2.3 2.7c-.9 0-1.7-.5-2.1-1.1m-4.5 2.6c.8 0 1.3-.2 1.7-.5l-.4-1.3c-.1.2-.5.3-.8.3-.5 0-.8-.4-.8-1v-8.8h-1.8v9.3c0 1.3.8 2 2.1 2m-6.6-4.1h-4l2-5.3 2 5.3zm3.6 3.9-4.4-11.2h-2.4l-4.4 11.2h2.2l.8-2.2h5.1l.8 2.2h2.3zm-11.9-4.8h-4v1.5h4v-1.5zm-5.7 4.8v-5.7c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3v-4.2h-1.8v11.2h1.8v-5.7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-17.5-1.3c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-9.5 0v-5.7c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1.1h-1.8v8.1h1.8v-5.7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5h1.8zm-16.5.2c2.2 0 3.4-1.1 3.4-2.5 0-3.2-4.9-2.1-4.9-3.6 0-.6.6-1 1.5-1 1 0 1.9.4 2.4 1l.7-1.2a4.8 4.8 0 0 0-3.1-1.1c-2 0-3.2 1.1-3.2 2.4 0 3.1 4.9 2 4.9 3.6 0 .6-.6 1.1-1.6 1.1a4 4 0 0 1-2.7-1.1l-.8 1.3c.7.7 2 1.1 3.4 1.1m-8.8-1.5c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-10 .2c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1v-4.2h1.6v-1.5H111v-2.2h-1.8v2.2H108v1.5h1.3v4.7c0 1.3.7 2 2.1 2m-4.8 0c.8 0 1.3-.2 1.7-.5l-.4-1.3c-.1.2-.5.3-.8.3-.5 0-.8-.4-.8-1v-8.8h-1.8v9.3c0 1.3.7 2 2.1 2m-8-1.5c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25a3 3 0 0 1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-9.6 0v-5.7c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3v-4.2h-1.8v11.2h1.8v-5.7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-13.1-1.5c-1.4 0-2.3-1-2.3-2.6s.9-2.6 2.3-2.6c.8 0 1.7.5 2.1 1.1v3a3 3 0 0 1-2.1 1.1m-.4 4.8c2 0 4.1-.8 4.1-3.7v-7.7h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.5-3.6 4.1 0 2.7 1.5 4.1 3.6 4.1a3 3 0 0 0 2.6-1.4V27c0 1.7-1.2 2.3-2.4 2.3-1.1 0-1.9-.3-2.6-1l-.8 1.3c1.1.8 2.2 1.1 3.5 1.1m-9.2-4.6c-1.4 0-2.3-1.1-2.3-2.7s.9-2.7 2.3-2.7c.8 0 1.7.5 2.1 1.1V25c-.4.6-1.3 1.1-2.1 1.1m3.8 1.3v-8.1h-1.8v1.1a3.2 3.2 0 0 0-2.6-1.3c-2.1 0-3.6 1.6-3.6 4.2 0 2.7 1.5 4.2 3.6 4.2 1.1 0 2-.5 2.6-1.3v1.1h1.8zm-9.5-8.1h-1.8v8.1h1.8v-8.1zm-.9-1c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1 0 .7.5 1.1 1.1 1.1M57 21.5h-2.7V18H57c1.1 0 1.9.7 1.9 1.8 0 1-.8 1.7-1.9 1.7m4 5.9L58.2 23c1.4-.2 2.7-1.3 2.7-3.3 0-2.1-1.5-3.5-3.7-3.5h-4.9v11.2h2v-4.2h2l2.5 4.2H61z"/>
+  <path fill="#333e48" d="M205.1 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3H203v2.2h-1.3V6h1.3v4.7c0 1.4.7 2.1 2.1 2.1m-4.7-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-10.5-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-5.9-.2V6.8c0-1.6-.9-2.4-2.3-2.4-1.2 0-2.3.8-2.7 1.5-.3-.9-1-1.5-2.2-1.5-1.2 0-2.3.8-2.6 1.3V4.6h-1.8v8.1h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.8V7c.4-.5 1.1-1.1 1.9-1.1 1 0 1.3.6 1.3 1.5v5.3h1.6zm-13.9 0V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.9 1.3v-1h-1.8v8.1h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.7v5.1h1.8zm-11.1 0V7.1c.4-.6 1.3-1.1 2.1-1.1h.5V4.4c-1 0-2 .6-2.6 1.4V4.6H155v8.1h1.8zm-5.1-4.7h-4.5c.1-1 .8-2.1 2.3-2.1 1.5 0 2.1 1.2 2.2 2.1m-2.2 4.9c1.3 0 2.5-.4 3.3-1.2l-.8-1.2c-.6.6-1.5.9-2.3.9-1.5 0-2.4-1-2.6-2.2h6.2v-.4c0-2.5-1.5-4.4-4-4.4a4 4 0 0 0-4.1 4.2c.1 2.6 1.9 4.3 4.3 4.3m-7.8-.2 3.3-8.1h-1.9l-2.4 6.1-2.4-6.1h-1.9l3.3 8.1h2zm-9.7-1.3c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2s-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-10.7 0c3.5 0 5.6-2.4 5.6-6.2h-6.1v1.7h4a3.2 3.2 0 0 1-3.3 2.7c-2.2 0-3.8-1.7-3.8-4 0-2.4 1.6-4 3.8-4 1.2 0 2.3.7 2.9 1.5l1.6-.9a5.2 5.2 0 0 0-4.5-2.3 5.7 5.7 0 0 0-5.9 5.8c0 3.5 2.7 5.7 5.7 5.7m-11.5-.2V6.9c0-1.7-.9-2.6-2.6-2.6-1.3 0-2.3.7-2.8 1.3V1.5h-1.8v11.2h1.8V7c.4-.5 1.2-1.1 2.1-1.1 1 0 1.6.4 1.6 1.6v5.1h1.7zm-12.2.2c2.2 0 3.4-1.1 3.4-2.5 0-3.2-4.9-2.1-4.9-3.6 0-.6.6-1 1.5-1 1 0 1.9.4 2.4 1l.7-1.2a4.8 4.8 0 0 0-3.1-1.1c-2 0-3.2 1.1-3.2 2.4 0 3.1 4.9 2 4.9 3.6 0 .6-.6 1.1-1.6 1.1a4 4 0 0 1-2.7-1.1l-.8 1.3c.8.7 2 1.1 3.4 1.1m-5-8.2h-1.8v8.1h1.8V4.6zm-.9-1c.6 0 1.1-.5 1.1-1.1 0-.6-.5-1.1-1.1-1.1-.6 0-1.1.5-1.1 1.1 0 .6.5 1.1 1.1 1.1M88 12.8c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6h-1.6V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-5.6 0c.8 0 1.3-.2 1.6-.5l-.4-1.3c-.1.2-.4.3-.8.3-.5 0-.8-.4-.8-1V6.1h1.6V4.6H82V2.3h-1.8v2.2h-1.3V6h1.3v4.7c.1 1.4.8 2.1 2.2 2.1m-8.3-1.5c-1.5 0-2.3-1.3-2.3-2.7 0-1.4.8-2.7 2.3-2.7 1.5 0 2.3 1.3 2.3 2.7 0 1.4-.8 2.7-2.3 2.7m0 1.5c2.6 0 4.1-1.9 4.1-4.2 0-2.3-1.6-4.2-4.1-4.2-2.6 0-4.1 1.9-4.1 4.2a4 4 0 0 0 4.1 4.2m-8.1 0c1.6 0 2.5-.7 3.1-1.4L68 10.3c-.5.6-1.1 1-1.9 1-1.5 0-2.4-1.1-2.4-2.7s1-2.7 2.4-2.7c.8 0 1.4.3 1.9.9l1.2-1.1c-.6-.7-1.6-1.3-3.2-1.3a4.1 4.1 0 0 0-4.2 4.2c.1 2.4 1.8 4.2 4.2 4.2m-9.7 0c3 0 4.3-1.6 4.3-3.5 0-4.1-6.5-2.9-6.5-4.9.1-.8.8-1.4 1.9-1.4 1.2 0 2.4.4 3.2 1.3l1.1-1.5c-1-1-2.4-1.6-4.2-1.6-2.5 0-4.1 1.4-4.1 3.3 0 4.1 6.5 2.6 6.5 5 0 .8-.6 1.5-2.2 1.5s-2.8-.7-3.5-1.6l-1.1 1.5a6 6 0 0 0 4.6 1.9"/>
+</svg>

package/tsconfig.json

@@ -35,11 +35,12 @@
   },
   "include": [
     "@types",
-    "src/**/*.tsx",
+    "src/**/*",
     "vitest.setup.ts"
   ],
   "exclude": [
     "node_modules/**/*",
-    "src/**/*.test.tsx"
+    "src/**/*.test.tsx",
+    "src/**/*.stories.tsx"
   ]
 }

package/vite.config.ts

@@ -1,17 +1,51 @@
+/// <reference types="vitest/config" />
 import { defineConfig } from 'vitest/config';
 import react from "@vitejs/plugin-react-swc";
+import path from 'node:path';
+import { fileURLToPath } from 'node:url';
+import { storybookTest } from '@storybook/addon-vitest/vitest-plugin';
+const dirname = typeof __dirname !== 'undefined' ? __dirname : path.dirname(fileURLToPath(import.meta.url));
 
+// More info at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon
 export default defineConfig({
-    plugins: [
-        react()
-    ],
-    test: {
-        environment: 'jsdom',
-        setupFiles: ["./vitest-setup.ts"],
-        coverage: {
-            exclude: ["src/images"],
-            include: ["src/**"],
-            reporter: ["text", "lcov"],
+  plugins: [react()],
+  test: {
+    environment: 'jsdom',
+    setupFiles: ["./vitest-setup.ts"],
+    coverage: {
+      exclude: ["src/images", "**/*.stories.+(tsx|ts)"],
+      include: ["src/**"],
+      reporter: ["text", "lcov"],
+    },
+    projects: [
+      {
+        extends: true,
+        test: {
+          name: 'unit',
+          environment: 'jsdom'
+        },
+      },
+      {
+        extends: true,
+        plugins: [
+        // The plugin will run tests for the stories defined in your Storybook config
+        // See options at: https://storybook.js.org/docs/next/writing-tests/integrations/vitest-addon#storybooktest
+        storybookTest({
+          configDir: path.join(dirname, '.storybook')
+        })],
+        test: {
+          name: 'storybook',
+          browser: {
+            enabled: true,
+            headless: true,
+            provider: 'playwright',
+            instances: [{
+              browser: 'chromium'
+            }]
+          },
+          setupFiles: ['.storybook/vitest.setup.ts']
         }
-    }
+      }
+    ]
+  }
 });

package/vitest-setup.ts

@@ -8,6 +8,7 @@ afterEach(() => {
 });
 
 // mock CSS.supports()
+window.global ||= window;
 Object.defineProperty(global.CSS, 'supports', {
     value: () => vi.fn()
 });

package/vitest.shims.d.ts

@@ -0,0 +1 @@
+/// <reference types="@vitest/browser/providers/playwright" />

package/src/utils/slugify.ts

@@ -1,13 +0,0 @@
-export default function (string: string) {
-    string = String(string);
-
-    return string
-        // Make lower-case
-        .toLowerCase()
-        // Remove misc punctuation
-        .replace(/['"’‘”“`]/g, '')
-        // Replace non-word characters with dashes
-        .replace(/[\W|_]+/g, '-')
-        // Remove starting and trailing dashes
-        .replace(/^-+|-+$/g, '');
-}