Reusable person item for samples

[rolfsmeds]

This PR implements a reusable "person item" (avatar+name+profession) using person-item.css and a simple dom structure, and applies it to ListBox, ContextMenu, TreeGrid, Popover, and Select samples that previously had their individual Lumo-dependent implementations.

[jouni]

Nitpicking

Suggested change

	line-height: 1.0;
	line-height: 1;

[jouni]

Suggested change

	// HorizontalLayout userInfo = new HorizontalLayout();
	// userInfo.addClassName("userMenuHeader");
	// userInfo.setSpacing(false);
	// Avatar userAvatar = new Avatar(name);
	// userAvatar.setImage(pictureUrl);
	// userAvatar.getElement().setAttribute("tabindex", "-1");
	// userAvatar.addThemeVariants(AvatarVariant.LUMO_LARGE);
	// VerticalLayout nameLayout = new VerticalLayout();
	// nameLayout.setSpacing(false);
	// nameLayout.setPadding(false);
	// Div fullName = new Div(name);
	// fullName.getStyle().set("font-weight", "bold");
	// Div nickName = new Div("@" + person.getFirstName().toLowerCase()
	// + person.getLastName().toLowerCase());
	// nickName.addClassName("userMenuNickname");
	// nameLayout.add(fullName, nickName);
	// userInfo.add(userAvatar, nameLayout);