design_system 0.13.2 → 0.15.0

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: design_system
 version: !ruby/object:Gem::Version
-  version: 0.13.2
+  version: 0.15.0
 platform: ruby
 authors:
 - Filis Liu
@@ -54,6 +54,20 @@ dependencies:
     - - "~>"
       - !ruby/object:Gem::Version
         version: '1.3'
+- !ruby/object:Gem::Dependency
+  name: view_component
+  requirement: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
+  type: :runtime
+  prerelease: false
+  version_requirements: !ruby/object:Gem::Requirement
+    requirements:
+    - - "~>"
+      - !ruby/object:Gem::Version
+        version: '4.0'
 - !ruby/object:Gem::Dependency
   name: will_paginate
   requirement: !ruby/object:Gem::Requirement
@@ -94,6 +108,7 @@ files:
 - README.md
 - Rakefile
 - app/assets/config/design_system_manifest.js
+- app/assets/stylesheets/design_system/_hljs.scss
 - app/assets/stylesheets/design_system/govuk-frontend-5.11.1/_base.scss
 - app/assets/stylesheets/design_system/govuk-frontend-5.11.1/all.scss
 - app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/_all.scss
@@ -379,8 +394,88 @@ files:
 - app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/index.scss
 - app/assets/stylesheets/design_system/nhsuk-frontend-10.3.1/nhsuk.scss
 - app/assets/stylesheets/design_system/nhsuk.scss
+- app/components/design_system/base_component.rb
+- app/components/design_system/generic/action_link_component.rb
+- app/components/design_system/generic/alert_component.rb
+- app/components/design_system/generic/breadcrumbs_component.rb
+- app/components/design_system/generic/button_component.rb
+- app/components/design_system/generic/callout_component.html.erb
+- app/components/design_system/generic/callout_component.rb
+- app/components/design_system/generic/details_component.html.erb
+- app/components/design_system/generic/details_component.rb
+- app/components/design_system/generic/grid_component.html.erb
+- app/components/design_system/generic/grid_component.rb
+- app/components/design_system/generic/heading_component.rb
+- app/components/design_system/generic/inset_text_component.html.erb
+- app/components/design_system/generic/inset_text_component.rb
+- app/components/design_system/generic/link_component.rb
+- app/components/design_system/generic/list_component.html.erb
+- app/components/design_system/generic/list_component.rb
+- app/components/design_system/generic/notification_component.html.erb
+- app/components/design_system/generic/notification_component.rb
+- app/components/design_system/generic/panel_component.html.erb
+- app/components/design_system/generic/panel_component.rb
+- app/components/design_system/generic/paragraph_component.rb
+- app/components/design_system/generic/start_button_component.html.erb
+- app/components/design_system/generic/start_button_component.rb
+- app/components/design_system/generic/summary_card_component.html.erb
+- app/components/design_system/generic/summary_card_component.rb
+- app/components/design_system/generic/summary_list_component.html.erb
+- app/components/design_system/generic/summary_list_component.rb
+- app/components/design_system/generic/tab_component.html.erb
+- app/components/design_system/generic/tab_component.rb
+- app/components/design_system/generic/table_component.rb
+- app/components/design_system/govuk/action_link_component.html.erb
+- app/components/design_system/govuk/action_link_component.rb
+- app/components/design_system/govuk/alert_component.rb
+- app/components/design_system/govuk/breadcrumbs_component.html.erb
+- app/components/design_system/govuk/breadcrumbs_component.rb
+- app/components/design_system/govuk/button_component.rb
+- app/components/design_system/govuk/callout_component.html.erb
+- app/components/design_system/govuk/callout_component.rb
+- app/components/design_system/govuk/details_component.rb
+- app/components/design_system/govuk/grid_component.rb
+- app/components/design_system/govuk/heading_component.rb
+- app/components/design_system/govuk/inset_text_component.rb
+- app/components/design_system/govuk/link_component.rb
+- app/components/design_system/govuk/list_component.rb
+- app/components/design_system/govuk/notification_component.rb
+- app/components/design_system/govuk/panel_component.rb
+- app/components/design_system/govuk/paragraph_component.rb
+- app/components/design_system/govuk/start_button_component.rb
+- app/components/design_system/govuk/summary_card_component.html.erb
+- app/components/design_system/govuk/summary_card_component.rb
+- app/components/design_system/govuk/summary_list_component.rb
+- app/components/design_system/govuk/tab_component.rb
+- app/components/design_system/govuk/table_component.html.erb
+- app/components/design_system/govuk/table_component.rb
+- app/components/design_system/nhsuk/action_link_component.html.erb
+- app/components/design_system/nhsuk/action_link_component.rb
+- app/components/design_system/nhsuk/alert_component.rb
+- app/components/design_system/nhsuk/breadcrumbs_component.html.erb
+- app/components/design_system/nhsuk/breadcrumbs_component.rb
+- app/components/design_system/nhsuk/button_component.rb
+- app/components/design_system/nhsuk/callout_component.rb
+- app/components/design_system/nhsuk/details_component.rb
+- app/components/design_system/nhsuk/grid_component.rb
+- app/components/design_system/nhsuk/heading_component.rb
+- app/components/design_system/nhsuk/inset_text_component.html.erb
+- app/components/design_system/nhsuk/inset_text_component.rb
+- app/components/design_system/nhsuk/link_component.rb
+- app/components/design_system/nhsuk/list_component.rb
+- app/components/design_system/nhsuk/notification_component.rb
+- app/components/design_system/nhsuk/panel_component.rb
+- app/components/design_system/nhsuk/paragraph_component.rb
+- app/components/design_system/nhsuk/start_button_component.rb
+- app/components/design_system/nhsuk/summary_card_component.rb
+- app/components/design_system/nhsuk/summary_list_component.rb
+- app/components/design_system/nhsuk/tab_component.rb
+- app/components/design_system/nhsuk/table_component.html.erb
+- app/components/design_system/nhsuk/table_component.rb
 - app/controllers/concerns/design_system/branded.rb
 - app/helpers/design_system_helper.rb
