@mobielnl/elements 0.9.0 → 0.10.0

package/dist/index.d.ts

@@ -1,4 +1,5 @@
 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';
@@ -342,6 +343,51 @@ export declare type ElementsRootProps = {
         css?: string;
         cssUrl?: string;
     };
+    /**
+     * Translations per locale for customizing copy/tone of voice
+     *
+     * @example
+     * translations={{
+     *  // Locale 'nl' can be partial as undefined values fallback to default 'nl' translations
+     *  nl: {
+     *    common: {
+     *      yes: 'Ja',
+     *    },
+     *  },
+     *  // Locale 'en' can be partial as undefined values fallback to default 'en' translations
+     *  en: {
+     *    common: {
+     *      yes: 'Yes',
+     *    },
+     *  },
+     *  // Other locales require complete translations
+     *  de: {
+     *    common: {
+     *      yes: 'Ja',
+     *      no: 'Nein',
+     *      confirm: 'Bestätigen',
+     *      cancel: 'Abbrechen',
+     *      loading: 'Laden...',
+     *      close: 'Schließen',
+     *      next: 'Weiter',
+     *      previous: 'Zurück',
+     *      select: 'Auswählen',
+     *      save: 'Speichern',
+     *      back: 'Zurück',
+     *    },
+     *    numberPreservation: {
+     *      ...
+     *    },
+     *    ... // complete Translations object
+     *  }}
+     */
+    translations?: LocalizedTranslations;
+    /**
+     * Current locale for the UI
+     * @default 'nl'
+     * @example locale="en"
+     */
+    locale?: Locale;
 };
 
 declare type ErrorAlertClassNames = {
@@ -453,6 +499,19 @@ declare type ListBoxClassNames = {
     selectedIcon?: string;
 };
 
+declare type Locale = 'nl' | 'en' | string;
+
+declare type LocalizedTranslations = {
+    /** Can be partial as undefined values fallback to default 'nl' translations */
+    nl: PartialTranslations;
+} | {
+    /** Can be partial as undefined values fallback to default 'en' translations */
+    en: PartialTranslations;
+} | {
+    /** Complete Translations object as there is no fallback object for other locales */
+    [locale: string]: Translations;
+};
+
 /**
  * ClassNames for styling the `MainImage` component within `PropositionCard`
  */
@@ -476,7 +535,9 @@ declare type MainImageClassNames = {
             /** Stock indicator icon */
             icon?: string;
             /** Stock indicator text
-             * @example "Direct leverbaar" */
+             * @example "Direct leverbaar"
+             * @example "Pre-order"
+             * @example "In bestelling" */
             text?: string;
         };
     };
@@ -680,12 +741,9 @@ declare type NumberPreservationModalClassNames = {
     submitButton?: string;
 };
 
