@altinn/altinn-components 0.57.3 → 0.58.0

package/dist/types/lib/components/Bulk/Bulk.stories.d.ts

@@ -7,7 +7,10 @@ declare const meta: {
     args: {};
 };
 export default meta;
-export declare const Default: ({ defaultBulkIds, }: {
+export declare const Default: ({ defaultAccountId, defaultBulkIds, }: {
+    defaultAccountId?: string;
     defaultBulkIds?: string[];
 }) => import("react/jsx-runtime").JSX.Element;
 export declare const BulkModeOn: () => import("react/jsx-runtime").JSX.Element;
+export declare const Company: () => import("react/jsx-runtime").JSX.Element;
+export declare const CompanyBulkMode: () => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Bulk/BulkButton.d.ts

@@ -4,5 +4,6 @@ export interface BulkButtonProps {
     icon: SvgElement;
     label: string;
     onClick?: () => void;
+    loading?: boolean;
 }
-export declare const BulkButton: ({ icon, label, onClick }: BulkButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const BulkButton: ({ icon, label, onClick, loading }: BulkButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/ContextMenu/ContextMenu.d.ts

@@ -1,9 +1,10 @@
 import { DropdownProps } from '../Dropdown';
-import { MenuProps } from '../Menu';
+import { MenuItemColor, MenuProps } from '../Menu';
 export interface ContextMenuProps extends MenuProps {
     id?: string;
     title?: string;
     placement?: DropdownProps['placement'];
     'aria-label'?: string;
+    color?: MenuItemColor;
 }
-export declare const ContextMenu: ({ groups, items, title, id, placement, "aria-label": ariaLabel, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ContextMenu: ({ groups, items, title, color, id, placement, "aria-label": ariaLabel, }: ContextMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dropdown/Dropdown.d.ts

@@ -1,9 +1,11 @@
 import { ReactNode } from 'react';
+import { Color } from '..';
 export type DropdownSize = 'auto' | 'sm' | 'md' | 'lg';
 export type DropdownPlacement = 'left' | 'right' | 'bottom' | 'top' | 'bottom-left' | 'bottom-right' | 'top-left' | 'top-right';
 export type DropdownVariant = 'dropdown' | 'drawer' | 'drawer-dropdown' | 'header-dropdown' | 'header';
 export interface DropdownProps {
     id?: string;
+    color?: Color;
     className?: string;
     backdrop?: boolean;
     placement?: DropdownPlacement;
@@ -21,4 +23,4 @@ export interface DropdownProps {
     useFixedPosition?: boolean;
     expanded?: boolean;
 }
-export declare const Dropdown: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Dropdown: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, color, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dropdown/Dropdown.stories.d.ts

@@ -1,7 +1,7 @@
 import { DropdownProps } from './Dropdown';
 declare const meta: {
     title: string;
-    component: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ id, size, className, backdrop, placement, variant, title, closeLabel, submitLabel, trigger, children, open, onClose, color, onSubmit, activeDescendantId, useFixedPosition, expanded, }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
     tags: string[];
     parameters: {};
     args: {
@@ -11,4 +11,3 @@ declare const meta: {
 export default meta;
 export declare const DropdownMenu: ({ title, placement }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
 export declare const DrawerMenu: ({ title, placement }: DropdownProps) => import("react/jsx-runtime").JSX.Element;
-export declare const DrawerOrDropdownMenu: ({ title, placement }: DropdownProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Dropdown/index.d.ts

@@ -6,5 +6,4 @@ export * from './DrawerHeader';
 export * from './DrawerFooter';
 export * from './DrawerButton';
 export * from './DrawerBody';
-export * from './DrawerOrDropdown';
 export * from './FloatingDropdown';

package/dist/types/lib/components/Forms/SearchField.stories.d.ts

@@ -16,4 +16,5 @@ export declare const Default: Story;
 export declare const ClearButton: Story;
 export declare const DebouncedQuery: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Controlled: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Collapsible: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;
 export declare const Autocomplete: (args: SearchFieldProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Menu/VirtualizedMenu.stories.d.ts

@@ -17,6 +17,27 @@ declare const meta: {
     };
 };
 export default meta;
-export declare const NotVirtualized: () => import("react/jsx-runtime").JSX.Element;
-export declare const Virtualized: () => import("react/jsx-runtime").JSX.Element;
-export declare const ToolbarVirtualizedMenu: () => import("react/jsx-runtime").JSX.Element;
+export declare const NotVirtualized: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        screenshot: {
+            skip: boolean;
+        };
+    };
+};
+export declare const Virtualized: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        screenshot: {
+            skip: boolean;
+        };
+    };
+};
+export declare const ToolbarVirtualizedMenu: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        screenshot: {
+            skip: boolean;
+        };
+    };
+};

package/dist/types/lib/test-utils/screenshot-compare.d.ts

@@ -0,0 +1,49 @@
+export interface ComparisonResult {
+    match: boolean;
+    mismatchedPixels: number;
+    totalPixels: number;
+    percentage: number;
+    error?: string;
+    baselineCreated?: boolean;
+}
+/**
+ * Compare two PNG screenshots pixel-by-pixel.
+ * - If baseline doesn't exist: auto-creates it from actual (first run)
+ * - If baseline exists: compares pixel-by-pixel and generates diff image on mismatch
+ *
+ * @param actualPath - Screenshot captured during test run (.screenshots-temp/actual/)
+ * @param baselinePath - Reference screenshot (lib/components/.../\_\_screenshots\_\_/)
+ * @param diffPath - Where to save diff image on mismatch (.screenshots-temp/diff/)
+ * @param threshold - Pixel matching threshold (0-1), defaults to 0.1
+ * @returns Comparison result with match status and pixel difference details
+ */
+export declare function compareScreenshots(actualPath: string, baselinePath: string, diffPath: string, threshold?: number): Promise<ComparisonResult>;
+/**
+ * Clean up temporary screenshot directories created during testing.
+ */
+export declare function cleanupTemporaryFiles(): Promise<void>;
+interface ComparisonFailure {
+    testName: string;
+    actualPath: string;
+    baselinePath: string;
+    diffPath: string;
+    percentage: number;
+    mismatchedPixels: number;
+    totalPixels: number;
+    error?: string;
+}
+/**
+ * Compare all captured screenshots against baselines.
+ * - Baselines are stored in component-local \_\_screenshots\_\_ directories
+ * - If baseline doesn't exist, it's auto-created from the actual screenshot
+ * - Diff images are saved to .screenshots-temp/diff/ for failed comparisons
+ *
+ * @param filterPattern - Optional pattern to filter screenshots (e.g., "Button")
+ * @returns Summary of passed tests, failures, and newly created baselines
+ */
+export declare function compareAllScreenshots(filterPattern?: string): Promise<{
+    passed: number;
+    failed: ComparisonFailure[];
+    baselinesCreated: number;
+}>;
+export {};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@altinn/altinn-components",
-  "version": "0.57.3",
+  "version": "0.58.0",
   "main": "dist/index.js",
   "files": [
     "dist/",
@@ -38,7 +38,9 @@
     "@storybook/addon-vitest": "10.2.10",
     "@storybook/react-vite": "10.2.10",
     "@testing-library/react": "^16.3.0",
+    "@storycap-testrun/browser": "^2.0.0",
     "@types/node": "^25.0.7",
+    "@types/pngjs": "^6.0.5",
     "@types/react": "^19.1.5",
     "@types/react-dom": "^19.1.5",
     "@vitejs/plugin-react-swc": "^3.9.0",
@@ -49,18 +51,20 @@
     "axe-playwright": "^2.1.0",
     "glob": "^13.0.6",
     "lint-staged": "^15.5.2",
+    "pixelmatch": "^7.1.0",
     "playwright": "^1.57.0",
+    "pngjs": "^7.0.0",
     "rollup-preserve-directives": "^1.1.3",
     "storybook": "10.2.10",
     "storybook-addon-tag-badges": "^3.0.4",
     "storybook-addon-theme-provider": "^0.2.10",
     "tsx": "^4.21.0",
     "typescript": "^5.8.3",
-    "vite": "7.3.1",
+    "vite": "7.3.2",
     "vite-plugin-dts": "^4.5.4",
     "vite-plugin-lib-inject-css": "^2.2.2",
     "vite-plugin-static-copy": "^2.3.2",
-    "vitest": "4.0.16"
+    "vitest": "4.0.18"
   },
   "peerDependencies": {
     "react": ">=18.3.1 || ^19.0.0",
@@ -87,6 +91,9 @@
     "ci:build-storybook": "storybook build --quiet",
     "test-storybook": "vitest --run --project=storybook",
     "test-storybook-watch": "vitest --project=storybook",
+    "test:screenshots": "rm -rf .screenshots-temp/actual && SCREENSHOT_MODE=test vitest --run --project=storybook && node --import tsx lib/test-utils/screenshot-compare.ts",
+    "test:screenshots:filter": "bash scripts/test-screenshots-filter.sh",
+    "test:screenshots:regenerate-all": "node --import tsx scripts/regenerate-screenshots.ts",
     "ci:test-storybook": "pnpm dlx concurrently -k -s first \"pnpm storybook\" \"pnpm dlx wait-on http://localhost:6006 && pnpm test-storybook\"",
     "install:browsers": "pnpm exec playwright install",
     "build-tokens": "node --import tsx scripts/build-tokens.ts && pnpm biome check ./lib/css/tokens/design-tokens-build/. --write"