+- app/javascript/design_system/controllers/clipboard_controller.js
+- app/javascript/design_system/controllers/code_highlight_controller.js
 - app/javascript/design_system/controllers/hello_world_controller.js
 - app/javascript/design_system/controllers/show_password_controller.js
 - app/javascript/design_system/index.js
@@ -398,6 +493,7 @@ files:
 - config/routes.rb
 - lib/design_system.rb
 - lib/design_system/all.rb
+- lib/design_system/brand_derivable.rb
 - lib/design_system/components/grid.rb
 - lib/design_system/components/list.rb
 - lib/design_system/components/summary_list.rb
@@ -405,81 +501,36 @@ files:
 - lib/design_system/components/table.rb
 - lib/design_system/engine.rb
 - lib/design_system/generic.rb
-- lib/design_system/generic/builders/action_link.rb
 - lib/design_system/generic/builders/base.rb
-- lib/design_system/generic/builders/button.rb
-- lib/design_system/generic/builders/callout.rb
-- lib/design_system/generic/builders/concerns/brand_derivable.rb
-- lib/design_system/generic/builders/details.rb
+- lib/design_system/generic/builders/code.rb
 - lib/design_system/generic/builders/elements/backlink.rb
 - lib/design_system/generic/builders/elements/breadcrumbs.rb
 - lib/design_system/generic/builders/elements/form.rb
 - lib/design_system/generic/builders/elements/headings.rb
 - lib/design_system/generic/builders/elements/lead_paragraph.rb
 - lib/design_system/generic/builders/fixed_elements.rb
-- lib/design_system/generic/builders/grid.rb
-- lib/design_system/generic/builders/heading.rb
-- lib/design_system/generic/builders/inset_text.rb
-- lib/design_system/generic/builders/link.rb
-- lib/design_system/generic/builders/list.rb
-- lib/design_system/generic/builders/notification.rb
 - lib/design_system/generic/builders/pagination_renderer.rb
-- lib/design_system/generic/builders/panel.rb
-- lib/design_system/generic/builders/paragraph.rb
-- lib/design_system/generic/builders/summary_list.rb
-- lib/design_system/generic/builders/tab.rb
-- lib/design_system/generic/builders/table.rb
 - lib/design_system/generic/form_builder.rb
 - lib/design_system/govuk.rb
-- lib/design_system/govuk/builders/action_link.rb
-- lib/design_system/govuk/builders/button.rb
-- lib/design_system/govuk/builders/callout.rb
-- lib/design_system/govuk/builders/details.rb
-- lib/design_system/govuk/builders/elements/breadcrumbs.rb
+- lib/design_system/govuk/builders/code.rb
 - lib/design_system/govuk/builders/elements/headings.rb
 - lib/design_system/govuk/builders/fixed_elements.rb
