@altinn/altinn-components 0.57.2 → 0.58.0

package/dist/types/lib/components/Toolbar/QueryLabel.stories.d.ts

@@ -0,0 +1,11 @@
+import { StoryObj } from '@storybook/react-vite';
+declare const meta: {
+    title: string;
+    component: ({ params, size, variant, color }: import('./QueryLabel').QueryLabelProps) => import("react/jsx-runtime").JSX.Element;
+    parameters: {};
+    args: {};
+};
+export default meta;
+type Story = StoryObj<typeof meta>;
+export declare const Default: Story;
+export declare const Xxs: Story;

package/dist/types/lib/components/Toolbar/QueryLabelItem.d.ts

@@ -1,6 +1,6 @@
 import { ReactNode } from 'react';
 export type QueryItemType = 'scope' | 'search' | 'filter' | 'connector';
-export type QueryItemSize = 'xs' | 'xxs';
+export type QueryItemSize = 'default' | 'xs' | 'xxs';
 export type QueryItemVariant = 'default' | 'subtle';
 export interface QueryItemProps {
     type?: QueryItemType;

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

@@ -9,5 +9,6 @@ export interface ToolbarProps {
     filter?: ToolbarFilterProps;
     disabled?: boolean;
     children?: ReactNode;
+    controls?: ReactNode;
 }
-export declare const Toolbar: ({ accountMenu, menus, search, filter, disabled, children }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: ({ accountMenu, menus, search, filter, disabled, controls, children }: ToolbarProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1,7 +1,7 @@
 import { ToolbarFilterProps, ToolbarMenuProps } from './';
 declare const meta: {
     title: string;
-    component: ({ accountMenu, menus, search, filter, disabled, children }: import('./Toolbar').ToolbarProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ accountMenu, menus, search, filter, disabled, controls, children }: import('./Toolbar').ToolbarProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     decorators: ((Story: import('storybook/internal/csf').PartialStoryFn<import('@storybook/react-vite').ReactRenderer, {
         accountMenu?: ToolbarMenuProps | undefined;
@@ -10,6 +10,7 @@ declare const meta: {
         filter?: ToolbarFilterProps | undefined;
         disabled?: boolean | undefined;
         children?: import('react').ReactNode;
+        controls?: import('react').ReactNode;
     }>, _: import('storybook/internal/csf').StoryContext<import('@storybook/react-vite').ReactRenderer, {
         accountMenu?: ToolbarMenuProps | undefined;
         menus?: ToolbarMenuProps[] | undefined;
@@ -17,6 +18,7 @@ declare const meta: {
         filter?: ToolbarFilterProps | undefined;
         disabled?: boolean | undefined;
         children?: import('react').ReactNode;
+        controls?: import('react').ReactNode;
     }>) => import("react/jsx-runtime").JSX.Element)[];
     args: {};
 };

package/dist/types/lib/components/Toolbar/ToolbarControls.d.ts

@@ -0,0 +1,6 @@
+import { ReactNode } from 'react';
+export interface ToolbarControlsProps {
+    className?: string;
+    children?: ReactNode;
+}
+export declare const ToolbarControls: ({ className, children }: ToolbarControlsProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarFilter.d.ts

@@ -1,3 +1,4 @@
+import { ReactNode } from 'react';
 import { FilterProps, FilterState } from './useFilter';
 export interface ToolbarFilterProps {
     disabled?: boolean;
@@ -11,5 +12,6 @@ export interface ToolbarFilterProps {
     filterState?: FilterState;
     onFilterStateChange?: (state: FilterState) => void;
     virtualized?: boolean;
+    controls?: ReactNode;
 }
-export declare const ToolbarFilter: ({ disabled, filters, filterState, onFilterStateChange, addLabel, addNextLabel, resetLabel, removeLabel, submitLabel, getFilterLabel, virtualized, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ToolbarFilter: ({ disabled, filters, filterState, onFilterStateChange, addLabel, addNextLabel, resetLabel, removeLabel, submitLabel, getFilterLabel, virtualized, controls, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/types/lib/components/Toolbar/ToolbarFilter.stories.d.ts

@@ -1,7 +1,7 @@
 import { ToolbarFilterProps } from './ToolbarFilter';
 declare const meta: {
     title: string;
-    component: ({ disabled, filters, filterState, onFilterStateChange, addLabel, addNextLabel, resetLabel, removeLabel, submitLabel, getFilterLabel, virtualized, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
+    component: ({ disabled, filters, filterState, onFilterStateChange, addLabel, addNextLabel, resetLabel, removeLabel, submitLabel, getFilterLabel, virtualized, controls, }: ToolbarFilterProps) => import("react/jsx-runtime").JSX.Element;
     parameters: {};
     args: {};
 };

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

@@ -11,6 +11,7 @@ export * from './Breadcrumbs';
 export * from './Button';
 export * from './Byline';
 export * from './ContextMenu';
+export * from './Inbox';
 export * from './Dialog';
 export * from './Divider';
 export * from './Dropdown';

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.2",
+  "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"