feat: add saved search component (resolves #151) (#155)

* feat: add saved search component (resolves #151)
* fix: move variables into config file

src/assets/styles/components/_saved-search.scss

@@ -0,0 +1,15 @@
+.saved-search {
+	padding: rem(12) 0 rem(24);
+
+	p + p {
+		margin-top: rem(12);
+	}
+
+	.badges {
+		margin-top: 0;
+	}
+}
+
+.saved-search + .saved-search {
+	border-top: solid rem(1) $grey-500;
+}

src/assets/styles/pinecone.scss

@@ -31,6 +31,7 @@
 @import "components/menu--home";
 @import "components/menu-button";
 @import "components/search";
+@import "components/saved-search";
 @import "layouts/header";
 @import "layouts/page";
 @import "layouts/archive";

src/components/02-molecules/09-saved-search/saved-search.config.js

@@ -0,0 +1,13 @@
+module.exports = {
+	title: 'Saved Search',
+	status: 'wip',
+	context: {
+		title: 'Cooperative economy paper',
+		searchTerm: 'Cooperative Economy',
+		tags: [
+			{label: 'Cooperative economy'},
+			{label: 'Australia'},
+			{label: 'Academic paper'}
+		]
+	}
+};

src/components/02-molecules/09-saved-search/saved-search.njk

@@ -0,0 +1,15 @@
+{% if not standAlone %}<div class="spacer"></div>{% endif %}
+<div class="saved-search">
+	<h4><a href="/?s=Cooperative%20Economy">{{ title }}</a></h4>
+	<span class="disclosure-label" hidden>Show details</span>
+	<div class="saved-search__details">
+		<p><strong>Search term</strong><br />
+		&ldquo;{{ searchTerm }}&rdquo;</p>
+		<p><strong>Tags</strong></p>
+		<ul class="badges">
+			{% for tag in tags %}
+				{% render '@badge', {standAlone: true, label: tag.label}, true %}
+			{% endfor %}
+		</ul>
+	</div>
+</div>