@magicgol/polyjuice 0.2.2 → 0.5.0
Sign up to get free protection for your applications and to get access to all the features.
- package/.storybook/preview.js +10 -2
- package/package.json +4 -1
- package/src/assets/palette.scss +8 -0
- package/src/components/card/horizontal-card/HCard.stories.js +35 -0
- package/src/components/card/horizontal-card/HCard.vue +54 -0
- package/src/components/card/vertical-card/VCard.stories.js +35 -0
- package/src/components/card/vertical-card/VCard.vue +37 -0
- package/src/components/form/primary-button/PrimaryButton.stories.js +1 -1
- package/src/components/form/primary-button/PrimaryButton.vue +0 -1
- package/src/components/form/secondary-button/SecondaryButton.stories.js +1 -1
- package/src/components/form/tertiary-button/TertiaryButton.stories.js +1 -1
- package/src/documentation/Alert.stories.mdx +21 -0
- package/src/documentation/Brand.stories.mdx +14 -0
- package/src/documentation/Footballer.stories.mdx +22 -0
- package/src/main.js +16 -6
package/.storybook/preview.js
CHANGED
@@ -1,4 +1,13 @@
|
|
1
|
-
import
|
1
|
+
import Vue from 'vue';
|
2
|
+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
3
|
+
import { library } from '@fortawesome/fontawesome-svg-core';
|
4
|
+
import {
|
5
|
+
faChevronRight
|
6
|
+
} from '@fortawesome/free-solid-svg-icons';
|
7
|
+
import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
|
8
|
+
|
9
|
+
library.add(faChevronRight);
|
10
|
+
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
2
11
|
|
3
12
|
export const parameters = {
|
4
13
|
actions: { argTypesRegex: "^on[A-Z].*" },
|
@@ -10,6 +19,5 @@ export const parameters = {
|
|
10
19
|
},
|
11
20
|
viewport: {
|
12
21
|
viewports: INITIAL_VIEWPORTS,
|
13
|
-
defaultViewport: 'responsive',
|
14
22
|
},
|
15
23
|
}
|
package/package.json
CHANGED
@@ -1,6 +1,6 @@
|
|
1
1
|
{
|
2
2
|
"name": "@magicgol/polyjuice",
|
3
|
-
"version": "0.
|
3
|
+
"version": "0.5.0",
|
4
4
|
"scripts": {
|
5
5
|
"serve": "vue-cli-service serve",
|
6
6
|
"build": "vue-cli-service build",
|
@@ -10,6 +10,9 @@
|
|
10
10
|
"chromatic": "npx chromatic --project-token=process.env.CHROMATIC_PROJECT_TOKEN"
|
11
11
|
},
|
12
12
|
"dependencies": {
|
13
|
+
"@fortawesome/fontawesome-svg-core": "^6.1.1",
|
14
|
+
"@fortawesome/free-solid-svg-icons": "^6.1.1",
|
15
|
+
"@fortawesome/vue-fontawesome": "^2.0.6",
|
13
16
|
"core-js": "^3.6.5",
|
14
17
|
"vue": "^2.6.11"
|
15
18
|
},
|
package/src/assets/palette.scss
CHANGED
@@ -0,0 +1,35 @@
|
|
1
|
+
import MgHCard from './HCard.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Card/HCard',
|
6
|
+
component: MgHCard,
|
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: { 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>`,
|
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
|
+
default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
|
35
|
+
};
|
@@ -0,0 +1,54 @@
|
|
1
|
+
<template>
|
2
|
+
<div
|
3
|
+
class="d-flex justify-content-between align-items-center rounded px-3"
|
4
|
+
v-bind:class="classes"
|
5
|
+
>
|
6
|
+
<div
|
7
|
+
class="flex-fill"
|
8
|
+
><slot></slot></div>
|
9
|
+
<!-- ARROW -->
|
10
|
+
<div
|
11
|
+
class="pl-3"
|
12
|
+
>
|
13
|
+
<font-awesome-icon
|
14
|
+
icon="chevron-right"
|
15
|
+
class="mg-icon"
|
16
|
+
/>
|
17
|
+
</div>
|
18
|
+
<!-- end of ARROW -->
|
19
|
+
</div>
|
20
|
+
</template>
|
21
|
+
|
22
|
+
<script>
|
23
|
+
export default {
|
24
|
+
name: 'mg-h-card',
|
25
|
+
|
26
|
+
computed: {
|
27
|
+
classes() {
|
28
|
+
return {
|
29
|
+
'mg-h-card': true,
|
30
|
+
};
|
31
|
+
}
|
32
|
+
},
|
33
|
+
|
34
|
+
methods: {
|
35
|
+
onClick() {
|
36
|
+
this.$emit('click');
|
37
|
+
},
|
38
|
+
},
|
39
|
+
};
|
40
|
+
</script>
|
41
|
+
|
42
|
+
<style lang="scss">
|
43
|
+
@import '../../../assets/palette';
|
44
|
+
|
45
|
+
.mg-h-card {
|
46
|
+
box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
|
47
|
+
height: 3.75rem;
|
48
|
+
|
49
|
+
.mg-icon {
|
50
|
+
color: map-get($palette, 'brand');
|
51
|
+
cursor: pointer;
|
52
|
+
}
|
53
|
+
}
|
54
|
+
</style>
|
@@ -0,0 +1,35 @@
|
|
1
|
+
import MgVCard from './VCard.vue';
|
2
|
+
|
3
|
+
// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
|
4
|
+
export default {
|
5
|
+
title: 'Card/VCard',
|
6
|
+
component: MgVCard,
|
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: { MgVCard },
|
28
|
+
template: `<mg-v-card @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-v-card>`,
|
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
|
+
default: '<p>This is a vertical card.</p><div>What do you think about?</div>'
|
35
|
+
};
|
@@ -0,0 +1,37 @@
|
|
1
|
+
<template>
|
2
|
+
<div
|
3
|
+
class="p-3 bg-white rounded"
|
4
|
+
:class="classes"
|
5
|
+
@click="onClick"
|
6
|
+
>
|
7
|
+
<slot></slot>
|
8
|
+
</div>
|
9
|
+
</template>
|
10
|
+
|
11
|
+
<script>
|
12
|
+
export default {
|
13
|
+
name: 'mg-v-card',
|
14
|
+
|
15
|
+
computed: {
|
16
|
+
classes() {
|
17
|
+
return {
|
18
|
+
'mg-v-card': true,
|
19
|
+
};
|
20
|
+
}
|
21
|
+
},
|
22
|
+
|
23
|
+
methods: {
|
24
|
+
onClick() {
|
25
|
+
this.$emit('click');
|
26
|
+
},
|
27
|
+
},
|
28
|
+
};
|
29
|
+
</script>
|
30
|
+
|
31
|
+
<style lang="scss">
|
32
|
+
@import '../../../assets/palette';
|
33
|
+
|
34
|
+
.mg-v-card {
|
35
|
+
box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
|
36
|
+
}
|
37
|
+
</style>
|
@@ -35,7 +35,7 @@ export default {
|
|
35
35
|
const Template = (args, { argTypes }) => ({
|
36
36
|
props: Object.keys(argTypes),
|
37
37
|
components: { MgPrimaryButton },
|
38
|
-
template: `<mg-primary-button @
|
38
|
+
template: `<mg-primary-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-primary-button>`,
|
39
39
|
});
|
40
40
|
|
41
41
|
export const Default = Template.bind({});
|
@@ -25,7 +25,7 @@ export default {
|
|
25
25
|
const Template = (args, { argTypes }) => ({
|
26
26
|
props: Object.keys(argTypes),
|
27
27
|
components: { MgSecondaryButton },
|
28
|
-
template: `<mg-secondary-button @
|
28
|
+
template: `<mg-secondary-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-secondary-button>`,
|
29
29
|
});
|
30
30
|
|
31
31
|
export const Default = Template.bind({});
|
@@ -25,7 +25,7 @@ export default {
|
|
25
25
|
const Template = (args, { argTypes }) => ({
|
26
26
|
props: Object.keys(argTypes),
|
27
27
|
components: { MgTertiaryButton },
|
28
|
-
template: `<mg-tertiary-button @
|
28
|
+
template: `<mg-tertiary-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-tertiary-button>`,
|
29
29
|
});
|
30
30
|
|
31
31
|
export const Default = Template.bind({});
|
@@ -0,0 +1,21 @@
|
|
1
|
+
import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
|
2
|
+
|
3
|
+
<Meta title="Colors/Alert" />
|
4
|
+
|
5
|
+
<ColorPalette>
|
6
|
+
<ColorItem
|
7
|
+
title="Warning"
|
8
|
+
subtitle="Used for error messages"
|
9
|
+
colors={{'Persimmon': '#ff614c'}}
|
10
|
+
/>
|
11
|
+
<ColorItem
|
12
|
+
title="Success"
|
13
|
+
subtitle="Used for success messages"
|
14
|
+
colors={{'Sea Green': '#349B50'}}
|
15
|
+
/>
|
16
|
+
<ColorItem
|
17
|
+
title="Info"
|
18
|
+
subtitle="Used for info messages"
|
19
|
+
colors={{'Congress Blue': '#004781'}}
|
20
|
+
/>
|
21
|
+
</ColorPalette>
|
@@ -0,0 +1,14 @@
|
|
1
|
+
import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
|
2
|
+
|
3
|
+
<Meta title="Colors/Brand" />
|
4
|
+
|
5
|
+
<ColorPalette>
|
6
|
+
<ColorItem
|
7
|
+
title="Brand Color"
|
8
|
+
colors={{'Razzmatazz': '#d81159'}}
|
9
|
+
/>
|
10
|
+
<ColorItem
|
11
|
+
title="Expert Club Color"
|
12
|
+
colors={{'Teal Blue': '#075169'}}
|
13
|
+
/>
|
14
|
+
</ColorPalette>
|
@@ -0,0 +1,22 @@
|
|
1
|
+
import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
|
2
|
+
|
3
|
+
<Meta title="Colors/Footballer" />
|
4
|
+
|
5
|
+
<ColorPalette>
|
6
|
+
<ColorItem
|
7
|
+
title="Goalkeeper"
|
8
|
+
colors={{'Supernova': '#ffc700'}}
|
9
|
+
/>
|
10
|
+
<ColorItem
|
11
|
+
title="Defender"
|
12
|
+
colors={{'Harlequin': '#3de000'}}
|
13
|
+
/>
|
14
|
+
<ColorItem
|
15
|
+
title="Midfielder"
|
16
|
+
colors={{'Denim': '#116dd8'}}
|
17
|
+
/>
|
18
|
+
<ColorItem
|
19
|
+
title="Forward"
|
20
|
+
colors={{'Torch Red': '#f30026'}}
|
21
|
+
/>
|
22
|
+
</ColorPalette>
|
package/src/main.js
CHANGED
@@ -1,12 +1,22 @@
|
|
1
|
-
import Vue from 'vue'
|
2
|
-
import App from './App.vue'
|
1
|
+
import Vue from 'vue';
|
2
|
+
import App from './App.vue';
|
3
|
+
import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
|
4
|
+
import { library } from '@fortawesome/fontawesome-svg-core';
|
5
|
+
import {
|
6
|
+
faChevronRight
|
7
|
+
} from '@fortawesome/free-solid-svg-icons';
|
3
8
|
|
4
|
-
|
9
|
+
library.add(faChevronRight);
|
10
|
+
Vue.component('font-awesome-icon', FontAwesomeIcon);
|
11
|
+
|
12
|
+
Vue.config.productionTip = false;
|
5
13
|
|
6
14
|
new Vue({
|
7
15
|
render: h => h(App),
|
8
16
|
}).$mount('#app')
|
9
17
|
|
10
|
-
export
|
11
|
-
export
|
12
|
-
export
|
18
|
+
export MgHCard from './components/card/horizontal-card/HCard';
|
19
|
+
export MgVCard from './components/card/vertical-card/VCard';
|
20
|
+
export MgPrimaryButton from './components/form/primary-button/PrimaryButton';
|
21
|
+
export MgSecondaryButton from './components/form/secondary-button/SecondaryButton';
|
22
|
+
export MgTertiaryButton from './components/form/tertiary-button/TertiaryButton';
|