From a2d3083ae3d5d2fecc3883fc6b0645ef16d0401a Mon Sep 17 00:00:00 2001 From: Ana Botto Date: Mon, 27 Nov 2023 13:53:54 +0000 Subject: [PATCH 1/4] AC/ACB - WIP for mermaid accessibility visualisation spike --- app/controllers/mermaid_controller.rb | 4 + app/views/mermaid/index.html.erb | 114 ++++++++++++++++++++++++++ config/routes.rb | 1 + 3 files changed, 119 insertions(+) create mode 100644 app/controllers/mermaid_controller.rb create mode 100644 app/views/mermaid/index.html.erb diff --git a/app/controllers/mermaid_controller.rb b/app/controllers/mermaid_controller.rb new file mode 100644 index 000000000..6f98eae1e --- /dev/null +++ b/app/controllers/mermaid_controller.rb @@ -0,0 +1,4 @@ +# frozen_string_literal: true + +class MermaidController < ApplicationController +end diff --git a/app/views/mermaid/index.html.erb b/app/views/mermaid/index.html.erb new file mode 100644 index 000000000..4d553e49c --- /dev/null +++ b/app/views/mermaid/index.html.erb @@ -0,0 +1,114 @@ +

Driving in Great Britain on a non-GB licence

+
+            flowchart TD
+            accTitle: Flowchart for Driving in Great Britain on a non-GB licence
+            AA["`Start`"]:::start
+            A["`Q1 Are you:`"]:::question
+            B["`Q2 What kind of driving licence do you have?`"]:::question
+            C["`Q3 Where did you pass your test?`"]:::question
+            D["`Q4 Where did you pass your test?`"]:::question
+            E["`Q5 Where did you pass your test?`"]:::question
+            F["`Q6 Where are you from?`"]:::question
+            G{{"`O1: You can drive in Great Britain on your full, valid driving licence until it expires`"}}:::outcome
+            H{{"`O2: You can drive in Great Britain on your full, valid driving licence`"}}:::outcome
+            I{{"`O3: You can drive in Great Britain on your full, valid driving licence for 12 months from when you became resident`"}}:::outcome
+            J{{"`O4: You can drive in Great Britain on your full, valid driving licence for 12 months from when you became resident`"}}:::outcome
+            K{{"`O5: You can drive in Great Britain on your full, valid licence until you’re 45, or for 5 years after you become resident in Great Britain, whichever is longer`"}}:::outcome
+            L{{"`O6: You cannot drive a lorry, minibus or bus in Great Britain (GB) on your driving licence`"}}:::outcome
+            M{{"`O7: You cannot drive a lorry, minibus or bus in Great Britain (GB) on your driving licence`"}}:::outcome
+            N{{"`O8: You cannot drive a lorry, minibus or bus in Great Britain (GB) on your driving licence`"}}:::outcome
+            O{{"`O9: You can drive any type of vehicle listed on your full and valid licence`"}}:::outcome
+            P{{"`O10: You can drive any type of small vehicle (for example cars or motorcycles) listed on your full and valid licence for 12 months from when you last entered Great Britain (GB)`"}}:::outcome
+            Q{{"`O11: You can drive any type of small vehicle (for example cars or motorcycles) listed on your full and valid licence for 12 months from when you last entered Great Britain (GB)`"}}:::outcome
+            R{{"`O12: You can drive in Great Britain for as long as your licence is valid, or until you're 70, if you've got a driving licence from a European Union (EU) country`"}}:::outcome
+            S{{"`O13: You can drive in Great Britain for 12 months if you’ve got a non-European Union (EU) driving licence or international driving permit`"}}:::outcome
+            T{{"`O14: You can drive any type of small vehicle (for example cars or motorcycles) listed on your full and valid licence for 12 months after becoming resident in Great Britain`"}}:::outcome
+            U{{"`O15: You can drive in Great Britain (GB) on your full, valid driving licence for 12 months from when you became a resident`"}}:::outcome
+
+            NA(["`a resident of Great Britain?`"]):::answer
+            NB(["`a visitor of Great Britain?`"]):::answer
+            NC(["`a foreign student studying in Great Britain?`"]):::answer
+
+            ND(["`Full car and motorcycle`"]):::answer
+            NE(["`Full lorry, minibus and bus`"]):::answer
+
+            NF(["`Great Britain and Northern Ireland`"]):::answer
+            NG(["`European Union or European Economic Area`"]):::answer
+            NH(["`Gibraltar, Jersey, Guernsey, Isle of Man or a 'designated country or territory'*`"]):::answer
+            NI(["`Any other country`"]):::answer
+
+            NJ(["`Great Britain and Northern Ireland`"]):::answer
+            NK(["`European Union or European Economic Area`"]):::answer
+            NL(["`Switzerland`"]):::answer
+            NM(["`Gibraltar, Jersey, Guernsey or the Isle of Man`"]):::answer
+            NN(["`A 'designated country or territory'*`"]):::answer
+            NO(["`Any other country`"]):::answer
+
+            NP(["`Great Britain and Northern Ireland`"]):::answer
+            NQ(["`European Union or European Economic Area`"]):::answer
+            NR(["`Jersey, Guernsey or the Isle of Man`"]):::answer
+            NS(["`Any other country`"]):::answer
+
+            NT(["`European Union or European Economic Area`"]):::answer
+            NU(["`Non-European Union`"]):::answer
+
+            AA-->A
+            A---NA
+            NA-->B
+            A---NB
+            NB-->E
+            A---NC
+            NC-->F
+
+            B---ND
+            ND-->C
+            B---NE
+            NE-->D
+
+            C---NF
+            NF-->U
+            C---NG
+            NG-->H
+            C---NH
+            NH-->I
+            C---NI
+            NI-->J
+
+            D---NJ
+            NJ-->N
+            D---NK
+            NK-->K
+            D---NL
+            NL-->T
+            D---NM
+            NM-->I
+            D---NN
+            NN-->L
+            D---NO
+            NO-->M
+
+            E---NP
+            NP-->G
+            E---NQ
+            NQ-->O
+            E---NR
+            NR-->P
+            E---NS
+            NS-->Q
+
+            F---NT
+            NT-->R
+            F---NU
+            NU-->S
+
+
+      classDef answer fill: #f3f2f1
+      classDef outcome fill:#003078,color:#ffffff;
+      classDef question fill: #ffffff
+      classDef start fill:#00703c
+
+ + diff --git a/config/routes.rb b/config/routes.rb index 3e07b1f17..43a43de6e 100644 --- a/config/routes.rb +++ b/config/routes.rb @@ -69,6 +69,7 @@ get "/admin(/*path)", to: redirect { |params, _req| "/#{params[:path]}" } get "/govuk-sitemap.xml" => "sitemap#index" + resources :mermaid mount GovukAdminTemplate::Engine, at: "/style-guide" end From fb3d08d0be9e5f36f1c29511f92ca81df5f2f369 Mon Sep 17 00:00:00 2001 From: Ana Botto Date: Tue, 28 Nov 2023 10:09:31 +0000 Subject: [PATCH 2/4] Add new colours and width of container to 100% --- app/views/mermaid/index.html.erb | 31 +++++++++++++++++++++++++------ 1 file changed, 25 insertions(+), 6 deletions(-) diff --git a/app/views/mermaid/index.html.erb b/app/views/mermaid/index.html.erb index 4d553e49c..3e35be2da 100644 --- a/app/views/mermaid/index.html.erb +++ b/app/views/mermaid/index.html.erb @@ -1,7 +1,23 @@

