@magicgol/polyjuice 0.4.0 → 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.4.0",
+  "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,5 +1,6 @@
 $palette: (
     'brand': #d81159,
+    'expertClub': #075169,
     'warning': #ff614c,
     'success': #349B50,
     'info': #004781,

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/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/documentation/Alert.stories.mdx

@@ -6,7 +6,7 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
     <ColorItem
         title="Warning"
         subtitle="Used for error messages"
-        colors={{Persimmon: '#ff614c'}}
+        colors={{'Persimmon': '#ff614c'}}
     />
     <ColorItem
         title="Success"

package/src/documentation/Brand.stories.mdx

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

package/src/documentation/Footballer.stories.mdx

@@ -5,15 +5,15 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
 <ColorPalette>
     <ColorItem
         title="Goalkeeper"
-        colors={{Supernova: '#ffc700'}}
+        colors={{'Supernova': '#ffc700'}}
     />
     <ColorItem
         title="Defender"
-        colors={{Harlequin: '#3de000'}}
+        colors={{'Harlequin': '#3de000'}}
     />
     <ColorItem
         title="Midfielder"
-        colors={{Denim: '#116dd8'}}
+        colors={{'Denim': '#116dd8'}}
     />
     <ColorItem
         title="Forward"

package/src/main.js

@@ -1,12 +1,21 @@
-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 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';