vviinn-widgets 2.5.0 → 2.5.2

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

@@ -0,0 +1,207 @@
+export const argTypes = {
+  buttonSize: {
+    name: "Button size",
+    options: ["Default", "Small", "Large"],
+    mapping: {
+      Default: 40,
+      Small: 32,
+      Large: 48,
+    },
+    control: {
+      type: "select",
+      labels: {
+        Default: "Default (40px)",
+        Small: "Small (32px)",
+        Large: "Large (48px)",
+      },
+    },
+    defaultValue: "Default",
+  },
+  iconColor: {
+    name: "Icon color",
+    control: {
+      type: "color",
+    },
+    defaultValue: "#000000",
+  },
+  backgroundColor: {
+    name: "Background color",
+    control: {
+      type: "color",
+    },
+    defaultValue: "#ffffff",
+  },
+  backgroundOpacity: {
+    name: "Background opacity (%)",
+    control: {
+      type: "number",
+    },
+    defaultValue: 100,
+  },
+  radius: {
+    name: "Radius (px)",
+    control: {
+      type: "number",
+    },
+    defaultValue: 20,
+  },
+  border: {
+    name: "Border",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: false,
+  },
+  borderColor: {
+    name: "Border color",
+    control: {
+      type: "color",
+    },
+    defaultValue: "#cccccc",
+  },
+  shadow: {
+    name: "Shadow",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: true,
+  },
+  position: {
+    name: "Modal container appearance",
+    options: ["bottom", "right"],
+    control: {
+      type: "select",
+      labels: {
+        bottom: "From bottom",
+        right: "From right",
+      },
+    },
+    defaultValue: "bottom",
+  },
+  backdropOpacity: {
+    name: "Backdrop opacity (%)",
+    control: {
+      type: "number",
+    },
+    defaultValue: 50,
+  },
+  sidebarBorderRadius: {
+    name: "Modal container round corners (px)",
+    control: {
+      type: "number",
+    },
+    defaultValue: 16,
+  },
+  showSourceImage: {
+    name: "Modal container show source image",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: true,
+  },
+  sourceImageSize: {
+    name: "Source image size",
+    options: ["Default", "Small", "Large"],
+    mapping: {
+      Default: 64,
+      Small: 48,
+      Large: 80,
+    },
+    control: {
+      type: "select",
+      labels: {
+        Default: "Default (64px)",
+        Small: "Small (48px)",
+        Large: "Large (80px)",
+      },
+    },
+    defaultValue: "Default",
+  },
+  sourceImageBorder: {
+    name: "Source image border",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: false,
+  },
+  sourceImageBorderColor: {
+    name: "Source image border color",
+    control: {
+      type: "color",
+    },
+    defaultValue: "#cccccc",
+  },
+  sourceImageShadow: {
+    name: "Source image shadow",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: true,
+  },
+  font: {
+    name: "Font family",
+    options: ["Inter", "System", "Arial"],
+    mapping: {
+      Inter: "'Inter', sans-serif",
+      System: `-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"`,
+      Arial: "Arial, sans-serif",
+    },
+    control: {
+      type: "select",
+      labels: {
+        Inter: "Inter",
+        System: "System stack",
+        Arial: "Arial (web safe)",
+      },
+    },
+    defaultValue: "Inter",
+  },
+  primaryTextColor: {
+    name: "Primary text color",
+    control: {
+      type: "color",
+    },
+    defaultValue: "#161616",
+  },
+  secondaryTextColor: {
+    name: "Secondary text color",
+    control: {
+      type: "color",
+    },
+    defaultValue: "#757575",
+  },
+  modalTitle: {
+    name: "Modal container title",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: true,
+  },
+  sidebarTitle: {
+    name: "Modal container title name",
+    control: {
+      type: "text",
+    },
+    defaultValue: "Visually similar products",
+  },
+  modalTitleFontSize: {
+    name: "Modal container title font size (px)",
+    control: {
+      type: "number",
+    },
+    defaultValue: 28,
+  },
+  modalScrollbar: {
+    name: "Use default horizontal scrollbar in modal container",
+    control: {
+      type: "boolean",
+    },
+    defaultValue: false,
+  },
+  productId: {
+    name: "Product id",
+  },
+  token: {
+    name: "Token",
+  },
+};

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

