@magicgol/polyjuice 0.14.1 → 0.16.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (33) hide show
  1. package/.storybook/main.js +8 -0
  2. package/.storybook/preview-head.html +1 -1
  3. package/package.json +1 -1
  4. package/src/assets/palette.scss +1 -0
  5. package/src/assets/svg/facebook.js +10 -0
  6. package/src/assets/svg/google.js +10 -0
  7. package/src/assets/svg/index.js +2 -0
  8. package/src/components/box/filing-cabinet/FilingCabinet.stories.js +44 -0
  9. package/src/components/box/filing-cabinet/FilingCabinet.vue +23 -0
  10. package/src/components/box/filing-cabinet/FilingCabinetTab.stories.js +43 -0
  11. package/src/components/box/filing-cabinet/FilingCabinetTab.vue +55 -0
  12. package/src/components/card/vertical-card/VCard.stories.js +5 -0
  13. package/src/components/card/vertical-card/VCard.vue +28 -4
  14. package/src/components/footballer/role-badge/RoleBadge.stories.js +14 -2
  15. package/src/components/footballer/role-badge/RoleBadge.vue +16 -3
  16. package/src/components/form/checkbox/checkbox/Checkbox.vue +4 -1
  17. package/src/components/form/input/input/Input.vue +2 -1
  18. package/src/components/image/profile-image/ProfileImage.vue +1 -1
  19. package/src/components/label/dot/Dot.stories.js +19 -0
  20. package/src/components/label/dot/Dot.vue +30 -0
  21. package/src/components/label/traffic-light/TrafficLight.stories.js +41 -0
  22. package/src/components/label/traffic-light/TrafficLight.vue +57 -0
  23. package/src/components/list/head/ListHead.stories.js +43 -0
  24. package/src/components/list/head/ListHead.vue +35 -0
  25. package/src/components/social/button/SocialButton.stories.js +54 -0
  26. package/src/components/social/button/SocialButton.vue +81 -0
  27. package/src/components/typography/h1/HeadingOne.stories.js +1 -1
  28. package/src/components/typography/h3/HeadingThree.stories.js +34 -0
  29. package/src/components/typography/h3/HeadingThree.vue +25 -0
  30. package/src/components/typography/h4/HeadingFour.stories.js +1 -1
  31. package/src/components/typography/h6/HeadingSix.stories.js +1 -1
  32. package/src/svg/facebook.svg +3 -0
  33. package/src/svg/google.svg +3 -0
@@ -9,4 +9,12 @@ module.exports = {
9
9
  '@storybook/preset-scss',
10
10
  ],
11
11
  'framework': '@storybook/vue',
12
+ 'previewHead': (head) => (`
13
+ ${head}
14
+ <style>
15
+ html, body {
16
+ background: #F6F9FC;
17
+ }
18
+ </style>
19
+ `),
12
20
  }
@@ -1,4 +1,4 @@
1
1
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
2
2
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
3
3
 
