igloo-d2c-components 1.0.9 → 1.0.11

package/dist/types/storybook-components/ProductCard.stories.d.ts

@@ -0,0 +1,9 @@
+/// <reference types="react" />
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+declare const _default: ComponentMeta<import("react").FC<import("../components/ProductCard").ProductCardProps>>;
+export default _default;
+export declare const Default: ComponentStory<import("react").FC<import("../components/ProductCard").ProductCardProps>>;
+export declare const WithLogo: ComponentStory<import("react").FC<import("../components/ProductCard").ProductCardProps>>;
+export declare const WithoutIndicator: ComponentStory<import("react").FC<import("../components/ProductCard").ProductCardProps>>;
+export declare const AnnualBilling: ComponentStory<import("react").FC<import("../components/ProductCard").ProductCardProps>>;
+export declare const NoPlan: ComponentStory<import("react").FC<import("../components/ProductCard").ProductCardProps>>;

package/dist/types/storybook-components/ProductSelectionDrawer.stories.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Product Selection Drawer Stories
+ */
+import type { Meta, StoryObj } from '@storybook/react';
+import { ProductSelectionDrawer } from '../components/ProductSelectionDrawer';
+declare const meta: Meta<typeof ProductSelectionDrawer>;
+export default meta;
+type Story = StoryObj<typeof ProductSelectionDrawer>;
+/**
+ * Default story showing the product selection drawer
+ */
+export declare const Default: Story;
+/**
+ * Story with custom text
+ */
+export declare const CustomText: Story;
+/**
+ * Story with fewer products
+ */
+export declare const TwoProducts: Story;
+/**
+ * Interactive story with button to open drawer
+ */
+export declare const Interactive: Story;

package/dist/types/storybook-components/QuestionSection.stories.d.ts

@@ -0,0 +1,11 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { QuestionSection } from '../components/QuestionSection';
+declare const _default: ComponentMeta<typeof QuestionSection>;
+export default _default;
+export declare const Default: ComponentStory<typeof QuestionSection>;
+export declare const WithSelection: ComponentStory<typeof QuestionSection>;
+export declare const WithoutNumber: ComponentStory<typeof QuestionSection>;
+export declare const MultipleSelection: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCustomRenderer: ComponentStory<typeof QuestionSection>;
+export declare const LongQuestion: ComponentStory<typeof QuestionSection>;
+export declare const WithCIMBTheme: ComponentStory<typeof QuestionSection>;

package/dist/types/storybook-components/RecommendationsDrawer.stories.d.ts

@@ -0,0 +1,36 @@
+/**
+ * RecommendationsDrawer Storybook Stories
+ * Interactive testing for recommendations drawer and form components
+ */
+import { ComponentMeta, ComponentStory } from '@storybook/react';
+import { RecommendationsDrawer } from '../components/RecommendationsDrawer';
+declare const _default: ComponentMeta<typeof RecommendationsDrawer>;
+export default _default;
+export declare const Default: ComponentStory<typeof RecommendationsDrawer>;
+export declare const CompleteQuestionnaire: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const SingleQuestion: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithBackButton: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithToggleGroup: () => import("react/jsx-runtime").JSX.Element;
+export declare const OptionButtonsShowcase: () => import("react/jsx-runtime").JSX.Element;
+export declare const CustomFooter: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithoutFooter: () => import("react/jsx-runtime").JSX.Element;
+export declare const TravelInsuranceExample: {
+    (): import("react/jsx-runtime").JSX.Element;
+    parameters: {
+        docs: {
+            description: {
+                story: string;
+            };
+        };
+    };
+};
+export declare const MobileViewport: ComponentStory<typeof RecommendationsDrawer>;

package/dist/types/storybook-components/ToggleGroup.stories.d.ts

@@ -0,0 +1,10 @@
+import { ComponentStory, ComponentMeta } from '@storybook/react';
+import { ToggleGroup } from '../components/ToggleGroup';
+declare const _default: ComponentMeta<typeof ToggleGroup>;
+export default _default;
+export declare const Default: ComponentStory<typeof ToggleGroup>;
+export declare const ThreeOptions: ComponentStory<typeof ToggleGroup>;
+export declare const WithoutIcons: ComponentStory<typeof ToggleGroup>;
+export declare const WithImageIcons: ComponentStory<typeof ToggleGroup>;
+export declare const Interactive: () => import("react/jsx-runtime").JSX.Element;
+export declare const WithCIMBTheme: ComponentStory<typeof ToggleGroup>;

