@magicgol/polyjuice 0.38.1 → 0.39.0

Sign up to get free protection for your applications and to get access to all the features.
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicgol/polyjuice",
3
- "version": "0.38.1",
3
+ "version": "0.39.0",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -3,7 +3,9 @@ $palette: (
3
3
  'brand': #d81159,
4
4
  'freemium' :#004781,
5
5
  'coin': #ffcf73,
6
- 'club': #075169,
6
+ 'club--step-1': #0df2bb,
7
+ 'club--step-2': #a714ed,
8
+ 'club': linear-gradient(134.42deg, #0df2bb 0.99%, #a714ed 100%),
7
9
  'text': #343434,
8
10
  // ALERT
9
11
  'error': #ed4949,
@@ -103,10 +103,10 @@ export default {
103
103
  }
104
104
 
105
105
  &-club {
106
- background-color: rgba(map-get($palette, 'club'), 0.05);
106
+ background: map-get($palette, 'club');
107
107
 
108
108
  svg {
109
- fill: map-get($palette, 'club');
109
+ fill: #fff;
110
110
  }
111
111
  }
112
112
 
@@ -142,7 +142,7 @@ export default {
142
142
  background-color: map-get($palette, 'club');
143
143
 
144
144
  svg {
145
- fill: mix(white, map-get($palette, 'club'), 90%);
145
+ //fill: mix(white, map-get($palette, 'club'), 90%);
146
146
  }
147
147
  }
148
148
 
@@ -13,7 +13,7 @@ export default {
13
13
  },
14
14
  theme: {
15
15
  control: { type: 'select' },
16
- options: ['light', 'dark', 'club', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
16
+ options: ['light', 'dark', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
17
17
  defaultValue: 'light'
18
18
  },
19
19
  default: {
@@ -1,10 +1,10 @@
1
1
  <template>
2
2
  <div
3
- class="d-inline-flex align-items-center px-2 text-uppercase"
3
+ class="d-inline-flex align-items-center text-uppercase"
4
4
  :class="classes"
5
5
  >
6
- <div>
7
- <slot></slot>
6
+ <div class="px-2">
7
+ <span><slot></slot></span>
8
8
  </div>
9
9
  </div>
10
10
  </template>
@@ -25,7 +25,7 @@ export default {
25
25
  type: String,
26
26
  default: 'light',
27
27
  validator: function (value) {
28
- return ['light', 'dark', 'club', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
28
+ return ['light', 'dark', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'].indexOf(value) !== -1;
29
29
  },
30
30
  },
31
31
  },
@@ -39,6 +39,7 @@ export default {
39
39
  'mg-label--theme-light': this.theme === 'light',
40
40
  'mg-label--theme-dark': this.theme === 'dark',
41
41
  'mg-label--theme-club': this.theme === 'club',
42
+ 'mg-label--theme-trial': this.theme === 'trial',
42
43
  'mg-label--theme-goalkeeper': this.theme === 'goalkeeper',
43
44
  'mg-label--theme-defender': this.theme === 'defender',
44
45
  'mg-label--theme-midfielder': this.theme === 'midfielder',
@@ -54,12 +55,13 @@ export default {
54
55
  @import '../../../assets/palette';
55
56
 
56
57
  .mg-label {
57
- border: 2px solid;
58
58
  border-radius: 32px;
59
- padding-top: 0.0625rem;
60
- padding-bottom: 0.0625rem;
59
+ padding: 0.125rem;
61
60
 
62
61
  > div {
62
+ padding-top: 0.0625rem;
63
+ padding-bottom: 0.0625rem;
64
+ border-radius: 32px;
63
65
  font-family: 'Raleway', sans-serif;
64
66
  font-weight: 700;
65
67
  }
@@ -80,50 +82,78 @@ export default {
80
82
 
81
83
  &--theme {
82
84
  &-light {
83
- background: #f7f7f7;
84
- border-color: #f1f1f1;
85
+ background-color: #f1f1f1;
86
+ > div {
87
+ background: #f7f7f7;
88
+ }
85
89
  color: map-get($palette, 'text');
86
90
  }
87
91
 
88
92
  &-dark {
89
- background: #5b5b5b;
90
- border-color: #555555;
93
+ background-color: #555555;
94
+ > div {
95
+ background: #5b5b5b;
96
+ }
91
97
  color: #fff;
92
98
  }
93
99
 
94
100
  &-club {
95
- background: #fff;
96
- border-color: map-get($palette, 'club');;
97
- color: map-get($palette, 'club');;
101
+ background: map-get($palette, 'club');
102
+ > div {
103
+ background: map-get($palette, 'club');
104
+ }
105
+ color: #fff;
106
+ }
107
+
108
+ &-trial {
109
+ background: map-get($palette, 'club');
110
+ > div {
111
+ background: #fff;
112
+ > span {
113
+ background: map-get($palette, 'club');
114
+ -webkit-background-clip: text;
115
+ -webkit-text-fill-color: transparent;
116
+ }
117
+ }
98
118
  }
99
119
 
100
120
  &-goalkeeper {
101
- background: map-get($palette, 'goalkeeper');
102
- border-color: map-get($palette, 'text');
121
+ background-color: map-get($palette, 'text');
122
+ > div {
123
+ background: map-get($palette, 'goalkeeper');
124
+ }
103
125
  color: map-get($palette, 'text');
104
126
  }
105
127
 
106
128
  &-defender {
107
- background: map-get($palette, 'defender');
108
- border-color: map-get($palette, 'text');
129
+ background-color: map-get($palette, 'text');
130
+ > div {
131
+ background: map-get($palette, 'defender');
132
+ }
109
133
  color: map-get($palette, 'text');
110
134
  }
111
135
 
112
136
  &-midfielder {
113
- background: map-get($palette, 'midfielder');
114
- border-color: map-get($palette, 'text');
137
+ background-color: map-get($palette, 'text');
138
+ > div {
139
+ background: map-get($palette, 'midfielder');
140
+ }
115
141
  color: map-get($palette, 'text');
116
142
  }
117
143
 
118
144
  &-forward {
119
- background: map-get($palette, 'forward');
120
- border-color: map-get($palette, 'text');
145
+ background-color: map-get($palette, 'text');
146
+ > div {
147
+ background: map-get($palette, 'forward');
148
+ }
121
149
  color: map-get($palette, 'text');
122
150
  }
123
151
 
124
152
  &-success {
125
- background: map-get($palette, 'success');
126
- border-color: map-get($palette, 'success');
153
+ background-color: map-get($palette, 'success');
154
+ > div {
155
+ background: map-get($palette, 'success');
156
+ }
127
157
  color: #fff;
128
158
  }
129
159
  }
@@ -75,8 +75,8 @@ export default {
75
75
 
76
76
  &--theme {
77
77
  &-club {
78
- background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
79
- color: #777;
78
+ background: map-get($palette, 'club');
79
+ color: #fff;
80
80
  }
81
81
 
82
82
  &-rating {
@@ -39,7 +39,7 @@ export default {
39
39
  .mg-container {
40
40
  &-theme {
41
41
  &--club {
42
- background-color: map-get($palette, 'club');
42
+ background: map-get($palette, 'club');
43
43
  }
44
44
  }
45
45
  }
@@ -0,0 +1,38 @@
1
+ import MgContainer from '../../content/container/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 Club = Template.bind({});
34
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
35
+ Club.args = {
36
+ theme: 'club',
37
+ default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
38
+ };
@@ -0,0 +1,33 @@
1
+ import MgIconBadge from '../../components/icon-badge/IconBadge.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Context/Club/Icon Badge',
6
+ component: MgIconBadge,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ size: {
10
+ control: { type: 'select' },
11
+ options: ['normal', 'large'],
12
+ defaultValue: 'normal'
13
+ },
14
+ },
15
+ };
16
+
17
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
18
+ const Template = (args, { argTypes }) => ({
19
+ props: Object.keys(argTypes),
20
+ components: { MgIconBadge },
21
+ template: `<mg-icon-badge v-bind="$props"></mg-icon-badge>`,
22
+ });
23
+
24
+ export const Club = Template.bind({});
25
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
26
+ Club.args = {
27
+ icon: 'message',
28
+ context: 'club',
29
+ size: 'normal',
30
+ active: false
31
+ };
32
+
33
+
@@ -0,0 +1,47 @@
1
+ import MgLabel from '../../components/label/Label.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Context/Club/Label',
6
+ component: MgLabel,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ size: {
10
+ control: { type: 'select' },
11
+ options: ['normal', 'small'],
12
+ defaultValue: 'normal'
13
+ },
14
+ theme: {
15
+ control: { type: 'select' },
16
+ options: ['light', 'dark', 'club', 'trial', 'goalkeeper', 'defender', 'midfielder', 'forward', 'success'],
17
+ defaultValue: 'light'
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
+ }
31
+ },
32
+ };
33
+
34
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
35
+ const Template = (args, { argTypes }) => ({
36
+ props: Object.keys(argTypes),
37
+ components: { MgLabel },
38
+ template: `<mg-label v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-label>`,
39
+ });
40
+
41
+ export const Club = Template.bind({});
42
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
43
+ Club.args = {
44
+ default: 'etichetta',
45
+ size: 'small',
46
+ theme: 'club'
47
+ };
@@ -0,0 +1,67 @@
1
+ import MgVCard from '../../content/card/vertical-card/VCard.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Context/Club/VCard',
6
+ component: MgVCard,
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
+ theme: {
22
+ control: { type: 'select' },
23
+ options: [
24
+ null,
25
+ 'club',
26
+ 'rating',
27
+ 'goalkeeper',
28
+ 'defender',
29
+ 'midfielder',
30
+ 'forward',
31
+ 'bench',
32
+ 'transparent',
33
+ ],
34
+ defaultValue: null
35
+ },
36
+ footer: {
37
+ description: "The footer content goes here",
38
+ control: {
39
+ type: 'text',
40
+ },
41
+ table: {
42
+ category: 'Slots',
43
+ type: {
44
+ summary: 'html',
45
+ },
46
+ }
47
+ }
48
+ },
49
+ };
50
+
51
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
52
+ const Template = (args, { argTypes }) => ({
53
+ props: Object.keys(argTypes),
54
+ components: { MgVCard },
55
+ template: `<mg-v-card @click="$emit('click')" v-bind="$props">
56
+ <template v-if="${'default' in args}" v-slot>${args.default}</template>
57
+ <template v-if="${'footer' in args}" v-slot:footer>${args.footer}</template>
58
+ </mg-v-card>`,
59
+ });
60
+
61
+ export const Club = Template.bind({});
62
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
63
+ Club.args = {
64
+ theme: 'club',
65
+ default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
66
+ footer: '<div>The footer content goes here</div>'
67
+ };
@@ -62,7 +62,7 @@ export default {
62
62
 
63
63
  .mg-primary-club-button {
64
64
  appearance: none;
65
- background-color: map-get($palette, 'club');
65
+ background: 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;
@@ -1,14 +1,16 @@
1
1
  <template>
2
2
  <button
3
- class="d-block bg-white w-100 rounded text-uppercase text-center text-decoration-none"
3
+ class="d-block w-100 rounded text-uppercase text-center text-decoration-none"
4
4
  type="button"
5
5
  :class="classes"
6
6
  :disabled="disabled"
7
7
  @click="onClick"
8
8
  >
9
- <div class="d-flex justify-content-center align-items-center">
10
- <mg-club-star :trial="trial"></mg-club-star>
11
- <div class="ml-2"><slot></slot></div>
9
+ <div class="bg-white">
10
+ <div class="d-flex justify-content-center align-items-center">
11
+ <mg-club-star :trial="trial"></mg-club-star>
12
+ <div class="ml-2"><slot></slot></div>
13
+ </div>
12
14
  </div>
13
15
  </button>
14
16
  </template>
@@ -57,16 +59,26 @@ export default {
57
59
 
58
60
  .mg-secondary-club-button {
59
61
  appearance: none;
60
- border: 2px solid map-get($palette, 'club');
62
+ background: map-get($palette, 'club');
61
63
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
62
64
  box-sizing: border-box;
63
- color: map-get($palette, 'club');
65
+ border: 0;
64
66
  cursor: pointer;
65
67
  font-size: 1rem;
66
68
  font-family: 'Ubuntu', sans-serif;
67
69
  font-weight: 500;
68
70
  outline: none;
69
- padding: calc(0.5rem - 2px);
71
+ padding: 0.125rem;
72
+
73
+ > div {
74
+ padding: calc(0.5rem - 2px);
75
+
76
+ > div {
77
+ background: map-get($palette, 'club');
78
+ -webkit-background-clip: text;
79
+ -webkit-text-fill-color: transparent;
80
+ }
81
+ }
70
82
 
71
83
  &--disabled {
72
84
  opacity: 0.3 !important;
@@ -4,6 +4,12 @@
4
4
  :class="classes"
5
5
  @click="$emit('click')"
6
6
  >
7
+ <svg style="width:0;height:0;position: absolute" aria-hidden="true" focusable="false">
8
+ <linearGradient id="mg-club-plate-gradient" x2="1" y2="1">
9
+ <stop offset="0%" class="step-1" />
10
+ <stop offset="100%" class="step-2" />
11
+ </linearGradient>
12
+ </svg>
7
13
  <svgicon
8
14
  name="star-c"
9
15
  ></svgicon>
@@ -42,13 +48,23 @@ export default {
42
48
  @import '../../../../assets/palette';
43
49
 
44
50
  .mg-club-plate {
45
- color: map-get($palette, 'club');
51
+ background: map-get($palette, 'club');
52
+ -webkit-background-clip: text;
53
+ -webkit-text-fill-color: transparent;
46
54
  font-family: 'Ubuntu', sans-serif;
47
55
  font-size: 0.75rem;
48
56
  font-weight: 700;
49
57
 
50
- svg {
51
- fill: map-get($palette, 'club');
58
+ .step-1 {
59
+ stop-color: map-get($palette, 'club--step-1');
60
+ }
61
+
62
+ .step-2 {
63
+ stop-color: map-get($palette, 'club--step-2');
64
+ }
65
+
66
+ .svg-icon {
67
+ fill: url(#mg-club-plate-gradient);
52
68
  height: 1.5rem;
53
69
  min-height: 1.5rem;
54
70
  min-width: 1.5rem;
@@ -3,7 +3,9 @@
3
3
  class="d-inline-block rounded"
4
4
  :class="classes"
5
5
  >
6
- <mg-club-star :size="size" :trial="trial" :disabled="disabled"><slot></slot></mg-club-star>
6
+ <div>
7
+ <mg-club-star :size="size" :trial="trial" :disabled="disabled"><slot></slot></mg-club-star>
8
+ </div>
7
9
  </div>
8
10
  </template>
9
11
 
@@ -54,20 +56,30 @@ export default {
54
56
  @import '../../../../assets/palette';
55
57
 
56
58
  .mg-club-square {
57
- background-color: lighten(map-get($palette, 'club'), 45%);
59
+ background: map-get($palette, 'club');
60
+
61
+ > div {
62
+ background-color: rgba(255, 255, 255, 0.9)
63
+ }
58
64
 
59
65
  &--size {
60
66
  &-small {
61
- padding: 0.25rem 0.5rem;
67
+ > div {
68
+ padding: 0.25rem 0.5rem;
69
+ }
62
70
  }
63
71
 
64
72
  &-normal {
65
- padding: 0.5rem;
73
+ > div {
74
+ padding: 0.5rem;
75
+ }
66
76
  }
67
77
  }
68
78
 
69
79
  &--disabled {
70
- background-color: #efefef;
80
+ > div {
81
+ background-color: #efefef;
82
+ }
71
83
  }
72
84
  }
73
85
  </style>
@@ -3,6 +3,12 @@
3
3
  class="d-flex align-items-center"
4
4
  :class="classes"
5
5
  >
6
+ <svg style="width:0;height:0;position: absolute" aria-hidden="true" focusable="false">
7
+ <linearGradient id="mg-club-star-gradient" x2="1" y2="1">
8
+ <stop offset="0%" class="step-1" />
9
+ <stop offset="100%" class="step-2" />
10
+ </linearGradient>
11
+ </svg>
6
12
  <svgicon v-bind:name="icon"></svgicon>
7
13
  <div v-if="slotVisibility" class="ml-2"><slot></slot></div>
8
14
  </div>
@@ -63,16 +69,26 @@ export default {
63
69
  @import '../../../../assets/palette';
64
70
 
65
71
  .mg-club-star {
66
- color: map-get($palette, 'club');
67
72
 
68
73
  div {
74
+ background: map-get($palette, 'club');
75
+ -webkit-background-clip: text;
76
+ -webkit-text-fill-color: transparent;
69
77
  font-family: Ubuntu, sans-serif;
70
78
  font-weight: 500;
71
79
  line-height: 11px;
72
80
  }
73
81
 
74
- svg {
75
- fill: map-get($palette, 'club');
82
+ .step-1 {
83
+ stop-color: map-get($palette, 'club--step-1');
84
+ }
85
+
86
+ .step-2 {
87
+ stop-color: map-get($palette, 'club--step-2');
88
+ }
89
+
90
+ .svg-icon {
91
+ fill: url(#mg-club-star-gradient);
76
92
  }
77
93
 
78
94
  &-size {
@@ -120,7 +136,7 @@ export default {
120
136
  color: #fff;
121
137
 
122
138
  svg {
123
- fill: #fff;
139
+ fill: #fff !important;
124
140
  }
125
141
  }
126
142
 
@@ -17,6 +17,6 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
17
17
  />
18
18
  <ColorItem
19
19
  title="Club"
20
- colors={{'Teal Blue': '#075169'}}
20
+ colors={{'Electric Violet': 'linear-gradient(134.42deg, #0DF2BB 0.99%, #A714ED 100%)'}}
21
21
  />
22
22
  </ColorPalette>