Add new input component [SCI-11598]

app/javascript/packs/vue/design_system/inputs.js

@@ -0,0 +1,19 @@
+import { createApp } from 'vue/dist/vue.esm-bundler.js';
+import InputField from '../../../vue/shared/input_field.vue';
+import { mountWithTurbolinks } from '../helpers/turbolinks.js';
+
+const app = createApp({
+  data() {
+    return {
+      testValue: ''
+    };
+  },
+  watch: {
+    testValue(value) {
+      console.log(value);
+    }
+  }
+});
+app.component('InputField', InputField);
+app.config.globalProperties.i18n = window.I18n;
+mountWithTurbolinks(app, '#inputs');

app/javascript/vue/shared/input_field.vue

@@ -0,0 +1,109 @@
+<template>
+  <div>
+    <label
+      v-if="label"
+      @click="$refs.input.click()"
+      class="text-sm font-bold mb-0 flex items-center gap-1"
+    >
+      {{ label }}
+      <span v-if="required" class="text-sn-alert-passion">*</span>
+      <div v-if="helpDescription" class="font-normal">
+        <GeneralDropdown>
+          <template v-slot:field>
+            <i class="sn-icon sn-icon-info cursor-pointer text-sn-grey"></i>
+          </template>
+          <template v-slot:flyout>
+            <div class="p-2" v-html="helpDescription"></div>
+          </template>
+        </GeneralDropdown>
+      </div>
+    </label>
+    <div v-if="subLabel">{{ subLabel }}</div>
+    <div class="relative h-11 my-2">
+      <div v-if="leftIcon" class="absolute left-2 top-1/2 transform -translate-y-1/2">
+        <i :class="leftIcon" class="sn-icon"></i>
+      </div>
+      <input
+        ref="input"
+        :type="type"
+        :placeholder="placeholder"
+        :disabled="disabled"
+        :value="modelValue"
+        @input="$emit('update:modelValue', $event.target.value)"
+        @change="$emit('change', $event.target.value)"
+        class="outline-none shadow-none placeholder:text-sn-grey rounded h-full border border-sn-sleepy-grey bg-white w-full px-4 focus:border-sn-science-blue"
+        :class="{
+          '!bg-sn-super-light-grey !border-sn-grey': disabled,
+          '!border-sn-alert-passion': error,
+          'pl-9': leftIcon,
+          'pr-10': rightIcon
+        }"
+      />
+      <div v-if="rightIcon" class="absolute right-2 top-1/2 transform -translate-y-1/2">
+        <i :class="rightIcon" class="sn-icon"></i>
+      </div>
+    </div>
+    <div v-if="errorMessage" class="text-xs text-sn-alert-passion">{{ errorMessage }}</div>
+  </div>
+</template>
+
+<script>
+import GeneralDropdown from './general_dropdown.vue';
+
+export default {
+  name: 'InputField',
+  components: {
+    GeneralDropdown
+  },
+  props: {
+    modelValue: {
+      type: String,
+      default: ''
+    },
+    type: {
+      type: String,
+      default: 'text'
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    placeholder: {
+      type: String,
+      default: ''
+    },
+    disabled: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: null
+    },
+    subLabel: {
+      type: String,
+      default: null
+    },
+    helpDescription: {
+      type: String,
+      default: null
+    },
+    leftIcon: {
+      type: String,
+      default: null
+    },
+    rightIcon: {
+      type: String,
+      default: null
+    },
+    error: {
+      type: Boolean,
+      default: null
+    },
+    errorMessage: {
+      type: String,
+      default: null
+    }
+  }
+};
+</script>

app/views/design_elements/_inputs.html.erb

@@ -0,0 +1,16 @@
+<h1>Input Field</h1>
+<div id="inputs" class="grid grid-cols-4 gap-6">
+  <input-field label="Input" placeholder="Placeholder" v-model="testValue"></input-field>
+  <input-field label="Input with left icon" placeholder="Placeholder" left-icon="sn-icon-<%= icons_list.sample %>"></input-field>
+  <input-field label="Input with right icon" placeholder="Placeholder" right-icon="sn-icon-<%= icons_list.sample %>"></input-field>
+  <input-field label="Input with both icon" placeholder="Placeholder" left-icon="sn-icon-<%= icons_list.sample %>" right-icon="sn-icon-<%= icons_list.sample %>"></input-field>
+  <input-field :required="true" label="Input with required" placeholder="Placeholder"></input-field>
+  <input-field label="Input with sub-label" sub-label="Test sub-label" placeholder="Placeholder"></input-field>
+  <input-field label="Input with help menu" help-description="Test help description<br><br><b>Support HTML</b>" placeholder="Placeholder"></input-field>
+  <input-field :disabled="true" label="Disabled Input" placeholder="Placeholder"></input-field>
+  <input-field :error="true" label="Input with error" placeholder="Placeholder"></input-field>
+  <input-field :error="true" label="Input with error message" error-message="Test error message"></input-field>
+  <input-field :error="true" label="Input with long error message" error-message="Test error message Test error message Test error message Test error message Test error message Test error message Test error message Test error message"></input-field>
+</div>
+
+<%= javascript_include_tag 'vue_design_system_inputs' %>

app/views/design_elements/index.html.erb

@@ -12,6 +12,8 @@
 
 <%= render partial: 'radio' %>
 
+<%= render partial: 'inputs', locals: {icons_list: icons_list} %>
+
 <%= render partial: 'select' %>
 
 <%= render partial: 'breadcrumbs' %>

config/webpack/webpack.config.js

@@ -71,7 +71,8 @@ const entryList = {
   vue_storage_locations_container: './app/javascript/packs/vue/storage_locations_container.js',
   vue_form_show: './app/javascript/packs/vue/forms_show.js',
   vue_form_table: './app/javascript/packs/vue/forms_table.js',
-  vue_my_module_assigned_items: './app/javascript/packs/vue/my_module_assigned_items.js'
+  vue_my_module_assigned_items: './app/javascript/packs/vue/my_module_assigned_items.js',
+  vue_design_system_inputs: './app/javascript/packs/vue/design_system/inputs.js'
 };
 
 // Engine pack loading based on https://github.com/rails/webpacker/issues/348#issuecomment-635480949