dsfr-view-components 0.2.1 → 0.4.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 26127e695550fca9861568104cb2e15f13f81c77d8ab97788db823215bdcd43e
-  data.tar.gz: 90059e2796a0b0e63f6fed13bb9183866dd01ec796d190e342fd9f458d5a1bdf
+  metadata.gz: ef54774bdcf1ad2c6169da53867dc97bc45ee11759826a6892bde1f48d8d3928
+  data.tar.gz: 3fea1dab55f0be17c46214bd45c1cf93f9c0cd967d8b27a754a8c7dda9db46c8
 SHA512:
-  metadata.gz: f14bbd9482cf8dfa9473d024c388a30db71225c31fcee52bf69d2dfed43802892dc3cfb56e21f1273d187378cf0e905e801ed9092958839ed3ec9329fc58ece9
-  data.tar.gz: 30e838fb64e6e0fb1fb11adea4967aaf4cdeed2fc8763d8e46ffe4823f1e3a98c4512e974a001e86fcefe47b113dec303e49e3e7e4517727098edda9439c498f
+  metadata.gz: e82dac0aecf55ef15275bab28fc97dd345b22911292b451d5f5a390d4c99f8169708b1261a52db629cca7b1c59c420632f9b1e67ae829c75f52c6328b13eb488
+  data.tar.gz: ba573c5bf3ce60a132be6155047435fd32f98f0d55309269a1f37704e361154a100117746c978c80c70a8c1ab42580959d0ced78ee6a12a4e8ed2542fca47e3a

data/README.md

@@ -13,19 +13,6 @@ Cette gem fournit des composants pour le Design Système de l'État (DSFR) en s'
 
 C'est un fork de [govuk-components](https://github.com/DFE-Digital/govuk-components) qui propose l'équivalent pour le GOV.UK Design System.
 