-- lib/design_system/govuk/builders/grid.rb
-- lib/design_system/govuk/builders/heading.rb
-- lib/design_system/govuk/builders/inset_text.rb
-- lib/design_system/govuk/builders/link.rb
-- lib/design_system/govuk/builders/list.rb
-- lib/design_system/govuk/builders/notification.rb
 - lib/design_system/govuk/builders/pagination_renderer.rb
-- lib/design_system/govuk/builders/panel.rb
-- lib/design_system/govuk/builders/paragraph.rb
-- lib/design_system/govuk/builders/summary_list.rb
-- lib/design_system/govuk/builders/tab.rb
-- lib/design_system/govuk/builders/table.rb
 - lib/design_system/govuk/form_builder.rb
 - lib/design_system/govuk/test_helpers/form_builder_assertions_helper.rb
 - lib/design_system/govuk/test_helpers/form_builder_testable.rb
 - lib/design_system/helpers/css_helper.rb
 - lib/design_system/nhsuk.rb
-- lib/design_system/nhsuk/builders/action_link.rb
-- lib/design_system/nhsuk/builders/button.rb
-- lib/design_system/nhsuk/builders/callout.rb
-- lib/design_system/nhsuk/builders/details.rb
-- lib/design_system/nhsuk/builders/elements/breadcrumbs.rb
+- lib/design_system/nhsuk/builders/code.rb
 - lib/design_system/nhsuk/builders/fixed_elements.rb
-- lib/design_system/nhsuk/builders/grid.rb
-- lib/design_system/nhsuk/builders/heading.rb
-- lib/design_system/nhsuk/builders/inset_text.rb
-- lib/design_system/nhsuk/builders/link.rb
-- lib/design_system/nhsuk/builders/list.rb
-- lib/design_system/nhsuk/builders/notification.rb
 - lib/design_system/nhsuk/builders/pagination_renderer.rb
-- lib/design_system/nhsuk/builders/panel.rb
-- lib/design_system/nhsuk/builders/paragraph.rb
-- lib/design_system/nhsuk/builders/summary_list.rb
-- lib/design_system/nhsuk/builders/tab.rb
-- lib/design_system/nhsuk/builders/table.rb
 - lib/design_system/nhsuk/form_builder.rb
 - lib/design_system/registry.rb
 - lib/design_system/version.rb
 - lib/tasks/design_system_tasks.rake
 - lib/tasks/govuk.rake
 - lib/tasks/nhsuk.rake
-- public/design_system/static/design_system-0.13.2/design_system.js
+- public/design_system/static/design_system-0.15.0/design_system.js
 - public/design_system/static/govuk-frontend-5.11.1/fonts/bold-affa96571d-v2.woff
 - public/design_system/static/govuk-frontend-5.11.1/fonts/bold-b542beb274-v2.woff2
 - public/design_system/static/govuk-frontend-5.11.1/fonts/light-94a07e06a1-v2.woff2

data/lib/design_system/generic/builders/action_link.rb

@@ -1,17 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides generic methods to display action links, which should be used to signpost the start of a digital service.
-      class ActionLink < Base
-        def render_action_link(name = nil, options = nil, html_options = nil)
-          options ||= {}
-          html_options ||= {}
-
-          prep_style(name, options, html_options)
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/button.rb

@@ -1,33 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides generic methods to display button on html.
-      class Button < Base
-        def render_button(content_or_options = nil, options = nil, &)
-          options = prep_button_options(content_or_options, options)
-
-          if block_given?
-            button_tag(options = nil, &)
-          else
-            button_tag(content_or_options, options)
-          end
-        end
-
-        private
-
-        def prep_button_options(content_or_options, options)
-          if content_or_options.is_a? Hash
-            options = content_or_options
-          else
-            options ||= {}
-          end
-
-          { 'name' => 'button', 'type' => 'submit',
-            'data-module' => "#{brand}-button" }.merge!(options.stringify_keys)
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/callout.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This generates html for rendering warning callout to help users identify and understand warning content on the page, even if they do not read the whole page.
-      class Callout < Base
-        def render_callout(label, body)
-          safe_buffer = ActiveSupport::SafeBuffer.new
-          content_tag(:div, class: "#{brand}-warning-callout") do
-            safe_buffer.concat(render_label(label))
-            safe_buffer.concat(content_tag(:p, body))
-          end
-        end
-
-        private
-
-        def render_label(label)
-          content_tag(:h3, class: "#{brand}-warning-callout__label") do
-            content_tag(:span, role: 'text') do
-              content_tag(:span, 'Important: ', class: "#{brand}-u-visually-hidden") + label
-            end
-          end
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/concerns/brand_derivable.rb

