@appcorp/app-corp-vista 0.2.16 → 0.2.18
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/molecules/vista-footer-v10/vista-footer-v10.js +17 -96
- package/molecules/vista-header-v1/vista-header-v1.js +34 -26
- package/organisms/vista-product-list-v5/vista-product-list-v5.d.ts +3 -2
- package/organisms/vista-product-list-v5/vista-product-list-v5.js +29 -57
- package/organisms/vista-promo-section-v4/vista-promo-section-v4.js +1 -1
- package/package.json +1 -1
- package/type/vista-footer-type.d.ts +21 -1
- package/type/vista-header-type.d.ts +22 -1
- package/type/vista-product-list-type.d.ts +13 -1
|
@@ -1,115 +1,36 @@
|
|
|
1
1
|
"use strict";
|
|
2
|
-
var __assign = (this && this.__assign) || function () {
|
|
3
|
-
__assign = Object.assign || function(t) {
|
|
4
|
-
for (var s, i = 1, n = arguments.length; i < n; i++) {
|
|
5
|
-
s = arguments[i];
|
|
6
|
-
for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p))
|
|
7
|
-
t[p] = s[p];
|
|
8
|
-
}
|
|
9
|
-
return t;
|
|
10
|
-
};
|
|
11
|
-
return __assign.apply(this, arguments);
|
|
12
|
-
};
|
|
13
2
|
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
14
3
|
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
15
4
|
};
|
|
16
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
17
6
|
exports.VistaFooterV10 = void 0;
|
|
18
7
|
var react_1 = __importDefault(require("react"));
|
|
19
|
-
var
|
|
20
|
-
|
|
21
|
-
{ name: 'Marketing', href: '#' },
|
|
22
|
-
{ name: 'Analytics', href: '#' },
|
|
23
|
-
{ name: 'Automation', href: '#' },
|
|
24
|
-
{ name: 'Commerce', href: '#' },
|
|
25
|
-
{ name: 'Insights', href: '#' },
|
|
26
|
-
],
|
|
27
|
-
support: [
|
|
28
|
-
{ name: 'Submit ticket', href: '#' },
|
|
29
|
-
{ name: 'Documentation', href: '#' },
|
|
30
|
-
{ name: 'Guides', href: '#' },
|
|
31
|
-
],
|
|
32
|
-
company: [
|
|
33
|
-
{ name: 'About', href: '#' },
|
|
34
|
-
{ name: 'Blog', href: '#' },
|
|
35
|
-
{ name: 'Jobs', href: '#' },
|
|
36
|
-
{ name: 'Press', href: '#' },
|
|
37
|
-
],
|
|
38
|
-
legal: [
|
|
39
|
-
{ name: 'Terms of service', href: '#' },
|
|
40
|
-
{ name: 'Privacy policy', href: '#' },
|
|
41
|
-
{ name: 'License', href: '#' },
|
|
42
|
-
],
|
|
43
|
-
social: [
|
|
44
|
-
{
|
|
45
|
-
name: 'Facebook',
|
|
46
|
-
href: '#',
|
|
47
|
-
icon: function (props) { return (react_1.default.createElement("svg", __assign({ fill: "currentColor", viewBox: "0 0 24 24" }, props),
|
|
48
|
-
react_1.default.createElement("path", { fillRule: "evenodd", d: "M22 12c0-5.523-4.477-10-10-10S2 6.477 2 12c0 4.991 3.657 9.128 8.438 9.878v-6.987h-2.54V12h2.54V9.797c0-2.506 1.492-3.89 3.777-3.89 1.094 0 2.238.195 2.238.195v2.46h-1.26c-1.243 0-1.63.771-1.63 1.562V12h2.773l-.443 2.89h-2.33v6.988C18.343 21.128 22 16.991 22 12z", clipRule: "evenodd" }))); },
|
|
49
|
-
},
|
|
50
|
-
{
|
|
51
|
-
name: 'Instagram',
|
|
52
|
-
href: '#',
|
|
53
|
-
icon: function (props) { return (react_1.default.createElement("svg", __assign({ fill: "currentColor", viewBox: "0 0 24 24" }, props),
|
|
54
|
-
react_1.default.createElement("path", { fillRule: "evenodd", d: "M12.315 2c2.43 0 2.784.013 3.808.06 1.064.049 1.791.218 2.427.465a4.902 4.902 0 011.772 1.153 4.902 4.902 0 011.153 1.772c.247.636.416 1.363.465 2.427.048 1.067.06 1.407.06 4.123v.08c0 2.643-.012 2.987-.06 4.043-.049 1.064-.218 1.791-.465 2.427a4.902 4.902 0 01-1.153 1.772 4.902 4.902 0 01-1.772 1.153c-.636.247-1.363.416-2.427.465-1.067.048-1.407.06-4.123.06h-.08c-2.643 0-2.987-.012-4.043-.06-1.064-.049-1.791-.218-2.427-.465a4.902 4.902 0 01-1.772-1.153 4.902 4.902 0 01-1.153-1.772c-.247-.636-.416-1.363-.465-2.427-.047-1.024-.06-1.379-.06-3.808v-.63c0-2.43.013-2.784.06-3.808.049-1.064.218-1.791.465-2.427a4.902 4.902 0 011.153-1.772A4.902 4.902 0 015.45 2.525c.636-.247 1.363-.416 2.427-.465C8.901 2.013 9.256 2 11.685 2h.63zm-.081 1.802h-.468c-2.456 0-2.784.011-3.807.058-.975.045-1.504.207-1.857.344-.467.182-.8.398-1.15.748-.35.35-.566.683-.748 1.15-.137.353-.3.882-.344 1.857-.047 1.023-.058 1.351-.058 3.807v.468c0 2.456.011 2.784.058 3.807.045.975.207 1.504.344 1.857.182.466.399.8.748 1.15.35.35.683.566 1.15.748.353.137.882.3 1.857.344 1.054.048 1.37.058 4.041.058h.08c2.597 0 2.917-.01 3.96-.058.976-.045 1.505-.207 1.858-.344.466-.182.8-.398 1.15-.748.35-.35.566-.683.748-1.15.137-.353.3-.882.344-1.857.048-1.055.058-1.37.058-4.041v-.08c0-2.597-.01-2.917-.058-3.96-.045-.976-.207-1.505-.344-1.858a3.097 3.097 0 00-.748-1.15 3.098 3.098 0 00-1.15-.748c-.353-.137-.882-.3-1.857-.344-1.023-.047-1.351-.058-3.807-.058zM12 6.865a5.135 5.135 0 110 10.27 5.135 5.135 0 010-10.27zm0 1.802a3.333 3.333 0 100 6.666 3.333 3.333 0 000-6.666zm5.338-3.205a1.2 1.2 0 110 2.4 1.2 1.2 0 010-2.4z", clipRule: "evenodd" }))); },
|
|
55
|
-
},
|
|
56
|
-
{
|
|
57
|
-
name: 'X',
|
|
58
|
-
href: '#',
|
|
59
|
-
icon: function (props) { return (react_1.default.createElement("svg", __assign({ fill: "currentColor", viewBox: "0 0 24 24" }, props),
|
|
60
|
-
react_1.default.createElement("path", { d: "M13.6823 10.6218L20.2391 3H18.6854L12.9921 9.61788L8.44486 3H3.2002L10.0765 13.0074L3.2002 21H4.75404L10.7663 14.0113L15.5685 21H20.8131L13.6819 10.6218H13.6823ZM11.5541 13.0956L10.8574 12.0991L5.31391 4.16971H7.70053L12.1742 10.5689L12.8709 11.5655L18.6861 19.8835H16.2995L11.5541 13.096V13.0956Z" }))); },
|
|
61
|
-
},
|
|
62
|
-
{
|
|
63
|
-
name: 'GitHub',
|
|
64
|
-
href: '#',
|
|
65
|
-
icon: function (props) { return (react_1.default.createElement("svg", __assign({ fill: "currentColor", viewBox: "0 0 24 24" }, props),
|
|
66
|
-
react_1.default.createElement("path", { fillRule: "evenodd", d: "M12 2C6.477 2 2 6.484 2 12.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0112 6.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.202 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.943.359.309.678.92.678 1.855 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0022 12.017C22 6.484 17.522 2 12 2z", clipRule: "evenodd" }))); },
|
|
67
|
-
},
|
|
68
|
-
{
|
|
69
|
-
name: 'YouTube',
|
|
70
|
-
href: '#',
|
|
71
|
-
icon: function (props) { return (react_1.default.createElement("svg", __assign({ fill: "currentColor", viewBox: "0 0 24 24" }, props),
|
|
72
|
-
react_1.default.createElement("path", { fillRule: "evenodd", d: "M19.812 5.418c.861.23 1.538.907 1.768 1.768C21.998 8.746 22 12 22 12s0 3.255-.418 4.814a2.504 2.504 0 0 1-1.768 1.768c-1.56.419-7.814.419-7.814.419s-6.255 0-7.814-.419a2.505 2.505 0 0 1-1.768-1.768C2 15.255 2 12 2 12s0-3.255.417-4.814a2.507 2.507 0 0 1 1.768-1.768C5.744 5 11.998 5 11.998 5s6.255 0 7.814.418ZM15.194 12 10 15V9l5.194 3Z", clipRule: "evenodd" }))); },
|
|
73
|
-
},
|
|
74
|
-
],
|
|
75
|
-
};
|
|
76
|
-
var VistaFooterV10 = function () {
|
|
8
|
+
var VistaFooterV10 = function (_a) {
|
|
9
|
+
var disclaimer = _a.disclaimer, items = _a.items, logoAlt = _a.logoAlt, logoSrc = _a.logoSrc, socialLinks = _a.socialLinks, subscribeDescription = _a.subscribeDescription, subscribeHeading = _a.subscribeHeading;
|
|
77
10
|
return (react_1.default.createElement("footer", { className: "bg-white" },
|
|
78
|
-
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 pt-16 pb-8 sm:pt-
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-6 pt-16 pb-8 sm:pt-20 lg:px-8 lg:pt-32" },
|
|
79
12
|
react_1.default.createElement("div", { className: "xl:grid xl:grid-cols-3 xl:gap-8" },
|
|
80
|
-
react_1.default.createElement("img", { alt:
|
|
81
|
-
react_1.default.createElement("div", { className: "mt-16 grid grid-cols-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
|
|
85
|
-
|
|
86
|
-
|
|
87
|
-
|
|
88
|
-
react_1.default.createElement("h3", { className: "text-sm/6 font-semibold text-gray-900" }, "Support"),
|
|
89
|
-
react_1.default.createElement("ul", { role: "list", className: "mt-6 space-y-4" }, navigation.support.map(function (item) { return (react_1.default.createElement("li", { key: item.name },
|
|
90
|
-
react_1.default.createElement("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900" }, item.name))); })))),
|
|
91
|
-
react_1.default.createElement("div", { className: "md:grid md:grid-cols-2 md:gap-8" },
|
|
92
|
-
react_1.default.createElement("div", null,
|
|
93
|
-
react_1.default.createElement("h3", { className: "text-sm/6 font-semibold text-gray-900" }, "Company"),
|
|
94
|
-
react_1.default.createElement("ul", { role: "list", className: "mt-6 space-y-4" }, navigation.company.map(function (item) { return (react_1.default.createElement("li", { key: item.name },
|
|
95
|
-
react_1.default.createElement("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900" }, item.name))); }))),
|
|
96
|
-
react_1.default.createElement("div", { className: "mt-10 md:mt-0" },
|
|
97
|
-
react_1.default.createElement("h3", { className: "text-sm/6 font-semibold text-gray-900" }, "Legal"),
|
|
98
|
-
react_1.default.createElement("ul", { role: "list", className: "mt-6 space-y-4" }, navigation.legal.map(function (item) { return (react_1.default.createElement("li", { key: item.name },
|
|
99
|
-
react_1.default.createElement("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900" }, item.name))); })))))),
|
|
13
|
+
react_1.default.createElement("img", { alt: logoAlt, className: "h-9", src: logoSrc }),
|
|
14
|
+
react_1.default.createElement("div", { className: "mt-16 grid grid-cols-4 gap-8 xl:col-span-2 xl:mt-0" }, items.map(function (_a) {
|
|
15
|
+
var name = _a.name, subMenuItems = _a.subMenuItems;
|
|
16
|
+
return (react_1.default.createElement("div", { key: name },
|
|
17
|
+
react_1.default.createElement("h3", { className: "text-sm/6 font-semibold text-gray-900" }, name),
|
|
18
|
+
react_1.default.createElement("ul", { role: "list", className: "mt-6 space-y-4" }, subMenuItems.map(function (item) { return (react_1.default.createElement("li", { key: item.name },
|
|
19
|
+
react_1.default.createElement("a", { href: item.href, className: "text-sm/6 text-gray-600 hover:text-gray-900" }, item.name))); }))));
|
|
20
|
+
}))),
|
|
100
21
|
react_1.default.createElement("div", { className: "mt-16 border-t border-gray-900/10 pt-8 sm:mt-20 lg:mt-24 lg:flex lg:items-center lg:justify-between" },
|
|
101
22
|
react_1.default.createElement("div", null,
|
|
102
|
-
react_1.default.createElement("h3", { className: "text-sm/6 font-semibold text-
|
|
103
|
-
react_1.default.createElement("p", { className: "mt-2 text-sm/6 text-gray-600" },
|
|
23
|
+
react_1.default.createElement("h3", { className: "text-sm/6 font-semibold text-primary" }, subscribeHeading),
|
|
24
|
+
react_1.default.createElement("p", { className: "mt-2 text-sm/6 text-gray-600" }, subscribeDescription)),
|
|
104
25
|
react_1.default.createElement("form", { className: "mt-6 sm:flex sm:max-w-md lg:mt-0" },
|
|
105
26
|
react_1.default.createElement("label", { htmlFor: "email-address", className: "sr-only" }, "Email address"),
|
|
106
|
-
react_1.default.createElement("input", {
|
|
27
|
+
react_1.default.createElement("input", { autoComplete: "email", className: "w-full min-w-0 rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline-2 focus:-outline-offset-2 focus-visible:outline-primary sm:w-56 sm:text-sm/6", id: "email-address", name: "email-address", placeholder: "Enter your email", required: true, type: "email" }),
|
|
107
28
|
react_1.default.createElement("div", { className: "mt-4 sm:mt-0 sm:ml-4 sm:shrink-0" },
|
|
108
|
-
react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md bg-
|
|
29
|
+
react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md bg-primary px-3 py-2 text-sm font-semibold text-white shadow-xs hover:bg-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-primary" }, "Subscribe")))),
|
|
109
30
|
react_1.default.createElement("div", { className: "mt-8 border-t border-gray-900/10 pt-8 md:flex md:items-center md:justify-between" },
|
|
110
|
-
react_1.default.createElement("div", { className: "flex gap-x-6 md:order-2" },
|
|
31
|
+
react_1.default.createElement("div", { className: "flex gap-x-6 md:order-2" }, socialLinks.map(function (item) { return (react_1.default.createElement("a", { key: item.name, href: item.href, className: "text-gray-600 hover:text-primary" },
|
|
111
32
|
react_1.default.createElement("span", { className: "sr-only" }, item.name),
|
|
112
33
|
react_1.default.createElement(item.icon, { "aria-hidden": "true", className: "size-6" }))); })),
|
|
113
|
-
react_1.default.createElement("p", { className: "mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0" },
|
|
34
|
+
react_1.default.createElement("p", { className: "mt-8 text-sm/6 text-gray-600 md:order-1 md:mt-0" }, disclaimer)))));
|
|
114
35
|
};
|
|
115
36
|
exports.VistaFooterV10 = VistaFooterV10;
|
|
@@ -59,38 +59,46 @@ var callsToAction = [
|
|
|
59
59
|
{ name: 'Contact sales', href: '#', icon: solid_1.PhoneIcon },
|
|
60
60
|
];
|
|
61
61
|
var VistaHeaderV1 = function (_a) {
|
|
62
|
-
var
|
|
62
|
+
var logoAlt = _a.logoAlt, logoSrc = _a.logoSrc, companyName = _a.companyName, items = _a.items;
|
|
63
63
|
var _b = (0, react_1.useState)(false), mobileMenuOpen = _b[0], setMobileMenuOpen = _b[1];
|
|
64
64
|
return (react_1.default.createElement("header", { className: "bg-white" },
|
|
65
65
|
react_1.default.createElement("nav", { "aria-label": "Global", className: "mx-auto flex max-w-7xl items-center justify-between p-6 lg:px-8" },
|
|
66
66
|
react_1.default.createElement("div", { className: "flex lg:flex-1" },
|
|
67
67
|
react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
|
|
68
|
-
react_1.default.createElement("span", { className: "sr-only" },
|
|
69
|
-
react_1.default.createElement("img", { alt:
|
|
68
|
+
react_1.default.createElement("span", { className: "sr-only" }, companyName),
|
|
69
|
+
react_1.default.createElement("img", { alt: logoAlt, className: "h-8 w-auto", src: logoSrc }))),
|
|
70
70
|
react_1.default.createElement("div", { className: "flex lg:hidden" },
|
|
71
|
-
react_1.default.createElement("button", {
|
|
71
|
+
react_1.default.createElement("button", { className: "-m-2.5 inline-flex items-center justify-center rounded-md p-2.5 text-gray-700", onClick: function () { return setMobileMenuOpen(true); }, type: "button" },
|
|
72
72
|
react_1.default.createElement("span", { className: "sr-only" }, "Open main menu"),
|
|
73
73
|
react_1.default.createElement(outline_1.Bars3Icon, { "aria-hidden": "true", className: "size-6" }))),
|
|
74
|
-
react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" },
|
|
75
|
-
|
|
76
|
-
|
|
77
|
-
|
|
78
|
-
react_1.default.createElement(
|
|
79
|
-
|
|
80
|
-
|
|
81
|
-
|
|
82
|
-
|
|
83
|
-
|
|
84
|
-
react_1.default.createElement("
|
|
85
|
-
|
|
86
|
-
react_1.default.createElement("
|
|
87
|
-
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
74
|
+
react_1.default.createElement(react_2.PopoverGroup, { className: "hidden lg:flex lg:gap-x-12" }, items.map(function (_a) {
|
|
75
|
+
var name = _a.name, href = _a.href, megaMenu = _a.megaMenu, cta = _a.cta;
|
|
76
|
+
if (megaMenu && (megaMenu === null || megaMenu === void 0 ? void 0 : megaMenu.length) > 1) {
|
|
77
|
+
return (react_1.default.createElement(react_2.Popover, { key: name, className: "relative" },
|
|
78
|
+
react_1.default.createElement(react_2.PopoverButton, { className: "flex items-center gap-x-1 text-sm/6 font-semibold text-gray-900" },
|
|
79
|
+
name,
|
|
80
|
+
react_1.default.createElement(solid_1.ChevronDownIcon, { "aria-hidden": "true", className: "size-5 flex-none text-gray-400" })),
|
|
81
|
+
react_1.default.createElement(react_2.PopoverPanel, { transition: true, className: "absolute left-1/2 z-10 mt-3 w-screen max-w-md -translate-x-1/2 overflow-hidden rounded-3xl bg-white shadow-lg ring-1 ring-gray-900/5 transition data-closed:translate-y-1 data-closed:opacity-0 data-enter:duration-200 data-enter:ease-out data-leave:duration-150 data-leave:ease-in" },
|
|
82
|
+
react_1.default.createElement("div", { className: "p-4" }, megaMenu.map(function (_a) {
|
|
83
|
+
var name = _a.name, href = _a.href, description = _a.description, icon = _a.icon;
|
|
84
|
+
return (react_1.default.createElement("div", { key: name, className: "group relative flex items-center gap-x-6 rounded-lg p-4 text-sm/6 hover:bg-gray-50" },
|
|
85
|
+
react_1.default.createElement("div", { className: "flex size-11 flex-none items-center justify-center rounded-lg bg-gray-50 group-hover:bg-white" }, icon),
|
|
86
|
+
react_1.default.createElement("div", { className: "flex-auto" },
|
|
87
|
+
react_1.default.createElement("a", { href: href, className: "block font-semibold text-gray-900" },
|
|
88
|
+
name,
|
|
89
|
+
react_1.default.createElement("span", { className: "absolute inset-0" })),
|
|
90
|
+
react_1.default.createElement("p", { className: "mt-1 text-gray-600" }, description))));
|
|
91
|
+
})),
|
|
92
|
+
react_1.default.createElement("div", { className: "grid grid-cols-2 divide-x divide-gray-900/5 bg-gray-50" }, cta && cta.length > 1 && cta.map(function (_a) {
|
|
93
|
+
var icon = _a.icon, name = _a.name, href = _a.href;
|
|
94
|
+
return (react_1.default.createElement("a", { key: name, href: href, className: "flex items-center justify-center gap-x-2.5 p-3 text-sm/6 font-semibold text-gray-900 hover:bg-gray-100" },
|
|
95
|
+
icon,
|
|
96
|
+
name));
|
|
97
|
+
})))));
|
|
98
|
+
}
|
|
99
|
+
;
|
|
100
|
+
return (react_1.default.createElement("a", { key: name, href: href, className: "text-sm/6 font-semibold text-gray-900" }, name));
|
|
101
|
+
})),
|
|
94
102
|
react_1.default.createElement("div", { className: "hidden lg:flex lg:flex-1 lg:justify-end" },
|
|
95
103
|
react_1.default.createElement("a", { href: "#", className: "text-sm/6 font-semibold text-gray-900" },
|
|
96
104
|
"Log in ",
|
|
@@ -100,8 +108,8 @@ var VistaHeaderV1 = function (_a) {
|
|
|
100
108
|
react_1.default.createElement(react_2.DialogPanel, { className: "fixed inset-y-0 right-0 z-50 w-full overflow-y-auto bg-white p-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10" },
|
|
101
109
|
react_1.default.createElement("div", { className: "flex items-center justify-between" },
|
|
102
110
|
react_1.default.createElement("a", { href: "#", className: "-m-1.5 p-1.5" },
|
|
103
|
-
react_1.default.createElement("span", { className: "sr-only" },
|
|
104
|
-
react_1.default.createElement("img", { alt:
|
|
111
|
+
react_1.default.createElement("span", { className: "sr-only" }, companyName),
|
|
112
|
+
react_1.default.createElement("img", { alt: logoAlt, src: logoSrc, className: "h-8 w-auto" })),
|
|
105
113
|
react_1.default.createElement("button", { type: "button", onClick: function () { return setMobileMenuOpen(false); }, className: "-m-2.5 rounded-md p-2.5 text-gray-700" },
|
|
106
114
|
react_1.default.createElement("span", { className: "sr-only" }, "Close menu"),
|
|
107
115
|
react_1.default.createElement(outline_1.XMarkIcon, { "aria-hidden": "true", className: "size-6" }))),
|
|
@@ -1,2 +1,3 @@
|
|
|
1
|
-
import
|
|
2
|
-
|
|
1
|
+
import { FC } from 'react';
|
|
2
|
+
import { VistaProductListV5Props } from '../../type/vista-product-list-type';
|
|
3
|
+
export declare const VistaProductListV5: FC<VistaProductListV5Props>;
|
|
@@ -5,63 +5,35 @@ var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
|
5
5
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
6
6
|
exports.VistaProductListV5 = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
|
-
var
|
|
9
|
-
|
|
10
|
-
id: 1,
|
|
11
|
-
name: 'Zip Tote Basket',
|
|
12
|
-
color: 'White and black',
|
|
13
|
-
href: '#',
|
|
14
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
15
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
16
|
-
price: '$140',
|
|
17
|
-
},
|
|
18
|
-
{
|
|
19
|
-
id: 2,
|
|
20
|
-
name: 'Zip Tote Basket',
|
|
21
|
-
color: 'White and black',
|
|
22
|
-
href: '#',
|
|
23
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
24
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
25
|
-
price: '$140',
|
|
26
|
-
},
|
|
27
|
-
{
|
|
28
|
-
id: 3,
|
|
29
|
-
name: 'Zip Tote Basket',
|
|
30
|
-
color: 'White and black',
|
|
31
|
-
href: '#',
|
|
32
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
33
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
34
|
-
price: '$140',
|
|
35
|
-
},
|
|
36
|
-
{
|
|
37
|
-
id: 4,
|
|
38
|
-
name: 'Zip Tote Basket',
|
|
39
|
-
color: 'White and black',
|
|
40
|
-
href: '#',
|
|
41
|
-
imageSrc: 'https://tailwindcss.com/plus-assets/img/ecommerce-images/product-page-03-related-product-01.jpg',
|
|
42
|
-
imageAlt: 'Front of zip tote bag with white canvas, black canvas straps and handle, and black zipper pulls.',
|
|
43
|
-
price: '$140',
|
|
44
|
-
},
|
|
45
|
-
];
|
|
46
|
-
var VistaProductListV5 = function () {
|
|
8
|
+
var VistaProductListV5 = function (_a) {
|
|
9
|
+
var title = _a.title, items = _a.items;
|
|
47
10
|
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
48
|
-
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-
|
|
49
|
-
react_1.default.createElement("h2", { className: "text-xl font-bold text-gray-900" },
|
|
50
|
-
react_1.default.createElement("div", { className: "mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8" },
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
59
|
-
|
|
60
|
-
|
|
61
|
-
|
|
62
|
-
"
|
|
63
|
-
|
|
64
|
-
", ",
|
|
65
|
-
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-20 lg:max-w-7xl lg:px-8" },
|
|
12
|
+
react_1.default.createElement("h2", { className: "text-xl font-bold text-gray-900" }, title),
|
|
13
|
+
react_1.default.createElement("div", { className: "mt-8 grid grid-cols-1 gap-y-12 sm:grid-cols-2 sm:gap-x-6 lg:grid-cols-4 xl:gap-x-8" }, items
|
|
14
|
+
.filter(function (_a) {
|
|
15
|
+
var enabled = _a.enabled;
|
|
16
|
+
return enabled;
|
|
17
|
+
})
|
|
18
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
19
|
+
.map(function (_a) {
|
|
20
|
+
var id = _a.id, imageAlt = _a.imageAlt, imageSrc = _a.imageSrc, name = _a.name, color = _a.color, price = _a.price, href = _a.href;
|
|
21
|
+
return (react_1.default.createElement("div", { key: id },
|
|
22
|
+
react_1.default.createElement("div", { className: "relative" },
|
|
23
|
+
react_1.default.createElement("div", { className: "relative h-72 w-full overflow-hidden rounded-lg" },
|
|
24
|
+
react_1.default.createElement("img", { alt: imageAlt, src: imageSrc, className: "size-full object-cover" })),
|
|
25
|
+
react_1.default.createElement("div", { className: "relative mt-4" },
|
|
26
|
+
react_1.default.createElement("h3", { className: "text-sm font-medium text-primary" }, name),
|
|
27
|
+
color && (react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, color))),
|
|
28
|
+
react_1.default.createElement("div", { className: "absolute inset-x-0 top-0 flex h-72 items-end justify-end overflow-hidden rounded-lg p-4" },
|
|
29
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 bottom-0 h-48 bg-linear-to-t from-primary opacity-50" }),
|
|
30
|
+
price && (react_1.default.createElement("p", { className: "relative text-lg font-semibold text-white" }, price)))),
|
|
31
|
+
react_1.default.createElement("div", { className: "mt-6" },
|
|
32
|
+
react_1.default.createElement("a", { href: href, className: "relative flex items-center justify-center rounded-md border border-transparent bg-primary/30 px-8 py-2 text-sm font-medium text-gray-900 hover:bg-primary/40" },
|
|
33
|
+
"Add to bag",
|
|
34
|
+
react_1.default.createElement("span", { className: "sr-only" },
|
|
35
|
+
", ",
|
|
36
|
+
name)))));
|
|
37
|
+
})))));
|
|
66
38
|
};
|
|
67
39
|
exports.VistaProductListV5 = VistaProductListV5;
|
|
@@ -8,7 +8,7 @@ var react_1 = __importDefault(require("react"));
|
|
|
8
8
|
var VistaPromoSectionV4 = function (_a) {
|
|
9
9
|
var bannerAlt = _a.bannerAlt, bannerSrc = _a.bannerSrc, buttonLabel = _a.buttonLabel, descriptions = _a.descriptions, title = _a.title;
|
|
10
10
|
return (react_1.default.createElement("div", { className: "bg-white" },
|
|
11
|
-
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-
|
|
11
|
+
react_1.default.createElement("div", { className: "mx-auto max-w-7xl px-4 py-16 sm:px-6 sm:py-20 lg:px-8" },
|
|
12
12
|
react_1.default.createElement("div", { className: "relative overflow-hidden rounded-lg" },
|
|
13
13
|
react_1.default.createElement("div", { className: "absolute inset-0" },
|
|
14
14
|
react_1.default.createElement("img", { alt: bannerAlt, className: "size-full object-cover", src: bannerSrc })),
|
package/package.json
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
1
2
|
export interface VistaFooterV1Props {
|
|
2
3
|
id: string;
|
|
3
4
|
}
|
|
@@ -25,8 +26,27 @@ export interface VistaFooterV8Props {
|
|
|
25
26
|
export interface VistaFooterV9Props {
|
|
26
27
|
id: string;
|
|
27
28
|
}
|
|
29
|
+
export interface VistaFooterV10SubMenuItem {
|
|
30
|
+
name: string;
|
|
31
|
+
href: string;
|
|
32
|
+
}
|
|
33
|
+
export interface VistaFooterV10Item {
|
|
34
|
+
name: string;
|
|
35
|
+
subMenuItems: VistaFooterV10SubMenuItem[];
|
|
36
|
+
}
|
|
37
|
+
export interface VistaFooterV10SocialLink {
|
|
38
|
+
name: string;
|
|
39
|
+
href: string;
|
|
40
|
+
icon: FC<any>;
|
|
41
|
+
}
|
|
28
42
|
export interface VistaFooterV10Props {
|
|
29
|
-
|
|
43
|
+
disclaimer: string;
|
|
44
|
+
items: VistaFooterV10Item[];
|
|
45
|
+
logoAlt: string;
|
|
46
|
+
logoSrc: string;
|
|
47
|
+
subscribeDescription: string;
|
|
48
|
+
subscribeHeading: string;
|
|
49
|
+
socialLinks: VistaFooterV10SocialLink[];
|
|
30
50
|
}
|
|
31
51
|
export interface VistaFooterV11Props {
|
|
32
52
|
id: string;
|
|
@@ -1,5 +1,26 @@
|
|
|
1
|
+
import { ReactElement } from "react";
|
|
2
|
+
export interface VistaHeaderMegaMenuItem {
|
|
3
|
+
description: string;
|
|
4
|
+
href: string;
|
|
5
|
+
icon: ReactElement;
|
|
6
|
+
name: string;
|
|
7
|
+
}
|
|
8
|
+
export interface VistaHeaderCtaItem {
|
|
9
|
+
href: string;
|
|
10
|
+
icon: ReactElement;
|
|
11
|
+
name: string;
|
|
12
|
+
}
|
|
13
|
+
export interface VistaHeaderV1Item {
|
|
14
|
+
href: string;
|
|
15
|
+
megaMenu?: VistaHeaderMegaMenuItem[];
|
|
16
|
+
cta?: VistaHeaderCtaItem[];
|
|
17
|
+
name: string;
|
|
18
|
+
}
|
|
1
19
|
export interface VistaHeaderV1Props {
|
|
2
|
-
|
|
20
|
+
companyName: string;
|
|
21
|
+
items: VistaHeaderV1Item[];
|
|
22
|
+
logoAlt: string;
|
|
23
|
+
logoSrc: string;
|
|
3
24
|
}
|
|
4
25
|
export interface VistaHeaderV2Props {
|
|
5
26
|
id: string;
|
|
@@ -10,8 +10,20 @@ export interface VistaProductListV3Props {
|
|
|
10
10
|
export interface VistaProductListV4Props {
|
|
11
11
|
id: string;
|
|
12
12
|
}
|
|
13
|
-
export interface
|
|
13
|
+
export interface VistaProductListV5Item {
|
|
14
|
+
color?: string;
|
|
15
|
+
enabled: boolean;
|
|
16
|
+
href: string;
|
|
14
17
|
id: string;
|
|
18
|
+
imageAlt: string;
|
|
19
|
+
imageSrc: string;
|
|
20
|
+
name: string;
|
|
21
|
+
order: number;
|
|
22
|
+
price?: string;
|
|
23
|
+
}
|
|
24
|
+
export interface VistaProductListV5Props {
|
|
25
|
+
title: string;
|
|
26
|
+
items: VistaProductListV5Item[];
|
|
15
27
|
}
|
|
16
28
|
export interface VistaProductListV6Props {
|
|
17
29
|
id: string;
|