larva modules: social-share

Available Variants

prototype
social-share README

This needs docs!
Create a README.md in the pattern's directory and add details about using this pattern in markdown.

social-share Twig The markup file. 
<div class="social-share // lrv-u-align-items-center lrv-u-flex {{ social_share_classes }}">
	{% if social_share_prefix %}
		<span class="{{ social_share_prefix_classes }}">
			{{ social_share_prefix_text }}
		</span>
	{% endif %}

	<h2 id="article-social-share" class="lrv-a-screen-reader-only">Services to share this page.</h2>
	<ul class="lrv-a-unstyle-list lrv-u-flex lrv-u-flex-wrap-wrap {{ social_share_items_classes }}" data-collapsible="collapsed" aria-labelledby="article-social-share">
		{% for item in social_share_primary %}
			<li class="{{ social_share_item_classes }}">
				{% include "@larva/components/c-icon/c-icon.twig" with item %}
			</li>
		{% endfor %}

		{% if social_share_secondary %}
			<li data-collapsible-toggle>
				<button  class="c-button {{ c_icon_plus['c_icon_link_classes'] }}" title="Show more sharing options" data-toggle>
					{% include "@larva/components/c-icon/c-icon.twig" with c_icon_plus %}
				</button>
			</li>

			{% for item in social_share_secondary %}
				<li class="{{ social_share_item_classes }}" data-collapsible-panel>
					{% include "@larva/components/c-icon/c-icon.twig" with item %}
				</li>
			{% endfor %}
		{% endif %}
	</ul>
</div>
social-share JSON The data object for this pattern. 
{
	"social_share_classes": "",
	"social_share_prefix": false,
	"social_share_prefix_classes": "lrv-u-display-none@mobile-max lrv-u-color-grey lrv-u-font-size-10 lrv-u-text-transform-uppercase lrv-u-margin-r-1@tablet lrv-u-margin-b-050@mobile-max",
	"social_share_prefix_text": "Share",
	"social_share_items_classes": "lrv-a-space-children--1 lrv-a-space-children-horizontal",
	"social_share_primary": [
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "reddit",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "reddit",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "linkedin",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "linkedin",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "print",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "print",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		}
	],
	"social_share_secondary": [
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "facebook",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "facebook",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "twitter",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "twitter",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "pinterest",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "pinterest",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		},
		{
			"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-display-block lrv-u-display-inline-flex",
			"c_icon_name": "tumblr",
			"c_icon_target_attr": "_blank",
			"c_icon_link_screen_reader_text": "Icon Link",
			"c_icon_url": "#",
			"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
			"c_icon_rel_name": "tumblr",
			"c_icon_screen_reader_tag_text": "",
			"c_icon_screen_reader_text": "Plus Icon",
			"c_icon_screen_reader_title_attr": "Plus Icon"
		}
	],
	"c_icon_plus": {
		"c_icon_link_classes": "lrv-a-unstyle-button lrv-u-cursor-pointer",
		"c_icon_name": "plus",
		"c_icon_target_attr": "_blank",
		"c_icon_link_screen_reader_text": "Icon Link",
		"c_icon_url": "",
		"c_icon_classes": "lrv-u-width-16 lrv-u-height-16",
		"c_icon_rel_name": "plus",
		"c_icon_screen_reader_tag_text": "",
		"c_icon_screen_reader_text": "Plus Icon",
		"c_icon_screen_reader_title_attr": "Plus Icon"
	}
}