@magicgol/polyjuice 0.14.1 → 0.16.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/.storybook/main.js +8 -0
- package/.storybook/preview-head.html +1 -1
- package/package.json +1 -1
- package/src/assets/palette.scss +1 -0
- 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 +23 -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.stories.js +5 -0
- package/src/components/card/vertical-card/VCard.vue +28 -4
- package/src/components/footballer/role-badge/RoleBadge.stories.js +14 -2
- package/src/components/footballer/role-badge/RoleBadge.vue +16 -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/label/traffic-light/TrafficLight.stories.js +41 -0
- package/src/components/label/traffic-light/TrafficLight.vue +57 -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 +81 -0
- package/src/components/typography/h1/HeadingOne.stories.js +1 -1
- package/src/components/typography/h3/HeadingThree.stories.js +34 -0
- package/src/components/typography/h3/HeadingThree.vue +25 -0
- package/src/components/typography/h4/HeadingFour.stories.js +1 -1
- package/src/components/typography/h6/HeadingSix.stories.js +1 -1
- 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
package/src/assets/palette.scss
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,23 @@
|
|
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="p-4">
|
12
|
+
<div class="px-2">
|
13
|
+
<slot></slot>
|
14
|
+
</div>
|
15
|
+
</div>
|
16
|
+
</div>
|
17
|
+
</template>
|
18
|
+
|
19
|
+
<script>
|
20
|
+
export default {
|
21
|
+
name: 'mg-filing-cabinet'
|
22
|
+
};
|
23
|
+
</script>
|
@@ -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>
|
@@ -4,9 +4,9 @@
|
|
4
4
|
:class="classes"
|
5
5
|
@click="onClick"
|
6
6
|
>
|
7
|
-
<div class="p-3
|
7
|
+
<div class="mg-v-card-content p-3"><slot></slot></div>
|
8
8
|
<div
|
9
|
-
class="mg-footer p-3"
|
9
|
+
class="mg-v-card-footer p-3"
|
10
10
|
v-if="footerVisibility"
|
11
11
|
><slot name="footer"></slot></div>
|
12
12
|
</div>
|
@@ -16,14 +16,25 @@
|
|
16
16
|
export default {
|
17
17
|
name: 'mg-v-card',
|
18
18
|
|
19
|
+
props: {
|
20
|
+
theme: {
|
21
|
+
type: String,
|
22
|
+
default: null,
|
23
|
+
validator: function (value) {
|
24
|
+
return ['club'].indexOf(value) !== -1;
|
25
|
+
},
|
26
|
+
}
|
27
|
+
},
|
28
|
+
|
19
29
|
computed: {
|
20
30
|
classes() {
|
21
31
|
return {
|
22
32
|
'mg-v-card': true,
|
33
|
+
'mg-v-card--theme-club': this.theme === 'club',
|
23
34
|
};
|
24
35
|
},
|
25
36
|
footerVisibility() {
|
26
|
-
return 'footer' in this.$slots;
|
37
|
+
return 'footer' in this.$slots && !!this.$slots.footer;
|
27
38
|
}
|
28
39
|
},
|
29
40
|
|
@@ -41,7 +52,20 @@ export default {
|
|
41
52
|
.mg-v-card {
|
42
53
|
box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
|
43
54
|
|
44
|
-
|
55
|
+
&-content {
|
56
|
+
background: white;
|
57
|
+
}
|
58
|
+
|
59
|
+
&--theme {
|
60
|
+
&-club {
|
61
|
+
& .mg-v-card-content {
|
62
|
+
background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
|
63
|
+
color: #777;
|
64
|
+
}
|
65
|
+
}
|
66
|
+
}
|
67
|
+
|
68
|
+
&-footer {
|
45
69
|
background-color: rgba(map-get($palette, 'brand'), 0.04);
|
46
70
|
}
|
47
71
|
}
|
@@ -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,20 @@ 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
|
+
border: 2px solid #fff;
|
75
|
+
font-size: 1.25rem;
|
76
|
+
height: 2.75rem;
|
77
|
+
width: 2.75rem;
|
78
|
+
min-width: 2.75rem;
|
79
|
+
}
|
80
|
+
|
68
81
|
&--goalkeeper {
|
69
82
|
background-color: map-get($palette, 'goalkeeper');
|
70
83
|
}
|
@@ -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,41 @@
|
|
1
|
+
import MgTrafficLight from './TrafficLight.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Label/Traffic Light',
|
6
|
+
component: MgTrafficLight,
|
7
|
+
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
8
|
+
argTypes: {
|
9
|
+
light: {
|
10
|
+
control: { type: 'select' },
|
11
|
+
options: ['red', 'yellow', 'green'],
|
12
|
+
defaultValue: 'green'
|
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: { MgTrafficLight },
|
33
|
+
template: `<mg-traffic-light v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-traffic-light>`,
|
34
|
+
});
|
35
|
+
|
36
|
+
export const Default = Template.bind({});
|
37
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
38
|
+
Default.args = {
|
39
|
+
light: 'green',
|
40
|
+
default: '300',
|
41
|
+
};
|
@@ -0,0 +1,57 @@
|
|
1
|
+
<template>
|
2
|
+
<div
|
3
|
+
class="d-inline-flex bg-white align-items-center px-3"
|
4
|
+
:class="classes"
|
5
|
+
>
|
6
|
+
<div><slot></slot></div>
|
7
|
+
</div>
|
8
|
+
</template>
|
9
|
+
|
10
|
+
<script>
|
11
|
+
export default {
|
12
|
+
name: 'mg-traffic-light',
|
13
|
+
|
14
|
+
props: {
|
15
|
+
light: {
|
16
|
+
type: String,
|
17
|
+
default: 'green',
|
18
|
+
validator: function (value) {
|
19
|
+
return ['red', 'yellow', 'green'].indexOf(value) !== -1;
|
20
|
+
},
|
21
|
+
},
|
22
|
+
},
|
23
|
+
|
24
|
+
computed: {
|
25
|
+
classes() {
|
26
|
+
return {
|
27
|
+
'mg-traffic-light': true,
|
28
|
+
'mg-traffic-light--error': this.light === 'red',
|
29
|
+
'mg-traffic-light--warning': this.light === 'yellow',
|
30
|
+
'mg-traffic-light--success': this.light === 'green',
|
31
|
+
};
|
32
|
+
}
|
33
|
+
},
|
34
|
+
};
|
35
|
+
</script>
|
36
|
+
|
37
|
+
<style lang="scss">
|
38
|
+
@import '../../../assets/palette';
|
39
|
+
|
40
|
+
.mg-traffic-light {
|
41
|
+
border: 2px solid;
|
42
|
+
border-radius: 50px;
|
43
|
+
height: 2.25rem;
|
44
|
+
|
45
|
+
&--error {
|
46
|
+
border-color: map-get($palette, 'error');
|
47
|
+
}
|
48
|
+
|
49
|
+
&--warning {
|
50
|
+
border-color: map-get($palette, 'warning');
|
51
|
+
}
|
52
|
+
|
53
|
+
&--success {
|
54
|
+
border-color: map-get($palette, 'success');
|
55
|
+
}
|
56
|
+
}
|
57
|
+
</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,81 @@
|
|
1
|
+
<template>
|
2
|
+
<button
|
3
|
+
type="button"
|
4
|
+
class="p-3 d-flex align-items-center w-100 text-white border-0"
|
5
|
+
:class="classes"
|
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
|
+
</button>
|
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
|
+
},
|
31
|
+
|
32
|
+
computed: {
|
33
|
+
classes() {
|
34
|
+
return {
|
35
|
+
'mg-social-button': true,
|
36
|
+
'mg-social-button--disabled': this.disabled,
|
37
|
+
'mg-social-button--facebook': this.channel === 'facebook',
|
38
|
+
'mg-social-button--google': this.channel === 'google',
|
39
|
+
};
|
40
|
+
}
|
41
|
+
},
|
42
|
+
|
43
|
+
methods: {
|
44
|
+
onClick() {
|
45
|
+
this.$emit('click');
|
46
|
+
},
|
47
|
+
},
|
48
|
+
}
|
49
|
+
</script>
|
50
|
+
|
51
|
+
<style lang="scss">
|
52
|
+
@import '../../../assets/palette';
|
53
|
+
|
54
|
+
.mg-social-button {
|
55
|
+
appearance: none;
|
56
|
+
cursor: pointer;
|
57
|
+
font-family: 'Raleway', sans-serif;
|
58
|
+
font-size: 0.8125rem;
|
59
|
+
font-weight: 700;
|
60
|
+
outline: none;
|
61
|
+
text-decoration: none;
|
62
|
+
|
63
|
+
svg {
|
64
|
+
fill: white;
|
65
|
+
width: 1rem;
|
66
|
+
}
|
67
|
+
|
68
|
+
&--facebook {
|
69
|
+
background-color: #4671b8;
|
70
|
+
}
|
71
|
+
|
72
|
+
&--google {
|
73
|
+
background-color: #328bee;
|
74
|
+
}
|
75
|
+
|
76
|
+
&--disabled {
|
77
|
+
opacity: 0.6 !important;
|
78
|
+
cursor: not-allowed !important;
|
79
|
+
}
|
80
|
+
}
|
81
|
+
</style>
|
@@ -0,0 +1,34 @@
|
|
1
|
+
import MgHeadingThree from './HeadingThree.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Typography/Heading/H3',
|
6
|
+
component: MgHeadingThree,
|
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 => ({
|
26
|
+
components: { MgHeadingThree },
|
27
|
+
template: `<mg-heading-three><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-three>`,
|
28
|
+
});
|
29
|
+
|
30
|
+
export const Default = Template.bind({});
|
31
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
32
|
+
Default.args = {
|
33
|
+
default: 'heading 3'
|
34
|
+
};
|
@@ -0,0 +1,25 @@
|
|
1
|
+
<template>
|
2
|
+
<div v-bind:class="classes"><slot></slot></div>
|
3
|
+
</template>
|
4
|
+
|
5
|
+
<script>
|
6
|
+
export default {
|
7
|
+
name: 'mg-heading-three',
|
8
|
+
|
9
|
+
computed: {
|
10
|
+
classes() {
|
11
|
+
return {
|
12
|
+
'mg-h3': true,
|
13
|
+
};
|
14
|
+
}
|
15
|
+
},
|
16
|
+
};
|
17
|
+
</script>
|
18
|
+
|
19
|
+
<style lang="scss">
|
20
|
+
.mg-h3 {
|
21
|
+
font-family: 'Ubuntu', sans-serif;
|
22
|
+
font-size: 1rem;
|
23
|
+
font-weight: 500;
|
24
|
+
}
|
25
|
+
</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>
|