Fix views

app/cells/decidim/navigation_maps/content_blocks/navigation_map/_styles.erb

@@ -1,18 +1,18 @@
 <style type="text/css">
   <% blueprints.each do |blueprint| %>
     <% next unless blueprint.areas %>
-    <% blueprint.areas.each do |area| %>
-    .map-info-<%= blueprint.id %>-<%= area.area_id %> {
-      border-color: <%= area.color %> !important;
-    }
-    .map-info-<%= blueprint.id %>-<%= area.area_id %> .leaflet-popup-tip {
-      border-color: <%= area.color %> !important;
-    }
-    .map-info-<%= blueprint.id %>-<%= area.area_id %> .button {
-      background-color: <%= area.color %>;
-      color: #fff;
-    }
 
+    <% blueprint.areas.each do |area| %>
+      .map-info-<%= blueprint.id %>-<%= area.area_id %> {
+        border-color: <%= area.color %> !important;
+      }
+      .map-info-<%= blueprint.id %>-<%= area.area_id %> .leaflet-popup-tip {
+        border-color: <%= area.color %> !important;
+      }
+      .map-info-<%= blueprint.id %>-<%= area.area_id %> .button {
+        background-color: <%= area.color %>;
+        color: #fff;
+      }
     <% end %>
   <% end %>
 </style>

app/cells/decidim/navigation_maps/content_blocks/navigation_map/_tabs.erb

@@ -1,5 +1,9 @@
-<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="navigation_maps-tabs">
-  <% tabs.each_with_index do |item, index| %>
-    <li class="tabs-title<%= " is-active" if index.zero? %>"><a data-tabs-target="map<%= index %>" href="#map<%= index %>"><%= translated_attribute(item.title).presence || "Tab #{index + 1}" %></a></li>
-  <% end %>
-</ul>
+<nav>
+  <ul id="dropdown-menu-pages" class="vertical-tabs__list nav-tabs" id="navigation_maps-tabs">
+    <% tabs.each_with_index do |item, index| %>
+      <li class="<%= " is-active" if index.zero? %>">
+        <a href="#map<%= index %>"><%= translated_attribute(item.title).presence || "Tab #{index + 1}" %></a>
+      </li>
+    <% end %>
+  </ul>
+</nav>

app/cells/decidim/navigation_maps/content_blocks/navigation_map/_tabs_content.erb

@@ -1,7 +1,6 @@
-
-<div class="tabs-content admin" data-tabs-content="navigation_maps-tabs">
+<div class="tab-content">
   <% tabs.each_with_index do |item, index| %>
-    <div class="tabs-panel<%= " is-active" if index.zero? %>" id="map<%= index %>">
+    <div class="tab-pane<%= " is-active" if index.zero? %>" id="map<%= index %>">
       <%= content_tag(:div, "", id: "navigation_maps-map-#{item.id}", class: "map", style: "height: #{item.height}px", data: { id: item.id, image: image_path(item.image), blueprint: item.blueprint }) %>
     </div>
   <% end %>

app/cells/decidim/navigation_maps/content_blocks/navigation_map/_template.erb

@@ -1,10 +1,10 @@
 <script id="navigation_maps-popup" type="text/x-jsrender">
   <div class="map-info__content">
-    <h3>{{:title}}</h3>
+    <h3 class="h3">{{:title}}</h3>
     <div id="bodyContent">
       <p>{{:description}}</p>
       <div class="map-info__button">
-        <a href="{{:link}}" class="button button--sc">
+        <a href="{{:link}}" class="button button__primary button__sm">
           <%= t("navigation_map.view", scope: "decidim.navigation_maps.content_blocks") %>
         </a>
       </div>

app/cells/decidim/navigation_maps/content_blocks/navigation_map/show.erb

@@ -1,24 +1,25 @@
 <%= append_stylesheet_pack_tag "decidim_navigation_maps" %>
 <%= render partial: "styles", locals: { blueprints: valid_blueprints } %>
 
-<section<%= class_tag(section_classes) %>>
-  <div<%= class_tag(wrapper_classes) %>>
-    <div<%= class_tag(row_classes) %>>
-
-      <% if translated_title.present? %>
-        <h3 class="heading3"><%= decidim_sanitize translated_title %></h3>
-      <% end %>
+<section class="home__section" id="navigation_maps-<%= model.id %>">
+  <% if translated_title.present? %>
+    <div class="home__section-header">
+      <h2 class="home__section-title"><%= decidim_sanitize translated_title %></h2>
+    </div>
+  <% end %>
 
-      <div class="navigation_maps">
-        <%= tabs %>
-        <%= render partial: "tabs_content", locals: { tabs: valid_blueprints } %>
-      </div>
+  <% if autohide_tabs? %>
+    <div class="navigation_maps">
+      <%= render partial: "tabs_content", locals: { tabs: valid_blueprints } %>
+    </div>
+  <% else %>
+    <div class="vertical-tabs navigation_maps" id="tabs__navigation_maps">
+      <%= tabs %>
+      <%= render partial: "tabs_content", locals: { tabs: valid_blueprints } %>
     </div>
