@scottish-government/designsystem-react 0.0.0

package/src/components/warning-text/warning-text.test.tsx

@@ -0,0 +1,40 @@
+import { test, expect } from 'vitest';
+import { render } from '@testing-library/react';
+import WarningText from './warning-text';
+
+const text = `Call 999 if you or someone else is in immediate danger, or if the crime is in progress.`;
+
+test('warning text renders correctly', () => {
+
+    render(
+        <WarningText>
+            {text}
+        </WarningText>
+    );
+
+    const warningTextOuter = document.querySelector('.ds_warning-text');
+    const warningTextInner = warningTextOuter?.querySelector('.ds_warning-text__text');
+    const warningTextIcon = warningTextOuter?.querySelector('.ds_warning-text__icon');
+    const warningTextTitle = warningTextOuter?.querySelector('strong.visually-hidden');
+
+    expect(warningTextOuter).toBeInTheDocument();
+    expect(warningTextInner).toBeInTheDocument();
+    expect(warningTextInner?.textContent).toEqual(text);
+
+    expect(warningTextIcon).toHaveAttribute('aria-hidden');
+    expect(warningTextTitle?.textContent).toEqual('Warning');
+
+    expect(warningTextInner?.previousSibling).toEqual(warningTextTitle);
+    expect(warningTextTitle?.previousSibling).toEqual(warningTextIcon);
+});
+
+test('passing additional props', () => {
+    render(
+        <WarningText data-test="foo">
+            {text}
+        </WarningText>
+    )
+
+    const warningTextOuter = document.querySelector('.ds_warning-text');
+    expect(warningTextOuter?.dataset.test).toEqual('foo');
+});

package/src/components/warning-text/warning-text.tsx

@@ -0,0 +1,21 @@
+const WarningText: React.FC<React.PropsWithChildren> = ({
+    children,
+    ...props
+}) => {
+    return (
+        <div
+            className="ds_warning-text"
+            {...props}
+        >
+            <strong className="ds_warning-text__icon" aria-hidden="true"></strong>
+            <strong className="visually-hidden">Warning</strong>
+            <div className="ds_warning-text__text">
+                {children}
+            </div>
+        </div>
+    );
+};
+
+WarningText.displayName = 'WarningText';
+
+export default WarningText;

package/tsconfig.json

@@ -0,0 +1,45 @@
+{
+  "compilerOptions": {
+    "allowJs": false,
+    "jsx": "preserve",
+    "module": "NodeNext",
+    "moduleResolution": "nodenext",
+    "outDir": "./dist",
+    "paths": {
+      "@/*": [
+        "./*"
+      ],
+      "@design-system/*": [
+        "./node_modules/@scottish-government/design-system/src/*"
+      ]
+    },
+    "target": "esnext",
+    "types": [],
+    "typeRoots": [
+      "./node_modules/@types",
+      "./@types"
+    ],
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "incremental": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true,
+
+    "noFallthroughCasesInSwitch": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "strict": true
+  },
+  "include": [
+    "@types",
+    "src/**/*.tsx",
+    "vitest.setup.ts"
+  ],
+  "exclude": [
+    "node_modules/**/*",
+    "src/**/*.test.tsx"
+  ]
+}

package/vite.config.ts

@@ -0,0 +1,12 @@
+import { defineConfig } from 'vitest/config';
+import react from "@vitejs/plugin-react-swc";
+
+export default defineConfig({
+    plugins: [
+        react()
+    ],
+    test: {
+        environment: 'jsdom',
+        setupFiles: ["./vitest-setup.ts"]
+    }
+});

package/vitest-setup.ts

@@ -0,0 +1,13 @@
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+import { cleanup } from '@testing-library/react';
+import { afterEach } from 'vitest';
+
+afterEach(() => {
+  cleanup();
+});
+
+// mock CSS.supports()
+Object.defineProperty(global.CSS, 'supports', {
+    value: () => vi.fn()
+});