@magicgol/polyjuice 0.37.1 → 0.37.3

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.37.1",
3
+ "version": "0.37.3",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -6,6 +6,11 @@ export default {
6
6
  component: MgPrimaryClubButton,
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: {
@@ -39,3 +44,9 @@ Disabled.args = {
39
44
  disabled: true,
40
45
  default: 'primary club button'
41
46
  };
47
+
48
+ export const Large = Template.bind({});
49
+ Large.args = {
50
+ size: 'large',
51
+ default: 'primary button'
52
+ };
@@ -1,12 +1,12 @@
1
1
  <template>
2
2
  <button
3
3
  type="button"
4
- class="w-100 rounded justify-content-center align-items-center p-2 border-0 text-white text-uppercase d-flex"
4
+ class="w-100 rounded justify-content-center align-items-center px-2 border-0 text-white text-uppercase d-flex"
5
5
  :class="classes"
6
6
  :disabled="disabled"
7
7
  @click="onClick"
8
8
  >
9
- <svgicon name="star-c"></svgicon>
9
+ <mg-club-star negative></mg-club-star>
10
10
  <div class="ml-2">
11
11
  <slot></slot>
12
12
  </div>
@@ -14,6 +14,8 @@
14
14
  </template>
15
15
 
16
16
  <script>
17
+ import MgClubStar from "../../star/ClubStar";
18
+
17
19
  export default {
18
20
  name: 'mg-primary-club-button',
19
21
 
@@ -22,17 +24,31 @@ export default {
22
24
  type: Boolean,
23
25
  default: false,
24
26
  },
27
+
28
+ size: {
29
+ type: String,
30
+ default: 'normal',
31
+ validator: function (value) {
32
+ return ['large', 'normal'].indexOf(value) !== -1;
33
+ },
34
+ }
25
35
  },
26
36
 
27
37
  computed: {
28
38
  classes() {
29
39
  return {
30
40
  'mg-primary-club-button': true,
41
+ 'mg-primary-club-button-size-normal': this.size === 'normal',
42
+ 'mg-primary-club-button-size-large': this.size === 'large',
31
43
  'mg-primary-club-button--disabled': this.disabled,
32
44
  };
33
45
  }
34
46
  },
35
47
 
48
+ components: {
49
+ MgClubStar,
50
+ },
51
+
36
52
  methods: {
37
53
  onClick() {
38
54
  this.$emit('click');
@@ -49,17 +65,18 @@ export default {
49
65
  background-color: map-get($palette, 'expertClub');
50
66
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
51
67
  cursor: pointer;
52
- font-size: 1rem;
53
68
  font-family: 'Ubuntu', sans-serif;
69
+ font-size: 1rem;
54
70
  font-weight: 500;
55
71
  outline: none;
56
72
 
57
- svg {
58
- fill: #fff;
59
- height: 1rem;
60
- min-height: 1rem;
61
- min-width: 1rem;
62
- width: 1rem;
73
+ &-size {
74
+ &-normal {
75
+ padding: 0.5rem;
76
+ }
77
+ &-large {
78
+ padding: 1rem;
79
+ }
63
80
  }
64
81
 
65
82
  &--disabled {
@@ -31,11 +31,13 @@ const Template = (args, { argTypes }) => ({
31
31
  export const Default = Template.bind({});
32
32
  // More on args: https://storybook.js.org/docs/vue/writing-stories/args
33
33
  Default.args = {
34
- default: 'secondary club button'
34
+ default: 'secondary club button',
35
+ trial: true
35
36
  };
36
37
 
37
38
  export const Disabled = Template.bind({});
38
39
  Disabled.args = {
39
40
  disabled: true,
40
- default: 'secondary club button'
41
+ default: 'secondary club button',
42
+ trial: true
41
43
  };
@@ -7,13 +7,15 @@
7
7
  @click="onClick"
8
8
  >
9
9
  <div class="d-flex justify-content-center align-items-center">
10
- <svgicon name="star-stroke-p"></svgicon>
10
+ <mg-club-star :trial="trial"></mg-club-star>
11
11
  <div class="ml-2"><slot></slot></div>
12
12
  </div>
13
13
  </button>
14
14
  </template>
15
15
 
16
16
  <script>
17
+ import MgClubStar from "../../star/ClubStar";
18
+
17
19
  export default {
18
20
  name: 'mg-secondary-club-button',
19
21
 
@@ -22,6 +24,11 @@ export default {
22
24
  type: Boolean,
23
25
  default: false,
24
26
  },
27
+
28
+ trial: {
29
+ type: Boolean,
30
+ default: false,
31
+ },
25
32
  },
26
33
 
27
34
  computed: {
@@ -33,6 +40,10 @@ export default {
33
40
  }
34
41
  },
35
42
 
43
+ components: {
44
+ MgClubStar,
45
+ },
46
+
36
47
  methods: {
37
48
  onClick() {
38
49
  this.$emit('click');
@@ -48,21 +59,14 @@ export default {
48
59
  appearance: none;
49
60
  border: 2px solid map-get($palette, 'expertClub');
50
61
  box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
62
+ box-sizing: border-box;
51
63
  color: map-get($palette, 'expertClub');
52
64
  cursor: pointer;
53
65
  font-size: 1rem;
54
66
  font-family: 'Ubuntu', sans-serif;
55
67
  font-weight: 500;
56
- height: 2.5rem;
57
68
  outline: none;
58
-
59
- svg {
60
- fill: map-get($palette, 'expertClub');
61
- height: 1.25rem;
62
- min-height: 1.25rem;
63
- min-width: 1.25rem;
64
- width: 1.25rem;
65
- }
69
+ padding: calc(0.5rem - 2px);
66
70
 
67
71
  &--disabled {
68
72
  opacity: 0.3 !important;
@@ -4,18 +4,34 @@ import MgClubSquare from './ClubSquare.vue';
4
4
  export default {
5
5
  title: 'Context/Club/Square/Club Square',
6
6
  component: MgClubSquare,
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
+ }
7
22
  };
8
23
 
9
24
  // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
10
25
  const Template = (args, { argTypes }) => ({
11
26
  props: Object.keys(argTypes),
12
27
  components: { MgClubSquare },
13
- template: `<mg-club-square v-bind="$props"></mg-club-square>`,
28
+ template: `<mg-club-square v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-club-square>`,
14
29
  });
15
30
 
16
31
  export const Default = Template.bind({});
17
32
  // More on args: https://storybook.js.org/docs/vue/writing-stories/args
18
33
  Default.args = {
34
+ default: 'this is a label'
19
35
  };
20
36
 
21
37
  export const Trial = Template.bind({});
@@ -1,13 +1,15 @@
1
1
  <template>
2
2
  <div
3
- class="d-flex rounded p-2"
3
+ class="d-inline-block rounded p-2"
4
4
  :class="classes"
5
5
  >
6
- <svgicon v-bind:name="icon"></svgicon>
6
+ <mg-club-star :trial="trial" :disabled="disabled"><slot></slot></mg-club-star>
7
7
  </div>
8
8
  </template>
9
9
 
10
10
  <script>
11
+ import MgClubStar from "../star/ClubStar";
12
+
11
13
  export default {
12
14
  name: 'mg-club-square',
13
15
 
@@ -29,11 +31,12 @@ export default {
29
31
  'mg-club-square': true,
30
32
  'mg-club-square--disabled': this.disabled === true,
31
33
  };
32
- },
33
- icon () {
34
- return this.trial ? 'star-stroke-p' : 'star-c';
35
34
  }
36
35
  },
36
+
37
+ components: {
38
+ MgClubStar
39
+ }
37
40
  };
38
41
  </script>
39
42
 
@@ -42,23 +45,9 @@ export default {
42
45
 
43
46
  .mg-club-square {
44
47
  background-color: lighten(map-get($palette, 'expertClub'), 55%);
45
- height: 2.25rem;
46
- width: 2.25rem;
47
-
48
- svg {
49
- fill: map-get($palette, 'expertClub');
50
- height: 1.25rem;
51
- min-height: 1.25rem;
52
- min-width: 1.25rem;
53
- width: 1.25rem;
54
- }
55
48
 
56
49
  &--disabled {
57
50
  background-color: #efefef;
58
-
59
- svg {
60
- fill: #6d6d6d;
61
- }
62
51
  }
63
52
  }
64
53
  </style>
@@ -0,0 +1,52 @@
1
+ import MgClubStar from './ClubStar.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/Star/Club Star',
6
+ component: MgClubStar,
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
+ 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: { MgClubStar },
33
+ template: `<mg-club-star v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-club-star>`,
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
+ default: 'this is a label'
40
+ };
41
+
42
+ export const Trial = Template.bind({});
43
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
44
+ Trial.args = {
45
+ trial: true
46
+ };
47
+
48
+ export const Disabled = Template.bind({});
49
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
50
+ Disabled.args = {
51
+ disabled: true
52
+ };
@@ -0,0 +1,114 @@
1
+ <template>
2
+ <div
3
+ class="d-flex align-items-center"
4
+ :class="classes"
5
+ >
6
+ <svgicon v-bind:name="icon"></svgicon>
7
+ <div v-if="slotVisibility" class="ml-2"><slot></slot></div>
8
+ </div>
9
+ </template>
10
+
11
+ <script>
12
+ export default {
13
+ name: 'mg-club-star',
14
+
15
+ props: {
16
+ trial: {
17
+ type: Boolean,
18
+ default: false
19
+ },
20
+
21
+ disabled: {
22
+ type: Boolean,
23
+ default: false
24
+ },
25
+
26
+ negative: {
27
+ type: Boolean,
28
+ default: false
29
+ },
30
+
31
+ size: {
32
+ type: String,
33
+ default: 'normal',
34
+ validator: function (value) {
35
+ return ['small', 'normal'].indexOf(value) !== -1;
36
+ },
37
+ }
38
+ },
39
+
40
+ computed: {
41
+ classes() {
42
+ return {
43
+ 'mg-club-star': true,
44
+ 'mg-club-star--disabled': this.disabled === true,
45
+ 'mg-club-star--negative': this.negative === true,
46
+ 'mg-club-star-size-small': this.size === 'small',
47
+ 'mg-club-star-size-normal': this.size === 'normal',
48
+ };
49
+ },
50
+ icon () {
51
+ return this.trial ? 'star-stroke-p' : 'star-c';
52
+ },
53
+
54
+ slotVisibility () {
55
+ return 'default' in this.$slots && !!this.$slots.default;
56
+ },
57
+ },
58
+ };
59
+ </script>
60
+
61
+ <style lang="scss">
62
+ @import '../../../../assets/palette';
63
+
64
+ .mg-club-star {
65
+ color: map-get($palette, 'expertClub');
66
+
67
+ div {
68
+ font-family: Ubuntu, sans-serif;
69
+ font-size: 1rem;
70
+ font-weight: 500;
71
+ line-height: 11px;
72
+ }
73
+
74
+ svg {
75
+ fill: map-get($palette, 'expertClub');
76
+ }
77
+
78
+ &-size {
79
+ &-small {
80
+ svg {
81
+ height: 1rem;
82
+ min-height: 1rem;
83
+ min-width: 1rem;
84
+ width: 1rem;
85
+ }
86
+ }
87
+
88
+ &-normal {
89
+ svg {
90
+ height: 1.25rem;
91
+ min-height: 1.25rem;
92
+ min-width: 1.25rem;
93
+ width: 1.25rem;
94
+ }
95
+ }
96
+ }
97
+
98
+ &--negative {
99
+ color: #fff;
100
+
101
+ svg {
102
+ fill: #fff;
103
+ }
104
+ }
105
+
106
+ &--disabled {
107
+ color: #6d6d6d !important;
108
+
109
+ svg {
110
+ fill: #6d6d6d !important;;
111
+ }
112
+ }
113
+ }
114
+ </style>