@appcorp/app-corp-vista 0.2.37 → 0.2.39
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/organisms/vista-hero-v13/vista-hero-v13.js +3 -3
- package/organisms/vista-product-overview-v3/product-form.d.ts +11 -0
- package/organisms/vista-product-overview-v3/product-form.js +44 -0
- package/organisms/vista-product-overview-v3/vista-product-overview-v3.js +2 -31
- package/package.json +1 -1
- package/type/vista-hero-type.d.ts +1 -0
|
@@ -60,7 +60,7 @@ var DynamicReactSlick = (0, dynamic_1.default)(function () { return Promise.reso
|
|
|
60
60
|
ssr: false,
|
|
61
61
|
});
|
|
62
62
|
var VistaHeroV13 = function (_a) {
|
|
63
|
-
var items = _a.items;
|
|
63
|
+
var _b = _a.containerClassName, containerClassName = _b === void 0 ? '' : _b, items = _a.items;
|
|
64
64
|
var settings = {
|
|
65
65
|
autoplay: true,
|
|
66
66
|
autoplaySpeed: 7000,
|
|
@@ -71,8 +71,8 @@ var VistaHeroV13 = function (_a) {
|
|
|
71
71
|
slidesToShow: 1,
|
|
72
72
|
speed: 2000,
|
|
73
73
|
};
|
|
74
|
-
return (react_1.default.createElement("div", { className: "slider-container overflow-x-hidden w-full" },
|
|
75
|
-
react_1.default.createElement(DynamicReactSlick, __assign({}, settings), items.map(function (item) { return (react_1.default.createElement("div", { key: item.heading
|
|
74
|
+
return (react_1.default.createElement("div", { className: "slider-container overflow-x-hidden w-full ".concat(containerClassName) },
|
|
75
|
+
react_1.default.createElement(DynamicReactSlick, __assign({}, settings), items.map(function (item) { return (react_1.default.createElement("div", { key: item.heading },
|
|
76
76
|
react_1.default.createElement("div", { className: "relative isolate overflow-hidden pt-14" },
|
|
77
77
|
react_1.default.createElement("img", { alt: item.bannerAlt, src: item.bannerSrc, className: "absolute inset-0 -z-10 size-full object-cover" }),
|
|
78
78
|
react_1.default.createElement("div", { "aria-hidden": "true", className: "absolute inset-x-0 -top-40 -z-10 transform-gpu overflow-hidden blur-3xl sm:-top-80" },
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
import { FC } from "react";
|
|
2
|
+
import { VistaProductOverviewV3Variant } from "../../type/vista-product-overview-type";
|
|
3
|
+
interface Props {
|
|
4
|
+
helpInfo: boolean;
|
|
5
|
+
variants?: VistaProductOverviewV3Variant[];
|
|
6
|
+
guaranteeInfo?: boolean;
|
|
7
|
+
ctaLabel: string;
|
|
8
|
+
handleCtaOnClick: () => void;
|
|
9
|
+
}
|
|
10
|
+
export declare const ProductForm: FC<Props>;
|
|
11
|
+
export {};
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
'use client';
|
|
2
|
+
"use strict";
|
|
3
|
+
var __importDefault = (this && this.__importDefault) || function (mod) {
|
|
4
|
+
return (mod && mod.__esModule) ? mod : { "default": mod };
|
|
5
|
+
};
|
|
6
|
+
Object.defineProperty(exports, "__esModule", { value: true });
|
|
7
|
+
exports.ProductForm = void 0;
|
|
8
|
+
var react_1 = __importDefault(require("react"));
|
|
9
|
+
var react_2 = require("@headlessui/react");
|
|
10
|
+
var outline_1 = require("@heroicons/react/24/outline");
|
|
11
|
+
var solid_1 = require("@heroicons/react/20/solid");
|
|
12
|
+
var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
|
|
13
|
+
var vista_button_type_1 = require("../../type/vista-button-type");
|
|
14
|
+
var ProductForm = function (_a) {
|
|
15
|
+
var ctaLabel = _a.ctaLabel, _b = _a.guaranteeInfo, guaranteeInfo = _b === void 0 ? false : _b, handleCtaOnClick = _a.handleCtaOnClick, helpInfo = _a.helpInfo, _c = _a.variants, variants = _c === void 0 ? [] : _c;
|
|
16
|
+
return (react_1.default.createElement("div", { className: "mt-10 lg:col-start-1 lg:row-start-2 lg:max-w-lg lg:self-start" },
|
|
17
|
+
react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
|
|
18
|
+
react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
|
|
19
|
+
react_1.default.createElement("form", null,
|
|
20
|
+
react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
|
|
21
|
+
react_1.default.createElement("fieldset", { className: 'flex flex-col gap-4' }, variants.length > 1 && variants
|
|
22
|
+
.filter(function (_a) {
|
|
23
|
+
var enabled = _a.enabled;
|
|
24
|
+
return enabled;
|
|
25
|
+
})
|
|
26
|
+
.sort(function (a, b) { return a.order - b.order; })
|
|
27
|
+
.map(function (item) { return (react_1.default.createElement("div", { key: item.title },
|
|
28
|
+
react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, item.title),
|
|
29
|
+
react_1.default.createElement(react_2.RadioGroup, { className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2", onChange: function (val) { return item.handleOnSelect(val); }, value: item.items[item.selectedItem] }, item.items.map(function (item) { return (react_1.default.createElement(react_2.Radio, { "aria-description": item.description, "aria-label": item.title, as: "div", className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-primary", key: item.title, value: item },
|
|
30
|
+
react_1.default.createElement("p", { className: "text-base font-medium text-primary" }, item.title),
|
|
31
|
+
react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
|
|
32
|
+
react_1.default.createElement("div", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-primary group-data-focus:border" }))); })))); }))),
|
|
33
|
+
helpInfo && (react_1.default.createElement("div", { className: "mt-4" },
|
|
34
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
|
|
35
|
+
react_1.default.createElement("span", null, "What size should I buy?"),
|
|
36
|
+
react_1.default.createElement(solid_1.QuestionMarkCircleIcon, { "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-400 group-hover:text-gray-500" })))),
|
|
37
|
+
react_1.default.createElement("div", { className: "mt-10" },
|
|
38
|
+
react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'w-full py-4', handleOnClick: handleCtaOnClick, label: ctaLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.XL, variant: vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY })),
|
|
39
|
+
guaranteeInfo && (react_1.default.createElement("div", { className: "mt-6 text-center" },
|
|
40
|
+
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
|
|
41
|
+
react_1.default.createElement(outline_1.ShieldCheckIcon, { "aria-hidden": "true", className: "mr-2 size-6 shrink-0 text-gray-400 group-hover:text-gray-500" }),
|
|
42
|
+
react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee"))))))));
|
|
43
|
+
};
|
|
44
|
+
exports.ProductForm = ProductForm;
|
|
@@ -6,12 +6,9 @@ Object.defineProperty(exports, "__esModule", { value: true });
|
|
|
6
6
|
exports.VistaProductOverviewV3 = void 0;
|
|
7
7
|
var react_1 = __importDefault(require("react"));
|
|
8
8
|
var solid_1 = require("@heroicons/react/20/solid");
|
|
9
|
-
var react_2 = require("@headlessui/react");
|
|
10
|
-
var outline_1 = require("@heroicons/react/24/outline");
|
|
11
9
|
var class_names_1 = require("../../utils/class-names");
|
|
12
|
-
var vista_button_v1_1 = require("../../molecules/vista-button-v1/vista-button-v1");
|
|
13
|
-
var vista_button_type_1 = require("../../type/vista-button-type");
|
|
14
10
|
var product_slider_1 = require("./product-slider");
|
|
11
|
+
var product_form_1 = require("./product-form");
|
|
15
12
|
// import "slick-carousel/slick/slick.css";
|
|
16
13
|
// import "slick-carousel/slick/slick-theme.css";
|
|
17
14
|
var VistaProductOverviewV3 = function (_a) {
|
|
@@ -59,33 +56,7 @@ var VistaProductOverviewV3 = function (_a) {
|
|
|
59
56
|
icon,
|
|
60
57
|
react_1.default.createElement("p", { className: "ml-2 text-sm text-gray-500" }, label)));
|
|
61
58
|
})),
|
|
62
|
-
react_1.default.createElement(
|
|
63
|
-
react_1.default.createElement("section", { "aria-labelledby": "options-heading" },
|
|
64
|
-
react_1.default.createElement("h2", { id: "options-heading", className: "sr-only" }, "Product options"),
|
|
65
|
-
react_1.default.createElement("form", null,
|
|
66
|
-
react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
|
|
67
|
-
react_1.default.createElement("fieldset", { className: 'flex flex-col gap-4' }, variants.length > 1 && variants
|
|
68
|
-
.filter(function (_a) {
|
|
69
|
-
var enabled = _a.enabled;
|
|
70
|
-
return enabled;
|
|
71
|
-
})
|
|
72
|
-
.sort(function (a, b) { return a.order - b.order; })
|
|
73
|
-
.map(function (item) { return (react_1.default.createElement("div", { key: item.title },
|
|
74
|
-
react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, item.title),
|
|
75
|
-
react_1.default.createElement(react_2.RadioGroup, { className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2", onChange: function (val) { return item.handleOnSelect(val); }, value: item.items[item.selectedItem] }, item.items.map(function (item) { return (react_1.default.createElement(react_2.Radio, { "aria-description": item.description, "aria-label": item.title, as: "div", className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-primary", key: item.title, value: item },
|
|
76
|
-
react_1.default.createElement("p", { className: "text-base font-medium text-primary" }, item.title),
|
|
77
|
-
react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
|
|
78
|
-
react_1.default.createElement("div", { "aria-hidden": "true", className: "pointer-events-none absolute -inset-px rounded-lg border-2 border-transparent group-data-checked:border-primary group-data-focus:border" }))); })))); }))),
|
|
79
|
-
helpInfo && (react_1.default.createElement("div", { className: "mt-4" },
|
|
80
|
-
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
|
|
81
|
-
react_1.default.createElement("span", null, "What size should I buy?"),
|
|
82
|
-
react_1.default.createElement(solid_1.QuestionMarkCircleIcon, { "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-400 group-hover:text-gray-500" })))),
|
|
83
|
-
react_1.default.createElement("div", { className: "mt-10" },
|
|
84
|
-
react_1.default.createElement(vista_button_v1_1.VistaButtonV1, { className: 'w-full py-4', handleOnClick: handleCtaOnClick, label: ctaLabel, size: vista_button_type_1.VISTA_BUTTON_SIZE.XL, variant: vista_button_type_1.VISTA_BUTTON_VARIANT.PRIMARY })),
|
|
85
|
-
guaranteeInfo && (react_1.default.createElement("div", { className: "mt-6 text-center" },
|
|
86
|
-
react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
|
|
87
|
-
react_1.default.createElement(outline_1.ShieldCheckIcon, { "aria-hidden": "true", className: "mr-2 size-6 shrink-0 text-gray-400 group-hover:text-gray-500" }),
|
|
88
|
-
react_1.default.createElement("span", { className: "text-gray-500 hover:text-gray-700" }, "Lifetime Guarantee")))))))),
|
|
59
|
+
react_1.default.createElement(product_form_1.ProductForm, { variants: variants, helpInfo: helpInfo, guaranteeInfo: guaranteeInfo, handleCtaOnClick: handleCtaOnClick, ctaLabel: ctaLabel })),
|
|
89
60
|
react_1.default.createElement(product_slider_1.ProductSlider, { images: images }))));
|
|
90
61
|
};
|
|
91
62
|
exports.VistaProductOverviewV3 = VistaProductOverviewV3;
|
package/package.json
CHANGED