@magicgol/polyjuice 0.28.2 → 0.30.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.28.2",
3
+ "version": "0.30.0",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ var icon = require('vue-svgicon')
3
+ icon.register({
4
+ 'arrow-down': {
5
+ width: 16,
6
+ height: 16,
7
+ viewBox: '0 0 10 8',
8
+ data: '<path pid="0" d="M8.807 3.527a.667.667 0 00-.947 0l-2.193 2.2V.667a.667.667 0 10-1.334 0v5.06l-2.193-2.2a.67.67 0 00-.947.946l3.334 3.334c.063.06.138.108.22.14a.627.627 0 00.506 0 .667.667 0 00.22-.14l3.334-3.334a.667.667 0 000-.946z" _fill="#000"/>'
9
+ }
10
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ var icon = require('vue-svgicon')
3
+ icon.register({
4
+ 'funnel-full': {
5
+ width: 16,
6
+ height: 16,
7
+ viewBox: '0 0 18 19',
8
+ data: '<path pid="0" d="M0 1.5l4.5-1H13l4 1 1 1V5l-7 6.5V17l-4 2v-6.5L4.5 10 0 5V1.5z" _fill="#D81159"/>'
9
+ }
10
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ var icon = require('vue-svgicon')
3
+ icon.register({
4
+ 'funnel': {
5
+ width: 16,
6
+ height: 16,
7
+ viewBox: '0 0 20 20',
8
+ data: '<path pid="0" d="M17 0H3a3 3 0 00-3 3v1.17a3 3 0 00.25 1.2v.06c.141.321.341.613.59.86L7 12.41V19a1 1 0 001 1 1 1 0 00.45-.11l4-2A1 1 0 0013 17v-4.59l6.12-6.12a2.81 2.81 0 00.59-.86v-.06a3 3 0 00.29-1.2V3a3 3 0 00-3-3zm-5.71 11.29A1 1 0 0011 12v4.38l-2 1V12a1 1 0 00-.29-.71L3.41 6h13.18l-5.3 5.29zM18 4H2V3a1 1 0 011-1h14a1 1 0 011 1v1z" _fill="#D81159"/>'
9
+ }
10
+ })
@@ -1,6 +1,9 @@
1
1
  /* eslint-disable */
2
+ require('./arrow-down')
2
3
  require('./check-with-circle')
3
4
  require('./facebook')
5
+ require('./funnel-full')
6
+ require('./funnel')
4
7
  require('./google')
5
8
  require('./hand-down')
6
9
  require('./hand-up')
@@ -1,4 +1,5 @@
1
1
  import MgHCard from './HCard.vue';
2
+ import SvgIcon from "vue-svgicon";
2
3
 
3
4
  // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
5
  export default {
@@ -17,6 +18,18 @@ export default {
17
18
  summary: 'html',
18
19
  },
19
20
  }
21
+ },
22
+ actions: {
23
+ description: "The actions Vue slot",
24
+ control: {
25
+ type: 'text',
26
+ },
27
+ table: {
28
+ category: 'Slots',
29
+ type: {
30
+ summary: 'html',
31
+ },
32
+ }
20
33
  }
21
34
  },
22
35
  };
@@ -24,8 +37,11 @@ export default {
24
37
  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
25
38
  const Template = (args, { argTypes }) => ({
26
39
  props: Object.keys(argTypes),
27
- components: { MgHCard },
28
- template: `<mg-h-card @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-h-card>`,
40
+ components: { MgHCard, SvgIcon },
41
+ template: `<mg-h-card @click="$emit('click')" v-bind="$props">
42
+ <template v-if="${'default' in args}" v-slot>${args.default}</template>
43
+ <template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
44
+ </mg-h-card>`,
29
45
  });
30
46
 
31
47
  export const Default = Template.bind({});
@@ -33,3 +49,10 @@ export const Default = Template.bind({});
33
49
  Default.args = {
34
50
  default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
35
51
  };
52
+
53
+ export const Actions = Template.bind({});
54
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
55
+ Actions.args = {
56
+ default: '<div>This is a vertical card.</div><div>What do you think about?</div>',
57
+ actions: '<div>+</div>'
58
+ };
@@ -6,16 +6,14 @@
6
6
  <div
7
7
  class="flex-fill"
8
8
  ><slot></slot></div>
9
- <!-- ARROW -->
9
+ <!-- ACTIONS -->
10
10
  <div
11
+ v-if="actionsSlotVisibility"
11
12
  class="pl-3"
12
13
  >
13
- <font-awesome-icon
14
- icon="chevron-right"
15
- class="mg-icon"
16
- />
14
+ <slot name="actions"></slot>
17
15
  </div>
18
- <!-- end of ARROW -->
16
+ <!-- end of ACTIONS -->
19
17
  </div>
20
18
  </template>
21
19
 
@@ -28,21 +26,17 @@ export default {
28
26
  return {
29
27
  'mg-h-card': true,
30
28
  };
29
+ },
30
+ actionsSlotVisibility() {
31
+ return 'actions' in this.$slots && !!this.$slots.actions;
31
32
  }
32
33
  },
33
34
  };
