Fix indent details (#580)

* Fixed issue for runner with text indent on details * reverted text indent * Fixed alignment issue with caret on accordion * Updated text indent scss * Remove codecov to allow builds * Added codecov back to tests script
ONSdigital · Aug 15, 2019 · 35219b2 · 35219b2
1 parent d36a7bc
commit 35219b2
Show file tree

Hide file tree

Showing 4 changed files with 27 additions and 19 deletions.
diff --git a/src/components/details/_details.scss b/src/components/details/_details.scss
@@ -94,7 +94,9 @@ $details-caret-width: 1.1rem;
 
     &__content {
       display: block;
-      padding: 1rem 0 0;
+      margin: 1rem 0 0 0;
+      padding: 0 0 0 1.3em;
+      border-left: 5px solid $color-grey-3;
     }
   }
 
@@ -112,7 +114,10 @@ $details-caret-width: 1.1rem;
 
       &:before,
       &:after {
-        top: 1.45rem;
+        top: 1.1rem;
+        @include mq(s) {
+          top: 1.45rem;
+        }
       }
 
       &:focus {
@@ -134,5 +139,10 @@ $details-caret-width: 1.1rem;
       align-self: flex-start;
       width: auto;
     }
+    &__content {
+      margin: 0;
+      border-left: 0;
+      padding: 0;
+    }
   }
 }
diff --git a/src/components/details/_macro.njk b/src/components/details/_macro.njk
@@ -1,6 +1,5 @@
 {% macro onsDetails(params) %}
     {% from "components/button/_macro.njk" import onsButton %}
-    {% from "components/text-indent/_macro.njk" import onsTextIndent %}
 
     <details
         id="{{ params.id }}"
@@ -35,20 +34,18 @@
             {% if params.isAccordion %}
                 {{ params.content | safe }}{{ caller() if caller }}
             {% else %}
-                {% call onsTextIndent() %}
-                    {{ params.content | safe }}{{ caller() if caller }}
-                    {% if params.button and params.button.close and params.isAccordion != true %}
-                        {{
-                            onsButton({
-                                "type": "button",
-                                "text": params.button.open or params.button.close,
-                                "classes": "btn--small js-collapsible-button u-d-no " + (params.button.classes | default("btn--secondary")),
-                                "innerClasses": "js-collapsible-button-inner",
-                                "attributes": params.button.attributes
-                            })
-                        }}
-                    {% endif %}
-                {% endcall %}
+                {{ params.content | safe }}{{ caller() if caller }}
+                {% if params.button and params.button.close and params.isAccordion != true %}
+                    {{
+                        onsButton({
+                            "type": "button",
+                            "text": params.button.open or params.button.close,
+                            "classes": "btn--small js-collapsible-button u-d-no " + (params.button.classes | default("btn--secondary")),
+                            "innerClasses": "js-collapsible-button-inner",
+                            "attributes": params.button.attributes
+                        })
+                    }}
+                {% endif %}
             {% endif %}
         </div>
     </details>

diff --git a/src/components/footer/_macro.njk b/src/components/footer/_macro.njk
@@ -35,7 +35,8 @@
                                 "html": params.button.html,
                                 "name": params.button.name,
                                 "value": params.button.value,
-                                "attributes": params.button.attributes
+                                "attributes": params.button.attributes,
+                                "url": params.button.url
                             })
                         }}
                     </div>

diff --git a/src/components/text-indent/_text-indent.scss b/src/components/text-indent/_text-indent.scss
@@ -1,5 +1,5 @@
 .text-indent {
   margin: 0 0 1rem;
-  padding: 0 0 0 1.3em;
+  padding: 0 0 0 1em;
   border-left: 5px solid $color-grey-3;
 }