Bubble for user voting about new service design

style.less

.transition(@transition) {
    -webkit-transition: @transition;
    -moz-transition:@transition;
    -ms-transition: @transition;
    -o-transition: @transition;
    transition: @transition;
}


@font-face {
    font-family: 'fontello';
    src: url('./../UserVoiceBubble/fonts/fontello.eot');
    src: url('./../UserVoiceBubble/fonts/fontello.eot?#iefix') format('embedded-opentype'),
    url('./../UserVoiceBubble/fonts/fontello.woff') format('woff'),
    url('./../UserVoiceBubble/fonts/fontello.ttf') format('truetype'),
    url('./../UserVoiceBubble/fonts/fontello.svg#fontello') format('svg');
}

.componentWrapper {
    display: block;
    position: relative;

    button {
        border: none;
    }

    .component{
        cursor: pointer;
        background: linear-gradient(180deg,
        rgba(61, 161, 197, 1) 0%,
        rgba(61, 161, 197, 1) 0%,
        rgba(87, 189, 210, 1) 100%,
        rgba(87, 189, 210, 1) 100%);
        width: 100%;
        text-align: center;
        height: 70px;
        color: #ffffff;
        font-size: 20px;
        position: relative;
        overflow: hidden;

        &__closeLink{
            display: inline-block;
            width: 16px;
            height: 16px;
            position: absolute;
            right: 37px;
            top: 29px;
            font-size: 11px;
            cursor: pointer;
            background: transparent;
            padding-top: 1px;
            padding-left: 1px;
            font-weight: bold;
            font-style: normal;
            font-family: fontello;
            color: #fff;
            opacity: 0.7;
            transition: all 0.3s ease;

            &:before {
                vertical-align: middle;
                content: 'x';
            }

            &:hover {
                opacity: 1;
            }
        }

        &__text {
            position: relative;
            left: -6px;
            padding: 24px 0 21px;
            display: inline-block;

            p {
                margin: 0;
            }
        }

        &__lamp {
            display: inline-block;
            vertical-align: middle;
            position: relative;
            right: 35px;
            top: -2px;
            background-image: url('../UserVoiceBubble/images/lamp_turnOff.svg');
            width: 30px;
            height: 46px;
            .transition(all .2s linear);
        }


        &__turnOn {
            background-image: url('../UserVoiceBubble/images/lamp_turnOn.svg');

            & + .component__shadow {
                opacity: 0.5;
            }
        }

        &__shadow {
            opacity: 0;
            background-image: url('../UserVoiceBubble/images/shadow.svg');
            position: absolute;
            width: 395px;
            z-index: 1;
            height: 70px;
            top: 0;
            left: 85px;
            transition: all .2s linear;
        }

        &__calc {
            position: absolute;
            left: 60px;
            top: 8px;
            background-image: url('../UserVoiceBubble/images/calc.svg');
            width: 144px;
            height: 65px;
        }

        &__chart {
            position: absolute;
            top: 5px;
            right: 130px;
            background-image: url('../UserVoiceBubble/images/chart.svg');
            width: 117px;
            height: 65px;
        }

        a{
            cursor: pointer;
            border-bottom: 1px dashed #1F85C5;
            text-decoration: none;

            &:hover{
                border-bottom: 0px;
            }
        }
    }
}

UserVoiceBubble.js

 import React, { Component } from 'react';
import PropTypes from 'prop-types';
import classnames from 'classnames/bind';
import FirmFlagService from './../../services/FirmFlagServiсe';
import style from './style..less';

const cn = classnames.bind(style);

class UserVoiceBubble extends Component {
    constructor(props) {
        super(props);
        this.state = {
            turnOn: false,
            href: ''
        };
    }

    onMouseOverCloseLink = event => {
        event.stopPropagation();
        this.setState({ turnOn: false });
    }

    onCloseBubble = (event) => {
        const { onCloseLink, firmFlag } = this.props;

        event.preventDefault();
        event.stopPropagation();

        FirmFlagService.enable(firmFlag);
        onCloseLink && onCloseLink(event);
    }

    getClassNames = () => {
        return cn({
            component__lamp: true,
            component__turnOn: this.state.turnOn
        });
    }

    mouseOver = () => {
        this.setState({ turnOn: true });
    }

    mouseOut = () => {
        this.setState({ turnOn: false });
    }

    redirectClick = () => {
        const { firmFlag } = this.props;

        FirmFlagService.enable(firmFlag);
    }

    render() {
        const { margin, title, urlToVote } = this.props;
        const marginObj = margin ? { margin } : {};
        return (
            <a href={urlToVote} className={style.componentWrapper} target="_blank" rel="noopener noreferrer">
                <button
                    className={style.component}
                    onClick={this.redirectClick}
                    onFocus={() => {}}
                    onMouseOver={this.mouseOver}
                    onMouseLeave={this.mouseOut}
                    style={marginObj}
                >
                    <div className={style.component__calc} />
                    <div className={this.getClassNames()} />
                    <div className={style.component__shadow} />
                    <div className={style.component__text}>
                        <p>{title || 'Выбери новый функционал'}</p>
                    </div>
                    <div className={style.component__chart} />
                </button>
                <button
                    onFocus={() => {}}
                    className={style.component__closeLink}
                    onClick={this.onCloseBubble}
                    onMouseOver={this.onMouseOverCloseLink}
                />
            </a>
        );
    }
}

UserVoiceBubble.propTypes = {
    onCloseLink: PropTypes.func,
    margin: PropTypes.string,
    title: PropTypes.string,
    urlToVote: PropTypes.string,
    firmFlag: PropTypes.string

};

export default UserVoiceBubble;