@magicgol/polyjuice 0.4.0 → 0.6.1

package/.storybook/preview.js

@@ -1,4 +1,16 @@
-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';
+import SvgIcon from 'vue-svgicon';
+import '../src/assets/svg';
+
+library.add(faChevronRight);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
+Vue.use(SvgIcon, { tagName: 'svgicon' });
 
 export const parameters = {
   actions: { argTypesRegex: "^on[A-Z].*" },
@@ -10,6 +22,5 @@ export const parameters = {
   },
   viewport: {
     viewports: INITIAL_VIEWPORTS,
-    defaultViewport: 'responsive',
   },
 }

package/package.json

@@ -1,15 +1,19 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.4.0",
+  "version": "0.6.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
     "lint": "vue-cli-service lint",
     "storybook": "start-storybook -p 6006",
     "build-storybook": "build-storybook",
-    "chromatic": "npx chromatic --project-token=process.env.CHROMATIC_PROJECT_TOKEN"
+    "svg": "vsvg -s ./src/svg -t ./src/assets/svg",
+    "chromatic": "npx chromatic --project-token=e18a9d1a4420"
   },
   "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"
   },
@@ -34,6 +38,7 @@
     "sass-loader": "^10.1.1",
     "style-loader": "^2.0.0",
     "vue-loader": "^15.9.8",
+    "vue-svgicon": "^3.2.9",
     "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {

package/src/assets/palette.scss

@@ -1,5 +1,6 @@
 $palette: (
     'brand': #d81159,
+    'expertClub': #075169,
     'warning': #ff614c,
     'success': #349B50,
     'info': #004781,

package/src/assets/svg/index.js

@@ -0,0 +1,2 @@
+/* eslint-disable */
+require('./star-c')

package/src/assets/svg/star-c.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'star-c': {
+    width: 16,
+    height: 16,
+    viewBox: '0 0 20 20',
+    data: '<path pid="0" fill-rule="evenodd" clip-rule="evenodd" d="M10.923 1.22c-.341-.821-1.505-.821-1.846 0L7.06 6.067a1 1 0 01-.844.613L.984 7.1c-.887.07-1.246 1.177-.57 1.756L4.4 12.271a1 1 0 01.323.992L3.505 18.37c-.207.865.734 1.549 1.493 1.085l4.48-2.737a1 1 0 011.043 0l4.48 2.737c.76.464 1.701-.22 1.495-1.085l-1.218-5.107a1 1 0 01.322-.992l3.987-3.415c.675-.579.316-1.685-.57-1.756l-5.234-.42a1 1 0 01-.843-.613L10.923 1.22zM7.46 10.008a3.141 3.141 0 00-.216 1.143c0 .408.075.81.225 1.206.156.39.372.744.648 1.062.282.312.615.564.999.756.39.186.816.279 1.278.279.354 0 .711-.057 1.071-.171.366-.12.693-.291.981-.513.288-.222.495-.489.621-.801l-1.206-.711c-.084.21-.207.381-.369.513a1.585 1.585 0 01-.513.279c-.186.06-.369.09-.549.09-.252 0-.483-.051-.693-.153a1.719 1.719 0 01-.54-.432 1.993 1.993 0 01-.333-.621 2.29 2.29 0 01-.117-.729c0-.228.033-.456.099-.684.066-.228.168-.435.306-.621.138-.186.312-.333.522-.441.21-.114.456-.171.738-.171.174 0 .354.027.54.081.192.048.366.135.522.261.162.126.291.303.387.531l1.134-.792a2.496 2.496 0 00-.99-1.008c-.438-.258-.957-.387-1.557-.387a3.14 3.14 0 00-2.358 1.008 3.246 3.246 0 00-.63 1.026z" _fill="#075169"/>'
+  }
+})

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/club/button/primary-club-button/PrimaryClubButton.stories.js

