DS preview

CHANGELOG.md

@@ -9,7 +9,16 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 
 ### Added
 
+- Refurbished preview pages to mirror NHSUK and GOVUK design system websites
+- Added `ds_code` to render a block of code
 - Added `ds_list` for plain lists, bullet lists, and numberedlists
+- Added `ds_paragraph` for creating a normal `<p>` body paragraph, and `lead_paragraph` to `fixed_elements` for creating a page-top introductory paragraph
+- Added `ds_inset_text` for differentiating a block of text (e.g. quotes) from the surrounding content
+- Added `ds_grid` for building grid layout
+
+### Fixed
+
+- Fixed the broken cypress test for the footer
 
 ## [0.12.0] - 2026-02-02
 

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: #b75501;
+}
+
+.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: #b75501;
+}
+
+.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;
+}

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,40 @@
   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;
+}
+
+.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;
+}

app/assets/stylesheets/design_system/nhsuk.scss

@@ -3,3 +3,64 @@
 @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: #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;
+}
+
+.app-example__code pre {
+  margin: 0;
+  min-width: min-content;
+}
+
+.app-example__copy-button {
+  @extend .nhsuk-button;
+  @extend .nhsuk-button--reverse;
+  @extend .nhsuk-button--small;
+  margin: 0;
+  position: absolute;
+  top: 0.5rem;
+  right: 0.5rem;
+  background-color: rgb(255, 255, 255);
+  color: rgb(0, 127, 59);
+  border-top-color: rgb(0, 127, 59);
+  border-top-style: solid;
+  border-top-width: 1px;
+  border-right-color: rgb(0, 127, 59);
+  border-right-style: solid;
+  border-right-width: 1px;
+  border-bottom-color: rgb(0, 127, 59);
+  border-bottom-style: solid;
+  border-bottom-width: 0px;
+  border-left-color: rgb(0, 127, 59);
+  border-left-style: solid;
+  border-left-width: 1px;
+  border-radius: 3px;
+  box-shadow: rgb(0, 127, 59) 0px 4px 0px 0px;
+  outline-style: none;
+  font-family: "Frutiger W01";
+  font-size: 14px;
+  font-weight: 400;
+  line-height: 24px;
+  text-align: center;
+  text-decoration: none;
+}

app/helpers/design_system_helper.rb

@@ -136,4 +136,8 @@ def ds_list(type: :default, **options, &block)
   def ds_inset_text(text = nil, ...)
     DesignSystem::Registry.builder(brand, 'inset_text', self).render_inset_text(text, ...)
   end
+
+  def ds_code(code, language)
+    DesignSystem::Registry.builder(brand, 'code', self).render_code(code, language)
+  end
 end

app/javascript/design_system/controllers/clipboard_controller.js

@@ -0,0 +1,41 @@
+// app/javascript/controllers/clipboard_controller.js
+import { Controller } from '@hotwired/stimulus'
+
+export default class extends Controller {
+  static targets = ['source', 'buttonText']
+
+  // Copies the selected text to the clipboard.
+  copy () {
+    if (navigator.clipboard && this.hasSourceTarget) {
+      // The selected text to be copied.
+      const copytext = this.sourceTarget.value || this.sourceTarget.innerText
+
+      navigator.clipboard.writeText(copytext)
+        .then(() => {
+        // Fired when the text is successfully copied to the clipboard.
+          this.showCopiedMessage()
+        }).catch(err => {
+        // Fired if an error occurs while copying the text to the clipboard.
+          console.error('Failed to copy text: ', err)
+        })
+    } else {
+      // Fired if the Clipboard API is not available or the source target is missing.
+      console.error('Clipboard API not available or source target missing')
+    }
+  }
+
+  showCopiedMessage () {
+    // The text to be displayed in the button.
+    this.buttonTextTarget.textContent = 'Copied!'
+
+    // The time interval after which the button text should be reset to "Copy".
+    const resetInterval = 2000
+
+    // Resets the button text to "Copy" after the specified time interval.
+    const resetButtonText = () => {
+      this.buttonTextTarget.textContent = 'Copy'
+    }
+
+    setTimeout(resetButtonText, resetInterval)
+  }
+}

app/javascript/design_system/controllers/code_highlight_controller.js

