design_system 0.14.0 → 0.15.0

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: e985fe0cfcfbfc619222a57c2501acff5e4172e0eb8b3767069c0f1f66f8541d
-  data.tar.gz: 72436a314d93ae0f3f35089969cb0e2a1524c156373dedbd059112e11340a1be
+  metadata.gz: b6ffd3715e56a0bdbf5169f22b8a92d447d81456eb17ee4adca169ea93bef15b
+  data.tar.gz: a9bb7ce82452b0f5234bd881b621a3725b6f63e001857e7488d023e3d4a8b738
 SHA512:
-  metadata.gz: e9eeff12697761fdf1542041c31b4b85acdfc29bd01682da6cb06a3a711482ed532271837328faf7ee2f2cd552349a73d481e7a6f5717a2207d267584e6ddc14
-  data.tar.gz: 7c19fed7bbfee92c6e585615bfb8d956d1ac8ff38c2938b32d634dac0125084a3756b43d5cc81c143491c5eeae62f7320705bfab6d283ae88fb791099315691b
+  metadata.gz: f76049549af4966a711a2f682cfb4a8c26e6b962b7464a3bd36c8d1c08e0ef7ed66fd4419c0f04803951b06899b358b2a2928564c80661cc3c34952a9ab3a981
+  data.tar.gz: 56dca56f40804c948db79fb49c66d5bc889317390b04c848a01efa9e368f00589b15e267eff2341cecbaaed65ea5d8a05826b65ee93bed421f1fac2be3958034

data/README.md

@@ -50,7 +50,7 @@ registerControllers(application)
 
 ## Updating Frontends
 
-### GOVUK Frontend (currently v5.9.0)
+### GOVUK Frontend (currently v5.11.1)
 
 ```bash
 # Automatically fetch the latest
@@ -60,7 +60,7 @@ bundle exec rake app:make_govuk
 bundle exec rake app:make_govuk\[5.9.0\]
 ```
 
