vviinn-widgets 2.2.1 → 2.3.1

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

@@ -0,0 +1,73 @@
+export const argTypes = {
+  imageWidth: {
+    name: "Card width (px)",
+  },
+  imageBorder: {
+    name: "Image border",
+  },
+  imageBorderColor: {
+    name: "Image border color",
+    control: {
+      type: "color",
+    },
+  },
+  imageBackground: {
+    name: "Image background",
+    description: "Adding a light-gray filter on top of the image to distinguish it from the rest of the product card content.",
+  },
+  showBrand: {
+    name: "Show brand",
+    description: "Using the [title] attribute from product feed.",
+  },
+  titleLineCount: {
+    name: "Number of text lines for Product title",
+    options: [1, 2, 3],
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  locale: {
+    name: "Locale",
+    options: ["de-DE", "en-US"],
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  currencyValue: {
+    name: "Currency",
+    options: ["$", "€", "£", "¥", "₽"],
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  contentAlignment: {
+    name: "Content alignment",
+    options: ["Left", "Centered", "Right"],
+    mapping: {
+      Left: 0,
+      Centered: 1,
+      Right: 2,
+    },
+    control: {
+      type: "select",
+      default: 0,
+    },
+  },
+  primaryTextColor: {
+    name: "Primary text color",
+    control: {
+      type: "color",
+    },
+    description: "Used where the most user attention is needed: product brand, product title, and price.",
+  },
+  secondaryTextColor: {
+    name: "Secondary text color",
+    description: "Used in Old Price",
+    control: {
+      type: "color",
+    },
+  },
+};

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

@@ -0,0 +1,51 @@
+export const productDecorator = (story) => `
+<style>
+html, body, #root, #root-inner {
+  width: 100%;
+  height: 100%;
+}
+
+#root-inner {
+  display: grid;
+  align-items: center;
+  justify-items: center;
+}
+
+.product-wrapper {
+  width: 240px;
+}
+
+vviinn-product-card {
+  align-items: start;
+}
+
+vviinn-product-card::part(image) {
+  border: 1px solid #DDDDDD;
+}
+
+vviinn-product-card::part(brand) {
+  display: flex;
+  font-weight: 500;
+  font-size: 16px;
+  line-height: 24px;
+}
+
+vviinn-product-card::part(brand),
+vviinn-product-card::part(title) {
+  text-align: left;
+}
+
+vviinn-product-card::part(title) {
+  order: 2;
+  max-width: unset;
+}
+
+vviinn-product-card::part(price-container) {
+  order: 3;
+}
+
+</style>
+<div class="product-wrapper">
+  ${story()}
+</div>
+`;

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

@@ -0,0 +1,105 @@
+import { argTypes } from "./args";
+import { productDecorator } from "./decorators";
+export default {
+  title: "Elements/Product Card",
+  component: "vviinn-product-card",
+  decorators: [
+    productDecorator
+  ],
+  argTypes
+};
+const showImageBorders = (x, color) => {
+  const borderRule = x ? `1px solid ${color}` : "none";
+  return `
+  vviinn-product-card::part(image) {
+    border: ${borderRule};
+  }
+`;
+};
+const setupBrandVisibility = (show) => `
+  vviinn-product-card::part(brand) {
+    display: ${show ? "flex" : "none"};
+  }
+`;
+const setupTitleLineCount = (count) => `
+  vviinn-product-card::part(title) {
+    -webkit-line-clamp: ${count};
+  }
+`;
+const allignementLeft = `
+  vviinn-product-card::part(title),
+  vviinn-product-card::part(brand),
+  vviinn-product-card::part(type),
+  vviinn-product-card::part(deeplink),
+  vviinn-product-card::part(price-container) {
+    align-self: start;
+    text-align: left;
+  }`;
+const allignementCenter = `
+  vviinn-product-card::part(title),
+  vviinn-product-card::part(brand),
+  vviinn-product-card::part(type),
+  vviinn-product-card::part(deeplink),
+  vviinn-product-card::part(price-container) {
+    align-self: center;
+    text-align: center;
+  }`;
+const allignementRight = `
+  vviinn-product-card::part(title),
+  vviinn-product-card::part(brand),
+  vviinn-product-card::part(type),
+  vviinn-product-card::part(deeplink),
+  vviinn-product-card::part(price-container) {
+    align-self: end;
+    text-align: right;
+  }`;
+const allignement = new Map([
+  [0, allignementLeft],
+  [1, allignementCenter],
+  [2, allignementRight],
+]);
+const Template = (args) => `
+  <style>
+    ${allignement.get(args.contentAlignment)}
+    ${showImageBorders(args.imageBorder, args.imageBorderColor)}
+    ${setupBrandVisibility(args.showBrand)}
+    ${setupTitleLineCount(args.titleLineCount)}
+
+    vviinn-product-card::part(title),
+    vviinn-product-card::part(brand),
+    vviinn-product-card::part(type),
+    vviinn-product-card::part(price-sale),
+    vviinn-product-card::part(price-regular) {
+      color: ${args.primaryTextColor};
+    }
+
+    vviinn-product-card::part(price-outdated) {
+      color: ${args.secondaryTextColor};
+    }
+  </style>
+  <vviinn-product-card
+    product-title="Couchtisch Rolf Benz 8770 Ronald Schmitt"
+    brand="Ronald Schmitt"
+    product-type="Couchtische"
+    price="3629"
+    sale-price="1653"
+    image="https://www.moebel-shop.de/media/image/e3/e9/28/0749295-001_600x600.jpg"
+    image-width="${args.imageWidth}"
+    dimmed-background="${args.imageBackground}"
+    locale="${args.locale}"
+    currency="${args.currencyValue}"
+  ></vviinn-product-card>`;
+export const Default = Template.bind({});
+Default.args = {
+  imageWidth: 240,
+  contentAlignment: "Left",
+  imageBorder: true,
+  imageBorderColor: "#dddddd",
+  imageBackground: false,
+  primaryTextColor: "#161616",
+  secondaryTextColor: "#757575",
+  showBrand: false,
+  titleLineCount: 2,
+  locale: "en-US",
+  currencyValue: "€"
+};

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"; }