vviinn-widgets 2.7.2 → 2.8.0

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

@@ -1,213 +0,0 @@
-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",
-  },
-  campaigns: {
-    name: "campaigns",
-    control: {
-      type: "text",
-    },
-  },
-};

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

@@ -1,91 +0,0 @@
-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}"
-                      campaigns="${args.campaigns}"
-                      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",
-  campaigns: "",
-};
-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

@@ -1,35 +0,0 @@
-: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

@@ -1,179 +0,0 @@
-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;
-    /** comma-separated list of campaign-ids */
-    this.campaigns = "";
-    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;
-    sidebar.campaigns = this.campaigns;
-    this.sidebar = sidebar;
-    sidebar.addEventListener("modalClosed", this.sidebarCloseListener);
-    document.body.append(this.sidebar);
-  }
-  disconnectedCallback() {
-    if (!this.sidebar)
-      return;
-    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"
-    },
-    "campaigns": {
-      "type": "string",
-      "mutable": false,
-      "complexType": {
-        "original": "string",
-        "resolved": "string",
-        "references": {}
-      },
-      "required": false,
-      "optional": false,
-      "docs": {
-        "tags": [],
-        "text": "comma-separated list of campaign-ids"
-      },
-      "attribute": "campaigns",
-      "reflect": false,
-      "defaultValue": "\"\""
-    }
-  }; }
-}

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

@@ -1,197 +0,0 @@
-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 campaigns = {
-  name: "campaigns",
-  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,
-  campaigns,
-  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,
-};