@magicgol/polyjuice 0.42.3 → 0.43.0

package/package.json

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

package/src/assets/palette.scss

@@ -12,6 +12,7 @@ $palette: (
     'warning': #ff614c,
     'success': #349B50,
     'info': #004781,
+    'highlighted': #ffdb59,
     // FOOTBALLERS
     'goalkeeper': #fcd777,
     'defender': #89f4a1,

package/src/components/components/highlighter/Highlighter.stories.js

@@ -0,0 +1,35 @@
+import MgHighlighter from './Highlighter.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Highlighter',
+  component: MgHighlighter,
+  // 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: { MgHighlighter },
+  template: `<mg-highlighter v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-highlighter>`,
+});
+
+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/highlighter/Highlighter.vue

@@ -0,0 +1,40 @@
+<template>
+  <div
+    class="rounded p-2"
+    :class="classes"
+  ><slot></slot></div>
+</template>
+
+<script>
+export default {
+  name: 'mg-highlighter',
+
+  props: {
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-highlighter': true,
+        'mg-highlighter--disabled': this.disabled === true,
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-highlighter {
+    background-color: map-get($palette, 'highlighted');
+
+    &--disabled {
+      opacity: 0.3 !important;
+    }
+  }
+</style>