govuk-components 0.2.0 → 0.7.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e7a162599cbf3c6116fa24104656807091c3f5c985714b23c47478cb97342afd
-  data.tar.gz: 757e782ada4df0816c0aa1f6446717df7a7cd8c3aa2a9f12c5f386d0efe352ed
+  metadata.gz: 90eede10baca630edcdc6999469783ab08332a02d7c03e7ca6b27bef6fb8e328
+  data.tar.gz: bfb02cc50490be25acd650a28e2deda67841c5719901db3869919c4d08ac2337
 SHA512:
-  metadata.gz: 927d728bb2a1109858f876714b5946c9a2a642d349eb4713ae1081aedfe7ff3dd20cabaa6014f54df93b71299810273039f53b9eda2e3bb566756cb65bb12cf5
-  data.tar.gz: 3a53b1fa204946ea8ec7321a9b8232ae7fd8c6bb5cab9c962e712e20c958cbd9a4ec2c9fb7ada675711d2d62a2d140147baee84e0ca327f2423cea624597c5b1
+  metadata.gz: bc3c98d97c246ee149dc10856a90214db31951b0d2184b16de886fa62704e9aa32d0e81df90bbc5cbb9763e19120f1be8697d773fcde996a60da17d1615f612e
+  data.tar.gz: 4a86ca1483dc684ce18163abe7b5ff1b13a22383b3b77fb17e57251ab4d03e77553c83c0a3443378e353203a843d1a675088a867e481fad0e0357e57310eb8ae

data/README.md

