Add secondary link pattern to page footer

This commit brings back the ‘link under the green button’ bit of the page footer
component.

Previous it had been changed to be a grey button. But there are use cases for
both, maybe even simultaneously.

app/assets/stylesheets/components/page-footer.scss

@@ -28,6 +28,10 @@
 
   }
 
+  &-secondary-link {
+    display: block;
+    margin-top: $gutter;
+  }
 
   .button {}
 

app/templates/components/page-footer.html

@@ -3,6 +3,8 @@
   destructive=False,
   back_link=False,
   back_link_text="Back",
+  secondary_link=False,
+  secondary_link_text=None,
   delete_link=False,
   delete_link_text="delete"
 ) %}
@@ -19,5 +21,8 @@
     {% if back_link %}
       <a class="page-footer-back-link" href="{{ back_link }}">{{ back_link_text }}</a>
     {% endif %}
+    {% if secondary_link and secondary_link_text %}
+      <a class="page-footer-secondary-link" href="{{ secondary_link }}">{{ secondary_link_text }}</a>
+    {% endif %}
   </div>
 {% endmacro %}

app/templates/views/styleguide.html

@@ -117,6 +117,10 @@
     button_text='Send', back_link='http://example.com', back_link_text="Back to dashboard"
   ) }}
 
+  {{ page_footer(
+    button_text='Sign in', secondary_link='http://example.com', secondary_link_text="I’ve forgotten my password"
+  ) }}
+
   <h2 class="heading-large">SMS message</h2>
 
   <p>Used to show, preview or choose an SMS message.</p>