@magicgol/polyjuice 0.23.0 → 0.24.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.
- package/package.json +1 -1
- package/src/components/footballer/horizontal-footballer/HFootballer.stories.js +28 -1
- package/src/components/footballer/horizontal-footballer/HFootballer.vue +50 -22
- package/src/components/footballer/role-badge/RoleBadge.vue +6 -5
- package/src/components/label/badge/LabelBadge.stories.js +24 -0
- package/src/components/label/badge/LabelBadge.vue +32 -0
- package/src/components/label/label/Label.vue +3 -1
- package/src/components/list/head/ListHead.vue +1 -1
- package/src/components/typography/h1/HeadingOne.vue +3 -1
- package/src/components/typography/h2/HeadingTwo.vue +3 -1
- package/src/components/typography/h3/HeadingThree.vue +3 -1
- package/src/components/typography/h4/HeadingFour.vue +3 -1
- package/src/components/typography/h5/HeadingFive.vue +1 -1
- package/src/documentation/Brand.stories.mdx +1 -1
- package/src/documentation/Footballer.stories.mdx +1 -1
package/package.json
CHANGED
|
@@ -11,6 +11,23 @@ export default {
|
|
|
11
11
|
options: [null, 'P', 'D', 'C', 'A'],
|
|
12
12
|
defaultValue: 'A'
|
|
13
13
|
},
|
|
14
|
+
size: {
|
|
15
|
+
control: { type: 'select' },
|
|
16
|
+
options: ['normal', 'large'],
|
|
17
|
+
defaultValue: 'normal'
|
|
18
|
+
},
|
|
19
|
+
default: {
|
|
20
|
+
description: "The default Vue slot",
|
|
21
|
+
control: {
|
|
22
|
+
type: 'text',
|
|
23
|
+
},
|
|
24
|
+
table: {
|
|
25
|
+
category: 'Slots',
|
|
26
|
+
type: {
|
|
27
|
+
summary: 'html',
|
|
28
|
+
},
|
|
29
|
+
}
|
|
30
|
+
},
|
|
14
31
|
},
|
|
15
32
|
};
|
|
16
33
|
|
|
@@ -18,7 +35,7 @@ export default {
|
|
|
18
35
|
const Template = (args, { argTypes }) => ({
|
|
19
36
|
props: Object.keys(argTypes),
|
|
20
37
|
components: { MgHFootballer },
|
|
21
|
-
template: `<mg-h-footballer @click="$emit('click')" v-bind="$props"></mg-h-footballer>`,
|
|
38
|
+
template: `<mg-h-footballer @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-h-footballer>`,
|
|
22
39
|
});
|
|
23
40
|
|
|
24
41
|
export const Default = Template.bind({});
|
|
@@ -43,3 +60,13 @@ Disabled.args = {
|
|
|
43
60
|
firstname: 'Paulo',
|
|
44
61
|
lastname: 'Dybala',
|
|
45
62
|
};
|
|
63
|
+
|
|
64
|
+
export const Large = Template.bind({});
|
|
65
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
|
66
|
+
Large.args = {
|
|
67
|
+
size: 'large',
|
|
68
|
+
role: 'A',
|
|
69
|
+
firstname: 'Paulo',
|
|
70
|
+
lastname: 'Dybala',
|
|
71
|
+
};
|
|
72
|
+
|
|
@@ -8,22 +8,28 @@
|
|
|
8
8
|
class="flex-fill text-truncate"
|
|
9
9
|
v-bind:class="{'text-right': inverted, 'order-1': !inverted}"
|
|
10
10
|
>
|
|
11
|
-
|
|
12
|
-
|
|
13
|
-
|
|
14
|
-
|
|
15
|
-
|
|
16
|
-
|
|
17
|
-
|
|
18
|
-
|
|
11
|
+
<div class="text-truncate">
|
|
12
|
+
<!-- LAST NAME ONLY -->
|
|
13
|
+
<span
|
|
14
|
+
v-if="hasOnlyLastname"
|
|
15
|
+
class="mg-h-footballer-strong"
|
|
16
|
+
>{{ lastname }}</span>
|
|
17
|
+
<!-- end of LAST NAME ONLY -->
|
|
18
|
+
<!-- FULL NAME -->
|
|
19
|
+
<span v-else-if="hasName">
|
|
19
20
|
<span class="mg-h-footballer-strong">{{ lastname }}</span>, <span>{{ firstname }}</span>
|
|
20
21
|
</span>
|
|
21
|
-
|
|
22
|
+
<span v-else>–</span>
|
|
23
|
+
</div>
|
|
24
|
+
<div class="mg-h-footballer-subtext text-uppercase"><slot></slot></div>
|
|
22
25
|
</div>
|
|
23
26
|
<!-- end of FOOTBALLER NAME -->
|
|
24
27
|
<!-- ROLE BADGE -->
|
|
25
28
|
<div v-bind:class="{'pl-2': inverted, 'pr-2': !inverted}">
|
|
26
|
-
<mg-role-badge
|
|
29
|
+
<mg-role-badge
|
|
30
|
+
:role="role"
|
|
31
|
+
:size="size"
|
|
32
|
+
></mg-role-badge>
|
|
27
33
|
</div>
|
|
28
34
|
<!-- end of ROLE BADGE -->
|
|
29
35
|
</div>
|
|
@@ -59,6 +65,13 @@ export default {
|
|
|
59
65
|
type: String,
|
|
60
66
|
default: null
|
|
61
67
|
},
|
|
68
|
+
size: {
|
|
69
|
+
type: String,
|
|
70
|
+
default: 'normal',
|
|
71
|
+
validator: function (value) {
|
|
72
|
+
return ['normal', 'large'].indexOf(value) !== -1;
|
|
73
|
+
},
|
|
74
|
+
},
|
|
62
75
|
},
|
|
63
76
|
|
|
64
77
|
computed: {
|
|
@@ -66,6 +79,8 @@ export default {
|
|
|
66
79
|
return {
|
|
67
80
|
'mg-h-footballer': true,
|
|
68
81
|
'mg-h-footballer--disabled': this.disabled,
|
|
82
|
+
'mg-h-footballer--size-normal': this.size === 'normal',
|
|
83
|
+
'mg-h-footballer--size-large': this.size === 'large',
|
|
69
84
|
};
|
|
70
85
|
},
|
|
71
86
|
hasOnlyLastname() {
|
|
@@ -89,20 +104,33 @@ export default {
|
|
|
89
104
|
</script>
|
|
90
105
|
|
|
91
106
|
<style lang="scss">
|
|
92
|
-
@import '../../../assets/palette';
|
|
107
|
+
@import '../../../assets/palette';
|
|
93
108
|
|
|
94
|
-
.mg-h-footballer {
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
font-size: 0.75rem;
|
|
109
|
+
.mg-h-footballer {
|
|
110
|
+
color: map-get($palette, 'text');
|
|
111
|
+
font-family: 'Ubuntu', sans-serif;
|
|
98
112
|
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
113
|
+
&-strong {
|
|
114
|
+
font-weight: 500;
|
|
115
|
+
}
|
|
102
116
|
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
117
|
+
&-subtext {
|
|
118
|
+
font-size: 0.875rem;
|
|
119
|
+
}
|
|
120
|
+
|
|
121
|
+
&--disabled {
|
|
122
|
+
opacity: 0.6;
|
|
123
|
+
cursor: not-allowed !important;
|
|
124
|
+
}
|
|
125
|
+
|
|
126
|
+
&--size {
|
|
127
|
+
&-normal {
|
|
128
|
+
font-size: 0.75rem;
|
|
129
|
+
}
|
|
130
|
+
|
|
131
|
+
&-large {
|
|
132
|
+
font-size: 1rem;
|
|
133
|
+
}
|
|
134
|
+
}
|
|
106
135
|
}
|
|
107
|
-
}
|
|
108
136
|
</style>
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
<template>
|
|
2
2
|
<div
|
|
3
|
-
class="d-inline-flex text-center
|
|
3
|
+
class="d-inline-flex text-center rounded-circle justify-content-center align-items-center"
|
|
4
4
|
:class="classes"
|
|
5
5
|
>
|
|
6
6
|
<slot v-if="slotVisibility"></slot>
|
|
@@ -57,8 +57,9 @@ export default {
|
|
|
57
57
|
|
|
58
58
|
.mg-role-badge {
|
|
59
59
|
background-color: #c2c2c2;
|
|
60
|
+
color: map-get($palette, 'text');
|
|
60
61
|
font-family: 'Ubuntu', sans-serif;
|
|
61
|
-
font-weight:
|
|
62
|
+
font-weight: 500;
|
|
62
63
|
|
|
63
64
|
&--normal {
|
|
64
65
|
font-size: 0.75rem;
|
|
@@ -69,9 +70,9 @@ export default {
|
|
|
69
70
|
|
|
70
71
|
&--large {
|
|
71
72
|
font-size: 1rem;
|
|
72
|
-
height: 1.
|
|
73
|
-
width: 1.
|
|
74
|
-
min-width: 1.
|
|
73
|
+
height: 1.875rem;
|
|
74
|
+
width: 1.875rem;
|
|
75
|
+
min-width: 1.875rem;
|
|
75
76
|
}
|
|
76
77
|
|
|
77
78
|
&--huge {
|
|
@@ -0,0 +1,24 @@
|
|
|
1
|
+
import MgLabelBadge from './LabelBadge.vue';
|
|
2
|
+
|
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Label/Badge',
|
|
6
|
+
component: MgLabelBadge,
|
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
|
8
|
+
argTypes: {},
|
|
9
|
+
};
|
|
10
|
+
|
|
11
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
|
12
|
+
const Template = (args, { argTypes }) => ({
|
|
13
|
+
props: Object.keys(argTypes),
|
|
14
|
+
components: { MgLabelBadge },
|
|
15
|
+
template: `<mg-label-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-label-badge>`,
|
|
16
|
+
});
|
|
17
|
+
|
|
18
|
+
export const Default = Template.bind({});
|
|
19
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
|
20
|
+
Default.args = {
|
|
21
|
+
default: '99'
|
|
22
|
+
};
|
|
23
|
+
|
|
24
|
+
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
class="d-inline-flex rounded-circle align-items-center justify-content-center text-white"
|
|
4
|
+
:class="classes"
|
|
5
|
+
><slot></slot></div>
|
|
6
|
+
</template>
|
|
7
|
+
|
|
8
|
+
<script>
|
|
9
|
+
export default {
|
|
10
|
+
name: 'mg-label-badge',
|
|
11
|
+
|
|
12
|
+
computed: {
|
|
13
|
+
classes() {
|
|
14
|
+
return {
|
|
15
|
+
'mg-label-badge': true,
|
|
16
|
+
};
|
|
17
|
+
},
|
|
18
|
+
},
|
|
19
|
+
};
|
|
20
|
+
</script>
|
|
21
|
+
|
|
22
|
+
<style lang="scss">
|
|
23
|
+
@import '../../../assets/palette';
|
|
24
|
+
|
|
25
|
+
.mg-label-badge {
|
|
26
|
+
background-color: #84485E;
|
|
27
|
+
font-family: 'Ubuntu', sans-serif;
|
|
28
|
+
font-weight: 500;
|
|
29
|
+
height: 2rem;
|
|
30
|
+
width: 2rem;
|
|
31
|
+
}
|
|
32
|
+
</style>
|
|
@@ -45,6 +45,8 @@ export default {
|
|
|
45
45
|
</script>
|
|
46
46
|
|
|
47
47
|
<style lang="scss">
|
|
48
|
+
@import '../../../assets/palette';
|
|
49
|
+
|
|
48
50
|
.mg-label {
|
|
49
51
|
border-radius: 32px;
|
|
50
52
|
padding-top: 0.0625rem;
|
|
@@ -68,7 +70,7 @@ export default {
|
|
|
68
70
|
&--theme {
|
|
69
71
|
&-light {
|
|
70
72
|
background: #f7f7f7;
|
|
71
|
-
color:
|
|
73
|
+
color: map-get($palette, 'text');
|
|
72
74
|
}
|
|
73
75
|
|
|
74
76
|
&-dark {
|