igloo-d2c-components 1.0.36 → 1.0.38

package/README.md

@@ -683,7 +683,6 @@ const products: Product[] = [
   }}
   title="Select your product"
   subtitle="Pick the product that suits your protection goals"
-  viewPlansButtonText="View plans"
 />
 ```
 

package/dist/cjs/index.js

@@ -1710,7 +1710,10 @@ function Header$1({ logo, navigationLinks, languages, currentLocale, userToken,
                                     letterSpacing: '.3rem',
                                     color: 'inherit',
                                     textDecoration: 'none',
-                                } }, { children: jsxRuntime.jsx("img", { src: logo, alt: "Logo", style: Object.assign({}, (isMobile && { height: '32px', width: '119px' })), height: isMobile ? '32px' : '57px', width: isMobile ? '119px' : '93.36px' }) })) })), !isMobile && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldShowContent && (jsxRuntime.jsxs(material.Box, Object.assign({ sx: {
+                                } }, { children: jsxRuntime.jsx("img", { src: logo, alt: "Logo", height: 'auto', width: '126px', style: {
+                                        height: 'auto',
+                                        width: '126px',
+                                    } }) })) })), !isMobile && (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [shouldShowContent && (jsxRuntime.jsxs(material.Box, Object.assign({ sx: {
                                         flexGrow: 1,
                                         display: { xs: 'none', md: 'flex', gap: 40 },
                                     } }, { children: [jsxRuntime.jsxs(ButtonDesktopMenu, Object.assign({ onClick: handleOpenNavMenu, sx: { my: 2, textTransform: 'capitalize' }, "data-testid": "productNavigationMenu" }, { children: [jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: formatMessage({ id: 'Products' }) })), jsxRuntime.jsx(material.Icon, { component: ArrowDropDownIcon })] }), "product"), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.partnership) && (jsxRuntime.jsx(ButtonDesktopMenu, Object.assign({ onClick: onPartnershipClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: jsxRuntime.jsx(AnchorLink$1, Object.assign({ href: `${host}${menuItems.partnership.route}`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.partnership.label })) })) }), "partnership")), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.aboutUs) && (jsxRuntime.jsx(ButtonDesktopMenu, Object.assign({ onClick: onAboutUsClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: jsxRuntime.jsx(AnchorLinks, Object.assign({ href: `${host}${menuItems.aboutUs.route}`, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.aboutUs.label })) })) }), "aboutus")), (menuItems === null || menuItems === void 0 ? void 0 : menuItems.blog) && (jsxRuntime.jsx(ButtonDesktopMenu, Object.assign({ onClick: onBlogClick, sx: { my: 2, textTransform: 'capitalize' } }, { children: jsxRuntime.jsx(material.Typography, Object.assign({ variant: "h6" }, { children: jsxRuntime.jsx(AnchorLink$1, Object.assign({ href: menuItems.blog.url, onClick: (e) => e === null || e === void 0 ? void 0 : e.preventDefault() }, { children: menuItems.blog.label })) })) }), "blog"))] }))), jsxRuntime.jsxs(material.Box, Object.assign({ sx: {
@@ -1895,7 +1898,7 @@ styles.styled(material.Box)(({ theme }) => ({
  * />
  * ```
  */
