vviinn-widgets 2.2.2 → 2.4.0

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.js

@@ -10,6 +10,10 @@ export class VviinnVprButton {
     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,
@@ -25,10 +29,13 @@ export class VviinnVprButton {
     sidebar.position = this.position;
     sidebar.sourceImage = this.sourceImage;
     sidebar.widgetScrollbar = this.modalScrollbar;
-    sidebar.addEventListener("modalClosed", () => {
-      document.body.removeChild(sidebar);
-    });
-    document.body.append(sidebar);
+    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"; }

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()}
+`;