vviinn-widgets 2.7.2 → 2.8.0

package/dist/collection/components/vviinn-product-card/render-helpers.js

@@ -1,32 +0,0 @@
-import { pipe } from "fp-ts/lib/function";
-import * as E from "fp-ts/lib/Either";
-import { h } from "@stencil/core";
-const FIT_EXPR = /fit\/\d+\//;
-export const containsFit = (url) => {
-  return pipe(url.match(FIT_EXPR), E.fromNullable(url), E.map(() => url));
-};
-export const processWidth = (url, size) => {
-  return pipe(containsFit(url), E.map((url) => url.replace(FIT_EXPR, `fit/${size}/`)), E.getOrElse(() => url));
-};
-export const Linked = (props, child) => props.deeplink ? (h("a", { class: props.part, part: props.part, href: props.deeplink }, child)) : (child);
-const FormattedPrice = (props) => {
-  var _a;
-  const locale = props.locale;
-  const formattedPrice = new Intl.NumberFormat(locale, {
-    minimumFractionDigits: 2,
-  }).format(props.price);
-  const fullPrice = `${(_a = props.prefix) !== null && _a !== void 0 ? _a : ""} ${formattedPrice} ${props.currency}`;
-  return (h("span", { class: "price-amount", part: "price-amount" }, fullPrice));
-};
-export const Price = (props) => {
-  const priceEl = (h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.price, locale: props.locale }));
-  return (h("span", { class: "price-container", part: "price-container" }, props.salePrice ? ([
-    h("span", { class: "price-sale", part: "price-sale" },
-      h(FormattedPrice, { prefix: props.prefix, currency: props.currency, price: props.salePrice, locale: props.locale })),
-    h("span", { class: "price-outdated", part: "price-outdated" }, priceEl),
-  ]) : (h("span", { class: "price-regular", part: "price-regular" }, priceEl))));
-};
-export const Image = (props, onLoadEnd = () => undefined) => (h("picture", null,
-  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image", width: props.width, height: props.height, src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));
-export const ResponsiveImage = (props, onLoadEnd = () => undefined) => (h("picture", null,
-  h("img", { loading: props.lazy ? "lazy" : "eager", part: "image", class: "image responsive", src: processWidth(props.src, props.width), alt: props.title, onLoad: onLoadEnd })));

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

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

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

@@ -1,105 +0,0 @@
-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-product-card/vviinn-product-card.css

@@ -1,95 +0,0 @@
-:host {
-  align-items: center;
-  display: flex;
-  flex-direction: column;
-  gap: 8px;
-  height: 100%;
-}
-
-.price-container {
-  display: flex;
-  flex-direction: column;
-}
-
-.price-sale,
-.price-regular {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 24px;
-  color: #161616;
-}
-
-.price-outdated {
-  font-style: normal;
-  font-weight: normal;
-  font-size: 16px;
-  line-height: 24px;
-  color: #757575;
-  text-decoration: line-through;
-}
-
-.product-type {
-  word-wrap: anywhere;
-}
-
-.image {
-  display: grid;
-  align-content: center;
-  -o-object-position: 50% 50%;
-     object-position: 50% 50%;
-  -o-object-fit: contain;
-     object-fit: contain;
-  text-align: center;
-  box-sizing: border-box;
-}
-
-img.responsive {
-  width: 100%;
-  height: auto;
-  aspect-ratio: 1;
-}
-
-.brand,
-.type {
-  display: none;
-}
-
-.title {
-  -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
-  color: #161616;
-  display: -webkit-box;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 500;
-  line-height: 24px;
-  margin-bottom: 8px;
-  overflow: hidden;
-}
-
-.deeplink {
-  text-decoration: none;
-}
-
-.image-link {
-  display: contents;
-}
-
-picture {
-  position: relative;
-  width: 100%;
-}
-
-:host(.dimmed) picture::before {
-  content: "";
-  width: 100%;
-  height: 100%;
-  box-sizing: border-box;
-  background: #f7f7f7;
-  display: block;
-  top: 0;
-  left: 0;
-  position: absolute;
-  mix-blend-mode: multiply;
-}