-function NewHeader({ logo: propLogo, navigationLinks = [], isMobile: propIsMobile, onLogoClick, onMenuOpen, onMenuClose, customDrawerContent, formatMessage = (descriptor) => descriptor.id, }) {
+function NewHeader({ logo: propLogo, logoAltText = 'Logo', navigationLinks = [], isMobile: propIsMobile, onLogoClick, onMenuOpen, onMenuClose, customDrawerContent, formatMessage = (descriptor) => descriptor.id, }) {
     var _a;
     const tenantTheme = useTenantTheme();
     const theme = tenantTheme === null || tenantTheme === void 0 ? void 0 : tenantTheme.theme;
@@ -1923,7 +1926,7 @@ function NewHeader({ logo: propLogo, navigationLinks = [], isMobile: propIsMobil
         (_a = item.onClick) === null || _a === void 0 ? void 0 : _a.call(item);
         handleDrawerClose();
     };
-    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxRuntime.jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsxRuntime.jsx(MenuIcon, {}) }))] })) })), jsxRuntime.jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsxRuntime.jsx(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: "Logo" }) })), jsxRuntime.jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsxRuntime.jsx(CloseIcon, {}) }))] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })) })] }))) }))] }));
+    return (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(StyledAppBar, Object.assign({ position: "fixed" }, { children: jsxRuntime.jsxs(StyledToolbar, Object.assign({ disableGutters: true }, { children: [jsxRuntime.jsx(LogoContainer$1, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: logoAltText }) })), jsxRuntime.jsx(MenuIconButton, Object.assign({ size: "large", edge: "end", "aria-label": "menu", onClick: handleDrawerOpen }, { children: jsxRuntime.jsx(MenuIcon, {}) }))] })) })), jsxRuntime.jsx(StyledDrawer$2, Object.assign({ anchor: "right", open: drawerOpen, onClose: handleDrawerClose }, { children: customDrawerContent ? (jsxRuntime.jsx(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: customDrawerContent }))) : (jsxRuntime.jsxs(material.Box, Object.assign({ sx: { width: isMobile ? '100vw' : 350 } }, { children: [jsxRuntime.jsxs(DrawerHeader$2, { children: [jsxRuntime.jsx(DrawerLogoContainer, Object.assign({ onClick: handleLogoClick }, { children: jsxRuntime.jsx(LogoImage, { src: logo, alt: logoAltText }) })), jsxRuntime.jsx(CloseIconButton, Object.assign({ onClick: handleDrawerClose, "aria-label": "close" }, { children: jsxRuntime.jsx(CloseIcon, {}) }))] }), jsxRuntime.jsx(material.Divider, {}), jsxRuntime.jsx(DrawerContent$2, { children: navigationLinks.length > 0 && (jsxRuntime.jsx(material.List, { children: navigationLinks.map((item) => (jsxRuntime.jsx(material.ListItem, Object.assign({ disablePadding: true }, { children: jsxRuntime.jsx(material.ListItemButton, Object.assign({ onClick: () => handleMenuItemClick(item) }, { children: jsxRuntime.jsx(material.ListItemText, { primary: formatMessage({ id: item.label }) }) })) }), item.key))) })) })] }))) }))] }));
 }
 
 const DivFooter = styles.styled('div')(() => ({
@@ -2332,7 +2335,7 @@ const DialogHeaderTitle = material.styled(material.Typography)(() => ({
     color: '#13131b',
     marginBottom: '8px',
     paddingRight: '32px',
-    wordSpacing: '0px',
+    wordSpacing: '-5px',
 }));
 const DialogHeaderSubtitle = material.styled(material.Typography)(() => ({
     fontFamily: 'Montserrat, sans-serif',
@@ -2581,7 +2584,7 @@ material.styled(material.Box)({
     padding: '4px',
 });
 
-function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', viewPlansButtonText = 'View plans', variant = 'drawer', }) {
+function ProductSelectionDrawer({ open, onClose, products, onProductSelect, title = 'Select your product', subtitle = 'Pick the product that suits your protection goals to view available plans', variant = 'drawer', }) {
     // Desktop Dialog variant
     if (variant === 'dialog') {
         return (jsxRuntime.jsxs(StyledDialog, Object.assign({ open: open, onClose: onClose, maxWidth: "md", fullWidth: true }, { children: [jsxRuntime.jsxs(DialogHeader, { children: [jsxRuntime.jsx(material.IconButton, Object.assign({ onClick: onClose, sx: {
@@ -3713,8 +3716,10 @@ styles.styled(material.Typography)(({ selected }) => ({
     wordSpacing: '-5px',
 }));
 
-const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, }) => {
-    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsxs(OptionsContainer, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: labels.yes || 'Yes', selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: labels.no || 'No', selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
+const HealthQuestionGroup = ({ question, questionNumber, value, onChange, error, labels = { yes: 'Yes', no: 'No' }, sx, OptionButtonComponent, }) => {
+    const yesLabel = labels.yes || 'Yes';
+    const noLabel = labels.no || 'No';
+    return (jsxRuntime.jsxs(QuestionContainer, Object.assign({ sx: sx }, { children: [jsxRuntime.jsxs(QuestionText, { children: [questionNumber && `${questionNumber}. `, question] }), jsxRuntime.jsx(OptionsContainer, { children: OptionButtonComponent ? (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButtonComponent, Object.assign({ variant: "filledLightBorder", selected: value === 'yes', onClick: () => onChange('yes'), fullWidth: true }, { children: yesLabel })), jsxRuntime.jsx(OptionButtonComponent, Object.assign({ variant: "filledLightBorder", selected: value === 'no', onClick: () => onChange('no'), fullWidth: true }, { children: noLabel }))] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [jsxRuntime.jsx(OptionButton, { value: "yes", label: yesLabel, selected: value === 'yes', onClick: () => onChange('yes'), variant: "form", size: "large" }), jsxRuntime.jsx(OptionButton, { value: "no", label: noLabel, selected: value === 'no', onClick: () => onChange('no'), variant: "form", size: "large" })] })) }), error && (jsxRuntime.jsx(material.Typography, Object.assign({ sx: {
                     color: 'error.main',
                     fontSize: '12px',
                     mt: 0.5,
@@ -3988,9 +3993,9 @@ const MeasurementFieldsGrid = styles.styled(material.Box)({
     },
 });
 
-const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, }) => {
+const HealthInformationForm = ({ renderField, measurementFields, healthQuestions, onSubmit, formRef, sx, desktopGridLayout = false, OptionButtonComponent, }) => {
     const Container = desktopGridLayout ? DesktopFormContainer$1 : FormContainer$1;
-    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels }, question.name || index)))] })) })));
+    return (jsxRuntime.jsx(Container, Object.assign({ ref: formRef, component: "form", onSubmit: onSubmit, sx: sx }, { children: jsxRuntime.jsxs(material.Box, Object.assign({ sx: { display: 'flex', flexDirection: 'column', gap: '24px' } }, { children: [desktopGridLayout ? (jsxRuntime.jsxs(MeasurementFieldsGrid, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })) : (jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [renderField(measurementFields.weight), renderField(measurementFields.height)] })), healthQuestions.map((question, index) => (jsxRuntime.jsx(HealthQuestionGroup, { question: question.question, questionNumber: question.questionNumber, value: question.value, onChange: question.onChange, error: question.error, labels: question.labels, OptionButtonComponent: OptionButtonComponent }, question.name || index)))] })) })));
 };
 
 const FormContainer = styles.styled(material.Box)({