igloo-d2c-components 1.0.8 → 1.0.10
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +8 -0
- package/dist/assets/icons/alert.svg +5 -0
- package/dist/assets/icons/arrow-down.svg +3 -0
- package/dist/assets/icons/arrow.svg +9 -0
- package/dist/assets/icons/close.svg +4 -0
- package/dist/assets/icons/facebook.svg +3 -0
- package/dist/assets/icons/index.ts +26 -0
- package/dist/assets/icons/instagram.svg +11 -0
- package/dist/assets/icons/youtube.svg +11 -0
- package/dist/assets/index.ts +13 -0
- package/dist/assets/tenants/ammetlife/logo.svg +10 -0
- package/dist/assets/tenants/cimb/logo-white.png +0 -0
- package/dist/assets/tenants/cimb/logo.svg +62 -0
- package/dist/assets/tenants/igloo/logo.svg +22 -0
- package/dist/cjs/index.js +2125 -38
- package/dist/cjs/index.js.map +1 -0
- package/dist/esm/index.js +2084 -38
- package/dist/esm/index.js.map +1 -0
- package/dist/types/assets/icons/index.d.ts +21 -0
- package/dist/types/assets/index.d.ts +9 -0
- package/dist/types/components/BillingToggle/BillingToggle.d.ts +34 -0
- package/dist/types/components/BillingToggle/index.d.ts +3 -0
- package/dist/types/components/BillingToggle/styled.d.ts +12 -0
- package/dist/types/components/CoverageAmountSlider/CoverageAmountSlider.d.ts +53 -0
- package/dist/types/components/CoverageAmountSlider/index.d.ts +3 -0
- package/dist/types/components/CoverageAmountSlider/styled.d.ts +41 -0
- package/dist/types/components/Footer/Footer.d.ts +94 -0
- package/dist/types/components/Footer/index.d.ts +3 -0
- package/dist/types/components/Footer/styled.d.ts +38 -0
- package/dist/types/components/Header/Header.d.ts +159 -0
- package/dist/types/components/Header/index.d.ts +3 -0
- package/dist/types/components/Header/styled.d.ts +80 -0
- package/dist/types/components/InfoCallout/InfoCallout.d.ts +34 -0
- package/dist/types/components/InfoCallout/index.d.ts +3 -0
- package/dist/types/components/InfoCallout/styled.d.ts +16 -0
- package/dist/types/components/NewHeader/NewHeader.d.ts +60 -0
- package/dist/types/components/NewHeader/index.d.ts +3 -0
- package/dist/types/components/NewHeader/styled.d.ts +26 -0
- package/dist/types/components/OptionButton/OptionButton.d.ts +59 -0
- package/dist/types/components/OptionButton/index.d.ts +3 -0
- package/dist/types/components/OptionButton/styled.d.ts +18 -0
- package/dist/types/components/ProductSelectionDrawer/ProductSelectionDrawer.d.ts +54 -0
- package/dist/types/components/ProductSelectionDrawer/index.d.ts +3 -0
- package/dist/types/components/ProductSelectionDrawer/styled.d.ts +44 -0
- package/dist/types/components/QuestionSection/QuestionSection.d.ts +71 -0
- package/dist/types/components/QuestionSection/index.d.ts +3 -0
- package/dist/types/components/QuestionSection/styled.d.ts +16 -0
- package/dist/types/components/RecommendationsDrawer/RecommendationsDrawer.d.ts +92 -0
- package/dist/types/components/RecommendationsDrawer/index.d.ts +3 -0
- package/dist/types/components/RecommendationsDrawer/styled.d.ts +35 -0
- package/dist/types/components/ToggleGroup/ToggleGroup.d.ts +45 -0
- package/dist/types/components/ToggleGroup/index.d.ts +3 -0
- package/dist/types/components/ToggleGroup/styled.d.ts +17 -0
- package/dist/types/context/TenantThemeContext.d.ts +3 -2
- package/dist/types/index.d.ts +30 -4
- package/dist/types/{components/Banner → storybook-components}/Banner.stories.d.ts +1 -1
- package/dist/types/storybook-components/BillingToggle.stories.d.ts +10 -0
- package/dist/types/{components/Button → storybook-components}/Button.stories.d.ts +1 -1
- package/dist/types/{components/Card → storybook-components}/Card.stories.d.ts +1 -1
- package/dist/types/storybook-components/CoverageAmountSlider.stories.d.ts +14 -0
- package/dist/types/storybook-components/Footer.stories.d.ts +10 -0
- package/dist/types/storybook-components/Header.stories.d.ts +9 -0
- package/dist/types/storybook-components/InfoCallout.stories.d.ts +11 -0
- package/dist/types/storybook-components/NewHeader.stories.d.ts +82 -0
- package/dist/types/storybook-components/OptionButton.stories.d.ts +12 -0
- package/dist/types/storybook-components/ProductSelectionDrawer.stories.d.ts +24 -0
- package/dist/types/storybook-components/QuestionSection.stories.d.ts +11 -0
- package/dist/types/storybook-components/RecommendationsDrawer.stories.d.ts +36 -0
- package/dist/types/storybook-components/ToggleGroup.stories.d.ts +10 -0
- package/dist/types/themes/index.d.ts +1 -1
- package/dist/types/themes/typography.d.ts +69 -0
- package/dist/types/types/tenant.d.ts +23 -2
- package/dist/types/utils/assets.d.ts +54 -0
- package/dist/types/utils/theme.d.ts +3 -2
- package/package.json +4 -2
|
@@ -0,0 +1,69 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Tenant Typography Configurations
|
|
3
|
+
* Centralized typography definitions for all tenants
|
|
4
|
+
* Based on b2c-web-demo typography structure
|
|
5
|
+
*/
|
|
6
|
+
import { TenantId } from '../types/tenant';
|
|
7
|
+
export interface TypographyVariant {
|
|
8
|
+
fontSize: string;
|
|
9
|
+
fontStyle?: string;
|
|
10
|
+
fontWeight: number | string;
|
|
11
|
+
lineHeight: string;
|
|
12
|
+
'@media (max-width:600px)'?: {
|
|
13
|
+
fontSize: string;
|
|
14
|
+
fontStyle?: string;
|
|
15
|
+
fontWeight: number | string;
|
|
16
|
+
lineHeight: string;
|
|
17
|
+
};
|
|
18
|
+
'@media (min-width:600px)'?: {
|
|
19
|
+
fontSize?: string;
|
|
20
|
+
fontStyle?: string;
|
|
21
|
+
fontWeight?: number | string;
|
|
22
|
+
lineHeight?: string;
|
|
23
|
+
};
|
|
24
|
+
}
|
|
25
|
+
export interface TenantTypographyConfig {
|
|
26
|
+
fontFamily: string;
|
|
27
|
+
fontWeightRegular: number;
|
|
28
|
+
fontWeightMedium: number;
|
|
29
|
+
fontWeightSemiBold: number;
|
|
30
|
+
fontWeightBold: number;
|
|
31
|
+
fontWeightExtraBold: number;
|
|
32
|
+
fontWeightExtraBlack: number;
|
|
33
|
+
H1?: TypographyVariant;
|
|
34
|
+
h1?: TypographyVariant;
|
|
35
|
+
h2?: TypographyVariant;
|
|
36
|
+
h3?: TypographyVariant;
|
|
37
|
+
h4?: TypographyVariant;
|
|
38
|
+
bodyStrongLarge?: TypographyVariant;
|
|
39
|
+
bodyStrongMedium?: TypographyVariant;
|
|
40
|
+
bodyStrongSmall?: TypographyVariant;
|
|
41
|
+
bodyLarge?: TypographyVariant;
|
|
42
|
+
bodyMedium?: TypographyVariant;
|
|
43
|
+
bodySmall?: TypographyVariant;
|
|
44
|
+
smallText?: TypographyVariant;
|
|
45
|
+
[key: string]: any;
|
|
46
|
+
}
|
|
47
|
+
/**
|
|
48
|
+
* Igloo Typography Configuration
|
|
49
|
+
*/
|
|
50
|
+
export declare const iglooTypography: TenantTypographyConfig;
|
|
51
|
+
/**
|
|
52
|
+
* CIMB Typography Configuration
|
|
53
|
+
*/
|
|
54
|
+
export declare const cimbTypography: TenantTypographyConfig;
|
|
55
|
+
/**
|
|
56
|
+
* AmmetLife Typography Configuration
|
|
57
|
+
*/
|
|
58
|
+
export declare const ammetlifeTypography: TenantTypographyConfig;
|
|
59
|
+
/**
|
|
60
|
+
* Typography Registry
|
|
61
|
+
* Map of tenant IDs to their typography configurations
|
|
62
|
+
*/
|
|
63
|
+
export declare const tenantTypography: Record<TenantId, TenantTypographyConfig>;
|
|
64
|
+
/**
|
|
65
|
+
* Get typography configuration by tenant ID
|
|
66
|
+
* @param tenantId - The tenant identifier
|
|
67
|
+
* @returns Typography configuration for the specified tenant
|
|
68
|
+
*/
|
|
69
|
+
export declare function getTenantTypography(tenantId: TenantId): TenantTypographyConfig;
|
|
@@ -32,13 +32,34 @@ export interface TenantPalette {
|
|
|
32
32
|
}
|
|
33
33
|
export interface TenantTypography {
|
|
34
34
|
fontFamily?: string;
|
|
35
|
+
fontWeightRegular?: number;
|
|
36
|
+
fontWeightMedium?: number;
|
|
37
|
+
fontWeightSemiBold?: number;
|
|
38
|
+
fontWeightBold?: number;
|
|
39
|
+
fontWeightExtraBold?: number;
|
|
40
|
+
fontWeightExtraBlack?: number;
|
|
41
|
+
h1?: any;
|
|
42
|
+
h2?: any;
|
|
43
|
+
h3?: any;
|
|
44
|
+
h4?: any;
|
|
45
|
+
bodyStrongLarge?: any;
|
|
46
|
+
bodyStrongMedium?: any;
|
|
47
|
+
bodyStrongSmall?: any;
|
|
48
|
+
bodyLarge?: any;
|
|
49
|
+
bodyMedium?: any;
|
|
50
|
+
bodySmall?: any;
|
|
51
|
+
smallText?: any;
|
|
35
52
|
[key: string]: any;
|
|
36
53
|
}
|
|
37
54
|
export interface TenantThemeConfig {
|
|
38
55
|
palette: TenantPalette;
|
|
39
56
|
typography?: TenantTypography;
|
|
40
|
-
logo
|
|
41
|
-
|
|
57
|
+
logo: string;
|
|
58
|
+
logoDark?: string;
|
|
59
|
+
logoAlt?: string;
|
|
60
|
+
logoWhite?: string;
|
|
61
|
+
favicon: string;
|
|
62
|
+
assetBaseUrl?: string;
|
|
42
63
|
}
|
|
43
64
|
/**
|
|
44
65
|
* Tenant Context Value
|
|
@@ -0,0 +1,54 @@
|
|
|
1
|
+
/**
|
|
2
|
+
* Asset Management Utilities
|
|
3
|
+
* Helper functions for managing tenant-specific assets
|
|
4
|
+
*/
|
|
5
|
+
/**
|
|
6
|
+
* Hook to get tenant-specific asset URL
|
|
7
|
+
* @param assetPath - Relative path to asset within tenant folder
|
|
8
|
+
* @returns Full path to tenant-specific asset
|
|
9
|
+
*
|
|
10
|
+
* @example
|
|
11
|
+
* ```tsx
|
|
12
|
+
* const bannerImage = useTenantAsset('promotional-banner.jpg')
|
|
13
|
+
* <img src={bannerImage} alt="Promo" />
|
|
14
|
+
* ```
|
|
15
|
+
*/
|
|
16
|
+
export declare function useTenantAsset(assetPath: string): string;
|
|
17
|
+
/**
|
|
18
|
+
* Hook to get tenant logo URL
|
|
19
|
+
* @param variant - Logo variant ('default' | 'dark' | 'alt' | 'white')
|
|
20
|
+
* @returns Logo URL from theme configuration
|
|
21
|
+
*
|
|
22
|
+
* @example
|
|
23
|
+
* ```tsx
|
|
24
|
+
* const logo = useTenantLogo()
|
|
25
|
+
* const darkLogo = useTenantLogo('dark')
|
|
26
|
+
* <img src={logo} alt="Logo" />
|
|
27
|
+
* ```
|
|
28
|
+
*/
|
|
29
|
+
export declare function useTenantLogo(variant?: 'default' | 'dark' | 'alt' | 'white'): string;
|
|
30
|
+
/**
|
|
31
|
+
* Hook to get tenant favicon URL
|
|
32
|
+
* @returns Favicon URL from theme configuration
|
|
33
|
+
*
|
|
34
|
+
* @example
|
|
35
|
+
* ```tsx
|
|
36
|
+
* const favicon = useTenantFavicon()
|
|
37
|
+
* <link rel="icon" href={favicon} />
|
|
38
|
+
* ```
|
|
39
|
+
*/
|
|
40
|
+
export declare function useTenantFavicon(): string;
|
|
41
|
+
/**
|
|
42
|
+
* Get tenant asset path (non-hook version for use outside components)
|
|
43
|
+
* @param tenantId - Tenant identifier
|
|
44
|
+
* @param assetPath - Relative path to asset
|
|
45
|
+
* @returns Full asset path
|
|
46
|
+
*/
|
|
47
|
+
export declare function getTenantAssetPath(tenantId: string, assetPath: string): string;
|
|
48
|
+
/**
|
|
49
|
+
* Get tenant logo path (non-hook version)
|
|
50
|
+
* @param tenantId - Tenant identifier
|
|
51
|
+
* @param variant - Logo variant
|
|
52
|
+
* @returns Logo path
|
|
53
|
+
*/
|
|
54
|
+
export declare function getTenantLogoPath(tenantId: string, variant?: 'default' | 'dark' | 'alt' | 'white'): string;
|
|
@@ -6,14 +6,15 @@ import { Theme } from '@mui/material/styles';
|
|
|
6
6
|
import { TenantThemeConfig } from '../types/tenant';
|
|
7
7
|
/**
|
|
8
8
|
* Get color value from theme palette path
|
|
9
|
-
* @param theme - Tenant theme configuration
|
|
9
|
+
* @param theme - Tenant theme configuration (can be undefined/null for SSR)
|
|
10
10
|
* @param path - Dot-notation path to color (e.g., 'primary.main')
|
|
11
11
|
* @param defaultColor - Fallback color if path not found
|
|
12
12
|
* @returns Color string
|
|
13
13
|
*/
|
|
14
|
-
export declare function getThemeColor(theme: TenantThemeConfig, path: string, defaultColor?: string): string;
|
|
14
|
+
export declare function getThemeColor(theme: TenantThemeConfig | undefined | null, path: string, defaultColor?: string): string;
|
|
15
15
|
/**
|
|
16
16
|
* Merge tenant theme with base MUI theme
|
|
17
|
+
* This makes tenant theme accessible in styled components via theme parameter
|
|
17
18
|
* @param baseTheme - Base MUI theme
|
|
18
19
|
* @param tenantTheme - Tenant-specific theme configuration
|
|
19
20
|
* @returns Merged theme
|
package/package.json
CHANGED
|
@@ -1,13 +1,14 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "igloo-d2c-components",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.10",
|
|
4
4
|
"description": "Reusable component library with tenant-aware theming for B2C applications",
|
|
5
5
|
"main": "dist/cjs/index.js",
|
|
6
6
|
"module": "dist/esm/index.js",
|
|
7
7
|
"types": "dist/types/index.d.ts",
|
|
8
8
|
"files": [
|
|
9
9
|
"dist",
|
|
10
|
-
"README.md"
|
|
10
|
+
"README.md",
|
|
11
|
+
"dist/assets"
|
|
11
12
|
],
|
|
12
13
|
"scripts": {
|
|
13
14
|
"build": "yarn clean && rollup -c rollup.config.cjs && tsc --declaration --emitDeclarationOnly --outDir dist/types",
|
|
@@ -74,6 +75,7 @@
|
|
|
74
75
|
"react-dom": "^17.0.0",
|
|
75
76
|
"rimraf": "^4.4.1",
|
|
76
77
|
"rollup": "^3.29.5",
|
|
78
|
+
"rollup-plugin-copy": "3.5.0",
|
|
77
79
|
"rollup-plugin-peer-deps-external": "^2.2.4",
|
|
78
80
|
"tslib": "^2.8.1",
|
|
79
81
|
"typescript": "^4.9.0",
|