funuicss 3.7.15 → 3.7.16
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/css/fun.css +236 -1
- package/index.d.ts +1 -0
- package/index.js +3 -1
- package/package.json +1 -1
- package/ui/feature/Feature.d.ts +130 -0
- package/ui/feature/Feature.js +380 -0
- package/ui/footer/Footer.d.ts +1 -0
- package/ui/footer/Footer.js +6 -1
- package/ui/icons/Dynamic.d.ts +12 -0
- package/ui/icons/Dynamic.js +163 -0
- package/ui/theme/theme.d.ts +1 -0
- package/ui/theme/theme.js +571 -23
- package/ui/vista/Vista.js +8 -12
|
@@ -0,0 +1,380 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
var __assign = (this && this.__assign) || function () {
|
|
4
|
+
__assign = Object.assign || function(t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
+
t[p] = s[p];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
return __assign.apply(this, arguments);
|
|
13
|
+
};
|
|
14
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
15
|
+
if (k2 === undefined) k2 = k;
|
|
16
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
17
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
18
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
19
|
+
}
|
|
20
|
+
Object.defineProperty(o, k2, desc);
|
|
21
|
+
}) : (function(o, m, k, k2) {
|
|
22
|
+
if (k2 === undefined) k2 = k;
|
|
23
|
+
o[k2] = m[k];
|
|
24
|
+
}));
|
|
25
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
26
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
27
|
+
}) : function(o, v) {
|
|
28
|
+
o["default"] = v;
|
|
29
|
+
});
|
|
30
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
31
|
+
var ownKeys = function(o) {
|
|
32
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
33
|
+
var ar = [];
|
|
34
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
35
|
+
return ar;
|
|
36
|
+
};
|
|
37
|
+
return ownKeys(o);
|
|
38
|
+
};
|
|
39
|
+
return function (mod) {
|
|
40
|
+
if (mod && mod.__esModule) return mod;
|
|
41
|
+
var result = {};
|
|
42
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
43
|
+
__setModuleDefault(result, mod);
|
|
44
|
+
return result;
|
|
45
|
+
};
|
|
46
|
+
})();
|
|
47
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
48
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
49
|
+
};
|
|
50
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
51
|
+
var react_1 = __importStar(require("react"));
|
|
52
|
+
var getCssVariable_1 = require("../../utils/getCssVariable");
|
|
53
|
+
var componentUtils_1 = require("../../utils/componentUtils");
|
|
54
|
+
var Text_1 = __importDefault(require("../text/Text"));
|
|
55
|
+
var Button_1 = __importDefault(require("../button/Button"));
|
|
56
|
+
var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
|
|
57
|
+
var useDynamicIcon = function (iconString) {
|
|
58
|
+
var _a = (0, react_1.useState)(null), iconNode = _a[0], setIconNode = _a[1];
|
|
59
|
+
var _b = (0, react_1.useState)(false), hasValidIcon = _b[0], setHasValidIcon = _b[1];
|
|
60
|
+
(0, react_1.useEffect)(function () {
|
|
61
|
+
if (!iconString || typeof iconString !== 'string' || iconString.trim() === '') {
|
|
62
|
+
setIconNode(null);
|
|
63
|
+
setHasValidIcon(false);
|
|
64
|
+
return;
|
|
65
|
+
}
|
|
66
|
+
(0, getDynamicIcon_1.getDynamicIcon)(iconString).then(function (node) {
|
|
67
|
+
if (node) {
|
|
68
|
+
setIconNode(node);
|
|
69
|
+
setHasValidIcon(true);
|
|
70
|
+
}
|
|
71
|
+
else {
|
|
72
|
+
setIconNode(null);
|
|
73
|
+
setHasValidIcon(false);
|
|
74
|
+
}
|
|
75
|
+
});
|
|
76
|
+
}, [iconString]);
|
|
77
|
+
return { iconNode: iconNode, hasValidIcon: hasValidIcon };
|
|
78
|
+
};
|
|
79
|
+
var FeatureIcon = function (_a) {
|
|
80
|
+
var icon = _a.icon, iconColor = _a.iconColor, _b = _a.iconSize, iconSize = _b === void 0 ? 24 : _b, _c = _a.iconClassName, iconClassName = _c === void 0 ? '' : _c, layout = _a.layout, _d = _a.checklistIcon, checklistIcon = _d === void 0 ? 'PiCheck' : _d, _e = _a.checklistColor, checklistColor = _e === void 0 ? 'success' : _e, _f = _a.checklistSize, checklistSize = _f === void 0 ? 20 : _f, _g = _a.checklistClassName, checklistClassName = _g === void 0 ? '' : _g;
|
|
81
|
+
var isStringIcon = icon && typeof icon === 'string';
|
|
82
|
+
var _h = useDynamicIcon(isStringIcon ? icon : undefined), dynamicIconNode = _h.iconNode, hasValidDynamicIcon = _h.hasValidIcon;
|
|
83
|
+
var _j = useDynamicIcon(layout === 'checklist' ? checklistIcon : undefined), checkmarkIconNode = _j.iconNode, hasValidCheckmarkIcon = _j.hasValidIcon;
|
|
84
|
+
var getIconColorStyle = function (color) {
|
|
85
|
+
if (!color)
|
|
86
|
+
return {};
|
|
87
|
+
if (color.startsWith('text-') || color.startsWith('bg-') || color.startsWith('border-')) {
|
|
88
|
+
return {};
|
|
89
|
+
}
|
|
90
|
+
var colorNames = ['primary', 'secondary', 'accent', 'success', 'warning', 'error', 'info', 'dark', 'light'];
|
|
91
|
+
if (colorNames.includes(color)) {
|
|
92
|
+
var cssValue = (0, getCssVariable_1.getCssVariableValue)(color);
|
|
93
|
+
if (cssValue) {
|
|
94
|
+
return { color: cssValue };
|
|
95
|
+
}
|
|
96
|
+
}
|
|
97
|
+
return { color: color };
|
|
98
|
+
};
|
|
99
|
+
var iconColorStyle = getIconColorStyle(iconColor);
|
|
100
|
+
var checklistColorStyle = getIconColorStyle(checklistColor);
|
|
101
|
+
var renderIconWithProps = function (iconElement, className, style, size) {
|
|
102
|
+
if (!react_1.default.isValidElement(iconElement))
|
|
103
|
+
return iconElement;
|
|
104
|
+
var props = {
|
|
105
|
+
className: className,
|
|
106
|
+
style: __assign(__assign({}, style), iconElement.props.style),
|
|
107
|
+
};
|
|
108
|
+
if (size !== undefined) {
|
|
109
|
+
props.size = size;
|
|
110
|
+
}
|
|
111
|
+
return react_1.default.cloneElement(iconElement, props);
|
|
112
|
+
};
|
|
113
|
+
if (icon && typeof icon !== 'string' && react_1.default.isValidElement(icon)) {
|
|
114
|
+
return renderIconWithProps(icon, "feature-section__icon ".concat(iconClassName), iconColorStyle, iconSize);
|
|
115
|
+
}
|
|
116
|
+
if (isStringIcon && hasValidDynamicIcon && dynamicIconNode) {
|
|
117
|
+
return renderIconWithProps(dynamicIconNode, "feature-section__icon ".concat(iconClassName), iconColorStyle, iconSize);
|
|
118
|
+
}
|
|
119
|
+
if (layout === 'checklist' && hasValidCheckmarkIcon && checkmarkIconNode) {
|
|
120
|
+
return renderIconWithProps(checkmarkIconNode, "feature-section__checkmark ".concat(checklistClassName), checklistColorStyle, checklistSize);
|
|
121
|
+
}
|
|
122
|
+
return null;
|
|
123
|
+
};
|
|
124
|
+
var Feature = function (localProps) {
|
|
125
|
+
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Feature', localProps.variant).mergeWithLocal;
|
|
126
|
+
var mergedProps = mergeWithLocal(localProps).props;
|
|
127
|
+
var final = mergedProps;
|
|
128
|
+
var _a = (0, react_1.useState)([]), featuresArray = _a[0], setFeaturesArray = _a[1];
|
|
129
|
+
var _b = (0, react_1.useState)({}), responsiveColumns = _b[0], setResponsiveColumns = _b[1];
|
|
130
|
+
// Parse features
|
|
131
|
+
(0, react_1.useEffect)(function () {
|
|
132
|
+
if (typeof final.features === 'string') {
|
|
133
|
+
try {
|
|
134
|
+
var parsed = JSON.parse(final.features);
|
|
135
|
+
setFeaturesArray(Array.isArray(parsed) ? parsed : [parsed]);
|
|
136
|
+
}
|
|
137
|
+
catch (error) {
|
|
138
|
+
console.error('Error parsing features JSON:', error);
|
|
139
|
+
setFeaturesArray([]);
|
|
140
|
+
}
|
|
141
|
+
}
|
|
142
|
+
else if (Array.isArray(final.features)) {
|
|
143
|
+
setFeaturesArray(final.features);
|
|
144
|
+
}
|
|
145
|
+
else {
|
|
146
|
+
setFeaturesArray([]);
|
|
147
|
+
}
|
|
148
|
+
}, [final.features]);
|
|
149
|
+
// Parse responsive columns
|
|
150
|
+
(0, react_1.useEffect)(function () {
|
|
151
|
+
if (final.responsiveColumns) {
|
|
152
|
+
try {
|
|
153
|
+
var parsed = JSON.parse(final.responsiveColumns);
|
|
154
|
+
if (parsed && typeof parsed === 'object') {
|
|
155
|
+
setResponsiveColumns(parsed);
|
|
156
|
+
}
|
|
157
|
+
}
|
|
158
|
+
catch (error) {
|
|
159
|
+
console.error('Error parsing responsive columns:', error);
|
|
160
|
+
setResponsiveColumns({});
|
|
161
|
+
}
|
|
162
|
+
}
|
|
163
|
+
}, [final.responsiveColumns]);
|
|
164
|
+
var getSpacingValue = function (value, defaultValue) {
|
|
165
|
+
if (defaultValue === void 0) { defaultValue = '0'; }
|
|
166
|
+
if (!value)
|
|
167
|
+
return defaultValue;
|
|
168
|
+
if (/^\d+$/.test(value)) {
|
|
169
|
+
return "".concat(parseInt(value) * 0.25, "rem");
|
|
170
|
+
}
|
|
171
|
+
return value;
|
|
172
|
+
};
|
|
173
|
+
var getButtonVariantClass = function (variant) {
|
|
174
|
+
if (!variant)
|
|
175
|
+
return '';
|
|
176
|
+
var variantClasses = {
|
|
177
|
+
'primary': 'btn-primary',
|
|
178
|
+
'secondary': 'btn-secondary',
|
|
179
|
+
'accent': 'btn-accent',
|
|
180
|
+
'text': 'btn-text',
|
|
181
|
+
'outline': 'btn-outline',
|
|
182
|
+
};
|
|
183
|
+
return variantClasses[variant] || "btn-".concat(variant);
|
|
184
|
+
};
|
|
185
|
+
var renderItemCTA = function (item) {
|
|
186
|
+
if (!item.ctaText)
|
|
187
|
+
return null;
|
|
188
|
+
var ctaVariant = item.ctaVariant || 'text';
|
|
189
|
+
var ctaClassName = item.ctaClassName || '';
|
|
190
|
+
var ctaCss = item.ctaCss || '';
|
|
191
|
+
var buttonClass = getButtonVariantClass(ctaVariant);
|
|
192
|
+
return (react_1.default.createElement("a", { href: item.ctaUrl, onClick: item.ctaOnClick, className: "btn ".concat(buttonClass, " ").concat(ctaClassName, " ").concat(ctaCss, " feature-section__item-cta text-sm"), style: {
|
|
193
|
+
marginTop: '1rem',
|
|
194
|
+
display: 'inline-block',
|
|
195
|
+
textDecoration: 'none',
|
|
196
|
+
} }, item.ctaText));
|
|
197
|
+
};
|
|
198
|
+
var renderFeatureItem = function (item, index) {
|
|
199
|
+
var _a, _b;
|
|
200
|
+
if (item.customRender) {
|
|
201
|
+
return item.customRender();
|
|
202
|
+
}
|
|
203
|
+
var iconColor = item.iconColor || final.iconColor;
|
|
204
|
+
var iconSize = item.iconSize || final.iconSize || 24;
|
|
205
|
+
var iconClassName = item.iconClassName || final.iconClassName || '';
|
|
206
|
+
var checkmarkIcon = final.checkmarkIcon || 'PiCheck';
|
|
207
|
+
var checkmarkColor = final.checkmarkColor || 'success';
|
|
208
|
+
var checkmarkSize = final.checkmarkSize || 20;
|
|
209
|
+
var checkmarkClassName = final.checkmarkClassName || '';
|
|
210
|
+
var cardBg = item.cardBg || final.cardBg;
|
|
211
|
+
var cardPadding = item.cardPadding || final.cardPadding || '1.5rem';
|
|
212
|
+
var cardRounded = item.cardRounded || final.cardRounded || '0.5rem';
|
|
213
|
+
var cardShadow = item.cardShadow || final.cardShadow || 'md';
|
|
214
|
+
var cardBorder = (_b = (_a = item.cardBorder) !== null && _a !== void 0 ? _a : final.cardBorder) !== null && _b !== void 0 ? _b : true;
|
|
215
|
+
var cardBorderColor = item.cardBorderColor || final.cardBorderColor || 'var(--borderRgb)';
|
|
216
|
+
var cardHoverEffect = item.cardHoverEffect || final.cardHoverEffect || 'none';
|
|
217
|
+
var titleSize = item.titleSize || final.itemTitleSize || '1.125rem';
|
|
218
|
+
var titleWeight = item.titleWeight || final.itemTitleWeight || 600;
|
|
219
|
+
var titleColor = item.titleColor || final.itemTitleColor || 'var(--text-color)';
|
|
220
|
+
var titleClassName = item.titleClassName || '';
|
|
221
|
+
var titleVariant = item.titleVariant || final.itemTitleVariant; // Updated
|
|
222
|
+
var descriptionSize = item.descriptionSize || final.itemDescriptionSize || '0.875rem';
|
|
223
|
+
var descriptionWeight = item.descriptionWeight || final.itemDescriptionWeight || 400;
|
|
224
|
+
var descriptionColor = item.descriptionColor || final.itemDescriptionColor || 'var(--text-muted)';
|
|
225
|
+
var descriptionClassName = item.descriptionClassName || '';
|
|
226
|
+
var descriptionVariant = item.descriptionVariant || final.itemDescriptionVariant; // Updated
|
|
227
|
+
var isGridLayout = final.layout === 'grid';
|
|
228
|
+
var featureContent = (react_1.default.createElement("div", { className: "feature-section__item ".concat(item.className || ''), style: item.style },
|
|
229
|
+
(item.icon || item.imageUrl || final.layout === 'checklist') && (react_1.default.createElement("div", { className: "feature-section__icon-container", style: { marginBottom: '1rem' } }, item.imageUrl ? (react_1.default.createElement("img", { src: item.imageUrl, alt: item.imageAlt || '', className: "feature-section__image ".concat(item.imageClassName || final.imageClassName || ''), style: __assign(__assign({ width: "".concat(iconSize, "px"), height: "".concat(iconSize, "px"), objectFit: 'cover', borderRadius: '50%' }, item.imageStyle), final.imageStyle) })) : (react_1.default.createElement("div", { className: "feature-section__icon-wrapper" },
|
|
230
|
+
react_1.default.createElement(FeatureIcon, { icon: item.icon, iconColor: iconColor, iconSize: iconSize, iconClassName: iconClassName, layout: final.layout, checklistIcon: checkmarkIcon, checklistColor: checkmarkColor, checklistSize: checkmarkSize, checklistClassName: checkmarkClassName }))))),
|
|
231
|
+
item.title && (react_1.default.createElement(Text_1.default, { variant: titleVariant, block: true, size: titleSize, weight: titleWeight, color: titleColor, funcss: "feature-section__title ".concat(titleClassName), style: { marginBottom: '0.75rem' } }, item.title)),
|
|
232
|
+
item.description && (react_1.default.createElement(Text_1.default, { variant: descriptionVariant, block: true, size: descriptionSize, weight: descriptionWeight, color: descriptionColor, funcss: "feature-section__description ".concat(descriptionClassName) }, item.description)),
|
|
233
|
+
item.content && (react_1.default.createElement("div", { className: "feature-section__additional-content", style: { marginTop: '1rem' } }, item.content)),
|
|
234
|
+
renderItemCTA(item)));
|
|
235
|
+
// For grid layout with cards
|
|
236
|
+
if (isGridLayout && cardBg) {
|
|
237
|
+
var cardClasses = [
|
|
238
|
+
'feature-section__card',
|
|
239
|
+
cardHoverEffect !== 'none' ? "feature-section__card--hover-".concat(cardHoverEffect) : '',
|
|
240
|
+
item.className || '',
|
|
241
|
+
].filter(Boolean).join(' ');
|
|
242
|
+
var cardStyles = __assign({ padding: getSpacingValue(cardPadding, '1.5rem'), borderRadius: cardRounded, backgroundColor: cardBg ? (0, getCssVariable_1.getCssVariableValue)(cardBg) || cardBg : undefined, boxShadow: cardShadow !== 'none' ? (0, getCssVariable_1.getCssVariableValue)("shadow-".concat(cardShadow)) || undefined : undefined, border: cardBorder ? "1px solid ".concat((0, getCssVariable_1.getCssVariableValue)(cardBorderColor) || cardBorderColor) : 'none', height: '100%' }, item.style);
|
|
243
|
+
return (react_1.default.createElement("div", { key: index, className: cardClasses, style: cardStyles }, featureContent));
|
|
244
|
+
}
|
|
245
|
+
return featureContent;
|
|
246
|
+
};
|
|
247
|
+
var getResponsiveGridColumns = function () {
|
|
248
|
+
var defaultColumns = final.columns || 3;
|
|
249
|
+
if (Object.keys(responsiveColumns).length === 0) {
|
|
250
|
+
return "repeat(".concat(defaultColumns, ", 1fr)");
|
|
251
|
+
}
|
|
252
|
+
return {
|
|
253
|
+
base: "repeat(".concat(responsiveColumns.sm || defaultColumns, ", 1fr)"),
|
|
254
|
+
sm: "repeat(".concat(responsiveColumns.sm || defaultColumns, ", 1fr)"),
|
|
255
|
+
md: "repeat(".concat(responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
|
|
256
|
+
lg: "repeat(".concat(responsiveColumns.lg || responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
|
|
257
|
+
xl: "repeat(".concat(responsiveColumns.xl || responsiveColumns.lg || responsiveColumns.md || responsiveColumns.sm || defaultColumns, ", 1fr)"),
|
|
258
|
+
};
|
|
259
|
+
};
|
|
260
|
+
var getGridStyles = function () {
|
|
261
|
+
var gap = getSpacingValue(final.gap, '2rem');
|
|
262
|
+
var itemGap = getSpacingValue(final.itemGap, '1rem');
|
|
263
|
+
var baseStyle = {
|
|
264
|
+
display: 'grid',
|
|
265
|
+
gap: gap,
|
|
266
|
+
alignItems: final.align || 'stretch',
|
|
267
|
+
justifyContent: final.justify || 'start',
|
|
268
|
+
};
|
|
269
|
+
var columns = getResponsiveGridColumns();
|
|
270
|
+
if (typeof columns === 'string') {
|
|
271
|
+
return __assign(__assign({}, baseStyle), { gridTemplateColumns: columns });
|
|
272
|
+
}
|
|
273
|
+
return baseStyle;
|
|
274
|
+
};
|
|
275
|
+
var getPatternStyle = function () {
|
|
276
|
+
if (!final.pattern || final.pattern === 'none')
|
|
277
|
+
return {};
|
|
278
|
+
var opacity = final.patternOpacity || 0.05;
|
|
279
|
+
var color = final.patternColor || 'borderRgb';
|
|
280
|
+
var size = final.patternSize || '20px';
|
|
281
|
+
var colorValue = (0, getCssVariable_1.getCssVariableValue)(color) || 'rgba(var(--borderRgb), 0.1)';
|
|
282
|
+
var backgroundImage = '';
|
|
283
|
+
var backgroundSize = size;
|
|
284
|
+
switch (final.pattern) {
|
|
285
|
+
case 'grid':
|
|
286
|
+
backgroundImage = "linear-gradient(to right, ".concat(colorValue, " ").concat(opacity, " 1px, transparent 1px),\n linear-gradient(to bottom, ").concat(colorValue, " ").concat(opacity, " 1px, transparent 1px)");
|
|
287
|
+
backgroundSize = "".concat(size, " ").concat(size);
|
|
288
|
+
break;
|
|
289
|
+
case 'dots':
|
|
290
|
+
backgroundImage = "radial-gradient(".concat(colorValue, " ").concat(opacity, " 1px, transparent 1px)");
|
|
291
|
+
backgroundSize = "".concat(size, " ").concat(size);
|
|
292
|
+
break;
|
|
293
|
+
case 'diagonal':
|
|
294
|
+
backgroundImage = "repeating-linear-gradient(45deg, ".concat(colorValue, " ").concat(opacity, ", ").concat(colorValue, " ").concat(opacity, " 1px, transparent 1px, transparent 20px)");
|
|
295
|
+
backgroundSize = "".concat(size, " ").concat(size);
|
|
296
|
+
break;
|
|
297
|
+
}
|
|
298
|
+
return {
|
|
299
|
+
backgroundImage: backgroundImage,
|
|
300
|
+
backgroundSize: backgroundSize,
|
|
301
|
+
};
|
|
302
|
+
};
|
|
303
|
+
var getFadeStyle = function () {
|
|
304
|
+
if (!final.fade)
|
|
305
|
+
return {};
|
|
306
|
+
var color = final.fadeColor || 'page-bg';
|
|
307
|
+
var fadeColor = (0, getCssVariable_1.getCssVariableValue)(color) || color;
|
|
308
|
+
if (final.fadeRadial) {
|
|
309
|
+
return {
|
|
310
|
+
background: "radial-gradient(ellipse at center, transparent 30%, ".concat(fadeColor, " 70%)"),
|
|
311
|
+
};
|
|
312
|
+
}
|
|
313
|
+
var direction = final.fadeDirection || 'bottom';
|
|
314
|
+
var gradients = {
|
|
315
|
+
top: 'to top',
|
|
316
|
+
bottom: 'to bottom',
|
|
317
|
+
left: 'to left',
|
|
318
|
+
right: 'to right',
|
|
319
|
+
};
|
|
320
|
+
return {
|
|
321
|
+
background: "linear-gradient(".concat(gradients[direction], ", transparent 0%, ").concat(fadeColor, " 90%)"),
|
|
322
|
+
};
|
|
323
|
+
};
|
|
324
|
+
var getTextAlign = function (align) {
|
|
325
|
+
return {
|
|
326
|
+
textAlign: align || 'center',
|
|
327
|
+
};
|
|
328
|
+
};
|
|
329
|
+
var renderFeaturesContent = function () {
|
|
330
|
+
if (featuresArray.length === 0)
|
|
331
|
+
return null;
|
|
332
|
+
var gridStyles = getGridStyles();
|
|
333
|
+
var isCentered = final.layout === 'centered';
|
|
334
|
+
var maxWidth = final.maxWidth || (isCentered ? '48rem' : '100%');
|
|
335
|
+
if (isCentered) {
|
|
336
|
+
return (react_1.default.createElement("div", { className: "feature-section__centered-container", style: {
|
|
337
|
+
maxWidth: maxWidth,
|
|
338
|
+
margin: '0 auto',
|
|
339
|
+
} }, featuresArray.map(function (item, index) { return renderFeatureItem(item, index); })));
|
|
340
|
+
}
|
|
341
|
+
return (react_1.default.createElement("div", { className: "feature-section__grid", style: __assign(__assign({}, gridStyles), { maxWidth: final.maxWidth || '100%', margin: '0 auto' }) }, featuresArray.map(function (item, index) { return (react_1.default.createElement("div", { key: index, className: "feature-section__grid-item" }, renderFeatureItem(item, index))); })));
|
|
342
|
+
};
|
|
343
|
+
var getLayoutClasses = function () {
|
|
344
|
+
var classes = ['feature-section'];
|
|
345
|
+
if (final.layout) {
|
|
346
|
+
classes.push("feature-section--".concat(final.layout));
|
|
347
|
+
}
|
|
348
|
+
if (final.className) {
|
|
349
|
+
classes.push(final.className);
|
|
350
|
+
}
|
|
351
|
+
if (final.sectionClass) {
|
|
352
|
+
classes.push(final.sectionClass);
|
|
353
|
+
}
|
|
354
|
+
if (final.funcss) {
|
|
355
|
+
classes.push(final.funcss);
|
|
356
|
+
}
|
|
357
|
+
return classes.filter(Boolean).join(' ');
|
|
358
|
+
};
|
|
359
|
+
var getContainerStyles = function () {
|
|
360
|
+
var padding = getSpacingValue(final.padding, '3rem 0');
|
|
361
|
+
return __assign(__assign({ position: 'relative', padding: padding, backgroundColor: final.bg ? (0, getCssVariable_1.getCssVariableValue)(final.bg) || final.bg : undefined, overflow: 'hidden' }, getPatternStyle()), final.style);
|
|
362
|
+
};
|
|
363
|
+
return (react_1.default.createElement("section", { id: final.id, className: getLayoutClasses(), style: getContainerStyles() },
|
|
364
|
+
final.fade && (react_1.default.createElement("div", { className: "feature-section__fade-overlay", style: __assign(__assign({ position: 'absolute', top: 0, left: 0, right: 0, bottom: 0, width: '100%', height: '100%' }, getFadeStyle()), { zIndex: 0, pointerEvents: 'none' }) })),
|
|
365
|
+
react_1.default.createElement("div", { className: "feature-section__container ".concat(final.containerClassName || ''), style: __assign({ position: 'relative', zIndex: 1, maxWidth: final.maxWidth || '1280px', margin: '0 auto', padding: '0 1rem' }, final.containerStyle) },
|
|
366
|
+
(final.title || final.subtitle || final.description) && (react_1.default.createElement("div", { className: "feature-section__header", style: __assign({ marginBottom: '3rem', maxWidth: final.layout === 'centered' ? '48rem' : '100%', marginLeft: 'auto', marginRight: 'auto' }, getTextAlign(final.titleAlign)) },
|
|
367
|
+
final.subtitle && (react_1.default.createElement(Text_1.default, { variant: final.subtitleVariant, block: true, size: final.subtitleSize || 'sm', weight: final.subtitleWeight || 600, color: final.subtitleColor || 'var(--primary)', funcss: "feature-section__subtitle ".concat(final.subtitleClassName || ''), style: {
|
|
368
|
+
textTransform: 'uppercase',
|
|
369
|
+
letterSpacing: '0.05em',
|
|
370
|
+
marginBottom: '0.5rem',
|
|
371
|
+
}, text: final.subtitle })),
|
|
372
|
+
final.title && (react_1.default.createElement(Text_1.default, { variant: final.titleVariant, block: true, size: final.titleSize || 'xl', weight: final.titleWeight || 700, color: final.titleColor || 'var(--text-color)', funcss: "feature-section__main-title ".concat(final.titleClassName || ''), style: { marginBottom: '1rem' }, text: final.title })),
|
|
373
|
+
final.description && (react_1.default.createElement(Text_1.default, { variant: final.descriptionVariant, block: true, size: final.descriptionSize || 'sm', weight: final.descriptionWeight || 400, color: final.descriptionColor || 'var(--text-muted)', funcss: "feature-section__section-description ".concat(final.descriptionClassName || ''), text: final.description })))),
|
|
374
|
+
react_1.default.createElement("div", { className: "feature-section__content" },
|
|
375
|
+
renderFeaturesContent(),
|
|
376
|
+
final.children),
|
|
377
|
+
final.ctaText && (react_1.default.createElement("div", { className: "feature-section__cta-container", style: __assign({ marginTop: '2.5rem' }, getTextAlign(final.ctaAlign)) },
|
|
378
|
+
react_1.default.createElement(Button_1.default, { variant: final.ctaVariant, onClick: final.ctaOnClick || (function () { return final.ctaUrl && (window.location.href = final.ctaUrl); }), funcss: "feature-section__cta ".concat(final.ctaClassName || '', " ").concat(final.ctaCss || ''), stringPrefix: final.ctaStringPrefix, stringSuffix: final.ctaStringSuffix, startIcon: final.ctaStartIcon, endIcon: final.ctaEndIcon, iconSize: final.ctaIconSize, isLoading: final.ctaIsLoading, status: final.ctaStatus, url: final.ctaUrl }, final.ctaText))))));
|
|
379
|
+
};
|
|
380
|
+
exports.default = Feature;
|
package/ui/footer/Footer.d.ts
CHANGED
package/ui/footer/Footer.js
CHANGED
|
@@ -78,11 +78,15 @@ var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
|
78
78
|
}
|
|
79
79
|
return to.concat(ar || Array.prototype.slice.call(from));
|
|
80
80
|
};
|
|
81
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
82
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
83
|
+
};
|
|
81
84
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
82
85
|
var react_1 = __importStar(require("react"));
|
|
83
86
|
var pi_1 = require("react-icons/pi");
|
|
84
87
|
var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
|
|
85
88
|
var componentUtils_1 = require("../../utils/componentUtils");
|
|
89
|
+
var Text_1 = __importDefault(require("../text/Text"));
|
|
86
90
|
var Footer = function (localProps) {
|
|
87
91
|
// Use component configuration with variant
|
|
88
92
|
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Footer', localProps.variant).mergeWithLocal;
|
|
@@ -291,7 +295,8 @@ var Footer = function (localProps) {
|
|
|
291
295
|
react_1.default.createElement("div", { className: "funui-footer__top ".concat(final.topSectionClass || ''), "data-testid": "footer-top" },
|
|
292
296
|
react_1.default.createElement("div", { className: "funui-footer__brand" },
|
|
293
297
|
(final.logo || final.logoUrl) && (react_1.default.createElement("a", { href: final.logoLinkUrl || '/', className: "funui-footer__logo-link ".concat(final.logoClass || ''), "aria-label": final.companyName || 'Home' }, final.logo ? (react_1.default.createElement("div", { className: "funui-footer__logo-custom" }, final.logo)) : final.logoUrl ? (react_1.default.createElement("img", { src: final.logoUrl, width: final.logoSize || 100, alt: "".concat(final.companyName || 'Company', " logo"), className: "funui-footer__logo-image", loading: "lazy" })) : null)),
|
|
294
|
-
final.description && (react_1.default.createElement("div", { className: "funui-footer__description ".concat(final.descriptionClass || ''), "data-testid": "footer-description" },
|
|
298
|
+
final.description && (react_1.default.createElement("div", { className: "funui-footer__description ".concat(final.descriptionClass || ''), "data-testid": "footer-description" },
|
|
299
|
+
react_1.default.createElement(Text_1.default, { variant: final.descriptionVariant || "", text: typeof final.description === 'string' ? (react_1.default.createElement("p", null, final.description)) : (final.description) }))),
|
|
295
300
|
final.showContactInfo && (final.email || final.phone || final.address) && (react_1.default.createElement("div", { className: "funui-footer__contact", "data-testid": "footer-contact" },
|
|
296
301
|
final.email && (react_1.default.createElement("div", { className: "funui-footer__contact-item" },
|
|
297
302
|
react_1.default.createElement("span", { className: "funui-footer__contact-icon" }, getIcon(final.emailIcon, 'email', react_1.default.createElement(pi_1.PiEnvelope, null))),
|
|
@@ -0,0 +1,12 @@
|
|
|
1
|
+
import React from 'react';
|
|
2
|
+
interface DynamicIconProps {
|
|
3
|
+
iconName?: string | React.ReactNode;
|
|
4
|
+
size?: number | string;
|
|
5
|
+
color?: string;
|
|
6
|
+
className?: string;
|
|
7
|
+
funcss?: string;
|
|
8
|
+
style?: React.CSSProperties;
|
|
9
|
+
[key: string]: any;
|
|
10
|
+
}
|
|
11
|
+
declare const DynamicIcon: React.FC<DynamicIconProps>;
|
|
12
|
+
export default DynamicIcon;
|
|
@@ -0,0 +1,163 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
var __assign = (this && this.__assign) || function () {
|
|
4
|
+
__assign = Object.assign || function(t) {
|
|
5
|
+
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
6
|
+
s = arguments[i];
|
|
7
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
8
|
+
t[p] = s[p];
|
|
9
|
+
}
|
|
10
|
+
return t;
|
|
11
|
+
};
|
|
12
|
+
return __assign.apply(this, arguments);
|
|
13
|
+
};
|
|
14
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
15
|
+
if (k2 === undefined) k2 = k;
|
|
16
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
17
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
18
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
19
|
+
}
|
|
20
|
+
Object.defineProperty(o, k2, desc);
|
|
21
|
+
}) : (function(o, m, k, k2) {
|
|
22
|
+
if (k2 === undefined) k2 = k;
|
|
23
|
+
o[k2] = m[k];
|
|
24
|
+
}));
|
|
25
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
26
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
27
|
+
}) : function(o, v) {
|
|
28
|
+
o["default"] = v;
|
|
29
|
+
});
|
|
30
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
31
|
+
var ownKeys = function(o) {
|
|
32
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
33
|
+
var ar = [];
|
|
34
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
35
|
+
return ar;
|
|
36
|
+
};
|
|
37
|
+
return ownKeys(o);
|
|
38
|
+
};
|
|
39
|
+
return function (mod) {
|
|
40
|
+
if (mod && mod.__esModule) return mod;
|
|
41
|
+
var result = {};
|
|
42
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
43
|
+
__setModuleDefault(result, mod);
|
|
44
|
+
return result;
|
|
45
|
+
};
|
|
46
|
+
})();
|
|
47
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
48
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
49
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
50
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
51
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
52
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
53
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
54
|
+
});
|
|
55
|
+
};
|
|
56
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
57
|
+
var _ = { label: 0, sent: function() { if (t[0] & 1) throw t[1]; return t[1]; }, trys: [], ops: [] }, f, y, t, g = Object.create((typeof Iterator === "function" ? Iterator : Object).prototype);
|
|
58
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
59
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
60
|
+
function step(op) {
|
|
61
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
62
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
63
|
+
if (f = 1, y && (t = op[0] & 2 ? y["return"] : op[0] ? y["throw"] || ((t = y["return"]) && t.call(y), 0) : y.next) && !(t = t.call(y, op[1])).done) return t;
|
|
64
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
65
|
+
switch (op[0]) {
|
|
66
|
+
case 0: case 1: t = op; break;
|
|
67
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
68
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
69
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
70
|
+
default:
|
|
71
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
72
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
73
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
74
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
75
|
+
if (t[2]) _.ops.pop();
|
|
76
|
+
_.trys.pop(); continue;
|
|
77
|
+
}
|
|
78
|
+
op = body.call(thisArg, _);
|
|
79
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
80
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
81
|
+
}
|
|
82
|
+
};
|
|
83
|
+
var __rest = (this && this.__rest) || function (s, e) {
|
|
84
|
+
var t = {};
|
|
85
|
+
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p) && e.indexOf(p) < 0)
|
|
86
|
+
t[p] = s[p];
|
|
87
|
+
if (s != null && typeof Object.getOwnPropertySymbols === "function")
|
|
88
|
+
for (var i = 0, p = Object.getOwnPropertySymbols(s); i < p.length; i++) {
|
|
89
|
+
if (e.indexOf(p[i]) < 0 && Object.prototype.propertyIsEnumerable.call(s, p[i]))
|
|
90
|
+
t[p[i]] = s[p[i]];
|
|
91
|
+
}
|
|
92
|
+
return t;
|
|
93
|
+
};
|
|
94
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
95
|
+
var react_1 = __importStar(require("react"));
|
|
96
|
+
var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
|
|
97
|
+
var DynamicIcon = function (_a) {
|
|
98
|
+
var iconName = _a.iconName, size = _a.size, color = _a.color, _b = _a.className, className = _b === void 0 ? '' : _b, _c = _a.funcss, funcss = _c === void 0 ? '' : _c, _d = _a.style, style = _d === void 0 ? {} : _d, rest = __rest(_a, ["iconName", "size", "color", "className", "funcss", "style"]);
|
|
99
|
+
var _e = (0, react_1.useState)(null), IconComponent = _e[0], setIconComponent = _e[1];
|
|
100
|
+
var _f = (0, react_1.useState)(false), isLoading = _f[0], setIsLoading = _f[1];
|
|
101
|
+
(0, react_1.useEffect)(function () {
|
|
102
|
+
var loadIcon = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
103
|
+
var Icon, error_1;
|
|
104
|
+
return __generator(this, function (_a) {
|
|
105
|
+
switch (_a.label) {
|
|
106
|
+
case 0:
|
|
107
|
+
if (!iconName || typeof iconName !== 'string') {
|
|
108
|
+
setIconComponent(null);
|
|
109
|
+
setIsLoading(false);
|
|
110
|
+
return [2 /*return*/];
|
|
111
|
+
}
|
|
112
|
+
setIsLoading(true);
|
|
113
|
+
_a.label = 1;
|
|
114
|
+
case 1:
|
|
115
|
+
_a.trys.push([1, 3, 4, 5]);
|
|
116
|
+
return [4 /*yield*/, (0, getDynamicIcon_1.getDynamicIcon)(iconName)];
|
|
117
|
+
case 2:
|
|
118
|
+
Icon = _a.sent();
|
|
119
|
+
setIconComponent(Icon);
|
|
120
|
+
return [3 /*break*/, 5];
|
|
121
|
+
case 3:
|
|
122
|
+
error_1 = _a.sent();
|
|
123
|
+
console.error("Failed to load icon \"".concat(iconName, "\":"), error_1);
|
|
124
|
+
setIconComponent(null);
|
|
125
|
+
return [3 /*break*/, 5];
|
|
126
|
+
case 4:
|
|
127
|
+
setIsLoading(false);
|
|
128
|
+
return [7 /*endfinally*/];
|
|
129
|
+
case 5: return [2 /*return*/];
|
|
130
|
+
}
|
|
131
|
+
});
|
|
132
|
+
}); };
|
|
133
|
+
loadIcon();
|
|
134
|
+
}, [iconName]);
|
|
135
|
+
// Helper function to handle React elements
|
|
136
|
+
var handleReactElement = function (element) {
|
|
137
|
+
var _a, _b;
|
|
138
|
+
var combinedClassName = "dynamic-icon ".concat(funcss, " ").concat(className, " ").concat(((_a = element.props) === null || _a === void 0 ? void 0 : _a.className) || '').trim();
|
|
139
|
+
var combinedStyle = __assign(__assign(__assign(__assign({}, (((_b = element.props) === null || _b === void 0 ? void 0 : _b.style) || {})), style), (size && { fontSize: typeof size === 'number' ? "".concat(size, "px") : size })), (color && { color: color }));
|
|
140
|
+
var mergedProps = __assign(__assign(__assign({}, element.props), rest), { className: combinedClassName, style: combinedStyle });
|
|
141
|
+
return react_1.default.cloneElement(element, mergedProps);
|
|
142
|
+
};
|
|
143
|
+
// If no icon is provided
|
|
144
|
+
if (!iconName)
|
|
145
|
+
return null;
|
|
146
|
+
// Handle React elements
|
|
147
|
+
if (react_1.default.isValidElement(iconName)) {
|
|
148
|
+
return handleReactElement(iconName);
|
|
149
|
+
}
|
|
150
|
+
// Handle string icons
|
|
151
|
+
if (typeof iconName === 'string') {
|
|
152
|
+
// Loading or error state
|
|
153
|
+
if (isLoading || !IconComponent) {
|
|
154
|
+
return (react_1.default.createElement("span", { className: "dynamic-icon-placeholder ".concat(funcss, " ").concat(className).trim(), style: __assign(__assign({}, style), { display: 'inline-block', width: size ? (typeof size === 'number' ? "".concat(size, "px") : size) : '1em', height: size ? (typeof size === 'number' ? "".concat(size, "px") : size) : '1em' }), "aria-label": isLoading ? 'Loading icon' : 'Icon not found' }));
|
|
155
|
+
}
|
|
156
|
+
var combinedClassName = "dynamic-icon ".concat(funcss, " ").concat(className).trim();
|
|
157
|
+
var combinedStyle = __assign(__assign(__assign({}, style), (size && { fontSize: typeof size === 'number' ? "".concat(size, "px") : size })), (color && { color: color }));
|
|
158
|
+
return react_1.default.createElement(IconComponent, __assign({ className: combinedClassName, style: combinedStyle }, rest));
|
|
159
|
+
}
|
|
160
|
+
// Handle other React nodes (fallback)
|
|
161
|
+
return iconName;
|
|
162
|
+
};
|
|
163
|
+
exports.default = DynamicIcon;
|