Merge pull request #8752 from aignatov-bio/ai-sci-12003-update-design-elements

Add tags, modal, tabs, dropdowns to design elements [SCI-12003][SCI-12004][SCI-12007][SCI-12006]

app/assets/stylesheets/application.tailwind.css

@@ -6,7 +6,8 @@
 @import "tailwind/loader.css";
 @import "tailwind/tags.css";
 @import "tailwind/checkbox";
-@import "tailwind/toggle"
+@import "tailwind/toggle";
+@import "tailwind/tabs";
 
 @tailwind base;
 @tailwind components;

app/assets/stylesheets/tailwind/modals.css

@@ -57,13 +57,17 @@
   }
 
   .modal .modal-header {
-    @apply flex items-center flex-row-reverse;
+    @apply flex items-center flex-row-reverse flex-wrap gap-y-1;
   }
 
   .modal .modal-title {
     @apply text-xl font-bold m-0 mr-auto flex items-center flex-row-reverse;
   }
 
+  .modal .modal-subtitle {
+    @apply text-sm  basis-full;
+  }
+
   .modal .close {
     @apply opacity-100 text-2xl leading-6 h-7 flex w-7 items-center justify-center;
   }

app/assets/stylesheets/tailwind/tabs.css

@@ -0,0 +1,17 @@
+@layer components {
+  .tab-group {
+    @apply flex items-center gap-4 p-2 bg-white;
+  }
+
+  .tab-group .tab-item {
+    @apply p-2.5 hover:no-underline text-sn-grey;
+  }
+
+  .tab-group .tab-item.active {
+    @apply !text-sn-blue;
+  }
+
+  .tab-group .tab-item:hover {
+    @apply  !text-sn-black;
+  }
+}

app/assets/stylesheets/tailwind/tags.css

@@ -1,9 +1,21 @@
 @layer components {
   .sci-tag {
-    @apply text-xs !rounded-full !px-2 !py-1 inline-flex items-center gap-1;
+    @apply text-xs !rounded-full !px-2 h-6 !py-0.5 inline-flex items-center gap-2;
   }
 
   .sci-tag .sn-icon {
-    @apply -ml-2;
+    @apply -ml-1 leading-4 !text-base cursor-pointer;
+  }
+
+  .sci-tag .sn-icon.sn-icon-close {
+    @apply cursor-pointer;
+  }
+
+  .sci-tag.disabled {
+    @apply opacity-40 cursor-not-allowed;
+  }
+
+  .sci-tag .avatar-container {
+    @apply h-5 w-5 rounded-full overflow-hidden flex items-center -ml-1.5 justify-center;
   }
 }

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

@@ -3,6 +3,7 @@ import { shallowRef } from 'vue';
 
 import WizardModal from '../../../vue/shared/wizard_modal.vue';
 import InfoModal from '../../../vue/shared/info_modal.vue';