-
-## Développement en cours ⚠️
-
-Cette gem est en cours de développement et n'est pas encore
-recommandée pour un usage en production.
-
-N'hésitez pas à contribuer pour nous aider à avancer, un générateur de
-composant est même fourni pour vous faciliter la tâche :
-
-```sh
-bin/rails g dsfr_component FancyButton --params title:String count:Integer
-```
-
 ## Documentation
 
 Un [guide complet est disponible](https://betagouv.github.io/dsfr-view-components/). Il contient des instructions pour l'installation et l'usage de cette gem. Les exemples présents éxecutent le code et seront donc toujours à jour.
@@ -42,44 +29,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 :
-
-- [x] Accordéon - Accordion
-- [x] Alertes - Alert
-- [x] Badge
-- [ ] Bandeau d'information importante
-- [ ] Barre de recherche - Search bar
-- [x] Boutons - Buttons
-- [ ] Groupe de bouton
-- [ ] Bouton FranceConnect
-- [ ] Cartes - Cards
-- [ ] Citation - Quote
-- [ ] Contenu médias - Responsive médias
-- [x] En-tête - Header
-- [ ] Fil d'Ariane - Breadcrumb
-- [ ] Gestionnaire de consentement - Consent banner
-- [ ] Icônes de favoris - Favicons
-- [x] Indicateur d'étape - Stepper
-- [ ] Interrupteur - Toggle switch
-- [ ] Lettre d'information et réseaux sociaux - Newsletter & Follow us
-- [x] Liens - Links
-- [ ] Liens d'évitement - Skiplinks
-- [ ] Menu latéral - Side menu
-- [ ] Mise en avant - Call out
-- [ ] Mise en exergue - Highlight
-- [x] Modale - Modal
-- [ ] Navigation principale - Main navigation
-- [ ] Onglets - Tabs
-- [ ] Pagination
-- [ ] Paramètres d'affichage - Display
-- [ ] Partage - Share
-- [ ] Pied de page - Footer
-- [ ] Sélecteur de langue
-- [ ] Sommaire - Summary
-- [ ] Tableau - Table
-- [x] Tag
-- [ ] Téléchargement de fichier
-- [x] Tuile - Tile
+La [liste des composants implémentés ou restants est consultable grâce au label `composant`](https://github.com/betagouv/dsfr-view-components/issues?page=2&q=is%3Aissue+label%3Acomposant) sur ce même dépôt.
 
 <!--
 This library also provides helpers for creating [links](https://govuk-components.netlify.app/helpers/link),
@@ -108,6 +58,7 @@ bundle exec rspec spec
 ```
 
 Pour développer avec les tests en continu :
+
 ```sh
 bundle exec guard
 ```
@@ -118,6 +69,13 @@ Lancer le guide de documentation :
 make watch-guide
 ```
 
+Utilisez le générateur pour créer un nouveau composant :
+
+```sh
+bin/rails g dsfr_component FancyButton --params title:String count:Integer
+```
+
+
 Lancer la dummy app pour itérer sur les composants :
 
 ```sh

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

@@ -0,0 +1,17 @@
+<%= tag.nav(**html_attributes) do %>
+  <button
+      class="fr-breadcrumb__button"
+      aria-expanded="false"
+      aria-controls="breadcrumbs">
+    Voir le fil d’Ariane
+  </button>
+  <div class="fr-collapse" id="breadcrumbs">
+    <ol class="fr-breadcrumb__list">
+      <% breadcrumbs.each do |crumb| %>
+        <li>
+          <%= crumb %>
+        </li>
+      <% end %>
+    </ol>
+  </div>
+<% end %>

data/app/components/dsfr_component/breadcrumbs_component.rb

@@ -0,0 +1,25 @@
+class DsfrComponent::BreadcrumbsComponent < DsfrComponent::Base
+  renders_many :breadcrumbs, ->(label:, href: nil) do
+    attributes = if href.nil?
+                   { aria: { current: true } }
+                 else
+                   { href: href }
+                 end
+
+    content_tag(:a, class: 'fr-breadcrumb__link', **attributes) { label }
+  end
+
+  def initialize(classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  def default_attributes
+    {
+      class: 'fr-breadcrumb',
+      aria: { label: 'vous êtes ici :' },
+      role: "navigation"
+    }
+  end
+end

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

@@ -4,6 +4,7 @@ module DsfrComponentsHelper
     dsfr_alert: 'DsfrComponent::AlertComponent',
     dsfr_accordion: 'DsfrComponent::AccordionComponent',
     dsfr_accordion_section: 'DsfrComponent::AccordionComponent::SectionComponent',
+    dsfr_breadcrumbs: 'DsfrComponent::BreadcrumbsComponent',
     dsfr_tile: 'DsfrComponent::TileComponent',
     dsfr_badge: 'DsfrComponent::BadgeComponent',
     dsfr_tag: 'DsfrComponent::TagComponent',
@@ -14,6 +15,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.4.0'.freeze
   end
 end

metadata

@@ -1,57 +1,15 @@
 --- !ruby/object:Gem::Specification
 name: dsfr-view-components
 version: !ruby/object:Gem::Version
-  version: 0.2.1
+  version: 0.4.0
 platform: ruby
 authors:
 - BetaGouv developers
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-03-17 00:00:00.000000000 Z
+date: 2023-05-24 00:00:00.000000000 Z
 dependencies:
-- !ruby/object:Gem::Dependency
-  name: actionpack
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-- !ruby/object:Gem::Dependency
-  name: activemodel
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-- !ruby/object:Gem::Dependency
-  name: railties
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - ">="
-      - !ruby/object:Gem::Version
-        version: '6.1'
 - !ruby/object:Gem::Dependency
   name: html-attributes-utils
   requirement: !ruby/object:Gem::Requirement
@@ -451,6 +409,8 @@ files:
 - app/components/dsfr_component/alert_component.rb
 - app/components/dsfr_component/badge_component.rb
 - app/components/dsfr_component/base.rb
+- app/components/dsfr_component/breadcrumbs_component.html.erb
+- app/components/dsfr_component/breadcrumbs_component.rb
 - app/components/dsfr_component/button_component.rb
 - app/components/dsfr_component/header_component.html.erb
 - app/components/dsfr_component/header_component.rb
@@ -461,6 +421,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