-  </div>
+  <% end %>
 </section>
 
 <%= render partial: "template" %>
-<% unless %w[here].include?(Decidim.config.maps&.fetch(:provider)) %>
-  <%= append_javascript_pack_tag "decidim_leaflet" %>
-<% end %>
+<%= append_javascript_pack_tag "decidim_leaflet" %>
 <%= append_javascript_pack_tag "decidim_navigation_maps" %>

app/cells/decidim/navigation_maps/content_blocks/navigation_map_cell.rb

@@ -16,17 +16,19 @@ def show
         end
 
         def tabs
-          return if model.settings.autohide_tabs? && valid_blueprints.count < 2
-
           render partial: "tabs", locals: { tabs: valid_blueprints }
         end
 
         def translated_title
           translated_attribute(model.settings.title)
         end
 
+        def autohide_tabs?
+          model.settings.autohide_tabs? && valid_blueprints.count < 2
+        end
+
         def section_classes
-          "extended home-section"
+          "home__section"
         end
 
         def wrapper_classes

app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_form.erb

@@ -1,8 +1,14 @@
-<ul class="accordion" data-accordion>
-  <li class="accordion-item<%= " is-active" unless image?(form) %>" data-accordion-item>
-    <a href="#" class="accordion-title"><%= t("navigation_map_settings_form.info", scope: "decidim.navigation_maps.content_blocks") %></a>
-
-    <div class="accordion-content" data-tab-content>
+<div class="card" data-component="accordion" role="presentation" id=accordion-general_info_<%= form.ident %>">
+  <div class="card-divider">
+    <button class="card-divider-button" data-open="true" data-controls="panel-general_info_<%= form.ident %>" type="button" role="button" tabindex="0" aria-controls="panel-general_info_<%= form.ident %>" aria-expanded="true" aria-disabled="false">
+      <%= icon "arrow-right-s-line" %>
+      <h2 class="card-title">
+        <%= t("navigation_map_settings_form.info", scope: "decidim.navigation_maps.content_blocks") %>
+      </h2>
+    </button>
+  </div>
+  <div id="panel-general_info_<%= form.ident %>" class="card-section" role="region" tabindex="-1" aria-labelledby aria-hidden="false">
+    <div class="row column">
       <%= translated_field_tag :text_field_tag, "blueprints[#{form.ident}]", :title, form.title, { tabs_id: "blueprints_#{form.ident}_title", label: t("navigation_map_settings_form.title", scope: "decidim.navigation_maps.content_blocks") } %>
       <%= label_tag t("navigation_map_settings_form.height", scope: "decidim.navigation_maps.content_blocks") %>
       <%= text_field_tag "blueprints[#{form.ident}][height]", form.height, { id: "blueprints_#{form.ident}_height", autocomplete: "off" } %>
@@ -22,17 +28,26 @@
           <%= t("navigation_map_settings_form.remove_blueprint", scope: "decidim.navigation_maps.content_blocks") %>
         </label>
       <% end %>
+    </div>
   </div>
-  </li>
-
-  <% if image?(form) %>
-  <li class="accordion-item is-active" data-accordion-item>
-    <a href="#" class="accordion-title"><%= t("navigation_map_settings_form.editor", scope: "decidim.navigation_maps.content_blocks") %></a>
-    <div class="accordion-content navigation_maps-content" data-tab-content>
-
-      <%= content_tag(:div, "", id: "navigation_maps-map-#{form.ident}", class: "map", data: { id: form.ident, image: image_path(form.image), blueprint: form.blueprint }) %>
+</div>
 
+<% if image?(form) %>
+  <div class="card mt-4" data-component="accordion" role="presentation" id=accordion-map_editor_<%= form.ident %>">
+    <div class="card-divider">
+      <button class="card-divider-button" data-open="true" data-controls="panel-map_editor_<%= form.ident %>" type="button" role="button" tabindex="0" aria-controls="panel-map_editor_<%= form.ident %>" aria-expanded="true" aria-disabled="false">
+        <%= icon "arrow-right-s-line" %>
+        <h2 class="card-title">
+          <%= t("navigation_map_settings_form.editor", scope: "decidim.navigation_maps.content_blocks") %>
+        </h2>
+      </button>
+    </div>
+    <div id="panel-map_editor_<%= form.ident %>" class="card-section" role="region" tabindex="-1" aria-labelledby aria-hidden="false">
+      <div class="row column">
+        <div class=navigation_maps-content" data-tab-content>
+          <%= content_tag(:div, "", id: "navigation_maps-map-#{form.ident}", class: "map", data: { id: form.ident, image: image_path(form.image), blueprint: form.blueprint }) %>
+        </div>
+      </div>
     </div>
-  </li>
-  <% end %>
-</ul>
+  </div>
+<% end %>

app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_modal.erb