@@ -0,0 +1,89 @@
+import { withDesign } from "storybook-addon-designs";
+import { argTypes } from "./args";
+const centerDecorator = (story) => `
+    <div style="display: grid;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                align-items: center;
+                justify-items: center;">
+      ${story()}
+    </div>
+  `;
+export default {
+  title: "Widgets/Visual Recommendations/Button",
+  component: "vviinn-vpr-button",
+  decorators: [withDesign, centerDecorator],
+  argTypes,
+};
+const Template = (args) => `<style>
+     body {
+       font-family: ${args.font};
+     }
+
+     vviinn-vpr-button::part(button) {
+       width: ${args.buttonSize}px;
+       height: ${args.buttonSize}px;
+       fill: ${args.iconColor};
+       background: ${args.backgroundColor};
+       opacity: ${args.backgroundOpacity}%;
+       border-radius: ${args.radius}px;
+       border: ${args.border ? "1px solid" : "none"};
+       border-color: ${args.borderColor};
+       ${args.shadow ? "" : "box-shadow: none;"}
+     }
+
+     vviinn-recommendations-sidebar::part(title) {
+       display: ${args.modalTitle ? "inline" : "none"};
+       font-size: ${args.modalTitleFontSize}px;
+     }
+
+     vviinn-recommendations-sidebar::part(product-title),
+     vviinn-recommendations-sidebar::part(brand),
+     vviinn-recommendations-sidebar::part(type),
+     vviinn-recommendations-sidebar::part(price-regular),
+     vviinn-recommendations-sidebar::part(price-sale) {
+       color: ${args.primaryTextColor};
+     }
+
+     vviinn-recommendations-sidebar::part(price-outdated) {
+       color: ${args.secondaryTextColor};
+     }
+
+     vviinn-recommendations-sidebar.open {
+       background: rgba(0, 0, 0, 0.1);
+     }
+
+     vviinn-recommendations-sidebar::part(body) {
+       border-radius: ${args.sidebarBorderRadius}px ${args.sidebarBorderRadius}px 0 0;
+     }
+
+     vviinn-recommendations-sidebar::part(source-image) {
+       width: ${args.sourceImageSize}px;
+       height: ${args.sourceImageSize}px;
+       border: ${args.sourceImageBorder ? "1px solid" : "none"};
+       border-color: ${args.sourceImageBorderColor};
+       ${args.sourceImageShadow ? "" : "box-shadow: none;"}
+     }
+   </style>
+   <vviinn-vpr-button token="${args.token}"
+                      product-id="${args.productId}"
+                      position="${args.position}"
+                      sidebar-title="${args.sidebarTitle}"
+                      modal-scrollbar="${args.modalScrollbar}"
+                      source-image="${args.showSourceImage
+  ? "https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"
+  : ""}"></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,156 @@
+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;
+    this.sidebar = null;
+    this.sidebarCloseListener = () => {
+      document.body.removeChild(this.sidebar);
+    };
+  }
+  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;
+    this.sidebar = sidebar;
+    sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
+    document.body.append(this.sidebar);
+  }
+  disconnectedCallback() {
+    this.sidebar.removeEventListener("modalCLosed", this.sidebarCloseListener);
+    document.body.removeChild(this.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"
+    }
+  }; }
+}

package/dist/collection/components/vviinn-vpr-widget/stories/args.js

@@ -0,0 +1,190 @@
+export const apiPath = {
+  name: "api-path",
+  control: {
+    type: "text",
+  },
+  table: {
+    defaultValue: { summary: "https://api.vviinn.com" },
+  },
+};
+const token = {
+  name: "token",
+  control: {
+    type: "text",
+  },
+};
+const productId = {
+  name: "product-id",
+  control: {
+    type: "text",
+  },
+};
+const cssUrl = {
+  name: "css-url",
+  description: "Optional for custom CSS.  It will overwrite all other settings.",
+  control: {
+    type: "text",
+  },
+  required: false,
+};
+const analyticsId = {
+  name: "Google tracking account ID",
+  description: "Optional. Goolge Analytics account id or tag manager id and click events will be send for analytics product lists",
+  control: {
+    type: "text",
+  },
+  required: false,
+};
+export const campaignType = {
+  name: "campaign-type",
+  control: {
+    type: "select",
+    labels: {
+      VPR: "Visually similar products (VPR)",
+      VCS: "Visually cross-selling (VCS)",
+    },
+  },
+  required: false,
+};
+const showTitle = {
+  name: "Section title",
+  control: {
+    type: "boolean",
+  },
+  table: {
+    defaultValue: { summary: true },
+  },
+  required: false,
+};
+const titleName = {
+  name: "block-title",
+  control: {
+    type: "text",
+  },
+  table: {
+    defaultValue: { summary: "Recommended products" },
+  },
+  required: false,
+};
+const titleFontSize = {
+  name: "Section title name font size (px)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const showScrollbars = {
+  name: "show-scroll",
+  description: "Add browser default horizontal scroll bar (in continuity mode) or pagination bullets (in grid mode) to add extra cue for users ",
+  control: {
+    type: "boolean",
+  },
+  required: false,
+};
+const imageWidth = {
+  name: "image-width",
+  control: {
+    type: "number",
+  },
+};
+const contentAlignment = {
+  name: "Content alignment",
+  options: ["Left", "Centered", "Right"],
+  mapping: {
+    Left: 0,
+    Centered: 1,
+    Right: 2,
+  },
+  control: {
+    type: "select",
+    default: 0,
+  },
+};
+const primaryTextColor = {
+  name: "Primary text color",
+  control: {
+    type: "color",
+  },
+  description: "Used where the most user attention is needed: product brand, product title, and price.",
+};
+const secondaryTextColor = {
+  name: "Secondary text color",
+  description: "Used in Old Price",
+  control: {
+    type: "color",
+  },
+};
+export const argTypes = {
+  analyticsId,
+  apiPath,
+  campaignType,
+  contentAlignment,
+  cssUrl,
+  imageWidth,
+  primaryTextColor,
+  productId,
+  secondaryTextColor,
+  showScrollbars,
+  showTitle,
+  titleFontSize,
+  titleName,
+  token,
+};
+const recommendationsGridProductsDesktop = {
+  name: "Product cards shown on desktop",
+  description: "Desktop mode is bigger than 1024px. (Use arrow buttons to apply changes)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsGridProductsTablet = {
+  name: "Product cards shown on tablet",
+  description: "How many product cards users will see inside one grid in a screen 768px-1024px. (Use arrow buttons to apply changes)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsGridProductsMobile = {
+  name: "Product cards shown on mobile",
+  description: "How many product cards users will see inside one grid in a screen <768. (Use arrow buttons to apply changes)",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+export const gridLayoutArgs = {
+  recommendationsGridProductsDesktop,
+  recommendationsGridProductsTablet,
+  recommendationsGridProductsMobile,
+};
+const recommendationsContinuityProductsDesktop = {
+  name: "Product cards width in a L screen [px]",
+  description: "How wide product cards will be on a screen bigger than 1024px width",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsContinuityProductsTablet = {
+  name: "Product cards width in a M screen [px]",
+  description: "How wide product cards will be on a screen from 768px-1024px width",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+const recommendationsContinuityProductsMobile = {
+  name: "Product cards width in a S screen [px]",
+  description: "How wide product cards will be on a screen smaller than 768px width",
+  control: {
+    type: "number",
+  },
+  required: false,
+};
+export const continuityLayoutArgs = {
+  recommendationsContinuityProductsDesktop,
+  recommendationsContinuityProductsTablet,
+  recommendationsContinuityProductsMobile,
+};

package/dist/collection/components/vviinn-vpr-widget/stories/decorators.js

@@ -0,0 +1,29 @@
+export const gridDecorator = (story) => `
+<style>
+  @media (min-width: 836px) {
+    #root-inner {
+      padding: 0 10%;
+    }
+  }
+
+  @media (max-width: 860px) {
+    vviinn-product-card::part(title),
+    vviinn-product-card::part(brand),
+    vviinn-product-card::part(type),
+    vviinn-product-card::part(price-container) {
+      font-size: 14px;
+    }
+  }
+</style>
+${story()}
+`;
+export const continuityDecorator = (story) => `
+<style>
+  @media (min-width: 836px) {
+    #root-inner {
+      padding-left: 10%;
+    }
+  }
+</style>
+${story()}
+`;