npm - @magicgol/polyjuice - Versions diffs - 0.2.1 → 0.4.0 - Mend

@magicgol/polyjuice 0.2.1 → 0.4.0

Files changed (14) hide show

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.2.1",
+  "version": "0.4.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",

package/src/assets/palette.scss CHANGED Viewed

@@ -1,3 +1,10 @@
 $palette: (
     'brand': #d81159,
+    'warning': #ff614c,
+    'success': #349B50,
+    'info': #004781,
+    'goalkeeper': #ffc700,
+    'defender': #3de000,
+    'midfielder': #116dd8,
+    'forward': #f30026,
 );

@@ -0,0 +1,35 @@
+import MgVCard from './VCard.vue';
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Card/VCard',
+  component: MgVCard,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    default: {
+      description: "The default Vue slot",
+      control: {
+        type: 'text',
+      },
+      table: {
+        category: 'Slots',
+        type: {
+          summary: 'html',
+        },
+      }
+    }
+  },
+};
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgVCard },
+  template: `<mg-v-card @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-v-card>`,
+});
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: '<p>This is a vertical card.</p><div>What do you think about?</div>'
+};

@@ -0,0 +1,37 @@
+<template>
+  <div
+    class="p-3 bg-white rounded"
+    :class="classes"
+    @click="onClick"
+  >
+    <slot></slot>
+  </div>
+</template>
+<script>
+export default {
+  name: 'mg-v-card',
+  computed: {
+    classes() {
+      return {
+        'mg-v-card': true,
+      };
+    }
+  },
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+<style lang="scss">
+@import '../../../assets/palette';
+.mg-v-card {
+  box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
+}
+</style>

@@ -35,7 +35,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MgPrimaryButton },
-  template: `<mg-primary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-primary-button>`,
+  template: `<mg-primary-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-primary-button>`,
 });
 export const Default = Template.bind({});

@@ -46,7 +46,7 @@ export default {
   methods: {
     onClick() {
-      this.$emit('onClick');
+      this.$emit('click');
     },
   },
 };

@@ -25,7 +25,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MgSecondaryButton },
-  template: `<mg-secondary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-secondary-button>`,
+  template: `<mg-secondary-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-secondary-button>`,
 });
 export const Default = Template.bind({});

@@ -29,7 +29,7 @@ export default {
   methods: {
     onClick() {
-      this.$emit('onClick');
+      this.$emit('click');
     },
   },
 };

@@ -25,7 +25,7 @@ export default {
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
   components: { MgTertiaryButton },
-  template: `<mg-tertiary-button @onClick="onClick" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-tertiary-button>`,
+  template: `<mg-tertiary-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-tertiary-button>`,
 });
 export const Default = Template.bind({});

@@ -29,7 +29,7 @@ export default {
   methods: {
     onClick() {
-      this.$emit('onClick');
+      this.$emit('click');
     },
   },
 };

package/src/documentation/Alert.stories.mdx ADDED Viewed

@@ -0,0 +1,21 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
+<Meta title="Colors/Alert" />
+<ColorPalette>
+    <ColorItem
+        title="Warning"
+        subtitle="Used for error messages"
+        colors={{Persimmon: '#ff614c'}}
+    />
+    <ColorItem
+        title="Success"
+        subtitle="Used for success messages"
+        colors={{'Sea Green': '#349B50'}}
+    />
+    <ColorItem
+        title="Info"
+        subtitle="Used for info messages"
+        colors={{'Congress Blue': '#004781'}}
+    />
+</ColorPalette>

package/src/documentation/Brand.stories.mdx ADDED Viewed

@@ -0,0 +1,10 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
+<Meta title="Colors/Brand" />
+<ColorPalette>
+    <ColorItem
+        title="Brand Color"
+        colors={{Razzmatazz: '#d81159'}}
+    />
+</ColorPalette>

@@ -0,0 +1,22 @@
+import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
+<Meta title="Colors/Footballer" />
+<ColorPalette>
+    <ColorItem
+        title="Goalkeeper"
+        colors={{Supernova: '#ffc700'}}
+    />
+    <ColorItem
+        title="Defender"
+        colors={{Harlequin: '#3de000'}}
+    />
+    <ColorItem
+        title="Midfielder"
+        colors={{Denim: '#116dd8'}}
+    />
+    <ColorItem
+        title="Forward"
+        colors={{'Torch Red': '#f30026'}}
+    />
+</ColorPalette>

package/src/main.js CHANGED Viewed

@@ -6,3 +6,8 @@ Vue.config.productionTip = false
 new Vue({
   render: h => h(App),
 }).$mount('#app')
+export MgVCard from './components/card/vertical-card/VCard';
+export MgPrimaryButton from './components/form/primary-button/PrimaryButton';
+export MgSecondaryButton from './components/form/secondary-button/SecondaryButton';
+export MgTertiaryButton from './components/form/tertiary-button/TertiaryButton';