@@ -0,0 +1,41 @@
+import MgPrimaryClubButton from './PrimaryClubButton.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Club/Button/Primary Button',
+  component: MgPrimaryClubButton,
+  // 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: { MgPrimaryClubButton },
+  template: `<mg-primary-club-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-primary-club-button>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'primary club button'
+};
+
+export const Disabled = Template.bind({});
+Disabled.args = {
+  disabled: true,
+  default: 'primary club button'
+};

package/src/components/club/button/primary-club-button/PrimaryClubButton.vue

@@ -0,0 +1,66 @@
+<template>
+  <button
+    type="button"
+    class="w-100 rounded justify-content-center align-items-center p-2 border-0 text-white text-uppercase d-flex"
+    :class="classes"
+    :disabled="disabled"
+    @click="$emit('click')"
+  >
+    <svgicon
+      name="star-c"
+      color="#fff"
+      style="height: 16px"
+    ></svgicon>
+    <div class="ml-2">
+      <slot></slot>
+    </div>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'mg-primary-club-button',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-primary-club-button': true,
+        'mg-primary-club-button--disabled': this.disabled,
+      };
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../assets/palette';
+
+  .mg-primary-club-button {
+    appearance: none;
+    background-color: map-get($palette, 'expertClub');
+    box-shadow: 0 5px 22px rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    font-size: 1rem;
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 500;
+    outline: none;
+
+    &--disabled {
+      opacity: 0.6 !important;
+      cursor: not-allowed !important;
+    }
+  }
+</style>

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

@@ -62,22 +62,22 @@ export default {
     cursor: pointer;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;
+    outline: none;
 
-  &-size {
-  &-normal {
-     font-size: 0.8215rem;
-     padding: 0.5rem;
-   }
-  &-large {
-     box-shadow: 0 8px 22px 0 rgba(0, 0, 0, 0.3);
-     font-size: 1rem;
-     padding: 1rem;
-   }
-  }
+    &-size {
+      &-normal {
+         font-size: 0.8215rem;
+         padding: 0.5rem;
+       }
+      &-large {
+         font-size: 1rem;
+         padding: 1rem;
+       }
+    }
 
-  &--disabled {
-     opacity: 0.6 !important;
-     cursor: not-allowed !important;
-   }
+    &--disabled {
+      opacity: 0.6 !important;
+      cursor: not-allowed !important;
+    }
   }
 </style>

package/src/components/form/secondary-button/SecondaryButton.vue

@@ -46,6 +46,7 @@ export default {
   font-family: 'Ubuntu', sans-serif;
   font-size: 0.8215rem;
   font-weight: 500;
+  outline: none;
 
   &--disabled {
     opacity: 0.6 !important;

package/src/components/form/tertiary-button/TertiaryButton.vue

@@ -44,6 +44,7 @@ export default {
   font-family: 'Ubuntu', sans-serif;
   font-size: 0.75rem;
   font-weight: 500;
+  outline: none;
 
   &--disabled {
     opacity: 0.6 !important;

package/src/components/form/toggle-button/ToggleButton.stories.js

@@ -0,0 +1,49 @@
+import MgToggleButton from './ToggleButton.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Button/Toggle Button',
+  component: MgToggleButton,
+  // 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: { MgToggleButton },
+  template: `<mg-toggle-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template><template v-if="${'content' in args}" v-slot:content>${args.content}</template></mg-toggle-button>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  value: false,
+  default: 'toggle button'
+};
+
+export const Clicked = Template.bind({});
+Clicked.args = {
+  value: true,
+  default: 'toggle button'
+};
+
+export const Content = Template.bind({});
+Content.args = {
+  value: true,
+  default: 'toggle button',
+  content: 'il contenuto extra è visualizzato qui'
+};

package/src/components/form/toggle-button/ToggleButton.vue

@@ -0,0 +1,76 @@
+<template>
+  <div class="border rounded">
+    <label
+      class="d-block w-100 m-0 p-2 rounded text-uppercase text-center text-decoration-none"
+      for="toggle-button"
+      :class="classes"
+    >
+      <input
+        type="checkbox"
+        id="toggle-button"
+        class="d-none"
+        :name="name"
+        :value="value"
+        @change="$emit('input', !value)"
+      />
+      <span><slot></slot></span>
+    </label>
+    <div
+      v-if="contentSlotVisibility"
+      class="p-2"
+    ><slot name="content"></slot></div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-toggle-button',
+
+  props: {
+    name: {
+      type: String
+    },
+    value: {
+      type: Boolean,
+      default: false
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-toggle-button': true,
+        'mg-toggle-button--on': this.value === true
+      };
+    },
+    contentSlotVisibility() {
+      return this.$slots['content'] && this.value === true
+    }
+  },
+
+  methods: {
+    onClick() {
+      this.$emit('click');
+    },
+  },
+};
+</script>
+
+<style lang="scss">
+@import '../../../assets/palette';
+
+.mg-toggle-button {
+  appearance: none;
+  background-color: #f7f7f7;
+  color: map-get($palette, 'brand');
+  cursor: pointer;
+  font-family: 'Ubuntu', sans-serif;
+  font-size: 0.8215rem;
+  font-weight: 500;
+  outline: none;
+
+  &--on {
+    background-color: #fff !important;
+  }
+}
+</style>

package/src/components/navigation/tab-button/TabButton.stories.js