34
35
  </script>
35
36
 
36
37
  <style lang="scss">
37
- @import '../../../assets/palette';
38
-
39
- .mg-h-card {
40
- box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
41
- height: 3.75rem;
42
-
43
- .mg-icon {
44
- color: map-get($palette, 'brand');
45
- cursor: pointer;
38
+ .mg-h-card {
39
+ box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
40
+ height: 3.75rem;
46
41
  }
47
- }
48
42
  </style>
@@ -2,6 +2,7 @@
2
2
  <div
3
3
  class="align-items-center d-flex text-truncate"
4
4
  :class="classes"
5
+ @click="onClick"
5
6
  >
6
7
  <!-- FOOTBALLER NAME -->
7
8
  <div
@@ -111,7 +112,9 @@ export default {
111
112
 
112
113
  methods: {
113
114
  onClick() {
114
- this.$emit('click');
115
+ if (!this.disabled && !this.deactivated) {
116
+ this.$emit('click');
117
+ }
115
118
  },
116
119
  },
117
120
  };
@@ -0,0 +1,36 @@
1
+ import MgFilter from './Filter.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Form/Advanced/Filter',
6
+ component: MgFilter,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ },
10
+ };
11
+
12
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
13
+ const Template = (args, { argTypes }) => ({
14
+ props: Object.keys(argTypes),
15
+ components: { MgFilter },
16
+ template: `<mg-filter @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filter>`,
17
+ });
18
+
19
+ export const Default = Template.bind({});
20
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
21
+ Default.args = {
22
+ default: 'test'
23
+ };
24
+ //
25
+ // export const Disabled = Template.bind({});
26
+ // Disabled.args = {
27
+ // disabled: true,
28
+ // value: 'given input',
29
+ // };
30
+ //
31
+ // export const Error = Template.bind({});
32
+ // Error.args = {
33
+ // disabled: false,
34
+ // value: 'given input',
35
+ // error: true
36
+ // };
@@ -0,0 +1,75 @@
1
+ <template>
2
+ <mg-tertiary-button
3
+ @click="onClick"
4
+ :class="classes"
5
+ >
6
+ <div class="d-flex">
7
+ <div class="position-relative">
8
+ <svgicon :name="icon"></svgicon>
9
+ <span
10
+ v-if="enabledFiltersCount"
11
+ class="position-absolute w-100 text-white"
12
+ >{{ enabledFiltersCount }}</span>
13
+ </div>
14
+ <div class="ml-2"><slot></slot></div>
15
+ </div>
16
+ </mg-tertiary-button>
17
+ </template>
18
+
19
+ <script>
20
+ import MgTertiaryButton from "../../button/tertiary-button/TertiaryButton";
21
+
22
+ export default {
23
+ name: 'mg-filter',
24
+
25
+ props: {
26
+ enabledFiltersCount: {
27
+ type: Number,
28
+ default: 0
29
+ }
30
+ },
31
+
32
+ computed: {
33
+ classes() {
34
+ return {
35
+ 'mg-filter': true,
36
+ };
37
+ },
38
+
39
+ icon () {
40
+ return this.enabledFiltersCount > 0 ? 'funnel-full' : 'funnel';
41
+ }
42
+ },
43
+
44
+ components: {
45
+ MgTertiaryButton,
46
+ },
47
+
48
+ methods: {
49
+ onClick() {
50
+ this.$emit('click');
51
+ },
52
+ }
53
+ };
54
+ </script>
55
+
56
+ <style lang="scss">
57
+ @import '../../../../assets/palette';
58
+
59
+ .mg-filter {
60
+ svg {
61
+ fill: map-get($palette, 'brand');
62
+ width: 1.25rem;
63
+ }
64
+
65
+ .position-relative {
66
+ font-weight: 700;
67
+ font-size: 0.625rem;
68
+
69
+ span {
70
+ top: 0;
71
+ left: 0;
72
+ }
73
+ }
74
+ }
75
+ </style>
@@ -87,25 +87,25 @@ export default {
87
87
 
88
88
  &-goalkeeper {
89
89
  background: map-get($palette, 'goalkeeper');
90
- border-color: #f7f7f7;
90
+ border-color: map-get($palette, 'text');
91
91
  color: map-get($palette, 'text');
92
92
  }
93
93
 
94
94
  &-defender {
95
95
  background: map-get($palette, 'defender');
96
- border-color: #f7f7f7;
96
+ border-color: map-get($palette, 'text');
97
97
  color: map-get($palette, 'text');
98
98
  }
99
99
 
100
100
  &-midfielder {
101
101
  background: map-get($palette, 'midfielder');
102
- border-color: #f7f7f7;
102
+ border-color: map-get($palette, 'text');
103
103
  color: map-get($palette, 'text');
104
104
  }
105
105
 
106
106
  &-forward {
107
107
  background: map-get($palette, 'forward');
108
- border-color: #f7f7f7;
108
+ border-color: map-get($palette, 'text');
109
109
  color: map-get($palette, 'text');
110
110
  }
111
111
  }
