@kiva/kv-components 3.109.4 → 4.0.1

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 (77) hide show
  1. package/CHANGELOG.md +40 -0
  2. package/babel.config.cjs +12 -0
  3. package/dist/components/.storybook/main.js +6 -7
  4. package/dist/components/.storybook/preview.js +9 -17
  5. package/dist/components/KvIntroductionLoanCard.vue +8 -6
  6. package/dist/components/KvSideSheet.vue +2 -2
  7. package/dist/components/stories/KvActivityRow.stories.js +4 -2
  8. package/dist/components/stories/KvBorrowerImage.stories.js +3 -9
  9. package/dist/components/stories/KvButton.stories.js +17 -19
  10. package/dist/components/stories/KvCartModal.stories.js +2 -5
  11. package/dist/components/stories/KvClassicLoanCard.stories.js +3 -25
  12. package/dist/components/stories/KvContentfulImg.stories.js +28 -51
  13. package/dist/components/stories/KvCountdownTimer.stories.js +3 -2
  14. package/dist/components/stories/KvFlag.stories.js +5 -3
  15. package/dist/components/stories/KvIntroductionLoanCard.stories.js +5 -9
  16. package/dist/components/stories/KvLendCta.stories.js +3 -14
  17. package/dist/components/stories/KvLightbox.stories.js +23 -19
  18. package/dist/components/stories/KvLineGraph.stories.js +3 -2
  19. package/dist/components/stories/KvLoadingSpinner.stories.js +10 -12
  20. package/dist/components/stories/KvLoanActivities.stories.js +3 -4
  21. package/dist/components/stories/KvLoanBookmark.stories.js +3 -2
  22. package/dist/components/stories/KvLoanCallouts.stories.js +3 -2
  23. package/dist/components/stories/KvLoanProgressGroup.stories.js +5 -5
  24. package/dist/components/stories/KvLoanTag.stories.js +3 -2
  25. package/dist/components/stories/KvLoanUse.stories.js +3 -9
  26. package/dist/components/stories/KvMap.stories.js +3 -16
  27. package/dist/components/stories/KvMaterialIcon.stories.js +12 -6
  28. package/dist/components/stories/KvPagination.stories.js +3 -7
  29. package/dist/components/stories/KvPieChart.stories.js +3 -3
  30. package/dist/components/stories/KvProgressBar.stories.js +3 -8
  31. package/dist/components/stories/KvSideSheet.stories.js +2 -1
  32. package/dist/components/stories/KvTextLink.stories.js +5 -9
  33. package/dist/components/stories/KvThemeProvider.stories.js +6 -7
  34. package/dist/components/stories/KvToast.stories.js +10 -16
  35. package/dist/components/stories/KvTreeMapChart.stories.js +3 -3
  36. package/dist/components/stories/KvWideLoanCard.stories.js +3 -17
  37. package/dist/components/stories/StyleguidePrimitives.stories.js +104 -105
  38. package/jest.config.cjs +47 -0
  39. package/package.json +24 -27
  40. package/tests/unit/specs/components/KvButton.spec.js +2 -2
  41. package/tests/unit/specs/components/KvTextLink.spec.js +2 -2
  42. package/tests/unit/utils/addVueRouter.js +9 -15
  43. package/vue/.storybook/main.js +6 -7
  44. package/vue/.storybook/preview.js +9 -17
  45. package/vue/KvIntroductionLoanCard.vue +8 -6
  46. package/vue/KvSideSheet.vue +2 -2
  47. package/vue/stories/KvActivityRow.stories.js +4 -2
  48. package/vue/stories/KvBorrowerImage.stories.js +3 -9
  49. package/vue/stories/KvButton.stories.js +17 -19
  50. package/vue/stories/KvCartModal.stories.js +2 -5
  51. package/vue/stories/KvClassicLoanCard.stories.js +3 -25
  52. package/vue/stories/KvContentfulImg.stories.js +28 -51
  53. package/vue/stories/KvCountdownTimer.stories.js +3 -2
  54. package/vue/stories/KvFlag.stories.js +5 -3
  55. package/vue/stories/KvIntroductionLoanCard.stories.js +5 -9
  56. package/vue/stories/KvLendCta.stories.js +3 -14
  57. package/vue/stories/KvLightbox.stories.js +23 -19
  58. package/vue/stories/KvLineGraph.stories.js +3 -2
  59. package/vue/stories/KvLoadingSpinner.stories.js +10 -12
  60. package/vue/stories/KvLoanActivities.stories.js +3 -4
  61. package/vue/stories/KvLoanBookmark.stories.js +3 -2
  62. package/vue/stories/KvLoanCallouts.stories.js +3 -2
  63. package/vue/stories/KvLoanProgressGroup.stories.js +5 -5
  64. package/vue/stories/KvLoanTag.stories.js +3 -2
  65. package/vue/stories/KvLoanUse.stories.js +3 -9
  66. package/vue/stories/KvMap.stories.js +3 -16
  67. package/vue/stories/KvMaterialIcon.stories.js +12 -6
  68. package/vue/stories/KvPagination.stories.js +3 -7
  69. package/vue/stories/KvPieChart.stories.js +3 -3
  70. package/vue/stories/KvProgressBar.stories.js +3 -8
  71. package/vue/stories/KvSideSheet.stories.js +2 -1
  72. package/vue/stories/KvTextLink.stories.js +5 -9
  73. package/vue/stories/KvThemeProvider.stories.js +6 -7
  74. package/vue/stories/KvToast.stories.js +10 -16
  75. package/vue/stories/KvTreeMapChart.stories.js +3 -3
  76. package/vue/stories/KvWideLoanCard.stories.js +3 -17
  77. package/vue/stories/StyleguidePrimitives.stories.js +104 -105
