dsfr-view-components 0.0.1

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 13a375b911fee2a88bc620482b766be2d3348d0138d56f9f2cb2641f649e8d50
+  data.tar.gz: 85f677a71346315a8c128f156b32c74b6436528bfa5ed98fcaf490d352fdeb71
+SHA512:
+  metadata.gz: 6b10dd868701e33699626fa4753fd7a017128f87b91394c72100d24b014c16206e5285ca81778d045c025241c56a6a97805859b6af75d1c946ba917677818dc7
+  data.tar.gz: e81ae1788e01bc3e24ec2cc07a4ccfd2cf8fef13fd6d6a5a865423cdf584d65a5303c0965681ff2a922e2cb50bc61bbffb3eca87f20c7cf4224bbd51a355ee06

data/README.md

@@ -0,0 +1,214 @@
+# Composants du DSFR
+
+Cette gem fournit des composants pour le Design Système de l'État (DSFR) en s'appuyant sur le [framework ViewComponent](https://github.com/ViewComponent/view_component).
+
+C'est un fork de [govuk-components](https://github.com/DFE-Digital/govuk-components) qui propose l'équivalent pour le GOV.UK Design System.
+
+⚠️ Cette gem est en cours de développement et n'est pas adaptée à un usage en production. N'hésitez pas à contribuer pour nous aider à avancer !
+
+[![Tests](https://github.com/betagouv/dsfr-view-components/workflows/Tests/badge.svg)](https://github.com/betagouv/dsfr-view-components/actions?query=workflow%3ATests)
+
+<!--
+[![Maintainability](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/maintainability)](https://codeclimate.com/github/DFE-Digital/govuk-components/maintainability)
+[![Gem Version](https://badge.fury.io/rb/govuk-components.svg)](https://badge.fury.io/rb/govuk-components)
+[![Gem](https://img.shields.io/gem/dt/govuk-components?logo=rubygems)](https://rubygems.org/gems/govuk-components)
+[![Test Coverage](https://api.codeclimate.com/v1/badges/cbcbc140f300b920d833/test_coverage)](https://codeclimate.com/github/DFE-Digital/govuk-components/test_coverage)
+[![GitHub license](https://img.shields.io/github/license/DFE-Digital/govuk-components)](https://github.com/DFE-Digital/govuk-components/blob/main/LICENSE)
+[![GOV.UK Design System Version](https://img.shields.io/badge/GOV.UK%20Design%20System-4.3.0-brightgreen)](https://design-system.service.gov.uk)
+[![Rails](https://img.shields.io/badge/Rails-6.1.5%20%E2%95%B1%207.0.3-E16D6D)](https://weblog.rubyonrails.org/releases/)
+[![Ruby](https://img.shields.io/badge/Ruby-2.7.6%20%20%E2%95%B1%203.0.3%20%20%E2%95%B1%203.1.2-E16D6D)](https://www.ruby-lang.org/en/downloads/)
+
+This gem provides a suite of reusable components for the [GOV.UK Design System](https://design-system.service.gov.uk/). It is intended to provide a lightweight alternative to the [GOV.UK Publishing Components](https://github.com/alphagov/dsfr_publishing_components) library and is built with GitHub’s [ViewComponent](https://github.com/github/view_component) framework.
+
+It aims to implement the functionality from the original Nunjucks macros in a way that will feel more familiar to Rails developers. Blocks are preferred over strings of HTML, beneath the surface each component is just a Ruby object, everything is inheritable and overrideable.
+
+## Documentation
+
+The gem comes with [a full guide](https://govuk-components.netlify.app/) that
+covers most aspects of day-to-day use, along with code and output examples. The
+examples in the guide (and the guide itself) are built using the components,
+so it will always be up to date.
+
+[![Netlify Status](https://api.netlify.com/api/v1/badges/d40a5a0a-b086-4c35-b046-97fbcbf9f219/deploy-status)](https://app.netlify.com/sites/govuk-components/deploys)
+
+-->
+
+## 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 :
+
+- [ ] Accordéon - Accordion
+- [ ] Ajout de fichier - File upload
+- [ ] Alertes - Alert
+- [ ] Badge
+- [ ] Bandeau d'information importante
+- [ ] Barre de recherche - Search bar
+- [ ] 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
+- [ ] Fil d'Ariane - Breadcrumb
+- [ ] Gestionnaire de consentement - Consent banner
+- [ ] Icônes de favoris - Favicons
+- [ ] Indicateur d'étape
+- [ ] Interrupteur - Toggle switch
+- [ ] Lettre d'information et réseaux sociaux - Newsletter &amp; Follow us
+- [ ] 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
+- [ ] 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
+- [ ] Tag
+- [ ] Téléchargement de fichier
+- [ ] Tuile - Tile
+
+<!--
+This library also provides helpers for creating [links](https://govuk-components.netlify.app/helpers/link),
+[buttons](https://govuk-components.netlify.app/helpers/button), [skip links](https://govuk-components.netlify.app/helpers/skip-link)
+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/).
+
+## 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
+```
+-->
+
+## Contribuer
+
+Nous conseillons d'utiliser [rbenv](https://github.com/rbenv/rbenv) pour gérer vos versions de ruby :
+
+```sh
+rbenv local 3.1.2
+rbenv install
+```
+
+Lancer les tests :
+
+```sh
+bundle install
+bundle exec rspec spec
+```
+
+Lancer le guide de documentation : 
+
+```sh
+make watch-guide
+```
+
+Lancer la dummy app pour itérer sur les composants :
+
+```sh
+cd spec/dummy
+bundle install && npm install
+bundle exec rails server
+```
+
+Déployer une nouvelle version de la gem :
+
+TODO
+
+## Licence
+
+Le code source et la gem sont ouverts sous la licence [MIT](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,22 @@
+begin
+  require 'bundler/setup'
+rescue LoadError
+  puts 'You must `gem install bundler` and `bundle install` to run rake tasks'
+end
+
+require 'rdoc/task'
+
+RDoc::Task.new(:rdoc) do |rdoc|
+  rdoc.rdoc_dir = 'rdoc'
+  rdoc.title    = 'Dsfr::Components'
+  rdoc.options << '--line-numbers'
+  rdoc.rdoc_files.include('README.md')
+  rdoc.rdoc_files.include('lib/**/*.rb')
+end
+
+APP_RAKEFILE = File.expand_path("spec/dummy/Rakefile", __dir__)
+load 'rails/tasks/engine.rake'
+
+load 'rails/tasks/statistics.rake'
+
+require 'bundler/gem_tasks'

data/app/components/dsfr_component/accordion_component/section_component.html.erb

@@ -0,0 +1,11 @@
+<%= tag.div(id: id(suffix: 'section'), **html_attributes) do %>
+  <div class="govuk-accordion__section-header">
+    <%= content_tag(heading_level, class: "govuk-accordion__section-heading") do %>
+      <%= tag.span(heading_content, id: id, class: "govuk-accordion__section-button", aria: { expanded: expanded?, controls: id(suffix: 'content') }) %>
+    <% end %>
+    <% if summary_content.present? %>
+      <%= tag.div(summary_content, id: id(suffix: 'summary'), class: %w(govuk-accordion__section-summary govuk-body)) %>
+    <% end %>
+  </div>
+  <%= tag.div(content, id: id(suffix: 'content'), class: %w(govuk-accordion__section-content), aria: { labelledby: id }) %>
+<% end %>

data/app/components/dsfr_component/accordion_component/section_component.rb

@@ -0,0 +1,39 @@
+class DsfrComponent::AccordionComponent::SectionComponent < DsfrComponent::Base
+  attr_reader :heading_text, :summary_text, :expanded, :heading_level
+
+  renders_one :heading_html
+  renders_one :summary_html
+
+  alias_method :expanded?, :expanded
+
+  def initialize(heading_text:, summary_text:, expanded:, heading_level:, classes: [], html_attributes: {})
+    @heading_text  = heading_text
+    @summary_text  = summary_text
+    @expanded      = expanded
+    @heading_level = heading_level
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def id(suffix: nil)
+    # generate a random number if we don't have heading_text to avoid attempting
+    # to parameterize a potentially-huge chunk of HTML
+    @prefix ||= heading_text&.parameterize || SecureRandom.hex(4)
+
+    [@prefix, suffix].compact.join('-')
+  end
+
+  def heading_content
+    heading_html || heading_text || fail(ArgumentError, "no heading_text or heading_html")
+  end
+
+  def summary_content
+    summary_html || summary_text
+  end
+
+private
+
+  def default_attributes
+    { class: class_names("govuk-accordion__section", "govuk-accordion__section--expanded" => expanded?).split }
+  end
+end

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

@@ -0,0 +1,5 @@
+<%= tag.div(**html_attributes) do %>
+  <% sections.each do |section| %>
+    <%= section %>
+  <% end %>
+<% end %>

data/app/components/dsfr_component/accordion_component.rb

@@ -0,0 +1,33 @@
+class DsfrComponent::AccordionComponent < DsfrComponent::Base
+  renders_many :sections, ->(heading_text: nil, summary_text: nil, expanded: false, classes: [], html_attributes: {}, &block) do
+    DsfrComponent::AccordionComponent::SectionComponent.new(
+      classes: classes,
+      expanded: expanded,
+      heading_level: heading_level,      # set once at parent level, passed to all children
+      html_attributes: html_attributes,
+      summary_text: summary_text,
+      heading_text: heading_text,
+      &block
+    )
+  end
+
+  attr_reader :id, :heading_level
+
+  def initialize(heading_level: 2, classes: [], html_attributes: {})
+    @heading_level = heading_tag(heading_level)
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-accordion), data: { module: 'govuk-accordion' } }
+  end
+
+  def heading_tag(level)
+    fail(ArgumentError, "heading_level must be 1-6") unless level.in?(1..6)
+
+    %(h#{level})
+  end
+end

data/app/components/dsfr_component/alert_component.rb

@@ -0,0 +1,22 @@
+class DsfrComponent::AlertComponent < DsfrComponent::Base
+  attr_reader :title
+
+  def initialize(title:, classes: [], html_attributes: {})
+    @title = title
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(**html_attributes) do
+      tag.h3(class: "fr-alert__title") { title }
+      tag.p { content }
+    end
+  end
+
+private
+
+  def default_attributes
+    { class: %w(fr-alert) }
+  end
+end

data/app/components/dsfr_component/back_link_component.rb

@@ -0,0 +1,24 @@
+class DsfrComponent::BackLinkComponent < DsfrComponent::Base
+  attr_reader :text, :href
+
+  def initialize(href:, text: config.default_back_link_text, classes: [], html_attributes: {})
+    @text = text
+    @href = href
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    link_to(link_content, href, **html_attributes)
+  end
+
+private
+
+  def link_content
+    content || text || fail(ArgumentError, "no text or content")
+  end
+
+  def default_attributes
+    { class: %w(govuk-back-link) }
+  end
+end

data/app/components/dsfr_component/base.rb

@@ -0,0 +1,28 @@
+class DsfrComponent::Base < ViewComponent::Base
+  using HTMLAttributesUtils
+
+  attr_reader :html_attributes
+
+  delegate :config, to: Dsfr::Components
+
+  def initialize(classes:, html_attributes:)
+    if classes.nil?
+      Rails.logger.warn("classes is nil, if no custom classes are needed omit the param")
+
+      classes = []
+    end
+    # FIXME: remove first merge when we deprecate classes
+    #
+    # This step only needs to be here while we still accept classes:, now
+    # we're using html_attributes_utils we can start to move towards
+    # supporting html_attributes: { class: 'xyz' } over taking them
+    # separately
+
+    @html_attributes = default_attributes
+      .deep_merge_html_attributes({ class: classes })
+      .deep_merge_html_attributes(html_attributes)
+      .deep_tidy_html_attributes
+
+    super
+  end
+end

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

@@ -0,0 +1,7 @@
+<%= tag.div(**html_attributes) do %>
+  <ol class="govuk-breadcrumbs__list">
+    <% @breadcrumbs.each do |link| %>
+      <%= link %>
+    <% end %>
+  </ol>
+<% end %>

data/app/components/dsfr_component/breadcrumbs_component.rb

@@ -0,0 +1,51 @@
+class DsfrComponent::BreadcrumbsComponent < DsfrComponent::Base
+  attr_reader :breadcrumbs, :hide_in_print, :collapse_on_mobile
+
+  def initialize(breadcrumbs:,
+                 hide_in_print: config.default_breadcrumbs_hide_in_print,
+                 collapse_on_mobile: config.default_breadcrumbs_collapse_on_mobile,
+                 classes: [],
+                 html_attributes: {})
+
+    @breadcrumbs        = build_list(breadcrumbs)
+    @hide_in_print      = hide_in_print
+    @collapse_on_mobile = collapse_on_mobile
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+private
+
+  def default_attributes
+    {
+      class: class_names(
+        "govuk-breadcrumbs",
+        "govuk-!-display-none-print" => hide_in_print,
+        "govuk-breadcrumbs--collapse-on-mobile" => collapse_on_mobile
+      ).split
+    }
+  end
+
+  def build_list(breadcrumbs)
+    case breadcrumbs
+    when Array
+      breadcrumbs.map { |item| build_list_item(item) }
+    when Hash
+      breadcrumbs.map { |text, link| build_list_item(text, link) }
+    else
+      fail(ArgumentError, "breadcrumbs must be an array or hash")
+    end
+  end
+
+  def build_list_item(text, link = nil)
+    if link.present?
+      list_item { link_to(text, link, class: "govuk-breadcrumbs__link") }
+    else
+      list_item(aria: { current: "page" }) { text.to_s }
+    end
+  end
+
+  def list_item(html_attributes = {}, &block)
+    tag.li(class: "govuk-breadcrumbs__list-item", **html_attributes, &block)
+  end
+end

data/app/components/dsfr_component/cookie_banner_component/message_component.rb

@@ -0,0 +1,62 @@
+class DsfrComponent::CookieBannerComponent::MessageComponent < DsfrComponent::Base
+  attr_reader :heading_text, :text, :hidden, :role
+
+  renders_many :actions
+  renders_one :heading_html
+
+  def initialize(heading_text: nil, text: nil, hidden: false, role: nil, classes: [], html_attributes: {})
+    @heading_text = heading_text
+    @text         = text
+    @hidden       = hidden
+    @role         = role
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.div(role: role, hidden: hidden, **html_attributes) do
+      safe_join([
+        tag.div(class: "govuk-grid-row") do
+          tag.div(class: "govuk-grid-column-two-thirds") { safe_join([heading_element, message_element]) }
+        end,
+        actions_element
+      ])
+    end
+  end
+
+private
+
+  def default_attributes
+    { class: %w(govuk-cookie-banner__message govuk-width-container) }
+  end
+
+  def heading_element
+    return if heading_content.blank?
+
+    tag.h2(heading_content, class: %w(govuk-cookie-banner__heading govuk-heading-m))
+  end
+
+  def heading_content
+    heading_html || heading_text
+  end
+
+  def message_element
+    tag.div(message_content, class: "govuk-cookie-banner__content")
+  end
+
+  def message_content
+    content || wrap_in_p(text) || fail(ArgumentError, "no text or content")
+  end
+
+  def wrap_in_p(message_text)
+    return if message_text.blank?
+
+    tag.p(message_text, class: "govuk-body")
+  end
+
+  def actions_element
+    return if actions.none?
+
+    tag.div(class: "fr-btn-group") { safe_join(actions) }
+  end
+end

data/app/components/dsfr_component/cookie_banner_component.rb

@@ -0,0 +1,35 @@
+module DsfrComponent
+  class CookieBannerComponent < DsfrComponent::Base
+    renders_many :messages, "DsfrComponent::CookieBannerComponent::MessageComponent"
+
+    attr_accessor :aria_label, :hidden, :hide_in_print
+
+    def initialize(
+      aria_label: config.default_cookie_banner_aria_label,
+      hidden: false,
+      hide_in_print: config.default_cookie_banner_hide_in_print,
+      classes: [],
+      html_attributes: {}
+    )
+      @aria_label    = aria_label
+      @hidden        = hidden
+      @hide_in_print = hide_in_print
+
+      super(classes: classes, html_attributes: html_attributes)
+    end
+
+    def call
+      tag.div(role: "region", aria: { label: aria_label }, data: { nosnippet: true }, hidden: hidden, **html_attributes) do
+        safe_join(messages)
+      end
+    end
+
+  private
+
+    def default_attributes
+      {
+        class: class_names("govuk-cookie-banner", "govuk-!-display-none-print" => hide_in_print).split
+      }
+    end
+  end
+end

data/app/components/dsfr_component/details_component.rb

@@ -0,0 +1,42 @@
+class DsfrComponent::DetailsComponent < DsfrComponent::Base
+  attr_reader :summary_text, :text, :id, :open
+
+  renders_one :summary_html
+
+  def initialize(summary_text: nil, text: nil, classes: [], id: nil, open: nil, html_attributes: {})
+    @summary_text = summary_text
+    @text         = text
+    @id           = id
+    @open         = open
+
+    super(classes: classes, html_attributes: html_attributes)
+  end
+
+  def call
+    tag.details(data: { module: "govuk-details" }, id: id, open: open, **html_attributes) do
+      safe_join([summary, description])
+    end
+  end
+
+private
+
+  def summary
+    tag.summary(class: "govuk-details__summary") do
+      tag.span(summary_content, class: "govuk-details__summary-text")
+    end
+  end
+
+  def summary_content
+    summary_html || summary_text
+  end
+
+  def description
+    tag.div(class: "govuk-details__text") do
+      content.presence || text
+    end
+  end
+
+  def default_attributes
+    { class: %w(govuk-details) }
+  end
+end

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

@@ -0,0 +1,49 @@
+<%= tag.footer(role: 'contentinfo', **html_attributes) do %>
+  <%= tag.div(**container_html_attributes) do %>
+    <% if navigation.present? %>
+      <div class="govuk-footer__navigation">
+        <%= navigation %>
+      </div>
+
+      <hr class="govuk-footer__section-break">
+    <% end %>
+
+    <%= tag.div(class: meta_classes, **meta_html_attributes) do %>
+      <% if meta.present? %>
+        <%= meta %>
+      <% else %>
+        <div class="govuk-footer__meta-item govuk-footer__meta-item--grow">
+          <% if meta_items.any? %>
+            <h2 class="govuk-visually-hidden"><%= meta_items_title %></h2>
+
+            <ul class="govuk-footer__inline-list">
+              <% @meta_items.each do |hyperlink| %>
+                <li class="govuk-footer__inline-list-item">
+                  <%= hyperlink %>
+                </li>
+              <% end %>
+            </ul>
+          <% end %>
+
+          <% if meta_licence.nil? %>
+            <svg aria-hidden="true" focusable="false" class="govuk-footer__licence-logo" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 483.2 195.7" height="17" width="41">
+              <path fill="currentColor" d="M421.5 142.8V.1l-50.7 32.3v161.1h112.4v-50.7zm-122.3-9.6A47.12 47.12 0 0 1 221 97.8c0-26 21.1-47.1 47.1-47.1 16.7 0 31.4 8.7 39.7 21.8l42.7-27.2A97.63 97.63 0 0 0 268.1 0c-36.5 0-68.3 20.1-85.1 49.7A98 98 0 0 0 97.8 0C43.9 0 0 43.9 0 97.8s43.9 97.8 97.8 97.8c36.5 0 68.3-20.1 85.1-49.7a97.76 97.76 0 0 0 149.6 25.4l19.4 22.2h3v-87.8h-80l24.3 27.5zM97.8 145c-26 0-47.1-21.1-47.1-47.1s21.1-47.1 47.1-47.1 47.2 21 47.2 47S123.8 145 97.8 145" />
+            </svg>
+
+            <%= tag.span(default_licence, class: "govuk-footer__licence-description") %>
+          <% elsif meta_licence.present? %>
+            <%= tag.span(meta_licence, class: "govuk-footer__licence-description") %>
+          <% end %>
+
+          <% if meta_content.present? %>
+            <div class="govuk-footer__meta-custom">
+              <%= meta_content %>
+            </div>
+          <% end %>
+        </div>
+
+        <%= tag.div(copyright, class: "govuk-footer__meta-item") %>
+      <% end %>
+    <% end %>
+  <% end %>
+<% end %>