design_system 0.7.0

checksums.yaml

@@ -0,0 +1,7 @@
+---
+SHA256:
+  metadata.gz: 57a4557e70bd03738470403e3267f8e4cd7560950d17619ec86f766d5284dbba
+  data.tar.gz: 6b3bb953b829306cdcf28a1a5d35bbf9ca102b352d24e116e771b66f974915ca
+SHA512:
+  metadata.gz: 39fe6fd17562c4f3afcce0b19a25172a275fc7435e2a5bd8c029e6550d975aad5ff6e8dfc95b925fd3530338d690f7ec3ff00fb2d0bb3ecd8f9192c7434b8cac
+  data.tar.gz: be52770529a9cea0f95fdd3c8d21f0194b8bc1757a120476794132a824ba12e298bd9e153f8285c19455db9eeb4280844530b1b5820ce79873589eadb9ea30f3

data/MIT-LICENSE

@@ -0,0 +1,20 @@
+Copyright Health Data Insight CIC 2025
+
+Permission is hereby granted, free of charge, to any person obtaining
+a copy of this software and associated documentation files (the
+"Software"), to deal in the Software without restriction, including
+without limitation the rights to use, copy, modify, merge, publish,
+distribute, sublicense, and/or sell copies of the Software, and to
+permit persons to whom the Software is furnished to do so, subject to
+the following conditions:
+
+The above copyright notice and this permission notice shall be
+included in all copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND,
+EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF
+MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND
+NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE
+LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION
+OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION
+WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

data/README.md

