@websolutespa/bom-mixer-llm 1.8.3 → 1.8.4

package/CHANGELOG.md

@@ -1,5 +1,11 @@
 # @websolutespa/bom-mixer-llm
 
+## 1.8.4
+
+### Patch Changes
+
+- Modified: Product Card & Product Card Group style
+
 ## 1.8.3
 
 ### Patch Changes

package/dist/cjs/index.css

@@ -2363,6 +2363,9 @@ llm-embed {
   font-size: clamp(var(--llm-typography-label1-font-size-min) * 1px, var(--llm-typography-label1-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-label1-font-size-max) - var(--llm-typography-label1-font-size-min)), var(--llm-typography-label1-font-size-max) * 1px);
   font-weight: 700;
 }
+.llm .llm__product-grow {
+  flex-grow: 1;
+}
 .llm .llm__product-title {
   line-height: 1;
   font-family: var(--llm-font-primary);
@@ -2371,7 +2374,11 @@ llm-embed {
   letter-spacing: var(--llm-typography-body4-letter-spacing);
   font-size: clamp(var(--llm-typography-body4-font-size-min) * 1px, var(--llm-typography-body4-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body4-font-size-max) - var(--llm-typography-body4-font-size-min)), var(--llm-typography-body4-font-size-max) * 1px);
   font-weight: 100;
-  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 .llm .llm__product-title:hover {
   text-decoration: underline;
@@ -2384,7 +2391,11 @@ llm-embed {
   letter-spacing: var(--llm-typography-body5-letter-spacing);
   font-size: clamp(var(--llm-typography-body5-font-size-min) * 1px, var(--llm-typography-body5-font-size-min) * 1px + (100vw - 375px) / 1545 * (var(--llm-typography-body5-font-size-max) - var(--llm-typography-body5-font-size-min)), var(--llm-typography-body5-font-size-max) * 1px);
   font-weight: 100;
-  flex-grow: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  display: -webkit-box;
+  -webkit-line-clamp: 2;
+  -webkit-box-orient: vertical;
 }
 .llm .llm__product-prices {
   display: flex;
@@ -2443,7 +2454,8 @@ llm-embed {
 
 .llm .llm__products {
   width: 100%;
-  margin: 3rem 0;
+  max-width: 1440px;
+  margin: 3rem auto;
 }
 .llm .llm__product {
   height: 100%;

package/dist/cjs/index.js

@@ -17,6 +17,7 @@ var react$1 = require('swiper/react');
 var swiper = require('swiper');
 var reactDom = require('react-dom');
 var marked = require('marked');
+var transliteration = require('transliteration');
 
 function _interopDefault (e) { return e && e.__esModule ? e : { default: e }; }
 
@@ -157,8 +158,8 @@ typeof SuppressedError === "function" ? SuppressedError : function (error, suppr
 };
 
 var font = {
-  primary: "Aeonik",
-  secondary: "Capraia"
+  primary: "Aeonik, Arial, Helvetica, sans-serif",
+  secondary: "Capraia, Georgia, serif"
 };
 var typography = {
   display1: {
@@ -4860,6 +4861,7 @@ const Product = props => {
   const fullPrice = asNumber(props.fullPrice) || price;
   const availability = asNumber(props.availability);
   const hasAvailability = props.availability != null;
+  const labelKey = props.label ? `-${transliteration.slugify(props.label)}` : '';
   return jsxRuntime.jsxs(ProductWrapper, Object.assign({}, props, {
     children: [props.media.type === 'image' && props.url && jsxRuntime.jsxs("a", {
       className: "llm__product-media",
@@ -4875,6 +4877,10 @@ const Product = props => {
         })
       }), props.label && jsxRuntime.jsx("div", {
         className: "llm__product-label",
+        style: {
+          background: `var(--llm-product-label${labelKey}-background, var(--llm-product-label-background))`,
+          color: `var(--llm-product-label${labelKey}-foreground, var(--llm-product-label-foreground))`
+        },
         children: props.label
       })]
     }), props.media.type === 'image' && !props.url && jsxRuntime.jsxs("div", {
@@ -4894,24 +4900,27 @@ const Product = props => {
       children: [props.sku && jsxRuntime.jsx("div", {
         className: "llm__product-sku",
         children: props.sku
-      }), props.title && props.url && jsxRuntime.jsx("a", {
-        className: "llm__product-title",
-        href: props.url,
-        target: "_blank",
-        rel: "noreferrer",
-        dangerouslySetInnerHTML: {
-          __html: props.title
-        }
-      }), props.title && !props.url && jsxRuntime.jsx("div", {
-        className: "llm__product-title",
-        dangerouslySetInnerHTML: {
-          __html: props.title
-        }
-      }), props.abstract && jsxRuntime.jsx("div", {
-        className: "llm__product-abstract",
-        dangerouslySetInnerHTML: {
-          __html: props.abstract
-        }
+      }), jsxRuntime.jsxs("div", {
+        className: "llm__product-grow",
+        children: [props.title && props.url && jsxRuntime.jsx("a", {
+          className: "llm__product-title",
+          href: props.url,
+          target: "_blank",
+          rel: "noreferrer",
+          dangerouslySetInnerHTML: {
+            __html: props.title
+          }
+        }), props.title && !props.url && jsxRuntime.jsx("div", {
+          className: "llm__product-title",
+          dangerouslySetInnerHTML: {
+            __html: props.title
+          }
+        }), props.abstract && jsxRuntime.jsx("div", {
+          className: "llm__product-abstract",
+          dangerouslySetInnerHTML: {
+            __html: props.abstract
+          }
+        })]
       }), price && fullPrice && jsxRuntime.jsxs("div", {
         className: "llm__product-prices",
         children: [jsxRuntime.jsx("div", {
@@ -4921,10 +4930,7 @@ const Product = props => {
           className: "llm__product-fullprice",
           children: currency(fullPrice)
         })]
-      }), hasAvailability && (availability ? availability > 100 ? jsxRuntime.jsx("div", {
-        className: "llm__product-available",
-        children: label('llm.available')
-      }) : jsxRuntime.jsx("div", {
+      }), hasAvailability && (availability ? jsxRuntime.jsx("div", {
         className: "llm__product-available",
         children: label('llm.availability', {
           availability: availability
@@ -4975,7 +4981,6 @@ const ProductGroup = props => {
         sm: 6,
         md: 4,
         lg: 3,
-        xl: 2,
         children: jsxRuntime.jsx(Product, Object.assign({}, item))
       }, i))
     })