@@ -1,12 +1,8 @@
-
-<div class="reveal navigation_maps modal loading" id="mapEditModal" data-reveal>
-  <div class="modal-content">
-
+<div id="map-edit-modal" data-dialog="map-edit-modal" role="dialog" tabindex="-1" aria-hidden="true" aria-labelledby="dialog-title-map-edit-modal" aria-describedby="dialog-desc-map-edit-modal" aria-modal="true">
+  <div id="map-edit-modal-content">
+    <button type="button" data-dialog-close="map-edit-modal" data-dialog-closable="" aria-label="Close modal">&times;</button>
+    <div data-dialog-container="">
+      <div class="modal-content"></div>
+    </div>
   </div>
-
-  <div class="spinner"></div>
-
-  <button class="close-button" data-close aria-label="Close modal" type="button">
-    <span aria-hidden="true">&times;</span>
-  </button>
 </div>

app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_tabs.erb

@@ -1,6 +1,10 @@
-<ul class="tabs" data-deep-link="true" data-update-history="true" data-deep-link-smudge="true" data-deep-link-smudge-delay="500" data-tabs id="navigation_maps-tabs">
+<ul class="nav-tabs" id="navigation_maps-tabs">
   <% tabs.each_with_index do |item, index| %>
-    <li class="tabs-title<%= " is-active" if index.zero? %>"><a data-tabs-target="map<%= index %>" href="#map<%= index %>"><%= translated_attribute(item.title).presence || "Tab #{index + 1}" %></a></li>
+    <li class="<%= " is-active" if index.zero? %>">
+      <a href="#map<%= index %>"><%= translated_attribute(item.title).presence || "Tab #{index + 1}" %></a>
+    </li>
   <% end %>
-  <li class="tabs-title"><a href="#map-new">+ <%= t("navigation_map_settings_form.add", scope: "decidim.navigation_maps.content_blocks") %></a></li>
+  <li>
+    <a href="#map-new">+ <%= t("navigation_map_settings_form.add", scope: "decidim.navigation_maps.content_blocks") %></a>
+  </li>
 </ul>

app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/_tabs_content.erb

@@ -1,10 +1,10 @@
-<div class="tabs-content" data-tabs-content="navigation_maps-tabs">
+<div class="tab-content">
   <% tabs.each_with_index do |item, index| %>
-    <div class="tabs-panel<%= " is-active" if index.zero? %>" id="map<%= index %>">
+    <div class="tab-pane<%= " is-active" if index.zero? %>" id="map<%= index %>">
       <%= render partial: "form", locals: { form: blueprint_form(item) } %>
     </div>
   <% end %>
-  <div class="tabs-panel" id="map-new">
+  <div class="tab-pane" id="map-new">
     <%= render partial: "form", locals: { form: blueprint_form } %>
   </div>
 </div>

app/cells/decidim/navigation_maps/content_blocks/navigation_map_settings_form/show.erb

@@ -10,14 +10,11 @@
 <%= hidden_field_tag :content_block_id, content_block.id %>
 
 <div class="navigation_maps admin">
-  <div class="callout" style="display:none" data-closable>
+  <div class="callout my-4" style="display:none" data-closable>
     <p></p>
-    <button class="close-button" aria-label="Dismiss alert" type="button" data-close>
-      <span aria-hidden="true">&times;</span>
-    </button>
   </div>
 
-  <div class="content">
+  <div class="content" id="tabs__navigation_maps">
     <%= render partial: "tabs", locals: { tabs: blueprints } %>
     <%= render partial: "tabs_content", locals: { tabs: blueprints } %>
 

app/controllers/decidim/navigation_maps/admin/areas_controller.rb

@@ -42,7 +42,9 @@ def create
         end
 
         def update
+          parse_areas
           @form = form(AreaForm).from_params(params, current_blueprint: blueprint)
+
           SaveArea.call(@form) do
             on(:ok) do |area|
               render json: { message: I18n.t("navigation_maps.admin.areas.update.success", scope: "decidim"),

app/controllers/decidim/navigation_maps/admin/blueprints_controller.rb

@@ -39,7 +39,7 @@ def save_settings
           return unless params[:content_block][:settings]
 
           @form = form(Decidim::Admin::ContentBlockForm).from_params(params)
-          Decidim::Admin::UpdateContentBlock.call(@form, content_block, content_block.scope_name&.to_sym)
+          Decidim::Admin::ContentBlocks::UpdateContentBlock.call(@form, content_block, content_block.scope_name&.to_sym)
         end
 
         def content_block

app/packs/src/decidim/navigation_maps/admin/map_editor.js

@@ -1,6 +1,6 @@
 // Creates a map
 import "leaflet"
-import NavigationMapView from "src/decidim/navigation_maps/map_view.js";
+import NavigationMapView from "src/decidim/navigation_maps/map_view";
 
 export default class NavigationMapEditor extends NavigationMapView {
   constructor(mapObject, tableObject) {
@@ -35,6 +35,7 @@ export default class NavigationMapEditor extends NavigationMapView {
     });
 
     this.map.on("pm:remove", (event) => {
+      // eslint-disable-next-line prefer-reflect
       delete this.blueprint[event.layer._leaflet_id];
       this.removeAreaCallback(event.layer._leaflet_id, event.layer, this);
     });