@@ -1,14 +0,0 @@
-module DesignSystem
-  module Generic
-    module Builders
-      module Concerns
-        # Mixin module to make brand method available to builder classes
-        module BrandDerivable
-          def brand
-            self.class.name.split('::')[1].underscore
-          end
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/details.rb

@@ -1,30 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This builds a generic details component with brand-specific classes
-      class Details < Base
-        def render_details(summary_text)
-          content = capture { yield if block_given? }
-
-          content_tag(:details, class: "#{brand}-details") do
-            safe_buffer = ActiveSupport::SafeBuffer.new
-
-            safe_buffer.concat(
-              content_tag(:summary, class: "#{brand}-details__summary") do
-                content_tag(:span, summary_text, class: "#{brand}-details__summary-text")
-              end
-            )
-
-            safe_buffer.concat(
-              content_tag(:div, content, class: "#{brand}-details__text")
-            )
-
-            safe_buffer
-          end
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/grid.rb

@@ -1,44 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides a generic grid builder.
-      class Grid < Base
-        include ActionView::Helpers::OutputSafetyHelper
-
-        def render_grid(options = {})
-          @grid = ::DesignSystem::Components::Grid.new
-          yield @grid
-          @grid.validate_total_width!
-
-          row_options = css_class_options_merge(options, ["#{brand}-grid-row"])
-          content_tag(:div, **row_options) do
-            safe_buffer = ActiveSupport::SafeBuffer.new
-            safe_buffer.concat(render_columns)
-
-            safe_buffer
-          end
-        end
-
-        private
-
-        def render_columns
-          @grid.columns.each_with_object(ActiveSupport::SafeBuffer.new) do |column, buffer|
-            column_options = column[:options].dup
-            column_class = grid_class(column[:width])
-            column_options = css_class_options_merge(column_options, [column_class])
-
-            block = column[:block]
-            content = capture(&block) if block
-            buffer.concat(content_tag(:div, content, **column_options))
-          end
-        end
-
-        def grid_class(width)
-          "#{brand}-grid-column-#{::DesignSystem::Components::Grid::WIDTHS[width][:class]}"
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/heading.rb

@@ -1,38 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides generic methods to display headings in page content.
-      class Heading < Base
-        SIZE_MAPPING = {
-          1 => 'xl',
-          2 => 'l',
-          3 => 'm',
-          4 => 's',
-          5 => 'xs',
-          6 => 'xs'
-        }.freeze
-
-        def render_heading(text, level: 2, **options)
-          content_tag("h#{level}", text, class: classes(level), **options)
-        end
-
-        private
-
-        def classes(level)
-          level = level.to_i
-          validate_level(level)
-
-          "#{brand}-heading-#{SIZE_MAPPING[level]}"
-        end
-
-        def validate_level(level)
-          return if level.between?(1, 6)
-
-          raise ArgumentError, "Invalid heading level #{level}. Must be an integer between 1 and 6."
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/inset_text.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This generates html for rendering inset text to help users identify and understand important content on the page.
-      class InsetText < Base
-        def render_inset_text(text = nil, **options, &)
-          content = block_given? ? capture(&) : text
-          return if content.blank?
-
-          div_options = css_class_options_merge(options, ["#{brand}-inset-text"])
-          content_tag(:div, content, **div_options)
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/link.rb

@@ -1,44 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides generic methods to display links on html, including button links.
-      class Link < Base
-        def render_link_to(name = nil, options = nil, html_options = nil, &)
-          options ||= {}
-          html_options ||= {}
-
-          if block_given?
-            type = options.delete(:type)
-            options[:class] = prep_link_classes(type)
-          else
-            type = html_options.delete(:type)
-            html_options[:class] = prep_link_classes(type)
-          end
-
-          link_to(name, options, html_options, &)
-        end
-
-        private
-
-        def prep_link_classes(type)
-          if type && button_type_class_hash[type].present?
-            button_type_class_hash[type]
-          else
-            link_class
-          end
-        end
-
-        def link_class
-          case @context.instance_variable_get(:@link_context)
-          when :notification_banner
-            "#{brand}-notification-banner__link"
-          else
-            "#{brand}-link"
-          end
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/list.rb