4
- <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,600,700" rel="stylesheet" />
4
+ <link href="https://fonts.googleapis.com/css?family=Ubuntu:400,500,600,700|Raleway:600,700" rel="stylesheet" />
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@magicgol/polyjuice",
3
- "version": "0.14.1",
3
+ "version": "0.16.0",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -5,6 +5,7 @@ $palette: (
5
5
  'coin': #ffcf73,
6
6
  'expertClub': #075169,
7
7
  // ALERT
8
+ 'error': #ed4949,
8
9
  'warning': #ff614c,
9
10
  'success': #349B50,
10
11
  'info': #004781,
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ var icon = require('vue-svgicon')
3
+ icon.register({
4
+ 'facebook': {
5
+ width: 16,
6
+ height: 16,
7
+ viewBox: '0 0 25 25',
8
+ data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.213c-.486 0-.972.593-.972 1.403V8.37H13.5v3.997H8.694V24.3h-4.59V12.367H0V8.37h4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5v4.213H9.666z" _fill="#fff"/>'
9
+ }
10
+ })
@@ -0,0 +1,10 @@
1
+ /* eslint-disable */
2
+ var icon = require('vue-svgicon')
3
+ icon.register({
4
+ 'google': {
5
+ width: 16,
6
+ height: 16,
7
+ viewBox: '0 0 18 18',
8
+ data: '<path pid="0" d="M9.003 7.415v3.439h4.9c-.64 2.084-2.381 3.576-4.9 3.576a5.431 5.431 0 010-10.86c1.349 0 2.58.496 3.528 1.31l2.532-2.534A8.966 8.966 0 009.003 0C4.03 0 0 4.03 0 9s4.03 9 9.003 9c7.555 0 9.224-7.067 8.482-10.573l-8.482-.012z" _fill="#fff"/>'
9
+ }
10
+ })
@@ -1,5 +1,7 @@
1
1
  /* eslint-disable */
2
2
  require('./check-with-circle')
3
+ require('./facebook')
4
+ require('./google')
3
5
  require('./magic-coin')
4
6
  require('./message')
5
7
  require('./soccer-ball')
@@ -0,0 +1,44 @@
1
+ import MgFilingCabinet from './FilingCabinet.vue';
2
+ import MgFilingCabinetTab from './FilingCabinetTab.vue';
3
+
4
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
5
+ export default {
6
+ title: 'Box/Filing Cabinet',
7
+ component: MgFilingCabinet,
8
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
9
+ argTypes: {
10
+ default: {
11
+ description: "The default Vue slot",
12
+ control: {
13
+ type: 'text',
14
+ },
15
+ table: {
16
+ category: 'Slots',
17
+ type: {
18
+ summary: 'html',
19
+ },
20
+ }
21
+ }
22
+ },
23
+ };
24
+
25
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
26
+ const Template = (args, { argTypes }) => ({
27
+ props: Object.keys(argTypes),
28
+ components: { MgFilingCabinet, MgFilingCabinetTab },
29
+ template: `<mg-filing-cabinet v-bind="$props">
30
+ <template v-slot:tab-left>
31
+ <mg-filing-cabinet-tab>left tab</mg-filing-cabinet-tab>
32
+ </template>
33
+ <template v-slot:tab-right>
34
+ <mg-filing-cabinet-tab active>right tab</mg-filing-cabinet-tab>
35
+ </template>
36
+ <template v-if="${'default' in args}" v-slot>${args.default}</template>
37
+ </mg-filing-cabinet>`,
38
+ });
39
+
40
+ export const Default = Template.bind({});
41
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
42
+ Default.args = {
43
+ default: 'this is the content'
44
+ };
@@ -0,0 +1,23 @@
1
+ <template>
2
+ <div class="bg-white">
3
+ <div class="d-flex">
4
+ <div class="w-50">
5
+ <slot name="tab-left"></slot>
6
+ </div>
7
+ <div class="w-50">
8
+ <slot name="tab-right"></slot>
9
+ </div>
10
+ </div>
11
+ <div class="p-4">
12
+ <div class="px-2">
13
+ <slot></slot>
14
+ </div>
15
+ </div>
16
+ </div>
17
+ </template>
18
+
19
+ <script>
20
+ export default {
21
+ name: 'mg-filing-cabinet'
22
+ };
23
+ </script>
@@ -0,0 +1,43 @@
1
+ import MgFilingCabinetTab from './FilingCabinetTab.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Box/Filing Cabinet/Tab',
6
+ component: MgFilingCabinetTab,
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: { MgFilingCabinetTab },
28
+ template: `<mg-filing-cabinet-tab @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-filing-cabinet-tab>`,
29
+ });
30
+
31
+ export const Default = Template.bind({});
32
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
33
+ Default.args = {
34
+ active: false,
35
+ default: 'tab button'
36
+ };
37
+
38
+ export const Active = Template.bind({});
39
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
40
+ Active.args = {
41
+ active: true,
42
+ default: 'tab button'
43
+ };
@@ -0,0 +1,55 @@
1
+ <template>
2
+ <div
3
+ class="d-block p-4 text-center text-uppercase"
4
+ :class="classes"
5
+ @click="$emit('click')"
6
+ >
7
+ <span class="pb-1"><slot></slot></span>
8
+ </div>
9
+ </template>
10
+
11
+ <script>
12
+ export default {
13
+ name: 'mg-filing-cabinet-tab',
14
+
15
+ props: {
16
+ active: {
17
+ type: Boolean,
18
+ default: false
19
+ },
20
+ },
21
+
22
+ computed: {
23
+ classes() {
24
+ return {
25
+ 'mg-filing-cabinet-tab': true,
26
+ 'mg-filing-cabinet-tab--active': this.active === true,
27
+ };
28
+ }
29
+ },
30
+ };
31
+ </script>
32
+
33
+ <style lang="scss">
34
+ @import '../../../assets/palette';
35
+
36
+ .mg-filing-cabinet-tab {
37
+ background-color: #f3f3f3;
38
+ border: 1px solid #d8d8d8;
39
+ color: #000;
40
+ cursor: pointer;
41
+ text-decoration: none;
42
+ font-family: 'Raleway', sans-serif;
43
+ font-size: 1.125rem;
44
+ font-weight: 600;
45
+
46
+ &--active {
47
+ background-color: #fff !important;
48
+ border-color: #fff !important;
49
+
50
+ span {
51
+ border-bottom: 2px solid map-get($palette, 'brand');
52
+ }
53
+ }
54
+ }
55
+ </style>
@@ -18,6 +18,11 @@ export default {
18
18
  },