@@ -0,0 +1,91 @@
+# DesignSystem
+
+DesignSystem is a Ruby on Rails engine that enables consistent, compliant web applications across design systems including GOV.UK, NHS. It is designed to be extensible, and design systems are being developed for the National Disease Registration Service (NDRS), and Health Data Insight (HDI).
+
+The gem provides unified form builders, UI components (tables, buttons, navigation, tabs), layouts, and styling that automatically adapt to each design system's specific requirements and branding guidelines.
+
+Key features include:
+
+- Multi-brand support: Seamlessly switch between GOV.UK, NHS and other design systems
+- Unified API: Single set of helper methods (ds_form_with, ds_button_tag, ds_table, etc.) that work across all brands
+- Signature parity: `ds_` prefixed helper methods have the same signature as their Rails equivalents (where possible)
+- Form builders: Brand-specific form builders with automatic styling and accessibility features
+- Component library: Pre-built components like tables, summary lists, tabs, navigation, and notifications
+- Frontend integration: Includes bundled frontend assets and JavaScript for each design system
+- Rails integration: Built as a Rails engine with Stimulus controllers for interactive components
+- The gem abstracts away the complexity of working with different design systems, allowing developers to build compliant applications without managing brand-specific implementations manually.
+
+## Usage
+
+How to use the plugin.
+
+## Installation
+
+Add this line to your application's Gemfile:
+
+```ruby
+gem "design_system"
+```
+
+And then execute:
+
+```bash
+bundle
+```
+
+Or install it yourself as:
+
+```bash
+gem install design_system
+```
+
+Add the following to `app/javascript/controllers/index.js`, after `import { application } from './application'`:
+
+```javascript
+import { registerControllers } from 'design_system/controllers'
+registerControllers(application)
+```
+
+## Updating Frontends
+
+### GOVUK Frontend (currently v5.9.0)
+
+```bash
+# Automatically fetch the latest
+bundle exec rake app:make_govuk
+
+# Update to a specific version
+bundle exec rake app:make_govuk\[5.9.0\]
+```
+
+### NHSUK Frontend (currently v9.3.0)
+
+```bash
+# Automatically fetch the latest
+bundle exec rake app:make_nhsuk
+
+# Update to a specific version
+bundle exec rake app:make_nhsuk\[9.3.0\]
+```
+
+### Shared Frontend Code
+
+Before releasing a new version of the gem, rebuild the shared javascript code using:
+
+```bash
+bundle exec rake js:build
+```
+
+## Contributing
+
+Contribution directions go here.
+
+Created using:
+
+```bash
+rails plugin new design_system -MOC --skip-system-test --full --no-mountable
+```
+
+## License
+
+The gem is available as open source under the terms of the [MIT License](https://opensource.org/licenses/MIT).

data/Rakefile

@@ -0,0 +1,47 @@
+require "bundler/setup"
+
+APP_RAKEFILE = File.expand_path("test/dummy/Rakefile", __dir__)
+load "rails/tasks/engine.rake"
+
+load "rails/tasks/statistics.rake"
+
+require "bundler/gem_tasks"
+require 'ndr_dev_support/tasks'
+
+# This class is responsible for building the JavaScript for the design system.
+class JsBuilder
+  extend Rake::FileUtilsExt
+
+  def self.build(watch: false)
+    require 'fileutils'
+
+    output_dir = "public/design_system/static/design_system-#{DesignSystem::VERSION}"
+    mkdir_p(output_dir)
+
+    command = 'npx esbuild app/javascript/design_system/index.js --bundle ' \
+              "--outfile=#{output_dir}/design_system.js --format=esm"
+    command += " --watch" if watch
+
+    if watch
+      puts "Watching for changes... Press Ctrl+C to stop"
+      trap('INT') do
+        puts "\nStopping watch mode"
+        exit
+      end
+    end
+
+    sh command
+  end
+end
+
+namespace :js do
+  desc 'Build the JavaScript for the design system'
+  task :build do
+    JsBuilder.build(watch: false)
+  end
+
+  desc 'Watch for changes and rebuild the JavaScript for the design system'
+  task :watch do
+    JsBuilder.build(watch: true)
+  end
+end

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/_base.scss

@@ -0,0 +1,3 @@
+@import "settings/index";
+@import "tools/index";
+@import "helpers/index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/all.scss

@@ -0,0 +1,7 @@
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/all' is deprecated. Update your import statement to import 'govuk/index'.",
+  $silence-further-warnings: false
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/_all.scss

@@ -0,0 +1,8 @@
+@import "../settings/warnings";
+@import "index";
+
+@include _warning(
+  "import-using-all",
+  "Importing using 'govuk/components/all' is deprecated. Update your import statement to import 'govuk/components/index'.",
+  $silence-further-warnings: false
+);

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/_index.scss

@@ -0,0 +1,38 @@
+@import "../base";
+
+@import "accordion/index";
+@import "back-link/index";
+@import "breadcrumbs/index";
+@import "button/index";
+@import "character-count/index";
+@import "checkboxes/index";
+@import "cookie-banner/index";
+@import "date-input/index";
+@import "details/index";
+@import "error-message/index";
+@import "error-summary/index";
+@import "exit-this-page/index";
+@import "fieldset/index";
+@import "file-upload/index";
+@import "footer/index";
+@import "header/index";
+@import "hint/index";
+@import "input/index";
+@import "inset-text/index";
+@import "label/index";
+@import "notification-banner/index";
+@import "pagination/index";
+@import "panel/index";
+@import "password-input/index";
+@import "phase-banner/index";
+@import "radios/index";
+@import "select/index";
+@import "service-navigation/index";
+@import "skip-link/index";
+@import "summary-list/index";
+@import "table/index";
+@import "tabs/index";
+@import "tag/index";
+@import "task-list/index";
+@import "textarea/index";
+@import "warning-text/index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/accordion/_accordion.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/accordion/_index.scss

@@ -0,0 +1,368 @@
+@include govuk-exports("govuk/component/accordion") {
+  $govuk-accordion-base-colour: govuk-colour("black");
+  $govuk-accordion-hover-colour: govuk-colour("light-grey");
+  $govuk-accordion-icon-focus-colour: $govuk-focus-colour;
+  $govuk-accordion-bottom-border-width: 1px;
+
+  .govuk-accordion {
+    @include govuk-responsive-margin(6, "bottom");
+  }
+
+  .govuk-accordion__section {
+    padding-top: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-heading {
+    // Override browser defaults to ensure consistent element height
+    margin-top: 0;
+    margin-bottom: 0;
+
+    padding-top: govuk-spacing(3);
+    padding-bottom: govuk-spacing(3);
+  }
+
+  .govuk-accordion__section-button {
+    @include govuk-font($size: 24, $weight: bold);
+    @include govuk-text-colour;
+
+    display: block;
+    margin-bottom: 0;
+    padding-top: govuk-spacing(3);
+  }
+
+  // Remove the bottom margin from the last item inside the content
+  .govuk-accordion__section-content > :last-child {
+    margin-bottom: 0;
+  }
+
+  // GOV.UK Frontend JavaScript enabled
+  .govuk-frontend-supported {
+    .govuk-accordion {
+      // Border at the bottom of the whole accordion
+      border-bottom: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
+    }
+
+    .govuk-accordion__section {
+      padding-top: 0;
+    }
+
+    // Hide the body of collapsed sections by default for browsers that lack
+    // support for `content-visibility` paired with [hidden=until-found]
+    .govuk-accordion__section-content {
+      display: none;
+
+      @include govuk-responsive-padding(3, "top");
+      @include govuk-responsive-padding(8, "bottom");
+    }
+
+    // Hide the body of collapsed sections using `content-visibility` to enable
+    // page search within [hidden=until-found] regions where browser supported
+    .govuk-accordion__section-content[hidden] {
+      @supports (content-visibility: hidden) {
+        content-visibility: hidden;
+        display: inherit;
+      }
+
+      // Hide the padding of collapsed sections
+      padding-top: 0;
+      padding-bottom: 0;
+    }
+
+    // Show the body of expanded sections
+    .govuk-accordion__section--expanded .govuk-accordion__section-content {
+      display: block;
+    }
+
+    .govuk-accordion__show-all {
+      @include govuk-font($size: 19);
+      position: relative;
+      z-index: 1;
+
+      margin-bottom: 9px;
+      padding: govuk-spacing(1) 2px govuk-spacing(1) 0;
+
+      border-width: 0;
+
+      color: $govuk-link-colour;
+      background: none;
+
+      cursor: pointer;
+      -webkit-appearance: none;
+
+      @include govuk-media-query($from: tablet) {
+        margin-bottom: 14px;
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+      }
+
+      &:hover {
+        color: $govuk-accordion-base-colour;
+        background: $govuk-accordion-hover-colour;
+        // The focus state adds a box-shadow to the top and bottom of the
+        // button. We add a grey box-shadow on hover too, to make the height of
+        // the hover state match the height of the focus state.
+        box-shadow:
+          0 -2px $govuk-accordion-hover-colour,
+          0 4px $govuk-accordion-hover-colour;
+
+        .govuk-accordion__section-toggle-text {
+          color: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron::after {
+          color: $govuk-accordion-hover-colour;
+        }
+      }
+
+      &:focus {
+        @include govuk-focused-text;
+
+        .govuk-accordion-nav__chevron {
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron::after {
+          color: $govuk-accordion-icon-focus-colour;
+        }
+      }
+    }
+
+    .govuk-accordion__section-heading {
+      padding: 0;
+    }
+
+    // Create Chevron icon aligned with text
+    .govuk-accordion-nav__chevron {
+      box-sizing: border-box;
+      display: inline-block;
+
+      position: relative;
+
+      // Set size using rems so icon scales with text
+      width: govuk-px-to-rem(20px);
+      height: govuk-px-to-rem(20px);
+
+      border: govuk-px-to-rem(1px) solid;
+      border-radius: 50%;
+
+      vertical-align: middle;
+
+      // Create inner chevron arrow
+      &::after {
+        content: "";
+        box-sizing: border-box;
+        display: block;
+
+        position: absolute;
+        bottom: govuk-px-to-rem(5px);
+        left: govuk-px-to-rem(6px);
+
+        width: govuk-px-to-rem(6px);
+        height: govuk-px-to-rem(6px);
+
+        transform: rotate(-45deg);
+
+        border-top: govuk-px-to-rem(2px) solid;
+        border-right: govuk-px-to-rem(2px) solid;
+      }
+    }
+
+    // Rotate icon to create "Down" version
+    .govuk-accordion-nav__chevron--down {
+      transform: rotate(180deg);
+    }
+
+    .govuk-accordion__section-button {
+      width: 100%;
+
+      padding: govuk-spacing(2) 0 0;
+
+      border: 0;
+
+      border-top: $govuk-accordion-bottom-border-width solid $govuk-border-colour;
+
+      // Visually separate the section from the one underneath when user changes
+      // colours in their browser. See
+      // https://github.com/alphagov/govuk-frontend/issues/2321#issuecomment-924201488
+      border-bottom: govuk-spacing(2) solid transparent;
+
+      color: $govuk-text-colour;
+      background: none;
+
+      text-align: left;
+      // Section headers have a pointer cursor as an additional affordance
+      cursor: pointer;
+      -webkit-appearance: none;
+
+      @include govuk-media-query($from: tablet) {
+        padding-bottom: govuk-spacing(2);
+      }
+
+      &:active {
+        color: $govuk-link-active-colour;
+        background: none;
+      }
+
+      &:hover {
+        color: $govuk-accordion-base-colour;
+        background: $govuk-accordion-hover-colour;
+
+        .govuk-accordion__section-toggle-text {
+          color: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron::after {
+          color: $govuk-accordion-hover-colour;
+        }
+      }
+
+      &:focus {
+        // Remove default focus border around button as styling is being applied
+        // to inner text elements that receive focus
+        outline: 0;
+
+        .govuk-accordion__section-heading-text-focus,
+        .govuk-accordion__section-summary-focus,
+        .govuk-accordion__section-toggle-focus {
+          @include govuk-focused-text;
+        }
+
+        .govuk-accordion-nav__chevron {
+          color: $govuk-accordion-base-colour;
+          background: $govuk-accordion-base-colour;
+        }
+
+        .govuk-accordion-nav__chevron::after {
+          color: $govuk-accordion-icon-focus-colour;
+        }
+      }
+
+      // Remove default button focus outline in Firefox
+      &::-moz-focus-inner {
+        padding: 0;
+        border: 0;
+      }
+    }
+
+    // Remove the transparent border when the section is expanded to make it
+    // clear that the heading relates to the content below. Adjust padding to
+    // maintain the height of the element. See
+    // https://github.com/alphagov/govuk-frontend/pull/2257#issuecomment-951920798
+    .govuk-accordion__section--expanded .govuk-accordion__section-button {
+      padding-bottom: govuk-spacing(3);
+      border-bottom: 0;
+
+      @include govuk-media-query($from: tablet) {
+        padding-bottom: govuk-spacing(4);
+      }
+    }
+
+    // As Chevron icon is vertically aligned it overlaps with the focus state
+    // bottom border – this adds some spacing
+    .govuk-accordion__section-button:focus .govuk-accordion__section-toggle-focus {
+      padding-bottom: 3px;
+
+      @include govuk-media-query($from: desktop) {
+        padding-bottom: 2px;
+      }
+    }
+
+    .govuk-accordion__section-toggle,
+    .govuk-accordion__section-heading-text,
+    .govuk-accordion__section-summary {
+      display: block;
+      margin-bottom: 13px;
+
+      .govuk-accordion__section-heading-text-focus,
+      .govuk-accordion__section-summary-focus,
+      .govuk-accordion__section-toggle-focus {
+        display: inline;
+      }
+    }
+
+    // Add toggle link with Chevron icon on left.
+    .govuk-accordion__section-toggle {
+      @include govuk-font-size($size: 19);
+      @include govuk-typography-weight-regular;
+      color: $govuk-link-colour;
+    }
+
+    // Add space between the icon and text. Avoid applying spacing directly to
+    // the icon as the use of `transform` will change the placement of any
+    // margins.
+    .govuk-accordion__show-all-text,
+    .govuk-accordion__section-toggle-text {
+      margin-left: govuk-spacing(1);
+      vertical-align: middle;
+    }
+
+    // Background colour adjustment when user changes colours in Firefox
+    //
+    // When user changes colours in Firefox, text colour inside <button> is
+    // always black (regardless of the custom colours the user has set). This is
+    // fine when the text in the button is not nested inside another element
+    // because when user changes colours in Firefox, the immediate background
+    // colour of buttons is always white (again, regardless of user's custom
+    // colours).
+    //
+    // However, when the text inside <button> is wrapped inside another element
+    // AND that element sets a background colour, the text colour is still black
+    // but the background of that nested element gets the user's custom
+    // background colour. When the custom background is a lighter hue, the
+    // contrast might be sufficient. But if the user's custom background colour
+    // is a darker colour, the contrast with the text might not be sufficient.
+    //
+    // To ensure sufficient contrast, override the background colour set by the
+    // focus state on the nested elements to be transparent.
+    //
+    // Also override the background colour of the Show/Hide chevrons which set a
+    // background colour on hover.
+    @media screen and (forced-colors: active) {
+      .govuk-accordion__show-all:hover,
+      .govuk-accordion__section-button:hover {
+        .govuk-accordion-nav__chevron {
+          background-color: transparent;
+        }
+      }
+
+      .govuk-accordion__show-all:focus,
+      .govuk-accordion__section-button:focus {
+        .govuk-accordion__section-heading-text-focus,
+        .govuk-accordion__section-summary-focus,
+        .govuk-accordion__section-toggle-focus,
+        .govuk-accordion-nav__chevron {
+          background: transparent;
+          background-color: transparent;
+        }
+      }
+    }
+
+    // For devices that can't hover such as touch devices,
+    // remove hover state as it can be stuck in that state (iOS).
+    @media (hover: none) {
+      .govuk-accordion__section-header:hover {
+        border-top-color: $govuk-border-colour;
+
+        box-shadow: inset 0 3px 0 0 $govuk-link-colour;
+
+        .govuk-accordion__section-button {
+          border-top-color: $govuk-border-colour;
+        }
+      }
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/back-link/_back-link.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/back-link/_index.scss

@@ -0,0 +1,81 @@
+@include govuk-exports("govuk/component/back-link") {
+  // Component font-size on the Frontend (used for calculations)
+  $font-size: 16;
+
+  // Size of chevron (excluding border)
+  $chevron-size: govuk-em(7px, $font-size);
+
+  // Size of chevron border
+  $chevron-border-min-width: 1px;
+  $chevron-border-width: govuk-em($chevron-border-min-width, $font-size);
+
+  // Colour of chevron
+  $chevron-border-colour: $govuk-secondary-text-colour;
+
+  .govuk-back-link {
+    @include govuk-font-size($size: $font-size);
+    @include govuk-link-common;
+    @include govuk-link-style-text;
+
+    display: inline-block;
+    position: relative;
+
+    margin-top: govuk-spacing(3);
+    margin-bottom: govuk-spacing(3);
+
+    // Allow space for the arrow
+    padding-left: govuk-em(14px, $font-size);
+  }
+
+  // Prepend left pointing chevron
+  .govuk-back-link::before {
+    content: "";
+    display: block;
+
+    // Vertically align with the parent element
+    position: absolute;
+    top: 0;
+    bottom: 0;
+    left: govuk-em(3px, $font-size);
+
+    width: $chevron-size;
+    height: $chevron-size;
+
+    margin: auto 0;
+
+    transform: rotate(225deg);
+
+    border: solid;
+    border-width: $chevron-border-min-width $chevron-border-min-width 0 0;
+    border-color: $chevron-border-colour;
+
+    @supports (border-width: unquote("max(0px)")) {
+      $border-width-eval: "max(#{$chevron-border-min-width}, #{$chevron-border-width})";
+
+      // Ensure that the chevron never gets smaller than 16px
+      border-width: unquote($border-width-eval) unquote($border-width-eval) 0 0;
+      font-size: unquote("max(#{$font-size * 1px}, 1em)");
+    }
+  }
+
+  .govuk-back-link:focus::before {
+    border-color: $govuk-focus-text-colour;
+  }
+
+  .govuk-back-link::after {
+    content: "";
+    position: absolute;
+    top: -14px;
+    right: 0;
+    bottom: -14px;
+    left: 0;
+  }
+
+  .govuk-back-link--inverse {
+    @include govuk-link-style-inverse;
+
+    &::before {
+      border-color: currentcolor;
+    }
+  }
+}

data/app/assets/stylesheets/design_system/govuk-frontend-5.11.1/components/breadcrumbs/_breadcrumbs.scss

@@ -0,0 +1,2 @@
+@import "../../base";
+@import "./index";