@@ -1,41 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # Generic list builder.
-      class List < Base
-        # type: :bullet, :number
-        def render_list(type: :default, **options)
-          raise ArgumentError, 'block required' unless block_given?
-
-          @list = ::DesignSystem::Components::List.new
-          yield @list
-
-          tag_name = type.to_sym == :number ? :ol : :ul
-
-          classes = ["#{brand}-list"]
-          classes << "#{brand}-list--bullet" if type == :bullet
-          classes << "#{brand}-list--number" if type == :number
-
-          options = css_class_options_merge(options, classes)
-
-          content_tag(tag_name, **options) do
-            render_items
-          end
-        end
-
-        private
-
-        def render_items
-          @list.items.each_with_object(ActiveSupport::SafeBuffer.new) do |item, buffer|
-            content = item.is_a?(Proc) ? capture(&item) : item
-            next if content.blank?
-
-            buffer.concat(content_tag(:li, content))
-          end
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/notification.rb

@@ -1,68 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides generic methods to display notifications.
-      class Notification < Base
-        include ActionView::Helpers::SanitizeHelper
-
-        def render_alert(msg = nil, &)
-          content_to_display = block_given? ? capture(&) : msg
-          content_tag(:div, class: "#{brand}-error-summary", 'aria-labelledby': 'error-summary-title', role: 'alert',
-                            tabindex: '-1') do
-            content_tag(:h2, content_to_display,
-                        class: "#{brand}-error-summary__title", id: 'error-summary-title')
-          end
-        end
-
-        def render_notice(msg = nil, header: nil, type: :information, &)
-          @context.instance_variable_set(:@link_context, :notification_banner)
-
-          raise ArgumentError,
-                "Invalid notification type: #{type}. Must be one of: #{notification_type_hash.keys.join(', ')}" unless notification_type_hash.key?(type)
-
-          header ||= notification_type_hash.dig(type, :header)
-
-          content_to_display = block_given? ? capture(&) : msg
-          content_tag(:div, class: notification_type_hash.dig(type, :class), role: notification_type_hash.dig(type, :role),
-                            'aria-labelledby': "#{brand}-notification-banner-title",
-                            'data-module': "#{brand}-notification-banner") do
-            banner_tile(header) + banner_content(content_to_display)
-          end
-        end
-
-        private
-
-        def banner_tile(header)
-          content_tag(:div, class: "#{brand}-notification-banner__header") do
-            content_tag(:h2, header, class: "#{brand}-notification-banner__title",
-                                     id: "#{brand}-notification-banner-title")
-          end
-        end
-
-        def banner_content(content)
-          content_tag(:div, class: "#{brand}-notification-banner__content") do
-            content_tag(:p, content,
-                        class: "#{brand}-notification-banner__heading")
-          end
-        end
-
-        def notification_type_hash
-          {
-            information: {
-              header: 'Important',
-              class: "#{brand}-notification-banner",
-              role: 'region'
-            },
-            success: {
-              header: 'Success',
-              class: "#{brand}-notification-banner #{brand}-notification-banner--success",
-              role: 'alert'
-            }
-          }
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/panel.rb

@@ -1,18 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This generates html for rendering panel to display important information when a transaction has been completed.
-      class Panel < Base
-        def render_panel(title, body)
-          safe_buffer = ActiveSupport::SafeBuffer.new
-          content_tag(:div, class: "#{brand}-panel") do
-            safe_buffer.concat(content_tag(:h1, title, class: "#{brand}-panel__title"))
-            safe_buffer.concat(content_tag(:div, body, class: "#{brand}-panel__body"))
-          end
-        end
-      end
-    end
-  end
-end

data/lib/design_system/generic/builders/paragraph.rb

@@ -1,28 +0,0 @@
-# frozen_string_literal: true
-
-module DesignSystem
-  module Generic
-    module Builders
-      # This class provides generic methods to display paragraphs with typography styles.
-      class Paragraph < Base
-        FONT_SIZES = %i[s].freeze
-
-        def render_paragraph(text = nil, size: nil, **options, &block)
-          content = block_given? ? capture(&block) : text
-          return if content.blank?
-
-          content_tag('p', content, class: classes(size), **options)
-        end
-
-        private
-
-        def classes(size)
-          return "#{brand}-body" if size.nil?
-          raise ArgumentError, "Invalid size: #{size}" unless size.in?(FONT_SIZES)
-
-          "#{brand}-body-#{size}"
-        end
-      end
-    end
-  end
-end