19
19
  }
20
20
  },
21
+ theme: {
22
+ control: { type: 'select' },
23
+ options: [null, 'club'],
24
+ defaultValue: null
25
+ },
21
26
  footer: {
22
27
  description: "The footer content goes here",
23
28
  control: {
@@ -4,9 +4,9 @@
4
4
  :class="classes"
5
5
  @click="onClick"
6
6
  >
7
- <div class="p-3 bg-white"><slot></slot></div>
7
+ <div class="mg-v-card-content p-3"><slot></slot></div>
8
8
  <div
9
- class="mg-footer p-3"
9
+ class="mg-v-card-footer p-3"
10
10
  v-if="footerVisibility"
11
11
  ><slot name="footer"></slot></div>
12
12
  </div>
@@ -16,14 +16,25 @@
16
16
  export default {
17
17
  name: 'mg-v-card',
18
18
 
19
+ props: {
20
+ theme: {
21
+ type: String,
22
+ default: null,
23
+ validator: function (value) {
24
+ return ['club'].indexOf(value) !== -1;
25
+ },
26
+ }
27
+ },
28
+
19
29
  computed: {
20
30
  classes() {
21
31
  return {
22
32
  'mg-v-card': true,
33
+ 'mg-v-card--theme-club': this.theme === 'club',
23
34
  };
24
35
  },
25
36
  footerVisibility() {
26
- return 'footer' in this.$slots;
37
+ return 'footer' in this.$slots && !!this.$slots.footer;
27
38
  }
28
39
  },
29
40
 
@@ -41,7 +52,20 @@ export default {
41
52
  .mg-v-card {
42
53
  box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
43
54
 
44
- .mg-footer {
55
+ &-content {
56
+ background: white;
57
+ }
58
+
59
+ &--theme {
60
+ &-club {
61
+ & .mg-v-card-content {
62
+ background: linear-gradient(90deg, #D1EFFF 0%, #DDDAFC 99.65%) !important;
63
+ color: #777;
64
+ }
65
+ }
66
+ }
67
+
68
+ &-footer {
45
69
  background-color: rgba(map-get($palette, 'brand'), 0.04);
46
70
  }
47
71
  }
@@ -13,9 +13,21 @@ export default {
13
13
  },
14
14
  size: {
15
15
  control: { type: 'select' },
16
- options: ['large', 'normal'],
16
+ options: ['huge', 'large', 'normal'],
17
17
  defaultValue: 'normal'
18
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
+ },
19
31
  },
20
32
  };
21
33
 
@@ -23,7 +35,7 @@ export default {
23
35
  const Template = (args, { argTypes }) => ({
24
36
  props: Object.keys(argTypes),
25
37
  components: { MgRoleBadge },
26
- template: `<mg-role-badge v-bind="$props"></mg-role-badge>`,
38
+ template: `<mg-role-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-role-badge>`,
27
39
  });
28
40
 
29
41
  export const Default = Template.bind({});
@@ -3,7 +3,8 @@
3
3
  class="d-inline-flex text-center text-white rounded-circle justify-content-center align-items-center"
4
4
  :class="classes"
5
5
  >
6
- {{ role }}
6
+ <slot v-if="slotVisibility"></slot>
7
+ <template v-else>{{ role }}</template>
7
8
  </div>
8
9
  </template>
9
10
 
@@ -23,7 +24,7 @@ export default {
23
24
  type: String,
24
25
  default: 'normal',
25
26
  validator: function (value) {
26
- return ['normal', 'large'].indexOf(value) !== -1;
27
+ return ['normal', 'large', 'huge'].indexOf(value) !== -1;
27
28
  },
28
29
  }
29
30
  },
@@ -38,7 +39,11 @@ export default {
38
39
  'mg-role-badge--forward': this.role === 'A',
39
40
  'mg-role-badge--normal': this.size === 'normal',
40
41
  'mg-role-badge--large': this.size === 'large',
42
+ 'mg-role-badge--huge': this.size === 'huge',
41
43
  };
44
+ },
45
+ slotVisibility() {
46
+ return 'default' in this.$slots && !!this.$slots.default;
42
47
  }
43
48
  },
44
49
  };
@@ -59,12 +64,20 @@ export default {
59
64
  }
60
65
 
61
66
  &--large {
62
- font-size: 0.875rem;
67
+ font-size: 1rem;
63
68
  height: 1.5rem;
64
69
  width: 1.5rem;
65
70
  min-width: 1.5rem;
66
71
  }
67
72
 
73
+ &--huge {
74
+ border: 2px solid #fff;
75
+ font-size: 1.25rem;
76
+ height: 2.75rem;
77
+ width: 2.75rem;
78
+ min-width: 2.75rem;
79
+ }
80
+
68
81
  &--goalkeeper {
69
82
  background-color: map-get($palette, 'goalkeeper');
70
83
  }
@@ -17,7 +17,7 @@
17
17
  <span class="mg-checkbox-check align-middle d-inline-block position-relative"></span>
18
18
  <!-- end of THE SQUARE -->
19
19
  <!-- TEXT AS LABEL -->
20
- <span class="align-middle">
20
+ <span class="align-middle pl-2">
21
21
  <slot></slot>
22
22
  </span>
23
23
  <!-- end of TEXT AS LABEL -->
@@ -62,6 +62,9 @@ export default {
62
62
  border-radius: 2px;
63
63
  box-sizing: border-box;
64
64
  height: 20px;
65
+ font-family: 'Raleway', sans-serif;
66
+ font-size: 0.875rem;
67
+ font-weight: 600;
65
68
  vertical-align: sub;
66
69
  width: 20px;
67
70
  }
@@ -110,7 +110,8 @@ export default {
110
110
  border-bottom: 1px solid #d8d8d8;
111
111
 
112
112
  input {
113
- color: #666666;
113
+ background-color: #fff;
114
+ color: #666;
114
115
  font-family: 'Raleway', sans-serif;
115
116
  font-size: 1rem;
116
117
  font-weight: 600;
@@ -121,7 +121,7 @@ export default {
121
121
  }
122
122
 
123
123
  .mg-acronym {
124
- background-color: #5770bc;
124
+ background-color: #777777;
125
125
  border-radius: 50%;
126
126
  }
127
127
 
@@ -0,0 +1,19 @@
1
+ import MgDot from './Dot.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Label/Dot',
6
+ component: MgDot,
7
+ };
8
+
9
+ // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
10
+ const Template = (args, { argTypes }) => ({
11
+ props: Object.keys(argTypes),
12
+ components: { MgDot },
13
+ template: `<mg-dot v-bind="$props"></mg-dot>`,
14
+ });
15
+
16
+ export const Default = Template.bind({});
17
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
18
+ Default.args = {
19
+ };
@@ -0,0 +1,30 @@
1
+ <template>
2
+ <span
3
+ class="d-inline-block rounded-circle"
4
+ :class="classes"
5
+ ></span>
6
+ </template>
7
+
8
+ <script>
9
+ export default {
10
+ name: 'mg-dot',
11
+
12
+ computed: {
13
+ classes() {
14
+ return {
15
+ 'mg-dot': true,
16
+ };
17
+ }
18
+ },
19
+ };
20
+ </script>
21
+
22
+ <style lang="scss">
23
+ @import '../../../assets/palette';
24
+
25
+ .mg-dot {
26
+ background-color: map-get($palette, 'brand');
27
+ height: 0.75rem;
28
+ width: 0.75rem;
29
+ }
30
+ </style>
@@ -0,0 +1,41 @@
1
+ import MgTrafficLight from './TrafficLight.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Label/Traffic Light',
6
+ component: MgTrafficLight,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ light: {
10
+ control: { type: 'select' },
11
+ options: ['red', 'yellow', 'green'],
12
+ defaultValue: 'green'
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: { MgTrafficLight },
33
+ template: `<mg-traffic-light v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-traffic-light>`,
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
+ light: 'green',
40
+ default: '300',
41
+ };
@@ -0,0 +1,57 @@
1
+ <template>
2
+ <div
3
+ class="d-inline-flex bg-white align-items-center px-3"
4
+ :class="classes"
5
+ >
6
+ <div><slot></slot></div>
7
+ </div>
8
+ </template>
9
+
10
+ <script>
11
+ export default {
12
+ name: 'mg-traffic-light',
13
+
14
+ props: {
15
+ light: {
16
+ type: String,
17
+ default: 'green',
18
+ validator: function (value) {
19
+ return ['red', 'yellow', 'green'].indexOf(value) !== -1;
20
+ },
21
+ },
22
+ },
23
+
24
+ computed: {
25
+ classes() {
26
+ return {
27
+ 'mg-traffic-light': true,
28
+ 'mg-traffic-light--error': this.light === 'red',
29
+ 'mg-traffic-light--warning': this.light === 'yellow',
30
+ 'mg-traffic-light--success': this.light === 'green',
31
+ };
32
+ }
33
+ },
34
+ };
35
+ </script>
36
+
37
+ <style lang="scss">
38
+ @import '../../../assets/palette';
39
+
40
+ .mg-traffic-light {
41
+ border: 2px solid;
42
+ border-radius: 50px;
43
+ height: 2.25rem;
44
+
45
+ &--error {
46
+ border-color: map-get($palette, 'error');
47
+ }
48
+
49
+ &--warning {
50
+ border-color: map-get($palette, 'warning');
51
+ }
52
+
53
+ &--success {
54
+ border-color: map-get($palette, 'success');
55
+ }
56
+ }
57
+ </style>
@@ -0,0 +1,43 @@
1
+ import MgListHead from './ListHead.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'List/Head',
6
+ component: MgListHead,
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: { MgListHead },
28
+ template: `
29
+ <div class="row">
30
+ <div class="col-6 p-0">
31
+ <mg-list-head @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-list-head>
32
+ </div>
33
+ <div class="col-6 p-0">
34
+ <mg-list-head>Another head</mg-list-head>
35
+ </div>
36
+ </div>`,
37
+ });
38
+
39
+ export const Default = Template.bind({});
40
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
41
+ Default.args = {
42
+ default: 'this is the list head'
43
+ };
@@ -0,0 +1,35 @@
1
+ <template>
2
+ <div
3
+ class="text-uppercase pb-2 px-3"
4
+ :class="classes"
5
+ ><slot></slot></div>
6
+ </template>
7
+
8
+ <script>
9
+ export default {
10
+ name: 'mg-list-head',
11
+
12
+ computed: {
13
+ classes() {
14
+ return {
15
+ 'mg-list-head': true,
16
+ };
17
+ },
18
+ footerVisibility() {
19
+ return 'footer' in this.$slots && !!this.$slots.footer;
20
+ }
21
+ },
22
+ };
23
+ </script>
24
+
25
+ <style lang="scss">
26
+ @import '../../../assets/palette';
27
+
28
+ .mg-list-head {
29
+ border-bottom: 1px solid #dee2e6;
30
+ color: #777777;
31
+ font-family: 'Ubuntu', sans-serif;
32
+ font-size: 0.75rem;
33
+ font-weight: 500;
34
+ }
35
+ </style>
@@ -0,0 +1,54 @@
1
+ import MgSocialButton from './SocialButton.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Social/Button',
6
+ component: MgSocialButton,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ channel: {
10
+ control: { type: 'select' },
11
+ options: ['google', 'facebook'],
12
+ defaultValue: 'facebook'
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: { MgSocialButton },
33
+ template: `<mg-social-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-social-button>`,
34
+ });
35
+
36
+ export const Facebook = Template.bind({});
37
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
38
+ Facebook.args = {
39
+ channel: 'facebook',
40
+ default: 'Accedi con Facebook'
41
+ };
42
+
43
+ export const Google = Template.bind({});
44
+ Google.args = {
45
+ channel: 'google',
46
+ default: 'Accedi con Google'
47
+ };
48
+
49
+ export const Disabled = Template.bind({});
50
+ Disabled.args = {
51
+ disabled: true,
52
+ channel: 'google',
53
+ default: 'Accedi con Google'
54
+ };
@@ -0,0 +1,81 @@
1
+ <template>
2
+ <button
3
+ type="button"
4
+ class="p-3 d-flex align-items-center w-100 text-white border-0"
5
+ :class="classes"
6
+ :disabled="disabled"
7
+ @click="$emit('click')"
8
+ >
9
+ <span class="flex-grow-0"><svgicon :name="channel"></svgicon></span>
10
+ <span class="flex-grow-1 text-center"><slot></slot></span>
11
+ </button>
12
+ </template>
13
+
14
+ <script>
15
+ export default {
16
+ name: 'mg-social-button',
17
+
18
+ props: {
19
+ disabled: {
20
+ type: Boolean,
21
+ default: false,
22
+ },
23
+ channel: {
24
+ type: String,
25
+ default: 'facebook',
26
+ validator: function (value) {
27
+ return ['facebook', 'google'].indexOf(value) !== -1;
28
+ },
29
+ }
30
+ },
31
+
32
+ computed: {
33
+ classes() {
34
+ return {
35
+ 'mg-social-button': true,
36
+ 'mg-social-button--disabled': this.disabled,
37
+ 'mg-social-button--facebook': this.channel === 'facebook',
38
+ 'mg-social-button--google': this.channel === 'google',
39
+ };
40
+ }
41
+ },
42
+
43
+ methods: {
44
+ onClick() {
45
+ this.$emit('click');
46
+ },
47
+ },
48
+ }
49
+ </script>
50
+
51
+ <style lang="scss">
52
+ @import '../../../assets/palette';
53
+
54
+ .mg-social-button {
55
+ appearance: none;
56
+ cursor: pointer;
57
+ font-family: 'Raleway', sans-serif;
58
+ font-size: 0.8125rem;
59
+ font-weight: 700;
60
+ outline: none;
61
+ text-decoration: none;
62
+
63
+ svg {
64
+ fill: white;
65
+ width: 1rem;
66
+ }
67
+
68
+ &--facebook {
69
+ background-color: #4671b8;
70
+ }
71
+
72
+ &--google {
73
+ background-color: #328bee;
74
+ }
75
+
76
+ &--disabled {
77
+ opacity: 0.6 !important;
78
+ cursor: not-allowed !important;
79
+ }
80
+ }
81
+ </style>
@@ -30,5 +30,5 @@ const Template = args => ({
30
30
  export const Default = Template.bind({});
31
31
  // More on args: https://storybook.js.org/docs/vue/writing-stories/args
32
32
  Default.args = {
33
- default: 'heading one'
33
+ default: 'heading 1'
34
34
  };
@@ -0,0 +1,34 @@
1
+ import MgHeadingThree from './HeadingThree.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Typography/Heading/H3',
6
+ component: MgHeadingThree,
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 => ({
26
+ components: { MgHeadingThree },
27
+ template: `<mg-heading-three><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-heading-three>`,
28
+ });
29
+
30
+ export const Default = Template.bind({});
31
+ // More on args: https://storybook.js.org/docs/vue/writing-stories/args
32
+ Default.args = {
33
+ default: 'heading 3'
34
+ };
@@ -0,0 +1,25 @@
1
+ <template>
2
+ <div v-bind:class="classes"><slot></slot></div>
3
+ </template>
4
+
5
+ <script>
6
+ export default {
7
+ name: 'mg-heading-three',
8
+
9
+ computed: {
10
+ classes() {
11
+ return {
12
+ 'mg-h3': true,
13
+ };
14
+ }
15
+ },
16
+ };
17
+ </script>
18
+
19
+ <style lang="scss">
20
+ .mg-h3 {
21
+ font-family: 'Ubuntu', sans-serif;
22
+ font-size: 1rem;
23
+ font-weight: 500;
24
+ }
25
+ </style>
@@ -30,5 +30,5 @@ const Template = args => ({
30
30
  export const Default = Template.bind({});
31
31
  // More on args: https://storybook.js.org/docs/vue/writing-stories/args
32
32
  Default.args = {
33
- default: 'heading four'
33
+ default: 'heading 4'
34
34
  };
@@ -30,5 +30,5 @@ const Template = args => ({
30
30
  export const Default = Template.bind({});
31
31
  // More on args: https://storybook.js.org/docs/vue/writing-stories/args
32
32
  Default.args = {
33
- default: 'heading six'
33
+ default: 'heading 6'
34
34
  };
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 25 25" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path fill-rule="evenodd" clip-rule="evenodd" d="M9.666 4.2125C9.18 4.2125 8.694 4.806 8.694 5.616V8.37H13.5V12.3665H8.694V24.3005H4.104V12.3665H0V8.37H4.104V6.048C4.104 2.7 6.48 0 9.666 0H13.5V4.2125H9.666Z" fill="white"/>
3
+ </svg>
@@ -0,0 +1,3 @@
1
+ <svg viewBox="0 0 18 18" fill="none" xmlns="http://www.w3.org/2000/svg">
2
+ <path d="M9.00327 7.41519V10.854H13.9025C13.2635 12.9379 11.5216 14.4295 9.00327 14.4295C6.00472 14.429 3.5739 11.9986 3.573 9.00001C3.57278 7.55975 4.14483 6.17841 5.16325 5.15999C6.18167 4.14157 7.56301 3.56952 9.00327 3.56974C10.3516 3.56974 11.5822 4.06556 12.5313 4.88046L15.0627 2.34574C13.4073 0.833677 11.2453 -0.00324253 9.00327 9.4415e-06C4.03036 9.4415e-06 0 4.03037 0 9.00001C0 13.9696 4.03036 18 9.00327 18C16.5584 18 18.2266 10.9334 17.4854 7.42746L9.00327 7.41519Z" fill="white"/>
3
+ </svg>