@magicgol/polyjuice 0.2.2 → 0.5.0

package/.storybook/preview.js

@@ -1,4 +1,13 @@
-import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport'
+import Vue from 'vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons';
+import { INITIAL_VIEWPORTS } from '@storybook/addon-viewport';
+
+library.add(faChevronRight);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -10,6 +19,5 @@ export const parameters = {
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS,
-    defaultViewport: 'responsive',
   },
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.2.2",
+  "version": "0.5.0",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -10,6 +10,9 @@
     "chromatic": "npx chromatic --project-token=process.env.CHROMATIC_PROJECT_TOKEN"
   },
   "dependencies": {
+    "@fortawesome/fontawesome-svg-core": "^6.1.1",
+    "@fortawesome/free-solid-svg-icons": "^6.1.1",
+    "@fortawesome/vue-fontawesome": "^2.0.6",
     "core-js": "^3.6.5",
     "vue": "^2.6.11"
   },

package/src/assets/palette.scss

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

package/src/components/card/horizontal-card/HCard.stories.js

@@ -0,0 +1,35 @@
+import MgHCard from './HCard.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Card/HCard',
+  component: MgHCard,
+  // 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: { MgHCard },
+  template: `<mg-h-card @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-h-card>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: '<div>This is a vertical card.</div><div>What do you think about?</div>'
+};

package/src/components/card/horizontal-card/HCard.vue

@@ -0,0 +1,54 @@
+<template>
+  <div
+    class="d-flex justify-content-between align-items-center rounded px-3"
+    v-bind:class="classes"
+  >
+    <div
+      class="flex-fill"
+    ><slot></slot></div>
+    <!-- ARROW -->
+    <div
+      class="pl-3"
+    >
+      <font-awesome-icon
+        icon="chevron-right"
+        class="mg-icon"
+      />
+    </div>
+    <!-- end of ARROW -->
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-h-card',
+
+  computed: {
+    classes() {
+      return {
+        'mg-h-card': true,
+      };
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-h-card {
+  box-shadow: 0 8px 12px 0 rgba(0, 0, 0, 0.25);
+  height: 3.75rem;
+
+  .mg-icon {
+    color: map-get($palette, 'brand');
+    cursor: pointer;
+  }
+}
+</style>

package/src/components/card/vertical-card/VCard.stories.js

@@ -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>'
+};

package/src/components/card/vertical-card/VCard.vue

@@ -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>

package/src/components/form/primary-button/PrimaryButton.stories.js

@@ -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({});

package/src/components/form/primary-button/PrimaryButton.vue

@@ -69,7 +69,6 @@ export default {
      padding: 0.5rem;
    }
   &-large {
-     box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
      font-size: 1rem;
      padding: 1rem;
    }

package/src/components/form/secondary-button/SecondaryButton.stories.js

@@ -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({});

package/src/components/form/tertiary-button/TertiaryButton.stories.js

@@ -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({});

package/src/documentation/Alert.stories.mdx

@@ -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

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

package/src/documentation/Footballer.stories.mdx

@@ -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

@@ -1,12 +1,22 @@
-import Vue from 'vue'
-import App from './App.vue'
+import Vue from 'vue';
+import App from './App.vue';
+import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import {
+  faChevronRight
+} from '@fortawesome/free-solid-svg-icons';
 
-Vue.config.productionTip = false
+library.add(faChevronRight);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
+
+Vue.config.productionTip = false;
 
 new Vue({
   render: h => h(App),
 }).$mount('#app')
 
-export PrimaryButton from './components/form/primary-button/PrimaryButton';
-export PrimaryButton from './components/form/secondary-button/SecondaryButton';
-export PrimaryButton from './components/form/tertiary-button/TertiaryButton';
+export MgHCard from './components/card/horizontal-card/HCard';
+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';