package/vue/stories/StyleguidePrimitives.stories.js CHANGED
@@ -12,7 +12,6 @@ const { headerNumberCase, kebabCase, removeObjectProperty } = require('../../uti
12
12
 
13
13
  const config = resolveConfig(tailwindConfig);
14
14
  const { theme } = config;
15
-
16
15
  function buildValuesFromThemeObj(initialObj) {
17
16
  const arr = [];
18
17
  const iterate = (obj, prefix = '') => {
@@ -33,7 +32,7 @@ export default {
33
32
  title: 'Base Styling/Primitives',
34
33
  };
35
34
 
36
- export const Primitives = (args, { argTypes }) => ({
35
+ export const Primitives = (templateArgs, { argTypes }) => ({
37
36
  props: Object.keys(argTypes),
38
37
  components: {
39
38
  KvGrid,
@@ -43,6 +42,7 @@ export const Primitives = (args, { argTypes }) => ({
43
42
  KvTabPanel,
44
43
  KvToast,
45
44
  },
45
+ setup() { return { theme, args: { ...templateArgs } }; },
46
46
  template: `
47
47
  <kv-page-container>
48
48
  <h1 class="tw-mt-4">Primitives</h1>
@@ -59,27 +59,27 @@ export const Primitives = (args, { argTypes }) => ({
59
59
  as="ul"
60
60
  class="tw-grid-cols-3 md:tw-grid-cols-4 lg:tw-grid-cols-5"
61
61
  >
62
- <li
63
- v-for="color in backgroundColor"
64
- v-if="!isStaticColor(color)"
65
- :key="buildClassName('bg', color[0])"
66
- >
67
- <button
68
- class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
69
- @click="copy(buildClassName('tw-bg', color[0]))"
62
+ <template v-for="color in backgroundColor" :key="buildClassName('bg', color[0])">
63
+ <li
64
+ v-if="!isStaticColor(color)"
70
65
  >
71
- <div
72
- class="tw-w-full tw-h-0 tw-block tw-mb-1"
73
- style="padding-bottom: 100%;"
74
- :class="buildClassName('tw-bg', color[0])"
66
+ <button
67
+ class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
68
+ @click="copy(buildClassName('tw-bg', color[0]))"
75
69
  >
76
- </div>
77
- <div class="tw-w-full">
78
- .{{buildClassName('tw-bg', color[0])}}
79
- <br><small class="tw-text-tertiary">var({{buildClassName('--bg', color[0])}})</small>
80
- </div>
81
- </button>
82
- </li>
70
+ <div
71
+ class="tw-w-full tw-h-0 tw-block tw-mb-1"
72
+ style="padding-bottom: 100%;"
73
+ :class="buildClassName('tw-bg', color[0])"
74
+ >
75
+ </div>
76
+ <div class="tw-w-full">
77
+ .{{buildClassName('tw-bg', color[0])}}
78
+ <br><small class="tw-text-tertiary">var({{buildClassName('--bg', color[0])}})</small>
79
+ </div>
80
+ </button>
81
+ </li>
82
+ </template>
83
83
  </kv-grid>
84
84
  </kv-tab-panel>
85
85
  <kv-tab-panel id="bg_static">
@@ -87,27 +87,27 @@ export const Primitives = (args, { argTypes }) => ({
87
87
  as="ul"
88
88
  class="tw-grid-cols-3 md:tw-grid-cols-4 lg:tw-grid-cols-5"
89
89
  >
90
- <li
91
- v-for="color in backgroundColor"
92
- v-if="isStaticColor(color)"
93
- :key="buildClassName('bg', color[0])"
94
- >
95
- <button
96
- class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
97
- @click="copy(buildClassName('tw-bg', color[0]))"
90
+ <template v-for="color in backgroundColor" :key="buildClassName('bg', color[0])">
91
+ <li
92
+ v-if="isStaticColor(color)"
98
93
  >
99
- <div
100
- class="tw-w-full tw-h-0 tw-block tw-mb-1"
101
- style="padding-bottom: 100%;"
102
- :class="buildClassName('tw-bg', color[0])"
94
+ <button
95
+ class="tw-flex tw-flex-col tw-h-full tw-w-full tw-text-left tw-border tw-rounded tw-p-1.5 tw-border-tertiary tw-font-book hover:tw-text-action-highlight"
96
+ @click="copy(buildClassName('tw-bg', color[0]))"
103
97
  >
104
- </div>
105
- <div class="tw-w-full">
106
- .{{buildClassName('tw-bg', color[0])}}
107
- <br><small class="tw-text-tertiary">{{color[1]}}</small>
108
- </div>
109
- </button>
110
- </li>
98
+ <div
99
+ class="tw-w-full tw-h-0 tw-block tw-mb-1"
100
+ style="padding-bottom: 100%;"
101
+ :class="buildClassName('tw-bg', color[0])"
102
+ >
103
+ </div>
104
+ <div class="tw-w-full">
105
+ .{{buildClassName('tw-bg', color[0])}}
106
+ <br><small class="tw-text-tertiary">{{color[1]}}</small>
107
+ </div>
108
+ </button>
109
+ </li>
110
+ </template>
111
111
  </kv-grid>
112
112
  </kv-tab-panel>
113
113
  </template>
@@ -125,44 +125,44 @@ export const Primitives = (args, { argTypes }) => ({
125
125
  <kv-tab-panel id="text_themable">
126
126
  <table>
127
127
  <tbody>
128
- <tr
129
- v-for="color in textColor"
130
- v-if="!isStaticColor(color)"
131
- :key="buildClassName('text-color', color[0])"
132
- >
133
- <td class="tw-py-1 tw-min-w-[300px]">
134
- <button
135
- class="hover:tw-text-action-highlight"
136
- :class="buildClassName('tw-text', color[0])"
137
- @click="copy(buildClassName('tw-text', color[0]))"
138
- >.{{buildClassName('tw-text', color[0])}}</button>
139
- </td>
140
- <td>
141
- <small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
142
- </td>
143
- </tr>
128
+ <template v-for="color in textColor" :key="buildClassName('text-color', color[0])">
129
+ <tr
130
+ v-if="!isStaticColor(color)"
131
+ >
132
+ <td class="tw-py-1 tw-min-w-[300px]">
133
+ <button
134
+ class="hover:tw-text-action-highlight"
135
+ :class="buildClassName('tw-text', color[0])"
136
+ @click="copy(buildClassName('tw-text', color[0]))"
137
+ >.{{buildClassName('tw-text', color[0])}}</button>
138
+ </td>
139
+ <td>
140
+ <small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
141
+ </td>
142
+ </tr>
143
+ </template>
144
144
  </tbody>
145
145
  </table>
146
146
  </kv-tab-panel>
147
147
  <kv-tab-panel id="text_static">
148
148
  <table>
149
149
  <tbody>
150
- <tr
151
- v-for="color in textColor"
152
- v-if="isStaticColor(color)"
153
- :key="buildClassName('text-color', color[0])"
154
- >
155
- <td class="tw-py-1 tw-min-w-[300px]">
156
- <button
157
- class="hover:tw-text-action-highlight"
158
- :class="buildClassName('tw-text', color[0])"
159
- @click="copy(buildClassName('tw-text', color[0]))"
160
- >.{{buildClassName('tw-text', color[0])}}</button>
161
- </td>
162
- <td>
163
- <small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
164
- </td>
165
- </tr>
150
+ <template v-for="color in textColor" :key="buildClassName('text-color', color[0])">
151
+ <tr
152
+ v-if="isStaticColor(color)"
153
+ >
154
+ <td class="tw-py-1 tw-min-w-[300px]">
155
+ <button
156
+ class="hover:tw-text-action-highlight"
157
+ :class="buildClassName('tw-text', color[0])"
158
+ @click="copy(buildClassName('tw-text', color[0]))"
159
+ >.{{buildClassName('tw-text', color[0])}}</button>
160
+ </td>
161
+ <td>
162
+ <small class="tw-text-tertiary">var({{buildClassName('--text', color[0])}})</small>
163
+ </td>
164
+ </tr>
165
+ </template>
166
166
  </tbody>
167
167
  </table>
168
168
  </kv-tab-panel>
@@ -181,44 +181,44 @@ export const Primitives = (args, { argTypes }) => ({
181
181
  <kv-tab-panel id="border_themable">
182
182
  <table>
183
183
  <tbody>
184
- <tr
185
- v-for="color in borderColor"
186
- v-if="!isStaticColor(color)"
187
- :key="buildClassName('border-color', color[0])"
188
- >
189
- <td class="tw-py-2 tw-min-w-[300px]">
190
- <button
191
- class="tw-ring-4 hover:tw-text-action-highlight"
192
- :class="buildClassName('tw-ring', color[0])"
193
- @click="copy(buildClassName('tw-border', color[0]))"
194
- >.{{buildClassName('tw-border', color[0])}}</button>
195
- </td>
196
- <td>
197
- <small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
198
- </td>
199
- </tr>
184
+ <template v-for="color in borderColor" :key="buildClassName('border-color', color[0])">
185
+ <tr
186
+ v-if="!isStaticColor(color)"
187
+ >
188
+ <td class="tw-py-2 tw-min-w-[300px]">
189
+ <button
190
+ class="tw-ring-4 hover:tw-text-action-highlight"
191
+ :class="buildClassName('tw-ring', color[0])"
192
+ @click="copy(buildClassName('tw-border', color[0]))"
193
+ >.{{buildClassName('tw-border', color[0])}}</button>
194
+ </td>
195
+ <td>
196
+ <small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
197
+ </td>
198
+ </tr>
199
+ </template>
200
200
  </tbody>
201
201
  </table>
202
202
  </kv-tab-panel>
203
203
  <kv-tab-panel id="border_static">
204
204
  <table>
205
205
  <tbody>
206
- <tr
207
- v-for="color in borderColor"
208
- v-if="isStaticColor(color)"
209
- :key="buildClassName('border-color', color[0])"
210
- >
211
- <td class="tw-py-2 tw-min-w-[300px]">
212
- <button
213
- class="tw-ring-4 hover:tw-text-action-highlight"
214
- :class="buildClassName('tw-ring', color[0])"
215
- @click="copy(buildClassName('tw-border', color[0]))"
216
- >.{{buildClassName('tw-border', color[0])}}</button>
217
- </td>
218
- <td>
219
- <small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
220
- </td>
221
- </tr>
206
+ <template v-for="color in borderColor" :key="buildClassName('border-color', color[0])">
207
+ <tr
208
+ v-if="isStaticColor(color)"
209
+ >
210
+ <td class="tw-py-2 tw-min-w-[300px]">
211
+ <button
212
+ class="tw-ring-4 hover:tw-text-action-highlight"
213
+ :class="buildClassName('tw-ring', color[0])"
214
+ @click="copy(buildClassName('tw-border', color[0]))"
215
+ >.{{buildClassName('tw-border', color[0])}}</button>
216
+ </td>
217
+ <td>
218
+ <small class="tw-text-tertiary">var({{buildClassName('--border', color[0])}})</small>
219
+ </td>
220
+ </tr>
221
+ </template>
222
222
  </tbody>
223
223
  </table>
224
224
  </kv-tab-panel>
@@ -437,7 +437,6 @@ export const Primitives = (args, { argTypes }) => ({
437
437
  </li>
438
438
  </ul>
439
439
  </section>
440
-
441
440
  <!-- Toast -->
442
441
  <div class="tw-fixed tw-inset-0 tw-z-toast tw-pointer-events-none">
443
442
  <div class="tw-fixed tw-left-0 tw-right-0 tw-top-2 tw-pointer-events-auto">