@magicgol/polyjuice 0.37.6 → 0.38.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/assets/palette.scss +1 -1
- package/src/components/components/icon-badge/IconBadge.vue +4 -4
- package/src/components/components/label/Label.vue +2 -2
- package/src/components/content/container/Container.stories.js +44 -0
- package/src/components/content/container/Container.vue +46 -0
- package/src/components/context/club/button/primary-club-button/PrimaryClubButton.vue +1 -1
- package/src/components/context/club/button/secondary-club-button/SecondaryClubButton.vue +2 -2
- package/src/components/context/club/plate/ClubPlate.vue +2 -2
- package/src/components/context/club/square/ClubSquare.vue +1 -1
- package/src/components/context/club/star/ClubStar.vue +2 -2
- package/src/components/typography/h5/HeadingFive.vue +1 -1
- package/src/documentation/Brand.stories.mdx +2 -2
- package/src/documentation/Result.stories.mdx +10 -0
package/package.json
CHANGED
package/src/assets/palette.scss
CHANGED
|
@@ -103,10 +103,10 @@ export default {
|
|
|
103
103
|
}
|
|
104
104
|
|
|
105
105
|
&-club {
|
|
106
|
-
background-color: rgba(map-get($palette, '
|
|
106
|
+
background-color: rgba(map-get($palette, 'club'), 0.05);
|
|
107
107
|
|
|
108
108
|
svg {
|
|
109
|
-
fill: map-get($palette, '
|
|
109
|
+
fill: map-get($palette, 'club');
|
|
110
110
|
}
|
|
111
111
|
}
|
|
112
112
|
|
|
@@ -139,10 +139,10 @@ export default {
|
|
|
139
139
|
}
|
|
140
140
|
|
|
141
141
|
&-club {
|
|
142
|
-
background-color: map-get($palette, '
|
|
142
|
+
background-color: map-get($palette, 'club');
|
|
143
143
|
|
|
144
144
|
svg {
|
|
145
|
-
fill: mix(white, map-get($palette, '
|
|
145
|
+
fill: mix(white, map-get($palette, 'club'), 90%);
|
|
146
146
|
}
|
|
147
147
|
}
|
|
148
148
|
|
|
@@ -93,8 +93,8 @@ export default {
|
|
|
93
93
|
|
|
94
94
|
&-club {
|
|
95
95
|
background: #fff;
|
|
96
|
-
border-color: map-get($palette, '
|
|
97
|
-
color: map-get($palette, '
|
|
96
|
+
border-color: map-get($palette, 'club');;
|
|
97
|
+
color: map-get($palette, 'club');;
|
|
98
98
|
}
|
|
99
99
|
|
|
100
100
|
&-goalkeeper {
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
import MgContainer from './Container.vue';
|
|
2
|
+
|
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
|
4
|
+
export default {
|
|
5
|
+
title: 'Content/Container',
|
|
6
|
+
component: MgContainer,
|
|
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: { MgContainer },
|
|
28
|
+
template: `<mg-container @click="$emit('click')" v-bind="$props">
|
|
29
|
+
<template v-if="${'default' in args}" v-slot>${args.default}</template>
|
|
30
|
+
</mg-container>`,
|
|
31
|
+
});
|
|
32
|
+
|
|
33
|
+
export const Default = Template.bind({});
|
|
34
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
|
35
|
+
Default.args = {
|
|
36
|
+
default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
|
|
37
|
+
};
|
|
38
|
+
|
|
39
|
+
export const Club = Template.bind({});
|
|
40
|
+
// More on args: https://storybook.js.org/docs/vue/writing-stories/args
|
|
41
|
+
Club.args = {
|
|
42
|
+
theme: 'club',
|
|
43
|
+
default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
|
|
44
|
+
};
|
|
@@ -0,0 +1,46 @@
|
|
|
1
|
+
<template>
|
|
2
|
+
<div
|
|
3
|
+
:class="classes"
|
|
4
|
+
>
|
|
5
|
+
<slot></slot>
|
|
6
|
+
</div>
|
|
7
|
+
</template>
|
|
8
|
+
|
|
9
|
+
<script>
|
|
10
|
+
export default {
|
|
11
|
+
name: 'mg-container',
|
|
12
|
+
|
|
13
|
+
props: {
|
|
14
|
+
theme: {
|
|
15
|
+
type: String,
|
|
16
|
+
default: null,
|
|
17
|
+
validator: function (value) {
|
|
18
|
+
return [
|
|
19
|
+
'club'
|
|
20
|
+
].indexOf(value) !== -1;
|
|
21
|
+
},
|
|
22
|
+
}
|
|
23
|
+
},
|
|
24
|
+
|
|
25
|
+
computed: {
|
|
26
|
+
classes() {
|
|
27
|
+
return {
|
|
28
|
+
'mg-container': true,
|
|
29
|
+
'mg-container-theme--club': this.theme === 'club',
|
|
30
|
+
};
|
|
31
|
+
}
|
|
32
|
+
},
|
|
33
|
+
};
|
|
34
|
+
</script>
|
|
35
|
+
|
|
36
|
+
<style lang="scss">
|
|
37
|
+
@import '../../../assets/palette';
|
|
38
|
+
|
|
39
|
+
.mg-container {
|
|
40
|
+
&-theme {
|
|
41
|
+
&--club {
|
|
42
|
+
background-color: map-get($palette, 'club');
|
|
43
|
+
}
|
|
44
|
+
}
|
|
45
|
+
}
|
|
46
|
+
</style>
|
|
@@ -62,7 +62,7 @@ export default {
|
|
|
62
62
|
|
|
63
63
|
.mg-primary-club-button {
|
|
64
64
|
appearance: none;
|
|
65
|
-
background-color: map-get($palette, '
|
|
65
|
+
background-color: map-get($palette, 'club');
|
|
66
66
|
box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
|
|
67
67
|
cursor: pointer;
|
|
68
68
|
font-family: 'Ubuntu', sans-serif;
|
|
@@ -57,10 +57,10 @@ export default {
|
|
|
57
57
|
|
|
58
58
|
.mg-secondary-club-button {
|
|
59
59
|
appearance: none;
|
|
60
|
-
border: 2px solid map-get($palette, '
|
|
60
|
+
border: 2px solid map-get($palette, 'club');
|
|
61
61
|
box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
|
|
62
62
|
box-sizing: border-box;
|
|
63
|
-
color: map-get($palette, '
|
|
63
|
+
color: map-get($palette, 'club');
|
|
64
64
|
cursor: pointer;
|
|
65
65
|
font-size: 1rem;
|
|
66
66
|
font-family: 'Ubuntu', sans-serif;
|
|
@@ -42,13 +42,13 @@ export default {
|
|
|
42
42
|
@import '../../../../assets/palette';
|
|
43
43
|
|
|
44
44
|
.mg-club-plate {
|
|
45
|
-
color: map-get($palette, '
|
|
45
|
+
color: map-get($palette, 'club');
|
|
46
46
|
font-family: 'Ubuntu', sans-serif;
|
|
47
47
|
font-size: 0.75rem;
|
|
48
48
|
font-weight: 700;
|
|
49
49
|
|
|
50
50
|
svg {
|
|
51
|
-
fill: map-get($palette, '
|
|
51
|
+
fill: map-get($palette, 'club');
|
|
52
52
|
height: 1.5rem;
|
|
53
53
|
min-height: 1.5rem;
|
|
54
54
|
min-width: 1.5rem;
|
|
@@ -63,7 +63,7 @@ export default {
|
|
|
63
63
|
@import '../../../../assets/palette';
|
|
64
64
|
|
|
65
65
|
.mg-club-star {
|
|
66
|
-
color: map-get($palette, '
|
|
66
|
+
color: map-get($palette, 'club');
|
|
67
67
|
|
|
68
68
|
div {
|
|
69
69
|
font-family: Ubuntu, sans-serif;
|
|
@@ -72,7 +72,7 @@ export default {
|
|
|
72
72
|
}
|
|
73
73
|
|
|
74
74
|
svg {
|
|
75
|
-
fill: map-get($palette, '
|
|
75
|
+
fill: map-get($palette, 'club');
|
|
76
76
|
}
|
|
77
77
|
|
|
78
78
|
&-size {
|
|
@@ -4,7 +4,7 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
|
|
|
4
4
|
|
|
5
5
|
<ColorPalette>
|
|
6
6
|
<ColorItem
|
|
7
|
-
title="Brand
|
|
7
|
+
title="Brand"
|
|
8
8
|
colors={{'Razzmatazz': '#d81159'}}
|
|
9
9
|
/>
|
|
10
10
|
<ColorItem
|
|
@@ -16,7 +16,7 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
|
|
|
16
16
|
colors={{'Golden Rod': '#ffcf73'}}
|
|
17
17
|
/>
|
|
18
18
|
<ColorItem
|
|
19
|
-
title="
|
|
19
|
+
title="Club"
|
|
20
20
|
colors={{'Teal Blue': '#075169'}}
|
|
21
21
|
/>
|
|
22
22
|
</ColorPalette>
|