Adding build ID to Footer component

src/components/Footer/__snapshots__/test.js.snap

@@ -40,5 +40,10 @@ exports[`Footer rendering 1`] = `
       </a>
     </li>
   </ul>
+  <div
+    className="buildId"
+  >
+    example build id
+  </div>
 </footer>
 `;

src/components/Footer/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { translate, Trans } from 'react-i18next';
 
-import './style.css';
+import style from './style.css';
 
 const Footer = () => (
   <footer>
@@ -22,6 +22,7 @@ const Footer = () => (
         <a href="/privacy.html"><Trans>Privacy Policy</Trans></a>
       </li>
     </ul>
+    <div className={ style.buildId }>{ process.env.BUILD_ID }</div>
   </footer>
 );
 

src/components/Footer/style.css

@@ -1,11 +1,13 @@
 @import url('../../globals.css');
 
 footer {
+  display: flex;
   margin: var(--spacing-margin) 0;
 
   & ul {
     @apply --inline-list;
     @apply --with-separator;
+    flex: 1;
   }
 
   & img {
@@ -13,4 +15,9 @@ footer {
     width: 80px;
     height: 15px;
   }
+
+  & .buildId {
+    align-self: flex-end;
+    color: color(var(--color-brown) blend(var(--color-tan) 25%));
+  }
 }

src/components/Footer/test.js

@@ -4,6 +4,10 @@ import { shallow } from 'enzyme';
 import { Footer } from 'components/Footer';
 
 describe('Footer', () => {
+  beforeEach(() => {
+    process.env.BUILD_ID = 'example build id';
+  });
+
   test('rendering', () => {
     const component = shallow(
       <Footer/>