@caseparts-org/caseblocks 0.0.121 → 0.0.122

package/dist/assets/Product.css

@@ -1 +1 @@
-._productCard_15dy7_1{box-sizing:border-box;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;display:flex;width:232px;height:296px;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._productCard_15dy7_1>img{width:96px;height:96px;object-fit:contain;flex-shrink:0;margin:0 auto}._productCard_15dy7_1 ._productInformation_15dy7_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto}._productCard_15dy7_1 ._purchaseInformation_15dy7_29{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._productCard_15dy7_1 ._addToCart_15dy7_37,._productCard_15dy7_1 ._addToCartButton_15dy7_40{width:100%}._productInformation_15dy7_22>a{font-weight:var(--font-weight-semibold)}._partNumber_15dy7_48{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._partNumberLabel_15dy7_55{color:var(--text-text-quaternary)}._productTile_15dy7_59{box-sizing:border-box;width:100%;max-width:1072px;display:flex;flex-direction:row;align-items:flex-start;border:1px solid var(--border-border-primary, #DFDFDF);background:var(--surface-surface-primary, #FFF);box-shadow:2px 4px 12px #00000026;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);gap:var(--spacing-spacing-1xs)}._productTile_15dy7_59>img{width:108px;height:108px;object-fit:contain}._productTile_15dy7_59 ._topRow_15dy7_80{display:grid;grid-template-columns:1fr auto;width:100%}._productTile_15dy7_59 ._topRow_15dy7_80 button{background-color:transparent;padding:0;margin:0;outline:none;border:none;height:min-content;width:min-content}._productTile_15dy7_59 ._topRow_15dy7_80 path{fill:var(--icons-icon-search)}._productTile_15dy7_59 ._topRow_15dy7_80 svg{padding:0}._productTile_15dy7_59 ._productInformation_15dy7_22{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._productTile_15dy7_59 ._productData_15dy7_111{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--spacing-spacing-2xs)}._productTile_15dy7_59 ._purchase_15dy7_29{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%}@media (max-width: 480px){._productTile_15dy7_59 ._purchase_15dy7_29{flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-3xs)}}._productTile_15dy7_59 ._purchaseInformation_15dy7_29{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}@media (max-width: 480px){._productTile_15dy7_59 ._purchaseInformation_15dy7_29{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:0px}}._productTile_15dy7_59 ._attributeContainer_15dy7_148{margin:0;padding:0;padding-top:var(--spacing-spacing-1xs);border-top:1px solid var(--border-border-primary);width:100%;list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:var(--spacing-spacing-lg);row-gap:var(--spacing-spacing-3xs)}@media (max-width: 640px){._productTile_15dy7_59 ._attributeContainer_15dy7_148{display:none}}._productTile_15dy7_59 ._attributeContainer_15dy7_148 li{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._productTile_15dy7_59 ._addToCart_15dy7_37{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-md)}@media (max-width: 480px){._productTile_15dy7_59 ._addToCart_15dy7_37{gap:var(--spacing-spacing-2xs);width:100%}}._productTile_15dy7_59 ._addToCartButton_15dy7_40{width:96px;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){._productTile_15dy7_59 ._addToCartButton_15dy7_40{width:100%}}
+._productCard_179ie_1{box-sizing:border-box;background:var(--surface-surface-primary, #FFF);display:flex;width:232px;height:296px;padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}._productCard_179ie_1>img{width:96px;height:96px;object-fit:contain;flex-shrink:0;margin:0 auto}._productCard_179ie_1 ._productInformation_179ie_20{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin-top:auto}._productCard_179ie_1 ._purchaseInformation_179ie_27{display:flex;flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%}._productCard_179ie_1 ._addToCart_179ie_35,._productCard_179ie_1 ._addToCartButton_179ie_38{width:100%}._productInformation_179ie_20>a{font-weight:var(--font-weight-semibold)}._partNumber_179ie_46{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._partNumberLabel_179ie_53{color:var(--text-text-quaternary)}._productTile_179ie_57{box-sizing:border-box;width:100%;max-width:1072px;display:flex;flex-direction:row;align-items:flex-start;background:var(--surface-surface-primary, #FFF);padding:var(--spacing-spacing-default, 16px) var(--spacing-spacing-sm, 20px);gap:var(--spacing-spacing-1xs)}._productTile_179ie_57>img{width:108px;height:108px;object-fit:contain}._productTile_179ie_57 ._topRow_179ie_76{display:grid;grid-template-columns:1fr auto;width:100%}._productTile_179ie_57 ._topRow_179ie_76 button{background-color:transparent;padding:0;margin:0;outline:none;border:none;height:min-content;width:min-content}._productTile_179ie_57 ._topRow_179ie_76 path{fill:var(--icons-icon-search)}._productTile_179ie_57 ._topRow_179ie_76 svg{padding:0}._productTile_179ie_57 ._productInformation_179ie_20{display:flex;flex-direction:column;align-items:flex-start;gap:2px}._productTile_179ie_57 ._productData_179ie_107{display:flex;flex-direction:column;align-items:flex-start;width:100%;gap:var(--spacing-spacing-2xs)}._productTile_179ie_57 ._purchase_179ie_27{display:flex;flex-direction:row;align-items:flex-end;justify-content:space-between;width:100%}@media (max-width: 480px){._productTile_179ie_57 ._purchase_179ie_27{flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-3xs)}}._productTile_179ie_57 ._purchaseInformation_179ie_27{display:flex;flex-direction:column;align-items:flex-start;gap:var(--spacing-spacing-2xs)}@media (max-width: 480px){._productTile_179ie_57 ._purchaseInformation_179ie_27{flex-direction:row;align-items:flex-start;justify-content:space-between;width:100%;gap:0px}}._productTile_179ie_57 ._attributeContainer_179ie_144{margin:0;padding:0;padding-top:var(--spacing-spacing-1xs);border-top:1px solid var(--border-border-primary);width:100%;list-style:none;display:flex;flex-direction:row;align-items:center;justify-content:flex-start;flex-wrap:wrap;column-gap:var(--spacing-spacing-lg);row-gap:var(--spacing-spacing-3xs)}@media (max-width: 640px){._productTile_179ie_57 ._attributeContainer_179ie_144{display:none}}._productTile_179ie_57 ._attributeContainer_179ie_144 li{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-3xs)}._productTile_179ie_57 ._addToCart_179ie_35{display:flex;flex-direction:row;align-items:center;gap:var(--spacing-spacing-md)}@media (max-width: 480px){._productTile_179ie_57 ._addToCart_179ie_35{gap:var(--spacing-spacing-2xs);width:100%}}._productTile_179ie_57 ._addToCartButton_179ie_38{width:96px;font-size:var(--font-size-md);font-weight:var(--font-weight-semibold)}@media (max-width: 640px){._productTile_179ie_57 ._addToCartButton_179ie_38{width:100%}}._elevated_179ie_192{border:1px solid var(--border-border-primary, #DFDFDF);box-shadow:2px 4px 12px #00000026}._noImage_179ie_198 ._productInformation_179ie_20{margin-top:0}

package/dist/organisms/Product/Product.d.ts

@@ -9,7 +9,7 @@ export interface ProductProps extends AvailabilityProps {
     partNumber: string;
     priceLabel: string;
     price: string;
-    imgSrc: string;
+    imgSrc?: string;
     attributes?: {
         label: string;
         value: string;
@@ -17,5 +17,6 @@ export interface ProductProps extends AvailabilityProps {
     className?: string;
     onAddToCart: (_itemKey: number, _quantity: number) => void;
     onClose?: (_itemKey: number) => void;
+    flat?: boolean;
 }
-export declare function Product({ productView, itemKey, partNumber, productDescription, availDescription, availId, contactHref, contactLinkBehavior, productHref, priceLabel, price, imgSrc, attributes, className, onAddToCart, onClose, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;
+export declare function Product({ productView, itemKey, partNumber, productDescription, availDescription, availId, contactHref, contactLinkBehavior, productHref, priceLabel, price, imgSrc, attributes, className, onAddToCart, onClose, flat, ...otherProps }: ProductProps): import("react/jsx-runtime").JSX.Element;

package/dist/organisms/Product/Product.js

@@ -1,131 +1,134 @@
 import { jsxs as a, jsx as t } from "react/jsx-runtime";
-import { Image as T } from "../../atoms/Image/Image.js";
-import { Link as g } from "../../atoms/Link/Link.js";
+import { Image as v } from "../../atoms/Image/Image.js";
+import { Link as I } from "../../atoms/Link/Link.js";
 import { Text as o } from "../../atoms/Text/Text.js";
-import { Availability as y } from "../../molecules/Availability/Availability.js";
-import { Pricing as w } from "../../molecules/Pricing/Pricing.js";
-import { AddToCart as v } from "../../molecules/AddToCart/AddToCart.js";
-import { Icon as B } from "../../atoms/Icon/Icon.js";
-import { c as x } from "../../clsx-OuTLNxxd.js";
-import '../../assets/Product.css';const L = "_productCard_15dy7_1", P = "_productInformation_15dy7_22", R = "_purchaseInformation_15dy7_29", $ = "_addToCart_15dy7_37", A = "_addToCartButton_15dy7_40", D = "_partNumber_15dy7_48", j = "_partNumberLabel_15dy7_55", k = "_productTile_15dy7_59", q = "_topRow_15dy7_80", E = "_productData_15dy7_111", F = "_purchase_15dy7_29", G = "_attributeContainer_15dy7_148", r = {
-  productCard: L,
-  productInformation: P,
-  purchaseInformation: R,
-  addToCart: $,
-  addToCartButton: A,
-  partNumber: D,
-  partNumberLabel: j,
-  productTile: k,
-  topRow: q,
-  productData: E,
-  purchase: F,
-  attributeContainer: G
+import { Availability as w } from "../../molecules/Availability/Availability.js";
+import { Pricing as x } from "../../molecules/Pricing/Pricing.js";
+import { AddToCart as z } from "../../molecules/AddToCart/AddToCart.js";
+import { Icon as R } from "../../atoms/Icon/Icon.js";
+import { c as B } from "../../clsx-OuTLNxxd.js";
+import '../../assets/Product.css';const $ = "_productCard_179ie_1", A = "_productInformation_179ie_20", D = "_purchaseInformation_179ie_27", P = "_addToCart_179ie_35", j = "_addToCartButton_179ie_38", k = "_partNumber_179ie_46", y = "_partNumberLabel_179ie_53", q = "_productTile_179ie_57", E = "_topRow_179ie_76", F = "_productData_179ie_107", G = "_purchase_179ie_27", J = "_attributeContainer_179ie_144", M = "_elevated_179ie_192", O = "_noImage_179ie_198", e = {
+  productCard: $,
+  productInformation: A,
+  purchaseInformation: D,
+  addToCart: P,
+  addToCartButton: j,
+  partNumber: k,
+  partNumberLabel: y,
+  productTile: q,
+  topRow: E,
+  productData: F,
+  purchase: G,
+  attributeContainer: J,
+  elevated: M,
+  noImage: O
 };
-function Z({
-  productView: I,
-  itemKey: s,
-  partNumber: d,
-  productDescription: l,
-  availDescription: m,
-  availId: e,
-  contactHref: u,
-  contactLinkBehavior: h,
-  productHref: p,
-  priceLabel: _,
-  price: i,
-  imgSrc: N,
-  attributes: c,
+function S({
+  productView: L,
+  itemKey: c,
+  partNumber: i,
+  productDescription: m,
+  availDescription: u,
+  availId: d,
+  contactHref: h,
+  contactLinkBehavior: p,
+  productHref: _,
+  priceLabel: N,
+  price: n,
+  imgSrc: r,
+  attributes: l,
   className: b,
   onAddToCart: f,
   onClose: C,
-  ...z
+  flat: T,
+  ...g
 }) {
-  return I === "Card" ? /* @__PURE__ */ a("div", { className: x(r.productCard, b), children: [
-    /* @__PURE__ */ t(
-      T,
+  return L === "Card" ? /* @__PURE__ */ a("div", { className: B(e.productCard, b, !T && e.elevated, !r && e.noImage), ...g, children: [
+    r && /* @__PURE__ */ t(
+      v,
       {
-        src: N,
-        alt: `${d} product image`,
+        src: r,
+        alt: `${i} product image`,
         height: 96,
         width: 96
       }
     ),
-    /* @__PURE__ */ a("div", { className: r.productInformation, children: [
-      /* @__PURE__ */ t(g, { href: p, children: l }),
-      /* @__PURE__ */ a("div", { className: r.partNumber, children: [
-        /* @__PURE__ */ t(o, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
-        /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: d })
+    /* @__PURE__ */ a("div", { className: e.productInformation, children: [
+      /* @__PURE__ */ t(I, { href: _, children: m }),
+      /* @__PURE__ */ a("div", { className: e.partNumber, children: [
+        /* @__PURE__ */ t(o, { size: "sm", className: e.partNumberLabel, children: "Part #" }),
+        /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: i })
       ] })
     ] }),
-    /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-      e && /* @__PURE__ */ t(
-        y,
+    /* @__PURE__ */ a("div", { className: e.purchaseInformation, children: [
+      d && /* @__PURE__ */ t(
+        w,
         {
-          availId: e,
-          availDescription: m,
-          contactHref: u,
-          contactLinkBehavior: h
+          availId: d,
+          availDescription: u,
+          contactHref: h,
+          contactLinkBehavior: p
         }
       ),
-      i && /* @__PURE__ */ t(w, { pricingLabel: _, price: i })
+      n && /* @__PURE__ */ t(x, { pricingLabel: N, price: n })
     ] }),
     /* @__PURE__ */ t(
-      v,
+      z,
       {
-        itemKey: s,
+        itemKey: c,
         onAdd: f,
-        className: r.addToCart,
-        addButtonClassName: r.addToCartButton,
+        className: e.addToCart,
+        addButtonClassName: e.addToCartButton,
         size: "md",
         buttonDoneText: ""
       }
     )
-  ] }) : /* @__PURE__ */ a("div", { className: x(r.productTile, b), ...z, children: [
-    /* @__PURE__ */ t(
-      T,
+  ] }) : /* @__PURE__ */ a("div", { className: B(e.productTile, b, !T && e.elevated, !r && e.noImage), ...g, children: [
+    r && /* @__PURE__ */ t(
+      v,
       {
-        src: N,
-        alt: `${d} product image`,
+        src: r,
+        alt: `${i} product image`,
         height: 108,
         width: 108
       }
     ),
-    /* @__PURE__ */ a("div", { className: r.productData, children: [
-      /* @__PURE__ */ a("div", { className: r.topRow, children: [
-        /* @__PURE__ */ a("div", { className: r.productInformation, children: [
-          /* @__PURE__ */ t(g, { href: p, children: l }),
-          /* @__PURE__ */ a("div", { className: r.partNumber, children: [
-            /* @__PURE__ */ t(o, { size: "sm", className: r.partNumberLabel, children: "Part #" }),
-            /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: d })
+    /* @__PURE__ */ a("div", { className: e.productData, children: [
+      /* @__PURE__ */ a("div", { className: e.topRow, children: [
+        /* @__PURE__ */ a("div", { className: e.productInformation, children: [
+          /* @__PURE__ */ t(I, { href: _, children: m }),
+          /* @__PURE__ */ a("div", { className: e.partNumber, children: [
+            /* @__PURE__ */ t(o, { size: "sm", className: e.partNumberLabel, children: "Part #" }),
+            /* @__PURE__ */ t(o, { size: "sm", weight: "semibold", children: i })
           ] })
         ] }),
-        C && /* @__PURE__ */ t("button", { onClick: () => C(s), children: /* @__PURE__ */ t(B, { size: "sm", iconKey: "fa-light fa-xmark" }) })
+        C && /* @__PURE__ */ t("button", { onClick: () => C(c), children: /* @__PURE__ */ t(R, { size: "sm", iconKey: "fa-light fa-xmark" }) })
       ] }),
-      /* @__PURE__ */ a("div", { className: r.purchase, children: [
-        /* @__PURE__ */ a("div", { className: r.purchaseInformation, children: [
-          e && /* @__PURE__ */ t(
-            y,
+      /* @__PURE__ */ a("div", { className: e.purchase, children: [
+        /* @__PURE__ */ a("div", { className: e.purchaseInformation, children: [
+          d && /* @__PURE__ */ t(
+            w,
             {
-              availId: e,
-              availDescription: m,
-              contactHref: u,
-              contactLinkBehavior: h
+              availId: d,
+              availDescription: u,
+              contactHref: h,
+              contactLinkBehavior: p
             }
           ),
-          i && /* @__PURE__ */ t(w, { pricingLabel: _, price: i })
+          n && /* @__PURE__ */ t(x, { pricingLabel: N, price: n })
         ] }),
-        /* @__PURE__ */ t(v, { itemKey: s, onAdd: f, className: r.addToCart, addButtonClassName: r.addToCartButton })
+        /* @__PURE__ */ t(z, { itemKey: c, onAdd: f, className: e.addToCart, addButtonClassName: e.addToCartButton })
       ] }),
-      c && c.length > 0 && /* @__PURE__ */ t("ul", { className: r.attributeContainer, children: c.map((n) => /* @__PURE__ */ a("li", { children: [
+      l && l.length > 0 && /* @__PURE__ */ t("ul", { className: e.attributeContainer, children: l.map((s) => /* @__PURE__ */ a("li", { children: [
         /* @__PURE__ */ a(o, { size: "xs", weight: "light", children: [
-          n.label,
+          s.label,
           ":"
         ] }),
-        /* @__PURE__ */ t(o, { size: "xs", weight: "semibold", children: n.value })
-      ] }, `${n.label}.${n.value}`)) })
+        /* @__PURE__ */ t(o, { size: "xs", weight: "semibold", children: s.value })
+      ] }, `${s.label}.${s.value}`)) })
     ] })
   ] });
 }
 export {
-  Z as Product
+  S as Product
 };

package/dist/organisms/Product/Product.stories.d.ts

@@ -65,6 +65,10 @@ declare const meta: {
             action: string;
             description: string;
         };
+        flat: {
+            control: "boolean";
+            description: string;
+        };
     };
     args: ProductProps;
     tags: string[];
@@ -77,3 +81,6 @@ export declare const Unavailable: Story;
 export declare const ContactForAvailability: Story;
 export declare const TileView: Story;
 export declare const DifferentPriceLabel: Story;
+export declare const NoImageCard: Story;
+export declare const FlatTile: Story;
+export declare const NoImageFlatCard: Story;

package/dist/organisms/Product/Product.stories.js

@@ -46,7 +46,8 @@ const o = [
     price: { control: "text" },
     imgSrc: { control: "text" },
     itemKey: { control: "number" },
-    onAddToCart: { action: "addToCart", description: "(itemKey, quantity)" }
+    onAddToCart: { action: "addToCart", description: "(itemKey, quantity)" },
+    flat: { control: "boolean", description: "Removes border and shadow" }
   },
   args: {
     productView: "Card",
@@ -69,7 +70,8 @@ const o = [
     },
     onClose: (t) => {
       alert(`On close clicked ${t}`);
-    }
+    },
+    flat: !1
   },
   tags: ["autodocs"]
 }, l = {}, c = {
@@ -90,23 +92,42 @@ const o = [
     contactLinkBehavior: "new-tab",
     contactHref: "https://dev.caseparts.com/account/contactus"
   }
-}, p = {
+}, d = {
   args: {
     productView: "Tile",
     productDescription: "Tile View Product"
   }
-}, d = {
+}, p = {
   args: {
     priceLabel: "Member",
     price: "$118.49"
   }
+}, u = {
+  args: {
+    productView: "Card",
+    imgSrc: void 0
+  }
+}, v = {
+  args: {
+    productView: "Tile",
+    flat: !0
+  }
+}, b = {
+  args: {
+    productView: "Card",
+    imgSrc: void 0,
+    flat: !0
+  }
 };
 export {
   s as ContactForAvailability,
   l as Default,
-  d as DifferentPriceLabel,
+  p as DifferentPriceLabel,
+  v as FlatTile,
   c as LimitedStock,
-  p as TileView,
+  u as NoImageCard,
+  b as NoImageFlatCard,
+  d as TileView,
   n as Unavailable,
   r as default
 };

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@caseparts-org/caseblocks",
   "private": false,
-  "version": "0.0.121",
+  "version": "0.0.122",
   "type": "module",
   "module": "dist/main.js",
   "types": "dist/main.d.ts",