govuk_publishing_components 8.1.0 → 8.2.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 575de4ef4fef97453f60afc3d3ab388997efd80f10d76c9b7ee5860ca6423278
-  data.tar.gz: 2a418743b25fa77ef0d553025f0d757642d4d2cf69ad6817402e77087f638894
+  metadata.gz: e88c86057a77da6fc577ecf2b7c95a5c37fdc6627335d6798838390be5e74658
+  data.tar.gz: 63dd6a60c53f6c03538e33a3880c88336a48978a92673d19e9e1f5db9a5b81ab
 SHA512:
-  metadata.gz: 619fc4f95918f3f296d8981e9cbbb7ed3bccc7b56faa402e5b844c3b1057044ca5274b6ca7b5e684adc091e86f8a5a416eb50a4d86cb90e52f48b7f554b49f4b
-  data.tar.gz: a46ec8e3951691469c222b91047967ee2c2822367ba04aae67dea3b68b34fe7d6b0cb65f0b6f3ce91db50c77cd1266eee94624e36b429f480c7fe82c7ee3392d
+  metadata.gz: 2df4fc9c44e66544eb54b8ccfab24989833888d9b82fca80f620cac81799a1ce8522ba9f1a59bb937469a876fa1005d4fde54c942fe563629ec447a491500162
+  data.tar.gz: 8c1dd8ccdebf70b01f695bad66b8f07532bf69d6c4914c7cc516cbaddcd169f5903015b39c41ed024dd7fd0b1363f97f972159d1a2bf6b6930d943dcfcdc03a7

data/app/assets/stylesheets/component_guide/application.scss

@@ -106,6 +106,12 @@ $border-color: #ccc;
   }
 }
 
