Feature: Add tabs component

app/assets/stylesheets/components/index.scss

@@ -10,4 +10,6 @@
 @import 'input_field';
 @import 'file_input_loader';
 @import 'text_area_field';
+@import 'tabs_container';
+@import 'pill_tabs_container';
 

app/assets/stylesheets/components/pill_tabs_container.scss

@@ -0,0 +1,22 @@
+.pill-tabs-container {
+  display: flex;
+  justify-content: space-between;
+}
+
+.pill-tabs-container .tab-items{
+  margin-bottom: 10px;
+}
+
+.pill-tabs-container .nav-item {
+  display: block;
+  padding: 0.2rem 1rem;
+}
+
+.pill-tabs-container .nav-item.active {
+  border-radius: 5px;
+  background-color: var(--primary-color);
+  color: white !important;
+  a {
+    color: white !important;
+  }
+}

app/assets/stylesheets/components/tabs_container.scss

@@ -0,0 +1,58 @@
+.tabs-container {
+  border-bottom: 1px solid #DFDFDF;
+  display: flex;
+  justify-content: space-between;
+  & > div {
+    display: flex;
+    justify-content: space-between;
+  }
+}
+
+.tabs-container hr {
+  border: 1px solid #f3f3f3;
+  width: 100%;
+  margin: 0;
+}
+
+.tabs-container .tab-items {
+  display: flex;
+  margin: 0;
+  position: relative;
+  padding: 0 50px;
+}
+
+.tabs-container .tab-items div {
+  font-size: 16px;
+  font-weight: 400;
+  color: #5e5e5e;
+  margin-right: 50px;
+  cursor: pointer;
+  opacity: 60%;
+  transition: opacity 0.3s ease;
+
+  a {
+    color: #5e5e5e !important;
+  }
+}
+
+.tabs-container .tab-items div:hover {
+
+  opacity: 100%;
+}
+
+.tabs-container .tab-items div hr {
+  display: none;
+  margin-top: 10px;
+}
+
+.tabs-container .tab-items .active {
+  font-weight: 500;
+  color: black;
+  opacity: 100%;
+}
+
+.tabs-container .tab-items .active hr {
+  display: block;
+  border: 1px solid var(--primary-color);
+  opacity: 100%;
+}

app/assets/stylesheets/ontologies.scss

@@ -271,4 +271,3 @@ $ont-show-bg-color: #e9ecef;
   flex-direction: row;
 }
 
-

app/components/rounded_button_component.rb

@@ -1,19 +1,20 @@
 class RoundedButtonComponent < ViewComponent::Base
-    def initialize(icon: "json.svg", link: "#", size: "small")
-        @icon = icon
-        @link = link
-        @size = size
-    end
+  def initialize(icon: "json.svg", link: "#", size: "small", target: '')
+    @icon = icon
+    @link = link
+    @size = size
+    @target = target
+  end
 
-    def size
-        case @size
-            when "small"
-                ["32px", "1", "16px"]
-            when "medium"
-                ["64px", "2", "32px"]
-            when "big"
-                ["100px", "2.5", "50px"]
-            end
+  def size
+    case @size
+    when "small"
+      ["32px", "1", "16px"]
+    when "medium"
+      ["64px", "2", "32px"]
+    when "big"
+      ["100px", "2.5", "50px"]
     end
+  end
 
 end

app/components/rounded_button_component/rounded_button_component.html.haml

@@ -1,2 +1,2 @@
-%a.rounded-button{:href => @link, style: "height:"+size[0]+"; width:"+size[0]+"; border-radius:"+size[2]+";"}
+%a.rounded-button{:href => @link, style: "height:"+size[0]+"; width:"+size[0]+"; border-radius:"+size[2]+";", target:@target}
     = inline_svg_tag @icon, style: "transform: scale("+size[1]+");"

app/components/tab_item_component.rb

@@ -0,0 +1,51 @@
+# frozen_string_literal: true
+
+class TabItemComponent < ViewComponent::Base
+
+  include ActionView::Helpers::UrlHelper
+
+  def initialize(id: nil, title: nil, path: nil, page_name: '', selected: false)
+    super
+    @id = id
+    @title = title
+    @path = path
+    @page_name = page_name
+    @selected = selected
+  end
+
+  def selected_item?
+    @selected
+  end
+
+  def item_id
+    id.parameterize.underscore
+  end
+
+  def target_id
+    "#{item_id}_content"
+  end
+
+
+  def id
+    @title || @id
+  end
+
+  def title
+    @title&.humanize
+  end
+
+  def active_class
+    selected_item? ? 'active show' : ''
+  end
+
+  def call
+    if title && !title.empty?
+      link_to(title, @path, id: "#{item_id}_tab", class: "#{active_class} tab-link")
+    else
+      link_to(@path, id: "#{item_id}_tab", class: "#{active_class} tab-link") do
+        content
+      end
+    end
+  end
+
+end

app/components/tabs_container_component.rb

