@magicgol/polyjuice 0.42.2 → 0.43.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicgol/polyjuice",
-  "version": "0.42.2",
+  "version": "0.43.0",
   "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.10",
-    "@storybook/addon-essentials": "^6.5.10",
-    "@storybook/addon-links": "^6.5.10",
+    "@storybook/addon-actions": "^6.5.13",
+    "@storybook/addon-essentials": "^6.5.13",
+    "@storybook/addon-links": "^6.5.13",
     "@storybook/preset-scss": "^1.0.3",
-    "@storybook/vue": "^6.5.10",
+    "@storybook/vue": "^6.5.13",
     "@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

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

package/src/components/form/input/textarea/Textarea.vue

@@ -30,6 +30,10 @@ export default {
     placeholder: {
       type: String,
       default: null
+    },
+    error: {
+      type: Boolean,
+      default: false,
     }
   },
   computed: {
@@ -76,5 +80,9 @@ export default {
   &--focused {
     border-color: #444444 !important;
   }
+
+  &--errored {
+    border-color: map-get($palette, 'warning') !important;
+  }
 }
 </style>

package/src/components/form/radio/Radio.vue

@@ -65,7 +65,9 @@ export default {
       width: 1.375rem;
 
       svg {
-        display: none;
+        fill: white;
+        height: 18px;
+        visibility: hidden;
       }
     }
 
@@ -75,9 +77,7 @@ export default {
         border-color: map-get($palette, 'brand');
 
         svg {
-          display: block;
-          fill: white;
-          height: 18px;
+          visibility: visible;
         }
       }
     }