@magicgol/polyjuice 0.14.1 → 0.15.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.storybook/main.js +8 -0
- package/.storybook/preview-head.html +1 -1
- package/package.json +1 -1
- package/src/assets/svg/facebook.js +10 -0
- package/src/assets/svg/google.js +10 -0
- package/src/assets/svg/index.js +2 -0
- package/src/components/box/filing-cabinet/FilingCabinet.stories.js +44 -0
- package/src/components/box/filing-cabinet/FilingCabinet.vue +52 -0
- package/src/components/box/filing-cabinet/FilingCabinetTab.stories.js +43 -0
- package/src/components/box/filing-cabinet/FilingCabinetTab.vue +55 -0
- package/src/components/card/vertical-card/VCard.vue +1 -1
- package/src/components/footballer/role-badge/RoleBadge.stories.js +14 -2
- package/src/components/footballer/role-badge/RoleBadge.vue +15 -3
- package/src/components/form/checkbox/checkbox/Checkbox.vue +4 -1
- package/src/components/form/input/input/Input.vue +2 -1
- package/src/components/image/profile-image/ProfileImage.vue +1 -1
- package/src/components/label/dot/Dot.stories.js +19 -0
- package/src/components/label/dot/Dot.vue +30 -0
- package/src/components/list/head/ListHead.stories.js +43 -0
- package/src/components/list/head/ListHead.vue +35 -0
- package/src/components/social/button/SocialButton.stories.js +54 -0
- package/src/components/social/button/SocialButton.vue +83 -0
- package/src/svg/facebook.svg +3 -0
- package/src/svg/google.svg +3 -0
package/.storybook/main.js
CHANGED
@@ -1,4 +1,4 @@
|
|
1
1
|
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
|
2
2
|
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
|
3
3
|
|
4
|
-
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,600,700" rel="stylesheet" />
|
4
|
+
<link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,600,700|Raleway:600,700" rel="stylesheet" />
|
package/package.json
CHANGED
@@ -0,0 +1,10 @@
|
|
1
|
+
/* eslint-disable */
|
2
|
+
var icon = require('vue-svgicon')
|
3
|
+
icon.register({
|
4
|
+
'facebook': {
|
5
|
+
width: 16,
|
6
|
+
height: 16,
|
7
|
+
viewBox: '0 0 25 25',
|
8
|
+
data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.213c-.486 0-.972.593-.972 1.403V8.37H13.5v3.997H8.694V24.3h-4.59V12.367H0V8.37h4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5v4.213H9.666z" _fill="#fff"/>'
|
9
|
+
}
|
10
|
+
})
|
@@ -0,0 +1,10 @@
|
|
1
|
+
/* eslint-disable */
|
2
|
+
var icon = require('vue-svgicon')
|
3
|
+
icon.register({
|
4
|
+
'google': {
|
5
|
+
width: 16,
|
6
|
+
height: 16,
|
7
|
+
viewBox: '0 0 18 18',
|
8
|
+
data: '<path pid="0" d="M9.003 7.415v3.439h4.9c-.64 2.084-2.381 3.576-4.9 3.576a5.431 5.431 0 010-10.86c1.349 0 2.58.496 3.528 1.31l2.532-2.534A8.966 8.966 0 009.003 0C4.03 0 0 4.03 0 9s4.03 9 9.003 9c7.555 0 9.224-7.067 8.482-10.573l-8.482-.012z" _fill="#fff"/>'
|
9
|
+
}
|
10
|
+
})
|
package/src/assets/svg/index.js
CHANGED
@@ -0,0 +1,44 @@
|
|
1
|
+
import MgFilingCabinet from './FilingCabinet.vue';
|
2
|
+
import MgFilingCabinetTab from './FilingCabinetTab.vue';
|
3
|
+
|
4
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
5
|
+
export default {
|
6
|
+
title: 'Box/Filing Cabinet',
|
7
|
+
component: MgFilingCabinet,
|
8
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
9
|
+
argTypes: {
|
10
|
+
default: {
|
11
|
+
description: "The default Vue slot",
|
12
|
+
control: {
|
13
|
+
type: 'text',
|
14
|
+
},
|
15
|
+
table: {
|
16
|
+
category: 'Slots',
|
17
|
+
type: {
|
18
|
+
summary: 'html',
|
19
|
+
},
|
20
|
+
}
|
21
|
+
}
|
22
|
+
},
|
23
|
+
};
|
24
|
+
|
25
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
26
|
+
const Template = (args, { argTypes }) => ({
|
27
|
+
props: Object.keys(argTypes),
|
28
|
+
components: { MgFilingCabinet, MgFilingCabinetTab },
|
29
|
+
template: `<mg-filing-cabinet v-bind="$props">
|
30
|
+
<template v-slot:tab-left>
|
31
|
+
<mg-filing-cabinet-tab>left tab</mg-filing-cabinet-tab>
|
32
|
+
</template>
|
33
|
+
<template v-slot:tab-right>
|
34
|
+
<mg-filing-cabinet-tab active>right tab</mg-filing-cabinet-tab>
|
35
|
+
</template>
|
36
|
+
<template v-if="${'default' in args}" v-slot>${args.default}</template>
|
37
|
+
</mg-filing-cabinet>`,
|
38
|
+
});
|
39
|
+
|
40
|
+
export const Default = Template.bind({});
|
41
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
42
|
+
Default.args = {
|
43
|
+
default: 'this is the content'
|
44
|
+
};
|
@@ -0,0 +1,52 @@
|
|
1
|
+
<template>
|
2
|
+
<div class="bg-white">
|
3
|
+
<div class="d-flex">
|
4
|
+
<div class="w-50">
|
5
|
+
<slot name="tab-left"></slot>
|
6
|
+
</div>
|
7
|
+
<div class="w-50">
|
8
|
+
<slot name="tab-right"></slot>
|
9
|
+
</div>
|
10
|
+
</div>
|
11
|
+
<div class="py-4 px-3">
|
12
|
+
<slot></slot>
|
13
|
+
</div>
|
14
|
+
</div>
|
15
|
+
</template>
|
16
|
+
|
17
|
+
<script>
|
18
|
+
export default {
|
19
|
+
name: 'mg-filing-cabinet',
|
20
|
+
|
21
|
+
props: {
|
22
|
+
// icon: {
|
23
|
+
// type: String
|
24
|
+
// },
|
25
|
+
// level: {
|
26
|
+
// type: String,
|
27
|
+
// default: 'normal',
|
28
|
+
// validator: function (value) {
|
29
|
+
// return ['normal', 'club'].indexOf(value) !== -1;
|
30
|
+
// },
|
31
|
+
// }
|
32
|
+
},
|
33
|
+
|
34
|
+
computed: {
|
35
|
+
classes() {
|
36
|
+
return {
|
37
|
+
'mg-filing-cabinet': true,
|
38
|
+
// 'mg-icon-badge--club': this.level === 'club',
|
39
|
+
// 'mg-icon-badge--normal': this.level === 'normal',
|
40
|
+
};
|
41
|
+
},
|
42
|
+
},
|
43
|
+
};
|
44
|
+
</script>
|
45
|
+
|
46
|
+
<style lang="scss">
|
47
|
+
@import '../../../assets/palette';
|
48
|
+
|
49
|
+
.mg-filing-cabinet {
|
50
|
+
|
51
|
+
}
|
52
|
+
</style>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import MgFilingCabinetTab from './FilingCabinetTab.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Box/Filing Cabinet/Tab',
|
6
|
+
component: MgFilingCabinetTab,
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
8
|
+
argTypes: {
|
9
|
+
default: {
|
10
|
+
description: "The default Vue slot",
|
11
|
+
control: {
|
12
|
+
type: 'text',
|
13
|
+
},
|
14
|
+
table: {
|
15
|
+
category: 'Slots',
|
16
|
+
type: {
|
17
|
+
summary: 'html',
|
18
|
+
},
|
19
|
+
}
|
20
|
+
}
|
21
|
+
},
|
22
|
+
};
|
23
|
+
|
24
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
25
|
+
const Template = (args, { argTypes }) => ({
|
26
|
+
props: Object.keys(argTypes),
|
27
|
+
components: { MgFilingCabinetTab },
|
28
|
+
template: `<mg-filing-cabinet-tab @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filing-cabinet-tab>`,
|
29
|
+
});
|
30
|
+
|
31
|
+
export const Default = Template.bind({});
|
32
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
33
|
+
Default.args = {
|
34
|
+
active: false,
|
35
|
+
default: 'tab button'
|
36
|
+
};
|
37
|
+
|
38
|
+
export const Active = Template.bind({});
|
39
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
40
|
+
Active.args = {
|
41
|
+
active: true,
|
42
|
+
default: 'tab button'
|
43
|
+
};
|
@@ -0,0 +1,55 @@
|
|
1
|
+
<template>
|
2
|
+
<div
|
3
|
+
class="d-block p-4 text-center text-uppercase"
|
4
|
+
:class="classes"
|
5
|
+
@click="$emit('click')"
|
6
|
+
>
|
7
|
+
<span class="pb-1"><slot></slot></span>
|
8
|
+
</div>
|
9
|
+
</template>
|
10
|
+
|
11
|
+
<script>
|
12
|
+
export default {
|
13
|
+
name: 'mg-filing-cabinet-tab',
|
14
|
+
|
15
|
+
props: {
|
16
|
+
active: {
|
17
|
+
type: Boolean,
|
18
|
+
default: false
|
19
|
+
},
|
20
|
+
},
|
21
|
+
|
22
|
+
computed: {
|
23
|
+
classes() {
|
24
|
+
return {
|
25
|
+
'mg-filing-cabinet-tab': true,
|
26
|
+
'mg-filing-cabinet-tab--active': this.active === true,
|
27
|
+
};
|
28
|
+
}
|
29
|
+
},
|
30
|
+
};
|
31
|
+
</script>
|
32
|
+
|
33
|
+
<style lang="scss">
|
34
|
+
@import '../../../assets/palette';
|
35
|
+
|
36
|
+
.mg-filing-cabinet-tab {
|
37
|
+
background-color: #f3f3f3;
|
38
|
+
border: 1px solid #d8d8d8;
|
39
|
+
color: #000;
|
40
|
+
cursor: pointer;
|
41
|
+
text-decoration: none;
|
42
|
+
font-family: 'Raleway', sans-serif;
|
43
|
+
font-size: 1.125rem;
|
44
|
+
font-weight: 600;
|
45
|
+
|
46
|
+
&--active {
|
47
|
+
background-color: #fff !important;
|
48
|
+
border-color: #fff !important;
|
49
|
+
|
50
|
+
span {
|
51
|
+
border-bottom: 2px solid map-get($palette, 'brand');
|
52
|
+
}
|
53
|
+
}
|
54
|
+
}
|
55
|
+
</style>
|
@@ -13,9 +13,21 @@ export default {
|
|
13
13
|
},
|
14
14
|
size: {
|
15
15
|
control: { type: 'select' },
|
16
|
-
options: ['large', 'normal'],
|
16
|
+
options: ['huge', 'large', 'normal'],
|
17
17
|
defaultValue: 'normal'
|
18
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
|
+
},
|
19
31
|
},
|
20
32
|
};
|
21
33
|
|
@@ -23,7 +35,7 @@ export default {
|
|
23
35
|
const Template = (args, { argTypes }) => ({
|
24
36
|
props: Object.keys(argTypes),
|
25
37
|
components: { MgRoleBadge },
|
26
|
-
template: `<mg-role-badge v-bind="$props"></mg-role-badge>`,
|
38
|
+
template: `<mg-role-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-role-badge>`,
|
27
39
|
});
|
28
40
|
|
29
41
|
export const Default = Template.bind({});
|
@@ -3,7 +3,8 @@
|
|
3
3
|
class="d-inline-flex text-center text-white rounded-circle justify-content-center align-items-center"
|
4
4
|
:class="classes"
|
5
5
|
>
|
6
|
-
|
6
|
+
<slot v-if="slotVisibility"></slot>
|
7
|
+
<template v-else>{{ role }}</template>
|
7
8
|
</div>
|
8
9
|
</template>
|
9
10
|
|
@@ -23,7 +24,7 @@ export default {
|
|
23
24
|
type: String,
|
24
25
|
default: 'normal',
|
25
26
|
validator: function (value) {
|
26
|
-
return ['normal', 'large'].indexOf(value) !== -1;
|
27
|
+
return ['normal', 'large', 'huge'].indexOf(value) !== -1;
|
27
28
|
},
|
28
29
|
}
|
29
30
|
},
|
@@ -38,7 +39,11 @@ export default {
|
|
38
39
|
'mg-role-badge--forward': this.role === 'A',
|
39
40
|
'mg-role-badge--normal': this.size === 'normal',
|
40
41
|
'mg-role-badge--large': this.size === 'large',
|
42
|
+
'mg-role-badge--huge': this.size === 'huge',
|
41
43
|
};
|
44
|
+
},
|
45
|
+
slotVisibility() {
|
46
|
+
return 'default' in this.$slots && !!this.$slots.default;
|
42
47
|
}
|
43
48
|
},
|
44
49
|
};
|
@@ -59,12 +64,19 @@ export default {
|
|
59
64
|
}
|
60
65
|
|
61
66
|
&--large {
|
62
|
-
font-size:
|
67
|
+
font-size: 1rem;
|
63
68
|
height: 1.5rem;
|
64
69
|
width: 1.5rem;
|
65
70
|
min-width: 1.5rem;
|
66
71
|
}
|
67
72
|
|
73
|
+
&--huge {
|
74
|
+
font-size: 1.25rem;
|
75
|
+
height: 2.5rem;
|
76
|
+
width: 2.5rem;
|
77
|
+
min-width: 2.5rem;
|
78
|
+
}
|
79
|
+
|
68
80
|
&--goalkeeper {
|
69
81
|
background-color: map-get($palette, 'goalkeeper');
|
70
82
|
}
|
@@ -17,7 +17,7 @@
|
|
17
17
|
<span class="mg-checkbox-check align-middle d-inline-block position-relative"></span>
|
18
18
|
<!-- end of THE SQUARE -->
|
19
19
|
<!-- TEXT AS LABEL -->
|
20
|
-
<span class="align-middle">
|
20
|
+
<span class="align-middle pl-2">
|
21
21
|
<slot></slot>
|
22
22
|
</span>
|
23
23
|
<!-- end of TEXT AS LABEL -->
|
@@ -62,6 +62,9 @@ export default {
|
|
62
62
|
border-radius: 2px;
|
63
63
|
box-sizing: border-box;
|
64
64
|
height: 20px;
|
65
|
+
font-family: 'Raleway', sans-serif;
|
66
|
+
font-size: 0.875rem;
|
67
|
+
font-weight: 600;
|
65
68
|
vertical-align: sub;
|
66
69
|
width: 20px;
|
67
70
|
}
|
@@ -0,0 +1,19 @@
|
|
1
|
+
import MgDot from './Dot.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Label/Dot',
|
6
|
+
component: MgDot,
|
7
|
+
};
|
8
|
+
|
9
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
10
|
+
const Template = (args, { argTypes }) => ({
|
11
|
+
props: Object.keys(argTypes),
|
12
|
+
components: { MgDot },
|
13
|
+
template: `<mg-dot v-bind="$props"></mg-dot>`,
|
14
|
+
});
|
15
|
+
|
16
|
+
export const Default = Template.bind({});
|
17
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
18
|
+
Default.args = {
|
19
|
+
};
|
@@ -0,0 +1,30 @@
|
|
1
|
+
<template>
|
2
|
+
<span
|
3
|
+
class="d-inline-block rounded-circle"
|
4
|
+
:class="classes"
|
5
|
+
></span>
|
6
|
+
</template>
|
7
|
+
|
8
|
+
<script>
|
9
|
+
export default {
|
10
|
+
name: 'mg-dot',
|
11
|
+
|
12
|
+
computed: {
|
13
|
+
classes() {
|
14
|
+
return {
|
15
|
+
'mg-dot': true,
|
16
|
+
};
|
17
|
+
}
|
18
|
+
},
|
19
|
+
};
|
20
|
+
</script>
|
21
|
+
|
22
|
+
<style lang="scss">
|
23
|
+
@import '../../../assets/palette';
|
24
|
+
|
25
|
+
.mg-dot {
|
26
|
+
background-color: map-get($palette, 'brand');
|
27
|
+
height: 0.75rem;
|
28
|
+
width: 0.75rem;
|
29
|
+
}
|
30
|
+
</style>
|
@@ -0,0 +1,43 @@
|
|
1
|
+
import MgListHead from './ListHead.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'List/Head',
|
6
|
+
component: MgListHead,
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
8
|
+
argTypes: {
|
9
|
+
default: {
|
10
|
+
description: "The default Vue slot",
|
11
|
+
control: {
|
12
|
+
type: 'text',
|
13
|
+
},
|
14
|
+
table: {
|
15
|
+
category: 'Slots',
|
16
|
+
type: {
|
17
|
+
summary: 'html',
|
18
|
+
},
|
19
|
+
}
|
20
|
+
},
|
21
|
+
},
|
22
|
+
};
|
23
|
+
|
24
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
25
|
+
const Template = (args, { argTypes }) => ({
|
26
|
+
props: Object.keys(argTypes),
|
27
|
+
components: { MgListHead },
|
28
|
+
template: `
|
29
|
+
<div class="row">
|
30
|
+
<div class="col-6 p-0">
|
31
|
+
<mg-list-head @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-list-head>
|
32
|
+
</div>
|
33
|
+
<div class="col-6 p-0">
|
34
|
+
<mg-list-head>Another head</mg-list-head>
|
35
|
+
</div>
|
36
|
+
</div>`,
|
37
|
+
});
|
38
|
+
|
39
|
+
export const Default = Template.bind({});
|
40
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
41
|
+
Default.args = {
|
42
|
+
default: 'this is the list head'
|
43
|
+
};
|
@@ -0,0 +1,35 @@
|
|
1
|
+
<template>
|
2
|
+
<div
|
3
|
+
class="text-uppercase pb-2 px-3"
|
4
|
+
:class="classes"
|
5
|
+
><slot></slot></div>
|
6
|
+
</template>
|
7
|
+
|
8
|
+
<script>
|
9
|
+
export default {
|
10
|
+
name: 'mg-list-head',
|
11
|
+
|
12
|
+
computed: {
|
13
|
+
classes() {
|
14
|
+
return {
|
15
|
+
'mg-list-head': true,
|
16
|
+
};
|
17
|
+
},
|
18
|
+
footerVisibility() {
|
19
|
+
return 'footer' in this.$slots && !!this.$slots.footer;
|
20
|
+
}
|
21
|
+
},
|
22
|
+
};
|
23
|
+
</script>
|
24
|
+
|
25
|
+
<style lang="scss">
|
26
|
+
@import '../../../assets/palette';
|
27
|
+
|
28
|
+
.mg-list-head {
|
29
|
+
border-bottom: 1px solid #dee2e6;
|
30
|
+
color: #777777;
|
31
|
+
font-family: 'Ubuntu', sans-serif;
|
32
|
+
font-size: 0.75rem;
|
33
|
+
font-weight: 500;
|
34
|
+
}
|
35
|
+
</style>
|
@@ -0,0 +1,54 @@
|
|
1
|
+
import MgSocialButton from './SocialButton.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Social/Button',
|
6
|
+
component: MgSocialButton,
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
8
|
+
argTypes: {
|
9
|
+
channel: {
|
10
|
+
control: { type: 'select' },
|
11
|
+
options: ['google', 'facebook'],
|
12
|
+
defaultValue: 'facebook'
|
13
|
+
},
|
14
|
+
default: {
|
15
|
+
description: "The default Vue slot",
|
16
|
+
control: {
|
17
|
+
type: 'text',
|
18
|
+
},
|
19
|
+
table: {
|
20
|
+
category: 'Slots',
|
21
|
+
type: {
|
22
|
+
summary: 'html',
|
23
|
+
},
|
24
|
+
}
|
25
|
+
}
|
26
|
+
},
|
27
|
+
};
|
28
|
+
|
29
|
+
// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
|
30
|
+
const Template = (args, { argTypes }) => ({
|
31
|
+
props: Object.keys(argTypes),
|
32
|
+
components: { MgSocialButton },
|
33
|
+
template: `<mg-social-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-social-button>`,
|
34
|
+
});
|
35
|
+
|
36
|
+
export const Facebook = Template.bind({});
|
37
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
38
|
+
Facebook.args = {
|
39
|
+
channel: 'facebook',
|
40
|
+
default: 'Accedi con Facebook'
|
41
|
+
};
|
42
|
+
|
43
|
+
export const Google = Template.bind({});
|
44
|
+
Google.args = {
|
45
|
+
channel: 'google',
|
46
|
+
default: 'Accedi con Google'
|
47
|
+
};
|
48
|
+
|
49
|
+
export const Disabled = Template.bind({});
|
50
|
+
Disabled.args = {
|
51
|
+
disabled: true,
|
52
|
+
channel: 'google',
|
53
|
+
default: 'Accedi con Google'
|
54
|
+
};
|
@@ -0,0 +1,83 @@
|
|
1
|
+
<template>
|
2
|
+
<a
|
3
|
+
class="p-3 d-flex align-items-center w-100 text-white border-0"
|
4
|
+
:class="classes"
|
5
|
+
:href="href"
|
6
|
+
:disabled="disabled"
|
7
|
+
@click="$emit('click')"
|
8
|
+
>
|
9
|
+
<span class="flex-grow-0"><svgicon :name="channel"></svgicon></span>
|
10
|
+
<span class="flex-grow-1 text-center"><slot></slot></span>
|
11
|
+
</a>
|
12
|
+
</template>
|
13
|
+
|
14
|
+
<script>
|
15
|
+
export default {
|
16
|
+
name: 'mg-social-button',
|
17
|
+
|
18
|
+
props: {
|
19
|
+
disabled: {
|
20
|
+
type: Boolean,
|
21
|
+
default: false,
|
22
|
+
},
|
23
|
+
channel: {
|
24
|
+
type: String,
|
25
|
+
default: 'facebook',
|
26
|
+
validator: function (value) {
|
27
|
+
return ['facebook', 'google'].indexOf(value) !== -1;
|
28
|
+
},
|
29
|
+
},
|
30
|
+
href: {
|
31
|
+
type: String
|
32
|
+
}
|
33
|
+
},
|
34
|
+
|
35
|
+
computed: {
|
36
|
+
classes() {
|
37
|
+
return {
|
38
|
+
'mg-social-button': true,
|
39
|
+
'mg-social-button--disabled': this.disabled,
|
40
|
+
'mg-social-button--facebook': this.channel === 'facebook',
|
41
|
+
'mg-social-button--google': this.channel === 'google',
|
42
|
+
};
|
43
|
+
}
|
44
|
+
},
|
45
|
+
|
46
|
+
methods: {
|
47
|
+
onClick() {
|
48
|
+
this.$emit('click');
|
49
|
+
},
|
50
|
+
},
|
51
|
+
}
|
52
|
+
</script>
|
53
|
+
|
54
|
+
<style lang="scss">
|
55
|
+
@import '../../../assets/palette';
|
56
|
+
|
57
|
+
.mg-social-button {
|
58
|
+
appearance: none;
|
59
|
+
cursor: pointer;
|
60
|
+
font-family: 'Raleway', sans-serif;
|
61
|
+
font-size: 0.8125rem;
|
62
|
+
font-weight: 700;
|
63
|
+
outline: none;
|
64
|
+
|
65
|
+
svg {
|
66
|
+
fill: white;
|
67
|
+
width: 1rem;
|
68
|
+
}
|
69
|
+
|
70
|
+
&--facebook {
|
71
|
+
background-color: #4671b8;
|
72
|
+
}
|
73
|
+
|
74
|
+
&--google {
|
75
|
+
background-color: #328bee;
|
76
|
+
}
|
77
|
+
|
78
|
+
&--disabled {
|
79
|
+
opacity: 0.6 !important;
|
80
|
+
cursor: not-allowed !important;
|
81
|
+
}
|
82
|
+
}
|
83
|
+
</style>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.2125C9.18 4.2125 8.694 4.806 8.694 5.616V8.37H13.5V12.3665H8.694V24.3005H4.104V12.3665H0V8.37H4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5V4.2125H9.666Z" fill="white"/>
|
3
|
+
</svg>
|
@@ -0,0 +1,3 @@
|
|
1
|
+
<svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<path d="M9.00327 7.41519V10.854H13.9025C13.2635 12.9379 11.5216 14.4295 9.00327 14.4295C6.00472 14.429 3.5739 11.9986 3.573 9.00001C3.57278 7.55975 4.14483 6.17841 5.16325 5.15999C6.18167 4.14157 7.56301 3.56952 9.00327 3.56974C10.3516 3.56974 11.5822 4.06556 12.5313 4.88046L15.0627 2.34574C13.4073 0.833677 11.2453 -0.00324253 9.00327 9.4415e-06C4.03036 9.4415e-06 0 4.03037 0 9.00001C0 13.9696 4.03036 18 9.00327 18C16.5584 18 18.2266 10.9334 17.4854 7.42746L9.00327 7.41519Z" fill="white"/>
|
3
|
+
</svg>
|