@kiva/kv-components 3.0.4 → 3.1.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.
- package/CHANGELOG.md +27 -0
- package/package.json +3 -3
- package/vue/KvButton.vue +10 -1
- package/vue/KvCarousel.vue +1 -0
- package/vue/stories/KvButton.stories.js +8 -3
package/CHANGELOG.md
CHANGED
|
@@ -3,6 +3,33 @@
|
|
|
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.1.0](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.6...@kiva/kv-components@3.1.0) (2022-07-19)
|
|
7
|
+
|
|
8
|
+
|
|
9
|
+
### Features
|
|
10
|
+
|
|
11
|
+
* add new caution variant to buttons ([#191](https://github.com/kiva/kv-ui-elements/issues/191)) ([14f3eb6](https://github.com/kiva/kv-ui-elements/commit/14f3eb6548bfc925cc2cb656966829f127a8864e))
|
|
12
|
+
|
|
13
|
+
|
|
14
|
+
|
|
15
|
+
|
|
16
|
+
|
|
17
|
+
## [3.0.6](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.5...@kiva/kv-components@3.0.6) (2022-06-23)
|
|
18
|
+
|
|
19
|
+
**Note:** Version bump only for package @kiva/kv-components
|
|
20
|
+
|
|
21
|
+
|
|
22
|
+
|
|
23
|
+
|
|
24
|
+
|
|
25
|
+
## [3.0.5](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.4...@kiva/kv-components@3.0.5) (2022-05-27)
|
|
26
|
+
|
|
27
|
+
**Note:** Version bump only for package @kiva/kv-components
|
|
28
|
+
|
|
29
|
+
|
|
30
|
+
|
|
31
|
+
|
|
32
|
+
|
|
6
33
|
## [3.0.4](https://github.com/kiva/kv-ui-elements/compare/@kiva/kv-components@3.0.3...@kiva/kv-components@3.0.4) (2022-05-23)
|
|
7
34
|
|
|
8
35
|
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@kiva/kv-components",
|
|
3
|
-
"version": "3.0
|
|
3
|
+
"version": "3.1.0",
|
|
4
4
|
"type": "module",
|
|
5
5
|
"publishConfig": {
|
|
6
6
|
"access": "public"
|
|
@@ -50,7 +50,7 @@
|
|
|
50
50
|
"test": "npm run lint"
|
|
51
51
|
},
|
|
52
52
|
"dependencies": {
|
|
53
|
-
"@kiva/kv-tokens": "^2.0
|
|
53
|
+
"@kiva/kv-tokens": "^2.2.0",
|
|
54
54
|
"@mdi/js": "^5.9.55",
|
|
55
55
|
"@vueuse/integrations": "^7.6.0",
|
|
56
56
|
"aria-hidden": "^1.1.3",
|
|
@@ -68,5 +68,5 @@
|
|
|
68
68
|
"optional": true
|
|
69
69
|
}
|
|
70
70
|
},
|
|
71
|
-
"gitHead": "
|
|
71
|
+
"gitHead": "408647638638310803b48e4a93cb2744e5ec4bce"
|
|
72
72
|
}
|
package/vue/KvButton.vue
CHANGED
|
@@ -84,7 +84,7 @@ export default {
|
|
|
84
84
|
type: String,
|
|
85
85
|
default: 'primary',
|
|
86
86
|
validator(value) {
|
|
87
|
-
return ['primary', 'secondary', 'link', 'ghost', 'danger'].includes(value);
|
|
87
|
+
return ['primary', 'secondary', 'link', 'ghost', 'danger', 'caution'].includes(value);
|
|
88
88
|
},
|
|
89
89
|
},
|
|
90
90
|
/**
|
|
@@ -114,6 +114,7 @@ export default {
|
|
|
114
114
|
const loadingColor = computed(() => {
|
|
115
115
|
switch (variant.value) {
|
|
116
116
|
case 'secondary':
|
|
117
|
+
case 'caution':
|
|
117
118
|
return 'black';
|
|
118
119
|
case 'ghost':
|
|
119
120
|
return 'brand';
|
|
@@ -166,6 +167,14 @@ export default {
|
|
|
166
167
|
classes = `${classes} tw-bg-primary hover:tw-bg-secondary`;
|
|
167
168
|
}
|
|
168
169
|
break;
|
|
170
|
+
case 'caution':
|
|
171
|
+
classes = 'tw-text-primary tw-border-transparent';
|
|
172
|
+
if (state.value === 'active') {
|
|
173
|
+
classes = `${classes} tw-bg-caution-highlight`;
|
|
174
|
+
} else {
|
|
175
|
+
classes = `${classes} tw-bg-caution hover:tw-bg-caution-highlight`;
|
|
176
|
+
}
|
|
177
|
+
break;
|
|
169
178
|
}
|
|
170
179
|
return classes;
|
|
171
180
|
});
|
package/vue/KvCarousel.vue
CHANGED
|
@@ -7,7 +7,7 @@ export default {
|
|
|
7
7
|
variant: {
|
|
8
8
|
control: {
|
|
9
9
|
type: 'select',
|
|
10
|
-
options: ['primary', 'secondary', 'link', 'danger', 'ghost'],
|
|
10
|
+
options: ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution'],
|
|
11
11
|
},
|
|
12
12
|
},
|
|
13
13
|
state: {
|
|
@@ -44,7 +44,7 @@ const VariantTemplate = (args, { argTypes }) => ({
|
|
|
44
44
|
template: `
|
|
45
45
|
<ul>
|
|
46
46
|
<li
|
|
47
|
-
v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
|
|
47
|
+
v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
|
|
48
48
|
:key="variant"
|
|
49
49
|
class="tw-mb-2"
|
|
50
50
|
>
|
|
@@ -89,6 +89,11 @@ VariantGhost.args = {
|
|
|
89
89
|
variant: 'ghost',
|
|
90
90
|
};
|
|
91
91
|
|
|
92
|
+
export const VariantCaution = Template.bind({});
|
|
93
|
+
VariantCaution.args = {
|
|
94
|
+
variant: 'caution',
|
|
95
|
+
};
|
|
96
|
+
|
|
92
97
|
// States
|
|
93
98
|
export const StateLoading = VariantTemplate.bind({});
|
|
94
99
|
StateLoading.args = {
|
|
@@ -117,7 +122,7 @@ export const FullWidth = (args, { argTypes }) => ({
|
|
|
117
122
|
template: `
|
|
118
123
|
<ul>
|
|
119
124
|
<li
|
|
120
|
-
v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost']"
|
|
125
|
+
v-for="variant in ['primary', 'secondary', 'link', 'danger', 'ghost', 'caution']"
|
|
121
126
|
:key="variant"
|
|
122
127
|
class="tw-mb-2"
|
|
123
128
|
>
|