package/dist/types/themes/index.d.ts

@@ -2,7 +2,7 @@
  * Tenant Theme Configurations
  * Centralized theme definitions for all tenants
  */
-import { TenantThemeConfig, TenantId } from '../types/tenant';
+import { TenantId, TenantThemeConfig } from '../types/tenant';
 /**
  * Igloo Theme Configuration
  */

package/dist/types/themes/typography.d.ts

@@ -0,0 +1,69 @@
+/**
+ * Tenant Typography Configurations
+ * Centralized typography definitions for all tenants
+ * Based on b2c-web-demo typography structure
+ */
+import { TenantId } from '../types/tenant';
+export interface TypographyVariant {
+    fontSize: string;
+    fontStyle?: string;
+    fontWeight: number | string;
+    lineHeight: string;
+    '@media (max-width:600px)'?: {
+        fontSize: string;
+        fontStyle?: string;
+        fontWeight: number | string;
+        lineHeight: string;
+    };
+    '@media (min-width:600px)'?: {
+        fontSize?: string;
+        fontStyle?: string;
+        fontWeight?: number | string;
+        lineHeight?: string;
+    };
+}
+export interface TenantTypographyConfig {
+    fontFamily: string;
+    fontWeightRegular: number;
+    fontWeightMedium: number;
+    fontWeightSemiBold: number;
+    fontWeightBold: number;
+    fontWeightExtraBold: number;
+    fontWeightExtraBlack: number;
+    H1?: TypographyVariant;
+    h1?: TypographyVariant;
+    h2?: TypographyVariant;
+    h3?: TypographyVariant;
+    h4?: TypographyVariant;
+    bodyStrongLarge?: TypographyVariant;
+    bodyStrongMedium?: TypographyVariant;
+    bodyStrongSmall?: TypographyVariant;
+    bodyLarge?: TypographyVariant;
+    bodyMedium?: TypographyVariant;
+    bodySmall?: TypographyVariant;
+    smallText?: TypographyVariant;
+    [key: string]: any;
+}
+/**
+ * Igloo Typography Configuration
+ */
+export declare const iglooTypography: TenantTypographyConfig;
+/**
+ * CIMB Typography Configuration
+ */
+export declare const cimbTypography: TenantTypographyConfig;
+/**
+ * AmmetLife Typography Configuration
+ */
+export declare const ammetlifeTypography: TenantTypographyConfig;
+/**
+ * Typography Registry
+ * Map of tenant IDs to their typography configurations
+ */
+export declare const tenantTypography: Record<TenantId, TenantTypographyConfig>;
+/**
+ * Get typography configuration by tenant ID
+ * @param tenantId - The tenant identifier
+ * @returns Typography configuration for the specified tenant
+ */
+export declare function getTenantTypography(tenantId: TenantId): TenantTypographyConfig;

package/dist/types/types/tenant.d.ts