+import BasicModal from '../../../vue/design_elements/basic_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';
@@ -12,7 +13,10 @@ const app = createApp({
   components: {
     Step1,
     Step2,
-    Step3
+    Step3,
+    WizardModal,
+    InfoModal,
+    BasicModal
   },
   methods: {
     fireAlert() {
@@ -21,6 +25,7 @@ const app = createApp({
   },
   data() {
     return {
+      showBasicModal: false,
       // Wizard modal
       wizardConfig: {
         title: 'Wizard steps',

app/javascript/vue/design_elements/basic_modal.vue

@@ -0,0 +1,35 @@
+<template>
+  <div ref="modal" class="modal" tabindex="-1" role="dialog">
+    <div class="modal-dialog" role="document">
+      <div class="modal-content">
+        <div class="modal-header">
+          <button type="button" class="close" data-dismiss="modal" aria-label="Close"><i class="sn-icon sn-icon-close"></i></button>
+          <h4 class="modal-title">
+            Modal Title
+          </h4>
+          <div class="modal-subtitle">
+            Modal subtitle
+          </div>
+        </div>
+        <div class="modal-body">
+          <div class="h-80">
+            Modal body
+          </div>
+        </div>
+        <div class="modal-footer">
+          <button class="btn btn-secondary" @click="close">Cancel</button>
+          <button class="btn btn-primary">Main Button</button>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+import modalMixin from '../shared/modal_mixin';
+
+export default {
+  name: 'BasicModal',
+  mixins: [modalMixin]
+};
+</script>

app/views/design_elements/_colors.html.erb

@@ -0,0 +1,11 @@
+<div class="mb-8">
+  <h1>Colors</h1>
+  <div class="grid grid-cols-4 items-center gap-4 flex-wrap">
+    <% colors_list.each do |color| %>
+      <div class="flex items-center gap-2">
+        <div class="w-10 h-10 rounded-xl shadow" style="background-color: <%= color[:value] %>;"></div>
+        <div><%= color[:name] %></div>
+      </div>
+    <% end %>
+  </div>
+</div>

app/views/design_elements/_modals.html.erb

@@ -1,6 +1,14 @@
 <div>
   <h1>Modals</h1>
   <div id="modals" class="flex items-center gap-4 flex-wrap mb-8">
+    <div ref="BasicModalWrapper">
+      <button @click="showBasicModal = true" class="btn btn-primary">Show Basic Modal</button>
+      <basic-modal
+        v-if="showBasicModal"
+        @close="showBasicModal = false"
+      >
+      </basic-modal>
+    </div>
     <div ref="wizardModal">
       <button @click="showWizard = true" class="btn btn-primary">Show Wizard Modal</button>
       <wizard-modal

app/views/design_elements/_tabs.html.erb

@@ -0,0 +1,11 @@
+<div  class="mb-8">
+  <h1>Tabs</h1>
+  <div class="bg-sn-super-light-grey p-4">
+    <div class="tab-group">
+      <%= link_to "Tab A", nil, class: "tab-item active "%>
+      <%= link_to "Tab B", nil, class: "tab-item"%>
+      <%= link_to "Tab C", nil, class: "tab-item"%>
+      <%= link_to "Tab D", nil, class: "tab-item"%>
+    </div>
+  </div>
+</div>

app/views/design_elements/_tags.html.erb

@@ -0,0 +1,21 @@
+<div  class="mb-8">
+  <h1>Tags</h1>
+  <div class="flex items-center gap-4 flex-wrap">
+    <div class="sci-tag bg-sn-light-grey">
+      Simple tag
+    </div>
+    <div class="sci-tag bg-sn-background-blue">
+      Tag with delete
+      <i class="sn-icon sn-icon-close"></i>
+    </div>
+    <div class="sci-tag bg-sn-blue text-white ">
+      <div class="avatar-container bg-sn-background-blue"></div>
+      Tag with avatar
+      <i class="sn-icon sn-icon-close"></i>
+    </div>
+    <div class="sci-tag bg-sn-background-blue disabled">
+      Disabled tag
+      <i class="sn-icon sn-icon-close"></i>
+    </div>
+  </div>
+</div>

app/views/design_elements/index.html.erb

@@ -8,9 +8,21 @@
       end
     end
   end
+
+  colors_list = []
+  tailwind_file = File.join(Rails.root, 'config', 'tailwind.config.js')
+  File.open(tailwind_file, 'r') do |f|
+    f.each_line do |line|
+      if line.match(/['"]?(sn-[a-z0-9-]+)['"]?\s*:\s*['"]?([#a-zA-Z0-9]+)['"]?/)
+        colors_list << { name: $1, value: $2 } if $2.include?('#')
+      end
+    end
+  end
 %>
 
+<%= render partial: 'colors', locals: {colors_list: colors_list} %>
 
+<%= render partial: 'tags' %>
 
 <%= render partial: 'checkbox' %>
 
@@ -30,6 +42,8 @@
 
 <%= render partial: 'datepicker' %>
 
+<%= render partial: 'tabs' %>
+
 <%= render partial: 'modals' %>
 
 <%= render partial: 'table' %>

app/views/users/settings/teams/_header.html.erb

@@ -17,8 +17,8 @@
     </h1>
   </div>
 </div>
-<div class="flex items-center gap-4 p-2 mb-4 bg-white">
+<div class="tab-group mb-4">
-  <%= link_to t("users.settings.teams.navigation.details"), team_path(@team), class: "p-2.5 hover:no-underline #{ @active_tab == :details ? "text-sn-blue" : "text-sn-grey" }"%>
+  <%= link_to t("users.settings.teams.navigation.details"), team_path(@team), class: "tab-item #{ 'active' if @active_tab == :details }"%>
-  <%= link_to t("users.settings.teams.navigation.members"), members_users_settings_team_path(@team), class: "p-2.5 hover:no-underline #{ @active_tab == :members ? "text-sn-blue" : "text-sn-grey" }"%>
+  <%= link_to t("users.settings.teams.navigation.members"), members_users_settings_team_path(@team), class: "tab-item #{ 'active' if @active_tab == :members }"%>
-  <%= link_to t("users.settings.teams.navigation.groups"), users_settings_team_user_groups_path(@team), class: "p-2.5 hover:no-underline #{ @active_tab == :user_groups ? "text-sn-blue" : "text-sn-grey" }"%>
+  <%= link_to t("users.settings.teams.navigation.groups"), users_settings_team_user_groups_path(@team), class: "tab-item #{ 'active' if @active_tab == :user_groups }"%>
 </div>