@magicgol/polyjuice 0.43.1 → 0.45.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +1 -1
- package/src/components/badge/badge/Badge.stories.js +7 -1
- package/src/components/badge/badge/Badge.vue +25 -2
- package/src/components/components/highlighter/Highlighter.vue +3 -1
- package/src/components/context/actions/filter-button/FilterButton.vue +1 -1
- package/src/components/form/button/tertiary-button/TertiaryButton.vue +1 -0
- package/src/components/modal/selection-box/SelectionBox.vue +1 -1
package/package.json
CHANGED
|
@@ -5,7 +5,13 @@ export default {
|
|
|
5
5
|
title: 'Badge/Badge',
|
|
6
6
|
component: MgBadge,
|
|
7
7
|
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
|
8
|
-
argTypes: {
|
|
8
|
+
argTypes: {
|
|
9
|
+
size: {
|
|
10
|
+
control: { type: 'select' },
|
|
11
|
+
options: ['normal', 'large'],
|
|
12
|
+
defaultValue: 'normal'
|
|
13
|
+
},
|
|
14
|
+
},
|
|
9
15
|
};
|
|
10
16
|
|
|
11
17
|
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
|
@@ -9,10 +9,22 @@
|
|
|
9
9
|
export default {
|
|
10
10
|
name: 'mg-badge',
|
|
11
11
|
|
|
12
|
+
props: {
|
|
13
|
+
size: {
|
|
14
|
+
type: String,
|
|
15
|
+
default: 'normal',
|
|
16
|
+
validator: function (value) {
|
|
17
|
+
return ['normal', 'large'].indexOf(value) !== -1;
|
|
18
|
+
},
|
|
19
|
+
},
|
|
20
|
+
},
|
|
21
|
+
|
|
12
22
|
computed: {
|
|
13
23
|
classes() {
|
|
14
24
|
return {
|
|
15
25
|
'mg-badge': true,
|
|
26
|
+
'mg-badge--size-normal': this.size === 'normal',
|
|
27
|
+
'mg-badge--size-large': this.size === 'large',
|
|
16
28
|
};
|
|
17
29
|
},
|
|
18
30
|
},
|
|
@@ -27,7 +39,18 @@ export default {
|
|
|
27
39
|
font-family: 'Ubuntu', sans-serif;
|
|
28
40
|
font-size: 1rem;
|
|
29
41
|
font-weight: 500;
|
|
30
|
-
|
|
31
|
-
|
|
42
|
+
|
|
43
|
+
&--size{
|
|
44
|
+
&-normal {
|
|
45
|
+
height: 2rem;
|
|
46
|
+
width: 2rem;
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&-large {
|
|
50
|
+
font-size: 2.625rem;
|
|
51
|
+
height: 5rem;
|
|
52
|
+
width: 5rem;
|
|
53
|
+
}
|
|
54
|
+
}
|
|
32
55
|
}
|
|
33
56
|
</style>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="rounded p-2"
|
|
3
|
+
class="rounded p-2 d-flex align-items-center"
|
|
4
4
|
:class="classes"
|
|
5
5
|
><slot></slot></div>
|
|
6
6
|
</template>
|
|
@@ -28,6 +28,7 @@ export default {
|
|
|
28
28
|
</script>
|
|
29
29
|
|
|
30
30
|
<style lang="scss">
|
|
31
|
+
// TODO Should import breakpoints and set different min height by device viewport
|
|
31
32
|
@import '../../../assets/palette';
|
|
32
33
|
|
|
33
34
|
.mg-highlighter {
|
|
@@ -35,6 +36,7 @@ export default {
|
|
|
35
36
|
font-family: Ubuntu, sans-serif;
|
|
36
37
|
font-size: 16px;
|
|
37
38
|
font-weight: 700;
|
|
39
|
+
min-height: 4rem;
|
|
38
40
|
|
|
39
41
|
&--disabled {
|
|
40
42
|
opacity: 0.3 !important;
|