govuk_publishing_components 66.6.1 → 66.7.0

data/app/views/govuk_publishing_components/components/docs/chart.yml

@@ -0,0 +1,425 @@
+name: Chart (experimental)
+description: The chart component presents a data chart and a tabular version of the same data
+body: |
+  This component takes a set of data and presents it as a line graph and a table with one or more rows and lines.
+  The chart relies upon chartkick and renders using JavaScript, so the table is provided as a fallback for a lack of JavaScript,
+  an accessible view on the data for screenreaders, and a simple view of the raw data for all users.
+accessibility_criteria: |
+  Charts must:
+
+    - use line colours with a contrast ratio higher than 4.5:1 against the background colour to meet WCAG AA
+    - contain a `heading` and `description` so that skip links and semantics are accurate
+shared_accessibility_criteria:
+  - link
+uses_component_wrapper_helper: true
+examples:
+  default:
+    data:
+      heading: Chart showing page views on the website in January 2015
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January 2015.
+      source: GOV.UK
+      keys:
+        - "2015-01-01"
+        - "2015-01-02"
+        - "2015-01-03"
+        - "2015-01-04"
+        - "2015-01-05"
+        - "2015-01-06"
+        - "2015-01-07"
+        - "2015-01-08"
+        - "2015-01-09"
+        - "2015-01-10"
+      rows:
+        - label: January 2015
+          values:
+            - 500
+            - 1190
+            - 740
+            - 820
+            - 270
+            - 450
+            - 110
+            - 210
+            - 670
+            - 430
+  multiple_rows_of_data:
+    description: Where more than one series is shown on a chart, hide_legend will not work.
+    data:
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January in different years.
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+        - 8th
+        - 9th
+        - 10th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 82
+            - 27
+            - 45
+            - 11
+            - 21
+            - 67
+            - 43
+        - label: January 2016
+          values:
+            - 5
+            - 8
+            - 37
+            - 50
+            - 43
+            - 29
+            - 67
+            - 61
+            - 14
+            - 91
+        - label: January 2017
+          values:
+            - 31
+            - 81
+            - 12
+            - 15
+            - 52
+            - 61
+            - 143
+            - 27
+            - 18
+            - 34
+  hide_legend:
+    description: This will only work when there is only one row of data.
+    data:
+      hide_legend: true
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January 2015.
+      keys:
+        - "2015-01-01"
+        - "2015-01-02"
+        - "2015-01-03"
+        - "2015-01-04"
+        - "2015-01-05"
+        - "2015-01-06"
+        - "2015-01-07"
+        - "2015-01-08"
+        - "2015-01-09"
+        - "2015-01-10"
+      rows:
+        - label: January 2015
+          values:
+            - 500
+            - 1190
+            - 740
+            - 820
+            - 270
+            - 450
+            - 110
+            - 210
+            - 670
+            - 430
+  with_line_colours_and_styles:
+    description: Note that this only works on line charts. Supported line style options are solid or dotted. Supported colours are CSS colour names (e.g. red, turquoise) and CSS hex codes (e.g. "#FF0000").
+    data:
+      line_colours:
+        - orange
+        - blue
+        - "#88AA11"
+      line_styles:
+        - solid
+        - dotted
+        - solid
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January in different years.
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+      rows:
+        - label: January 2015
+          values:
+            - 110
+            - 119
+            - 105
+        - label: January 2016
+          values:
+            - 71
+            - 68
+            - 75
+        - label: January 2017
+          values:
+            - 21
+            - 42
+            - 18
+  bar_chart:
+    data:
+      chart_type: "bar"
+      heading: Hats owned
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January 2015.
+      hide_legend: true
+      keys:
+        - Jon
+        - Ash
+        - James
+        - Phil
+      rows:
+        - label: Hats owned
+          values:
+            - 3
+            - 1
+            - 1
+            - 2
+  column_chart:
+    data:
+      chart_type: "column"
+      heading: Hats owned
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January 2015.
+      hide_legend: true
+      keys:
+        - Jon
+        - Ash
+        - James
+        - Phil
+      rows:
+        - label: Hats owned
+          values:
+            - 3
+            - 1
+            - 1
+            - 2
+  format_axis_labels:
+    description: |
+      Axis labels can be forced into date or currency format as shown.
+
+      'currency' will add a currency symbol (£) at the start of the labels.
+
+      'percent' will add a percent (%) to the end of the labels.
+
+      'date' will force a standard date format of `YYYY-MM-DD` to the labels, where they are in an undesirable date format. This can be useful if there are a lot of labels on the axes because the chart can do strange truncation sometimes.
+    data:
+      v_axis_format: currency
+      h_axis_format: date
+      heading: Cost per day
+      h_axis_title: Day
+      v_axis_title: Cost
+      description: This chart shows cost per day.
+      keys:
+        - 2024 Jan 1
+        - 2024 Jan 2
+        - 2024 Jan 3
+        - 2024 Jan 4
+        - 2024 Jan 5
+        - 2024 Jan 6
+      rows:
+        - label: Cost
+          values:
+            - 14
+            - 29
+            - 45
+            - 63
+            - 54
+            - 22
+  horizontal_table:
+    description: Reorient the table to better suit the output of some data sets.
+    data:
+      table_direction: horizontal
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January in different years.
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  scale_y_axis_based_on_data:
+    description: |
+      By default the Y-axis will always start at zero, but this may not always be required.
+
+      If there are empty items in the data the chart line will either discontinue or leave a gap, as shown.
+    data:
+      y_axis_auto_adjust: true
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January 2015.
+      hide_legend: true
+      keys:
+        - "2015-01-01"
+        - "2015-01-02"
+        - "2015-01-03"
+        - "2015-01-04"
+        - "2015-01-05"
+        - "2015-01-06"
+        - "2015-01-07"
+        - "2015-01-08"
+        - "2015-01-09"
+        - "2015-01-10"
+        - "2015-01-11"
+        - "2015-01-12"
+        - "2015-01-13"
+      rows:
+        - label: January 2015
+          values:
+            - 1500
+            - 1190
+            - 1740
+            - 1820
+            - 1270
+            -
+            -
+            - 1450
+            - 1110
+            - 1210
+            - 1670
+            - 1430
+            - 1352
+  with_a_different_heading_level:
+    description: Use a different heading level for the chart heading. It defaults to a H2.
+    data:
+      heading_level: 4
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January in different years.
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  with_a_download_link:
+    description: Add a download link to the original data. Doesn't do anything clever, just creates a link to the URL passed.
+    data:
+      download_link: 'https://www.gov.uk'
+      heading: Page views chart
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This chart shows page views for January in different years.
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80
+  with_a_different_height:
+    description: |
+      Sets a height in pixels for the chart, defaulting to `400`. This is useful where the chart might appear in a narrow column and the default height would be too tall.
+
+      The component is not currently responsive.
+    data:
+      heading: Page views
+      h_axis_title: Day
+      v_axis_title: Views
+      description: This is a graph of views per day
+      height: 200
+      keys:
+        - 1st
+        - 2nd
+        - 3rd
+        - 4th
+        - 5th
+        - 6th
+        - 7th
+      rows:
+        - label: January 2015
+          values:
+            - 5
+            - 119
+            - 74
+            - 117
+            - 33
+            - 89
+            - 79
+        - label: January 2016
+          values:
+            - 3
+            - 8
+            - 37
+            - 82
+            - 118
+            - 85
+            - 80