-declare type PopoverContentClassNames = {
-    base?: string;
-    trigger?: string;
-    backdrop?: string;
-    content?: string;
-};
+declare type PartialTranslations = Partial<{
+    [key in keyof Translations]: Partial<Translations[key]>;
+}>;
 
 declare type PostcodeCheckLoadingClassNames = {
     /** Base wrapper */
@@ -1067,18 +1125,33 @@ export declare type ProductResultsProps = {
      *
      * Not available for smartphone propositions when no phone is selected */
     showTopPropositions?: boolean;
-    /** Customize texts  */
-    texts?: {
-        /** Title above profile buttons
-         * @default "Personaliseer" */
-        profileTitle?: string;
-        /** Title above top propositions (only shown when `showTopPropositions` is set to `true`)
-         * @default "Beste providers voor jou" */
-        topPropositionsTitle?: string;
-        /** Title above all propositions (only shown when `showTopPropositions` is set to `true`)
-         * @default "Alle providers op een rijtje" */
-        allPropositionsTitle?: string;
-    };
+    /** Configure the color of the labels for the propositions
+     *
+     * @example color: 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger'
+     * @default 'primary'
+     *
+     * @example
+     * {
+     *   isRetention: 'primary',
+     *   isCheapestPhone: 'secondary',
+     *   isBudget: 'default',
+     *   isBudgetFiber: 'success',
+     *   isCombi: 'warning',
+     *   isFastestInternet: 'danger',
+     *   isBudgetOwnNetwork: 'success',
+     *   isBudgetNetwork: 'success'
+     * }
+     *
+     * It is possible to configure a selection of the label types
+     * The other label types will default to 'primary'
+     *
+     * @example
+     * {
+     *   isRetention: 'danger',
+     *   isCombi: 'warning'
+     * }
+     */
+    labelColorConfig?: Partial<Record<PropositionLabel['type'], PropositionLabel['color']>>;
     /** Initial selected filters */
     initialSelectedFilters?: FilterValue[];
     /** Limit the number of propositions to display */
@@ -1089,7 +1162,7 @@ export declare type ProductResultsProps = {
     initialProfile?: Partial<Profile>;
     /** Callback function to handle profile changes */
     onProfileChange?: (profile: Partial<Profile>) => void;
-    /** Callback function to add search params for the click-out URL on the proposition cards */
+    /** Callback function to add search params for the click-out URL */
     addClickoutSearchParams?: (searchParams: URLSearchParams) => URLSearchParams;
     /** Callback function called when an error occurs */
     onError?: (error: Error) => void;
@@ -1301,6 +1374,17 @@ declare type PropositionHeaderClassNames = {
     };
 };
 
+declare type PropositionLabel = {
+    type: PropositionLabelType;
+    displayName: string;
+    rank: number;
+    color: PropositionLabelColor;
+};
+
+declare type PropositionLabelColor = 'primary' | 'secondary' | 'default' | 'success' | 'warning' | 'danger';
+
+declare type PropositionLabelType = 'isRetention' | 'isCheapestPhone' | 'isBudget' | 'isBudgetFiber' | 'isCombi' | 'isFastestInternet' | 'isBudgetOwnNetwork' | 'isBudgetNetwork';
+
 declare type PropositionOverviewClassNames = {
     /** The base container of the proposition overview */
     base?: string;
@@ -1565,4 +1649,325 @@ declare type TermsClassNames = {
     base?: string;
 } & SectionClassNames;
 
+declare type Translations = {
+    common: {
+        yes: string;
+        no: string;
+        confirm: string;
+        cancel: string;
+        loading: string;
+        close: string;
+        next: string;
+        previous: string;
+        select: string;
+        save: string;
+        back: string;
+    };
+    numberPreservation: {
+        title: string;
+        description: string;
+        keepCurrentNumber: string;
+        newNumber: string;
+        currentProvider: string;
+        selectProvider: string;
+        invalidNumber: string;
+        subscription: string;
+        prepaid: string;
+        otherProvider: string;
+    };
+    combiDeal: {
+        title: string;
+        description: string;
+        selectHomeProvider: string;
+        selectOtherSubscriptionsOnAddress: string;
+        customerBenefit: string;
+        homeInternet: string;
+        selectOtherSubscriptions: string;
+        otherSubscriptionsDescription: string;
+        otherSubscriptions: string;
+        movingOption: string;
+        otherProvider: string;
+    };
+    postcodeCheck: {
+        loading: string;
+        invalidAddressError: string;
+        title: string;
+        description: string;
+        postalCode: string;
+        houseNumber: string;
+        houseNumberAddition: string;
+        selectProvider: string;
+        homeInternet: string;
+    };
+    profile: {
+        personalizeTitle: string;
+        postcodeCheck: string;
+        enterPostcode: string;
+        numberPreservation: string;
+        askNumberPreservation: string;
+        newNumber: string;
+        customerBenefit: string;
+    };
+    format: {
+        unlimited: string;
+        /** Short version of `unlimited` */
+        unlimited_short: string;
+        gigabyte: string;
+        minutes: string;
+        /** Short version of `minutes` */
+        minutes_short: string;
+        sms: string;
+        year: string;
+        /** Plural of `year` */
+        year_other: string;
+        oneTime: string;
+        month: string;
+        /** Plural of `month` */
+        month_other: string;
+        /** Short version of `month` */
+        month_short: string;
+        /** Plural of `month_short` */
+        month_short_other: string;
+        monthly: string;
+        firstMonth: string;
+        /** Plural of `firstMonth` */
+        firstMonth_other: string;
+        thenMonth: string;
+        /** Plural of `thenMonth` */
+        thenMonth_other: string;
+        afterMonth: string;
+        /** Plural of `afterMonth` */
+        afterMonth_other: string;
+        hour: string;
+        /** Plural of `hour` */
+        hour_other: string;
+        inch: string;
+        centimeter: string;
+        milliampere: string;
+        megabitPerSecond: string;
+        internet: string;
+        from: string;
+        startingFrom: string;
+        to: string;
+        for: string;
+        or: string;
+        average: string;
+        /** Short version of `average` */
+        average_short: string;
+        maximum: string;
+    };
+    labels: {
+        /** Renew with {{providerName}} */
+        renewWith: string;
+        /** Cheapest phone */
+        cheapestPhone: string;
+        /** Budget */
+        budget: string;
+        /** Most affordable with fiber */
+        budgetFiber: string;
+        /** Customer benefits with {{providerName}} */
+        combi: string;
+        /** Customer benefits */
+        combiGeneric: string;
+        /** Fastest internet */
+        fastestInternet: string;
+        /** Most affordable with own network */
+        budgetOwnNetwork: string;
+        /** Most affordable on {{network}}-network */
+        budgetNetwork: string;
+        /** Most affordable on network */
+        budgetNetworkGeneric: string;
+    };
+    propositionCard: {
+        availableStockStatus: string;
+        backorderedStockStatus: string;
+        preOrderStockStatus: string;
+        oneTimeFee: string;
+        deviceDiscount: string;
+        urgentText: string;
+        /** Plural of `urgentText` */
+        urgentText_other: string;
+        cta: string;
+    };
+    fixedInternet: {
+        /** Fiber */
+        'glasvezel-internet': string;
+        /** Cable */
+        'kabel-internet': string;
+        /** DSL */
+        'dsl-internet': string;
+        /** 5G */
+        '5g-internet': string;
+    };
+    filters: {
+        title: string;
+        resetFilters: string;
+        applyFilters: string;
+        chosenFilters: string;
+        sort: string;
+        sortBy: string;
+        show: string;
+        showMore: string;
+        showLess: string;
+    };
+    filterOptions: {
+        brand: string;
+        internal_storage: string;
+        color: string;
+        data: string;
+        minutes: string;
+        credit_fee: string;
+        provider: string;
+        contract_term: string;
+        package: string;
+        data_speed_down: string;
+        data_speed_up: string;
+        monthly_fee: string;
+        price: string;
+        tags_netwerk: string;
+        tags_verbinding: string;
+        tags_esim: string;
+        receivers: string;
+        network_generation: string;
+    };
+    sortOptions: {
+        /** Relevance */
+        top: string;
+        /** Relevance */
+        relevantie: string;
+        /** Best-selling */
+        'best-verkocht': string;
+        /** Price low-high */
+        'meest-voordelig': string;
+        /** Download speed */
+        downloadsnelheid: string;
+        /** Upload speed */
+        uploadsnelheid: string;
+    };
+    productResults: {
+        loadMore: string;
+        showMoreOffers: string;
+        noResultsTitle: string;
+        noResultsDescription: string;
+        sortBy: string;
+        topPropositionsTitle: string;
+        allPropositionsTitle: string;
+    };
+    creditInfo: {
+        exampleTitle: string;
+        creditBundleTitle: string;
+        offer: string;
+        totalDeviceCost: string;
+        oneTimeFee: string;
+        totalCreditAmount: string;
+        monthlyPayment: string;
+        contractTerm: string;
+        fixedInterest: string;
+        generalDescription: string;
+        creditBundleDescription: string;
+    };
+    detailsModal: {
+        title: string;
+        renewal: string;
+        chooseTab: string;
+        general: string;
+        bundles: string;
+        conditions: string;
+        channels: string;
+        costs: string;
+        specifications: string;
+        monthlyFee: string;
+        oneTimeFee: string;
+        totalCost: string;
+        provider: string;
+        network: string;
+        networkCoverage: string;
+        networkAdministrator: string;
+        networkType: string;
+        subscriptionType: string;
+        internet: string;
+        calling: string;
+        sms: string;
+        extras: string;
+        television: string;
+        networkGeneration: string;
+        downloadSpeed: string;
+        uploadSpeed: string;
+        contractTerm: string;
+        contractTermTerminable: string;
+        subscription: string;
+        bundle: string;
+        bundleSpeed: string;
+        termsAndConditions: string;
+        maximumDownloadSpeed: string;
+        maximumUploadSpeed: string;
+        numberOfChannels: string;
+        numberOfReceivers: string;
+        outsideBundle: string;
+        subscriptionFlexibility: string;
+        abroad: string;
+        insideEu: string;
+        outsideEu: string;
+        minutesToEu: string;
+        upgradeBundle: string;
+        downgradeBundle: string;
+        dataExceedance: string;
+        bundleExceedanceRates: string;
+        bundleExceedanceRateCeiling: string;
+        bundleExceedanceWarning: string;
+        bundleExceedanceMinutesRounding: string;
+        channelsDescription: string;
+        moreInformation: string;
+        deviceBundle: string;
+        installationFee: string;
+        activationFee: string;
+        cashback: string;
+        priceWithoutSubscription: string;
+        priceWithSubscription: string;
+        devicePrice: string;
+        costPerContractTermTitle: string;
+        costPerContractTermSubtitle: string;
+        deviceDiscountTitle: string;
+        deviceDiscountSubtitle: string;
+        totalCostsOverTerm: string;
+        /** Plural of `totalCostsOverTerm` */
+        totalCostsOverTerm_other: string;
+        totalDeviceDiscount: string;
+    };
+    phoneSelector: {
+        phone: string;
+        selectPhone: string;
+        selectBrand: string;
+        searchPlaceholder: string;
+        popular: string;
+        allBrands: string;
+        selectVersion: string;
+        selectColor: string;
+    };
+    modificationBlocks: {
+        /** One or more mobile subscriptions */
+        'mobile/odido': string;
+        /** One or more mobile subscriptions */
+        'mobile/vodafone': string;
+        /** I am younger than 28 years old */
+        'segment/vodafone/young': string;
+        /** Vodafone Unlimited subscription at my address */
+        'segment/vodafone/unlimited': string;
+        /** Another mobile subscription from KPN */
+        'mobile/kpn': string;
+        /** One or more mobile subscriptions */
+        'mobile/ben': string;
+        /** One or more mobile subscriptions */
+        'mobile/50plusmobiel': string;
+        /** One or more mobile subscriptions */
+        'mobile/hollandsnieuwe': string;
+        /** One or more mobile subscriptions */
+        'mobile/budget': string;
+        /** One or more mobile subscriptions */
+        'mobile/youfone': string;
+        /** One or more mobile subscriptions */
+        'mobile/delta': string;
+    };
+};
+
 export { }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@mobielnl/elements",
-  "version": "0.9.0",
+  "version": "0.10.0",
   "description": "Mobiel.nl Elements - React component library for partner websites",
   "private": false,
   "type": "module",
@@ -71,10 +71,10 @@
     "@heroui/tabs": "^2.2.24",
     "@heroui/theme": "^2.4.23",
     "@react-stately/flags": "^3.1.2",
-    "@storybook/addon-a11y": "^9.1.2",
-    "@storybook/addon-docs": "^9.1.2",
+    "@storybook/addon-a11y": "^9.1.17",
+    "@storybook/addon-docs": "^9.1.17",
     "@storybook/blocks": "^8.6.14",
-    "@storybook/react-vite": "^9.1.2",
+    "@storybook/react-vite": "^9.1.17",
     "@tailwindcss/vite": "^4.1.11",
     "@types/jest": "^30.0.0",
     "@types/js-cookie": "^3.0.6",
@@ -88,14 +88,16 @@
     "globals": "^16.3.0",
     "graphql": "^16.11.0",
     "graphql-request": "^7.2.0",
+    "i18next": "^25.7.3",
     "js-cookie": "^3.0.5",
     "lodash": "^4.17.21",
     "postcss-prefix-selector": "^2.1.1",
     "react": "^19.2.1",
     "react-dom": "^19.2.1",
+    "react-i18next": "^16.5.1",
     "react-use": "^17.6.0",
     "remark-gfm": "^4.0.1",
-    "storybook": "^9.1.2",
+    "storybook": "^9.1.17",
     "swr": "^2.3.2",
     "tailwindcss": "^4.1.16",
     "typescript": "~5.8.3",