vviinn-widgets 2.5.0 → 2.5.2

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

@@ -0,0 +1,79 @@
+:host {
+  /**
+   * @prop --vviinn-carousel-columns: control number of items in grid mode
+   * @prop --vviinn-carousel-image-width: control image width in continuity mode
+   */
+
+  display: grid;
+  grid-gap: 1rem;
+  width: 100%;
+}
+
+:host(:not(.loaded)) {
+  position: absolute;
+  visibility: hidden;
+}
+
+:host(.grid) vviinn-product-card::part(image) {
+  border: 1px solid #DDDDDD;
+  width: 100%;
+}
+
+h2 {
+  margin: 0;
+}
+
+vviinn-product-card::part(price-container) {
+  align-self: flex-start;
+  text-align: left;
+  display: flex;
+}
+
+.results {
+  display: grid;
+  grid-gap: 1rem;
+}
+
+.visually-hidden {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: -1;
+  height: 0;
+  width: 0;
+}
+
+h2 {
+  margin: 0;
+}
+
+:host(.grid) h2 {
+  justify-content: center;
+}
+
+:host(.grid) vviinn-product-card::part(image) {
+  min-width: 100%;
+}
+
+:host(.grid) vviinn-product-card::part(image-link) {
+  width: 100%;
+}
+
+:host(.grid) vviinn-product-card::part(title),
+:host(.grid) vviinn-product-card::part(brand),
+:host(.grid) vviinn-product-card::part(type) {
+  text-align: center;
+}
+
+:host(.grid) vviinn-product-card::part(price-container) {
+  align-self: center;
+}
+
+:host(.continuity) vviinn-product-card::part(title),
+:host(.continuity) vviinn-product-card::part(brand),
+:host(.continuity) vviinn-product-card::part(type),
+:host(.continuity) vviinn-product-card::part(deeplink) {
+  text-align: left;
+  max-width: unset;
+  align-self: start;
+}

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