Driving in Great Britain on a non-GB licence

+  %%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'background': '#FFFFFF',
+      'primaryColor': '#ffffff',
+      'primaryTextColor': '#0B0C0C',
+      'lineColor': '#0b0c0c',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff',
+      'fontSize': '19px'
+    }
+  }
+}%%
+
             flowchart TD
             accTitle: Flowchart for Driving in Great Britain on a non-GB licence
+            accDescr: A flowchart for the Driving in Great Britain on a non-GB licence smart answer
             AA["`Start`"]:::start
             A["`Q1 Are you:`"]:::question
             B["`Q2 What kind of driving licence do you have?`"]:::question
@@ -101,14 +117,17 @@
             F---NU
             NU-->S
 
-
-      classDef answer fill: #f3f2f1
-      classDef outcome fill:#003078,color:#ffffff;
-      classDef question fill: #ffffff
-      classDef start fill:#00703c
+      classDef answer fill: #F3F2F1, stroke:#505A5F;
+      classDef outcome fill: #6FA4D2
+      classDef question fill: #B1B4B6, stroke:#505A5F;
+      classDef start fill:#44ADA5
+ - From 7d22efc8e5376ab2e5e0c944b6dd26a5f7d79f94 Mon Sep 17 00:00:00 2001 From: Anna Cavalla Date: Tue, 28 Nov 2023 12:21:28 +0000 Subject: [PATCH 3/4] Make mermaid diagram scrollable width-wise --- app/controllers/mermaid_controller.rb | 1 + app/views/mermaid/index.html.erb | 7 +++++-- app/views/mermaid/indexnew.html.erb | 30 +++++++++++++++++++++++++++ 3 files changed, 36 insertions(+), 2 deletions(-) create mode 100644 app/views/mermaid/indexnew.html.erb diff --git a/app/controllers/mermaid_controller.rb b/app/controllers/mermaid_controller.rb index 6f98eae1e..61f0ec8a6 100644 --- a/app/controllers/mermaid_controller.rb +++ b/app/controllers/mermaid_controller.rb @@ -1,4 +1,5 @@ # frozen_string_literal: true class MermaidController < ApplicationController + end diff --git a/app/views/mermaid/index.html.erb b/app/views/mermaid/index.html.erb index 3e35be2da..1b6e557ca 100644 --- a/app/views/mermaid/index.html.erb +++ b/app/views/mermaid/index.html.erb @@ -1,5 +1,5 @@

