funuicss 3.7.13 → 3.7.15
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 +430 -0
- package/index.d.ts +1 -0
- package/index.js +3 -1
- package/package.json +1 -1
- package/ui/footer/Footer.d.ts +88 -0
- package/ui/footer/Footer.js +324 -0
- package/ui/vista/Vista.d.ts +14 -15
- package/ui/vista/Vista.js +35 -39
- package/utils/componentUtils.d.ts +126 -19
- package/utils/componentUtils.js +994 -57
|
@@ -0,0 +1,324 @@
|
|
|
1
|
+
"use strict";
|
|
2
|
+
'use client';
|
|
3
|
+
var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
|
|
4
|
+
if (k2 === undefined) k2 = k;
|
|
5
|
+
var desc = Object.getOwnPropertyDescriptor(m, k);
|
|
6
|
+
if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
|
|
7
|
+
desc = { enumerable: true, get: function() { return m[k]; } };
|
|
8
|
+
}
|
|
9
|
+
Object.defineProperty(o, k2, desc);
|
|
10
|
+
}) : (function(o, m, k, k2) {
|
|
11
|
+
if (k2 === undefined) k2 = k;
|
|
12
|
+
o[k2] = m[k];
|
|
13
|
+
}));
|
|
14
|
+
var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
|
|
15
|
+
Object.defineProperty(o, "default", { enumerable: true, value: v });
|
|
16
|
+
}) : function(o, v) {
|
|
17
|
+
o["default"] = v;
|
|
18
|
+
});
|
|
19
|
+
var __importStar = (this && this.__importStar) || (function () {
|
|
20
|
+
var ownKeys = function(o) {
|
|
21
|
+
ownKeys = Object.getOwnPropertyNames || function (o) {
|
|
22
|
+
var ar = [];
|
|
23
|
+
for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
|
|
24
|
+
return ar;
|
|
25
|
+
};
|
|
26
|
+
return ownKeys(o);
|
|
27
|
+
};
|
|
28
|
+
return function (mod) {
|
|
29
|
+
if (mod && mod.__esModule) return mod;
|
|
30
|
+
var result = {};
|
|
31
|
+
if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
|
|
32
|
+
__setModuleDefault(result, mod);
|
|
33
|
+
return result;
|
|
34
|
+
};
|
|
35
|
+
})();
|
|
36
|
+
var __awaiter = (this && this.__awaiter) || function (thisArg, _arguments, P, generator) {
|
|
37
|
+
function adopt(value) { return value instanceof P ? value : new P(function (resolve) { resolve(value); }); }
|
|
38
|
+
return new (P || (P = Promise))(function (resolve, reject) {
|
|
39
|
+
function fulfilled(value) { try { step(generator.next(value)); } catch (e) { reject(e); } }
|
|
40
|
+
function rejected(value) { try { step(generator["throw"](value)); } catch (e) { reject(e); } }
|
|
41
|
+
function step(result) { result.done ? resolve(result.value) : adopt(result.value).then(fulfilled, rejected); }
|
|
42
|
+
step((generator = generator.apply(thisArg, _arguments || [])).next());
|
|
43
|
+
});
|
|
44
|
+
};
|
|
45
|
+
var __generator = (this && this.__generator) || function (thisArg, body) {
|
|
46
|
+
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);
|
|
47
|
+
return g.next = verb(0), g["throw"] = verb(1), g["return"] = verb(2), typeof Symbol === "function" && (g[Symbol.iterator] = function() { return this; }), g;
|
|
48
|
+
function verb(n) { return function (v) { return step([n, v]); }; }
|
|
49
|
+
function step(op) {
|
|
50
|
+
if (f) throw new TypeError("Generator is already executing.");
|
|
51
|
+
while (g && (g = 0, op[0] && (_ = 0)), _) try {
|
|
52
|
+
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;
|
|
53
|
+
if (y = 0, t) op = [op[0] & 2, t.value];
|
|
54
|
+
switch (op[0]) {
|
|
55
|
+
case 0: case 1: t = op; break;
|
|
56
|
+
case 4: _.label++; return { value: op[1], done: false };
|
|
57
|
+
case 5: _.label++; y = op[1]; op = [0]; continue;
|
|
58
|
+
case 7: op = _.ops.pop(); _.trys.pop(); continue;
|
|
59
|
+
default:
|
|
60
|
+
if (!(t = _.trys, t = t.length > 0 && t[t.length - 1]) && (op[0] === 6 || op[0] === 2)) { _ = 0; continue; }
|
|
61
|
+
if (op[0] === 3 && (!t || (op[1] > t[0] && op[1] < t[3]))) { _.label = op[1]; break; }
|
|
62
|
+
if (op[0] === 6 && _.label < t[1]) { _.label = t[1]; t = op; break; }
|
|
63
|
+
if (t && _.label < t[2]) { _.label = t[2]; _.ops.push(op); break; }
|
|
64
|
+
if (t[2]) _.ops.pop();
|
|
65
|
+
_.trys.pop(); continue;
|
|
66
|
+
}
|
|
67
|
+
op = body.call(thisArg, _);
|
|
68
|
+
} catch (e) { op = [6, e]; y = 0; } finally { f = t = 0; }
|
|
69
|
+
if (op[0] & 5) throw op[1]; return { value: op[0] ? op[1] : void 0, done: true };
|
|
70
|
+
}
|
|
71
|
+
};
|
|
72
|
+
var __spreadArray = (this && this.__spreadArray) || function (to, from, pack) {
|
|
73
|
+
if (pack || arguments.length === 2) for (var i = 0, l = from.length, ar; i < l; i++) {
|
|
74
|
+
if (ar || !(i in from)) {
|
|
75
|
+
if (!ar) ar = Array.prototype.slice.call(from, 0, i);
|
|
76
|
+
ar[i] = from[i];
|
|
77
|
+
}
|
|
78
|
+
}
|
|
79
|
+
return to.concat(ar || Array.prototype.slice.call(from));
|
|
80
|
+
};
|
|
81
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
82
|
+
var react_1 = __importStar(require("react"));
|
|
83
|
+
var pi_1 = require("react-icons/pi");
|
|
84
|
+
var getDynamicIcon_1 = require("../../utils/getDynamicIcon");
|
|
85
|
+
var componentUtils_1 = require("../../utils/componentUtils");
|
|
86
|
+
var Footer = function (localProps) {
|
|
87
|
+
// Use component configuration with variant
|
|
88
|
+
var mergeWithLocal = (0, componentUtils_1.useComponentConfiguration)('Footer', localProps.variant).mergeWithLocal;
|
|
89
|
+
var final = mergeWithLocal(localProps).props;
|
|
90
|
+
var currentYear = final.year || new Date().getFullYear();
|
|
91
|
+
// State for dynamic icons
|
|
92
|
+
var _a = (0, react_1.useState)({}), loadedIcons = _a[0], setLoadedIcons = _a[1];
|
|
93
|
+
// Parse sections if it's a JSON string
|
|
94
|
+
var sections = react_1.default.useMemo(function () {
|
|
95
|
+
if (!final.sections)
|
|
96
|
+
return [];
|
|
97
|
+
if (typeof final.sections === 'string') {
|
|
98
|
+
try {
|
|
99
|
+
return JSON.parse(final.sections);
|
|
100
|
+
}
|
|
101
|
+
catch (e) {
|
|
102
|
+
console.error('Failed to parse sections JSON:', e);
|
|
103
|
+
return [];
|
|
104
|
+
}
|
|
105
|
+
}
|
|
106
|
+
return final.sections;
|
|
107
|
+
}, [final.sections]);
|
|
108
|
+
// Helper function to check if something is a React element
|
|
109
|
+
function isReactElement(node) {
|
|
110
|
+
return react_1.default.isValidElement(node);
|
|
111
|
+
}
|
|
112
|
+
// Load dynamic icons
|
|
113
|
+
(0, react_1.useEffect)(function () {
|
|
114
|
+
var iconsToLoad = {};
|
|
115
|
+
// Social icons
|
|
116
|
+
if (typeof final.facebookIcon === 'string')
|
|
117
|
+
iconsToLoad.facebook = final.facebookIcon;
|
|
118
|
+
if (typeof final.instagramIcon === 'string')
|
|
119
|
+
iconsToLoad.instagram = final.instagramIcon;
|
|
120
|
+
if (typeof final.twitterIcon === 'string')
|
|
121
|
+
iconsToLoad.twitter = final.twitterIcon;
|
|
122
|
+
if (typeof final.xIcon === 'string')
|
|
123
|
+
iconsToLoad.x = final.xIcon;
|
|
124
|
+
if (typeof final.youtubeIcon === 'string')
|
|
125
|
+
iconsToLoad.youtube = final.youtubeIcon;
|
|
126
|
+
if (typeof final.linkedinIcon === 'string')
|
|
127
|
+
iconsToLoad.linkedin = final.linkedinIcon;
|
|
128
|
+
if (typeof final.githubIcon === 'string')
|
|
129
|
+
iconsToLoad.github = final.githubIcon;
|
|
130
|
+
// Contact icons
|
|
131
|
+
if (typeof final.emailIcon === 'string')
|
|
132
|
+
iconsToLoad.email = final.emailIcon;
|
|
133
|
+
if (typeof final.phoneIcon === 'string')
|
|
134
|
+
iconsToLoad.phone = final.phoneIcon;
|
|
135
|
+
if (typeof final.addressIcon === 'string')
|
|
136
|
+
iconsToLoad.address = final.addressIcon;
|
|
137
|
+
// Social media object
|
|
138
|
+
if (final.socialMedia) {
|
|
139
|
+
Object.entries(final.socialMedia).forEach(function (_a) {
|
|
140
|
+
var key = _a[0], value = _a[1];
|
|
141
|
+
if (typeof value === 'string') {
|
|
142
|
+
iconsToLoad["socialMedia_".concat(key)] = value;
|
|
143
|
+
}
|
|
144
|
+
});
|
|
145
|
+
}
|
|
146
|
+
// Load all dynamic icons
|
|
147
|
+
var loadIcons = function () { return __awaiter(void 0, void 0, void 0, function () {
|
|
148
|
+
var loaded, _i, _a, _b, key, iconString, icon;
|
|
149
|
+
return __generator(this, function (_c) {
|
|
150
|
+
switch (_c.label) {
|
|
151
|
+
case 0:
|
|
152
|
+
loaded = {};
|
|
153
|
+
_i = 0, _a = Object.entries(iconsToLoad);
|
|
154
|
+
_c.label = 1;
|
|
155
|
+
case 1:
|
|
156
|
+
if (!(_i < _a.length)) return [3 /*break*/, 4];
|
|
157
|
+
_b = _a[_i], key = _b[0], iconString = _b[1];
|
|
158
|
+
return [4 /*yield*/, (0, getDynamicIcon_1.getDynamicIcon)(iconString)];
|
|
159
|
+
case 2:
|
|
160
|
+
icon = _c.sent();
|
|
161
|
+
if (icon) {
|
|
162
|
+
loaded[key] = icon;
|
|
163
|
+
}
|
|
164
|
+
_c.label = 3;
|
|
165
|
+
case 3:
|
|
166
|
+
_i++;
|
|
167
|
+
return [3 /*break*/, 1];
|
|
168
|
+
case 4:
|
|
169
|
+
setLoadedIcons(loaded);
|
|
170
|
+
return [2 /*return*/];
|
|
171
|
+
}
|
|
172
|
+
});
|
|
173
|
+
}); };
|
|
174
|
+
if (Object.keys(iconsToLoad).length > 0) {
|
|
175
|
+
loadIcons();
|
|
176
|
+
}
|
|
177
|
+
}, [final.facebookIcon, final.instagramIcon, final.twitterIcon, final.xIcon, final.youtubeIcon, final.linkedinIcon, final.githubIcon, final.emailIcon, final.phoneIcon, final.addressIcon, final.socialMedia]);
|
|
178
|
+
// Get icon - either from prop (ReactNode), dynamic loaded icon, or default
|
|
179
|
+
var getIcon = function (iconProp, iconKey, defaultIcon) {
|
|
180
|
+
if (isReactElement(iconProp)) {
|
|
181
|
+
return iconProp;
|
|
182
|
+
}
|
|
183
|
+
if (typeof iconProp === 'string' && loadedIcons[iconKey]) {
|
|
184
|
+
return loadedIcons[iconKey];
|
|
185
|
+
}
|
|
186
|
+
return defaultIcon;
|
|
187
|
+
};
|
|
188
|
+
// Build social links array
|
|
189
|
+
var socialLinks = react_1.default.useMemo(function () {
|
|
190
|
+
var links = [];
|
|
191
|
+
if (final.facebookUrl) {
|
|
192
|
+
links.push({
|
|
193
|
+
url: final.facebookUrl,
|
|
194
|
+
icon: getIcon(final.facebookIcon, 'facebook', react_1.default.createElement(pi_1.PiFacebookLogo, null)),
|
|
195
|
+
label: 'Facebook'
|
|
196
|
+
});
|
|
197
|
+
}
|
|
198
|
+
if (final.instagramUrl) {
|
|
199
|
+
links.push({
|
|
200
|
+
url: final.instagramUrl,
|
|
201
|
+
icon: getIcon(final.instagramIcon, 'instagram', react_1.default.createElement(pi_1.PiInstagramLogo, null)),
|
|
202
|
+
label: 'Instagram'
|
|
203
|
+
});
|
|
204
|
+
}
|
|
205
|
+
if (final.twitterUrl) {
|
|
206
|
+
links.push({
|
|
207
|
+
url: final.twitterUrl,
|
|
208
|
+
icon: getIcon(final.twitterIcon, 'twitter', react_1.default.createElement(pi_1.PiTwitterLogo, null)),
|
|
209
|
+
label: 'Twitter'
|
|
210
|
+
});
|
|
211
|
+
}
|
|
212
|
+
if (final.xUrl) {
|
|
213
|
+
links.push({
|
|
214
|
+
url: final.xUrl,
|
|
215
|
+
icon: getIcon(final.xIcon, 'x', react_1.default.createElement(pi_1.PiTwitterLogo, null)),
|
|
216
|
+
label: 'X'
|
|
217
|
+
});
|
|
218
|
+
}
|
|
219
|
+
if (final.youtubeUrl) {
|
|
220
|
+
links.push({
|
|
221
|
+
url: final.youtubeUrl,
|
|
222
|
+
icon: getIcon(final.youtubeIcon, 'youtube', react_1.default.createElement(pi_1.PiYoutubeLogo, null)),
|
|
223
|
+
label: 'YouTube'
|
|
224
|
+
});
|
|
225
|
+
}
|
|
226
|
+
if (final.linkedinUrl) {
|
|
227
|
+
links.push({
|
|
228
|
+
url: final.linkedinUrl,
|
|
229
|
+
icon: getIcon(final.linkedinIcon, 'linkedin', react_1.default.createElement(pi_1.PiLinkedinLogo, null)),
|
|
230
|
+
label: 'LinkedIn'
|
|
231
|
+
});
|
|
232
|
+
}
|
|
233
|
+
if (final.githubUrl) {
|
|
234
|
+
links.push({
|
|
235
|
+
url: final.githubUrl,
|
|
236
|
+
icon: getIcon(final.githubIcon, 'github', react_1.default.createElement(pi_1.PiGithubLogo, null)),
|
|
237
|
+
label: 'GitHub'
|
|
238
|
+
});
|
|
239
|
+
}
|
|
240
|
+
// Add socialMedia object links
|
|
241
|
+
if (final.socialMedia) {
|
|
242
|
+
Object.entries(final.socialMedia).forEach(function (_a) {
|
|
243
|
+
var key = _a[0], value = _a[1];
|
|
244
|
+
if (typeof value === 'string' && value.startsWith('http')) {
|
|
245
|
+
var iconKey = "socialMedia_".concat(key);
|
|
246
|
+
var icon = loadedIcons[iconKey] || react_1.default.createElement(pi_1.PiGithubLogo, null);
|
|
247
|
+
links.push({
|
|
248
|
+
url: value,
|
|
249
|
+
icon: icon,
|
|
250
|
+
label: key.charAt(0).toUpperCase() + key.slice(1)
|
|
251
|
+
});
|
|
252
|
+
}
|
|
253
|
+
});
|
|
254
|
+
}
|
|
255
|
+
return links;
|
|
256
|
+
}, [
|
|
257
|
+
final.facebookUrl, final.instagramUrl, final.twitterUrl, final.xUrl, final.youtubeUrl, final.linkedinUrl, final.githubUrl,
|
|
258
|
+
final.facebookIcon, final.instagramIcon, final.twitterIcon, final.xIcon, final.youtubeIcon, final.linkedinIcon, final.githubIcon,
|
|
259
|
+
final.socialMedia, loadedIcons
|
|
260
|
+
]);
|
|
261
|
+
var legalLinks = __spreadArray(__spreadArray(__spreadArray([], (final.privacyUrl ? [{ url: final.privacyUrl, text: final.privacyText }] : []), true), (final.termsUrl ? [{ url: final.termsUrl, text: final.termsText }] : []), true), (final.cookiesUrl ? [{ url: final.cookiesUrl, text: final.cookiesText }] : []), true);
|
|
262
|
+
var getCopyrightText = function () {
|
|
263
|
+
if (final.copyrightText)
|
|
264
|
+
return final.copyrightText;
|
|
265
|
+
var text = '';
|
|
266
|
+
if (final.showYear)
|
|
267
|
+
text += "\u00A9 ".concat(currentYear, " ");
|
|
268
|
+
text += final.companyName || 'Company';
|
|
269
|
+
if (final.showRightsReserved)
|
|
270
|
+
text += '. All rights reserved.';
|
|
271
|
+
return text;
|
|
272
|
+
};
|
|
273
|
+
// Get layout classes
|
|
274
|
+
var getLayoutClasses = function () {
|
|
275
|
+
var classes = ['funui-footer'];
|
|
276
|
+
if (final.layout)
|
|
277
|
+
classes.push("funui-footer--".concat(final.layout));
|
|
278
|
+
if (final.funcss)
|
|
279
|
+
classes.push(final.funcss);
|
|
280
|
+
return classes.join(' ');
|
|
281
|
+
};
|
|
282
|
+
return (react_1.default.createElement("footer", { className: getLayoutClasses(), style: {
|
|
283
|
+
backgroundColor: final.bg,
|
|
284
|
+
color: final.textColor,
|
|
285
|
+
padding: final.padding,
|
|
286
|
+
}, "data-testid": "footer" },
|
|
287
|
+
react_1.default.createElement("div", { className: "funui-footer__container ".concat(final.containerClass || ''), style: {
|
|
288
|
+
maxWidth: final.maxWidth,
|
|
289
|
+
'--link-hover-color': final.linkHoverColor,
|
|
290
|
+
} },
|
|
291
|
+
react_1.default.createElement("div", { className: "funui-footer__top ".concat(final.topSectionClass || ''), "data-testid": "footer-top" },
|
|
292
|
+
react_1.default.createElement("div", { className: "funui-footer__brand" },
|
|
293
|
+
(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" }, typeof final.description === 'string' ? (react_1.default.createElement("p", null, final.description)) : (final.description))),
|
|
295
|
+
final.showContactInfo && (final.email || final.phone || final.address) && (react_1.default.createElement("div", { className: "funui-footer__contact", "data-testid": "footer-contact" },
|
|
296
|
+
final.email && (react_1.default.createElement("div", { className: "funui-footer__contact-item" },
|
|
297
|
+
react_1.default.createElement("span", { className: "funui-footer__contact-icon" }, getIcon(final.emailIcon, 'email', react_1.default.createElement(pi_1.PiEnvelope, null))),
|
|
298
|
+
react_1.default.createElement("a", { href: "mailto:".concat(final.email), className: "funui-footer__contact-link" }, final.email))),
|
|
299
|
+
final.phone && (react_1.default.createElement("div", { className: "funui-footer__contact-item" },
|
|
300
|
+
react_1.default.createElement("span", { className: "funui-footer__contact-icon" }, getIcon(final.phoneIcon, 'phone', react_1.default.createElement(pi_1.PiPhone, null))),
|
|
301
|
+
react_1.default.createElement("a", { href: "tel:".concat(final.phone), className: "funui-footer__contact-link" }, final.phone))),
|
|
302
|
+
final.address && (react_1.default.createElement("div", { className: "funui-footer__contact-item" },
|
|
303
|
+
react_1.default.createElement("span", { className: "funui-footer__contact-icon" }, getIcon(final.addressIcon, 'address', react_1.default.createElement(pi_1.PiMapPin, null))),
|
|
304
|
+
react_1.default.createElement("span", { className: "funui-footer__contact-text" }, final.address))))),
|
|
305
|
+
socialLinks.length > 0 && (react_1.default.createElement("div", { className: "funui-footer__socials ".concat(final.socialContainerClass || ''), "data-testid": "footer-socials" }, socialLinks.map(function (social, index) { return (react_1.default.createElement("a", { key: index, href: social.url, target: "_blank", rel: "noopener noreferrer", "aria-label": social.label, className: "funui-footer__social-link" },
|
|
306
|
+
react_1.default.createElement("span", { className: "funui-footer__social-icon" }, react_1.default.isValidElement(social.icon)
|
|
307
|
+
? react_1.default.cloneElement(social.icon, {
|
|
308
|
+
size: final.socialIconSize || 20
|
|
309
|
+
})
|
|
310
|
+
: social.icon),
|
|
311
|
+
react_1.default.createElement("span", { className: "funui-footer__social-label sr-only" }, social.label))); })))),
|
|
312
|
+
sections.length > 0 && sections.map(function (section, sectionIndex) { return (react_1.default.createElement("div", { key: sectionIndex, className: "funui-footer__section", "data-testid": "footer-section-".concat(sectionIndex) },
|
|
313
|
+
react_1.default.createElement("div", { className: "funui-footer__section-title ".concat(final.sectionTitleClass || '') }, section.title),
|
|
314
|
+
react_1.default.createElement("ul", { className: "funui-footer__links" }, section.links.map(function (link, linkIndex) { return (react_1.default.createElement("li", { key: linkIndex, className: "funui-footer__link-item" },
|
|
315
|
+
react_1.default.createElement("a", { href: link.url, target: link.external ? '_blank' : undefined, rel: link.external ? 'noopener noreferrer' : undefined, className: "funui-footer__link ".concat(final.linkClass || '') },
|
|
316
|
+
link.icon && (react_1.default.createElement("span", { className: "funui-footer__link-icon" }, link.icon)),
|
|
317
|
+
react_1.default.createElement("span", { className: "funui-footer__link-text" }, link.label)))); })))); }),
|
|
318
|
+
final.children && (react_1.default.createElement("div", { className: "funui-footer__children" }, final.children))),
|
|
319
|
+
final.showDivider && (react_1.default.createElement("div", { className: "funui-footer__divider", "data-testid": "footer-divider" })),
|
|
320
|
+
react_1.default.createElement("div", { className: "funui-footer__bottom ".concat(final.bottomSectionClass || ''), "data-testid": "footer-bottom" },
|
|
321
|
+
react_1.default.createElement("div", { className: "funui-footer__copyright" }, getCopyrightText()),
|
|
322
|
+
legalLinks.length > 0 && (react_1.default.createElement("div", { className: "funui-footer__legal ".concat(final.legalLinksClass || ''), "data-testid": "footer-legal" }, legalLinks.map(function (link, index) { return (react_1.default.createElement("a", { key: index, href: link.url, className: "funui-footer__legal-link" }, link.text)); })))))));
|
|
323
|
+
};
|
|
324
|
+
exports.default = Footer;
|
package/ui/vista/Vista.d.ts
CHANGED
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
import React from 'react';
|
|
2
2
|
type VistaProps = {
|
|
3
|
-
layout?: 'centered' | '
|
|
3
|
+
layout?: 'centered' | 'mediaLeft' | 'mediaRight' | 'stacked';
|
|
4
4
|
pattern?: 'grid' | 'dots' | 'diagonal' | 'checkerboard' | 'horizontal' | 'vertical';
|
|
5
5
|
patternOpacity?: number;
|
|
6
6
|
reverse?: boolean;
|
|
7
7
|
bg?: string;
|
|
8
8
|
padding?: string;
|
|
9
9
|
textAlign?: 'left' | 'center' | 'right';
|
|
10
|
-
|
|
10
|
+
mediaPosition?: 'top' | 'bottom';
|
|
11
11
|
funcss?: string;
|
|
12
12
|
blurry?: number;
|
|
13
13
|
opacity?: number;
|
|
@@ -26,18 +26,18 @@ type VistaProps = {
|
|
|
26
26
|
contentWeight?: number;
|
|
27
27
|
contentColor?: string;
|
|
28
28
|
contentClass?: string;
|
|
29
|
-
|
|
30
|
-
|
|
31
|
-
|
|
32
|
-
|
|
33
|
-
|
|
29
|
+
media?: React.ReactNode;
|
|
30
|
+
mediaUrl?: string;
|
|
31
|
+
mediaAlt?: string;
|
|
32
|
+
mediaClass?: string;
|
|
33
|
+
mediaSize?: string;
|
|
34
34
|
cta?: React.ReactNode;
|
|
35
35
|
ctaClass?: string;
|
|
36
36
|
sectionClass?: string;
|
|
37
37
|
containerClass?: string;
|
|
38
38
|
gap?: string;
|
|
39
39
|
textWrapperClass?: string;
|
|
40
|
-
|
|
40
|
+
mediaWrapperClass?: string;
|
|
41
41
|
children?: React.ReactNode;
|
|
42
42
|
showGradient?: boolean;
|
|
43
43
|
gradientPosition?: 'top-left' | 'top-right' | 'bottom-left' | 'bottom-right' | 'center';
|
|
@@ -48,7 +48,6 @@ type VistaProps = {
|
|
|
48
48
|
fadeDirection?: 'top' | 'bottom' | 'left' | 'right';
|
|
49
49
|
fadeRadial?: boolean;
|
|
50
50
|
variant?: string;
|
|
51
|
-
mediaSize?: string;
|
|
52
51
|
mediaCss?: string;
|
|
53
52
|
showPrimaryCTA?: boolean;
|
|
54
53
|
showSecondaryCTA?: boolean;
|
|
@@ -95,12 +94,12 @@ type VistaProps = {
|
|
|
95
94
|
iframeUrl?: string;
|
|
96
95
|
iframeSize?: string;
|
|
97
96
|
customMedia?: React.ReactNode;
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
97
|
+
mediaOverlay?: boolean;
|
|
98
|
+
mediaOverlayColor?: string;
|
|
99
|
+
mediaOverlayOpacity?: number;
|
|
100
|
+
mediaFilter?: 'grayscale' | 'sepia' | 'blur' | 'brightness' | 'contrast' | 'none';
|
|
101
|
+
mediaFilterValue?: number;
|
|
102
|
+
mediaBlendMode?: 'multiply' | 'screen' | 'overlay' | 'darken' | 'lighten';
|
|
104
103
|
hoverEffect?: 'lift' | 'scale' | 'tilt' | 'glow' | 'none';
|
|
105
104
|
parallax?: boolean;
|
|
106
105
|
parallaxSpeed?: number;
|
package/ui/vista/Vista.js
CHANGED
|
@@ -75,22 +75,19 @@ var Vista = function (localProps) {
|
|
|
75
75
|
window.addEventListener('scroll', handleScroll);
|
|
76
76
|
return function () { return window.removeEventListener('scroll', handleScroll); };
|
|
77
77
|
}, [final.parallax, final.parallaxSpeed]);
|
|
78
|
-
// Get media size - updated logic
|
|
78
|
+
// Get media size - updated logic for all media types
|
|
79
79
|
var getMediaSize = function () {
|
|
80
|
-
// Priority order:
|
|
81
|
-
// 1. If
|
|
82
|
-
// 2.
|
|
83
|
-
// 3.
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
return final.imageSize;
|
|
80
|
+
// Priority order for mediaSize:
|
|
81
|
+
// 1. If mediaSize is passed, it affects all media types
|
|
82
|
+
// 2. For backward compatibility, also check iframeSize for iframes
|
|
83
|
+
// 3. Fallback to undefined
|
|
84
|
+
if (final.mediaSize) {
|
|
85
|
+
return final.mediaSize;
|
|
87
86
|
}
|
|
87
|
+
// For backward compatibility with iframeSize
|
|
88
88
|
if (final.mediaType === 'iframe' && final.iframeSize) {
|
|
89
89
|
return final.iframeSize;
|
|
90
90
|
}
|
|
91
|
-
if (final.mediaSize) {
|
|
92
|
-
return final.mediaSize;
|
|
93
|
-
}
|
|
94
91
|
return undefined;
|
|
95
92
|
};
|
|
96
93
|
var layoutClass = [
|
|
@@ -106,7 +103,7 @@ var Vista = function (localProps) {
|
|
|
106
103
|
return '';
|
|
107
104
|
return "vista-hover-".concat(final.hoverEffect);
|
|
108
105
|
};
|
|
109
|
-
// Filter styles helper
|
|
106
|
+
// Filter styles helper - used for all media types
|
|
110
107
|
var getFilterStyle = function (filter, filterValue) {
|
|
111
108
|
if (!filter || filter === 'none')
|
|
112
109
|
return '';
|
|
@@ -146,7 +143,7 @@ var Vista = function (localProps) {
|
|
|
146
143
|
var MediaContent = function () {
|
|
147
144
|
var _a;
|
|
148
145
|
var mediaType = final.mediaType || 'image';
|
|
149
|
-
var hasMedia = final.
|
|
146
|
+
var hasMedia = final.media || final.mediaUrl || final.videoUrl || final.iframeUrl || final.customMedia;
|
|
150
147
|
if (!hasMedia)
|
|
151
148
|
return null;
|
|
152
149
|
var mediaSize = getMediaSize();
|
|
@@ -163,28 +160,28 @@ var Vista = function (localProps) {
|
|
|
163
160
|
maxWidth: mediaSize,
|
|
164
161
|
width: '100%',
|
|
165
162
|
borderRadius: 'inherit',
|
|
166
|
-
filter: getFilterStyle(final.
|
|
167
|
-
mixBlendMode: final.
|
|
163
|
+
filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
|
|
164
|
+
mixBlendMode: final.mediaBlendMode,
|
|
168
165
|
};
|
|
169
|
-
var overlayStyle = final.
|
|
166
|
+
var overlayStyle = final.mediaOverlay ? {
|
|
170
167
|
position: 'absolute',
|
|
171
168
|
inset: 0,
|
|
172
|
-
backgroundColor: final.
|
|
173
|
-
opacity: (_a = final.
|
|
169
|
+
backgroundColor: final.mediaOverlayColor || 'rgba(0, 0, 0, 0.3)',
|
|
170
|
+
opacity: (_a = final.mediaOverlayOpacity) !== null && _a !== void 0 ? _a : 1,
|
|
174
171
|
pointerEvents: 'none',
|
|
175
172
|
borderRadius: 'inherit',
|
|
176
173
|
zIndex: 1,
|
|
177
174
|
} : {};
|
|
178
|
-
return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.
|
|
175
|
+
return (react_1.default.createElement("div", { className: "vista-media ".concat(final.mediaCss || '', " ").concat(final.mediaWrapperClass || ''), style: mediaWrapperStyle },
|
|
179
176
|
mediaType === 'custom' && final.customMedia && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
|
|
180
177
|
final.customMedia,
|
|
181
|
-
final.
|
|
178
|
+
final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
|
|
182
179
|
mediaType === 'video' && final.videoUrl && (react_1.default.createElement("div", { style: { position: 'relative', maxWidth: mediaSize, width: '100%', aspectRatio: '16/9', margin: '0 auto' } },
|
|
183
|
-
react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.
|
|
184
|
-
filter: getFilterStyle(final.
|
|
185
|
-
mixBlendMode: final.
|
|
180
|
+
react_1.default.createElement(Video_1.default, { src: final.videoUrl, autoPlay: final.videoAutoplay, loop: final.videoLoop, muted: final.videoMuted, poster: final.videoPoster, funcss: final.mediaCss || '', style: {
|
|
181
|
+
filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
|
|
182
|
+
mixBlendMode: final.mediaBlendMode,
|
|
186
183
|
} }),
|
|
187
|
-
final.
|
|
184
|
+
final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle }))),
|
|
188
185
|
mediaType === 'iframe' && final.iframeUrl && (react_1.default.createElement("div", { className: "vista-iframe-wrapper", style: {
|
|
189
186
|
position: 'relative',
|
|
190
187
|
width: '100%',
|
|
@@ -196,25 +193,24 @@ var Vista = function (localProps) {
|
|
|
196
193
|
position: 'relative',
|
|
197
194
|
width: '100%',
|
|
198
195
|
height: '100%',
|
|
199
|
-
filter: getFilterStyle(final.
|
|
200
|
-
mixBlendMode: final.
|
|
196
|
+
filter: getFilterStyle(final.mediaFilter, final.mediaFilterValue),
|
|
197
|
+
mixBlendMode: final.mediaBlendMode,
|
|
201
198
|
} },
|
|
202
|
-
react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.
|
|
199
|
+
react_1.default.createElement("iframe", { src: final.iframeUrl, className: "vista-iframe ".concat(final.mediaCss || ''), style: {
|
|
203
200
|
width: '100%',
|
|
204
201
|
height: '100%',
|
|
205
202
|
border: 'none',
|
|
206
|
-
borderRadius: 'inherit',
|
|
207
203
|
display: 'block',
|
|
208
|
-
}, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista
|
|
209
|
-
final.
|
|
210
|
-
mediaType === 'image' && (final.
|
|
211
|
-
final.
|
|
212
|
-
final.
|
|
204
|
+
}, allowFullScreen: true, allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", title: "Vista media content" }),
|
|
205
|
+
final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))),
|
|
206
|
+
mediaType === 'image' && (final.media || final.mediaUrl) && (react_1.default.createElement("div", { style: { position: 'relative', width: '100%' } },
|
|
207
|
+
final.media ? (react_1.default.createElement("div", { style: { width: '100%', maxWidth: mediaSize, margin: '0 auto' } }, final.media)) : (react_1.default.createElement("img", { src: final.mediaUrl, alt: final.mediaAlt || 'Vista media', className: final.mediaCss || '', style: mediaStyle, loading: "lazy" })),
|
|
208
|
+
final.mediaOverlay && react_1.default.createElement("div", { style: overlayStyle })))));
|
|
213
209
|
};
|
|
214
210
|
var isCentered = final.layout === 'centered';
|
|
215
211
|
var isStacked = final.layout === 'stacked';
|
|
216
|
-
var
|
|
217
|
-
var
|
|
212
|
+
var isMediaLeft = final.layout === 'mediaLeft';
|
|
213
|
+
var isMediaRight = final.layout === 'mediaRight';
|
|
218
214
|
var positionStyles = {
|
|
219
215
|
'top-left': { top: '-100px', left: '-100px' },
|
|
220
216
|
'top-right': { top: '-100px', right: '-100px' },
|
|
@@ -293,16 +289,16 @@ var Vista = function (localProps) {
|
|
|
293
289
|
margin: '0 auto',
|
|
294
290
|
padding: '2rem',
|
|
295
291
|
} }, isCentered || isStacked ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
296
|
-
(final.
|
|
292
|
+
(final.mediaPosition === 'top') && react_1.default.createElement(MediaContent, null),
|
|
297
293
|
TextContent,
|
|
298
|
-
(final.
|
|
294
|
+
(final.mediaPosition === 'bottom' || !final.mediaPosition) && react_1.default.createElement(MediaContent, null))) : final.reverse ? (react_1.default.createElement(react_1.default.Fragment, null,
|
|
299
295
|
react_1.default.createElement("div", { style: { flex: 1 } },
|
|
300
296
|
react_1.default.createElement(MediaContent, null)),
|
|
301
297
|
react_1.default.createElement("div", { style: { flex: 1 } }, TextContent))) : (react_1.default.createElement(react_1.default.Fragment, null,
|
|
302
|
-
|
|
298
|
+
isMediaLeft && (react_1.default.createElement("div", { style: { flex: 1 } },
|
|
303
299
|
react_1.default.createElement(MediaContent, null))),
|
|
304
300
|
react_1.default.createElement("div", { style: { flex: 1 } }, TextContent),
|
|
305
|
-
|
|
301
|
+
isMediaRight && (react_1.default.createElement("div", { style: { flex: 1 } },
|
|
306
302
|
react_1.default.createElement(MediaContent, null))))))));
|
|
307
303
|
};
|
|
308
304
|
exports.default = Vista;
|