+.component-output {
+  > pre {
+    max-height: 200px;
+  }
+}
+
 .component-guide-preview {
   &.direction-rtl {
     direction: rtl;
@@ -116,6 +122,10 @@ $border-color: #ccc;
     background-color: $govuk-blue;
   }
 
+  &.component-output {
+    padding: 0;
+  }
+
   padding: ($gutter * 1.5) $gutter $gutter;
   border: 1px solid $border-colour;
   position: relative;

data/app/assets/stylesheets/govuk_publishing_components/_all_components.scss

@@ -14,20 +14,24 @@
 @import "components/button";
 @import "components/document-list";
 @import "components/error-summary";
+@import "components/feedback";
 @import "components/fieldset";
 @import "components/heading";
 @import "components/input";
+@import "components/inverse-header";
 @import "components/label";
+@import "components/lead-paragraph";
+@import "components/phase-banner";
+@import "components/previous-and-next-navigation";
 @import "components/radio";
 @import "components/related-navigation";
 @import "components/search";
-@import "components/step-by-step-nav";
+@import "components/share-links";
 @import "components/step-by-step-nav-header";
 @import "components/step-by-step-nav-related";
+@import "components/step-by-step-nav";
 @import "components/subscription-links";
-@import "components/translation-nav";
-@import "components/feedback";
-@import "components/inverse-header";
 @import "components/success-alert";
-@import "components/share-links";
 @import "components/taxonomy-navigation";
+@import "components/title";
+@import "components/translation-nav";

data/app/assets/stylesheets/govuk_publishing_components/_all_components_print.scss

@@ -7,6 +7,7 @@
 @import "typography";
 @import "colours";
 
-@import "components/print/step-by-step-nav";
-@import "components/print/step-by-step-nav-header";
 @import "components/print/feedback";
+@import "components/print/step-by-step-nav-header";
+@import "components/print/step-by-step-nav";
+@import "components/print/title";

data/app/assets/stylesheets/govuk_publishing_components/components/_lead-paragraph.scss

@@ -0,0 +1,12 @@
+@import "mixins/margins";
+
+.gem-c-lead-paragraph {
+  @include core-24;
+  @include responsive-bottom-margin;
+  // Ensure the text has a line-length of around 60 characters
+  max-width: 30em;
+}
+
+.gem-c-lead-paragraph--inverse {
+  color: $white;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_phase-banner.scss

@@ -0,0 +1,7 @@
+@import "mixins/touch-friendly-links";
+@import "design-patterns/alpha-beta";
+
+.gem-c-phase-banner {
+  @include phase-banner;
+  @include touch-friendly-links;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_previous-and-next-navigation.scss

@@ -0,0 +1,77 @@
+.gem-c-pagination {
+  display: block;
+  margin-top: $gutter;
+  margin-bottom: $gutter;
+  margin-left: -$gutter-half;
+  margin-right: -$gutter-half;
+}
+
+.gem-c-pagination__list {
+  margin: 0;
+  padding: 0;
+
+  &:after {
+    content: "";
+    display: block;
+    clear: both;
+  }
+}
+
+.gem-c-pagination__item {
+  @include core-16($line-height: (20 / 16));
+  list-style: none;
+  text-align: right;
+  margin: 0;
+  padding: 0;
+}
+
+.gem-c-pagination__link {
+  display: block;
+  padding: $gutter-half;
+  text-decoration: none;
+
+  &:visited {
+    color: $link-colour;
+  }
+
+  &:hover,
+  &:active {
+    background-color: $canvas-colour;
+  }
+}
+
+.gem-c-pagination__link-title {
+  @include core-27($line-height: (33.75 / 27));
+  display: block;
+}
+
+.gem-c-pagination__item--previous {
+  text-align: left;
+
+  @include media(tablet) {
+    float: left;
+    width: 50%;
+  }
+}
+
+.gem-c-pagination__item--next {
+  text-align: right;
+
+  @include media(tablet) {
+    float: right;
+    width: 50%;
+  }
+}
+
+.gem-c-pagination__link-icon {
+  display: inline-block;
+  margin-bottom: 1px;
+  height: .482em;
+  width: .63em;
+}
+
+.gem-c-pagination__link-label {
+  display: inline-block;
+  margin-top: 0.1em;
+  text-decoration: underline;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_title.scss

@@ -0,0 +1,46 @@
+.gem-c-title {
+  @include responsive-top-margin;
+}
+
+.gem-c-title--bottom-margin {
+  @include responsive-bottom-margin;
+}
+
+.gem-c-title--inverse {
+  color: $white;
+
+  .gem-c-title__context {
+    color: inherit;
+  }
+}
+
+.gem-c-title__context {
+  @include core-24;
+  color: $secondary-text-colour;
+}
+
+.gem-c-title__context-link {
+  text-decoration: none;
+
+  &:link,
+  &:visited {
+    color: inherit;
+
+    &:focus {
+      color: $black;
+    }
+  }
+
+  &:hover,
+  &:focus {
+    text-decoration: underline;
+  }
+}
+
+.gem-c-title__text {
+  @include bold-48;
+}
+
+.gem-c-title__text--long {
+  @include bold-36;
+}

data/app/assets/stylesheets/govuk_publishing_components/components/_translation-nav.scss

@@ -1,3 +1,5 @@
+@import "mixins/margins";
+
 .gem-c-translation-nav {
   @include responsive-top-margin;
   @include core-16;

data/app/assets/stylesheets/govuk_publishing_components/components/print/_title.scss

@@ -0,0 +1,7 @@
+.gem-c-title__context {
+  margin: 0;
+}
+
+.gem-c-title__text {
+  margin-top: 0;
+}

data/app/controllers/govuk_publishing_components/component_guide_controller.rb

@@ -3,17 +3,17 @@ module GovukPublishingComponents
     append_view_path File.join(Rails.root, "app", "views", GovukPublishingComponents::Config.component_directory_name)
 
     def index
-      @component_docs = component_documentation_resolver.all
-      @gem_component_docs = gem_component_documentation_resolver.all
+      @component_docs = component_docs.all
+      @gem_component_docs = gem_component_docs.all
     end
 
     def show
-      @component_doc = component_documentation_resolver.get(params[:component])
+      @component_doc = component_docs.get(params[:component])
       @guide_breadcrumbs = [index_breadcrumb, component_breadcrumb(@component_doc)]
     end
 
     def example
-      @component_doc = component_documentation_resolver.get(params[:component])
+      @component_doc = component_docs.get(params[:component])
       @component_example = @component_doc.examples.find { |f| f.id == params[:example] }
       @guide_breadcrumbs = [
                              index_breadcrumb,
@@ -26,7 +26,7 @@ module GovukPublishingComponents
 
     def preview
       @component_examples = []
-      @component_doc = component_documentation_resolver.get(params[:component])
+      @component_doc = component_docs.get(params[:component])
       @preview = true
 
       if params[:example].present?
@@ -38,12 +38,12 @@ module GovukPublishingComponents
 
   private
 
-    def component_documentation_resolver
-      @component_documentation_resolver ||= ComponentDocResolver.new
+    def component_docs
+      @component_docs ||= ComponentDocs.new
     end
 
-    def gem_component_documentation_resolver
-      @gem_component_documentation_resolver ||= ComponentDocResolver.new(gem_components: true)
+    def gem_component_docs
+      @gem_component_docs ||= ComponentDocs.new(gem_components: true)
     end
 
     def index_breadcrumb

data/app/models/govuk_publishing_components/component_doc.rb

@@ -4,29 +4,30 @@ module GovukPublishingComponents
                 :name,
                 :description,
                 :body,
-                :accessibility_criteria,
+                :component,
                 :accessibility_excluded_rules,
-                :examples,
                 :source
 
-    def initialize(
-      id,
-      name,
-      description,
-      body,
-      accessibility_criteria,
-      accessibility_excluded_rules,
-      examples,
-      source
-    )
-      @id = id
-      @name = name
-      @description = description
-      @body = body
-      @accessibility_criteria = accessibility_criteria
-      @accessibility_excluded_rules = accessibility_excluded_rules
-      @examples = examples
-      @source = source
+    def initialize(component)
+      @component = component
+      @id = component[:id]
+      @name = component[:name]
+      @description = component[:description]
+      @body = component[:body]
+      @accessibility_excluded_rules = component[:accessibility_excluded_rules]
+      @source = component[:source]
+    end
+
+    def accessibility_criteria
+      shared_accessibility_criteria = []
+
+      if component[:shared_accessibility_criteria].present?
+        component[:shared_accessibility_criteria].each do |criteria|
+          shared_accessibility_criteria << SharedAccessibilityCriteria.send(criteria) if SharedAccessibilityCriteria.respond_to? criteria
+        end
+      end
+
+      "#{component[:accessibility_criteria]}\n#{shared_accessibility_criteria.join("\n")}"
     end
 
     def example
@@ -37,6 +38,10 @@ module GovukPublishingComponents
       examples.slice(1..-1)
     end
 
+    def display_html?
+      component[:display_html]
+    end
+
     def html_body
       govspeak_to_html(body) if body.present?
     end
@@ -58,6 +63,13 @@ module GovukPublishingComponents
       "https://github.com/search?#{params.to_query}"
     end
 
+    def examples
+      @examples ||= component[:examples].map do |id, example_data|
+        example_data = example_data || {}
+        ComponentExample.new(id.to_s, example_data)
+      end
+    end
+
   private
 
     def govspeak_to_html(govspeak)

data/app/models/govuk_publishing_components/{component_doc_resolver.rb → component_docs.rb}

@@ -1,6 +1,6 @@
 module GovukPublishingComponents
   # @private
-  class ComponentDocResolver
+  class ComponentDocs
     def initialize(gem_components: false)
       @documentation_directory = gem_components ? gem_documentation_directory : app_documentation_directory
     end
@@ -17,32 +17,7 @@ module GovukPublishingComponents
   private
 
     def build(component)
-      examples = component[:examples].map { |id, example|
-        example = example || {}
-        ComponentExample.new(id.to_s, example["data"], example["context"], example["description"])
-      }
-
-      ComponentDoc.new(
-        component[:id],
-        component[:name],
-        component[:description],
-        component[:body],
-        combined_accessibility_criteria(component),
-        component[:accessibility_excluded_rules],
-        examples,
-        component[:source],
-      )
-    end
-
-    def combined_accessibility_criteria(component)
-      shared_accessibility_criteria = []
-
-      if component[:shared_accessibility_criteria].present?
-        component[:shared_accessibility_criteria].each do |criteria|
-          shared_accessibility_criteria << SharedAccessibilityCriteria.send(criteria) if SharedAccessibilityCriteria.respond_to? criteria
-        end
-      end
-      "#{component[:accessibility_criteria]}\n#{shared_accessibility_criteria.join("\n")}"
+      ComponentDoc.new(component)
     end
 
     def fetch_component_docs

data/app/models/govuk_publishing_components/component_example.rb

@@ -8,11 +8,11 @@ module GovukPublishingComponents
                 :description,
                 :block
 
-    def initialize(id, data, context, description)
+    def initialize(id, example)
       @id = id
-      @data = data || {}
-      @context = context || {}
-      @description = description || false
+      @data = example["data"] || {}
+      @context = example["context"] || {}
+      @description = example["description"] || false
       @block = @data.delete(:block) || false
     end
 

data/app/views/govuk_publishing_components/component_guide/component_doc/_component.html.erb

@@ -2,12 +2,5 @@
             <% if example.right_to_left? %>direction-rtl<% end %>
             <% if example.dark_background? %>dark-background<% end %>
             <% if preview_page %>component-guide-preview--simple<% end %>" data-content="EXAMPLE">
-
-  <% if example.has_block? %>
-    <%= render component_doc.partial_path, example.html_safe_data do %>
-      <%= example.block.html_safe %>
-    <% end %>
-  <% else %>
-    <%= render component_doc.partial_path, example.html_safe_data %>
-  <% end %>
+  <%= render "govuk_publishing_components/component_guide/component_doc/component_output", example: example, component_doc: component_doc %>
 </div>

data/app/views/govuk_publishing_components/component_guide/component_doc/_component_output.html.erb

@@ -0,0 +1,7 @@
+<% if example.has_block? %>
+  <%= render component_doc.partial_path, example.html_safe_data do %>
+    <%= example.block.html_safe %>
+  <% end %>
+<% else %>
+  <%= render component_doc.partial_path, example.html_safe_data %>
+<% end %>