(dev) Create info modal attached to update inventory modal [SCI-10493]

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

@@ -2,6 +2,7 @@ import { createApp } from 'vue/dist/vue.esm-bundler.js';
 import { shallowRef } from 'vue';
 
 import WizardModal from '../../../vue/shared/wizard_modal.vue';
+import InfoModal from '../../../vue/shared/info_modal.vue';
 import Step1 from './wizard_steps/step_1.vue';
 import Step2 from './wizard_steps/step_2.vue';
 import Step3 from './wizard_steps/step_3.vue';
@@ -20,6 +21,7 @@ const app = createApp({
   },
   data() {
     return {
+      // Wizard modal
       wizardConfig: {
         title: 'Wizard steps',
         subtitle: 'Wizard subtitle description',
@@ -47,10 +49,51 @@ const app = createApp({
       wizardParams: {
         text: 'Some text'
       },
-      showWizard: false
+      showWizard: false,
+
+      // Info modal
+      infoParams: {
+        componentTitle: 'Guide for updating the inventory',
+        modalTitle: 'Update inventory',
+        helpText: 'Help',
+        elements: [
+          {
+            id: 'el1',
+            icon: 'sn-icon sn-icon-export',
+            label: 'Export inventory',
+            subtext: "Before making edits, we advise you to export the latest inventory information. If you're only adding new items, consider exporting empty inventory."
+          },
+          {
+            id: 'el2',
+            icon: 'sn-icon sn-icon-edit',
+            label: 'Edit your data',
+            subtext: 'Make sure to include header names in first row, followed by item data.'
+          },
+          {
+            id: 'el3',
+            icon: 'sn-icon sn-icon-import',
+            label: 'Import new or update items',
+            subtext: 'Upload your data using .xlsx, .csv or .txt files.'
+          },
+          {
+            id: 'el4',
+            icon: 'sn-icon sn-icon-tables',
+            label: 'Merge your data',
+            subtext: 'Complete the process by merging the columns you want to update.'
+          },
+          {
+            id: 'el5',
+            icon: 'sn-icon sn-icon-open',
+            label: 'Learn more',
+            linkTo: 'https://knowledgebase.scinote.net/en/knowledge/how-to-add-items-to-an-inventory'
+          }
+        ]
+      },
+      showInfo: false
     };
   }
 });
 app.component('WizardModal', WizardModal);
+app.component('InfoModal', InfoModal);
 app.config.globalProperties.i18n = window.I18n;
 mountWithTurbolinks(app, '#modals');

app/javascript/vue/shared/info_component.vue

@@ -0,0 +1,39 @@
+<template>
+  <div class="!w-[300px] rounded bg-sn-super-light-grey gap-4 p-6 flex flex-col h-full">
+    <div id="info-component-header">
+      <h3 class="modal-title text-sn-dark-grey">{{ params.componentTitle }}</h3>
+    </div>
+
+    <div class="grid grid-flow-row h-fit" v-for="(step, _index) in params.elements" :key="step.id">
+      <a v-if="step.linkTo" :href="step.linkTo" target="_blank" class="flex flex-row gap-3 w-fit text-sn-blue hover:no-underline hover:text-sn-blue-hover">
+        <button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey">
+          <i :class="step.icon" class="h-fit"></i>
+        </button>
+        <div class="flex flex-col gap-2 w-fit">
+          <div class="text-sn-blue font-bold hover:text-sn-blue-hover my-auto">{{ step.label }}</div>
+        </div>
+      </a>
+      <div v-else class="flex flex-row gap-3">
+        <button class="btn btn-secondary btn-sm icon-btn hover:!border-sn-light-grey hover:cursor-auto">
+          <i :class="step.icon" class="h-fit text-sn-dark-grey size-9"></i>
+        </button>
+        <div class="flex flex-col gap-2 w-52">
+          <div class="text-sn-dark-grey font-bold">{{ step.label }}</div>
+          <div class="text-sn-dark-grey">{{ step.subtext }}</div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'InfoComponent',
+  props: {
+    params: {
+      type: Object,
+      required: true
+    }
+  }
+};
+</script>

app/javascript/vue/shared/info_modal.vue

@@ -0,0 +1,61 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog" data-backdrop="static" data-keyboard="false">
+    <div class="modal-dialog" role="document" :class="[{'!w-[900px]' : showingInfo}, {'!w-[600px]' : !showingInfo}]">
+      <div class="modal-content !p-0 bg-sn-white w-full h-full flex" :class="[{'flex-row': showingInfo}, {'flex-col': !showingInfo}]">
+        <div id="body-container" class="flex flex-row w-full h-full">
+          <!-- info -->
+          <div id="info-part">
+            <info-component
+              v-if="showingInfo"
+              :params="this.params"
+            />
+          </div>
+          <!-- content -->
+          <div id="content-part" class="flex flex-col w-full p-6 gap-3">
+            <!-- header -->
+            <div id="info-modal-header" class="flex flex-row h-fit w-full justify-between">
+              <div id="title-with-help" class="flex flex-row gap-3">
+                <h3 class="modal-title text-sn-dark-grey">{{ params.modalTitle }}</h3>
+                <button class="btn btn-light btn-sm" @click="showingInfo = !showingInfo">
+                  <i class="sn-icon sn-icon-help-s"></i>
+                  {{ params.helpText }}
+                </button>
+              </div>
+              <button id="close-btn" type="button" class="close my-auto" data-dismiss="modal" aria-label="Close">
+                <i class="sn-icon sn-icon-close"></i>
+              </button>
+            </div>
+            <!-- main content -->
+            <div id="info-modal-main-content">
+              <slot></slot>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import modalMixin from './modal_mixin';
+import InfoComponent from './info_component.vue';
+
+export default {
+  name: 'InfoModal',
+  props: {
+    params: {
+      type: Object,
+      required: true
+    }
+  },
+  mixins: [modalMixin],
+  components: {
+    'info-component': InfoComponent
+  },
+  data() {
+    return {
+      showingInfo: true
+    };
+  }
+};
+</script>

app/views/design_elements/_modals.html.erb

@@ -1,15 +1,30 @@
 <div>
   <h1>Modals</h1>
   <div id="modals" class="flex items-center gap-4 flex-wrap mb-6">
-    <button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
+    <div ref="wizardModal">
-    <wizard-modal
+      <button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
-      v-if="showWizard"
+      <wizard-modal
-      @close="showWizard = false"
+        v-if="showWizard"
-      @alert="fireAlert"
+        @close="showWizard = false"
-      :params="wizardParams"
+        @alert="fireAlert"
-      :config="wizardConfig"
+        :params="wizardParams"
-    />
+        :config="wizardConfig"
+      />
+    </div>
+
+    <div ref="infoModal">
+      <button @click="showInfo = true" class="btn btn-primary">Show Info Modal</button>
+      <info-modal
+        v-if="showInfo"
+        @close="showInfo = false"
+        :params="infoParams"
+      >
+        <div>I am a component that gets consumed by the slot</div>
+      </info-modal>
+    </div>
   </div>
+
+
 </div>