custom radio buttons. still need to fix outer la

      .radioButton {
        font-size: $my-font-size-small;
        font-weight: 600;
        color: #0055A6;
        background-color: white;
        display: inline-block;
        border: 1px solid #cccccc;
        border-radius: 2px;
        padding: 10px;
        margin: 10px;
        height: 110px;
        cursor: pointer;

        .stateActive {
          border: 1px solid #0055A6;
        }

        .icon {

        }

        .description {
          font-size: $my-font-size-small;
          font-weight: 400;
          color: #999999;
          white-space: pre-wrap;
          width: 150px;
          text-align: center;
        }
      }

      .radioButton:hover {
        border: 1px solid #4396ea;
      }




package ru.pochta.abon.cabinet.ui.layout;

import com.vaadin.ui.*;

import javax.annotation.PostConstruct;
import java.util.ArrayList;
import java.util.List;

public abstract class CustomRadioButtonLayout extends CssLayout{

    private List<RadioButtonLayout> radioButtonLayouts;
    private Object activeValue;

    List<String> icons;
    List<String> captions;
    List<String> descriptions;
    List<Object> values;

    @PostConstruct
    void init() {
        initData();
        fillData();
        initLayout();
    }

    void initData() {
        icons = new ArrayList<>();
        captions = new ArrayList<>();
        descriptions = new ArrayList<>();
        values = new ArrayList<>();

        radioButtonLayouts = new ArrayList<>();
    }

    abstract void fillData();

    void initLayout() {
        HorizontalLayout layout = new HorizontalLayout();
        layout.addStyleName("radioButton");

        for (int i = 0; i < captions.size(); i++) {
            RadioButtonLayout radioButtonLayout = new RadioButtonLayout(
                    icons.get(i),
                    captions.get(i),
                    descriptions.get(i),
                    values.get(i));

            layout.addComponent(radioButtonLayout);
            layout.setComponentAlignment(radioButtonLayout, Alignment.MIDDLE_CENTER);
        }

        this.addComponent(layout);
    }

    public Object getActiveValue() {
        return activeValue;
    }



    class RadioButtonLayout extends VerticalLayout {

        RadioButtonLayout(String pathToIcon, String caption, String description, Object value) {
            this.addStyleName("radioButton");

            Component icon = new Label(pathToIcon);
            this.addComponent(icon);
            this.setComponentAlignment(icon, Alignment.MIDDLE_CENTER);

            Component cap = new Label(caption);
            this.addComponent(cap);
            this.setComponentAlignment(cap, Alignment.MIDDLE_CENTER);

            if (!description.isEmpty()) {
                Component descr = new Label(description);
                descr.setPrimaryStyleName("description");

                this.addComponent(descr);
                this.setComponentAlignment(descr, Alignment.MIDDLE_CENTER);
            }

            this.addLayoutClickListener(layoutClickEvent -> {
                radioButtonLayouts.forEach(buttonLayout -> buttonLayout.removeStyleName("stateActive"));
                this.addStyleName("stateActive");

                activeValue = value;
            });

            radioButtonLayouts.add(this);
        }
    }
}



package ru.pochta.abon.cabinet.ui.layout;

import com.vaadin.spring.annotation.SpringComponent;
import com.vaadin.spring.annotation.ViewScope;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import ru.pochta.abon.cabinet.container.SessionContainer;
import ru.pochta.abon.library.dto.abonClient.enumeration.ClientTypeEnum;

@SpringComponent
@ViewScope
public class ClientTypeLayout extends CustomRadioButtonLayout {

    @Autowired
    private SessionContainer sessionContainer;

    @Autowired
    private MessageSource messageSource;

    @Override
    void fillData() {
        icons.add("");
        captions.add(messageSource.getMessage("clientTypeLayout.person", null, sessionContainer.getLocale()));
        descriptions.add("");
        values.add(ClientTypeEnum.PERSON.getId());

        icons.add("");
        captions.add(messageSource.getMessage("clientTypeLayout.organisation", null, sessionContainer.getLocale()));
        descriptions.add("");
        values.add(ClientTypeEnum.ORGANIZATION.getId());
    }
}




package ru.pochta.abon.cabinet.ui.layout;

import com.vaadin.spring.annotation.SpringComponent;
import com.vaadin.spring.annotation.ViewScope;
import org.springframework.beans.factory.annotation.Autowired;
import org.springframework.context.MessageSource;
import ru.pochta.abon.cabinet.container.SessionContainer;
import ru.pochta.abon.library.dto.abonClient.enumeration.PaymentMethodEnum;

@SpringComponent
@ViewScope
public class PaymentMethodLayout extends CustomRadioButtonLayout{

    @Autowired
    private SessionContainer sessionContainer;

    @Autowired
    private MessageSource messageSource;

    @Override
    void fillData() {
        icons.add("");
        captions.add(messageSource.getMessage("paymentMethodLayout.cashless", null, sessionContainer.getLocale()));
        descriptions.add(messageSource.getMessage("paymentMethodLayout.cashless.description", null, sessionContainer.getLocale()));
        values.add(PaymentMethodEnum.CASHLESS.getId());

        icons.add("");
        captions.add(messageSource.getMessage("paymentMethodLayout.cash", null, sessionContainer.getLocale()));
        descriptions.add(messageSource.getMessage("paymentMethodLayout.cash.description", null, sessionContainer.getLocale()));
        values.add(PaymentMethodEnum.CASH.getId());

        icons.add("");
        captions.add(messageSource.getMessage("paymentMethodLayout.billing", null, sessionContainer.getLocale()));
        descriptions.add(messageSource.getMessage("paymentMethodLayout.billing.description", null, sessionContainer.getLocale()));

        //TODO we only have 2 payment methods in enum
        values.add(3L);
    }
}



clientTypeLayout.person=Физическое лицо
clientTypeLayout.organisation=Юридическое лицо

paymentMethodLayout.cashless=Картой
paymentMethodLayout.cashless.description=онлайн оплата через сайт
paymentMethodLayout.cash=Наличными
paymentMethodLayout.cash.description=в почтовом отделении    по номеру заявки
paymentMethodLayout.billing=По счету
paymentMethodLayout.billing.description=бланк можно распечатать из списка заявлений



clientTypeLayout.person=Individual
clientTypeLayout.organisation=Legal entity

paymentMethodLayout.cashless=Cashless
paymentMethodLayout.cashless.description=online payment via web site
paymentMethodLayout.cash=Cash
paymentMethodLayout.cash.description=in post office by claim number
paymentMethodLayout.billing=Billing
paymentMethodLayout.billing.description=form can be printed out from the list of claims