@@ -0,0 +1,9 @@
+import { Controller } from '@hotwired/stimulus'
+import hljs from 'highlight.js'
+
+// Connects to data-controller="code-highlight"
+export default class extends Controller {
+  connect () {
+    hljs.highlightElement(this.element)
+  }
+}

app/javascript/design_system/index.js

@@ -1,10 +1,14 @@
 // Import and register all your controllers
+import ClipboardController from './controllers/clipboard_controller'
+import CodeHighlightController from './controllers/code_highlight_controller'
 import HelloWorldController from './controllers/hello_world_controller'
 import ShowPasswordController from './controllers/show_password_controller'
 import Timeago from '@stimulus-components/timeago'
 
 // Register design system controllers with Stimulus
 export const registerControllers = (application) => {
+  application.register('ds--clipboard', ClipboardController)
+  application.register('ds--code-highlight', CodeHighlightController)
   application.register('ds--hello-world', HelloWorldController)
   application.register('ds--show-password', ShowPasswordController)
   application.register('timeago', Timeago)

app/views/layouts/govuk/application.html.erb

@@ -53,7 +53,7 @@
   <header class="govuk-header" data-module="govuk-header">
     <div class="govuk-header__container govuk-width-container">
       <div class="govuk-header__logo">
-        <a href="#" class="govuk-header__link govuk-header__link--homepage">
+        <a href="<%= main_app.root_path %>" class="govuk-header__link govuk-header__link--homepage">
           <svg
             focusable="false"
             role="img"
@@ -120,8 +120,12 @@
     <%= yield :breadcrumbs %>
     <%= yield :backlink %>
     <main class="govuk-main-wrapper" id="main-content">
-      <%= render :partial => 'layouts/alert_and_notice' %>
-      <%= yield %>
+      <% if content_for?(:main_content_wrapper) %>
+        <%= yield :main_content_wrapper %>
+      <% else %>
+        <%= render :partial => 'layouts/alert_and_notice' %>
+        <%= yield %>
+      <% end %>
     </main>
   </div>
   <footer class="govuk-footer">

app/views/layouts/nhsuk/application.html.erb

@@ -30,7 +30,7 @@
 
     <div class="nhsuk-header__container nhsuk-width-container">
       <div class="nhsuk-header__service">
-        <a class="nhsuk-header__service-logo nhsuk-header__link--service" href="/" aria-label="NHS homepage">
+        <a class="nhsuk-header__service-logo nhsuk-header__link--service" href="<%= main_app.root_path %>" aria-label="NHS homepage">
           <svg class="nhsuk-header__logo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 80" height="40" width="100" focusable="false" role="img" aria-label="NHS">
             <title>NHS</title>
             <path fill="currentcolor" d="M200 0v80H0V0h200Zm-27.5 5.5c-14.5 0-29 5-29 22 0 10.2 7.7 13.5 14.7 16.3l.7.3c5.4 2 10.1 3.9 10.1 8.4 0 6.5-8.5 7.5-14 7.5s-12.5-1.5-16-3.5L135 70c5.5 2 13.5 3.5 20 3.5 15.5 0 32-4.5 32-22.5 0-19.5-25.5-16.5-25.5-25.5 0-5.5 5.5-6.5 12.5-6.5a35 35 0 0 1 14.5 3l4-13.5c-4.5-2-12-3-20-3Zm-131 2h-22l-14 65H22l9-45h.5l13.5 45h21.5l14-65H64l-9 45h-.5l-13-45Zm63 0h-18l-13 65h17l6-28H117l-5.5 28H129l13.5-65H125L119.5 32h-20l5-24.5Z" />
@@ -68,13 +68,16 @@
     <%= yield :backlink %>
 
     <main class="nhsuk-main-wrapper " id="maincontent" role="main">
-      <%= render :partial => 'layouts/alert_and_notice' %>
-      <div class="nhsuk-grid-row">
-        <div class="nhsuk-grid-column-full">
-          <%= yield %>
+      <% if content_for?(:main_content_wrapper) %>
+        <%= yield :main_content_wrapper %>
+      <% else %>
+        <%= render :partial => 'layouts/alert_and_notice' %>
+        <div class="nhsuk-grid-row">
+          <div class="nhsuk-grid-column-full">
+            <%= yield %>
+          </div>
         </div>
-      </div>
-
+      <% end %>
     </main>
   </div>