Merge pull request #32 in CONCORDIA/concorel-frontend from feature/CO…

…NCOREL-108-footer-module-tasks-frontend to develop

* commit 'ce9f7c4904954e1568f062066952a96b293a06b4':
  CONCOREL-108: Add ConcordiaMed to the footer. Adjust docs
  CONCOREL-108: Adjust footer max-width to use grid max-width
  CONCOREL-108: Swap png image with SVG
  CONCOREL-108: Add documentation for footer module
  CONCOREL-108: Add Footer module with content
  CONCOREL-108: Make iconLink use flex instead of floats

source/assets/css/main.scss

@@ -50,6 +50,8 @@
 @import "../../modules/locationselect/locationselect";
 @import "../../modules/ratecalculator/ratecalculator";
 @import "../../modules/genderselect/genderselect";
+@import "../../modules/footer/footer";
+@import "../../modules/linklist/linklist";
 @import "../../modules/concordiamed/concordiamed";
 //*autoinsertmodule*
 

source/modules/collapsiblesimple/collapsiblesimple.scss

@@ -88,7 +88,7 @@
 
 		& &__content {
 			max-height: none;
-			overflow: auto;
+			overflow: visible;
 		}
 
 		& &__content-inner {

source/modules/content/footerteaser_agentsearch.data.js

@@ -0,0 +1,24 @@
+'use strict';
+
+var _ = require('lodash'),
+	requireNew = require('require-new'),
+	dataHelper = require('../../../helpers/data.js'),
+	defaultData = requireNew('../../data/default.data.js');
+
+var data = _.merge(defaultData, {
+	meta: {
+		title: 'Footer agentsearch - private',
+		className: 'FooterTeaserAgentsearch',
+		code: dataHelper.getTemplateCode('footerteaser_agentsearch.hbs'),
+		documentation: '',
+		hideFromListing: true
+	},
+	lightTheme: true,
+	form: {
+		action: {
+			action: 'some/form/action'
+		}
+	}
+});
+
+module.exports = data;

source/modules/content/footerteaser_agentsearch.hbs

@@ -0,0 +1,3 @@
+<p>In unseren 240 Aussenstellen stehen unsere kompetenten Mitarbeiter für Sie persönlich zur Verfügung.</p>
+
+{{> modules/locationsearch/locationsearch}}

source/modules/content/footerteaser_private.hbs

@@ -1,3 +1,4 @@
 <p>
 	Lorem ipsum dolor sit amet, consectetur adipiscing elit. <a href="#">Vestibulum blandit</a>, enim quis faucibus luctus, erat arcu vestibulum odio, vitae efficitur nulla dui eu arcu. Pellentesque sagittis augue eget sem volutpat, ac porttitor velit aliquam. Donec placerat risus est, non facilisis ligula interdum ac. Curabitur et neque malesuada, porta sem ac, gravida enim. Vivamus in orci pharetra, porttitor ex nec, pellentesque nisl. Aliquam auctor faucibus congue.
 </p>
+

source/modules/footer/footer.data.js

@@ -0,0 +1,152 @@
+'use strict';
+
+var _ = require('lodash'),
+	requireNew = require('require-new'),
+	dataHelper = require('../../../helpers/data.js'),
+	defaultData = requireNew('../../data/default.data.js');
+
+var data = _.merge(defaultData, {
+		meta: {
+			title: 'Footer',
+			specificationId: 'F-05',
+			specificationURL: 'https://projects.unic.com/display/CONCOREL/Footer+F-05',
+			jira: 'CONCOREL-108',
+			className: 'Footer',
+			code: dataHelper.getTemplateCode('footer.hbs'),
+			documentation: dataHelper.getDocumentation('footer.md')
+		},
+		links: requireNew('../sociallist/sociallist.data.js').links,
+		concordiaMed: {
+			darkTheme: true,
+			title: 'ConcordiaMed 24h Gesundheitsratgeber',
+			phone: {
+				number: '+410412100250',
+				text: '+41 (0)41 210 02 50'
+			}
+		},
+		columns: [
+			{
+				title: 'Private',
+				partial: function() {
+					return 'modules/linklist/linklist';
+				},
+
+				partialContext: {
+					links: [
+						{
+							url: '#',
+							text: 'Grundversicherung'
+						},
+						{
+							url: '#',
+							text: 'Zusatzversicherung'
+						},
+						{
+							url: '#',
+							text: ' Vorsorge'
+						},
+						{
+							url: '#',
+							text: 'Lebenssituation'
+						}
+					]
+				}
+			},
+			{
+				title: 'Service',
+				partial: function() {
+					return 'modules/linklist/linklist';
+				},
+
+				partialContext: {
+					links: [
+						{
+							url: '#',
+							text: 'Adresse ändern'
+						},
+						{
+							url: '#',
+							text: 'Namenswechsel'
+						},
+						{
+							url: '#',
+							text: 'Vorgeburtliche'
+						},
+						{
+							url: '#',
+							text: 'Franchise optimieren'
+						},
+						{
+							url: '#',
+							text: 'concordiaMed'
+						}
+					]
+				}
+			},
+
+			{
+				title: 'Quicklinks',
+				partial: function() {
+					return 'modules/linklist/linklist';
+				},
+
+				partialContext: {
+					links: [
+						{
+							url: '#',
+							text: 'Prämienrechner'
+						},
+						{
+							url: '#',
+							text: 'Franchiserechner'
+						},
+						{
+							url: '#',
+							text: 'Arztsuche'
+						},
+						{
+							url: '#',
+							text: 'CONCORDIA Magazin'
+						},
+						{
+							url: '#',
+							text: 'Kontakt'
+						}
+					]
+				}
+			},
+			{
+				forceExpanded: true,
+				partialContext: {
+					lightTheme: true,
+					form: {
+						action: 'some/form/action'
+					},
+					id: 'location'
+				},
+				title: 'Agentursuche',
+				partial: function() {
+					return 'modules/content/footerteaser_agentsearch';
+				}
+			}
+		]
+	});
+
+data.columns = data.columns.map(function(column) {
+	return Object.assign({}, column, {
+		additionalClasses: (function() {
+			var classes = column.additionalClasses || '';
+
+			classes += 'collapsible-simple--theme-dark collapsiblecolumns__collapsible-simple';
+
+			if (column.forceExpanded) {
+				classes += ' ' + 'collapsible-simple--force-expanded';
+			}
+
+			return classes;
+		})()
+
+	});
+});
+
+module.exports = data;

source/modules/footer/footer.hbs

@@ -0,0 +1,26 @@
+<footer class="footer">
+	<div class="footer__main">
+		<div class="footer__wrap">
+			{{> modules/collapsiblecolumns/collapsiblecolumns}}
+		</div>
+	</div>
+	{{> modules/concordiamed/concordiamed concordiaMed}}
+	<div>
+		<div class="footer__wrap footer__footnote">
+			<ul class="footer__links">
+				<li>
+					<a class="footer__link" href="/">
+						<img class="footer__logo" src="../../assets/media/images/logo-footer.svg" >
+					</a> &copy; 2017
+				</li>
+				<li>
+					<a class="footer__link" href="#">Impressum</a>
+				</li>
+				<li>
+					<a class="footer__link" href="#">Disclaimer</a>
+				</li>
+			</ul>
+			{{> modules/sociallist/sociallist}}
+		</div>
+	</div>
+</footer>

source/modules/footer/footer.md

@@ -0,0 +1,14 @@
+## Description
+
+Footer of the page.
+
+The module reuses other modules:
+* [Location Search](/modules/locationsearch/locationsearch.html) (light theme variant)
+* [Collapsible Columns](/modules/collapsiblecolumns/collapsiblecolumns.html)
+* [ConcordiaMed](/modules/concordiamed/concordiamed.html) (dark theme variant)
+* [SocialList](/modules/sociallist/sociallist.html)
+
+## Integration
+
+Copy HTML. Please remember to set proper action form action, id and name of the select used in `LocationSearch`. 
+

source/modules/footer/footer.scss

@@ -0,0 +1,74 @@
+.footer {
+	$padding: 20px;
+	$max-width: $gridContentWidth;
+
+	background-color: $colorWhite;
+
+	&__wrap {
+		max-width: $max-width;
+		margin: 0 auto;
+	}
+
+	&__main {
+		background-color: $colorMetallicBlue;
+		color: rgba($colorPaleGreyTwo, .7);
+
+		p {
+			color: rgba($colorPaleGreyTwo, .7);
+		}
+
+		.footer__wrap:after {
+			content: '';
+			display: block;
+			border-top: 2px solid rgba($colorBlueGrey, .5);
+			margin: 0 $padding;
+		}
+	}
+
+	&__footnote {
+		display: flex;
+		flex-direction: column-reverse;
+		margin: 0 auto;
+		box-sizing: border-box;
+		padding: $padding;
+	}
+
+	&__logo {
+		width: 67px;
+	}
+
+	&__links {
+		@include resetList;
+		display: flex;
+		align-items: baseline;
+		font-size: 14px;
+		color: $colorMetallicBlue;
+		margin-top: $padding;
+
+		> * {
+			margin-right: 24px;
+		}
+
+		> :first-child {
+			margin-right: 46px;
+		}
+	}
+
+	&__link {
+		color: $colorMetallicBlue;
+		font-weight: $fontWeightMedium;
+		text-decoration: none;
+	}
+
+	@include mq($from: small) {
+		&__footnote {
+			flex-direction: row;
+			justify-content: space-between;
+			align-items: center;
+		}
+
+		&__links {
+			margin-top: 0;
+		}
+	}
+}

source/modules/iconlink/iconlink.scss

@@ -1,14 +1,11 @@
 .iconlink {
-	display: inline-block;
+	display: flex;
+	align-items: center;
 	text-decoration: none;
 
 	&__title {
 		text-decoration: underline;
-	}
-
-	&__icon {
-		position: relative;
-		top: 8px;
+		margin-left: 12px;
 	}
 
 	&:hover {

source/modules/linklist/linklist.data.js

@@ -0,0 +1,38 @@
+'use strict';
+
+var _ = require('lodash'),
+	requireNew = require('require-new'),
+	dataHelper = require('../../../helpers/data.js'),
+	defaultData = requireNew('../../data/default.data.js');
+
+var data = _.merge(defaultData, {
+		meta: {
+			title: 'LinkList',
+			specificationId: '',
+			specificationURL: 'https://projects.unic.com/display/CONCOREL/',
+			jira: 'CONCOREL-108',
+			className: 'LinkList',
+			code: dataHelper.getTemplateCode('linklist.hbs'),
+			documentation: dataHelper.getDocumentation('linklist.md')
+		},
+		links: [
+			{
+				url: '#',
+				text: 'Grundversicherung'
+			},
+			{
+				url: '#',
+				text: 'Zusatzversicherung'
+			},
+			{
+				url: '#',
+				text: ' Vorsorge'
+			},
+			{
+				url: '#',
+				text: 'Lebenssituation'
+			}
+		]
+	});
+
+module.exports = data;