@@ -1,45 +1,64 @@
-> **Note!** This repository is very new and not yet fully built and documented. Breaking changes can happen at any time. Please check the [components tracker](https://github.com/DFE-Digital/govuk-components/issues/18) to see progress.
+**This gem is under heavy development and the API is likely to change.**
 
 # GOV.UK Components
 
 [![Build Status](https://travis-ci.com/DFE-Digital/govuk-components.svg?branch=master)](https://travis-ci.com/DFE-Digital/govuk-components)
 
-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/govuk_publishing_components) library and is built with Github's [ViewComponent](https://github.com/github/view_component) framework.  ViewComponent is [supported natively in Rails 6.1](https://edgeguides.rubyonrails.org/layouts_and_rendering.html#rendering-objects).
+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/govuk_publishing_components) library and is built with Github's [ViewComponent](https://github.com/github/view_component) framework.  ViewComponent will be [supported natively in Rails 6.1](https://edgeguides.rubyonrails.org/layouts_and_rendering.html#rendering-objects).
 
 ## What's included
 
-The gem will include the following components and helpers, [track their progress](https://github.com/DFE-Digital/govuk-components/issues/18):
-
-### Components
-
-* Accordion ✔️
-* Back link ✔️
-* Breadcrumbs ✔️
-* Details ✔️
-* Footer ✔️
-* Header ✔️
-* Inset text ✔️
-* Panel ✔️
-* Phase banner ✔️
-* Start now button ✔️
-* Summary list ✔️
-* Tabs ✔️
-* Tag ✔️
-* Warning text ✔️
+| Component name                                                               | Helper                      |
+| --------------                                                               | ------                      |
+| [Accordion](app/components/govuk_component/accordion.rb)                     | `govuk_accordion`           |
+| [Back link](app/components/govuk_component/back_link.rb)                     | `govuk_back_link`           |
+| [Breadcrumbs](app/components/govuk_component/breadcrumbs.rb)                 | `govuk_breadcrumbs`         |
+| [Details](app/components/govuk_component/details.rb)                         | `govuk_details`             |
+| [Footer](app/components/govuk_component/footer.rb)                           | `govuk_footer`              |
+| [Header](app/components/govuk_component/header.rb)                           | `govuk_header`              |
+| [Inset text](app/components/govuk_component/inset_text.rb)                   | `govuk_inset_text`          |
+| [Notification banner](app/components/govuk_component/notification_banner.rb) | `govuk_notification_banner` |
+| [Panel](app/components/govuk_component/panel.rb)                             | `govuk_panel`               |
+| [Phase banner](app/components/govuk_component/phase_banner.rb)               | `govuk_phase_banner`        |
+| [Start now button](app/components/govuk_component/start_now_button.rb)       | `govuk_start_now_button`    |
+| [Summary list](app/components/govuk_component/summary_list.rb)               | `govuk_summary_list`        |
+| [Tabs](app/components/govuk_component/tabs.rb)                               | `govuk_tabs`                |
+| [Tag](app/components/govuk_component/tag.rb)                                 | `govuk_tag`                 |
+| [Warning text](app/components/govuk_component/warning.rb)                    | `govuk_warning`             |
 
 ### Helpers
 
-* `#govuk_link_to` ✔️
-* `#govuk_mail_to` ✔️
-* `#govuk_button_to` ✔️
-* `#govuk_back_to_top_link` ✔️
-* Skip link ✔️
+* `#govuk_link_to`
+* `#govuk_mail_to`
+* `#govuk_button_to`
+* `#govuk_back_to_top_link`
+* `#govuk_skip_link`
+
+## Example use
+
+This library allows components to be rendered with Rails' `render` method or via the provided helpers. Here we'll use the `govuk_accordion` to render an accordion.
+
+```erb
+<%= govuk_accordion(id: 'def234') do |accordion| %>
+  <%= accordion.add_section(title: 'Section 1') do %>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <% end %>
+  <%= accordion.add_section(title: 'Section 2') do %>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <% end %>
+  <%= accordion.add_section(title: 'Section 3') do %>
+    <p class="govuk-body">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>
+  <% end %>
+<% end %>
+```
+
+Here is the rendered accordion.
 
-## Examples
+![Accordion preview](docs/images/accordion.png)
 
 For examples on usage see the [guide page](https://dfe-digital.github.io/govuk-components/).
 
-## Usage
+## Setup
 
 Add this line to your `config/application.rb`:
 

data/app/components/govuk_component/base.rb

@@ -7,10 +7,10 @@ class GovukComponent::Base < ViewComponent::Base
     @html_attributes = html_attributes
   end
 
-  # Redirect #name to #slot(:name) to make building components
+  # Redirect #add_name to #slot(:name) to make building components
   # with slots feel more DSL-like
   def self.wrap_slot(name)
-    define_method(name) do |*args, **kwargs, &block|
+    define_method(%(add_#{name})) do |*args, **kwargs, &block|
       self.slot(name, *args, **kwargs, &block)
     end
   end

data/app/components/govuk_component/footer.rb

@@ -29,7 +29,7 @@ private
   end
 
   def default_licence
-    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/")
+    link = link_to("Open Government Licence v3.0", "https://www.nationalarchives.gov.uk/doc/open-government-licence/version/3/", class: %w(govuk-footer__link))
 
     raw(%(All content is available under the #{link}, except where otherwise stated))
   end

data/app/components/govuk_component/notification_banner.html.erb

@@ -0,0 +1,20 @@
+<%= tag.div(class: classes.append(success_class).compact, **html_attributes, role: "region", aria: { labelledby: title_id }, data: data_params) do %>
+  <div class="govuk-notification-banner__header">
+    <%= content_tag(title_tag, class: "govuk-notification-banner__title", id: title_id) do %>
+      <%= title %>
+    <% end %>
+  </div>
+  <div class="govuk-notification-banner__content">
+    <% headings.each do |heading| %>
+      <p class="govuk-notification-banner__heading">
+
+        <%= heading.text %>.
+        <% if heading.link_target && heading.link_text %>
+          <%= link_to(heading.link_text, heading.link_target, class: "govuk-notification-banner__link") %>.
+        <% end %>
+      </p>
+    <% end %>
+
+    <%= content %>
+  </div>
+<% end %>

data/app/components/govuk_component/notification_banner.rb

@@ -0,0 +1,58 @@
+class GovukComponent::NotificationBanner < GovukComponent::Base
+  attr_reader :title, :title_id, :success, :title_heading_level, :disable_auto_focus
+
+  include ViewComponent::Slotable
+  with_slot :heading, collection: true, class_name: 'Heading'
+
+  def initialize(title:, success: false, title_heading_level: 2, title_id: "govuk-notification-banner-title", disable_auto_focus: nil, classes: [], html_attributes: {})
+    super(classes: classes, html_attributes: html_attributes)
+
+    @title               = title
+    @title_id            = title_id
+    @success             = success
+    @title_heading_level = title_heading_level
+    @disable_auto_focus  = disable_auto_focus
+  end
+
+  def success_class
+    %(govuk-notification-banner--success) if success?
+  end
+
+  def success?
+    @success
+  end
+
+  def render?
+    headings.any?
+  end
+
+  def title_tag
+    fail "title_heading_level must be a number between 1 and 6" unless title_heading_level.is_a?(Integer) && title_heading_level.in?(1..6)
+
+    "h#{title_heading_level}"
+  end
+
+  class Heading < ViewComponent::Slot
+    attr_accessor :text, :link_target, :link_text
+
+    def initialize(text:, link_text: nil, link_target: nil)
+      @text = text
+      @link_text = link_text
+      @link_target = link_target
+    end
+
+    def default_classes
+      %w(govuk-notification-banner__heading)
+    end
+  end
+
+private
+
+  def default_classes
+    %w(govuk-notification-banner)
+  end
+
+  def data_params
+    { "module" => "govuk-notification-banner", "disable-auto-focus" => disable_auto_focus }.compact
+  end
+end

data/app/helpers/govuk_components_helper.rb

@@ -1,4 +1,4 @@
-module GovukComponentHelper
+module GovukComponentsHelper
   {
     govuk_accordion: 'GovukComponent::Accordion',
     govuk_back_link: 'GovukComponent::BackLink',
@@ -7,6 +7,7 @@ module GovukComponentHelper
     govuk_footer: 'GovukComponent::Footer',
     govuk_header: 'GovukComponent::Header',
     govuk_inset_text: 'GovukComponent::InsetText',
+    govuk_notification_banner: 'GovukComponent::NotificationBanner',
     govuk_panel: 'GovukComponent::Panel',
     govuk_phase_banner: 'GovukComponent::PhaseBanner',
     govuk_start_now_button: 'GovukComponent::StartNowButton',
@@ -25,4 +26,4 @@ module GovukComponentHelper
   end
 end
 
-ActiveSupport.on_load(:action_view) { include GovukComponentHelper }
+ActiveSupport.on_load(:action_view) { include GovukComponentsHelper }

data/app/helpers/govuk_link_helper.rb

@@ -1,14 +1,26 @@
 module GovukLinkHelper
-  def govuk_link_to(*args, **kwargs)
-    link_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs))
+  def govuk_link_to(*args, button: false, **kwargs, &block)
+    link_to(*args, **inject_class(kwargs, class_name: link_class(button)), &block)
   end
 
-  def govuk_mail_to(*args, **kwargs)
-    mail_to(*args, **{ class: 'govuk-link' }.deep_merge(kwargs))
+  def govuk_mail_to(*args, button: false, **kwargs, &block)
+    mail_to(*args, **inject_class(kwargs, class_name: link_class(button)), &block)
   end
 
   def govuk_button_to(*args, **kwargs)
-    button_to(*args, **{ class: 'govuk-button' }.deep_merge(kwargs))
+    button_to(*args, **inject_class(kwargs, class_name: 'govuk-button'))
+  end
+
+private
+
+  def inject_class(attributes, class_name:)
+    attributes.with_indifferent_access.tap do |attrs|
+      attrs[:class] = Array.wrap(attrs[:class]).prepend(class_name)
+    end
+  end
+
+  def link_class(button)
+    button ? 'govuk-button' : 'govuk-link'
   end
 end
 

data/lib/govuk/components/version.rb

@@ -1,5 +1,5 @@
 module Govuk
   module Components
-    VERSION = '0.2.0'
+    VERSION = '0.7.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 0.2.0
+  version: 0.7.0
 platform: ruby
 authors:
 - DfE developers
-autorequire: 
+autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-12 00:00:00.000000000 Z
+date: 2020-12-08 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -30,34 +30,20 @@ dependencies:
     - - ">="
       - !ruby/object:Gem::Version
         version: 6.0.3
-- !ruby/object:Gem::Dependency
-  name: slim-rails
-  requirement: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.2'
-  type: :runtime
-  prerelease: false
-  version_requirements: !ruby/object:Gem::Requirement
-    requirements:
-    - - "~>"
-      - !ruby/object:Gem::Version
-        version: '3.2'
 - !ruby/object:Gem::Dependency
   name: view_component
   requirement: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.18.1
+        version: 2.22.1
   type: :runtime
   prerelease: false
   version_requirements: !ruby/object:Gem::Requirement
     requirements:
     - - "~>"
       - !ruby/object:Gem::Version
-        version: 2.18.1
+        version: 2.22.1
 - !ruby/object:Gem::Dependency
   name: sqlite3
   requirement: !ruby/object:Gem::Requirement
@@ -153,6 +139,8 @@ files:
 - app/components/govuk_component/header.html.erb
 - app/components/govuk_component/header.rb
 - app/components/govuk_component/inset_text.rb
+- app/components/govuk_component/notification_banner.html.erb
+- app/components/govuk_component/notification_banner.rb
 - app/components/govuk_component/panel.html.erb
 - app/components/govuk_component/panel.rb
 - app/components/govuk_component/phase_banner.html.erb
@@ -178,11 +166,11 @@ files:
 - lib/govuk/components/engine.rb
 - lib/govuk/components/version.rb
 - lib/tasks/govuk/components_tasks.rake
-homepage: https://www.github.com/dfe-digital
+homepage: https://github.com/DFE-Digital/govuk-components
 licenses:
 - MIT
 metadata: {}
-post_install_message: 
+post_install_message:
 rdoc_options: []
 require_paths:
 - lib
@@ -198,7 +186,7 @@ required_rubygems_version: !ruby/object:Gem::Requirement
       version: '0'
 requirements: []
 rubygems_version: 3.1.2
-signing_key: 
+signing_key:
 specification_version: 4
 summary: Lightweight set of reusable GOV.UK Design System components
 test_files: []