Merge pull request #307 from torchbox/add-footer-address

Add company address to footer

Author: ianmeigh

tbx/project_styleguide/templates/patterns/organisms/footer/footer.html

@@ -14,7 +14,6 @@
             {% wagtailcache 600 "footerlinks" current_site.pk is_pattern_library %}
                 {% footerlinks %}
             {% endwagtailcache %}
-            <p class="footer__copyright">© Torchbox {% now "Y" %}</p>
 
             <ul class="footer__socials">
                 <li>
@@ -63,6 +62,16 @@
                     {% endif %}
                 {% endwith %}
             </div>
+            <div class="grid__footer-company">
+                <div class="footer__company">
+                    <div class="footer__company-address">
+                        <p>© Torchbox {% now "Y" %} - </p><address>3rd Floor, 15 Colston St, Bristol, BS1 5AP</address>
+                    </div>
+                    <div>
+                        <p>Registered in England &amp; Wales. Company no. 3983354, VAT no. 752981011</p>
+                    </div>
+                </div>
+            </div>
         </div>
 
         {% include "patterns/molecules/carbon-impact/carbon-impact.html" %}

tbx/static_src/sass/components/_footer.scss

@@ -35,10 +35,6 @@
         }
     }
 
-    &__copyright {
-        margin: $spacer-mini 0 0;
-    }
-
     &__socials {
         display: flex;
         gap: $spacer-mini * 2;
@@ -96,6 +92,28 @@
         }
     }
 
+    &__company {
+        display: flex;
+        flex-direction: column;
+        height: 100%;
+        margin: $spacer-medium 0 $spacer-mini;
+        color: var(--color--grey-20);
+
+        @include media-query(large) {
+            justify-content: center;
+            margin: 0;
+        }
+    }
+
+    &__company-address {
+        font-weight: 600;
+
+        > * {
+            font-style: normal;
+            display: inline;
+        }
+    }
+
     &__carbon-impact-container {
         background-color: var(--color--footer-background);
         border-top: 1px solid var(--color--border);

tbx/static_src/sass/components/_grid.scss

@@ -273,7 +273,17 @@
         grid-column: 2 / span 4;
 
         @include media-query(large) {
-            grid-column: 2 / span 12;
+            grid-column: 2 / span 4;
+        }
+    }
+
+    &__footer-company {
+        grid-column: 2 / span 4;
+        grid-row: 2;
+
+        @include media-query(large) {
+            grid-column: 10 / span 4;
+            grid-row: auto;
         }
     }