data/app/views/govuk_publishing_components/components/docs/service_navigation.yml

@@ -24,6 +24,17 @@ examples:
         href: "#"
       - text: Navigation item 3
         href: "#"
+  with_custom_mobile_toggle_text:
+    data:
+      toggle_text: See the menu
+      navigation_items:
+      - text: Navigation item 1
+        href: "#"
+        active: true
+      - text: Navigation item 2
+        href: "#"
+      - text: Navigation item 3
+        href: "#"
   with_service_name:
     data:
       service_name: My service name

data/app/views/govuk_publishing_components/components/docs/tabs.yml

@@ -10,13 +10,14 @@ body: |
 
   The content block MUST be passed as a block to avoid the risk of unsanitised HTML.
 accessibility_criteria: |
-  - Tabs must:
-    * accept focus
-    * be usable with a keyboard
-    * indicate when they have focus
-    * be usable with touch
-    * be usable with voice commands
-    * have visible text
+  Tabs must:
+
+  * accept focus
+  * be usable with a keyboard
+  * indicate when they have focus
+  * be usable with touch
+  * be usable with voice commands
+  * have visible text
 uses_component_wrapper_helper: true
 examples:
   default:

data/config/locales/ar.yml

@@ -46,6 +46,12 @@ ar:
       type:
         characters: أحرف
         words: كلمات
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: أو
     contents_list:
