@magicgol/polyjuice 0.40.5 → 0.41.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.40.5",
3
+ "version": "0.41.0",
4
4
  "scripts": {
5
5
  "serve": "vue-cli-service serve",
6
6
  "build": "vue-cli-service build",
@@ -0,0 +1,40 @@
1
+ import MgAlertSquare from './AlertSquare.vue';
2
+
3
+ // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
4
+ export default {
5
+ title: 'Components/Alert Square',
6
+ component: MgAlertSquare,
7
+ // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
8
+ argTypes: {
9
+ level: {
10
+ control: { type: 'select' },
11
+ options: ['error', 'warning', 'success', 'info'],
12
+ defaultValue: 'error'
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: { MgAlertSquare },
33
+ template: `<mg-alert-square v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-alert-square>`,
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: 'testo in evidenza',
40
+ };
@@ -0,0 +1,70 @@
1
+ <template>
2
+ <div
3
+ :class="classes"
4
+ class="p-2"
5
+ >
6
+ <slot></slot>
7
+ </div>
8
+ </template>
9
+
10
+ <script>
11
+ export default {
12
+ name: 'mg-alert-square',
13
+
14
+ props: {
15
+ level: {
16
+ type: String,
17
+ default: 'warning',
18
+ validator: function (value) {
19
+ return ['error', 'warning', 'success', 'info'].indexOf(value) !== -1;
20
+ },
21
+ }
22
+ },
23
+
24
+ computed: {
25
+ classes() {
26
+ return {
27
+ 'mg-alert-square': true,
28
+ 'mg-alert-square--level-error': this.level === 'error',
29
+ 'mg-alert-square--level-warning': this.level === 'warning',
30
+ 'mg-alert-square--level-success': this.level === 'success',
31
+ 'mg-alert-square--level-info': this.level === 'info',
32
+ };
33
+ }
34
+ },
35
+ };
36
+ </script>
37
+
38
+ <style lang="scss">
39
+ @import '../../../assets/palette';
40
+
41
+ .mg-alert-square {
42
+ border-radius: 8px;
43
+ font-family: Ubuntu, sans-serif;
44
+ font-size: 0.875rem;
45
+ font-weight: 700;
46
+ text-align: center;
47
+
48
+ &--level {
49
+ &-error {
50
+ background-color: rgba(map-get($palette, 'error'), 0.05);
51
+ color: map-get($palette, 'error');
52
+ }
53
+
54
+ &-warning {
55
+ background-color: rgba(map-get($palette, 'warning'), 0.05);
56
+ color: map-get($palette, 'warning');
57
+ }
58
+
59
+ &-success {
60
+ background-color: rgba(map-get($palette, 'success'), 0.05);
61
+ color: map-get($palette, 'success');
62
+ }
63
+
64
+ &-info {
65
+ background-color: rgba(map-get($palette, 'info'), 0.05);
66
+ color: map-get($palette, 'info');
67
+ }
68
+ }
69
+ }
70
+ </style>
@@ -126,6 +126,7 @@ export default {
126
126
  }
127
127
 
128
128
  &-target {
129
+ box-shadow: 0 4px 4px rgba(0, 0, 0, 0.25);
129
130
  background-color: map-get($palette, 'brand');
130
131
  > div {
131
132
  background: #fff;