@mobielnl/elements 0.10.0 → 0.10.2

package/dist/index.d.ts

@@ -1,11 +1,10 @@
+import { ElementType } from 'react';
 import { JSX } from 'react/jsx-runtime';
-import { PopoverContentClassNames } from '../../../lib/hooks/usePopoverProps';
 import { ReactNode } from 'react';
-import { z } from 'zod';
-import * as z_2 from 'zod';
+import * as z from 'zod';
 
 /** Union type of all action events */
-declare type ActionEvent = FiltersChangedEvent | SortChangedEvent | ProfileChangedEvent | DealSelectedEvent | DetailsViewedEvent;
+export declare type ActionEvent = FiltersChangedEvent | SortChangedEvent | ProfileChangedEvent | DealSelectedEvent | DetailsViewedEvent;
 
 declare type ActiveFilterChipsClassNames = {
     /** The container of the filter chips */
@@ -14,6 +13,16 @@ declare type ActiveFilterChipsClassNames = {
     filterChip?: FilterChipClassNames;
 };
 
+export declare type Address = z.infer<typeof addressSchema>;
+
+declare const addressSchema: z.ZodObject<{
+    postcode: z.ZodString;
+    number: z.ZodString;
+    numberAddon: z.ZodPipe<z.ZodOptional<z.ZodString>, z.ZodTransform<string | undefined, string | undefined>>;
+    street: z.ZodString;
+    city: z.ZodString;
+}, z.core.$strip>;
+
 declare type AverageSectionClassNames = {
     /** Container for the average per month section */
     container?: string;
@@ -67,6 +76,11 @@ declare type AverageSectionClassNames = {
     };
 };
 
+export declare type Block = {
+    scope: string;
+    amount: number;
+};
+
 declare type ChannelsClassNames = {
     /** The base slot of the channels section, it is the container of the channels section */
     base?: string;
@@ -231,7 +245,7 @@ declare type CreditInfoClassNames_2 = {
 };
 
 /** Event fired when a deal/proposition is selected (clicked) */
-declare type DealSelectedEvent = {
+export declare type DealSelectedEvent = {
     type: 'deal_selected';
     /** The full proposition data */
     proposition: ProductCardPropositionFragment;
@@ -265,7 +279,7 @@ declare type DetailsModalClassNames = {
 declare type DetailsModalTab = 'general' | 'conditions' | 'channels' | 'costs';
 
 /** Event fired when proposition details are viewed */
-declare type DetailsViewedEvent = {
+export declare type DetailsViewedEvent = {
     type: 'details_viewed';
     /** The full proposition data */
     proposition: ProductCardPropositionFragment;
@@ -423,8 +437,13 @@ declare type FilterChipClassNames = {
     closeButton?: string;
 };
 
+/**
+ * Configuration for a single filter option
+ */
+export declare type FilterOption = NonNullable<PageByPathQuery['page']>['pageFilters'][number];
+
 /** Event fired when filter values change */
-declare type FiltersChangedEvent = {
+export declare type FiltersChangedEvent = {
     type: 'filters_changed';
     /** The filter that was changed */
     filter: {
@@ -462,7 +481,7 @@ declare type FiltersClassNames = {
 /**
  * Represents an active filter value selected by the user
  */
-declare type FilterValue = {
+export declare type FilterValue = {
     /** Identifier slug matching the corresponding `FilterOption.slug` */
     slug: string;
     /** The selected value(s) - type depends on filter type:
@@ -475,6 +494,15 @@ declare type FilterValue = {
     value: string | string[];
 };
 
+export declare type FixedBlock = {
+    scope: string;
+    provider: {
+        name: string;
+        imageUrl: string;
+        rank: number;
+    };
+};
+
 declare type GeneralClassNames = {
     /** The base slot of the general section, it is the container of the general section */
     base?: string;
@@ -499,9 +527,9 @@ declare type ListBoxClassNames = {
     selectedIcon?: string;
 };
 
-declare type Locale = 'nl' | 'en' | string;
+export declare type Locale = 'nl' | 'en' | string;
 
-declare type LocalizedTranslations = {
+export declare type LocalizedTranslations = {
     /** Can be partial as undefined values fallback to default 'nl' translations */
     nl: PartialTranslations;
 } | {
@@ -559,7 +587,8 @@ declare type ModalClassNames = {
     wrapper?: string;
     /** The main slot of the modal content */
     base?: string;
-    /** The header of the modal, it is displayed at the top of the modal */
+    /** The header of the modal, it is displayed at the top of the modal
+     * @example "Filters" */
     header?: string;
     /** The body of the modal, it is displayed in the middle of the modal */
     body?: string;
@@ -567,6 +596,9 @@ declare type ModalClassNames = {
     footer?: string;
     /** The close button (X) of the modal in top-right corner */
     closeButton?: string;
+    /** The primary button of the modal, it is displayed at the bottom of the modal
+     * @example "Toon resultaten" */
+    primaryButton?: string;
 };
 
 declare type ModalClassNames_2 = {
@@ -576,8 +608,7 @@ declare type ModalClassNames_2 = {
     wrapper?: string;
     /** The main slot of the modal content */
     base?: string;
-    /** The header of the modal, it is displayed at the top of the modal
-     * @example "Filters" */
+    /** The header of the modal, it is displayed at the top of the modal */
     header?: string;
     /** The body of the modal, it is displayed in the middle of the modal */
     body?: string;
@@ -585,9 +616,6 @@ declare type ModalClassNames_2 = {
     footer?: string;
     /** The close button (X) of the modal in top-right corner */
     closeButton?: string;
-    /** The primary button of the modal, it is displayed at the bottom of the modal
-     * @example "Toon resultaten" */
-    primaryButton?: string;
 };
 
 declare type ModalClassNames_3 = {
@@ -741,10 +769,56 @@ declare type NumberPreservationModalClassNames = {
     submitButton?: string;
 };
 
-declare type PartialTranslations = Partial<{
+declare type PageByPathQuery = {
+    __typename?: 'RootQueryType';
+    page?: {
+        __typename?: 'Page';
+        productCategory: string;
+        filter: string;
+        filterDefaults: string;
+        pageFilters: Array<{
+            __typename?: 'PageFilter';
+            id: string;
+            name: string;
+            shortName: string;
+            slug: string;
+            column: string;
+            type: string;
+            valueType: string;
+            dynamic: boolean;
+            min?: number | null;
+            max?: number | null;
+            rank: number;
+            operator: string;
+            url?: string | null;
+            formatType: string;
+            showCounts: boolean;
+            options: Array<{
+                __typename?: 'PageFilterOption';
+                name: string;
+                descriptiveName: string;
+                value: string;
+            }>;
+            aliases: Array<{
+                __typename?: 'PageFilterAlias';
+                name: string;
+                value: string;
+            }>;
+        }>;
+    } | null;
+};
+
+export declare type PartialTranslations = Partial<{
     [key in keyof Translations]: Partial<Translations[key]>;
 }>;
 
+declare type PopoverContentClassNames = {
+    base?: string;
+    trigger?: string;
+    backdrop?: string;
+    content?: string;
+};
+
 declare type PostcodeCheckLoadingClassNames = {
     /** Base wrapper */
     base?: string;
@@ -760,9 +834,9 @@ declare type PostcodeCheckLoadingClassNames = {
     addressText?: string;
 };
 
-export declare type PostcodeCheckModalClassNames = {
+declare type PostcodeCheckModalClassNames = {
     /** Modal dialog class styling slots - see type `ModalClassNames` */
-    modal?: ModalClassNames;
+    modal?: ModalClassNames_2;
     /** Header section containing icon and title */
     header?: {
         /** Container wrapping the header content */
@@ -1096,16 +1170,24 @@ export declare function ProductResults({ classNames, initialSelectedFilters, ini
 export declare type ProductResultsClassNames = {
     /** Wrapper container for the entire product results */
     base?: string;
+    /** Wrapper container for the header section above the results
+     * - Wraps on mobile+tablet the `filterButton` and `sortSelect`
+     * - Wraps on desktop the `activeFilterChips` and `sortSelect` */
+    headerWrapper?: string;
     /** Active filters component class styling slots - see type `ActiveFilterChipsClassNames` */
     activeFilterChips?: ActiveFilterChipsClassNames;
     /** SortSelect component class styling slots - see type `SortSelectClassNames` */
     sortSelect?: SortSelectClassNames;
+    /** Profile buttons component class styling slots - see type `SelectorClassNames` */
+    profileButton?: SelectorClassNames;
+    /** Phone selector button component class styling slots - see type `SelectorClassNames` */
+    phoneSelectorButton?: SelectorClassNames;
     /** Filters component class styling slots (both filters in sidebar and in modal) - see type `FiltersClassNames` */
     filters?: FiltersClassNames;
     /** Filter button (only on mobile & tablet screens) */
     filterButton?: string;
     /** Filter modal class styling slots - see type `ModalClassNames` */
-    filterModal?: ModalClassNames_2;
+    filterModal?: ModalClassNames;
     /** Postcode check modal class styling slots - see type `PostcodeCheckModalClassNames` */
     postcodeCheckModal?: PostcodeCheckModalClassNames;
     /** CombiDeal modal class styling slots - see type `CombiDealModalClassNames` */
@@ -1210,37 +1292,37 @@ declare enum ProductVersionStatusEnum {
     Unavailable = "UNAVAILABLE"
 }
 
-declare type Profile = z.infer<typeof profileSchema>;
+export declare type Profile = z.infer<typeof profileSchema>;
 
 /** Event fired when user profile changes */
-declare type ProfileChangedEvent = {
+export declare type ProfileChangedEvent = {
     type: 'profile_changed';
     from: Partial<Profile>;
     to: Partial<Profile>;
 };
 
-declare const profileSchema: z_2.ZodObject<{
-    keepCurrentMsisdn: z_2.ZodOptional<z_2.ZodBoolean>;
-    currentMsisdn: z_2.ZodOptional<z_2.ZodString>;
-    currentSubscriptionType: z_2.ZodOptional<z_2.ZodEnum<{
+declare const profileSchema: z.ZodObject<{
+    keepCurrentMsisdn: z.ZodOptional<z.ZodBoolean>;
+    currentMsisdn: z.ZodOptional<z.ZodString>;
+    currentSubscriptionType: z.ZodOptional<z.ZodEnum<{
         subscription: "subscription";
         prepaid: "prepaid";
     }>>;
-    currentProviderSlug: z_2.ZodOptional<z_2.ZodString>;
-    currentFixedProviderScope: z_2.ZodOptional<z_2.ZodString>;
-    currentMobileProviders: z_2.ZodOptional<z_2.ZodArray<z_2.ZodObject<{
-        scope: z_2.ZodString;
-        value: z_2.ZodString;
-    }, z_2.core.$strip>>>;
-    customerSegment: z_2.ZodOptional<z_2.ZodNullable<z_2.ZodString>>;
-    address: z_2.ZodOptional<z_2.ZodObject<{
-        postcode: z_2.ZodString;
-        number: z_2.ZodString;
-        numberAddon: z_2.ZodPipe<z_2.ZodOptional<z_2.ZodString>, z_2.ZodTransform<string | undefined, string | undefined>>;
-        street: z_2.ZodString;
-        city: z_2.ZodString;
-    }, z_2.core.$strip>>;
-}, z_2.core.$strip>;
+    currentProviderSlug: z.ZodOptional<z.ZodString>;
+    currentFixedProviderScope: z.ZodOptional<z.ZodString>;
+    currentMobileProviders: z.ZodOptional<z.ZodArray<z.ZodObject<{
+        scope: z.ZodString;
+        value: z.ZodString;
+    }, z.core.$strip>>>;
+    customerSegment: z.ZodOptional<z.ZodNullable<z.ZodString>>;
+    address: z.ZodOptional<z.ZodObject<{
+        postcode: z.ZodString;
+        number: z.ZodString;
+        numberAddon: z.ZodPipe<z.ZodOptional<z.ZodString>, z.ZodTransform<string | undefined, string | undefined>>;
+        street: z.ZodString;
+        city: z.ZodString;
+    }, z.core.$strip>>;
+}, z.core.$strip>;
 
 /**
  * ClassNames for styling the `PromotionList` component within `PropositionCard`
@@ -1374,16 +1456,16 @@ declare type PropositionHeaderClassNames = {
     };
 };
 
-declare type PropositionLabel = {
+export declare type PropositionLabel = {
     type: PropositionLabelType;
     displayName: string;
     rank: number;
     color: PropositionLabelColor;
 };
 
-declare type PropositionLabelColor = 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger';
+export declare type PropositionLabelColor = 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger';
 
-declare type PropositionLabelType = 'isRetention' | 'isCheapestPhone' | 'isBudget' | 'isBudgetFiber' | 'isCombi' | 'isFastestInternet' | 'isBudgetOwnNetwork' | 'isBudgetNetwork';
+export declare type PropositionLabelType = 'isRetention' | 'isCheapestPhone' | 'isBudget' | 'isBudgetFiber' | 'isCombi' | 'isFastestInternet' | 'isBudgetOwnNetwork' | 'isBudgetNetwork';
 
 declare type PropositionOverviewClassNames = {
     /** The base container of the proposition overview */
@@ -1398,6 +1480,13 @@ declare type PropositionOverviewClassNames = {
     creditInfo?: CreditInfoClassNames_2;
 };
 
+export declare type ProviderOption = {
+    slug: string;
+    name: string;
+    imageUrl: string | undefined;
+    Icon?: ElementType;
+};
+
 /**
  * ClassNames for styling different parts of the `RadioFilter` component
  */
@@ -1534,6 +1623,35 @@ declare type SelectFilterClassNames = {
     collapseLink?: string;
 };
 
+/**
+ * ClassNames for styling different parts of the `Selector` component
+ */
+declare type SelectorClassNames = {
+    /** Title text styling */
+    title?: string;
+    /** Description text styling */
+    description?: string;
+    /** Main button wrapper */
+    button?: string;
+    /** Icon component styling - chevron/edit icon */
+    icon?: string;
+    /** Badge component (visible when not selected) */
+    badge?: string;
+    /** Avatar component displaying the image or icon */
+    avatar?: {
+        /** Base wrapper styling for the avatar container */
+        base?: string;
+        /** Image element styling */
+        img?: string;
+        /** Name text styling (when displaying initials) */
+        name?: string;
+        /** Icon wrapper styling */
+        icon?: string;
+        /** Fallback content styling (when no image is available) */
+        fallback?: string;
+    };
+};
+
 /**
  * ClassNames for styling different parts of the `RangeFilter`, `MinFilter` and `MaxFilter` component
  */
@@ -1568,7 +1686,7 @@ declare type SliderFilterClassNames = {
 };
 
 /** Event fired when sort option changes */
-declare type SortChangedEvent = {
+export declare type SortChangedEvent = {
     type: 'sort_changed';
     from: string | undefined;
     to: string;
@@ -1649,7 +1767,7 @@ declare type TermsClassNames = {
     base?: string;
 } & SectionClassNames;
 
-declare type Translations = {
+export declare type Translations = {
     common: {
         yes: string;
         no: string;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.10.0",
+  "version": "0.10.2",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -84,6 +84,7 @@
     "@types/react": "^19.1.10",
     "@types/react-dom": "^19.1.7",
     "@vitejs/plugin-react-swc": "^4.0.0",
+    "chromatic": "^13.3.5",
     "cross-env": "^7.0.3",
     "globals": "^16.3.0",
     "graphql": "^16.11.0",
@@ -91,6 +92,8 @@
     "i18next": "^25.7.3",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
+    "msw": "^2.12.7",
+    "msw-storybook-addon": "^2.0.6",
     "postcss-prefix-selector": "^2.1.1",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
@@ -106,6 +109,11 @@
     "vitest": "^3.2.4",
     "zod": "^4.1.12"
   },
+  "msw": {
+    "workerDirectory": [
+      "public"
+    ]
+  },
   "scripts": {
     "predev": "pnpm install && pnpm generate:graph",
     "dev": "storybook dev -p 6006",
@@ -121,6 +129,7 @@
     "generate:graph": "DOTENV_CONFIG_PATH=\".env\" graphql-codegen --require dotenv/config --config codegen.yml",
     "format": "biome format --write",
     "lint": "biome lint --write",
-    "check": "biome check --write"
+    "check": "biome check --write",
+    "chromatic": "npx chromatic --build-script-name storybook:build"
   }
 }