@@ -0,0 +1,43 @@
+import MgTabButton from './TabButton.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Navigation/Tab Button',
+  component: MgTabButton,
+  // 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: { MgTabButton },
+  template: `<mg-tab-button @click="$emit('click')" v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-tab-button>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  active: false,
+  default: 'tab button'
+};
+
+export const Active = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Active.args = {
+  active: true,
+  default: 'tab button'
+};

package/src/components/navigation/tab-button/TabButton.vue

@@ -0,0 +1,55 @@
+<template>
+  <div
+    class="d-inline-flex text-center text-decoration-none rounded"
+    :class="classes"
+    :active="active"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-tab-button',
+
+  props: {
+    active: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-tab-button': true,
+        'mg-tab-button--active': this.active === true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-tab-button {
+    appearance: none;
+    background-color: #efefef;
+    border: 1px solid;
+    border-color: #efefef;
+    color: #666666;
+    cursor: pointer;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 1rem;
+    font-weight: 500;
+    padding: 0.4375rem 0.75rem;
+
+    &--active {
+      background-color: rgba(map-get($palette, 'brand'), 0.05);
+      border-color: map-get($palette, 'brand');
+      color: map-get($palette, 'brand');
+      cursor: default !important;
+    }
+  }
+</style>

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,13 +1,28 @@
-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';
+import SvgIcon from 'vue-svgicon';
+import './assets/svg';
 
-Vue.config.productionTip = false
+library.add(faChevronRight);
+Vue.component('font-awesome-icon', FontAwesomeIcon);
+Vue.use(SvgIcon, { tagName: 'svgicon' });
+
+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 MgPrimaryClubButton from './components/club/button/primary-club-button/PrimaryClubButton';
 export MgPrimaryButton from './components/form/primary-button/PrimaryButton';
 export MgSecondaryButton from './components/form/secondary-button/SecondaryButton';
 export MgTertiaryButton from './components/form/tertiary-button/TertiaryButton';
+export MgToggleButton from './components/form/toggle-button/ToggleButton';
+export MgTabButton from './components/navigation/tab-button/TabButton';

package/src/svg/star-c.svg

@@ -0,0 +1,3 @@
+<svg viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.9234 1.21997C10.5818 0.398681 9.41836 0.39868 9.07676 1.21997L7.06061 6.06739C6.9166 6.41363 6.59099 6.6502 6.2172 6.68016L0.984003 7.09971C0.097349 7.17079 -0.262179 8.2773 0.413358 8.85597L4.4005 12.2714C4.68529 12.5153 4.80966 12.8981 4.72266 13.2629L3.50452 18.3696C3.29813 19.2348 4.23938 19.9187 4.99848 19.455L9.47883 16.7184C9.79884 16.523 10.2013 16.523 10.5213 16.7184L15.0017 19.455C15.7608 19.9187 16.702 19.2348 16.4956 18.3696L15.2775 13.2629C15.1905 12.8981 15.3149 12.5153 15.5997 12.2714L19.5868 8.85597C20.2623 8.2773 19.9028 7.17079 19.0162 7.09971L13.783 6.68016C13.4092 6.6502 13.0836 6.41363 12.9396 6.06739L10.9234 1.21997ZM7.459 10.008C7.315 10.38 7.243 10.761 7.243 11.151C7.243 11.559 7.318 11.961 7.468 12.357C7.624 12.747 7.84 13.101 8.116 13.419C8.398 13.731 8.731 13.983 9.115 14.175C9.505 14.361 9.931 14.454 10.393 14.454C10.747 14.454 11.104 14.397 11.464 14.283C11.83 14.163 12.157 13.992 12.445 13.77C12.733 13.548 12.94 13.281 13.066 12.969L11.86 12.258C11.776 12.468 11.653 12.639 11.491 12.771C11.335 12.897 11.164 12.99 10.978 13.05C10.792 13.11 10.609 13.14 10.429 13.14C10.177 13.14 9.946 13.089 9.736 12.987C9.526 12.879 9.346 12.735 9.196 12.555C9.052 12.375 8.941 12.168 8.863 11.934C8.785 11.7 8.746 11.457 8.746 11.205C8.746 10.977 8.779 10.749 8.845 10.521C8.911 10.293 9.013 10.086 9.151 9.90005C9.289 9.71404 9.463 9.56705 9.673 9.45905C9.883 9.34505 10.129 9.28804 10.411 9.28804C10.585 9.28804 10.765 9.31504 10.951 9.36905C11.143 9.41704 11.317 9.50404 11.473 9.63004C11.635 9.75604 11.764 9.93304 11.86 10.161L12.994 9.36905C12.778 8.95504 12.448 8.61905 12.004 8.36104C11.566 8.10304 11.047 7.97404 10.447 7.97404C9.943 7.97404 9.493 8.06704 9.097 8.25304C8.701 8.43304 8.365 8.67604 8.089 8.98204C7.813 9.28804 7.603 9.63004 7.459 10.008Z" fill="#075169"/>
+</svg>