vviinn-widgets 2.0.0 → 2.2.1

package/dist/collection/components/vviinn-product-card/vviinn-product-card.js

@@ -1,10 +1,10 @@
-import { Component, Host, h, Prop, Event, Element, State } from "@stencil/core";
+import { Component, Host, h, Prop, Event, Element, State, } from "@stencil/core";
 import { pipe } from "fp-ts/lib/function";
 import { getAnalyticsModule } from "../../analytics/GeneralAnalytics";
 import { state } from "../../store/store";
 import * as O from "fp-ts/lib/Option";
 import { imageSearchState } from "../../store/imageSearch.store";
-import { Linked, Price, ResponsiveImage, Image } from "./render-helpers";
+import { Linked, Price, ResponsiveImage, Image, } from "./render-helpers";
 /**
  * @part brand - product brand.
  * @part currency - currency sign. Renders after price-amount.
@@ -65,13 +65,19 @@ export class VviinnProductCard {
       width: this.imageWidth,
       height: this.imageWidth * this.imageRatio,
       src: this.image,
-      title: this.productTitle
+      title: this.productTitle,
+      lazy: false,
     };
-    return this.responsive ? ResponsiveImage(props) : Image(props);
+    return this.responsive
+      ? ResponsiveImage(props, () => this.kek())
+      : Image(props, () => this.kek());
+  }
+  kek() {
+    this.productImageLoaded.emit(this.productId);
   }
   render() {
     var _a, _b, _c;
-    return (h(Host, { exportparts: "brand, currency, deeplink, image, type, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title", class: { dimmed: this.dimmedBackground } },
+    return (h(Host, { part: "product-card", class: { dimmed: this.dimmedBackground }, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title" },
       h(Linked, { deeplink: this.deeplink, part: "image-link" }, this.renderImage()),
       h(Linked, { deeplink: this.deeplink, part: "deeplink" },
         h("span", { class: "title", part: "title" }, this.productTitle)),
@@ -399,6 +405,21 @@ export class VviinnProductCard {
         "resolved": "string",
         "references": {}
       }
+    }, {
+      "method": "productImageLoaded",
+      "name": "productImageLoaded",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      }
     }]; }
   static get elementRef() { return "el"; }
 }

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.css

@@ -0,0 +1,238 @@
+:host {
+  --vviinn-carousel-columns: 0;
+  box-sizing: border-box;
+  display: block;
+  display: flex;
+  height: 100vh;
+  left: 0;
+  position: fixed;
+  top: 0;
+  transition: background 0.1s ease-in-out;
+  width: 100vw;
+}
+
+:host(.open) {
+  background: rgba(0, 0, 0, 0.2);
+}
+
+:host(.bottom) {
+  flex-direction: column;
+  justify-content: end;
+}
+
+:host(.right) {
+  flex-direction: row;
+  justify-content: flex-end;
+}
+
+header {
+  position: relative;
+  text-align: center;
+  padding: 32px;
+}
+
+header.contains-source-img {
+  display: grid;
+  justify-items: center;
+  grid-gap: 12px;
+}
+
+img.source-image {
+  width: 64px;
+  height: 64px;
+  border-radius: 50%;
+  box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.15);
+  padding: 8px;
+}
+
+:host(.right) header {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.1);
+}
+
+main {
+  padding: 0 24px;
+}
+
+:host(.right) main {
+  overflow: auto;
+}
+
+.sidebar {
+  background: white;
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+}
+
+:host(.bottom.idle) .sidebar,
+:host(.bottom.closed) .sidebar {
+  transform: translateY(100%);
+}
+
+:host(.bottom.closed) .sidebar {
+  -webkit-animation-name: slideOutFromBottom;
+          animation-name: slideOutFromBottom;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+:host(.bottom.open) .sidebar {
+  -webkit-animation-name: slideInFromBottom;
+          animation-name: slideInFromBottom;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+:host(.right.idle) .sidebar {
+  transform: translateX(100%);
+}
+
+:host(.right.closed) .sidebar {
+  -webkit-animation-name: slideOutFromRight;
+          animation-name: slideOutFromRight;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+:host(.right.open) .sidebar {
+  -webkit-animation-name: slideInFromRight;
+          animation-name: slideInFromRight;
+  -webkit-animation-duration: 0.5s;
+          animation-duration: 0.5s;
+  -webkit-animation-fill-mode: forwards;
+          animation-fill-mode: forwards;
+}
+
+:host(.right) .sidebar {
+  max-width: 480px;
+}
+
+:host(.right) vviinn-vpr-widget::part(recommendations-grid) {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  grid-gap: 24px;
+}
+
+:host(.right) vviinn-vpr-widget {
+  overflow: auto;
+}
+
+:host(.right) vviinn-vpr-widget::part(image) {
+  border: none;
+}
+
+.title {
+  font-style: normal;
+  font-weight: 500;
+  font-size: 28px;
+  line-height: 40px;
+  text-align: center;
+  color: #000000;
+}
+
+vviinn-vpr-widget::part(title),
+vviinn-vpr-widget::part(brand),
+vviinn-vpr-widget::part(type) {
+  text-align: left;
+}
+
+vviinn-vpr-widget::part(price-container) {
+  align-self: start;
+}
+
+.close-sidebar {
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  margin: 0;
+  padding: 0;
+  position: absolute;
+  right: 24px;
+  top: 24px;
+}
+
+@-webkit-keyframes slideInFromBottom {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@keyframes slideInFromBottom {
+  from {
+    transform: translateY(100%);
+  }
+
+  to {
+    transform: translateY(0);
+  }
+}
+
+@-webkit-keyframes slideOutFromBottom {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@keyframes slideOutFromBottom {
+  from {
+    transform: translateY(0);
+  }
+
+  to {
+    transform: translateY(100%);
+  }
+}
+
+@-webkit-keyframes slideInFromRight {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@keyframes slideInFromRight {
+  from {
+    transform: translateX(100%);
+  }
+
+  to {
+    transform: translateX(0);
+  }
+}
+
+@-webkit-keyframes slideOutFromRight {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}
+
+@keyframes slideOutFromRight {
+  from {
+    transform: translateX(0);
+  }
+
+  to {
+    transform: translateX(100%);
+  }
+}

package/dist/collection/components/vviinn-vpr-button/recommendations-sidebar/recommendations-sidebar.js

@@ -0,0 +1,200 @@
+import { Component, Host, h, Prop, State, Listen, Element, Event, } from "@stencil/core";
+import { CrossIcon } from "../../vviinn-icons";
+export class RecommendationsSidebar {
+  constructor() {
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.widgetScrollbar = false;
+    this.state = "idle";
+  }
+  bodyClickListener(event) {
+    const { clientX, clientY } = event;
+    const sidebarRect = this.getSidebarRectangle();
+    if (!sidebarRect)
+      return;
+    const inLeftBound = clientX >= sidebarRect.left;
+    const inRightBound = clientX <= sidebarRect.right;
+    const inTopBound = clientY >= sidebarRect.top;
+    const inBottomBound = clientY <= sidebarRect.bottom;
+    const inBound = inLeftBound && inRightBound && inTopBound && inBottomBound;
+    if (!inBound) {
+      this.state = "closed";
+    }
+  }
+  getClassMap() {
+    return {
+      [this.position]: true,
+      [this.state]: true,
+    };
+  }
+  getSidebarRectangle() {
+    var _a;
+    return (_a = this.el.shadowRoot.querySelector("aside")) === null || _a === void 0 ? void 0 : _a.getBoundingClientRect();
+  }
+  render() {
+    return (h(Host, { class: this.getClassMap() },
+      h("aside", { class: "sidebar", part: "body", onAnimationEnd: (e) => this.handleAnimationEnd(e) },
+        h("header", { class: { "contains-source-img": this.isSourceImageValid() }, part: "sidebar-header" },
+          this.isSourceImageValid() ? this.renderSourceImage() : null,
+          h("span", { class: "title", part: "title" }, this.sidebarTitle),
+          h("button", { class: "close-sidebar", onClick: () => (this.state = "closed") },
+            h(CrossIcon, null))),
+        h("main", { part: "sidebar-content" },
+          h("vviinn-vpr-widget", { exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title: product-title", token: this.token, productId: this.productId, imageWidth: 300, blockTitle: "", mode: this.position === "bottom" ? "continuity" : "grid", useCarousel: this.position === "bottom", onRecommendationsLoaded: () => (this.state = "open"), showScroll: this.widgetScrollbar })))));
+  }
+  renderSourceImage() {
+    return (h("img", { class: "source-image", part: "source-image", src: this.sourceImage }));
+  }
+  isSourceImageValid() {
+    var _a;
+    return ((_a = this.sourceImage) === null || _a === void 0 ? void 0 : _a.length) > 0;
+  }
+  handleAnimationEnd({ animationName }) {
+    const isClosingAnimation = animationName.includes("slideOut");
+    if (!isClosingAnimation)
+      return;
+    this.modalClosed.emit();
+  }
+  static get is() { return "vviinn-recommendations-sidebar"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["recommendations-sidebar.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["recommendations-sidebar.css"]
+  }; }
+  static get properties() { return {
+    "sidebarTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sidebar-title",
+      "reflect": false
+    },
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "token",
+      "reflect": false
+    },
+    "productId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"bottom\" | \"right\"",
+        "resolved": "\"bottom\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
+    "sourceImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source-image",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "widgetScrollbar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "widget-scrollbar",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+  static get states() { return {
+    "state": {}
+  }; }
+  static get events() { return [{
+      "method": "modalClosed",
+      "name": "modalClosed",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "complexType": {
+        "original": "void",
+        "resolved": "void",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "click",
+      "method": "bodyClickListener",
+      "target": "body",
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/vviinn-vpr-button/stories/kek.stories.js

@@ -0,0 +1,18 @@
+import { withDesign } from "storybook-addon-designs";
+export default {
+  title: "Widgets/Visual Recommendation Button",
+  component: "vviinn-vpr-button",
+  decorators: [withDesign],
+};
+const Template = (args) => `<vviinn-vpr-button token="${args.token}" product-id="${args.productId}"></vviinn-vpr-button>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  productId: "4114460310",
+};
+Default.parameters = {
+  design: {
+    type: "figma",
+    url: "https://www.figma.com/file/YR5ZK1s4z9ZRUXytB8uVuj/Widgets?node-id=591%3A3859",
+  },
+};

package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.css

@@ -0,0 +1,35 @@
+:host {
+  display: block;
+}
+
+.open-button {
+  align-items: center;
+  background: rgba(255, 255, 255, 0.8);
+  border-radius: 50%;
+  border: none;
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.15);
+  box-sizing: border-box;
+  cursor: pointer;
+  display: grid;
+  height: 40px;
+  justify-items: center;
+  padding: 0;
+  width: 40px;
+  transition: all 0.25s ease-in-out;
+}
+
+.open-button:hover {
+  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
+}
+
+.open-button:focus {
+  border: 2px solid rgba(15, 98, 254, 0.5);
+  outline: none;
+}
+
+.open-button:active {
+  background: #F4F4F4;
+  outline: none;
+}
+
+

package/dist/collection/components/vviinn-vpr-button/vviinn-vpr-button.js

@@ -0,0 +1,149 @@
+import { Component, Host, h, Prop } from "@stencil/core";
+import { VisualSearchIcon } from "../vviinn-icons";
+/**
+ *
+ * @part button - clickable button element
+ */
+export class VviinnVprButton {
+  constructor() {
+    this.position = "bottom";
+    this.sourceImage = null;
+    this.sidebarTitle = "Visually similar products";
+    this.modalScrollbar = false;
+  }
+  render() {
+    return (h(Host, null,
+      h("button", { class: "open-button", part: "button", onClick: () => this.handleClick() },
+        h("slot", null,
+          h(VisualSearchIcon, null)))));
+  }
+  handleClick() {
+    const sidebar = document.createElement("vviinn-recommendations-sidebar");
+    sidebar.sidebarTitle = this.sidebarTitle;
+    sidebar.productId = this.productId;
+    sidebar.token = this.token;
+    sidebar.position = this.position;
+    sidebar.sourceImage = this.sourceImage;
+    sidebar.widgetScrollbar = this.modalScrollbar;
+    sidebar.addEventListener("modalClosed", () => {
+      document.body.removeChild(sidebar);
+    });
+    document.body.append(sidebar);
+  }
+  static get is() { return "vviinn-vpr-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-vpr-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-vpr-button.css"]
+  }; }
+  static get properties() { return {
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "token",
+      "reflect": false
+    },
+    "productId": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "product-id",
+      "reflect": false
+    },
+    "position": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "\"bottom\" | \"right\"",
+        "resolved": "\"bottom\" | \"right\"",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "position",
+      "reflect": false,
+      "defaultValue": "\"bottom\""
+    },
+    "sourceImage": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | null",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "source-image",
+      "reflect": false,
+      "defaultValue": "null"
+    },
+    "sidebarTitle": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "sidebar-title",
+      "reflect": false,
+      "defaultValue": "\"Visually similar products\""
+    },
+    "modalScrollbar": {
+      "type": "boolean",
+      "mutable": false,
+      "complexType": {
+        "original": "boolean",
+        "resolved": "boolean",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": ""
+      },
+      "attribute": "modal-scrollbar",
+      "reflect": false,
+      "defaultValue": "false"
+    }
+  }; }
+}