-### NHSUK Frontend (currently v9.3.0)
+### NHSUK Frontend (currently v10.3.1)
 
 ```bash
 # Automatically fetch the latest

data/app/assets/stylesheets/design_system/_hljs.scss

@@ -0,0 +1,131 @@
+/*!
+  Theme: StackOverflow Light
+  Description: Light theme as used on stackoverflow.com
+  Author: stackoverflow.com
+  Maintainer: @Hirse
+  Website: https://github.com/StackExchange/Stacks
+  License: MIT
+  Updated: 2021-05-15
+
+  Updated for @stackoverflow/stacks v0.64.0
+  Code Blocks: /blob/v0.64.0/lib/css/components/_stacks-code-blocks.less
+  Colors: /blob/v0.64.0/lib/css/exports/_stacks-constants-colors.less
+*/
+
+.hljs {
+  /* var(--highlight-color) */
+  color: #2f3337;
+  /* var(--highlight-bg) */
+  background: #f6f6f6;
+}
+
+.hljs-subst {
+  /* var(--highlight-color) */
+  color: #2f3337;
+}
+
+.hljs-comment {
+  /* var(--highlight-comment) */
+  color: #656e77;
+}
+
+.hljs-keyword,
+.hljs-selector-tag,
+.hljs-meta .hljs-keyword,
+.hljs-doctag,
+.hljs-section {
+  /* var(--highlight-keyword) */
+  color: #015692;
+}
+
+.hljs-attr {
+  /* var(--highlight-attribute); */
+  color: #015692;
+}
+
+.hljs-attribute {
+  /* var(--highlight-symbol) */
+  color: #803378;
+}
+
+.hljs-name,
+.hljs-type,
+.hljs-number,
+.hljs-selector-id,
+.hljs-quote,
+.hljs-template-tag {
+  /* var(--highlight-namespace) */
+  color: #b25301;
+}
+
+.hljs-selector-class {
+  /* var(--highlight-keyword) */
+  color: #015692;
+}
+
+.hljs-string,
+.hljs-regexp,
+.hljs-symbol,
+.hljs-variable,
+.hljs-template-variable,
+.hljs-link,
+.hljs-selector-attr {
+  /* var(--highlight-variable) */
+  color: #54790d;
+}
+
+.hljs-meta,
+.hljs-selector-pseudo {
+  /* var(--highlight-keyword) */
+  color: #015692;
+}
+
+.hljs-built_in,
+.hljs-title,
+.hljs-literal {
+  /* var(--highlight-literal) */
+  color: #b25301;
+}
+
+.hljs-bullet,
+.hljs-code {
+  /* var(--highlight-punctuation) */
+  color: #535a60;
+}
+
+.hljs-meta .hljs-string {
+  /* var(--highlight-variable) */
+  color: #54790d;
+}
+
+.hljs-deletion {
+  /* var(--highlight-deletion) */
+  color: #c02d2e;
+}
+
+.hljs-addition {
+  /* var(--highlight-addition) */
+  color: #2f6f44;
+}
+
+.hljs-emphasis {
+  font-style: italic;
+}
+
+.hljs-strong {
+  font-weight: bold;
+}
+
+.hljs-formula,
+.hljs-operator,
+.hljs-params,
+.hljs-property,
+.hljs-punctuation,
+.hljs-tag {
+  /* purposely ignored */
+}
+
+pre code.hljs {
+  display: block;
+  white-space: pre;
+}

data/app/assets/stylesheets/design_system/govuk.scss

@@ -5,6 +5,7 @@
 );
 
 // Use extreme caution when making any design system level style changes or additions here.
+@use 'hljs';
 
 .app-header-layout {
   display: flex;
@@ -67,3 +68,45 @@
   border: none;
   cursor: pointer;
 }
+
+.app-example__code {
+  background-color: #f6f6f6;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  padding: 10px;
+  padding-top: 2.75rem;
+  position: relative;
+  width: 100%;
+}
+
+.app-example__scroll {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+  padding: 0.5rem;
+
+  &:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 2px;
+  }
+}
+
+.app-example__code pre {
+  margin: 0;
+  min-width: min-content;
+}
+
+.app-example__copy-button {
+  @extend .govuk-button;
+  @extend .govuk-button--inverse;
+  font-size: 0.875rem;
+  line-height: 1.25;
+  margin: 0;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+}

data/app/assets/stylesheets/design_system/nhsuk.scss

@@ -3,3 +3,58 @@
 @use 'nhsuk-frontend-10.3.1/components';
 
 // Use extreme caution when making any design system level style changes or additions here.
+@use 'hljs';
+
+// Code example block: fixed gray box, only __scroll + content scroll (like GOV.UK app-example).
+.app-example__code {
+  background-color: #f0f4f5;
+  border: 4px solid transparent;
+  margin: -4px;
+  margin-bottom: 28px;
+  box-sizing: border-box;
+  max-width: 100%;
+  min-width: 0;
+  padding: 0;
+  padding-top: 2.75rem;
+  position: relative;
+  width: 100%;
+}
+
+.app-example__scroll {
+  box-sizing: border-box;
+  width: 100%;
+  max-width: 100%;
+  min-width: 0;
+  overflow-x: auto;
+  overflow-y: auto;
+  padding: 0.5rem;
+
+  &:focus {
+    outline: 3px solid #fd0;
+    outline-offset: 2px;
+  }
+}
+
+.app-example__code pre {
+  margin: 0;
+  min-width: min-content;
+}
+
+.app-example__code pre code.hljs {
+  background: #f0f4f5;
+}
+
+.app-example__copy-button {
+  @extend .nhsuk-button;
+  @extend .nhsuk-button--secondary-solid;
+  @extend .nhsuk-button--small;
+
+  // Copy button positioning (based on NHS "code" button placement).
+  margin: 0;
+  margin-bottom: 4px;
+  position: absolute;
+  right: 16px;
+  top: 16px;
+  width: auto;
+  z-index: 1;
+}

data/app/components/design_system/base_component.rb

@@ -0,0 +1,21 @@
+module DesignSystem
+  # Base class for all design-system view components. Provides the brand
+  # derivation and shared CSS helpers.
+  #
+  # On the inheritance pattern (Brand::FooComponent < Generic::FooComponent):
+  # ViewComponent's docs recommend avoiding inheritance, but that guidance is
+  # aimed at typical application components, not multi-brand design systems.
+  # Here, Govuk::PanelComponent really is a specialization of the same
+  # conceptual panel as Nhsuk's, and ViewComponent's ancestor-walking template
+  # resolution lets Generic own the markup while brand classes override only
+  # what they need (e.g. an extra CSS modifier). The alternatives we weighed —
+  # one component with a `brand:` param, or sharing via a Concern — each trade
+  # more than they save: the param approach buries brand-specific behaviour in
+  # conditionals, and Concerns fight ViewComponent's sidecar-template model.
+  # We accept the occasional empty subclass in exchange for a uniform,
+  # predictable structure across the library.
+  class BaseComponent < ::ViewComponent::Base
+    include DesignSystem::BrandDerivable
+    include DesignSystem::Helpers::CssHelper
+  end
+end

data/app/components/design_system/generic/action_link_component.rb

@@ -0,0 +1,17 @@
+module DesignSystem
+  module Generic
+    # Action links are calls-to-action signposting the start of a digital
+    # service. Implementation differs noticeably between brands so this is
+    # mostly a contract — both brand subclasses override `call`.
+    class ActionLinkComponent < DesignSystem::BaseComponent
+      def initialize(name = nil, options = nil, html_options = nil)
+        super()
+        @name = name
+        @options = options || {}
+        @html_options = html_options || {}
+      end
+
+      attr_reader :name, :options, :html_options
+    end
+  end
+end

data/app/components/design_system/generic/alert_component.rb

@@ -0,0 +1,25 @@
+module DesignSystem
+  module Generic
+    # Error-summary alert rendered by ds_alert. Content comes from the message
+    # argument or a block.
+    class AlertComponent < DesignSystem::BaseComponent
+      def initialize(message = nil)
+        super()
+        @message = message
+      end
+
+      def call
+        content_tag(:div, class: "#{brand}-error-summary", 'aria-labelledby': 'error-summary-title',
+                          role: 'alert', tabindex: '-1') do
+          content_tag(:h2, body, class: "#{brand}-error-summary__title", id: 'error-summary-title')
+        end
+      end
+
+      private
+
+      def body
+        content.presence || @message
+      end
+    end
+  end
+end

data/app/components/design_system/generic/breadcrumbs_component.rb

@@ -0,0 +1,18 @@
+module DesignSystem
+  module Generic
+    # Breadcrumb trail rendered into the :breadcrumbs content_for slot by the
+    # fixed-elements builder. Brands own the markup via their own templates.
+    class BreadcrumbsComponent < DesignSystem::BaseComponent
+      def initialize(breadcrumbs:)
+        super()
+        @breadcrumbs = breadcrumbs
+      end
+
+      attr_reader :breadcrumbs
+
+      def current_page_aria(breadcrumb)
+        helpers.current_page?(breadcrumb[:path]) ? 'page' : nil
+      end
+    end
+  end
+end

data/app/components/design_system/generic/button_component.rb

@@ -0,0 +1,51 @@
+module DesignSystem
+  module Generic
+    # Submit button rendered by ds_button_tag. Brand subclasses add their
+    # button classes and style modifiers. Content can be supplied via the
+    # first argument or a block.
+    class ButtonComponent < DesignSystem::BaseComponent
+      def initialize(content_or_options = nil, options = nil)
+        super()
+        @content_or_options = content_or_options
+        @options = options
+      end
+
+      attr_reader :content_or_options, :options
+
+      def call
+        button_options = prep_button_options(content_or_options, options)
+        style = button_options.delete('style')
+        button_options['aria-disabled'] = true if button_options['disabled']
+        button_options = css_class_options_merge(button_options, ["#{brand}-button"]) do |classes|
+          style_class = style_class_hash[style]
+          classes << style_class if style_class
+        end
+        if content.present?
+          button_tag(button_options) { content }
+        else
+          button_tag(content_or_options, button_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
+
+        { 'data-module' => "#{brand}-button" }.merge!(options.stringify_keys)
+      end
+
+      def style_class_hash
+        {
+          'secondary' => "#{brand}-button--secondary",
+          'warning' => "#{brand}-button--warning",
+          'reverse' => "#{brand}-button--inverse"
+        }
+      end
+    end
+  end
+end

data/app/components/design_system/generic/callout_component.html.erb

@@ -0,0 +1,8 @@
+<div class="<%= brand %>-warning-callout">
+  <h3 class="<%= brand %>-warning-callout__label">
+    <span role="text">
+      <span class="<%= brand %>-u-visually-hidden">Important: </span><%= label %>
+    </span>
+  </h3>
+  <p><%= body %></p>
+</div>

data/app/components/design_system/generic/callout_component.rb

@@ -0,0 +1,15 @@
+module DesignSystem
+  module Generic
+    # NHS-style warning callout: the GOV.UK brand renders a warning-text
+    # variant via its own subclass and template.
+    class CalloutComponent < DesignSystem::BaseComponent
+      def initialize(label:, body:)
+        super()
+        @label = label
+        @body = body
+      end
+
+      attr_reader :label, :body
+    end
+  end
+end

data/app/components/design_system/generic/details_component.html.erb

@@ -0,0 +1,4 @@
+<details class="<%= brand %>-details">
+  <summary class="<%= brand %>-details__summary"><span class="<%= brand %>-details__summary-text"><%= summary_text %></span></summary>
+  <div class="<%= brand %>-details__text"><%= content %></div>
+</details>

data/app/components/design_system/generic/details_component.rb

@@ -0,0 +1,13 @@
+module DesignSystem
+  module Generic
+    # Disclosure widget rendered by ds_details.
+    class DetailsComponent < DesignSystem::BaseComponent
+      def initialize(summary_text)
+        super()
+        @summary_text = summary_text
+      end
+
+      attr_reader :summary_text
+    end
+  end
+end

data/app/components/design_system/generic/grid_component.html.erb

@@ -0,0 +1,5 @@
+<%= content_tag(:div, **row_options) do %>
+  <% grid.columns.each do |column| %>
+    <%= content_tag(:div, column[:block] ? capture(&column[:block]) : nil, **column_options(column)) %>
+  <% end %>
+<% end %>

data/app/components/design_system/generic/grid_component.rb

@@ -0,0 +1,31 @@
+module DesignSystem
+  module Generic
+    # Grid row rendered by ds_grid. Wraps columns whose widths map to the
+    # brand grid-column classes. The column widths are validated (total must
+    # not exceed 100%) when the component is built.
+    class GridComponent < DesignSystem::BaseComponent
+      def initialize(grid:, **options)
+        super()
+        @grid = grid
+        @options = options
+        @grid.validate_total_width!
+      end
+
+      attr_reader :grid, :options
+
+      def row_options
+        css_class_options_merge(options, ["#{brand}-grid-row"])
+      end
+
+      def column_options(column)
+        css_class_options_merge(column[:options].dup, [grid_class(column[:width])])
+      end
+
+      private
+
+      def grid_class(width)
+        "#{brand}-grid-column-#{::DesignSystem::Components::Grid::WIDTHS[width][:class]}"
+      end
+    end
+  end
+end

data/app/components/design_system/generic/heading_component.rb

@@ -0,0 +1,41 @@
+module DesignSystem
+  module Generic
+    # Generic page heading. Brand subclasses inherit unchanged.
+    class HeadingComponent < DesignSystem::BaseComponent
+      SIZE_MAPPING = {
+        1 => 'xl',
+        2 => 'l',
+        3 => 'm',
+        4 => 's',
+        5 => 'xs',
+        6 => 'xs'
+      }.freeze
+
+      def initialize(text, level: 2, **options)
+        super()
+        @text = text
+        @level = level.to_i
+        @options = options
+        validate_level!
+      end
+
+      attr_reader :text, :level, :options
+
+      def call
+        content_tag("h#{level}", text, class: heading_class, **options)
+      end
+
+      private
+
+      def heading_class
+        "#{brand}-heading-#{SIZE_MAPPING[level]}"
+      end
+
+      def validate_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

data/app/components/design_system/generic/inset_text_component.html.erb

@@ -0,0 +1 @@
+<%= content_tag(:div, content || text, **inset_options) %>

data/app/components/design_system/generic/inset_text_component.rb

@@ -0,0 +1,24 @@
+module DesignSystem
+  module Generic
+    # Inset text used to differentiate a block of content from what surrounds
+    # it, rendered by ds_inset_text. Content comes from the `text` argument or
+    # a block (block wins if both are given). Renders nothing when blank.
+    class InsetTextComponent < DesignSystem::BaseComponent
+      def initialize(text: nil, **options)
+        super()
+        @text = text
+        @options = options
+      end
+
+      attr_reader :text, :options
+
+      def render?
+        text.present? || content.present?
+      end
+
+      def inset_options
+        css_class_options_merge(options, ["#{brand}-inset-text"])
+      end
+    end
+  end
+end

data/app/components/design_system/generic/link_component.rb

@@ -0,0 +1,51 @@
+module DesignSystem
+  module Generic
+    # Link (or button-styled link) rendered by ds_link_to. Mirrors the
+    # polymorphic Rails link_to signature: with a block the first argument is
+    # the URL, otherwise it is the link text. A :type option selects a
+    # button style (defined per brand). The link_context switches the default
+    # link class (e.g. inside a notification banner).
+    class LinkComponent < DesignSystem::BaseComponent
+      def initialize(name = nil, options = nil, html_options = nil, link_context: nil)
+        super()
+        @name = name
+        @options = options || {}
+        @html_options = html_options || {}
+        @link_context = link_context
+      end
+
+      attr_reader :name, :options, :html_options
+
+      def call
+        if content.present?
+          type = options.delete(:type)
+          options[:class] = prep_link_classes(type)
+          link_to(name, options, html_options) { content }
+        else
+          type = html_options.delete(:type)
+          html_options[:class] = prep_link_classes(type)
+          link_to(name, options, html_options)
+        end
+      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 @link_context
+        when :notification_banner
+          "#{brand}-notification-banner__link"
+        else
+          "#{brand}-link"
+        end
+      end
+    end
+  end
+end

data/app/components/design_system/generic/list_component.html.erb

@@ -0,0 +1,7 @@
+<%= content_tag(tag_name, **list_options) do %>
+  <% list.items.each do |item| %>
+    <% item_content = item.is_a?(Proc) ? capture(&item) : item %>
+    <% next if item_content.blank? %>
+    <%= content_tag(:li, item_content) %>
+  <% end %>
+<% end %>

data/app/components/design_system/generic/list_component.rb

@@ -0,0 +1,26 @@
+module DesignSystem
+  module Generic
+    # Plain, bullet, or numbered list rendered by ds_list.
+    class ListComponent < DesignSystem::BaseComponent
+      def initialize(list:, type: :default, **options)
+        super()
+        @list = list
+        @type = type.to_sym
+        @options = options
+      end
+
+      attr_reader :list, :type, :options
+
+      def tag_name
+        type == :number ? :ol : :ul
+      end
+
+      def list_options
+        classes = ["#{brand}-list"]
+        classes << "#{brand}-list--bullet" if type == :bullet
+        classes << "#{brand}-list--number" if type == :number
+        css_class_options_merge(options, classes)
+      end
+    end
+  end
+end

data/app/components/design_system/generic/notification_component.html.erb

@@ -0,0 +1,15 @@
+<% success = type == :success %>
+<div class="<%= brand %>-notification-banner<%= " #{brand}-notification-banner--success" if success %>"
+     role="<%= success ? 'alert' : 'region' %>"
+     aria-labelledby="<%= brand %>-notification-banner-title"
+     data-module="<%= brand %>-notification-banner">
+  <div class="<%= brand %>-notification-banner__header">
+    <h2 class="<%= brand %>-notification-banner__title" id="<%= brand %>-notification-banner-title"><%= success ? 'Success' : 'Important' %></h2>
+  </div>
+  <div class="<%= brand %>-notification-banner__content">
+    <% if heading_text.present? %>
+      <%= content_tag(heading_tag, heading_text, class: "#{brand}-notification-banner__heading") %>
+    <% end %>
+    <%= body %>
+  </div>
+</div>