@@ -0,0 +1,31 @@
+export default {
+  title: "Widgets/Visual Search/Button",
+  component: "vviinn-vps-button",
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile2"
+    }
+  },
+  decorators: [(story) => `
+    <div style="display: grid;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                left: 0;
+                right: 0;
+                align-items: center;
+                justify-items: center;">
+      ${story()}
+    </div>
+  `],
+};
+const Template = (args) => `
+<vviinn-vps-button
+  api-path="${args.apiPath}"
+  token="${args.token}"
+></vviinn-vps-button>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  apiPath: "https://api.vviinn.com"
+};

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

@@ -0,0 +1,3 @@
+:host {
+  cursor: pointer;
+}

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

@@ -0,0 +1,178 @@
+import { Component, Host, h, Prop, State, Listen, Element, Event, } from "@stencil/core";
+import { CameraIcon } from "../vviinn-icons";
+import { SlotSkeleton } from "../customized-slots";
+/**
+ * @slot vviinn-onboarding-title
+ * @slot vviinn-onboarding-card-1-icon
+ * @slot vviinn-onboarding-card-1-text
+ * @slot vviinn-onboarding-card-2-icon
+ * @slot vviinn-onboarding-card-2-text
+ * @slot vviinn-onboarding-card-3-icon
+ * @slot vviinn-onboarding-card-3-text
+ * @slot vviinn-example-images-title
+ * @slot vviinn-example-images-1
+ * @slot vviinn-example-images-2
+ * @slot vviinn-example-images-3
+ * @slot vviinn-example-images-4
+ * @slot vviinn-teaser-text
+ * @slot vviinn-image-upload-button-text
+ * @slot vviinn-privacy-badge-text
+ *
+ * @part brand - product brand.
+ * @part currency - currency sign. Renders after price-amount.
+ * @part deeplink - anchor element for title. Rendered only if "deeplink" property filled.
+ * @part image - product image.
+ * @part image-link - anchor element for image. Rendered only if "deeplink" property filled.
+ * @part price-amount - numeric part of price.
+ * @part price-container - block contains all prices.
+ * @part price-outdated - renders inside price-container when "sale-price" property filled. Contains regular price.
+ * @part price-prefix - renders before price-amount. Can be set with "price-prefix" property or inherited from parent component.
+ * @part price-regular - renders inside price-container when "sale-price" property is empty.
+ * @part price-sale - renders inside price-container when "sale-price" property filled. Contains sale price.
+ * @part title - product title
+ * @part example-images - example images block
+ */
+export class VviinnVpsButton {
+  constructor() {
+    /** Currency sign will shown after price */
+    this.currencySign = "€";
+    /** Locale for currency formatting */
+    this.locale = "de-DE";
+    this.pressed = false;
+  }
+  handleModalClosed() {
+    this.pressed = false;
+  }
+  componentDidLoad() {
+    const slots = this.el.querySelectorAll("[slot]");
+    this.globalSlotsChanged.emit(Array.from(slots));
+  }
+  handleKeyDown(ev) {
+    if (ev.code !== "Enter" && ev.code !== "Space")
+      return;
+    this.pressed = true;
+  }
+  handleClick() {
+    this.pressed = true;
+  }
+  render() {
+    return (h(Host, { tabindex: "0", role: "button", pressed: this.pressed, onClick: () => this.handleClick(), onKeyDown: (ev) => this.handleKeyDown(ev) },
+      h("slot", null,
+        h(CameraIcon, null)),
+      h(SlotSkeleton, null),
+      h("vviinn-vps-widget", { active: this.pressed, "currency-sign": "\u20AC", token: this.token, locale: this.locale, apiPath: this.apiPath, exportparts: "brand, currency, deeplink, image, image-link, price-amount, price-container, price-outdated, price-prefix, price-regular, price-sale, title, product-card, example-images" })));
+  }
+  static get is() { return "vviinn-vps-button"; }
+  static get encapsulation() { return "shadow"; }
+  static get originalStyleUrls() { return {
+    "$": ["vviinn-vps-button.css"]
+  }; }
+  static get styleUrls() { return {
+    "$": ["vviinn-vps-button.css"]
+  }; }
+  static get properties() { return {
+    "token": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "vviinn customer token"
+      },
+      "attribute": "token",
+      "reflect": false
+    },
+    "currencySign": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Currency sign will shown after price"
+      },
+      "attribute": "currency-sign",
+      "reflect": false,
+      "defaultValue": "\"\u20AC\""
+    },
+    "locale": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [],
+        "text": "Locale for currency formatting"
+      },
+      "attribute": "locale",
+      "reflect": false,
+      "defaultValue": "\"de-DE\""
+    },
+    "apiPath": {
+      "type": "string",
+      "mutable": false,
+      "complexType": {
+        "original": "string | undefined",
+        "resolved": "string",
+        "references": {}
+      },
+      "required": false,
+      "optional": false,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "attribute": "api-path",
+      "reflect": false
+    }
+  }; }
+  static get states() { return {
+    "pressed": {}
+  }; }
+  static get events() { return [{
+      "method": "globalSlotsChanged",
+      "name": "globalSlotsChanged",
+      "bubbles": true,
+      "cancelable": true,
+      "composed": true,
+      "docs": {
+        "tags": [{
+            "text": undefined,
+            "name": "internal"
+          }],
+        "text": ""
+      },
+      "complexType": {
+        "original": "any",
+        "resolved": "any",
+        "references": {}
+      }
+    }]; }
+  static get elementRef() { return "el"; }
+  static get listeners() { return [{
+      "name": "modalClosed",
+      "method": "handleModalClosed",
+      "target": undefined,
+      "capture": false,
+      "passive": false
+    }]; }
+}

package/dist/collection/components/vviinn-vps-widget/stories/vviinn-vps-widget.stories.js

@@ -0,0 +1,33 @@
+export default {
+  title: "Widgets/Visual Search/Widget",
+  parameters: {
+    viewport: {
+      defaultViewport: "mobile2"
+    }
+  }
+};
+const Template = ({ token, apiPath }) => `
+  <vviinn-vps-widget token="${token}"
+                     api-path="${apiPath}"
+                     active="true">
+  </vviinn-vps-widget>`;
+export const Default = Template.bind({});
+Default.args = {
+  token: "eyJ0eXAiOiJKV1QiLCJhbGciOiJSUzI1NiJ9.eyJzdWIiOjgzLCJqdGkiOiI3ZTg2Y2I1YS00ZTFjLTRhYjctYjU2My1lN2FjMTYzZTYyZDIiLCJzY29wZXMiOlsidnByIiwidnBzIiwidnBjIl19.SbaQnBkvoXer3GPCWUthFQStFKLHZNMBfj4Qu44WHM8nzaIt48I74yVy4gVbX29vtd6jIkDPdakqEXRXmAxOCtv7_nsd4iBs1yMegfOWW5g8f10PKfZqmWJcfhwKIEElnUMFmP6rXpogntZ7iFfeTBbiRNzQPhkaa7jUjgQkCC4",
+  apiPath: "https://api.vviinn.com"
+};
+Default.storyName = "Modal Window";
+Default.decorators = [(Story) => `
+<style>
+.sb-show-main.sb-main-padded {
+  padding: unset;
+}
+
+#root {
+  align-content: center;
+  display: grid;
+  height: 100vh;
+  justify-items: center;
+}
+</style>
+${Story()}`];

package/dist/collection/components/vviinn-vps-widget/vviinn-vps-widget.css

@@ -0,0 +1,350 @@
+:host {
+  --color-primary-system: #0F62FE;
+  --color-primary-hover-system: #014CDA;
+  --color-icons-system: #2F8EDF;
+  --spacer: 8px;
+}
+
+
+:host {
+  display: block;
+}
+
+.hidden {
+  visibility: hidden;
+  height: 1px;
+}
+
+vviinn-overlayed-modal.first-screen::part(title),
+vviinn-overlayed-modal.first-screen::part(secondary-action) {
+  visibility: hidden;
+}
+
+.start-page {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  min-height: 580px;
+}
+
+.start-page_block {
+  align-content: start;
+  border-right: 1px solid #F4F4F4;
+  display: grid;
+  padding: 48px;
+}
+
+.start-page_block.error {
+  align-content: center;
+}
+
+
+#onboarding-block {
+  border-right: unset;
+  box-sizing: border-box;
+  grid-gap: 24px;
+  overflow-y: auto;
+  position: relative;
+  width: 100%;
+}
+
+vviinn-teaser {
+  margin-bottom: 32px;
+  margin-top: -24px;
+}
+
+vviinn-image-selector {
+  align-items: center;
+  background: var(--color-primary, var(--color-primary-system));
+  border-color: var(--color-primary, var(--color-primary-system));
+  border-radius: 2px;
+  color: white;
+  display: grid;
+  font-size: 16px;
+  font-weight: 600;
+  height: 56px;
+  justify-items: center;
+  margin-bottom: 16px;
+  transition: background 0.1s ease-in-out;
+}
+
+vviinn-image-selector:hover {
+  background: var(--color-primary-hover, var(--color-primary-hover-system));
+  border-color: var(--color-primary-hover, var(--color-primary-hover-system));
+}
+
+vviinn-image-selector:active {
+  border-color: black;
+}
+
+.upload-button-content {
+  display: grid;
+  align-items: center;
+  justify-items: start;
+  justify-content: center;
+  grid-template-columns: -webkit-max-content auto;
+  grid-template-columns: max-content auto;
+  grid-gap: 16px;
+}
+
+.results-page {
+  display: grid;
+  grid-template-columns: 336px auto;
+  box-sizing: border-box;
+}
+
+.results-page > * {
+  padding: 24px;
+  box-sizing: border-box;
+}
+
+.products {
+  align-content: center;
+  align-items: start;
+  box-sizing: border-box;
+  display: grid;
+  grid-gap: 32px 16px;
+  grid-template-columns: repeat(auto-fill, minmax(152px, 1fr));
+  justify-items: center;
+  padding: 24px;
+  padding-right: 0;
+  position: absolute;
+  width: calc(100% - 16px);
+}
+
+.products.hidden {
+  display: none;
+}
+
+vviinn-empty-results {
+  width: 280px;
+  align-self: center;
+  justify-self: center;
+}
+
+.products-wrapper {
+  display: grid;
+  overflow-y: auto;
+  overflow-x: hidden;
+  padding: unset;
+  position: relative;
+  width: 100%;
+}
+
+.image-wrapper {
+  border-right: 1px solid #F4F4F4;
+  display: grid;
+  grid-template-rows: -webkit-min-content 170px;
+  grid-template-rows: min-content 170px;
+  grid-gap: 24px;
+  min-width: 100%;
+}
+
+.onboarding-wrapper {
+  position: absolute;
+  width: 100%;
+  padding: 48px;
+  box-sizing: border-box;
+  display: grid;
+  grid-gap: 64px;
+  padding-bottom: 24px;
+}
+
+vviinn-product-card {
+  gap: 0;
+  width: 100%;
+}
+
+vviinn-product-card::part(image) {
+  border: 1px solid #eaeaea;
+  margin-bottom: 8px;
+}
+
+vviinn-product-card::part(price-container),
+vviinn-product-card::part(deeplink),
+vviinn-product-card::part(title) {
+  align-self: start;
+}
+
+search-filters span {
+  display: none;
+}
+
+search-filters::part(filter) {
+  background: #F4F4F4;
+  border-radius: 4px;
+  border: 1px solid #F4F4F4;
+  box-sizing: border-box;
+  color: #161616;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+}
+
+search-filters::part(show-more-filters) {
+  border: 1px solid #f4f4f4;
+  border-radius: 4px;
+  box-sizing: border-box;
+  color: #161616;
+  font-size: 14px;
+  font-weight: 600;
+  line-height: 20px;
+  padding: 6px 16px;
+}
+
+search-filters::part(show-more-filters):hover {
+  background: #EAEAEA;
+}
+
+search-filters::part(filter):hover {
+  background: #EAEAEA;
+}
+
+search-filters::part(filter):focus {
+  outline: none;
+  border: 1px solid var(--color-primary, var(--color-primary-system));
+}
+
+search-filters::part(filter active) {
+  background: rgba(15, 98, 254, 0.15);
+  color: var(--color-primary, var(--color-primary-system));
+}
+
+.filters-wrapper {
+  overflow: auto;
+}
+
+.results-page:not(.active) {
+  display: none;
+}
+
+.nothing-found {
+  display: grid;
+  grid-gap: 64px;
+  justify-self: center;
+  padding-top: 64px;
+  padding-bottom: 16px;
+  position: absolute;
+  width: 60%;
+}
+
+@media (max-width: 768px) {
+  .start-page_block {
+    padding: 24px;
+  }
+
+  .onboarding-wrapper {
+    padding: 24px;
+  }
+}
+
+@media (max-width: 640px) {
+  .start-page {
+    grid-template-rows: -webkit-min-content;
+    grid-template-rows: min-content;
+    grid-template-columns: unset;
+    grid-gap: 48px;
+    padding: 24px 0 48px 0;
+  }
+}
+
+@media (max-width: 640px) and (min-width: 415px) {
+  .onboarding-wrapper {
+    position: unset;
+  }
+
+  #onboarding-block {
+    overflow: unset;
+  }
+
+  .start-page.active {
+    height: 1px;
+    overflow: auto;
+  }
+}
+
+@media (max-width: 415px) {
+  .results-page > * {
+    box-sizing: border-box;
+    padding: 24px;
+  }
+
+  vviinn-slide {
+    padding-bottom: 48px;
+  }
+
+  .start-page_block:last-of-type {
+    border-right: unset;
+    overflow-y: unset;
+    position: static;
+    box-sizing: border-box;
+    width: unset;
+  }
+
+  .start-page_block {
+    padding: 0 24px;
+  }
+
+  vviinn-teaser {
+    margin-top: 24px;
+  }
+
+  .onboarding-wrapper {
+    position: static;
+    width: unset;
+    padding: unset;
+    box-sizing: border-box;
+  }
+
+  .results-page {
+    grid-template-columns: unset;
+    grid-template-rows: -webkit-min-content auto;
+    grid-template-rows: min-content auto;
+  }
+
+  .image {
+    margin-bottom: 8px;
+  }
+
+  .image-wrapper {
+    grid-template-rows: -webkit-min-content auto;
+    grid-template-rows: min-content auto;
+    width: 100%;
+  }
+
+  .products-wrapper {
+    align-content: start;
+    position: static;
+    overflow-y: unset;
+    width: 100%;
+    padding-top: 0;
+  }
+
+  .products {
+    position: static;
+    padding: 0;
+    width: unset;
+    grid-gap: 32px 16px;
+    justify-content: center;
+  }
+
+  .nothing-found {
+    position: static;
+    grid-gap: 64px;
+    padding: unset;
+    align-content: start;
+    width: unset;
+  }
+} 
+
+@media (max-width: 320px) {
+  .products {
+    grid-template-columns: unset;
+  }
+}
+
+vviinn-wrong-format,
+vviinn-server-error {
+  width: 280px;
+  align-self: center;
+  justify-self: center;
+}