@@ -32,13 +32,34 @@ export interface TenantPalette {
 }
 export interface TenantTypography {
     fontFamily?: string;
+    fontWeightRegular?: number;
+    fontWeightMedium?: number;
+    fontWeightSemiBold?: number;
+    fontWeightBold?: number;
+    fontWeightExtraBold?: number;
+    fontWeightExtraBlack?: number;
+    h1?: any;
+    h2?: any;
+    h3?: any;
+    h4?: any;
+    bodyStrongLarge?: any;
+    bodyStrongMedium?: any;
+    bodyStrongSmall?: any;
+    bodyLarge?: any;
+    bodyMedium?: any;
+    bodySmall?: any;
+    smallText?: any;
     [key: string]: any;
 }
 export interface TenantThemeConfig {
     palette: TenantPalette;
     typography?: TenantTypography;
-    logo?: string;
-    favicon?: string;
+    logo: string;
+    logoDark?: string;
+    logoAlt?: string;
+    logoWhite?: string;
+    favicon: string;
+    assetBaseUrl?: string;
 }
 /**
  * Tenant Context Value

package/dist/types/utils/assets.d.ts

@@ -0,0 +1,54 @@
+/**
+ * Asset Management Utilities
+ * Helper functions for managing tenant-specific assets
+ */
+/**
+ * Hook to get tenant-specific asset URL
+ * @param assetPath - Relative path to asset within tenant folder
+ * @returns Full path to tenant-specific asset
+ *
+ * @example
+ * ```tsx
+ * const bannerImage = useTenantAsset('promotional-banner.jpg')
+ * <img src={bannerImage} alt="Promo" />
+ * ```
+ */
+export declare function useTenantAsset(assetPath: string): string;
+/**
+ * Hook to get tenant logo URL
+ * @param variant - Logo variant ('default' | 'dark' | 'alt' | 'white')
+ * @returns Logo URL from theme configuration
+ *
+ * @example
+ * ```tsx
+ * const logo = useTenantLogo()
+ * const darkLogo = useTenantLogo('dark')
+ * <img src={logo} alt="Logo" />
+ * ```
+ */
+export declare function useTenantLogo(variant?: 'default' | 'dark' | 'alt' | 'white'): string;
+/**
+ * Hook to get tenant favicon URL
+ * @returns Favicon URL from theme configuration
+ *
+ * @example
+ * ```tsx
+ * const favicon = useTenantFavicon()
+ * <link rel="icon" href={favicon} />
+ * ```
+ */
+export declare function useTenantFavicon(): string;
+/**
+ * Get tenant asset path (non-hook version for use outside components)
+ * @param tenantId - Tenant identifier
+ * @param assetPath - Relative path to asset
+ * @returns Full asset path
+ */
+export declare function getTenantAssetPath(tenantId: string, assetPath: string): string;
+/**
+ * Get tenant logo path (non-hook version)
+ * @param tenantId - Tenant identifier
+ * @param variant - Logo variant
+ * @returns Logo path
+ */
+export declare function getTenantLogoPath(tenantId: string, variant?: 'default' | 'dark' | 'alt' | 'white'): string;

package/dist/types/utils/theme.d.ts

@@ -6,14 +6,15 @@ import { Theme } from '@mui/material/styles';
 import { TenantThemeConfig } from '../types/tenant';
 /**
  * Get color value from theme palette path
- * @param theme - Tenant theme configuration
+ * @param theme - Tenant theme configuration (can be undefined/null for SSR)
  * @param path - Dot-notation path to color (e.g., 'primary.main')
  * @param defaultColor - Fallback color if path not found
  * @returns Color string
  */
-export declare function getThemeColor(theme: TenantThemeConfig, path: string, defaultColor?: string): string;
+export declare function getThemeColor(theme: TenantThemeConfig | undefined | null, path: string, defaultColor?: string): string;
 /**
  * Merge tenant theme with base MUI theme
+ * This makes tenant theme accessible in styled components via theme parameter
  * @param baseTheme - Base MUI theme
  * @param tenantTheme - Tenant-specific theme configuration
  * @returns Merged theme

package/package.json

@@ -1,13 +1,14 @@
 {
   "name": "igloo-d2c-components",
-  "version": "1.0.9",
+  "version": "1.0.11",
   "description": "Reusable component library with tenant-aware theming for B2C applications",
   "main": "dist/cjs/index.js",
   "module": "dist/esm/index.js",
   "types": "dist/types/index.d.ts",
   "files": [
     "dist",
-    "README.md"
+    "README.md",
+    "dist/assets"
   ],
   "scripts": {
     "build": "yarn clean && rollup -c rollup.config.cjs && tsc --declaration --emitDeclarationOnly --outDir dist/types",
@@ -74,6 +75,7 @@
     "react-dom": "^17.0.0",
     "rimraf": "^4.4.1",
     "rollup": "^3.29.5",
+    "rollup-plugin-copy": "3.5.0",
     "rollup-plugin-peer-deps-external": "^2.2.4",
     "tslib": "^2.8.1",
     "typescript": "^4.9.0",