npm - @appcorp/app-corp-vista - Versions diffs - 0.2.8 → 0.2.9 - Mend

@appcorp/app-corp-vista 0.2.8 → 0.2.9

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.

Files changed (4) hide show

package/organisms/vista-product-overview-v3/vista-product-overview-v3.d.ts CHANGED Viewed

@@ -1,2 +1,3 @@
-import React from 'react';
-export declare const VistaProductOverviewV3: () => React.JSX.Element;
+import { FC } from 'react';
+import { VistaProductOverviewV3Props } from '../../type/vista-product-overview-type';
+export declare const VistaProductOverviewV3: FC<VistaProductOverviewV3Props>;

package/organisms/vista-product-overview-v3/vista-product-overview-v3.js CHANGED Viewed

@@ -57,23 +57,27 @@ var product = {
     ],
 };
 var reviews = { average: 4, totalCount: 1624 };
-var VistaProductOverviewV3 = function () {
-    var _a = (0, react_1.useState)(product.sizes[0]), selectedSize = _a[0], setSelectedSize = _a[1];
+var VistaProductOverviewV3 = function (_a) {
+    var breadcrumbs = _a.breadcrumbs, name = _a.name, price = _a.price, variants = _a.variants;
+    var _b = (0, react_1.useState)(variants.items[0]), selectedSize = _b[0], setSelectedSize = _b[1];
     return (react_1.default.createElement("div", { className: "bg-white" },
         react_1.default.createElement("div", { className: "mx-auto max-w-2xl px-4 py-16 sm:px-6 sm:py-24 lg:grid lg:max-w-7xl lg:grid-cols-2 lg:gap-x-8 lg:px-8" },
             react_1.default.createElement("div", { className: "lg:max-w-lg lg:self-end" },
                 react_1.default.createElement("nav", { "aria-label": "Breadcrumb" },
-                    react_1.default.createElement("ol", { role: "list", className: "flex items-center space-x-2" }, product.breadcrumbs.map(function (breadcrumb, breadcrumbIdx) { return (react_1.default.createElement("li", { key: breadcrumb.id },
-                        react_1.default.createElement("div", { className: "flex items-center text-sm" },
-                            react_1.default.createElement("a", { href: breadcrumb.href, className: "font-medium text-gray-500 hover:text-gray-900" }, breadcrumb.name),
-                            breadcrumbIdx !== product.breadcrumbs.length - 1 ? (react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-300" },
-                                react_1.default.createElement("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }))) : null))); }))),
+                    react_1.default.createElement("ol", { role: "list", className: "flex items-center space-x-2" }, breadcrumbs.map(function (_a, breadcrumbIdx) {
+                        var id = _a.id, label = _a.label, route = _a.route;
+                        return (react_1.default.createElement("li", { key: id },
+                            react_1.default.createElement("div", { className: "flex items-center text-sm" },
+                                react_1.default.createElement("a", { href: route, className: "font-medium text-gray-500 hover:text-gray-900" }, label),
+                                breadcrumbIdx !== product.breadcrumbs.length - 1 ? (react_1.default.createElement("svg", { fill: "currentColor", viewBox: "0 0 20 20", "aria-hidden": "true", className: "ml-2 size-5 shrink-0 text-gray-300" },
+                                    react_1.default.createElement("path", { d: "M5.555 17.776l8-16 .894.448-8 16-.894-.448z" }))) : null)));
+                    }))),
                 react_1.default.createElement("div", { className: "mt-4" },
-                    react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, product.name)),
+                    react_1.default.createElement("h1", { className: "text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl" }, name)),
                 react_1.default.createElement("section", { "aria-labelledby": "information-heading", className: "mt-4" },
                     react_1.default.createElement("h2", { id: "information-heading", className: "sr-only" }, "Product information"),
                     react_1.default.createElement("div", { className: "flex items-center" },
-                        react_1.default.createElement("p", { className: "text-lg text-gray-900 sm:text-xl" }, product.price),
+                        react_1.default.createElement("p", { className: "text-lg text-gray-900 sm:text-xl" }, price),
                         react_1.default.createElement("div", { className: "ml-4 border-l border-gray-300 pl-4" },
                             react_1.default.createElement("h2", { className: "sr-only" }, "Reviews"),
                             react_1.default.createElement("div", { className: "flex items-center" },
@@ -98,17 +102,17 @@ var VistaProductOverviewV3 = function () {
                     react_1.default.createElement("form", null,
                         react_1.default.createElement("div", { className: "sm:flex sm:justify-between" },
                             react_1.default.createElement("fieldset", null,
-                                react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, "Size"),
-                                react_1.default.createElement(react_2.RadioGroup, { value: selectedSize, onChange: setSelectedSize, className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2" }, product.sizes.map(function (size) { return (react_1.default.createElement(react_2.Radio, { key: size.name, as: "div", value: size, "aria-label": size.name, "aria-description": size.description, className: "group relative block cursor-pointer rounded-lg border border-gray-300 p-4 focus:outline-hidden data-focus:ring-2 data-focus:ring-indigo-500" },
-                                    react_1.default.createElement("p", { className: "text-base font-medium text-gray-900" }, size.name),
-                                    react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, size.description),
-                                    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-indigo-500 group-data-focus:border" }))); })))),
+                                react_1.default.createElement("legend", { className: "block text-sm font-medium text-gray-700" }, variants.title),
+                                react_1.default.createElement(react_2.RadioGroup, { value: selectedSize, onChange: setSelectedSize, className: "mt-1 grid grid-cols-1 gap-4 sm:grid-cols-2" }, variants.items.map(function (item) { return (react_1.default.createElement(react_2.Radio, { key: item.title, as: "div", value: item, "aria-label": item.title, "aria-description": item.description, 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" },
+                                    react_1.default.createElement("p", { className: "text-base font-medium text-gray-900" }, item.title),
+                                    react_1.default.createElement("p", { className: "mt-1 text-sm text-gray-500" }, item.description),
+                                    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" }))); })))),
                         react_1.default.createElement("div", { className: "mt-4" },
                             react_1.default.createElement("a", { href: "#", className: "group inline-flex text-sm text-gray-500 hover:text-gray-700" },
                                 react_1.default.createElement("span", null, "What size should I buy?"),
                                 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" }))),
                         react_1.default.createElement("div", { className: "mt-10" },
-                            react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-indigo-600 px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" }, "Add to bag")),
+                            react_1.default.createElement("button", { type: "submit", className: "flex w-full items-center justify-center rounded-md border border-transparent bg-primary px-8 py-3 text-base font-medium text-white hover:bg-indigo-700 focus:ring-2 focus:ring-indigo-500 focus:ring-offset-2 focus:ring-offset-gray-50 focus:outline-hidden" }, "Add to bag")),
                         react_1.default.createElement("div", { className: "mt-6 text-center" },
                             react_1.default.createElement("a", { href: "#", className: "group inline-flex text-base font-medium" },
                                 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" }),

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@appcorp/app-corp-vista",
-  "version": "0.2.8",
+  "version": "0.2.9",
   "scripts": {
     "build": "yarn clean && yarn build:ts && cp package.json lib && cp README.md lib",
     "build:next": "next build",

package/type/vista-product-overview-type.d.ts CHANGED Viewed

@@ -4,8 +4,28 @@ export interface VistaProductOverviewV1Props {
 export interface VistaProductOverviewV2Props {
     id: string;
 }
-export interface VistaProductOverviewV3Props {
+export interface VistaProductOverviewV3BreadcrumbItem {
     id: string;
+    label: string;
+    route: string;
+}
+export interface VistaProductOverviewV3Variant {
+    enabled: boolean;
+    order: number;
+    title: string;
+    items: VistaProductOverviewV3VariantItem[];
+}
+export interface VistaProductOverviewV3VariantItem {
+    description: string;
+    enabled: boolean;
+    order: number;
+    title: string;
+}
+export interface VistaProductOverviewV3Props {
+    breadcrumbs: VistaProductOverviewV3BreadcrumbItem[];
+    name: string;
+    price: string;
+    variants: VistaProductOverviewV3Variant;
 }
 export interface VistaProductOverviewV4Props {
     id: string;