<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"
    }
  ]
}
  • Content:
    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;
    
  • URL: /components/raw/map-contact-card/MapContactCard.jsx
  • Filesystem Path: src/components/map-contact-card/MapContactCard.jsx
  • Size: 1.5 KB
  • Content:
    .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;
    }
    
  • URL: /components/raw/map-contact-card/map-contact-card.scss
  • Filesystem Path: src/components/map-contact-card/map-contact-card.scss
  • Size: 998 Bytes

No notes defined.