@kiva/kv-components 3.49.1 → 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 +17 -0
  2. package/package.json +2 -2
  3. package/vue/KvVotingCard.vue +18 -48
  4. package/vue/stories/KvVotingCard.stories.js +11 -13
package/CHANGELOG.md CHANGED
@@ -3,6 +3,23 @@
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
+
6
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)
7
24
 
8
25
 
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kiva/kv-components",
3
- "version": "3.49.1",
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": "189e36f37bd09e01f11d65347e24feafbbba7324"
78
+ "gitHead": "7bedad99cec599d99830aeebedfc9d49f4f53649"
79
79
  }
package/vue/KvVotingCard.vue CHANGED
@@ -13,26 +13,18 @@
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
- />
16
+ <slot name="image"></slot>
25
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
@@ -70,10 +62,7 @@
70
62
 
71
63
  <script>
72
64
  import { mdiMapMarker } from '@mdi/js';
73
- import {
74
- computed,
75
- } from 'vue-demi';
76
- import KvBorrowerImage from './KvBorrowerImage.vue';
65
+ import { computed } from 'vue-demi';
77
66
  import KvProgressBar from './KvProgressBar.vue';
78
67
  import KvButton from './KvButton.vue';
79
68
  import KvMaterialIcon from './KvMaterialIcon.vue';
@@ -81,7 +70,6 @@ import KvMaterialIcon from './KvMaterialIcon.vue';
81
70
  export default {
82
71
  name: 'KvVotingCard',
83
72
  components: {
84
- KvBorrowerImage,
85
73
  KvProgressBar,
86
74
  KvButton,
87
75
  KvMaterialIcon,
@@ -99,26 +87,10 @@ export default {
99
87
  type: String,
100
88
  default: '',
101
89
  },
102
- aspectRatio: {
103
- type: Number,
104
- default: 1,
105
- },
106
- hash: {
107
- type: String,
108
- default: '',
109
- },
110
90
  images: {
111
91
  type: Array,
112
92
  default: () => [],
113
93
  },
114
- photoPath: {
115
- type: String,
116
- default: '',
117
- },
118
- defaultImage: {
119
- type: Object,
120
- default: () => ({ width: 300 }),
121
- },
122
94
  percentage: {
123
95
  type: Number,
124
96
  default: 0,
@@ -128,15 +100,13 @@ export default {
128
100
  default: true,
129
101
  },
130
102
  },
131
- emits: ['vote'],
132
103
  setup() {
133
- const mapMarkerIcon = computed(() => {
134
- return mdiMapMarker;
135
- });
104
+ const mapMarkerIcon = computed(() => mdiMapMarker);
136
105
  return {
137
106
  mapMarkerIcon,
138
107
  };
139
108
  },
109
+
140
110
  methods: {
141
111
  castVote() {
142
112
  this.$emit('vote', {
@@ -147,8 +117,8 @@ export default {
147
117
  };
148
118
  </script>
149
119
 
150
- <style scoped>
151
- .kv-voting-card {
152
- max-width: 300px;
153
- }
154
- </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
  };