project modules: social-share
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 {{ social_share_classes }}">
{% if social_share_prefix %}
<span class="{{ social_share_prefix_classes }}">
{{ social_share_prefix_text }}
</span>
{% endif %}
<ul class="social-share-items {{ social_share_items_classes }}" data-collapsible="collapsed">
{% for item in primary %}
<li class="{{ social_share_item_classes }}">
{% include "@larva/components/c-icon/c-icon.twig" with item %}
</li>
{% endfor %}
{% if secondary %}
<li class="{{social_share_item_classes}}" data-collapsible-toggle>
{% include "@larva/components/c-icon/c-icon.twig" with plus_icon %}
</li>
{% for item in 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": "lrv-u-align-items-center lrv-u-flex",
"social_share_prefix": false,
"social_share_prefix_classes": "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-unstyle-list lrv-u-flex u-flex-wrap-wrap lrv-a-space-children--150 a-space-children--1@mobile-max lrv-a-space-children-horizontal",
"primary": [
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex",
"c_icon_url": "#",
"c_icon_rel_name": "facebook",
"c_icon_name": "facebook",
"c_icon_classes": "u-width-16 u-height-16"
},
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex",
"c_icon_url": "#",
"c_icon_rel_name": "twitter",
"c_icon_name": "twitter",
"c_icon_classes": "u-width-16 u-height-16"
},
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex",
"c_icon_url": "#",
"c_icon_rel_name": "pinterest",
"c_icon_name": "pinterest",
"c_icon_classes": "u-width-16 u-height-16"
},
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex",
"c_icon_url": "#",
"c_icon_rel_name": "tumblr",
"c_icon_name": "tumblr",
"c_icon_classes": "u-width-16 u-height-16"
}
],
"secondary": [
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex",
"c_icon_url": "#",
"c_icon_rel_name": "reddit",
"c_icon_name": "reddit",
"c_icon_classes": "u-width-16 u-height-16"
},
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex",
"c_icon_url": "#",
"c_icon_rel_name": "linkedin",
"c_icon_name": "linkedin",
"c_icon_classes": "u-width-16 u-height-16"
},
{
"c_icon_link_classes": "lrv-a-unstyle-link lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex js-PrintTrigger",
"c_icon_url": "#",
"c_icon_rel_name": "print",
"c_icon_name": "print",
"c_icon_classes": "u-width-16 u-height-16"
}
],
"plus_icon": {
"c_icon_link_classes": "lrv-u-border-color-grey-light lrv-u-display-block u-display-inline-flex u-color-black",
"c_icon_url": "#",
"c_icon_rel_name": "plus",
"c_icon_link_screen_reader_text": "+ additional share options added",
"c_icon_name": "plus",
"c_icon_classes": "u-width-16 u-height-16"
}
}