@@ -221,6 +227,8 @@ ar:
       input_title: بحث
       label: بحث على GOV.UK
       search_button: بحث
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/az.yml

@@ -42,6 +42,12 @@ az:
       type:
         characters: simvol
         words: söz
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: və ya
     contents_list:
@@ -218,6 +224,8 @@ az:
       input_title: Axtar
       label: GOV.UK-də axtar
       search_button: Axtar
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/be.yml

@@ -44,6 +44,12 @@ be:
       type:
         characters: знакаў
         words: словаў
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: або
     contents_list:
@@ -224,6 +230,8 @@ be:
       input_title: Пошук
       label: Шукаць на GOV.UK
       search_button: Пошук
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/bg.yml

@@ -42,6 +42,12 @@ bg:
       type:
         characters: символа
         words: думи
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: или
     contents_list:
@@ -222,6 +228,8 @@ bg:
       input_title: Търсене
       label: Търсене в GOV.UK
       search_button: Търсене
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/bn.yml

@@ -42,6 +42,12 @@ bn:
       type:
         characters: ক্যারেক্টার
         words: শব্দসমষ্টি
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: অথবা
     contents_list:
@@ -219,6 +225,8 @@ bn:
       input_title: খুঁজুন
       label: GOV.UK-এ অনুসন্ধান করুন
       search_button: খুঁজুন
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/cs.yml

@@ -43,6 +43,12 @@ cs:
       type:
         characters: znaky
         words: slova
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: nebo
     contents_list:
@@ -223,6 +229,8 @@ cs:
       input_title: Vyhledávání
       label: Vyhledávání na GOV.UK
       search_button: Vyhledávání
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/cy.yml

@@ -46,6 +46,12 @@ cy:
       type:
         characters: nodau
         words: geiriau
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: neu
     contents_list:
@@ -222,6 +228,8 @@ cy:
       input_title: Chwilio
       label: Chwilio ar GOV.UK
       search_button: Chwilio
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab: Bydd rhannu yn agor y dudalen hon mewn tab newydd
       opens_in_new_tab:

data/config/locales/da.yml

@@ -42,6 +42,12 @@ da:
       type:
         characters: Tegn
         words: ord
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: eller
     contents_list:
@@ -219,6 +225,8 @@ da:
       input_title: Søge
       label: Søg i GOV.UK
       search_button: Søge
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/de.yml

@@ -42,6 +42,12 @@ de:
       type:
         characters: Zeichen
         words: Wörter
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: oder
     contents_list:
@@ -222,6 +228,8 @@ de:
       input_title: Suche
       label: Auf GOV.UK suchen
       search_button: Suche
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/dr.yml

@@ -45,6 +45,12 @@ dr:
       type:
         characters: ارقام
         words: کلمات
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: یا
     contents_list:
@@ -220,6 +226,8 @@ dr:
       input_title: جستجو نمایید
       label: در GOV.UK جستجو نمایید
       search_button: جستجو نمایید
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab:

data/config/locales/el.yml

@@ -42,6 +42,12 @@ el:
       type:
         characters: χαρακτήρες
         words: λέξεις
+    chart:
+      accessibility_heading:
+      accessibility_html:
+      accessibility_link:
+      source:
+      table_dropdown:
     checkboxes:
       or: ή
     contents_list:
@@ -218,6 +224,8 @@ el:
       input_title: Αναζήτηση
       label: Αναζήτηση στο GOV.UK
       search_button: Αναζήτηση
+    service_navigation:
+      menu_toggle:
     share_links:
       all_opens_in_new_tab:
       opens_in_new_tab: