@kiva/kv-components 3.49.0 → 3.50.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/CHANGELOG.md +29 -0
  2. package/package.json +2 -2
  3. package/vue/KvVotingCard.vue +25 -53
  4. package/vue/stories/KvVotingCard.stories.js +11 -13
package/CHANGELOG.md CHANGED
@@ -3,6 +3,35 @@
3
3
  All notable changes to this project will be documented in this file.
4
4
  See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
5
5
 
6
+ # [3.50.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.49.1...@kiva/kv-components@3.50.0) (2024-01-19)
7
+
8
+
9
+ ### Bug Fixes
10
+
11
+ * change component to take in a slot ([a3b733c](https://github.com/kiva/kv-ui-elements/commit/a3b733c644c7a431fb592e1b159cd551bd5e0f3c))
12
+ * restore missing class ([6781e31](https://github.com/kiva/kv-ui-elements/commit/6781e31170c729cf484a0aff11ca544f8cca7aec))
13
+
14
+
15
+ ### Features
16
+
17
+ * make the voting cards capable of using borrower image or direct url as img src ([cedc03c](https://github.com/kiva/kv-ui-elements/commit/cedc03ce887815ef133e29e61a9770b633493d8f))
18
+
19
+
20
+
21
+
22
+
23
+ ## [3.49.1](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.49.0...@kiva/kv-components@3.49.1) (2024-01-17)
24
+
25
+
26
+ ### Bug Fixes
27
+
28
+ * correcting mistake with wrong function call ([904d39d](https://github.com/kiva/kv-ui-elements/commit/904d39df4afa9d470fc91a96d7e76fe782898448))
29
+ * editing classes for country / name tag ([aaac1c5](https://github.com/kiva/kv-ui-elements/commit/aaac1c561a24a192031977c7ea5a365789228740))
30
+
31
+
32
+
33
+
34
+
6
35
  # [3.49.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.48.3...@kiva/kv-components@3.49.0) (2024-01-16)
7
36
 
8
37
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "3.49.0",
3
+ "version": "3.50.0",
4
4
  "type": "module",
5
5
  "publishConfig": {
6
6
  "access": "public"
@@ -75,5 +75,5 @@
75
75
  "optional": true
76
76
  }
77
77
  },
78
- "gitHead": "efc7a48388a2ed44b08b55c596e5fd261b9e8a2f"
78
+ "gitHead": "7bedad99cec599d99830aeebedfc9d49f4f53649"
79
79
  }
package/vue/KvVotingCard.vue CHANGED
@@ -13,34 +13,28 @@
13
13
  tw-max-w-300"
14
14
  >
15
15
  <div class="tw-relative tw-flex tw-w-full tw-bg-black tw-rounded tw-mb-1">
16
- <kv-borrower-image
17
- class="tw-rounded"
18
- :alt="`Photo of ${borrowerName}`"
19
- :aspect-ratio="aspectRatio"
20
- :default-image="defaultImage"
21
- :hash="hash"
22
- :images="images"
23
- :photo-path="photoPath"
24
- />
25
- <p
16
+ <slot name="image"></slot>
17
+ <div
26
18
  class="
27
- tw-absolute
28
- tw-bottom-1
29
- tw-left-1
30
- tw-text-primary
31
- tw-bg-white
32
- tw-rounded
33
- tw-text-h4
34
- tw-inline-flex
35
- tw-items-center"
19
+ tw-absolute
20
+ tw-bottom-1
21
+ tw-left-1
22
+ tw-text-primary
23
+ tw-bg-white
24
+ tw-rounded
25
+ tw-text-h4
26
+ tw-inline-flex
27
+ tw-items-center"
36
28
  style="padding: 2px 6px; text-transform: capitalize;"
37
29
  >
38
30
  <kv-material-icon
39
- class="tw-h-2 tw-w-2"
31
+ class="tw-h-2 tw-w-2 tw-truncate"
40
32
  :icon="mapMarkerIcon"
41
33
  />
42
- {{ borrowerName }}, {{ country }}
43
- </p>
34
+ <div>
35
+ {{ borrowerName }}, {{ country }}
36
+ </div>
37
+ </div>
44
38
  </div>
45
39
 
46
40
  <h3 class="tw-font-medium">
@@ -59,7 +53,7 @@
59
53
  <kv-button
60
54
  v-if="showVoteButton"
61
55
  class="tw-w-full"
62
- @click="showVoteButton"
56
+ @click="castVote"
63
57
  >
64
58
  Vote
65
59
  </kv-button>
@@ -68,10 +62,7 @@
68
62
 
69
63
  <script>
70
64
  import { mdiMapMarker } from '@mdi/js';
71
- import {
72
- computed,
73
- } from 'vue-demi';
74
- import KvBorrowerImage from './KvBorrowerImage.vue';
65
+ import { computed } from 'vue-demi';
75
66
  import KvProgressBar from './KvProgressBar.vue';
76
67
  import KvButton from './KvButton.vue';
77
68
  import KvMaterialIcon from './KvMaterialIcon.vue';
@@ -79,7 +70,6 @@ import KvMaterialIcon from './KvMaterialIcon.vue';
79
70
  export default {
80
71
  name: 'KvVotingCard',
81
72
  components: {
82
- KvBorrowerImage,
83
73
  KvProgressBar,
84
74
  KvButton,
85
75
  KvMaterialIcon,
@@ -97,26 +87,10 @@ export default {
97
87
  type: String,
98
88
  default: '',
99
89
  },
100
- aspectRatio: {
101
- type: Number,
102
- default: 1,
103
- },
104
- hash: {
105
- type: String,
106
- default: '',
107
- },
108
90
  images: {
109
91
  type: Array,
110
92
  default: () => [],
111
93
  },
112
- photoPath: {
113
- type: String,
114
- default: '',
115
- },
116
- defaultImage: {
117
- type: Object,
118
- default: () => ({ width: 300 }),
119
- },
120
94
  percentage: {
121
95
  type: Number,
122
96
  default: 0,
@@ -126,15 +100,13 @@ export default {
126
100
  default: true,
127
101
  },
128
102
  },
129
- emits: ['vote'],
130
103
  setup() {
131
- const mapMarkerIcon = computed(() => {
132
- return mdiMapMarker;
133
- });
104
+ const mapMarkerIcon = computed(() => mdiMapMarker);
134
105
  return {
135
106
  mapMarkerIcon,
136
107
  };
137
108
  },
109
+
138
110
  methods: {
139
111
  castVote() {
140
112
  this.$emit('vote', {
@@ -145,8 +117,8 @@ export default {
145
117
  };
146
118
  </script>
147
119
 
148
- <style scoped>
149
- .kv-voting-card {
150
- max-width: 300px;
151
- }
152
- </style>
120
+ <style scoped>
121
+ .kv-voting-card {
122
+ max-width: 300px;
123
+ }
124
+ </style>
package/vue/stories/KvVotingCard.stories.js CHANGED
@@ -10,7 +10,17 @@ const Template = (args) => ({
10
10
  setup() {
11
11
  return { args };
12
12
  },
13
- template: '<kv-voting-card v-bind="args" />',
13
+ template: `
14
+ <kv-voting-card v-bind="args">
15
+ <template #image>
16
+ <img
17
+ class="tw-rounded"
18
+ src="https://www-kiva-org.freetls.fastly.net/img/w600h450/9673d0722a7675b9b8d11f90849d9b44.jpg"
19
+ alt="Default image"
20
+ />
21
+ </template>
22
+ </kv-voting-card>
23
+ `,
14
24
  });
15
25
 
16
26
  export const Default = Template.bind({});
@@ -18,18 +28,6 @@ Default.args = {
18
28
  borrowerName: 'Jacqueline',
19
29
  country: 'Rwanda',
20
30
  category: 'Women-owned retail businesses',
21
- aspectRatio: 0.75,
22
- hash: '9673d0722a7675b9b8d11f90849d9b44',
23
- images: [
24
- { width: 336, viewSize: 1024 },
25
- { width: 336, viewSize: 768 },
26
- { width: 416, viewSize: 480 },
27
- { width: 374, viewSize: 414 },
28
- { width: 335, viewSize: 375 },
29
- { width: 300 },
30
- ],
31
- photoPath: 'https://www-kiva-org.freetls.fastly.net/img/',
32
- defaultImage: { width: 300 },
33
31
  percentage: 45,
34
32
  showVoteButton: true,
35
33
  };