dsfr-view-components 0.2.1 → 0.3.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26127e695550fca9861568104cb2e15f13f81c77d8ab97788db823215bdcd43e
-  data.tar.gz: 90059e2796a0b0e63f6fed13bb9183866dd01ec796d190e342fd9f458d5a1bdf
+  metadata.gz: e93e6bf0c8951900e6b030e6e0f25b59cf5adda2d357522f150cf2c2700d22b7
+  data.tar.gz: e445fe61031ec9e52a2d1abb82240293825e988995fdf72eba461d88b23aeed8
 SHA512:
-  metadata.gz: f14bbd9482cf8dfa9473d024c388a30db71225c31fcee52bf69d2dfed43802892dc3cfb56e21f1273d187378cf0e905e801ed9092958839ed3ec9329fc58ece9
-  data.tar.gz: 30e838fb64e6e0fb1fb11adea4967aaf4cdeed2fc8763d8e46ffe4823f1e3a98c4512e974a001e86fcefe47b113dec303e49e3e7e4517727098edda9439c498f
+  metadata.gz: 2ce58d44d3ada31a6f9381017fc6da31a1dad95e8d14128f2e30a91dba279a63c19dfdbcb992807f422f5e3536d13d4b5198537cd313414eb8427fdea7af04db
+  data.tar.gz: 2baad7dedd1acb5e512f8056f819d586937e9d49c360b4c4aa3e162f122dd2c0d17eba1217db9f05cb6403987f3bf702b089efbc57b37bc7378d5de20fe312f7

data/README.md

@@ -42,7 +42,7 @@ require "dsfr/components"
 
 Cette gem a pour but de supporter tous les composants proposés par le Design Système de l'État hormis ceux concernant les formulaires. Ceux-ci seront fournis dans une gem indépendante dans le futur.
 
-10/36 composants sont disponibles :
+11/36 composants sont disponibles :
 
 - [x] Accordéon - Accordion
 - [x] Alertes - Alert
@@ -69,7 +69,7 @@ Cette gem a pour but de supporter tous les composants proposés par le Design Sy
 - [ ] Mise en exergue - Highlight
 - [x] Modale - Modal
 - [ ] Navigation principale - Main navigation
-- [ ] Onglets - Tabs
+- [x] Onglets - Tabs
 - [ ] Pagination
 - [ ] Paramètres d'affichage - Display
 - [ ] Partage - Share

data/app/components/dsfr_component/tabs_component/tab_component.rb

@@ -0,0 +1,58 @@
+class DsfrComponent::TabsComponent::TabComponent < DsfrComponent::Base
+  # @param title [String] Le titre de l’onglet affiché dans la barre d’onglets
+  # @param active [Boolean] Définit si l’onglet est actif ou non
+  # @param path [String] (optionnel) chemin vers lequel l’onglet pointe, utilisable avec Turbo Drive, transforme le bouton en lien, avec une turbo action `advance`
+  # @param icon [String] (optionnel) icône affichée à gauche du titre de l’onglet (sans le préfixe `fr-icon-`)
+  def initialize(title:, active: false, path: nil, icon: nil, classes: [], html_attributes: {})
+    @title = title
+    @active = active
+    @path = path
+    @icon = icon
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def nav_id
+    @nav_id ||= "tab-#{title_slug}-nav"
+  end
+
+  def panel_id
+    @panel_id ||= "tab-#{title_slug}-panel"
+  end
+
+  def nav_item
+    path ? nav_link : nav_button
+  end
+
+  def call
+    tag.div(**html_attributes) { content }
+  end
+
+private
+
+  attr_reader :title, :active, :path, :icon
+
+  def default_attributes
+    classes = ['fr-tabs__panel']
+    classes << "fr-tabs__panel--selected" if active
+    { id: panel_id, class: classes, role: 'tabpanel', "aria-labelledby": nav_id }
+  end
+
+  def title_slug
+    @title_slug ||= title.parameterize
+  end
+
+  def nav_button
+    tag.button(title, **nav_html_attributes)
+  end
+
+  def nav_link
+    tag.a(title, href: path, data: { turbo_action: "advance" }, **nav_html_attributes)
+  end
+
+  def nav_html_attributes
+    classes = ["fr-tabs__tab"]
+    classes += ["fr-icon-#{icon}", "fr-tabs__tab--icon-left"] if icon.present?
+    { id: nav_id, class: classes, role: 'tab', "aria-selected": active ? "true" : "false", "aria-controls": panel_id }
+  end
+end

data/app/components/dsfr_component/tabs_component.html.erb

@@ -0,0 +1,12 @@
+<%= tag.div(**html_attributes) do %>
+  <ul class="fr-tabs__list" role="tablist" aria-label="<%= label %>">
+    <% tabs.each do |tab| %>
+      <li role="presentation">
+        <%= tab.nav_item %>
+      </li>
+    <% end %>
+  </ul>
+  <% tabs.each do |tab| %>
+    <%= tab %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/tabs_component.rb

@@ -0,0 +1,19 @@
+class DsfrComponent::TabsComponent < DsfrComponent::Base
+  renders_many :tabs, "DsfrComponent::TabsComponent::TabComponent"
+
+  # @param label [String] Le nom du système d’onglets, sera uniquement affiché comme aria-label (optionnel)
+  def initialize(label: nil, classes: [], html_attributes: {})
+    @label = label
+    @tabs = []
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  attr_reader :label
+
+  def default_attributes
+    { class: 'fr-tabs' }
+  end
+end

data/app/helpers/dsfr_components_helper.rb

@@ -14,6 +14,7 @@ module DsfrComponentsHelper
     dsfr_header_tool_link: 'DsfrComponent::HeaderComponent::ToolLinkComponent',
     dsfr_header_direct_link: 'DsfrComponent::HeaderComponent::DirectLinkComponent',
     dsfr_header_direct_dropdown_link: 'DsfrComponent::HeaderComponent::DirectLinkDropdownComponent',
+    dsfr_tabs: 'DsfrComponent::TabsComponent',
     # DO NOT REMOVE: new component mapping here
   }.freeze
   HELPER_NAME_TO_CLASS_NAME.each do |name, klass|

data/lib/dsfr/components/version.rb

@@ -1,5 +1,5 @@
 module Dsfr
   module Components
-    VERSION = '0.2.1'.freeze
+    VERSION = '0.3.0'.freeze
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dsfr-view-components
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.3.0
 platform: ruby
 authors:
 - BetaGouv developers
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-17 00:00:00.000000000 Z
+date: 2023-03-20 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -461,6 +461,9 @@ files:
 - app/components/dsfr_component/modal_component.rb
 - app/components/dsfr_component/stepper_component.html.erb
 - app/components/dsfr_component/stepper_component.rb
+- app/components/dsfr_component/tabs_component.html.erb
+- app/components/dsfr_component/tabs_component.rb
+- app/components/dsfr_component/tabs_component/tab_component.rb
 - app/components/dsfr_component/tag_component.rb
 - app/components/dsfr_component/tile_component.html.erb
 - app/components/dsfr_component/tile_component.rb