govuk_publishing_components 69.0.0 → 69.0.1

checksums.yaml

@@ -1,7 +1,7 @@
 ---
 SHA256:
-  metadata.gz: 4d6a8ca8a18729239925c15778ecfe6f9e699c8c1531d199e3259ed084c2b40f
-  data.tar.gz: f94b13c75a3b38547a27716a5b40252b8a62a83cd609365c056eb578d6901741
+  metadata.gz: 7ef65da7a43de24384ff591a5372421adc4b37ea3068de5ee79e950a6c0308a2
+  data.tar.gz: 10ec8256a3e2926604637f31a3b8b1d4cde66904ec5e10f9ecd40c84e43a7234
 SHA512:
-  metadata.gz: 5318a3a3ddda3807aedfa588342b942574d5d863ca064d553b9fd83beb0a9817e927f0e8583bd76a9dd90a344b7961e7f4c8c6bcbbb0f1bc2d32bfdc01575b1c
-  data.tar.gz: bca644a69295230d4e4715a01819589b4e50c11c84e47b5410772e4b614b9d7bcbf109680b50015a63907195dea5f7eaa586672e18c0f5115507a11815c54706
+  metadata.gz: a01d7b1835bc4be99ff486e58a684680e953c7a18bca989a34faa7e6b8c9cb61824a89b3ae5404a5d3973b4a0f73af53fea1daae7fc8baea632606d31652cb43
+  data.tar.gz: 87c150783adf82091421fff2693d1abc336c79d9ab64d61189285bf0ab17a591b29cab7c7df646fcfba6291728a076f90bd8c6cc70d4c4028e6d35d5d99bcb8d

data/app/assets/javascripts/govuk_publishing_components/lib/govspeak/magna-charta.js

@@ -389,6 +389,17 @@
       for (var j = 0; j < cells.length; j++) {
         var $cell = cells[j]
         var parsedCellVal = parseFloat(this.utils.stripValue($cell.innerText), 10)
+
+        if (isNaN(parsedCellVal)) {
+          parsedCellVal = 0
+
+          if (this.options.stacked) {
+            $cell.classList.add('govuk-visually-hidden')
+          } else {
+            $cell.classList.add('mc-no-data')
+          }
+        }
+
         var parsedVal = parsedCellVal * this.dimensions.single
         var absParsedCellVal = Math.abs(parsedCellVal)
         var absParsedVal = Math.abs(parsedVal)

data/app/assets/stylesheets/govuk_publishing_components/components/govspeak/_charts.scss

@@ -21,7 +21,7 @@
   $base-unit: 16px; // For font sizes and related spacing
   $compact-font-size: 12px; // For the 'compact' bar style
   $bar-padding: 8px; // The padding between the bar values and the edge of the bar
-  $bar-spacing: 5px; // The spacing around the bars
+  $bar-spacing: 10px; // The spacing around the bars
   $stack-spacing: 1px; // For stacked bars, the spacing between each stack in a bar
   $caption-side: top; // Caption alignment. Top or bottom.
 
@@ -52,7 +52,6 @@
     width: 100%;
     border-spacing: 0 $bar-spacing;
     border: 1px solid $chart-border;
-    padding: $base-unit 0;
     position: relative;
     margin-bottom: $base-unit;
 
@@ -156,6 +155,18 @@
             background-color: list.nth($bar-colours, $i + 1);
             color: list.nth($bar-text-colours, $i + 1);
           }
+
+          .mc-bar-#{$i + 1}.mc-no-data {
+              color: govuk-colour("black");
+              border-width: 2px;
+              border-style: solid;
+              border-color: list.nth($bar-colours, $i + 1);
+          }
+        }
+
+        .mc-no-data span {
+          display: inline-block;
+          min-width: 75px;
         }
 
         // Negative bars

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

@@ -634,7 +634,32 @@ examples:
               <td>row 3</td><td>2</td>
             </tr>
             <tr>
-              <td>row 4</td><td>48</td>
+              <td>row 4</td><td>No data</td>
+            </tr>
+          </tbody>
+        </table>
+  negative_charts:
+    description: |
+      Charts can contain positive and negative values if the 'mc-negative' class is added to the table.
+    data:
+      block: |
+        <table class='js-barchart-table mc-auto-outdent mc-negative'>
+          <caption>Calorie Gain/Loss by Superhero</caption>
+          <tbody>
+            <tr>
+              <td>Hulk</td><td>6000</td>
+            </tr>
+            <tr>
+              <td>Thor</td><td>5000</td>
+            </tr>
+            <tr>
+              <td>Spiderman</td><td>-2000</td>
+            </tr>
+            <tr>
+              <td>Iron Man</td><td>No data</td>
+            </tr>
+            <tr>
+              <td>Black Widow</td><td>-1500</td>
             </tr>
           </tbody>
         </table>
@@ -686,9 +711,9 @@ examples:
             <tr><th>Some Data</th><th>YES</th><th>NO</th><th>MAYBE</th></tr>
           </thead>
           <tbody>
-            <tr><th>Testing One</th><td>5</td><td>6</td><td>11</td></tr>
-            <tr><th>Testing Two</th><td>6</td><td>2</td><td>8</td></tr>
-            <tr><th>Testing Three</th><td>3</td><td>9</td><td>12</td></tr>
+            <tr><th>Testing One</th><td>No data</td><td>7</td><td>6</td></tr>
+            <tr><th>Testing Two</th><td>6</td><td>2</td><td>No data</td></tr>
+            <tr><th>Testing Three</th><td>3</td><td>No data</td><td>9</td></tr>
           </tbody>
         </table>
   chart_stacked:
@@ -700,6 +725,7 @@ examples:
               <th scope="col">Colours</th>
               <th scope="col">Fruits</th>
               <th scope="col">Vegetables</th>
+              <th scope="col">Chocolates</th>
               <th scope="col">Beans</th>
               <th scope="col">Nuts</th>
               <th scope="col">Total</th>
@@ -709,6 +735,7 @@ examples:
             <tr>
               <td>Red</td>
               <td>23</td>
+              <td> No data</td>
               <td>9</td>
               <td>2</td>
               <td>1</td>
@@ -717,6 +744,7 @@ examples:
             <tr>
               <td>Green</td>
               <td>5</td>
+              <td>No data</td>
               <td>33</td>
               <td>8</td>
               <td>0</td>
@@ -727,6 +755,7 @@ examples:
               <td>2</td>
               <td>10</td>
               <td>0</td>
+              <td>No data</td>
               <td>15</td>
               <td>27</td>
             </tr>

data/lib/govuk_publishing_components/version.rb

@@ -1,3 +1,3 @@
 module GovukPublishingComponents
-  VERSION = "69.0.0".freeze
+  VERSION = "69.0.1".freeze
 end

metadata

@@ -1,7 +1,7 @@
 --- !ruby/object:Gem::Specification
 name: govuk_publishing_components
 version: !ruby/object:Gem::Version
-  version: 69.0.0
+  version: 69.0.1
 platform: ruby
 authors:
 - GOV.UK Dev