igloo-d2c-components 1.0.28 → 1.0.30

package/dist/types/components/DesktopHeaderMenuBar/DesktopHeaderMenuBar.d.ts

@@ -2,19 +2,22 @@
  * Desktop Header Menu Bar Component
  * Based on Figma Design: Tech-Solution-V1.0 (node 1581-22604)
  *
- * A desktop-only header menu bar with logo, navigation items with dropdowns,
- * and a login button.
+ * A desktop-only header menu bar with logo on left, navigation items
+ * and a CTA button on right. Supports scroll-to-section interactions.
  *
  * Usage:
  * ```tsx
  * <DesktopHeaderMenuBar
  *   logo={logoSrc}
  *   menuItems={[
- *     { key: 'family', label: 'Family', hasDropdown: true, subItems: [...] },
- *     { key: 'health', label: 'Health', hasDropdown: true, subItems: [...] },
+ *     { key: 'medical', label: 'Medical', scrollTargetId: 'medical-section' },
+ *     { key: 'critical-illness', label: 'Critical Illness', scrollTargetId: 'ci-section' },
+ *     { key: 'life', label: 'Life', scrollTargetId: 'life-section' },
+ *     { key: 'support', label: 'Support', scrollTargetId: 'support-section' },
  *   ]}
+ *   ctaButtonText="Purchase Now"
+ *   onCtaClick={() => scrollToQuotation()}
  *   onLogoClick={() => navigate('/')}
- *   onLoginClick={() => setShowLoginModal(true)}
  * />
  * ```
  */
@@ -22,17 +25,20 @@ import { DesktopHeaderMenuBarProps } from './types';
 /**
  * DesktopHeaderMenuBar Component
  *
- * A responsive desktop header with navigation menu items and dropdown support.
+ * A desktop header with logo on left, navigation menu items and CTA button on right.
+ * Supports scroll-to-section interactions for menu items.
  *
  * @param logo - Logo image source URL
  * @param logoAlt - Alt text for the logo image
  * @param menuItems - Array of menu items to display
- * @param showLoginButton - Whether to show the login button (default: true)
- * @param loginButtonText - Text for the login button (default: 'Log in')
+ * @param showCtaButton - Whether to show the CTA button (default: true)
+ * @param ctaButtonText - Text for the CTA button (default: 'Purchase Now')
+ * @param onCtaClick - Handler for CTA button click
+ * @param ctaScrollTargetId - Target element ID for CTA scroll action
+ * @param onScrollToSection - Callback when menu item triggers scroll
  * @param onLogoClick - Handler for logo click
- * @param onLoginClick - Handler for login button click
  * @param formatMessage - i18n function for translations
  */
-declare function DesktopHeaderMenuBar({ logo, logoAlt, menuItems, showLoginButton, loginButtonText, onLogoClick, onLoginClick, formatMessage, className, }: DesktopHeaderMenuBarProps): import("react/jsx-runtime").JSX.Element;
+declare function DesktopHeaderMenuBar({ logo, logoAlt, menuItems, showLoginButton, loginButtonText, onLoginClick, showCtaButton, ctaButtonText, onCtaClick, ctaScrollTargetId, onScrollToSection, onLogoClick, formatMessage, className, }: DesktopHeaderMenuBarProps): import("react/jsx-runtime").JSX.Element;
 export default DesktopHeaderMenuBar;
 export { DesktopHeaderMenuBar };

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

@@ -4,3 +4,4 @@
  */
 export { default, DesktopHeaderMenuBar } from './DesktopHeaderMenuBar';
 export type { DesktopHeaderMenuBarProps, MenuItemWithDropdown, SubMenuItem, } from './types';
+export { PurchaseButton } from './styled';

package/dist/types/components/DesktopHeaderMenuBar/styled.d.ts

@@ -5,11 +5,12 @@
  * Design Specifications:
  * - Header height: 80px
  * - Background: white (#ffffff)
- * - Content max-width: 1128px (equivalent to 156px padding on 1440px width)
- * - Logo width: 126px
- * - Gap between logo and menu items: 32px
- * - Menu text: MetLife Circular Bold, 18px, #13131B
- * - Login button: Text style, #0090da (teal/cyan)
+ * - Content padding: 156px horizontal on 1440px viewport
+ * - Logo dimensions: 126px × 16px
+ * - Gap between menu items: 32px
+ * - Menu text: MetLife Circular Bold, 18px, #13131B, line-height 24px
+ * - CTA Button: Filled, #0090da, border-radius 24px, height 48px
+ * - CTA text: MetLife Circular Medium, 16px, white, line-height 20px
  */
 /// <reference types="react" />
 /**
@@ -27,8 +28,8 @@ export declare const HeaderContainer: import("@emotion/styled").StyledComponent<
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 /**
- * Left section containing logo and menu items
- * Gap: 32px between all children (logo and menu items)
+ * Left section containing logo only
+ * Per Figma: Logo on left side of header
  */
 export declare const LeftSection: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
@@ -41,7 +42,7 @@ export declare const LogoContainer: import("@emotion/styled").StyledComponent<im
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 /**
  * Logo image
- * Width: 126px, height: 16px (per Figma)
+ * Width: 126px, height: 16px (per Figma node 1328:28463)
  */
 export declare const LogoImage: import("@emotion/styled").StyledComponent<import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, import("react").DetailedHTMLProps<import("react").ImgHTMLAttributes<HTMLImageElement>, HTMLImageElement>, {}>;
 /**
@@ -74,19 +75,30 @@ export declare const DropdownIcon: import("@emotion/styled").StyledComponent<imp
     ref?: ((instance: SVGSVGElement | null) => void) | import("react").RefObject<SVGSVGElement> | null | undefined;
 }, "children" | "style" | "fontSize" | "className" | "classes" | "sx" | "color" | "shapeRendering" | "viewBox" | "htmlColor" | "inheritViewBox" | "titleAccess"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 /**
- * Right section containing login button
+ * Right section containing menu items and CTA button
+ * Gap: 32px between menu items (per Figma node 3506:35611)
  */
 export declare const RightSection: import("@emotion/styled").StyledComponent<import("@mui/system").BoxOwnProps<import("@mui/material").Theme> & Omit<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "ref"> & {
     ref?: ((instance: HTMLDivElement | null) => void) | import("react").RefObject<HTMLDivElement> | null | undefined;
 }, keyof import("@mui/system").BoxOwnProps<import("@mui/material").Theme>> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 /**
- * Login button (text style)
+ * Login button (text style) - DEPRECATED
+ * @deprecated Use PurchaseButton instead
  * Based on Figma: Style=Text, State=enabled, Show Icon=False
  * Color: #0090da (primary blue/teal)
  */
 export declare const LoginButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
     ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
 }, "children" | "style" | "className" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
+/**
+ * Purchase Now CTA Button (filled style)
+ * Based on Figma: Style=Filled, State=Enabled (node 3506:36976)
+ * Background: #0090da, border-radius: 24px, height: 48px
+ * Text: MetLife Circular Medium, 16px, white, line-height 20px
+ */
+export declare const PurchaseButton: import("@emotion/styled").StyledComponent<import("@mui/material").ButtonOwnProps & Omit<import("@mui/material").ButtonBaseOwnProps, "classes"> & import("@mui/material/OverridableComponent").CommonProps & Omit<Omit<import("react").DetailedHTMLProps<import("react").ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "ref"> & {
+    ref?: ((instance: HTMLButtonElement | null) => void) | import("react").RefObject<HTMLButtonElement> | null | undefined;
+}, "children" | "style" | "className" | "classes" | "action" | "centerRipple" | "disabled" | "disableRipple" | "disableTouchRipple" | "focusRipple" | "focusVisibleClassName" | "LinkComponent" | "onFocusVisible" | "sx" | "tabIndex" | "TouchRippleProps" | "touchRippleRef" | "color" | "disableElevation" | "disableFocusRipple" | "endIcon" | "fullWidth" | "href" | "size" | "startIcon" | "variant"> & import("@mui/system").MUIStyledCommonProps<import("@mui/material").Theme>, {}, {}>;
 /**
  * Dropdown menu container
  */

package/dist/types/components/DesktopHeaderMenuBar/types.d.ts

