@magicgol/polyjuice 0.50.2 → 0.51.0
Sign up to get free protection for your applications and to get access to all the features.
- package/package.json +6 -5
- package/src/assets/svg/facebook.js +2 -2
- package/src/assets/svg/google.js +2 -2
- package/src/components/form/button/primary-button/PrimaryButton.vue +2 -1
- package/src/components/form/button/secondary-button/SecondaryButton.stories.js +5 -0
- package/src/components/form/button/secondary-button/SecondaryButton.vue +22 -2
- package/src/components/form/form/Form.stories.js +35 -0
- package/src/components/form/form/Form.vue +56 -0
- package/src/components/social/button/SocialButton.vue +8 -4
- package/src/svg/facebook.svg +2 -2
- package/src/svg/google.svg +6 -2
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@magicgol/polyjuice",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.51.0",
|
4
4
|
"scripts": {
|
5
5
|
"serve": "vue-cli-service serve",
|
6
6
|
"build": "vue-cli-service build",
|
@@ -14,16 +14,17 @@
|
|
14
14
|
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
15
15
|
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
16
16
|
"@fortawesome/vue-fontawesome": "^2.0.6",
|
17
|
+
"bootstrap": "^5.2.3",
|
17
18
|
"core-js": "^3.6.5",
|
18
19
|
"vue": "^2.6.11"
|
19
20
|
},
|
20
21
|
"devDependencies": {
|
21
22
|
"@babel/core": "^7.17.9",
|
22
|
-
"@storybook/addon-actions": "^6.5.
|
23
|
-
"@storybook/addon-essentials": "^6.5.
|
24
|
-
"@storybook/addon-links": "^6.5.
|
23
|
+
"@storybook/addon-actions": "^6.5.16",
|
24
|
+
"@storybook/addon-essentials": "^6.5.16",
|
25
|
+
"@storybook/addon-links": "^6.5.16",
|
25
26
|
"@storybook/preset-scss": "^1.0.3",
|
26
|
-
"@storybook/vue": "^6.5.
|
27
|
+
"@storybook/vue": "^6.5.16",
|
27
28
|
"@vue/cli-plugin-babel": "~4.5.15",
|
28
29
|
"@vue/cli-plugin-eslint": "~4.5.15",
|
29
30
|
"@vue/cli-service": "~4.5.15",
|
@@ -4,7 +4,7 @@ icon.register({
|
|
4
4
|
'facebook': {
|
5
5
|
width: 16,
|
6
6
|
height: 16,
|
7
|
-
viewBox: '0 0
|
8
|
-
data: '<path pid="0"
|
7
|
+
viewBox: '0 0 23 24',
|
8
|
+
data: '<path pid="0" d="M23 12.07C23 5.719 17.851.57 11.5.57S0 5.719 0 12.07c0 5.74 4.205 10.497 9.703 11.36v-8.036h-2.92V12.07h2.92V9.536c0-2.882 1.717-4.474 4.344-4.474 1.258 0 2.574.225 2.574.225v2.83h-1.45c-1.429 0-1.874.886-1.874 1.796v2.157h3.19l-.51 3.324h-2.68v8.036C18.795 22.567 23 17.81 23 12.07z" _fill="#fff"/>'
|
9
9
|
}
|
10
10
|
})
|
package/src/assets/svg/google.js
CHANGED
@@ -4,7 +4,7 @@ icon.register({
|
|
4
4
|
'google': {
|
5
5
|
width: 16,
|
6
6
|
height: 16,
|
7
|
-
viewBox: '0 0
|
8
|
-
data: '<
|
7
|
+
viewBox: '0 0 24 24',
|
8
|
+
data: '<rect pid="0" _fill="#fff"/><path pid="1" fill-rule="evenodd" clip-rule="evenodd" d="M23.04 12.261c0-.815-.073-1.6-.21-2.352H12v4.448h6.19a5.29 5.29 0 01-2.296 3.471v2.886h3.717c2.174-2.002 3.429-4.95 3.429-8.453z" fill="#4285F4"/><path pid="2" fill-rule="evenodd" clip-rule="evenodd" d="M12 23.5c3.105 0 5.708-1.03 7.61-2.786l-3.716-2.886c-1.03.69-2.347 1.098-3.894 1.098-2.995 0-5.53-2.023-6.435-4.741H1.723v2.98A11.496 11.496 0 0012 23.5z" fill="#34A853"/><path pid="3" fill-rule="evenodd" clip-rule="evenodd" d="M5.565 14.185A6.913 6.913 0 015.205 12c0-.758.13-1.495.36-2.185v-2.98H1.723A11.496 11.496 0 00.5 12c0 1.856.444 3.612 1.223 5.165l3.842-2.98z" fill="#FBBC05"/><path pid="4" fill-rule="evenodd" clip-rule="evenodd" d="M12 5.074c1.688 0 3.204.58 4.396 1.72l3.299-3.299C17.703 1.64 15.1.5 12 .5A11.496 11.496 0 001.723 6.835l3.842 2.98C6.47 7.097 9.005 5.074 12 5.074z" fill="#EA4335"/>'
|
9
9
|
}
|
10
10
|
})
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<template>
|
2
2
|
<button
|
3
|
-
class="d-block w-100
|
3
|
+
class="d-block w-100 text-white text-uppercase"
|
4
4
|
:class="classes"
|
5
5
|
:type="type"
|
6
6
|
:disabled="disabled"
|
@@ -59,6 +59,7 @@ export default {
|
|
59
59
|
appearance: none;
|
60
60
|
background-color: map-get($palette, 'brand');
|
61
61
|
border: 1px solid map-get($palette, 'brand');
|
62
|
+
border-radius: 15px;
|
62
63
|
cursor: pointer;
|
63
64
|
font-family: 'Ubuntu', sans-serif;
|
64
65
|
font-weight: 500;
|
@@ -6,6 +6,11 @@ export default {
|
|
6
6
|
component: MgSecondaryButton,
|
7
7
|
// More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
|
8
8
|
argTypes: {
|
9
|
+
size: {
|
10
|
+
control: { type: 'select' },
|
11
|
+
options: ['normal', 'large'],
|
12
|
+
defaultValue: 'normal'
|
13
|
+
},
|
9
14
|
default: {
|
10
15
|
description: "The default Vue slot",
|
11
16
|
control: {
|
@@ -1,6 +1,6 @@
|
|
1
1
|
<template>
|
2
2
|
<button
|
3
|
-
class="d-block bg-white w-100
|
3
|
+
class="d-block bg-white w-100 text-uppercase text-center text-decoration-none"
|
4
4
|
:class="classes"
|
5
5
|
:disabled="disabled"
|
6
6
|
@click="onClick"
|
@@ -16,12 +16,21 @@ export default {
|
|
16
16
|
type: Boolean,
|
17
17
|
default: false,
|
18
18
|
},
|
19
|
+
size: {
|
20
|
+
type: String,
|
21
|
+
default: 'normal',
|
22
|
+
validator: function (value) {
|
23
|
+
return ['large', 'normal'].indexOf(value) !== -1;
|
24
|
+
},
|
25
|
+
},
|
19
26
|
},
|
20
27
|
|
21
28
|
computed: {
|
22
29
|
classes() {
|
23
30
|
return {
|
24
31
|
'mg-secondary-button': true,
|
32
|
+
'mg-secondary-button-size-normal': this.size === 'normal',
|
33
|
+
'mg-secondary-button-size-large': this.size === 'large',
|
25
34
|
'mg-secondary-button--disabled': this.disabled,
|
26
35
|
};
|
27
36
|
}
|
@@ -41,13 +50,24 @@ export default {
|
|
41
50
|
.mg-secondary-button {
|
42
51
|
appearance: none;
|
43
52
|
border: 1px solid map-get($palette, 'brand');
|
53
|
+
border-radius: 15px;
|
44
54
|
color: map-get($palette, 'brand');
|
45
55
|
cursor: pointer;
|
46
56
|
font-family: 'Ubuntu', sans-serif;
|
47
|
-
font-size: 0.8215rem;
|
48
57
|
font-weight: 500;
|
49
58
|
outline: none;
|
50
59
|
|
60
|
+
&-size {
|
61
|
+
&-normal {
|
62
|
+
font-size: 0.8215rem;
|
63
|
+
padding: 0.5rem;
|
64
|
+
}
|
65
|
+
&-large {
|
66
|
+
font-size: 1rem;
|
67
|
+
padding: 1rem;
|
68
|
+
}
|
69
|
+
}
|
70
|
+
|
51
71
|
&--disabled {
|
52
72
|
opacity: 0.6 !important;
|
53
73
|
cursor: not-allowed !important;
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import MgForm from './Form.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Form/Form',
|
6
|
+
component: MgForm,
|
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: { MgForm },
|
28
|
+
template: `<mg-form @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-form>`,
|
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
|
+
default: 'form container'
|
35
|
+
};
|
@@ -0,0 +1,56 @@
|
|
1
|
+
<template>
|
2
|
+
<form
|
3
|
+
class="p-2 p-md-4 mx-auto"
|
4
|
+
:class="classes"
|
5
|
+
@click="onClick"
|
6
|
+
@submit.prevent="$emit('submit.prevent')"
|
7
|
+
><slot></slot></form>
|
8
|
+
</template>
|
9
|
+
|
10
|
+
<script>
|
11
|
+
export default {
|
12
|
+
name: 'mg-form',
|
13
|
+
|
14
|
+
props: {
|
15
|
+
border: {
|
16
|
+
type: Boolean,
|
17
|
+
default: false,
|
18
|
+
},
|
19
|
+
},
|
20
|
+
|
21
|
+
computed: {
|
22
|
+
classes() {
|
23
|
+
return {
|
24
|
+
'mg-form': true,
|
25
|
+
'mg-form--bordered': this.border === true,
|
26
|
+
};
|
27
|
+
}
|
28
|
+
},
|
29
|
+
|
30
|
+
methods: {
|
31
|
+
onClick() {
|
32
|
+
this.$emit('click');
|
33
|
+
},
|
34
|
+
},
|
35
|
+
};
|
36
|
+
</script>
|
37
|
+
|
38
|
+
<style lang="scss">
|
39
|
+
@import '~bootstrap/scss/functions';
|
40
|
+
@import '~bootstrap/scss/variables';
|
41
|
+
@import '~bootstrap/scss/mixins/breakpoints';
|
42
|
+
|
43
|
+
.mg-form {
|
44
|
+
max-width: 570px;
|
45
|
+
}
|
46
|
+
|
47
|
+
@include media-breakpoint-up(md) {
|
48
|
+
.mg-form {
|
49
|
+
border-radius: 16px;
|
50
|
+
|
51
|
+
&--bordered {
|
52
|
+
border: 1px solid #d9d9d9;
|
53
|
+
}
|
54
|
+
}
|
55
|
+
}
|
56
|
+
</style>
|
@@ -1,7 +1,7 @@
|
|
1
1
|
<template>
|
2
2
|
<button
|
3
3
|
type="button"
|
4
|
-
class="p-3 d-flex align-items-center w-100
|
4
|
+
class="p-3 d-flex align-items-center w-100 border-0"
|
5
5
|
:class="classes"
|
6
6
|
:disabled="disabled"
|
7
7
|
@click="$emit('click')"
|
@@ -53,10 +53,11 @@ export default {
|
|
53
53
|
|
54
54
|
.mg-social-button {
|
55
55
|
appearance: none;
|
56
|
+
border-radius: 10px;
|
56
57
|
cursor: pointer;
|
57
58
|
font-family: 'Raleway', sans-serif;
|
58
|
-
font-size:
|
59
|
-
font-weight:
|
59
|
+
font-size: 1rem;
|
60
|
+
font-weight: 600;
|
60
61
|
outline: none;
|
61
62
|
text-decoration: none;
|
62
63
|
|
@@ -68,10 +69,13 @@ export default {
|
|
68
69
|
|
69
70
|
&--facebook {
|
70
71
|
background-color: #4671b8;
|
72
|
+
color: #fff;
|
71
73
|
}
|
72
74
|
|
73
75
|
&--google {
|
74
|
-
background
|
76
|
+
background: #fff;
|
77
|
+
color: #626262;
|
78
|
+
box-shadow: 0 0 3px rgba(0, 0, 0, 0.084), 0 2px 3px rgba(0, 0, 0, 0.168);
|
75
79
|
}
|
76
80
|
|
77
81
|
&--disabled {
|
package/src/svg/facebook.svg
CHANGED
@@ -1,3 +1,3 @@
|
|
1
|
-
<svg viewBox="0 0
|
2
|
-
<path
|
1
|
+
<svg viewBox="0 0 23 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<path d="M23 12.0698C23 5.71857 17.8513 0.569849 11.5 0.569849C5.14872 0.569849 0 5.71857 0 12.0698C0 17.8098 4.20538 22.5674 9.70312 23.4301V15.3941H6.7832V12.0698H9.70312V9.53626C9.70312 6.65407 11.42 5.06204 14.0468 5.06204C15.305 5.06204 16.6211 5.28665 16.6211 5.28665V8.11672H15.171C13.7424 8.11672 13.2969 9.00319 13.2969 9.91263V12.0698H16.4863L15.9765 15.3941H13.2969V23.4301C18.7946 22.5674 23 17.8098 23 12.0698Z" fill="white"/>
|
3
3
|
</svg>
|
package/src/svg/google.svg
CHANGED
@@ -1,3 +1,7 @@
|
|
1
|
-
<svg viewBox="0 0
|
2
|
-
<
|
1
|
+
<svg viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
2
|
+
<rect fill="white"/>
|
3
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.04 12.2614C23.04 11.4459 22.9668 10.6618 22.8309 9.90909H12V14.3575H18.1891C17.9225 15.795 17.1123 17.013 15.8943 17.8284V20.7139H19.6109C21.7855 18.7118 23.04 15.7636 23.04 12.2614Z" fill="#4285F4"/>
|
4
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 23.4998C15.105 23.4998 17.7081 22.4701 19.6109 20.7137L15.8943 17.8283C14.8645 18.5183 13.5472 18.926 12 18.926C9.00474 18.926 6.46951 16.903 5.56519 14.1848H1.72314V17.1644C3.61542 20.9228 7.50451 23.4998 12 23.4998Z" fill="#34A853"/>
|
5
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.56523 14.1851C5.33523 13.4951 5.20455 12.758 5.20455 12.0001C5.20455 11.2421 5.33523 10.5051 5.56523 9.81506V6.83551H1.72318C0.944318 8.38801 0.5 10.1444 0.5 12.0001C0.5 13.8557 0.944318 15.6121 1.72318 17.1646L5.56523 14.1851Z" fill="#FBBC05"/>
|
6
|
+
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 5.07386C13.6884 5.07386 15.2043 5.65409 16.3961 6.79364L19.6945 3.49523C17.7029 1.63955 15.0997 0.5 12 0.5C7.50451 0.5 3.61542 3.07705 1.72314 6.83545L5.56519 9.815C6.46951 7.09682 9.00474 5.07386 12 5.07386Z" fill="#EA4335"/>
|
3
7
|
</svg>
|