govuk-components 0.3.0 → 0.8.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 1d957c212c5a58ad13e5e6296200d65d1d5571ede1ad3a466a2d799bd33cab59
-  data.tar.gz: 4bb34fa91578e1d5fa59f7a0f80fb1d363c0dbeb87979328c64c35d83ca0c471
+  metadata.gz: 8778178d28b737c89fedbcaf30738c77c33f38a4826ea907327b80c38f33a434
+  data.tar.gz: 356e6a1bdfbeec1f3d602707e8773f500d86bad394ab6ebef6f79a58b42bc8b2
 SHA512:
-  metadata.gz: '080f8799ba56540bd4ecd4d7e038f1c413a6c12955bf10a87ba547d4cd120196a0e2a95ad1a4f75e8177cf467044d39a7dc4641c280480c1bef691c036818f26'
-  data.tar.gz: 61957c3b0aeb5fcca7a420445ad5ecc3013d5a42b054c291898d276505322e5cc057efd7d92c860dad20da2f3f0cd4360586bba06939f62f4ad6b1f2b9f6cf82
+  metadata.gz: 7d36cf6f689c2c5890bd7ef3f63c71214f111400637fb72578dc42f6bfb1aa253658ab46fe8737c1c8e96d363e57d871a6cacc998761dc907c76ebdf7214bc8b
+  data.tar.gz: 3d5365cf1fa97c3aa62ebed22c90d87a309f9a080f44b9839f24e3face33fd056a47194102754e8ddc857fbb24b58971acf88f9d323db5c64d056daf254c85dc

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,59 @@
+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'
+  wrap_slot(: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

@@ -7,6 +7,7 @@ module GovukComponentsHelper
     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',

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.3.0'
+    VERSION = '0.8.0'
   end
 end

metadata

@@ -1,14 +1,14 @@
 --- !ruby/object:Gem::Specification
 name: govuk-components
 version: !ruby/object:Gem::Version
-  version: 0.3.0
+  version: 0.8.0
 platform: ruby
 authors:
 - DfE developers
 autorequire:
 bindir: bin
 cert_chain: []
-date: 2020-09-16 00:00:00.000000000 Z
+date: 2020-12-10 00:00:00.000000000 Z
 dependencies:
 - !ruby/object:Gem::Dependency
   name: rails
@@ -36,14 +36,14 @@ dependencies:
     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
@@ -139,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
@@ -164,7 +166,7 @@ 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: {}