@@ -27,6 +27,16 @@ export interface MenuItemWithDropdown {
      * URL for navigation (optional)
      */
     href?: string;
+    /**
+     * Target element ID to scroll to when clicked
+     * Used for scroll-to-section behavior
+     */
+    scrollTargetId?: string;
+    /**
+     * Product code to select when scrolling (e.g., 'AMP_MED_XPNSE')
+     * Used in conjunction with scrollTargetId for product selection
+     */
+    scrollTargetProductCode?: string;
 }
 export interface SubMenuItem {
     /**
@@ -65,10 +75,12 @@ export interface DesktopHeaderMenuBarProps {
     menuItems: MenuItemWithDropdown[];
     /**
      * Whether to show the login button
+     * @deprecated Use showCtaButton instead
      */
     showLoginButton?: boolean;
     /**
      * Login button text
+     * @deprecated Use ctaButtonText instead
      */
     loginButtonText?: string;
     /**
@@ -77,8 +89,32 @@ export interface DesktopHeaderMenuBarProps {
     onLogoClick?: () => void;
     /**
      * Login button click handler
+     * @deprecated Use onCtaClick instead
      */
     onLoginClick?: () => void;
+    /**
+     * Whether to show the CTA button (Purchase Now)
+     * @default true
+     */
+    showCtaButton?: boolean;
+    /**
+     * CTA button text
+     * @default 'Purchase Now'
+     */
+    ctaButtonText?: string;
+    /**
+     * CTA button click handler
+     */
+    onCtaClick?: () => void;
+    /**
+     * Target element ID to scroll to when CTA is clicked
+     */
+    ctaScrollTargetId?: string;
+    /**
+     * Callback when a menu item triggers a scroll action
+     * Receives the scrollTargetId and optional productCode
+     */
+    onScrollToSection?: (targetId: string, productCode?: string) => void;
     /**
      * Format message function for i18n
      */

package/dist/types/components/Header/Header.d.ts

@@ -25,6 +25,15 @@ export interface DesktopMenuItem {
         onClick?: () => void;
     }[];
     onClick?: () => void;
+    /**
+     * Target element ID to scroll to when clicked
+     * Used for scroll-to-section behavior
+     */
+    scrollTargetId?: string;
+    /**
+     * Product code to select when scrolling
+     */
+    scrollTargetProductCode?: string;
 }
 export interface LanguageOption {
     value: string;
@@ -166,6 +175,29 @@ export interface HeaderProps {
      * Only used when useNewDesktopLayout is true
      */
     desktopMenuItems?: DesktopMenuItem[];
+    /**
+     * Whether to show the CTA button in desktop layout
+     * @default true
+     */
+    showCtaButton?: boolean;
+    /**
+     * CTA button text for desktop layout
+     * @default 'Purchase Now'
+     */
+    ctaButtonText?: string;
+    /**
+     * CTA button click handler for desktop layout
+     */
+    onCtaClick?: () => void;
+    /**
+     * Target element ID to scroll to when CTA is clicked
+     */
+    ctaScrollTargetId?: string;
+    /**
+     * Callback when a menu item triggers a scroll action
+     * Receives the scrollTargetId and optional productCode
+     */
+    onScrollToSection?: (targetId: string, productCode?: string) => void;
 }
 /**
  * Header component with tenant theme support and responsive navigation
@@ -182,4 +214,4 @@ export interface HeaderProps {
  * />
  * ```
  */
-export declare function Header({ logo, alternateLogo, showAlternateLogo, navigationLinks, languages, currentLocale, currentLang, userToken, userFirstName, isMobile: propIsMobile, scrolled, isPartnershipPageMobileView, isPartnershipPagePCView, isSeoPageView, showGetQuoteButton, bannerData, ctaData, host, welcomeMessage, formatMessage, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout, desktopMenuItems, }: HeaderProps): import("react/jsx-runtime").JSX.Element;
+export declare function Header({ logo, alternateLogo, showAlternateLogo, navigationLinks, languages, currentLocale, currentLang, userToken, userFirstName, isMobile: propIsMobile, scrolled, isPartnershipPageMobileView, isPartnershipPagePCView, isSeoPageView, showGetQuoteButton, bannerData, ctaData, host, welcomeMessage, formatMessage, menuItems, userProfileComponent, onLogoClick, onProductMenuClick, onLanguageChange, onLoginClick, onSignupClick, onLogoutClick, onPartnershipClick, onAboutUsClick, onBlogClick, onMyProfileClick, onGetQuoteClick, onPartnershipCTAClick, useNewDesktopLayout, desktopMenuItems, showCtaButton, ctaButtonText, onCtaClick, ctaScrollTargetId, onScrollToSection, }: HeaderProps): import("react/jsx-runtime").JSX.Element;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "igloo-d2c-components",
-  "version": "1.0.28",
+  "version": "1.0.30",
   "description": "Reusable component library with tenant-aware theming for B2C applications",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",