feat: add footer (resolves #172) (#176)

* feat: add footer
* fix: icon class consistency
* fix: remove unnecessary semantics

src/assets/styles/layouts/_footer.scss

@@ -1,6 +1,75 @@
 footer {
-	background: $blue-500;
-	height: rem(76);
+	background: $dark-mint-500;
+	color: $white;
+	height: auto;
+	margin-top: auto;
 	position: relative;
 	width: 100%;
+
+	.container {
+		margin: 0 auto;
+		max-width: rem(1630);
+	}
+
+	.columns {
+		padding: rem(40) rem(30);
+	}
+
+	.column + .column {
+		border-top: solid rem(3) $off-white;
+		margin-top: rem(60);
+		padding-top: rem(20);
+	}
+
+	.logo {
+		display: inline-block;
+		height: rem(50.5);
+		margin-left: rem(-4);
+		padding: 0 rem(4);
+
+		svg {
+			display: block;
+			height: rem(50.5);
+			margin-bottom: 0;
+			width: rem(172.77);
+		}
+
+		.brand__label {
+			display: block;
+			font-size: rem(12);
+		}
+
+		&::after {
+			display: none;
+		}
+	}
+
+	.nav {
+		margin-top: rem(16);
+
+		p {
+			line-height: rem(28);
+		}
+
+		p + p {
+			margin-top: 0;
+		}
+	}
+}
+
+@include breakpoint-up(lg) {
+	footer .container {
+		max-width: rem(1160);
+		padding-left: 0;
+	}
+
+	footer .columns {
+		display: grid;
+		grid-template-columns: repeat(3, 1fr);
+		padding: rem(60) 0;
+
+		.column + .column {
+			margin-top: 0;
+		}
+	}
 }

src/components/01-atoms/01-icons/icons.config.js

@@ -124,41 +124,41 @@ module.exports = {
 			[
 				{
 					svg: 'topic',
-					class: 'topic icon--md',
+					class: 'icon icon--topic icon--md',
 					viewBox: '0 0 24 24',
 				},
 				{
 					svg: 'goal',
-					class: 'goal icon--md',
+					class: 'icon icon--goal icon--md',
 					viewBox: '0 0 24 24',
 				},
 				{
 					svg: 'sector',
-					class: 'sector icon--md',
+					class: 'icon icon--sector icon--md',
 					viewBox: '0 0 24 24',
 				},
 				{
 					svg: 'format',
-					class: 'format icon--md',
+					class: 'icon icon--format icon--md',
 					viewBox: '0 0 24 24',
 				},
 			],
 			[
 				{
 					svg: 'language',
-					class: 'language icon--lg',
+					class: 'icon icon--language icon--lg',
 					viewBox: '0 0 32 32',
 				},
 				{
 					svg: 'pcc',
-					class: 'pcc icon--lg',
+					class: 'icon icon--pcc icon--lg',
 					viewBox: '0 0 32 32',
 				},
 			],
 			[
 				{
 					svg: 'browse',
-					class: 'browse icon--xl',
+					class: 'icon icon--browse icon--xl',
 					viewBox: '0 0 40 40',
 				}
 			],

src/components/01-atoms/_svg/_svg.njk

@@ -1,5 +1,5 @@
 <svg
-	class="icon icon--{{ class if class else svg }}"
+	class="{{ class if class else 'icon icon--'+svg }}"
 	aria-hidden="{{ ariaHidden }}"
 	viewBox="{{ viewBox }}"
 	focusable="{{ focusable }}"

src/components/02-molecules/00-menu/menu.njk

@@ -1,7 +1,7 @@
 {% render '@brand' %}
 <nav aria-labelledby="menu-primary-label">
 	<button class="button menu-toggle" aria-expanded="false">
-		{% render '@svg', {svg:'menu', class:'open'}, true %}
+		{% render '@svg', {svg:'menu', class:'icon icon--open'}, true %}
 		{% render '@svg', {svg:'close'}, true %}
 		<span id="menu-primary-label" class="menu-toggle__label">{{ menuTitle }}</span>
 	</button>
@@ -21,7 +21,7 @@
 		<li class="menu-item menu-item--languages menu__submenu-wrapper">
 			<a class="menu__item" href="/en/settings/language/">
 				<span class="menu__label">Language</span>
-				{% render '@svg', {svg:'language', class:'language icon--lg', viewBox: '0 0 30 30'}, true %}
+				{% render '@svg', {svg:'language', class:'icon icon--language icon--lg', viewBox: '0 0 30 30'}, true %}
 			</a>
 			<ul class="menu__submenu">
 				<li class="menu-item"><a aria-current="true" href="/en/" class="menu__item">English</a></li>

src/components/02-molecules/11-footer/footer.config.js

@@ -0,0 +1,8 @@
+module.exports = {
+	title: 'Footer',
+	status: 'wip',
+	context: {
+		hasFooter: true,
+		inFooter: true
+	}
+};

src/components/02-molecules/11-footer/footer.njk

@@ -0,0 +1,19 @@
+<div class="columns">
+	<div class="column">
+		<a class="logo link--inverse" rel="external" href="https://platform.coop">
+			{% render '@svg', {svg: 'logo', class: 'logo__image', viewBox: '0 0 282.08 78.75'}, true %}
+			<span class="screen-reader-text">Platform Cooperativism Consortium</span>
+		</a>
+		<div class="nav">
+			<p><a class="link--inverse" rel="external" href="https://platform.coop/open-access-and-privacy-policy/">Our open access &amp; privacy policy</a></p>
+			<p><a class="link--inverse" rel="external" href="https://platform.coop/diversity-inclusion/">Our commitment to diversity &amp; inclusion</a></p>
+		</div>
+	</div>
+	<div class="column">
+		<div class="h4"><a rel="external" class="link--inverse" href="https://platform.coop/contact-us/">Contact us</a></div>
+		<div>
+			<strong>Email</strong><br />
+			<a class="link--inverse" href="mailto:info@platform.coop" rel="external">info@platform.coop</a>
+		</div>
+	</div>
+</div>

src/components/_preview.njk

@@ -36,7 +36,7 @@
 		<div class="wrap container" role="document">
       		<div class="content">
 				<main>
-				{% if not _target.context.inBanner %}{{ yield | safe }}{% endif %}
+				{% if not _target.context.inBanner and not _target.context.inFooter %}{{ yield | safe }}{% endif %}
 				</main>
 				{% if _target.context.hasSidebar %}
 				<aside class="sidebar">
@@ -46,7 +46,7 @@
 		</div>
 		{% if _target.context.hasFooter %}
 		<footer class="content-info">
-  			<div class="container"></div>
+  			<div class="container">{% if _target.context.inFooter %}{{ yield | safe }}{% else %}{% render '@footer' %}{% endif %}</div>
   		</footer>
 		{% endif %}
 		<script crossorigin="anonymous" src="https://polyfill.io/v3/polyfill.min.js?features=Element.prototype.inert"></script>