dsfr-view-components 0.1.1 → 0.2.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 35d3263e9f55cf1b2f6e8ed013475acb11322715f8982ae24d43d121a5268e30
-  data.tar.gz: 6eb24fccd1294b6096bef1cf43714654a4d9a89174ac7d74c3e4a3c5845487d3
+  metadata.gz: 26127e695550fca9861568104cb2e15f13f81c77d8ab97788db823215bdcd43e
+  data.tar.gz: 90059e2796a0b0e63f6fed13bb9183866dd01ec796d190e342fd9f458d5a1bdf
 SHA512:
-  metadata.gz: f158d2adc525722af4ff7b3d8819411f0821edba991fb68885ec9142ad819c8d12f380817807c810b48298f09ee5f0c204c611fa35ba6944f69605849f490bca
-  data.tar.gz: 0303b1cded5664bf372c160c27acb619bbbdfb196b276e1ea45596d9c6657bda599e6230b0cecf9ef9be991f2b008ff6b822c901945e7f02b2dc230fe9bfa31d
+  metadata.gz: f14bbd9482cf8dfa9473d024c388a30db71225c31fcee52bf69d2dfed43802892dc3cfb56e21f1273d187378cf0e905e801ed9092958839ed3ec9329fc58ece9
+  data.tar.gz: 30e838fb64e6e0fb1fb11adea4967aaf4cdeed2fc8763d8e46ffe4823f1e3a98c4512e974a001e86fcefe47b113dec303e49e3e7e4517727098edda9439c498f

data/README.md

@@ -30,30 +30,32 @@ bin/rails g dsfr_component FancyButton --params title:String count:Integer
 
 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.
 
+## Installation
+
+Pour utiliser cette gem dans votre application Rails, il faut ajouter cette ligne dans `config/application.rb`:
+
+```ruby
+require "dsfr/components"
+```
 
 ## Composants disponibles
 
 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.
 
-Les composants disponibles sont :
+10/36 composants sont disponibles :
 
 - [x] Accordéon - Accordion
-- [ ] Ajout de fichier - File upload
 - [x] Alertes - Alert
 - [x] Badge
 - [ ] Bandeau d'information importante
 - [ ] Barre de recherche - Search bar
-- [ ] Boutons - Buttons
+- [x] Boutons - Buttons
 - [ ] Groupe de bouton
 - [ ] Bouton FranceConnect
-- [ ] Boutons radio
-- [ ] Boutons radio 'riches'
-- [ ] Case à cocher - Checkbox
 - [ ] Cartes - Cards
-- [ ] Champ de saisie - Input
 - [ ] Citation - Quote
 - [ ] Contenu médias - Responsive médias
-- [ ] En-tête - Header
+- [x] En-tête - Header
 - [ ] Fil d'Ariane - Breadcrumb
 - [ ] Gestionnaire de consentement - Consent banner
 - [ ] Icônes de favoris - Favicons
@@ -62,11 +64,10 @@ Les composants disponibles sont :
 - [ ] Lettre d'information et réseaux sociaux - Newsletter & Follow us
 - [x] Liens - Links
 - [ ] Liens d'évitement - Skiplinks
-- [ ] Liste déroulante - Select
 - [ ] Menu latéral - Side menu
 - [ ] Mise en avant - Call out
 - [ ] Mise en exergue - Highlight
-- [ ] Modale - Modal
+- [x] Modale - Modal
 - [ ] Navigation principale - Main navigation
 - [ ] Onglets - Tabs
 - [ ] Pagination
@@ -76,7 +77,7 @@ Les composants disponibles sont :
 - [ ] Sélecteur de langue
 - [ ] Sommaire - Summary
 - [ ] Tableau - Table
-- [ ] Tag
+- [x] Tag
 - [ ] Téléchargement de fichier
 - [x] Tuile - Tile
 
