@kiva/kv-components 7.2.2 → 7.2.4

package/dist/vue/KvImpactVerticalSelector.js

@@ -1,11 +1,11 @@
-import { ref as E, onMounted as N, computed as y, resolveComponent as x, openBlock as r, createElementBlock as d, createElementVNode as o, Fragment as B, renderList as K, createBlock as I, withCtx as V, createCommentVNode as L, toDisplayString as S } from "vue";
-import W from "./KvCardFrame.js";
-import A from "./KvContentfulImg.js";
-import D from "../_virtual/_plugin-vue_export-helper.js";
-const F = {
+import { ref as M, onMounted as V, computed as o, resolveComponent as N, openBlock as r, createElementBlock as l, createElementVNode as a, Fragment as W, renderList as z, createBlock as K, withCtx as D, normalizeClass as d, createCommentVNode as f, toDisplayString as C } from "vue";
+import F from "./KvCardFrame.js";
+import j from "./KvContentfulImg.js";
+import q from "../_virtual/_plugin-vue_export-helper.js";
+const G = {
   components: {
-    KvCardFrame: W,
-    KvContentfulImg: A
+    KvCardFrame: F,
+    KvContentfulImg: j
   },
   props: {
     // Expects an array of categories from our API
@@ -26,84 +26,111 @@ const F = {
     preSelectedCategory: {
       type: String,
       default: null
+    },
+    // Use compact horizontal layout on tablet and up (keeps image to the left)
+    useCompactCard: {
+      type: Boolean,
+      default: !1
+    },
+    // Array of category ids that the user has already selected
+    existingCategories: {
+      type: Array,
+      default: () => []
+    },
+    // Message to show for categories that are in the existingCategories list
+    existingCategoryMessage: {
+      type: String,
+      default: "Already selected"
     }
   },
   emits: ["category-selected"],
-  setup(l, { emit: u }) {
-    const s = E(null), n = (e) => {
-      s.value = e, u("category-selected", e);
+  setup(s, { emit: g }) {
+    const i = M(null), n = (e) => {
+      i.value = e, g("category-selected", e);
     };
-    N(() => {
-      l.preSelectedCategory && n(l.preSelectedCategory);
+    V(() => {
+      s.preSelectedCategory && n(s.preSelectedCategory);
     });
-    const f = (e) => {
-      var i, t, c, _, h, g, C, p, k;
+    const _ = (e) => {
+      var k, p, b, v, y, I, S, E, L;
       if (e.contentfulEntry) {
-        const a = (_ = (c = (t = (i = e == null ? void 0 : e.contentfulEntry) == null ? void 0 : i.entry) == null ? void 0 : t.fields) == null ? void 0 : c.content) == null ? void 0 : _.find(
-          (m) => {
-            var v, b;
-            return (b = (v = m == null ? void 0 : m.fields) == null ? void 0 : v.key) == null ? void 0 : b.includes("category-icon");
+        const u = (v = (b = (p = (k = e == null ? void 0 : e.contentfulEntry) == null ? void 0 : k.entry) == null ? void 0 : p.fields) == null ? void 0 : b.content) == null ? void 0 : v.find(
+          (w) => {
+            var A, B;
+            return (B = (A = w == null ? void 0 : w.fields) == null ? void 0 : A.key) == null ? void 0 : B.includes("category-icon");
           }
         );
-        return ((k = (p = (C = (g = (h = a == null ? void 0 : a.fields) == null ? void 0 : h.contentLight) == null ? void 0 : g[0]) == null ? void 0 : C.fields) == null ? void 0 : p.file) == null ? void 0 : k.url) ?? null;
+        return ((L = (E = (S = (I = (y = u == null ? void 0 : u.fields) == null ? void 0 : y.contentLight) == null ? void 0 : I[0]) == null ? void 0 : S.fields) == null ? void 0 : E.file) == null ? void 0 : L.url) ?? null;
       }
       return null;
-    }, w = y(() => !l.categoryList || l.categoryList.length === 0 ? [] : l.categoryList.filter((e) => !l.hiddenCategories.includes(e.id)).map((e) => ({
+    }, h = o(() => s.useCompactCard ? "tw-p-2 md:tw-p-3 tw-flex tw-flex-row tw-items-center tw-cursor-pointer" : "tw-p-2 tw-flex tw-flex-row md:tw-flex-col tw-items-center tw-cursor-pointer"), c = o(() => s.useCompactCard ? "tw-shrink-0 tw-mr-2" : "tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-2"), m = o(() => s.useCompactCard ? "" : "md:tw-text-center"), t = (e) => s.existingCategories.includes(e), x = o(() => !s.categoryList || s.categoryList.length === 0 ? [] : s.categoryList.filter((e) => !s.hiddenCategories.includes(e.id)).map((e) => ({
       id: e.id,
       name: e.name,
       description: e.description,
       customImage: e.customImage || null,
-      contentfulImage: f(e) || null
+      contentfulImage: _(e) || null
     })));
     return {
-      selectedCategory: s,
-      formattedCategories: w,
-      selectCategory: n
+      selectedCategory: i,
+      formattedCategories: x,
+      selectCategory: n,
+      cardContainerClasses: h,
+      imageClasses: c,
+      textContainerClasses: m,
+      isCategoryExisting: t
     };
   }
-}, M = { class: "tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3" }, j = { class: "tw-p-2 tw-flex tw-flex-row md:tw-flex-col tw-items-center tw-cursor-pointer" }, q = ["alt", "src", "width"], z = { class: "md:tw-text-center" }, G = { class: "tw-mb-0.5 tw-font-medium" }, H = { class: "tw-text-small" }, J = {
+}, H = { class: "tw-grid tw-grid-cols-1 md:tw-grid-cols-2 tw-gap-3" }, J = ["alt", "src", "width"], O = { class: "tw-mb-0.5 tw-font-medium" }, P = { class: "tw-text-small" }, Q = {
+  key: 0,
+  class: "tw-text-small tw-py-1 tw-px-2 tw-mt-1 tw-bg-brand-200 tw-rounded tw-inline-block"
+}, R = {
   key: 0,
   class: "tw-text-gray-500 tw-italic"
 };
-function O(l, u, s, n, f, w) {
-  const e = x("kv-contentful-img"), i = x("kv-card-frame");
-  return r(), d("div", null, [
-    o("div", M, [
-      (r(!0), d(B, null, K(n.formattedCategories, (t) => (r(), I(i, {
+function T(s, g, i, n, _, h) {
+  const c = N("kv-contentful-img"), m = N("kv-card-frame");
+  return r(), l("div", null, [
+    a("div", H, [
+      (r(!0), l(W, null, z(n.formattedCategories, (t) => (r(), K(m, {
         key: t.id,
         "bg-color-class": n.selectedCategory === t.id ? "tw-bg-secondary" : "tw-bg-white",
         "border-class": n.selectedCategory === t.id ? "tw-border-2 tw-border-action" : "tw-border-2 tw-border-transparent",
         class: "tw-transition-all tw-duration-200 hover:tw-shadow-lg",
-        onClick: (c) => n.selectCategory(t.id)
+        onClick: (x) => n.selectCategory(t.id)
       }, {
-        default: V(() => [
-          o("div", j, [
-            t != null && t.contentfulImage ? (r(), I(e, {
+        default: D(() => [
+          a("div", {
+            class: d(n.cardContainerClasses)
+          }, [
+            t != null && t.contentfulImage ? (r(), K(c, {
               key: 0,
-              class: "tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-2",
+              class: d(n.imageClasses),
               alt: `${t.name} image`,
               "contentful-src": t.contentfulImage,
-              width: s.imageWidth
-            }, null, 8, ["alt", "contentful-src", "width"])) : t != null && t.customImage ? (r(), d("img", {
+              width: i.imageWidth
+            }, null, 8, ["class", "alt", "contentful-src", "width"])) : t != null && t.customImage ? (r(), l("img", {
               key: 1,
-              class: "tw-shrink-0 tw-mr-2 md:tw-mr-0 md:tw-mb-2",
+              class: d(n.imageClasses),
               alt: `${t.name} image`,
               src: t.customImage,
-              width: s.imageWidth
-            }, null, 8, q)) : L("", !0),
-            o("div", z, [
-              o("p", G, S(t.name), 1),
-              o("p", H, S(t.description), 1)
-            ])
-          ])
+              width: i.imageWidth
+            }, null, 10, J)) : f("", !0),
+            a("div", {
+              class: d(n.textContainerClasses)
+            }, [
+              a("p", O, C(t.name), 1),
+              a("p", P, C(t.description), 1),
+              n.isCategoryExisting(t.id) ? (r(), l("p", Q, C(i.existingCategoryMessage), 1)) : f("", !0)
+            ], 2)
+          ], 2)
         ]),
         _: 2
       }, 1032, ["bg-color-class", "border-class", "onClick"]))), 128))
     ]),
-    n.formattedCategories.length === 0 ? (r(), d("p", J, " No categories available ")) : L("", !0)
+    n.formattedCategories.length === 0 ? (r(), l("p", R, " No categories available ")) : f("", !0)
   ]);
 }
-const U = /* @__PURE__ */ D(F, [["render", O]]);
+const $ = /* @__PURE__ */ q(G, [["render", T]]);
 export {
-  U as default
+  $ as default
 };

package/dist/vue/KvWwwHeader/KvHeaderMobileMenu.css

@@ -1 +1 @@
-.mobile-link[data-v-d1df98b6]{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mobile-link[data-v-d1df98b6]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}
+.mobile-link[data-v-8418c5da]{--tw-text-opacity: 1;color:rgba(var(--text-primary),var(--tw-text-opacity, 1));text-decoration-line:none}.mobile-link[data-v-8418c5da]:hover{--tw-text-opacity: 1;color:rgba(var(--text-action),var(--tw-text-opacity, 1));text-decoration-line:underline}

package/dist/vue/KvWwwHeader/KvHeaderMobileMenu.js

@@ -1,7 +1,7 @@
 import { mdiClose as f } from "@mdi/js";
 import g from "../KvAccordionItem.js";
 import C from "../KvMaterialIcon.js";
-import { resolveComponent as m, resolveDirective as A, openBlock as t, createElementBlock as l, withDirectives as i, createBlock as u, createCommentVNode as K, withCtx as p, createElementVNode as a, Fragment as N, renderList as T, withModifiers as n, toDisplayString as k, createTextVNode as r } from "vue";
+import { resolveComponent as m, resolveDirective as A, openBlock as t, createElementBlock as l, withDirectives as i, createBlock as u, createCommentVNode as K, withCtx as p, createElementVNode as a, Fragment as N, renderList as T, withModifiers as n, toDisplayString as k, createTextVNode as s } from "vue";
 import "./KvHeaderMobileMenu.css";
 import y from "../../_virtual/_plugin-vue_export-helper.js";
 const I = {
@@ -50,7 +50,7 @@ const I = {
         {
           title: "Buy a Kiva Card",
           description: "Give the gift of lending to others",
-          url: "/portfolio/kiva-card",
+          url: "/gifts/kiva-cards",
           trackEvent: "menu-buy-kiva-card"
         }
       ]
@@ -64,7 +64,7 @@ function B(v, o, b, P, d, $) {
       key: 0,
       icon: d.mdiClose,
       class: "tw-cursor-pointer",
-      onClick: o[0] || (o[0] = (s) => v.$emit("closing-menu"))
+      onClick: o[0] || (o[0] = (r) => v.$emit("closing-menu"))
     }, null, 8, ["icon"])), [
       [e, ["TopNav", "click-Hamburger-close"]]
     ]) : K("", !0),
@@ -78,17 +78,17 @@ function B(v, o, b, P, d, $) {
       ])),
       default: p(() => [
         a("div", M, [
-          (t(!0), l(N, null, T(d.menuItems, (s) => i((t(), l("a", {
-            key: s.title,
-            href: s.url,
+          (t(!0), l(N, null, T(d.menuItems, (r) => i((t(), l("a", {
+            key: r.title,
+            href: r.url,
             class: "mobile-link",
             onClick: o[1] || (o[1] = n(() => {
             }, ["stop"]))
           }, [
-            a("div", null, k(s.title), 1),
-            a("p", D, k(s.description), 1)
+            a("div", null, k(r.title), 1),
+            a("p", D, k(r.description), 1)
           ], 8, H)), [
-            [e, ["TopNav", `click-${s.trackEvent}`]]
+            [e, ["TopNav", `click-${r.trackEvent}`]]
           ])), 128))
         ])
       ]),
@@ -111,7 +111,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[2] || (o[2] = n(() => {
             }, ["stop"]))
           }, o[12] || (o[12] = [
-            r("About us")
+            s("About us")
           ]))), [
             [e, ["TopNav", "click-About-About us"]]
           ]),
@@ -121,7 +121,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[3] || (o[3] = n(() => {
             }, ["stop"]))
           }, o[13] || (o[13] = [
-            r("How Kiva works")
+            s("How Kiva works")
           ]))), [
             [e, ["TopNav", "click-About-How Kiva works"]]
           ]),
@@ -131,7 +131,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[4] || (o[4] = n(() => {
             }, ["stop"]))
           }, o[14] || (o[14] = [
-            r("Where Kiva works")
+            s("Where Kiva works")
           ]))), [
             [e, ["TopNav", "click-About-Where Kiva works"]]
           ]),
@@ -141,7 +141,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[5] || (o[5] = n(() => {
             }, ["stop"]))
           }, o[15] || (o[15] = [
-            r("Impact")
+            s("Impact")
           ]))), [
             [e, ["TopNav", "click-About-Impact"]]
           ]),
@@ -151,7 +151,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[6] || (o[6] = n(() => {
             }, ["stop"]))
           }, o[16] || (o[16] = [
-            r("Leadership")
+            s("Leadership")
           ]))), [
             [e, ["TopNav", "click-About-Leadership"]]
           ]),
@@ -161,7 +161,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[7] || (o[7] = n(() => {
             }, ["stop"]))
           }, o[17] || (o[17] = [
-            r("Finances")
+            s("Finances")
           ]))), [
             [e, ["TopNav", "click-About-Finances"]]
           ]),
@@ -171,7 +171,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[8] || (o[8] = n(() => {
             }, ["stop"]))
           }, o[18] || (o[18] = [
-            r("Press")
+            s("Press")
           ]))), [
             [e, ["TopNav", "click-About-Press"]]
           ]),
@@ -181,7 +181,7 @@ function B(v, o, b, P, d, $) {
             onClick: o[9] || (o[9] = n(() => {
             }, ["stop"]))
           }, o[19] || (o[19] = [
-            r("Due diligence")
+            s("Due diligence")
           ]))), [
             [e, ["TopNav", "click-About-Due diligence"]]
           ])
@@ -193,7 +193,7 @@ function B(v, o, b, P, d, $) {
     ])
   ]);
 }
-const q = /* @__PURE__ */ y(I, [["render", B], ["__scopeId", "data-v-d1df98b6"]]);
+const q = /* @__PURE__ */ y(I, [["render", B], ["__scopeId", "data-v-8418c5da"]]);
 export {
   q as default
 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kiva/kv-components",
-  "version": "7.2.2",
+  "version": "7.2.4",
   "type": "module",
   "publishConfig": {
     "access": "public"
@@ -114,5 +114,5 @@
     "embla-carousel-fade",
     "popper.js"
   ],
-  "gitHead": "a1f47f0b2511bbed3305b181a8e139e175657237"
+  "gitHead": "57ce77622d4fb48addabf3276df04ccb05de2438"
 }