@@ -0,0 +1,38 @@
+# frozen_string_literal: true
+
+class TabsContainerComponent < ViewComponent::Base
+
+  renders_many :items, TabItemComponent
+  renders_many :item_contents
+  renders_one :pinned_right
+
+  def initialize(id: '', url_parameter: nil, pill: false)
+    super
+    @url_parameter = url_parameter
+    @pill = pill
+    @id = id
+  end
+
+  def container_class
+    @pill ? 'pill-tabs-container' : 'tabs-container'
+  end
+
+  def item_target(item)
+    "##{@id}#{item.target_id}"
+  end
+
+  def item_content_id(item)
+    @id + item.target_id
+  end
+
+  def tabs_container_data(item)
+    {
+      toggle: 'tab',
+      target: item_target(item),
+      'tab-id': item.id,
+      'tab-title': item.title,
+      'url-parameter': @url_parameter,
+      action: 'click->tabs-container#selectTab'
+    }
+  end
+end

app/components/tabs_container_component/tabs_container_component.html.haml

@@ -0,0 +1,16 @@
+%div{data: {controller:'tabs-container'}, class: container_class}
+  .tab-items.nav
+    - items.each do |item|
+      %div{data:  tabs_container_data(item), class: item.active_class + ' nav-item'}
+        = item
+        - unless @pill
+          %hr
+  - if pinned_right?
+    %div.d-flex
+      = pinned_right
+
+.tab-content
+  - item_contents.each_with_index do |item_content, index|
+    %div.tab-pane{id: item_content_id(items[index]), class: items[index].active_class}
+      = item_content
+

app/components/tabs_container_component/tabs_container_component_controller.js

@@ -0,0 +1,43 @@
+import {Controller} from "@hotwired/stimulus";
+import {HistoryService} from "../../javascript/mixins/useHistory";
+
+export default class extends Controller {
+
+    connect() {
+        this.event = null
+    }
+
+
+    selectTab(event) {
+        this.event = event
+        if (this.#parameter()) {
+            this.#updateURL()
+        }
+        this.element.dispatchEvent(new CustomEvent("tab-selected", {
+            bubbles: true,
+            detail: {data: {selectedTab: this.#pageId()}}
+        }))
+    }
+
+    #pageId() {
+        return this.event.currentTarget.getAttribute("data-tab-id")
+    }
+
+    #title() {
+        return this.event.currentTarget.getAttribute("data-tab-title")
+    }
+
+    #parameter() {
+        return this.event.currentTarget.getAttribute("data-url-parameter")
+    }
+
+
+    #url() {
+        return `?${this.#parameter()}=${this.#pageId()}`
+    }
+
+    #updateURL() {
+        (new HistoryService()).pushState({[this.#parameter()]: this.#pageId()}, this.#title(), this.#url());
+    }
+
+}

app/helpers/ontologies_helper.rb

@@ -457,7 +457,7 @@ def language_selector_tag(name)
         end
       end
     else
-      select_tag name, languages_options, class: 'custom-select', disabled: !ontology_data_section?, style: "visibility: #{ontology_data_section? ? 'visible' : 'hidden'}; margin-bottom: -10px;", data: {'ontology-viewer-tabs-target': 'languageSelector'}
+      select_tag name, languages_options, class: '', disabled: !ontology_data_section?, style: "visibility: #{ontology_data_section? ? 'visible' : 'hidden'}; border: none; outline: none;", data: {'ontology-viewer-tabs-target': 'languageSelector'}
     end
   end
 

app/javascript/component_controllers/index.js

@@ -13,9 +13,13 @@ import Ontology_subscribe_button_component_controller
 import Search_input_component_controller
     from "../../components/search_input_component/search_input_component_controller";
 
+import Tabs_container_component_controller
+    from "../../components/tabs_container_component/tabs_container_component_controller";
+
 application.register("turbo-modal", TurboModalController)
 application.register("file-input", FileInputLoaderController)
 application.register("select-input", Select_input_component_controller)
 application.register("metadata-select", Metadata_selector_component_controller)
 application.register("subscribe-notes", Ontology_subscribe_button_component_controller)
 application.register("search-input", Search_input_component_controller)
+application.register("tabs-container", Tabs_container_component_controller)

app/javascript/controllers/ontology_viewer_tabs_controller.js

@@ -26,16 +26,9 @@ export default class extends Controller {
     this.changeEvent.removeEventListener()
   }
 
-  selectTab(event) {
-    this.#updateURL(event)
-  }
-
-  #updateURL(event){
-    const page = event.target.getAttribute("data-bp-ont-page");
-    const page_name = event.target.getAttribute("data-bp-ont-page-name");
-
-    (new HistoryService()).pushState({p: page}, page_name + " | " + jQuery(document).data().bp.ont_viewer.org_site, "?p=" + page);
-
+  updateLanguageSelector(event) {
+    console.log('language selector update')
+    let page = event.detail.data.selectedTab
     this.#disableLanguageSelector(page)
   }