@magicgol/polyjuice 0.40.6 → 0.42.0

package/package.json

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

package/src/components/components/alert-square/AlertSquare.stories.js

@@ -0,0 +1,40 @@
+import MgAlertSquare from './AlertSquare.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Components/Alert Square',
+  component: MgAlertSquare,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+    level: {
+      control: { type: 'select' },
+      options: ['error', 'warning', 'success', 'info'],
+      defaultValue: 'error'
+    },
+    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: { MgAlertSquare },
+  template: `<mg-alert-square v-bind="$props"><template v-if="${'default' in args}" v-slot>${args.default}</template></mg-alert-square>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  default: 'testo in evidenza',
+};

package/src/components/components/alert-square/AlertSquare.vue

@@ -0,0 +1,70 @@
+<template>
+  <div
+    :class="classes"
+    class="p-2"
+  >
+    <slot></slot>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'mg-alert-square',
+
+  props: {
+    level: {
+      type: String,
+      default: 'warning',
+      validator: function (value) {
+        return ['error', 'warning', 'success', 'info'].indexOf(value) !== -1;
+      },
+    }
+  },
+
+  computed: {
+    classes() {
+      return {
+        'mg-alert-square': true,
+        'mg-alert-square--level-error': this.level === 'error',
+        'mg-alert-square--level-warning': this.level === 'warning',
+        'mg-alert-square--level-success': this.level === 'success',
+        'mg-alert-square--level-info': this.level === 'info',
+      };
+    }
+  },
+};
+</script>
+
+<style lang="scss">
+  @import '../../../assets/palette';
+
+  .mg-alert-square {
+    border-radius: 8px;
+    font-family: Ubuntu, sans-serif;
+    font-size: 0.875rem;
+    font-weight: 700;
+    text-align: center;
+
+    &--level {
+      &-error {
+        background-color: rgba(map-get($palette, 'error'), 0.05);
+        color: map-get($palette, 'error');
+      }
+
+      &-warning {
+        background-color: rgba(map-get($palette, 'warning'), 0.05);
+        color: map-get($palette, 'warning');
+      }
+
+      &-success {
+        background-color: rgba(map-get($palette, 'success'), 0.05);
+        color: map-get($palette, 'success');
+      }
+
+      &-info {
+        background-color: rgba(map-get($palette, 'info'), 0.05);
+        color: map-get($palette, 'info');
+      }
+    }
+  }
+</style>

package/src/components/form/input/textarea/Textarea.stories.js

@@ -0,0 +1,23 @@
+import MgTextarea from './Textarea.vue';
+
+// More on default export: https://storybook.js.org/docs/vue/writing-stories/introduction#default-export
+export default {
+  title: 'Form/Input/Textarea',
+  component: MgTextarea,
+  // More on argTypes: https://storybook.js.org/docs/vue/api/argtypes
+  argTypes: {
+  },
+};
+
+// More on component templates: https://storybook.js.org/docs/vue/writing-stories/introduction#using-args
+const Template = (args, { argTypes }) => ({
+  props: Object.keys(argTypes),
+  components: { MgTextarea },
+  template: `<mg-textarea @click="$emit('click')" v-bind="$props"></mg-textarea>`,
+});
+
+export const Default = Template.bind({});
+// More on args: https://storybook.js.org/docs/vue/writing-stories/args
+Default.args = {
+  value: 'given input'
+};

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

@@ -0,0 +1,81 @@
+<template>
+  <div
+    :class="classes"
+    class="border bg-white rounded p-1"
+  >
+    <textarea
+      v-on:input="$emit('input', $event.target.value)"
+      v-on:focus="propagateFocus"
+      v-on:blur="propagateBlur"
+      v-bind:value="value"
+      v-bind:placeholder="placeholder"
+      style="resize: none;"
+      class="w-100 border-0"
+    ></textarea>
+  </div>
+</template>
+
+<script>
+export default {
+  data () {
+    return {
+      focus: false
+    };
+  },
+  props: {
+    value: {
+      type: String,
+      default: null
+    },
+    placeholder: {
+      type: String,
+      default: null
+    }
+  },
+  computed: {
+    classes () {
+      return {
+        'mg-textarea': true,
+        'mg-textarea--disabled': this.disabled,
+        'mg-textarea--errored': this.error === true,
+        'mg-textarea--focused': this.focus === true,
+      };
+    }
+  },
+  methods: {
+    propagateFocus () {
+      console.log('propage focus')
+      this.focus = true;
+      this.$emit('focus');
+    },
+    propagateBlur () {
+      this.focus = false;
+      this.$emit('blur');
+    }
+  }
+};
+</script>
+
+
+<style lang="scss">
+@import '../../../../assets/palette';
+
+.mg-textarea {
+  border-color: #c2c2c2;
+
+  > textarea {
+    font-family: 'Raleway', sans-serif;
+    font-weight: 400;
+    font-size: 0.875rem;
+    height: 4.6875rem;
+
+    &:focus {
+      outline: 0;
+    }
+  }
+
+  &--focused {
+    border-color: #444444 !important;
+  }
+}
+</style>