@magicgol/polyjuice 0.37.6 → 0.38.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (14) hide show
  1. package/package.json +1 -1
  2. package/src/assets/palette.scss +1 -1
  3. package/src/components/components/icon-badge/IconBadge.vue +4 -4
  4. package/src/components/components/label/Label.vue +2 -2
  5. package/src/components/content/container/Container.stories.js +44 -0
  6. package/src/components/content/container/Container.vue +46 -0
  7. package/src/components/context/club/button/primary-club-button/PrimaryClubButton.vue +1 -1
  8. package/src/components/context/club/button/secondary-club-button/SecondaryClubButton.vue +2 -2
  9. package/src/components/context/club/plate/ClubPlate.vue +2 -2
  10. package/src/components/context/club/square/ClubSquare.vue +1 -1
  11. package/src/components/context/club/star/ClubStar.vue +2 -2
  12. package/src/components/typography/h5/HeadingFive.vue +1 -1
  13. package/src/documentation/Brand.stories.mdx +2 -2
  14. package/src/documentation/Result.stories.mdx +10 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicgol/polyjuice",
3
- "version": "0.37.6",
3
+ "version": "0.38.1",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
package/src/assets/palette.scss CHANGED
@@ -3,7 +3,7 @@ $palette: (
3
3
  'brand': #d81159,
4
4
  'freemium' :#004781,
5
5
  'coin': #ffcf73,
6
- 'expertClub': #075169,
6
+ 'club': #075169,
7
7
  'text': #343434,
8
8
  // ALERT
9
9
  'error': #ed4949,
package/src/components/components/icon-badge/IconBadge.vue CHANGED
@@ -103,10 +103,10 @@ export default {
103
103
  }
104
104
 
105
105
  &-club {
106
- background-color: rgba(map-get($palette, 'expertClub'), 0.05);
106
+ background-color: rgba(map-get($palette, 'club'), 0.05);
107
107
 
108
108
  svg {
109
- fill: map-get($palette, 'expertClub');
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, 'expertClub');
142
+ background-color: map-get($palette, 'club');
143
143
 
144
144
  svg {
145
- fill: mix(white, map-get($palette, 'expertClub'), 90%);
145
+ fill: mix(white, map-get($palette, 'club'), 90%);
146
146
  }
147
147
  }
148
148
 
package/src/components/components/label/Label.vue CHANGED
@@ -93,8 +93,8 @@ export default {
93
93
 
94
94
  &-club {
95
95
  background: #fff;
96
- border-color: map-get($palette, 'expertClub');;
97
- color: map-get($palette, 'expertClub');;
96
+ border-color: map-get($palette, 'club');;
97
+ color: map-get($palette, 'club');;
98
98
  }
99
99
 
100
100
  &-goalkeeper {
package/src/components/content/container/Container.stories.js ADDED
@@ -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
+ };
package/src/components/content/container/Container.vue ADDED
@@ -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>
package/src/components/context/club/button/primary-club-button/PrimaryClubButton.vue CHANGED
@@ -62,7 +62,7 @@ export default {
62
62
 
63
63
  .mg-primary-club-button {
64
64
  appearance: none;
65
- background-color: map-get($palette, 'expertClub');
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;
package/src/components/context/club/button/secondary-club-button/SecondaryClubButton.vue CHANGED
@@ -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, 'expertClub');
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, 'expertClub');
63
+ color: map-get($palette, 'club');
64
64
  cursor: pointer;
65
65
  font-size: 1rem;
66
66
  font-family: 'Ubuntu', sans-serif;
package/src/components/context/club/plate/ClubPlate.vue CHANGED
@@ -42,13 +42,13 @@ export default {
42
42
  @import '../../../../assets/palette';
43
43
 
44
44
  .mg-club-plate {
45
- color: map-get($palette, 'expertClub');
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, 'expertClub');
51
+ fill: map-get($palette, 'club');
52
52
  height: 1.5rem;
53
53
  min-height: 1.5rem;
54
54
  min-width: 1.5rem;
package/src/components/context/club/square/ClubSquare.vue CHANGED
@@ -54,7 +54,7 @@ export default {
54
54
  @import '../../../../assets/palette';
55
55
 
56
56
  .mg-club-square {
57
- background-color: lighten(map-get($palette, 'expertClub'), 45%);
57
+ background-color: lighten(map-get($palette, 'club'), 45%);
58
58
 
59
59
  &--size {
60
60
  &-small {
package/src/components/context/club/star/ClubStar.vue CHANGED
@@ -63,7 +63,7 @@ export default {
63
63
  @import '../../../../assets/palette';
64
64
 
65
65
  .mg-club-star {
66
- color: map-get($palette, 'expertClub');
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, 'expertClub');
75
+ fill: map-get($palette, 'club');
76
76
  }
77
77
 
78
78
  &-size {
package/src/components/typography/h5/HeadingFive.vue CHANGED
@@ -38,7 +38,7 @@ export default {
38
38
 
39
39
  &--level {
40
40
  &-club {
41
- color: map-get($palette, 'expertClub') !important;
41
+ color: map-get($palette, 'club') !important;
42
42
  }
43
43
  }
44
44
  }
package/src/documentation/Brand.stories.mdx CHANGED
@@ -4,7 +4,7 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
4
4
 
5
5
  <ColorPalette>
6
6
  <ColorItem
7
- title="Brand Color"
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="Expert Club Color"
19
+ title="Club"
20
20
  colors={{'Teal Blue': '#075169'}}
21
21
  />
22
22
  </ColorPalette>
package/src/documentation/Result.stories.mdx ADDED
@@ -0,0 +1,10 @@
1
+ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
2
+
3
+ <Meta title="Colors/Result" />
4
+
5
+ <ColorPalette>
6
+ <ColorItem
7
+ title="Winner"
8
+ colors={{'Golden Tainoi': '#ffcc5e'}}
9
+ />
10
+ </ColorPalette>