@@ -41,3 +41,10 @@ export const Default = Template.bind({});
41
41
  Default.args = {
42
42
  default: 'this is the list head'
43
43
  };
44
+
45
+ export const Active = Template.bind({});
46
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
47
+ Active.args = {
48
+ default: 'this is the list head',
49
+ active: true
50
+ };
@@ -1,18 +1,33 @@
1
1
  <template>
2
2
  <div
3
- class="text-uppercase pb-2 px-2"
3
+ class="d-flex align-items-center text-uppercase pb-2 px-2"
4
4
  :class="classes"
5
- ><slot></slot></div>
5
+ >
6
+ <div><slot></slot></div>
7
+ <svgicon
8
+ v-if="active"
9
+ name="arrow-down"
10
+ class="ml-2"
11
+ ></svgicon>
12
+ </div>
6
13
  </template>
7
14
 
8
15
  <script>
9
16
  export default {
10
17
  name: 'mg-list-head',
11
18
 
19
+ props: {
20
+ active: {
21
+ type: Boolean,
22
+ default: false
23
+ }
24
+ },
25
+
12
26
  computed: {
13
27
  classes() {
14
28
  return {
15
29
  'mg-list-head': true,
30
+ 'mg-list-head--active': this.active === true,
16
31
  };
17
32
  },
18
33
  footerVisibility() {
@@ -31,5 +46,18 @@ export default {
31
46
  font-family: 'Ubuntu', sans-serif;
32
47
  font-size: 0.75rem;
33
48
  font-weight: 500;
49
+
50
+ svg {
51
+ fill: #777;
52
+ height: 0.5rem;
53
+ }
54
+
55
+ &--active {
56
+ color: map-get($palette, 'text') !important;
57
+
58
+ svg {
59
+ fill: map-get($palette, 'text') !important;
60
+ }
61
+ }
34
62
  }
35
63
  </style>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 10 8" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M8.80666 3.52667C8.74469 3.46418 8.67095 3.41459 8.58971 3.38074C8.50847 3.34689 8.42134 3.32947 8.33333 3.32947C8.24532 3.32947 8.15818 3.34689 8.07694 3.38074C7.99571 3.41459 7.92197 3.46418 7.86 3.52667L5.66666 5.72667V0.666667C5.66666 0.489856 5.59643 0.320287 5.4714 0.195262C5.34638 0.070238 5.17681 0 5 0C4.82319 0 4.65362 0.070238 4.52859 0.195262C4.40357 0.320287 4.33333 0.489856 4.33333 0.666667V5.72667L2.14 3.52667C2.01446 3.40113 1.8442 3.33061 1.66666 3.33061C1.48913 3.33061 1.31887 3.40113 1.19333 3.52667C1.06779 3.6522 0.997269 3.82247 0.997269 4C0.997269 4.17753 1.06779 4.3478 1.19333 4.47333L4.52666 7.80667C4.59007 7.86736 4.66483 7.91494 4.74666 7.94667C4.82646 7.98194 4.91275 8.00016 5 8.00016C5.08724 8.00016 5.17353 7.98194 5.25333 7.94667C5.33516 7.91494 5.40993 7.86736 5.47333 7.80667L8.80666 4.47333C8.86915 4.41136 8.91874 4.33762 8.95259 4.25638C8.98644 4.17515 9.00386 4.08801 9.00386 4C9.00386 3.91199 8.98644 3.82486 8.95259 3.74362C8.91874 3.66238 8.86915 3.58864 8.80666 3.52667Z" fill="black"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 18 19" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M0 1.5L4.5 0.5H13L17 1.5L18 2.5V5L11 11.5V17L7 19V12.5L4.5 10L0 5V1.5Z" fill="#D81159"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M17 0H3C2.20435 0 1.44129 0.316071 0.87868 0.87868C0.316071 1.44129 1.80878e-07 2.20435 1.80878e-07 3V4.17C-0.000143207 4.58294 0.0849664 4.99147 0.25 5.37V5.43C0.39128 5.75097 0.591392 6.04266 0.84 6.29L7 12.41V19C6.99966 19.1699 7.04264 19.3372 7.12487 19.4859C7.20711 19.6346 7.32589 19.7599 7.47 19.85C7.62914 19.9486 7.81277 20.0006 8 20C8.15654 19.9991 8.31068 19.9614 8.45 19.89L12.45 17.89C12.6149 17.8069 12.7536 17.6798 12.8507 17.5227C12.9478 17.3656 12.9994 17.1847 13 17V12.41L19.12 6.29C19.3686 6.04266 19.5687 5.75097 19.71 5.43V5.37C19.8888 4.99443 19.9876 4.58578 20 4.17V3C20 2.20435 19.6839 1.44129 19.1213 0.87868C18.5587 0.316071 17.7956 0 17 0ZM11.29 11.29C11.1973 11.3834 11.124 11.4943 11.0742 11.6161C11.0245 11.7379 10.9992 11.8684 11 12V16.38L9 17.38V12C9.00076 11.8684 8.97554 11.7379 8.92577 11.6161C8.87601 11.4943 8.80268 11.3834 8.71 11.29L3.41 6H16.59L11.29 11.29ZM18 4H2V3C2 2.73478 2.10536 2.48043 2.29289 2.29289C2.48043 2.10536 2.73478 2 3 2H17C17.2652 2 17.5196 2.10536 17.7071 2.29289C17.8946 2.48043 18 2.73478 18 3V4Z" fill="#D81159"/>
3
+ </svg>