Driving in Great Britain on a non-GB licence

-
+
   %%{
   init: {
     'theme': 'base',
@@ -126,8 +126,11 @@
   .container{
       width: 100% !important;
   }
+  .mermaid {
+      background-color: white;
+  }
 
 
diff --git a/app/views/mermaid/indexnew.html.erb b/app/views/mermaid/indexnew.html.erb
new file mode 100644
index 000000000..e5893f4a1
--- /dev/null
+++ b/app/views/mermaid/indexnew.html.erb
@@ -0,0 +1,30 @@
+
 Driving in Great Britain on a non-GB licence

+
+  %%{
+  init: {
+    'theme': 'base',
+    'themeVariables': {
+      'primaryColor': '#fff',
+      'primaryTextColor': '#0B0C0C',
+      'primaryBorderColor': '#0B0C0C',
+      'secondaryColor': '#006100',
+      'tertiaryColor': '#fff'
+    }
+  }
+}%%
+        graph TD
+          A[Start] --- B[Q1 Are you:]
+          B --> C[a resident of Great Britain?]
+          B --> D[a visitor of Great Britain?]
+          B --> E[a foreign student studying in Great Britain?]
+          E --> F
+          F[Q2 What kind of driving licence do you have?]
+
+
+        style A fill:#006100,color:#ffffff
+    

+
+

From 45f2b9d9f4a84023df2ac4fa18c992a5d698a4f4 Mon Sep 17 00:00:00 2001
From: Ana Botto 
Date: Tue, 28 Nov 2023 16:49:29 +0000
Subject: [PATCH 4/4] Fix wrapping in words and adds green to start

---
 app/controllers/mermaid_controller.rb |  1 -
 app/views/mermaid/index.html.erb      | 11 +++++++----
 2 files changed, 7 insertions(+), 5 deletions(-)

diff --git a/app/controllers/mermaid_controller.rb b/app/controllers/mermaid_controller.rb
index 61f0ec8a6..6f98eae1e 100644
--- a/app/controllers/mermaid_controller.rb
+++ b/app/controllers/mermaid_controller.rb
@@ -1,5 +1,4 @@
 # frozen_string_literal: true
 
 class MermaidController < ApplicationController
-
 end
diff --git a/app/views/mermaid/index.html.erb b/app/views/mermaid/index.html.erb
index 1b6e557ca..143778ee6 100644
--- a/app/views/mermaid/index.html.erb
+++ b/app/views/mermaid/index.html.erb
@@ -10,7 +10,7 @@
       'lineColor': '#0b0c0c',
       'secondaryColor': '#006100',
       'tertiaryColor': '#fff',
-      'fontSize': '19px'
+      'fontSize': '23.75px'
     }
   }
 }%%
@@ -18,7 +18,7 @@
             flowchart TD
             accTitle: Flowchart for Driving in Great Britain on a non-GB licence
             accDescr: A flowchart for the Driving in Great Britain on a non-GB licence smart answer
-            AA["`Start`"]:::start
+            AA[Start]:::start
             A["`Q1 Are you:`"]:::question
             B["`Q2 What kind of driving licence do you have?`"]:::question
             C["`Q3 Where did you pass your test?`"]:::question
@@ -120,14 +120,17 @@
       classDef answer fill: #F3F2F1, stroke:#505A5F;
       classDef outcome fill: #6FA4D2
       classDef question fill: #B1B4B6, stroke:#505A5F;
-      classDef start fill:#44ADA5
+      classDef start fill:#00703c,color: #ffffff