<div class="map-contact-card ">
<h5>Independia Control</h5>
<adress class="map-contact-card__info">
<ul class="map-contact-card__info-list">
<li class="map-contact-card__info-item">
<span href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-map-pin"></use>
</svg>
Livbåtsgatan 6
</span>
</li>
<li class="map-contact-card__info-item h-no-margin-top">
<span href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-"></use>
</svg>
42671 Västra Frölunda
</span>
</li>
<li class="map-contact-card__info-item h-no-margin-top">
<span href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-"></use>
</svg>
Lincon, Nebraska
</span>
</li>
<li class="map-contact-card__info-item">
<a href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-mobile"></use>
</svg>
0733-656600
</a>
</li>
<li class="map-contact-card__info-item">
<a href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-globe"></use>
</svg>
www.radea.se
</a>
</li>
<li class="map-contact-card__info-item">
<span href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-person"></use>
</svg>
Anders Örnebrink
</span>
</li>
<li class="map-contact-card__info-item">
<a href={href}>
<svg class="icon map-contact-card__icon" focusable="false">
<use xlink:href="#icon-mail"></use>
</svg>
kungstensvent.anders@gmail.com
</a>
</li>
</uL>
</adress>
</div>
<div class="map-contact-card {{ getmodifiers modifiers "map-contact-card" }}">
<h5>{{ title }}</h5>
<adress class="map-contact-card__info">
<ul class="map-contact-card__info-list">
{{#each contactInfo}}
{{#if this.icon}}
<li class="map-contact-card__info-item">
{{else}}
<li class="map-contact-card__info-item h-no-margin-top">
{{/if}}
<{{getelement tag "span" }} href={href}>
{{> @icon id=icon additionalClasses="map-contact-card__icon" }}
{{{ description }}}
</{{getelement tag "span"}}>
</li>
{{/each}}
</uL>
</adress>
</div>
{
"title": "Independia Control",
"contactInfo": [
{
"description": "Livbåtsgatan 6",
"icon": "map-pin"
},
{
"description": "42671 Västra Frölunda",
"icon": ""
},
{
"description": "Lincon, Nebraska",
"icon": ""
},
{
"description": "0733-656600",
"href": "tel:0733-656600",
"icon": "mobile",
"tag": "a"
},
{
"description": "www.radea.se",
"href": "http://www.radea.se",
"icon": "globe",
"tag": "a"
},
{
"description": "Anders Örnebrink",
"icon": "person"
},
{
"description": "kungstensvent.anders@gmail.com",
"href": "mailto:kungstensvent.anders@gmail.com",
"icon": "mail",
"tag": "a"
}
]
}
import React from 'react';
import PropTypes from 'prop-types';
import Icon from '../icon';
const MapContactCard = (props) => (
<div
className={`map-contact-card
${props.active && 'map-contact-card--active'}`}
onClick={(e) => {
if (e.currentTarget !== e.target) {
return;
}
props.onClick();
}}
>
<h5>{props.title}</h5>
<address className="map-contact-card__info">
<ul className="map-contact-card__info-list">
{props.contactInfo.map((info, i) => {
return <li className={`map-contact-card__info-item ${!info.icon && 'h-no-margin-top'}`} key={`item-${props.id}-${i}`}>
{React.createElement(info.href ? 'a' : 'span', { href: info.href },
<>
<Icon icon={info.icon} additionalClasses="map-contact-card__icon" />
{info.description}
</>
)}
</li>;
}
)}
</ul>
</address>
</div>
);
MapContactCard.propTypes = {
id: PropTypes.string.isRequired,
active: PropTypes.bool,
contactInfo: PropTypes.arrayOf(PropTypes.shape({
description: PropTypes.string.isRequired,
icon: PropTypes.string,
href: PropTypes.string
}))
};
export default MapContactCard;
.map-contact-card {
$margin-bottom: size(2);
background: $color-white;
padding: $margin-bottom;
margin-bottom: size(2);
cursor: pointer;
.col & {
height: calc(100% - #{$margin-bottom});
}
* {
pointer-events: none;
}
a, button {
pointer-events: auto;
}
&--active {
box-shadow: inset 0 0 0 1px $color-green;
}
}
.map-contact-card__info {
font-style: normal;
}
.map-contact-card__info-list {
list-style: none;
padding: 0;
}
.map-contact-card__info-item {
display: flex;
position: relative;
padding-left: size(4);
margin-top: size(2);
word-break: break-word;
// nudge to make icons align with card title
margin-left: -5px;
}
.map-contact-card__icon {
position: absolute;
width: size(4);
height: size(3);
padding-right: size(1);
left: 0;
top: 50%;
transform: translateY(size(-1.5));
fill: $color-green-dark;
color: $color-green-dark;
}
No notes defined.