@magicgol/polyjuice 0.32.2 → 0.33.1

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.32.2",
+  "version": "0.33.1",
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -19,11 +19,11 @@
   },
   "devDependencies": {
     "@babel/core": "^7.17.9",
-    "@storybook/addon-actions": "^6.5.6",
-    "@storybook/addon-essentials": "^6.5.6",
-    "@storybook/addon-links": "^6.5.6",
+    "@storybook/addon-actions": "^6.5.10",
+    "@storybook/addon-essentials": "^6.5.10",
+    "@storybook/addon-links": "^6.5.10",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/vue": "^6.5.6",
+    "@storybook/vue": "^6.5.10",
     "@vue/cli-plugin-babel": "~4.5.15",
     "@vue/cli-plugin-eslint": "~4.5.15",
     "@vue/cli-service": "~4.5.15",

package/src/assets/palette.scss

@@ -16,6 +16,7 @@ $palette: (
     'midfielder': #8fc6f9,
     'forward': #f58383,
     'bench': #bbb,
+    'noRole': #c2c2c2,
     // LIVE
     'online': #00b669,
     'offline': #ea7203,

package/src/assets/svg/index.js

@@ -15,3 +15,4 @@ require('./soccer-ball')
 require('./star-c')
 require('./star-stroke-p')
 require('./timer')
+require('./x')

package/src/assets/svg/x.js

@@ -0,0 +1,10 @@
+/* eslint-disable */
+var icon = require('vue-svgicon')
+icon.register({
+  'x': {
+    width: 12,
+    height: 12,
+    viewBox: '0 0 12 12',
+    data: '<path pid="0" d="M7.292 6l3.942-3.932A.92.92 0 009.932.766L6 4.708 2.067.766A.92.92 0 10.766 2.068L4.707 6 .766 9.933a.917.917 0 000 1.301.916.916 0 001.301 0L6 7.293l3.932 3.941a.917.917 0 001.302 0 .919.919 0 000-1.301L7.292 6z" _fill="#D81159"/>'
+  }
+})

package/src/components/{label → components}/anchor/Anchor.stories.js

@@ -2,7 +2,7 @@ import MgAnchor from './Anchor.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Label/Anchor',
+  title: 'Components/Anchor',
   component: MgAnchor,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{label/badge/LabelBadge.stories.js → components/badge/Badge.stories.js}

@@ -1,9 +1,9 @@
-import MgLabelBadge from './LabelBadge.vue';
+import MgBadge from './Badge.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Label/Badge',
-  component: MgLabelBadge,
+  title: 'Components/Badge',
+  component: MgBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {},
 };
@@ -11,8 +11,8 @@ export default {
 // More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
 const Template = (args, { argTypes }) => ({
   props: Object.keys(argTypes),
-  components: { MgLabelBadge },
-  template: `<mg-label-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-label-badge>`,
+  components: { MgBadge },
+  template: `<mg-badge v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-badge>`,
 });
 
 export const Default = Template.bind({});

package/src/components/{label/badge/LabelBadge.vue → components/badge/Badge.vue}

@@ -7,12 +7,12 @@
 
 <script>
 export default {
-  name: 'mg-label-badge',
+  name: 'mg-badge',
 
   computed: {
     classes() {
       return {
-        'mg-label-badge': true,
+        'mg-badge': true,
       };
     },
   },
@@ -22,7 +22,7 @@ export default {
 <style lang="scss">
   @import '../../../assets/palette';
 
-  .mg-label-badge {
+  .mg-badge {
     background-color: #84485E;
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;

package/src/components/{label → components}/dot/Dot.stories.js

@@ -2,7 +2,7 @@ import MgDot from './Dot.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Label/Dot',
+  title: 'Components/Dot',
   component: MgDot,
 };
 

package/src/components/components/filter-option/FilterOption.stories.js

@@ -0,0 +1,35 @@
+import MgOptionLabel from './FilterOption.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Filter Option',
+  component: MgOptionLabel,
+  // 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: { MgOptionLabel },
+  template: `<mg-option-label v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-option-label>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'etichetta'
+};

package/src/components/components/filter-option/FilterOption.vue

@@ -0,0 +1,51 @@
+<template>
+  <div
+    class="d-inline-flex align-items-center text-white p-1"
+    :class="classes"
+  >
+    <div class="p-2">
+      <slot></slot>
+    </div>
+    <div class="mg-filter-option-circle d-flex align-items-center justify-content-center bg-white rounded-circle">
+      <svgicon name="x"></svgicon>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-filter-option',
+
+  computed: {
+    classes() {
+      return {
+        'mg-filter-option': true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-filter-option {
+    background-color: map-get($palette, 'brand');
+    border-radius: 30px;
+    cursor: pointer;
+    font-family: 'Ubuntu', sans-serif;
+    font-size: 0.875rem;
+    font-weight: 500;
+    height: 2rem;
+
+    &-circle {
+      height: 1.5rem;
+      width: 1.5rem;
+
+      svg {
+        fill: map-get($palette, 'brand');
+        height: 0.75rem;
+      }
+    }
+  }
+</style>

package/src/components/{icon/badge → components/icon-badge}/IconBadge.stories.js

@@ -2,7 +2,7 @@ import MgIconBadge from './IconBadge.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Icon/Badge',
+  title: 'Components/Icon Badge',
   component: MgIconBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{label → components}/label/Label.stories.js

@@ -2,7 +2,7 @@ import MgLabel from './Label.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Label/Label',
+  title: 'Components/Label',
   component: MgLabel,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{label → components}/traffic-light/TrafficLight.stories.js

@@ -2,7 +2,7 @@ import MgTrafficLight from './TrafficLight.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Label/Traffic Light',
+  title: 'Components/Traffic Light',
   component: MgTrafficLight,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{card → content/card}/horizontal-card/HCard.stories.js

@@ -2,7 +2,7 @@ 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',
+  title: 'Content/Card/HCard',
   component: MgHCard,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{card → content/card}/vertical-card/VCard.stories.js

@@ -2,7 +2,7 @@ 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',
+  title: 'Content/Card/VCard',
   component: MgVCard,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{card → content/card}/vertical-card/VCard.vue

@@ -67,7 +67,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-v-card {
   background: white;

package/src/components/{list → content/list}/head/ListHead.stories.js

@@ -2,7 +2,7 @@ import MgListHead from './ListHead.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'List/Head',
+  title: 'Content/List/Head',
   component: MgListHead,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{list → content/list}/head/ListHead.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-list-head {
   border-bottom: 1px solid #dee2e6;

package/src/components/{loader → content/loader}/soccer-ball/SoccerBall.stories.js

@@ -2,7 +2,7 @@ import MgSoccerBall from './SoccerBall.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Loader/Soccer Ball',
+  title: 'Content/Loader/Soccer Ball',
   component: MgSoccerBall,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
 };

package/src/components/{form/advanced → context/actions}/filter-button/FilterButton.stories.js

@@ -2,7 +2,7 @@ import MgFilterButton from './FilterButton.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Form/Advanced/FilterButton',
+  title: 'Context/Actions/Filter Button',
   component: MgFilterButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{form/advanced → context/actions}/filter-button/FilterButton.vue

@@ -17,7 +17,7 @@
 </template>
 
 <script>
-import MgTertiaryButton from "../../button/tertiary-button/TertiaryButton";
+import MgTertiaryButton from "../../../form/button/tertiary-button/TertiaryButton";
 
 export default {
   name: 'mg-filter-button',

package/src/components/{form/advanced → context/actions}/remove-button/RemoveButton.stories.js

@@ -2,7 +2,7 @@ import MgRemoveButton from './RemoveButton.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Form/Advanced/RemoveButton',
+  title: 'Context/Actions/Remove Button',
   component: MgRemoveButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {
@@ -20,3 +20,9 @@ export const Default = Template.bind({});
 // More on args: https://storybook.js.org/docs/vue/writing-stories/args
 Default.args = {
 };
+
+export const Disabled = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Disabled.args = {
+  disabled: true
+};

package/src/components/{form/advanced → context/actions}/remove-button/RemoveButton.vue

@@ -1,19 +1,27 @@
 <template>
   <mg-tertiary-button
-    @click="onClick"
-    :class="classes"
     class="p-0"
+    :disabled="disabled"
+    :class="classes"
+    @click="onClick"
   >
     <svgicon name="circle-with-minus"></svgicon>
   </mg-tertiary-button>
 </template>
 
 <script>
-import MgTertiaryButton from "../../button/tertiary-button/TertiaryButton";
+import MgTertiaryButton from "../../../form/button/tertiary-button/TertiaryButton";
 
 export default {
   name: 'mg-remove-button',
 
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false,
+    }
+  },
+
   computed: {
     classes() {
       return {

package/src/components/{club → context/club}/button/primary-club-button/PrimaryClubButton.stories.js

@@ -2,7 +2,7 @@ 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',
+  title: 'Context/Club/Button/Primary Club Button',
   component: MgPrimaryClubButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{club → context/club}/button/primary-club-button/PrimaryClubButton.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../../assets/palette';
+  @import '../../../../../assets/palette';
 
   .mg-primary-club-button {
     appearance: none;

package/src/components/{club → context/club}/button/secondary-club-button/SecondaryClubButton.stories.js

@@ -2,7 +2,7 @@ import MgSecondaryClubButton from './SecondaryClubButton.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Club/Button/Secondary Button',
+  title: 'Context/Club/Button/Secondary Club Button',
   component: MgSecondaryClubButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{club → context/club}/button/secondary-club-button/SecondaryClubButton.vue

@@ -42,7 +42,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../../assets/palette';
+  @import '../../../../../assets/palette';
 
   .mg-secondary-club-button {
     appearance: none;

package/src/components/{club → context/club}/plate/ClubPlate.stories.js

@@ -2,7 +2,7 @@ import MgClubPlate from './ClubPlate.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Club/Plate',
+  title: 'Context/Club/Button/Club Plate',
   component: MgClubPlate,
 };
 

package/src/components/{club → context/club}/plate/ClubPlate.vue

@@ -39,7 +39,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-club-plate {
     color: map-get($palette, 'expertClub');

package/src/components/{footballer → context/footballer}/footballer-box/FootballerBox.stories.js

@@ -2,7 +2,7 @@ import MgFootballerBox from './FootballerBox.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Footballer/Box',
+  title: 'Context/Footballer/Footballer Box',
   component: MgFootballerBox,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{footballer → context/footballer}/footballer-box/FootballerBox.vue

@@ -70,7 +70,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-footballer-box {
     border-style: solid;

package/src/components/{footballer → context/footballer}/horizontal-footballer/HFootballer.stories.js

@@ -2,7 +2,7 @@ import MgHFootballer from './HFootballer.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Footballer/HFootballer',
+  title: 'Context/Footballer/HFootballer',
   component: MgHFootballer,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{footballer → context/footballer}/horizontal-footballer/HFootballer.vue

@@ -40,7 +40,7 @@
 </template>
 
 <script>
-import MgRoleBadge from "../role-badge/RoleBadge";
+import MgRoleBadge from "../role/role-badge/RoleBadge";
 
 export default {
   name: 'mg-h-footballer',
@@ -121,7 +121,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-h-footballer {
     color: map-get($palette, 'text');

package/src/components/{footballer → context/footballer}/horizontal-footballer-card/HFootballerCard.stories.js

@@ -2,7 +2,7 @@ import MgHFootballerCard from './HFootballerCard.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Footballer/HFootballerCard',
+  title: 'Context/Footballer/HFootballerCard',
   component: MgHFootballerCard,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{footballer → context/footballer}/horizontal-footballer-card/HFootballerCard.vue

@@ -16,7 +16,7 @@
 
 <script>
 import MgHFootballer from "../horizontal-footballer/HFootballer";
-import MgHCard from "../../card/horizontal-card/HCard";
+import MgHCard from "../../../content/card/horizontal-card/HCard";
 
 export default {
   name: 'mg-h-footballer-card',

package/src/components/{footballer → context/footballer}/horizontal-footballer-placeholder/HFootballerPlaceholder.stories.js

@@ -2,7 +2,7 @@ import MgHFootballerPlaceholder from './HFootballerPlaceholder.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Footballer/HPlaceholder',
+  title: 'Context/Footballer/HFootballerPlaceholder',
   component: MgHFootballerPlaceholder,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{footballer → context/footballer}/horizontal-footballer-placeholder/HFootballerPlaceholder.vue

@@ -56,7 +56,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-footballer-h-placeholder {
   background: white;

package/src/components/context/footballer/list/footballer-list-body/FootballerListBody.stories.js

@@ -0,0 +1,53 @@
+import MgFootballerListBody from './FootballerListBody.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Context/Footballer/List/Footballer List Body',
+  component: MgFootballerListBody,
+  // 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: { MgFootballerListBody },
+  template: `<mg-footballer-list-body v-bind="$props">
+    <template v-if="${'first-col' in args}" v-slot:first-col>${args['first-col']}</template>
+    <template v-if="${'second-col' in args}" v-slot:second-col>${args['second-col']}</template>
+    <template v-if="${'third-col' in args}" v-slot:third-col>${args['third-col']}</template>
+    <template v-if="${'actions' in args}" v-slot:actions>${args.actions}</template>
+  </mg-footballer-list-body>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  'first-col': 'calciatore',
+  'second-col': 'valore',
+  'third-col': 'quotazione',
+  'actions': '->',
+};
+
+export const Disabled = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Disabled.args = {
+  'first-col': 'calciatore',
+  'second-col': 'valore',
+  'third-col': 'quotazione',
+  'actions': '->',
+  disabled: true,
+};

package/src/components/context/footballer/list/footballer-list-body/FootballerListBody.vue

@@ -0,0 +1,156 @@
+<template>
+  <div
+    class="mt-2"
+    :class="classes"
+    @click="onClick"
+  >
+    <div class="d-flex align-items-center h-100 rounded">
+      <div
+        class="p-0 pl-3 py-2"
+        :class="firstColClass"
+      >
+        <slot name="first-col"></slot>
+      </div>
+      <div
+        v-if="secondColVisibility"
+        class="col-2 p-0 text-center"
+      >
+        <slot name="second-col"></slot>
+      </div>
+      <div
+        v-if="thirdColVisibility"
+        class="p-0 text-center"
+        :class="thirdColClass"
+      >
+        <slot name="third-col"></slot>
+      </div>
+      <div
+        v-if="actionsColVisibility"
+        class="p-0 pr-3 text-center"
+        :class="actionsColClass"
+      >
+        <slot name="actions"></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-footballer-list-body',
+
+  props: {
+    actionsCol: {
+      type: Number,
+      default: 1
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    selected: {
+      type: Boolean,
+      default: false
+    },
+    role: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
+      },
+    },
+  },
+
+  computed: {
+    classes () {
+      return {
+        'mg-footballer-list-body': true,
+        'mg-footballer-list-body--disabled': this.disabled === true,
+        'mg-footballer-list-body--selected': this.selected === true,
+        'mg-footballer-list-body--goalkeeper': this.role === 'P',
+        'mg-footballer-list-body--defender': this.role === 'D',
+        'mg-footballer-list-body--midfielder': this.role === 'C',
+        'mg-footballer-list-body--forward': this.role === 'A'
+      };
+    },
+    secondColVisibility () {
+      return 'second-col' in this.$slots && !!this.$slots['second-col'];
+    },
+    thirdColVisibility () {
+      return 'third-col' in this.$slots && !!this.$slots['third-col'];
+    },
+    actionsColVisibility () {
+      return 'actions' in this.$slots && !!this.$slots.actions;
+    },
+    actionsColClass () {
+      return 'col-' + this.actionsCol;
+    },
+    firstColClass () {
+      return 'col-' + ((this.secondColVisibility ? 8 : 10) - this.actionsCol);
+    },
+    thirdColClass () {
+      return this.actionsColVisibility ? 'col-2' : 'col-3 pr-3'
+    }
+  },
+
+  methods: {
+    onClick () {
+      if (!this.disabled) {
+        this.$emit('click');
+      }
+    }
+  }
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../../assets/palette';
+
+  .mg-footballer-list-body {
+    height: 3.75rem;
+
+    > div {
+      border: 1px solid #f6f6f6;
+      background: #f6f6f6;
+    }
+
+    &--disabled {
+      opacity: 0.6;
+      cursor: not-allowed !important;
+    }
+
+    &--selected {
+      > div {
+        box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+      }
+
+      &.mg-footballer-list-body--goalkeeper {
+        > div {
+          background-color: map-get($palette, 'goalkeeper');
+          border-color: darken(map-get($palette, 'goalkeeper'), 25%);
+        }
+      }
+
+      &.mg-footballer-list-body--defender {
+        > div {
+          background-color: map-get($palette, 'defender');
+          border-color: darken(map-get($palette, 'defender'), 25%);
+        }
+      }
+
+      &.mg-footballer-list-body--midfielder {
+        > div {
+          background-color: map-get($palette, 'midfielder');
+          border-color: darken(map-get($palette, 'midfielder'), 25%);
+        }
+      }
+
+      &.mg-footballer-list-body--forward {
+        > div {
+          background-color: map-get($palette, 'forward');
+          border-color: darken(map-get($palette, 'forward'), 25%);
+        }
+      }
+    }
+  }
+</style>

package/src/components/context/footballer/list/footballer-list-head/FootballerListHead.stories.js

@@ -0,0 +1,42 @@
+import MgFootballerListHead from './FootballerListHead.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Context/Footballer/List/Footballer List Head',
+  component: MgFootballerListHead,
+  // 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: { MgFootballerListHead },
+  template: `<mg-footballer-list-head v-bind="$props">
+    <template v-if="${'first-col' in args}" v-slot:first-col>${args['first-col']}</template>
+    <template v-if="${'second-col' in args}" v-slot:second-col>${args['second-col']}</template>
+    <template v-if="${'third-col' in args}" v-slot:third-col>${args['third-col']}</template>
+    <template v-if="${'default' in args}" v-slot>${args.default}</template>
+  </mg-footballer-list-head>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  'first-col': 'calciatore',
+  'second-col': 'valore',
+  'third-col': 'quotazione',
+};

package/src/components/context/footballer/list/footballer-list-head/FootballerListHead.vue

@@ -0,0 +1,96 @@
+<template>
+  <div
+    :class="classes"
+  >
+    <div
+      class="p-0"
+      :class="firstColClass"
+    >
+      <mg-list-head
+        :active="firstColActive"
+      ><slot name="first-col"></slot></mg-list-head>
+    </div>
+    <div
+      class="p-0 text-truncate"
+      :class="secondColClass"
+    >
+      <mg-list-head
+        :active="secondColActive"
+        class="text-truncate"
+        align-center
+      ><slot name="second-col"></slot></mg-list-head>
+    </div>
+    <div
+      class="p-0 text-truncate"
+      :class="thirdColClass"
+    >
+      <mg-list-head
+        :active="thirdColActive"
+        class="text-truncate"
+        align-center
+      ><slot name="third-col"></slot></mg-list-head>
+    </div>
+    <div
+      v-if="actions"
+      class="col-1 p-0"
+      :class="actionsColClass"
+    >
+      <mg-list-head>&nbsp;</mg-list-head>
+    </div>
+  </div>
+</template>
+
+<script>
+import MgListHead from "../../../../content/list/head/ListHead";
+
+export default {
+  name: 'mg-footballer-list-head',
+
+  props: {
+    firstColActive: {
+      type: Boolean,
+      default: false
+    },
+    secondColActive: {
+      type: Boolean,
+      default: false
+    },
+    thirdColActive: {
+      type: Boolean,
+      default: false
+    },
+    actions: {
+      type: Boolean,
+      default: false
+    },
+    actionsCol: {
+      type: Number,
+      default: 1
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-footballer-list-head': true,
+      };
+    },
+    actionsColClass () {
+      return 'col-' + this.actionsCol;
+    },
+    firstColClass () {
+      return 'col-' + (8 - this.actionsCol);
+    },
+    secondColClass () {
+      return 'col-2';
+    },
+    thirdColClass () {
+      return this.actions ? 'col-2' : 'col-3';
+    }
+  },
+
+  components: {
+    MgListHead,
+  },
+};
+</script>

package/src/components/{footballer → context/footballer/role}/role-badge/RoleBadge.stories.js

@@ -2,7 +2,7 @@ import MgRoleBadge from './RoleBadge.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Footballer/Role Badge',
+  title: 'Context/Footballer/Role/Role Badge',
   component: MgRoleBadge,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{footballer → context/footballer/role}/role-badge/RoleBadge.vue

@@ -53,10 +53,10 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../../assets/palette';
 
   .mg-role-badge {
-    background-color: #c2c2c2;
+    background-color: map-get($palette, 'noRole');
     color: map-get($palette, 'text');
     font-family: 'Ubuntu', sans-serif;
     font-weight: 500;

package/src/components/context/footballer/role/role-counter/RoleCounter.stories.js

@@ -0,0 +1,30 @@
+import MgRoleCounter from './RoleCounter.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Context/Footballer/Role/Role Counter',
+  component: MgRoleCounter,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    role: {
+      control: { type: 'select' },
+      options: ['P', 'D', 'C', 'A'],
+      defaultValue: null
+    },
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgRoleCounter },
+  template: `<mg-role-counter v-bind="$props"></mg-role-counter>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  count: 4,
+  role: 'P'
+};
+

package/src/components/context/footballer/role/role-counter/RoleCounter.vue

@@ -0,0 +1,57 @@
+<template>
+  <div
+    class="d-flex align-items-center"
+    :class="classes"
+  >
+    <div>{{ count }}</div>
+    <mg-role-badge
+      class="ml-1"
+      :role="role"
+    ></mg-role-badge>
+  </div>
+</template>
+
+<script>
+import MgRoleBadge from "../role-badge/RoleBadge";
+
+export default {
+  name: 'mg-role-counter',
+
+  props: {
+    count: {
+      type: Number,
+      default: 0
+    },
+
+    role: {
+      type: String,
+      default: null,
+      validator: function (value) {
+        return ['P', 'D', 'C', 'A'].indexOf(value) !== -1;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-role-counter': true,
+      };
+    }
+  },
+
+  components: {
+    MgRoleBadge,
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../../../assets/palette';
+
+  .mg-role-counter {
+    font-family: 'Ubuntu', sans-serif;
+    font-weight: 500;
+    font-size: 1rem;
+  }
+</style>

package/src/components/{magic-coin → context/magic-coin}/button/MagicCoinButton.stories.js

@@ -2,7 +2,7 @@ import MgMagicCoinButton from './MagicCoinButton.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'MagicCoin/Button/Magic Coin Button',
+  title: 'Context/MagicCoin/Button/Magic Coin Button',
   component: MgMagicCoinButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{magic-coin → context/magic-coin}/button/MagicCoinButton.vue

@@ -62,7 +62,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-magic-coin-button {
   appearance: none;

package/src/components/{magic-coin → context/magic-coin}/credits/Credits.stories.js

@@ -2,7 +2,7 @@ import MgCredits from './Credits.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'MagicCoin/Credits/Credits',
+  title: 'Context/MagicCoin/Credits/Credits',
   component: MgCredits,
 };
 

package/src/components/{magic-coin → context/magic-coin}/credits/Credits.vue

@@ -34,7 +34,7 @@ export default {
 </script>
 
 <style lang="scss">
-@import '../../../assets/palette';
+@import '../../../../assets/palette';
 
 .mg-credits {
   svg {

package/src/components/{image → context/user}/profile-image/ProfileImage.stories.js

@@ -2,7 +2,7 @@ import MgProfileImage from './ProfileImage.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Image/Profile',
+  title: 'Context/User/Profile Image',
   component: MgProfileImage,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{image → context/user}/profile-image/ProfileImage.vue

@@ -77,7 +77,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-profile-image {
     border-radius: 50%;

package/src/components/{box → modal}/selection-box/SelectionBox.stories.js

@@ -1,11 +1,11 @@
 import MgSelectionBox from './SelectionBox.vue';
 import MgPrimaryButton from "../../form/button/primary-button/PrimaryButton";
-import MgMagicCoinButton from "../../magic-coin/button/MagicCoinButton";
+import MgMagicCoinButton from "../../context/magic-coin/button/MagicCoinButton";
 import MgTertiaryButton from "../../form/button/tertiary-button/TertiaryButton";
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Box/Selection Box',
+  title: 'Modal/Selection Box',
   component: MgSelectionBox,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{box → navigation/tab}/filing-cabinet/FilingCabinet.stories.js

@@ -3,7 +3,7 @@ import MgFilingCabinetTab from './FilingCabinetTab.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Box/Filing Cabinet',
+  title: 'Navigation/Tab/Filing Cabinet',
   component: MgFilingCabinet,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{box → navigation/tab}/filing-cabinet/FilingCabinetTab.stories.js

@@ -2,7 +2,7 @@ import MgFilingCabinetTab from './FilingCabinetTab.vue';
 
 // More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
 export default {
-  title: 'Box/Filing Cabinet/Tab',
+  title: 'Navigation/Tab/FilingCabinetTab',
   component: MgFilingCabinetTab,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/{box → navigation/tab}/filing-cabinet/FilingCabinetTab.vue

@@ -31,7 +31,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-filing-cabinet-tab {
     background-color: #f3f3f3;

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

@@ -2,7 +2,7 @@ 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',
+  title: 'Navigation/Tab/Tab Button',
   component: MgTabButton,
   // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
   argTypes: {

package/src/components/navigation/{tab-button → tab/tab-button}/TabButton.vue

@@ -40,7 +40,7 @@ export default {
 </script>
 
 <style lang="scss">
-  @import '../../../assets/palette';
+  @import '../../../../assets/palette';
 
   .mg-tab-button {
     appearance: none;

package/src/documentation/Footballer.stories.mdx

@@ -23,4 +23,8 @@ import {ColorItem, ColorPalette, Meta} from '@storybook/addon-docs';
         title="Bench"
         colors={{'Silver': '#bbb'}}
     />
+    <ColorItem
+        title="No Role"
+        colors={{'Silver': '#c2c2c2'}}
+    />
 </ColorPalette>

package/src/svg/x.svg

@@ -0,0 +1,3 @@
+<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.29244 6.00009L11.2341 2.06759C11.4067 1.89498 11.5037 1.66087 11.5037 1.41676C11.5037 1.17265 11.4067 0.938534 11.2341 0.765922C11.0615 0.59331 10.8274 0.496338 10.5833 0.496338C10.3392 0.496338 10.1051 0.59331 9.93244 0.765922L5.99994 4.70759L2.06744 0.765922C1.89483 0.59331 1.66072 0.496338 1.41661 0.496338C1.1725 0.496338 0.938389 0.59331 0.765777 0.765922C0.593166 0.938534 0.496193 1.17265 0.496193 1.41676C0.496193 1.66087 0.593166 1.89498 0.765777 2.06759L4.70744 6.00009L0.765777 9.93259C0.67986 10.0178 0.611665 10.1192 0.565127 10.2309C0.518589 10.3426 0.494629 10.4624 0.494629 10.5834C0.494629 10.7044 0.518589 10.8242 0.565127 10.936C0.611665 11.0477 0.67986 11.149 0.765777 11.2343C0.850993 11.3202 0.952378 11.3884 1.06408 11.4349C1.17579 11.4814 1.2956 11.5054 1.41661 11.5054C1.53762 11.5054 1.65744 11.4814 1.76914 11.4349C1.88084 11.3884 1.98223 11.3202 2.06744 11.2343L5.99994 7.29259L9.93244 11.2343C10.0177 11.3202 10.119 11.3884 10.2307 11.4349C10.3425 11.4814 10.4623 11.5054 10.5833 11.5054C10.7043 11.5054 10.8241 11.4814 10.9358 11.4349C11.0475 11.3884 11.1489 11.3202 11.2341 11.2343C11.32 11.149 11.3882 11.0477 11.4348 10.936C11.4813 10.8242 11.5053 10.7044 11.5053 10.5834C11.5053 10.4624 11.4813 10.3426 11.4348 10.2309C11.3882 10.1192 11.32 10.0178 11.2341 9.93259L7.29244 6.00009Z" fill="#D81159"/>
+</svg>