Aligned styles of indented components (#1746)

* aligned styles of indented components * percy issue fix * more percy fixes [test-visual]
ONSdigital · Nov 8, 2021 · a73bb85 · a73bb85
1 parent cb0a909
commit a73bb85
Show file tree

Hide file tree

Showing 6 changed files with 12 additions and 5 deletions.
diff --git a/src/components/checkboxes/_checkbox.scss b/src/components/checkboxes/_checkbox.scss
@@ -106,7 +106,7 @@ $checkbox-padding: 11px;
   }
 
   &__other {
-    border-left: 4px solid $color-grey-35;
+    border-left: 4px solid $color-borders-indent;
     display: block;
     margin: 0 1rem 0.5rem 1.1rem;
     padding: 0 $checkbox-padding $checkbox-padding $checkbox-padding * 2 - 1;

diff --git a/src/components/collapsible/_collapsible.scss b/src/components/collapsible/_collapsible.scss
@@ -74,10 +74,14 @@ $collapsible-caret-width: 1.5rem;
     }
 
     &__content {
-      border-left: 5px solid $color-grey-15;
+      border-left: 4px solid $color-borders-indent;
       display: block;
       margin: 1rem 0 0;
       padding: 0 0 0 1.3em;
+
+      .ons-btn {
+        margin-bottom: 0.5rem;
+      }
     }
   }
 

diff --git a/src/components/summary/examples/summary-grouped/index.njk b/src/components/summary/examples/summary-grouped/index.njk
@@ -52,6 +52,7 @@
                     },
                     {
                         "groupTitle": "Identity and health",
+                        "headers":["Question", "Answer given"],
                         "rows": [
                             {
                                 "rowTitle": "What is your country of birth?",
@@ -81,6 +82,7 @@
                     },
                     {
                         "groupTitle": "Qualifications",
+                        "headers":["Question", "Answer given"],
                         "rows": [
                             {
                                 "rowTitle": "Have you completed an apprenticeship?",
@@ -113,4 +115,3 @@
         ]
     })
 }}
-
diff --git a/src/components/text-indent/_text-indent.scss b/src/components/text-indent/_text-indent.scss
@@ -1,5 +1,5 @@
 .ons-text-indent {
-  border-left: 5px solid $color-grey-35;
+  border-left: 4px solid $color-borders-indent;
   margin: 0 0 1rem;
-  padding: 0 0 0 1em;
+  padding: 0 0 0 1.3em;
 }
diff --git a/src/patterns/pages/hub-and-spoke/examples/hub/index.njk b/src/patterns/pages/hub-and-spoke/examples/hub/index.njk
@@ -30,6 +30,7 @@ layout: none
             {
                 "groups": [
                     {
+                        "headers":["Name of section or person", "Section progress", "Access section"],
                         "rows": [
                             {
                                 "rowTitle": "People who live here",

diff --git a/src/scss/vars/_colors.scss b/src/scss/vars/_colors.scss
@@ -84,6 +84,7 @@ $color-highlight: $color-neon-yellow !default;
 
 // Borders
 $color-borders: $color-grey-75 !default;
+$color-borders-indent: $color-grey-35 !default;
 $color-document-border: $color-grey-15 !default;
 $color-document-border-focus: $color-black !default;