@@ -86,92 +87,9 @@ This library also provides helpers for creating [links](https://govuk-components
 and [back to top links](https://govuk-components.netlify.app/helpers/back-to-top-link).
 -->
 
-<!--
-## Alternative syntax
-
-All of the components can be rendered in two ways:
-
-* directly using Rails’ `#render` method:
-
-  ```erb
-    <%= render DsfrComponent::WarningTextComponent.new do %>
-      A serious warning
-    <% end %>
-  ```
-
-* via the helper wrapper:
-
-  ```erb
-    <%= dsfr_warning_text do %>
-      A serious warning
-    <% end %>
-  ```
-
-  The naming convention for helpers is `dsfr_` followed by the component’s name in snake case. You can see the full list in [DsfrComponentsHelper](app/helpers/dsfr_components_helper.rb).
-
-## Example use
-
-This library allows components to be rendered with Rails’ `render` method or via the provided helpers. Here we’ll use the `dsfr_tabs` to render three tabbed sections:
-
-```erb
-<%= dsfr_tabs(title: 'Days of the week') do |component| %>
-  <% component.tab(label: 'Monday') do %>
-    <p>Monday’s child is fair of face</p>
-  <% end %>
-
-  <% component.tab(label: 'Tuesday') do %>
-    <p>Tuesday’s child is full of grace</p>
-  <% end %>
-
-  <% component.tab(label: 'Wednesday') do %>
-    <p>Wednesday’s child is full of woe</p>
-  <% end %>
-<% end %>
-```
-
-Here are the rendered tabs:
-
-![Tabs preview](docs/images/tabs.png)
-
-For examples on usage see the [guide page](https://govuk-components.netlify.app/).
+## Services utilisant cette gem
 
-## Setup
-
-Add this line to your `config/application.rb`:
-
-```ruby
-require "govuk/components"
-```
-
-## Services using this library
-
-* [Apply for teacher training](https://github.com/DFE-Digital/apply-for-teacher-training)
-* [Find postgraduate teacher training](https://github.com/DFE-Digital/find-teacher-training)
-* [Get help with technology](https://github.com/DFE-Digital/get-help-with-tech)
-* [Publish teacher training courses](https://github.com/DFE-Digital/publish-teacher-training)
-* [Register trainee teachers](https://github.com/DFE-Digital/register-trainee-teachers)
-* [Teaching Vacancies](https://github.com/DFE-Digital/teaching-vacancies)
-
-## Installation
-
-Ajouter cette ligne à votre Gemfile:
-
-```ruby
-gem 'dsfr-components'
-```
-
-And then execute:
-
-```sh
-bundle
-```
-
-Or install it yourself as:
-
-```sh
-gem install govuk-components
-```
--->
+- [Collectif Objets](https://collectif-objets.beta.gouv.fr/) - [code source](https://github.com/betagouv/collectif-objets)
 
 ## Contribuer
 

data/app/components/dsfr_component/base.rb

@@ -5,6 +5,8 @@ class DsfrComponent::Base < ViewComponent::Base
 
   delegate :config, to: Dsfr::Components
 
+  HEADING_LEVELS = [1, 2, 3, 4, 5, 6].freeze
+
   def initialize(classes:, html_attributes:)
     if classes.nil?
       Rails.logger.warn("classes is nil, if no custom classes are needed omit the param")

data/app/components/dsfr_component/button_component.rb

@@ -0,0 +1,63 @@
+module DsfrComponent
+  class ButtonComponent < DsfrComponent::Base
+    SIZES = %i[sm md lg].freeze
+    ICON_POSITIONS = %i[left right].freeze
+    ICON_LEVELS = %i[primary secondary tertiary].freeze
+
+    # @param label [String] Le label du bouton (optionnel si un icône présent)
+    # @param icon [String] Le nom de l’icône à afficher (exemple `arrow-right-line`) (optionnel)
+    # @param icon_position [String] Position de l’icône : :left (défaut) ou :right (optionnel)
+    # @param title [String] Le titre du bouton permettant d’afficher une infobulle (optionnel)
+    # @param level [String] Le niveau du bouton : :primary (défaut), :secondary ou :tertiary (optionnel)
+    # @param size [String] La taille du bouton : :sm, :md (défaut), :lg (optionnel)
+    def initialize(label: nil, title: nil, icon: nil, icon_position: :left, level: nil, size: nil, classes: [], html_attributes: {})
+      @label = label
+      @title = title
+      @icon = icon
+      @icon_position = icon_position
+      @level = level
+      @outline = outline
+      @size = size
+
+      validate_size
+      validate_icon_position
+      validate_level
+      validate_label
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.button(**html_attributes) { label }
+    end
+
+  private
+
+    attr_reader :label, :icon, :icon_position, :level, :outline, :size
+
+    def default_attributes
+      classes = ["fr-btn"]
+      classes << "fr-btn--#{level}" if level.present?
+      classes << "fr-btn--#{size}" if size.present?
+      classes << "fr-icon-#{icon}" if icon.present?
+      classes << "fr-btn--icon-#{icon_position}" if icon.present? && label.present?
+      { class: classes }
+    end
+
+    def validate_size
+      raise(ArgumentError, "`size` should be one of #{SIZES}") if size.present? && SIZES.exclude?(size)
+    end
+
+    def validate_icon_position
+      raise(ArgumentError, "`icon_position` should be one of #{ICON_POSITIONS}") if icon_position.present? && ICON_POSITIONS.exclude?(icon_position)
+    end
+
+    def validate_level
+      raise(ArgumentError, "`level` should be one of #{ICON_LEVELS}") if level.present? && ICON_LEVELS.exclude?(level)
+    end
+
+    def validate_label
+      raise(ArgumentError, "`label` is required unless an icon is specified") if label.blank? && icon.blank?
+    end
+  end
+end

data/app/components/dsfr_component/header_component/direct_link_component.rb

@@ -0,0 +1,22 @@
+class DsfrComponent::HeaderComponent::DirectLinkComponent < DsfrComponent::Base
+  def initialize(title:, path:, active: false, classes: [], html_attributes: {})
+    @title = title
+    @path = path
+    @active = active
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.a(title, **html_attributes)
+  end
+
+private
+
+  attr_reader :title, :path, :active
+
+  def default_attributes
+    { href: path, class: 'fr-nav__link', target: "_self" } \
+      .merge(active ? { "aria-current": 'page' } : {})
+  end
+end

data/app/components/dsfr_component/header_component/direct_link_dropdown_component.rb

@@ -0,0 +1,34 @@
+class DsfrComponent::HeaderComponent::DirectLinkDropdownComponent < DsfrComponent::Base
+  renders_many :links, DsfrComponent::HeaderComponent::DirectLinkComponent
+
+  def initialize(title:, active: false, classes: [], html_attributes: {})
+    @title = title
+    @active = active
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.button(title, **html_attributes) +
+      tag.div(class: 'fr-collapse fr-menu', id: menu_id) do
+        tag.ul(class: 'fr-menu__list') do
+          links.map do |link|
+            tag.li link.call
+          end.join.html_safe
+        end
+      end
+  end
+
+private
+
+  attr_reader :title, :active
+
+  def default_attributes
+    { class: 'fr-nav__btn', "aria-expanded": "false", "aria-controls": menu_id } \
+      .merge(active ? { "aria-current": 'true' } : {})
+  end
+
+  def menu_id
+    @menu_id ||= "menu-#{title.parameterize}"
+  end
+end

data/app/components/dsfr_component/header_component/tool_link_component.rb

@@ -0,0 +1,20 @@
+class DsfrComponent::HeaderComponent::ToolLinkComponent < DsfrComponent::Base
+  def initialize(title:, path:, classes: [], html_attributes: {})
+    @title = title
+    @path = path
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.a title, href: path, **html_attributes
+  end
+
+private
+
+  attr_reader :title, :path
+
+  def default_attributes
+    { class: 'fr-btn' }
+  end
+end

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

@@ -0,0 +1,94 @@
+<%= tag.header(**html_attributes) do %>
+  <div class="fr-header__body">
+    <div class="fr-container">
+      <div class="fr-header__body-row">
+        <div class="fr-header__brand fr-enlarge-link">
+          <div class="fr-header__brand-top">
+            <div class="fr-header__logo">
+              <p class="fr-logo"><%= logo_text %></p>
+            </div>
+
+            <% if search? || tool_links? || direct_links? %>
+              <div class="fr-header__navbar">
+                <% if search? %>
+                  <button class="fr-btn--search fr-btn" data-fr-opened="false" aria-controls="modal-header-search" id="button-header-search" title="Rechercher">
+                    Rechercher
+                  </button>
+                <% end %>
+
+                <% if tool_links? || direct_links? %>
+                  <button class="fr-btn--menu fr-btn" data-fr-opened="false" aria-controls="modal-header-menu" aria-haspopup="menu" id="button-header-menu" title="Menu">
+                    Menu
+                  </button>
+                <% end %>
+              </div>
+            <% end %>
+          </div>
+
+          <div class="fr-header__service">
+            <a href="/" title="Accueil - <%= title %>">
+              <p class="fr-header__service-title"><%= title %></p>
+            </a>
+            <% if tagline %>
+              <p class="fr-header__service-tagline"><%= tagline %></p>
+            <% end %>
+          </div>
+        </div>
+
+        <% if tool_links? || search? %>
+          <div class="fr-header__tools">
+            <% if tool_links? %>
+              <div class="fr-header__tools-links">
+                <ul class="fr-btns-group">
+                  <% tool_links.each do |tool_link| %>
+                    <li>
+                      <%= tool_link %>
+                    </li>
+                  <% end %>
+                </ul>
+              </div>
+            <% end %>
+
+            <% if search? %>
+              <div class="fr-header__search fr-modal" id="modal-header-search">
+                <div class="fr-container fr-container-lg--fluid">
+                  <button class="fr-btn--close fr-btn" aria-controls="modal-header-search" title="Fermer">
+                    Fermer
+                  </button>
+                  <div role="search" id="header-search">
+                    <%= search %>
+                  </div>
+                </div>
+              </div>
+            <% end %>
+          </div>
+        <% end %>
+      </div>
+    </div>
+  </div>
+
+  <% if tool_links? || direct_links? %>
+    <div class="fr-header__menu fr-modal" id="modal-header-menu" aria-labelledby="button-header-menu">
+      <div class="fr-container">
+        <button class="fr-btn--close fr-btn" aria-controls="modal-header-menu" title="Fermer">
+          Fermer
+        </button>
+        <div class="fr-header__menu-links">
+          <!-- this seems to get autopopulated with the tool links with JS -->
+        </div>
+
+        <% if direct_links? %>
+          <nav class="fr-nav" id="navigation-direct-links" role="navigation" aria-label="Menu principal">
+            <ul class="fr-nav__list">
+              <% direct_links.each do |direct_link| %>
+                <li class="fr-nav__item">
+                  <%= direct_link %>
+                </li>
+              <% end %>
+            </ul>
+          </nav>
+        <% end %>
+      </div>
+    </div>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/header_component.rb

@@ -0,0 +1,27 @@
+class DsfrComponent::HeaderComponent < DsfrComponent::Base
+  renders_one :search
+  renders_many :tool_links, "DsfrComponent::HeaderComponent::ToolLinkComponent"
+  renders_many :direct_links, types: {
+    simple: "DsfrComponent::HeaderComponent::DirectLinkComponent",
+    dropdown: "DsfrComponent::HeaderComponent::DirectLinkDropdownComponent"
+  }
+
+  # @param logo_text [String] Ce texte obligatoire sera affiché en dessous de la Marianne et au dessus de la devise française. C’est généralement un nom de ministère ou d’administration.
+  # @param title [String] Le nom du service numérique, titre principal du site.
+  # @param tagline [String] La description du service numérique, sous-titre du site (optionnelle).
+  def initialize(logo_text:, title:, tagline: nil, classes: [], html_attributes: {})
+    @logo_text = logo_text
+    @title = title
+    @tagline = tagline
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  attr_reader :logo_text, :title, :tagline
+
+  def default_attributes
+    { class: 'fr-header', role: 'banner' }
+  end
+end

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

@@ -0,0 +1,30 @@
+<%= tag.dialog(**html_attributes) do %>
+  <div class="fr-container fr-container--fluid fr-container-md">
+    <div class="fr-grid-row fr-grid-row--center">
+      <div class="fr-col-12 fr-col-md-8 fr-col-lg-6">
+        <div class="fr-modal__body">
+          <div class="fr-modal__header">
+            <% if header? %>
+              <%= header %>
+            <% else %>
+              <button class="fr-link--close fr-link" aria-controls="<%= id %>" type="button">Fermer</button>
+            <% end %>
+          </div>
+          <div class="fr-modal__content">
+            <%= content_tag(:h1, title, class: "fr-modal__title", id: title_id) %>
+            <%= content %>
+          </div>
+          <% if buttons? %>
+            <div class="fr-modal__footer">
+              <ul class="fr-btns-group fr-btns-group--right fr-btns-group--inline-reverse fr-btns-group--inline-lg fr-btns-group--icon-left">
+                <% buttons.each do |button| %>
+                  <%= button %>
+                <% end %>
+              </ul>
+            </div>
+          <% end %>
+        </div>
+      </div>
+    </div>
+  </div>
+<% end %>

data/app/components/dsfr_component/modal_component.rb

@@ -0,0 +1,33 @@
+module DsfrComponent
+  class ModalComponent < DsfrComponent::Base
+    renders_one :header
+    renders_many :buttons
+
+    # @param title [String] Titre de la modale
+    # @param opened [Boolean] Ouvre la modale dès le chargement de la page
+    def initialize(title:, opened: false, classes: [], html_attributes: {})
+      @title = title
+      @opened = opened
+
+      @id = html_attributes[:id]
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+  private
+
+    attr_reader :title, :title_icon, :id
+
+    def default_attributes
+      {
+        class: "fr-modal #{@opened ? 'fr-modal--opened' : ''}",
+        role: "dialog",
+        id: @id,
+        "aria-labelledby": title_id
+      }.compact
+    end
+
+    def title_id
+      "#{@id}-title" if @id.present?
+    end
+  end
+end

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

@@ -1,10 +1,10 @@
 <%= tag.div(**html_attributes) do %>
   <div class="fr-tile__body">
-    <h4 class="fr-tile__title">
+    <%= title_tag(class: "fr-tile__title") do %>
       <a class="fr-tile__link" href="<%= url %>">
       <%= title %>
       </a>
-    </h4>
+    <% end %>
     <% if description.present? %>
       <p class="fr-tile__desc">
         <%= description %>

data/app/components/dsfr_component/tile_component.rb

@@ -6,26 +6,33 @@ module DsfrComponent
     # @param image_alt [String] L'alternative de l'image. Doit a priori être vide si l'image est illustrative et n'apporte pas de valeur sémantique.
     # @param description [String] description (optional)
     # @param orientation [String] :horizontal or :vertical
-    def initialize(title:, url:, image_src: nil, image_alt: "", description: nil, orientation: :vertical, classes: [], html_attributes: {})
+    # @param heading_level [Integer] 1, 2, 3, 4 (default), 5, 6
+    def initialize(title:, url:, image_src: nil, image_alt: "", description: nil, orientation: :vertical, heading_level: 4, classes: [], html_attributes: {})
       @title = title
       @url = url
       @image_src = image_src
       @image_alt = image_alt
       @description = description
       @orientation = orientation
-      @background = background
+      @heading_level = heading_level
+
+      raise ArgumentError if HEADING_LEVELS.exclude?(heading_level)
 
       super(classes: classes, html_attributes: html_attributes)
     end
 
   private
 
-    attr_reader :title, :url, :image_src, :image_alt, :description, :orientation, :background
+    attr_reader :title, :url, :image_src, :image_alt, :description, :orientation, :heading_level
 
     def default_attributes
       k = %w[fr-tile fr-enlarge-link]
       k << "fr-tile--horizontal" if orientation.to_sym == :horizontal
       { class: k.join(" ") }
     end
+
+    def title_tag(*args, **kwargs, &block)
+      content_tag("h#{heading_level}", *args, **kwargs, &block)
+    end
   end
 end

data/app/helpers/dsfr_components_helper.rb

@@ -8,6 +8,12 @@ module DsfrComponentsHelper
     dsfr_badge: 'DsfrComponent::BadgeComponent',
     dsfr_tag: 'DsfrComponent::TagComponent',
     dsfr_stepper: 'DsfrComponent::StepperComponent',
+    dsfr_button: 'DsfrComponent::ButtonComponent',
+    dsfr_modal: 'DsfrComponent::ModalComponent',
+    dsfr_header: 'DsfrComponent::HeaderComponent',
+    dsfr_header_tool_link: 'DsfrComponent::HeaderComponent::ToolLinkComponent',
+    dsfr_header_direct_link: 'DsfrComponent::HeaderComponent::DirectLinkComponent',
+    dsfr_header_direct_dropdown_link: 'DsfrComponent::HeaderComponent::DirectLinkDropdownComponent',
     # 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.1.1'.freeze
+    VERSION = '0.2.1'.freeze
   end
 end

data/lib/generators/dsfr_component/dsfr_component_generator.rb

@@ -34,7 +34,7 @@ class DsfrComponentGenerator < Rails::Generators::NamedBase
   def append_guide_helper
     destination = "guide/lib/helpers.rb"
 
-    append_to_file destination, "use_helper Examples::#{name}Helpers"
+    append_to_file destination, "use_helper Examples::#{name}Helpers\n" # trailing new line
   end
 
   def map_component_helper

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: dsfr-view-components
 version: !ruby/object:Gem::Version
-  version: 0.1.1
+  version: 0.2.1
 platform: ruby
 authors:
 - BetaGouv developers
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2023-02-17 00:00:00.000000000 Z
+date: 2023-03-17 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: actionpack
@@ -451,6 +451,14 @@ 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/button_component.rb
+- app/components/dsfr_component/header_component.html.erb
+- app/components/dsfr_component/header_component.rb
+- app/components/dsfr_component/header_component/direct_link_component.rb
+- app/components/dsfr_component/header_component/direct_link_dropdown_component.rb
+- app/components/dsfr_component/header_component/tool_link_component.rb
+- app/components/dsfr_component/modal_component.html.erb
+- 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/tag_component.rb