Merge pull request #5114 from colinrotherham/small-checkboxes-divider

Fix divider width for small checkboxes
alphagov · Jul 11, 2024 · 357ed9a · 357ed9a
2 parents 9bbd9ac + bea7856
commit 357ed9a
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 2 deletions.
diff --git a/src/govuk/components/checkboxes/_index.scss b/src/govuk/components/checkboxes/_index.scss
@@ -255,6 +255,11 @@
       padding-left: ($govuk-touch-target-size - $input-offset) - ($margin-left + $conditional-border-width);
     }
 
+    .govuk-checkboxes__divider {
+      width: $govuk-small-checkboxes-size;
+      margin-bottom: govuk-spacing(1);
+    }
+
     // Hover state for small checkboxes.
     //
     // We use a hover state for small checkboxes because the touch target size

diff --git a/src/govuk/components/checkboxes/checkboxes.yaml b/src/govuk/components/checkboxes/checkboxes.yaml
@@ -196,6 +196,7 @@ examples:
         - other
 
   - name: with divider and None
+    screenshot: true
     options:
       name: with-divider-and-none
       fieldset:
@@ -700,6 +701,26 @@ examples:
         - value: b
           text: another thing
 
+  - name: small with divider and None
+    screenshot: true
+    options:
+      name: small-with-divider-and-none
+      classes: govuk-checkboxes--small
+      fieldset:
+        legend:
+          text: Which types of waste do you transport regularly?
+      items:
+        - value: animal
+          text: Waste from animal carcasses
+        - value: mines
+          text: Waste from mines or quarries
+        - value: farm
+          text: Farm or agricultural waste
+        - divider: or
+        - value: none
+          text: None of these
+          behaviour: exclusive
+
   # Hidden examples are not shown in the review app, but are used for tests and HTML fixtures
   - name: with idPrefix
     hidden: true

diff --git a/src/govuk/components/radios/radios.yaml b/src/govuk/components/radios/radios.yaml
@@ -242,14 +242,15 @@ examples:
             For properties that are within a geographical area defined by a local council
 
   - name: with a divider
+    screenshot: true
     options:
       idPrefix: example-divider
       name: example
       fieldset:
         legend:
           text: How do you want to sign in?
       items:
-        - value: governement-gateway
+        - value: government-gateway
           text: Use Government Gateway
         - value: govuk-verify
           text: Use GOV.UK Verify
@@ -680,6 +681,7 @@ examples:
           text: funkiness
 
   - name: small with a divider
+    screenshot: true
     options:
       idPrefix: example-small-divider
       name: example
@@ -688,7 +690,7 @@ examples:
           text: How do you want to sign in?
       classes: govuk-radios--small
       items:
-        - value: governement-gateway
+        - value: government-gateway
           text: Use Government Gateway
         - value: govuk-verify
           text: Use GOV.UK Verify