@penskemediacorp/larva-patterns 1.6.0-alpha.0 → 1.6.0

package/objects/o-account-menu/o-account-menu.prototype.js

@@ -0,0 +1,35 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_link_prototype = require('../../components/c-link/c-link.prototype');
+const c_span_prototype = require('../../components/c-span/c-span.prototype');
+
+const c_welcome_span = clonedeep(c_span_prototype);
+c_welcome_span.c_span_classes = 'subscriber-name lrv-a-font-body lrv-u-color-black lrv-u-font-size-12 lrv-u-text-transform-uppercase';
+c_welcome_span.c_span_text = 'Welcome Name';
+c_welcome_span.c_span_link_classes = 'lrv-u-color-black lrv-u-color-brand-primary:hover';
+c_welcome_span.c_span_url = '#';
+
+const c_account_link = clonedeep(c_link_prototype);
+c_account_link.c_link_text = 'Account';
+c_account_link.c_link_classes = 'subscriber-account-link lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max lrv-a-icon-after lrv-a-icon-arrow-down lrv-a-unstyle-link lrv-u-border-b-1 lrv-u-border-color-brand-primary:hover lrv-u-border-color-white lrv-u-color-brand-primary:hover lrv-u-text-transform-uppercase';
+
+const c_manage_account = clonedeep(c_link_prototype);
+c_manage_account.c_link_text = 'Manage Account';
+c_manage_account.c_link_classes = 'subscriber-self-care-link lrv-u-text-transform-uppercase lrv-a-font-secondary lrv-u-color-black lrv-u-font-size-12 lrv-u-width-100 lrv-u-text-align-center lrv-u-color-brand-primary:hover';
+
+const c_log_out = clonedeep(c_link_prototype);
+c_log_out.c_link_text = 'Sign Out';
+c_log_out.c_link_classes = 'subscriber-logout-link lrv-a-font-secondary lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-font-size-12 lrv-u-text-transform-uppercase';
+
+module.exports = {
+	o_account_menu_classes: 'js-Tooltip-parent lrv-a-glue-parent lrv-u-flex',
+	o_account_content_classes: 'js-Tooltip lrv-a-glue lrv-a-glue--t-100p lrv-u-box-shadow-medium',
+	o_account_content_inner_classes: 'lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-background-color-white lrv-u-border-a-2 lrv-u-flex lrv-u-flex-direction-column lrv-u-text-align-left lrv-u-flex-wrap-wrap lrv-u-margin-t-1 lrv-u-padding-tb-050 lrv-u-padding-lr-150 lrv-u-width-200',
+	o_account_welcome_span_classes: 'lrv-u-border-b-1 lrv-u-padding-tb-050',
+	o_account_manage_account_classes: 'lrv-u-border-b-1 lrv-u-padding-tb-050',
+	o_account_logout_classes: 'lrv-u-padding-tb-050',
+	c_welcome_span,
+	c_account_link,
+	c_manage_account,
+	c_log_out,
+};

package/objects/o-account-menu/o-account-menu.twig

@@ -0,0 +1,25 @@
+<div class="o-account-menu //  {{ o_account_menu_classes }}">
+	{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
+	<div class="o-account-content // {{ o_account_content_classes }}">
+		<div class="o-account-content-inner // {{ o_account_content_inner_classes }}">
+
+			{% if c_welcome_span %}
+				<div class="o-account-welcome-span-link // {{ o_account_welcome_span_classes }} ">
+					{% include "@larva/components/c-span/c-span.twig" with c_welcome_span %}
+				</div>
+			{% endif %}
+
+			{% if c_manage_account %}
+				<div class="o-account-manage-account-link // {{ o_account_manage_account_classes }} ">
+					{% include "@larva/components/c-link/c-link.twig" with c_manage_account %}
+				</div>
+			{% endif %}
+
+			{% if c_log_out %}
+				<div class="o-account-logout-link // {{ o_account_logout_classes }} ">
+					{% include "@larva/components/c-link/c-link.twig" with c_log_out %}
+				</div>
+			{% endif %}
+		</div>
+	</div>
+</div>

package/objects/o-author/o-author.prototype.js

@@ -0,0 +1,13 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
+
+c_span.c_span_text = 'Author Name';
+
+module.exports = {
+	o_author_classes: 'lrv-a-font-secondary-regular-m',
+	o_author_text: 'By ',
+	c_span: c_span,
+	c_timestamp: c_timestamp
+};

package/objects/o-author/o-author.twig

@@ -0,0 +1,13 @@
+<div class="o-author // {{ o_author_classes }}">
+
+	<span class="{{ o_author_by_classes }}">{{ o_author_text }}</span>
+
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
+
+	{% if c_timestamp %}
+		{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+	{% endif %}
+
+</div>

package/objects/o-card/README.md

@@ -0,0 +1 @@
+`o-card` is a pattern generally used for a story or article that features a vertical layout. It is a very flexible pattern that includes several options for included components. The order of these can be modified to some extent using flex and `order` utilities, but developers should try to avoid modifying the display order in a way that could impact the experience for users using the keyboard.

package/objects/o-card/o-card.prototype.js

@@ -0,0 +1,25 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.tag' );
+const c_timestamp = __experimentalCloneWithFallback( 'components/c-timestamp/c-timestamp.prototype' );
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype.js' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype.js' ) );
+
+module.exports = {
+	o_card_classes: '',
+	o_card_tag_text: '',
+	o_card_link_url: '',
+	o_card_link_classes: '',
+	o_card_image_wrap_classes: '',
+	o_card_content_classes: '',
+	c_lazy_image: c_lazy_image,
+	c_svg: false,
+	c_span: c_span,
+	c_tagline: false,
+	c_title: c_title,
+	c_timestamp: c_timestamp,
+	o_author: false,
+	article_kicker:false,
+	article_kicker_outer_classes:'',
+};

package/objects/o-card/o-card.twig

@@ -0,0 +1,75 @@
+{% if o_card_tag_text %}
+<{{ o_card_tag_text }} class="o-card {{ modifier_class }} {{ o_card_classes }}">
+{% else %}
+<article class="o-card {{ modifier_class }} {{ o_card_classes }}">
+{% endif %}
+
+	{% if o_card_link_url %}
+		<a tabindex="0" href="{{ o_card_link_url }}" class="{{ o_card_link_classes }}">
+	{% endif %}
+
+	{% if o_card_image_wrap_classes %}
+	<div class="o-card__image-wrap {{ o_card_image_wrap_classes }}">
+		{% endif %}
+
+		{% if c_lazy_image %}
+			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+		{% endif %}
+
+		{% if o_indicator %}
+			{% include "@larva/objects/o-indicator/o-indicator.twig" with o_indicator %}
+		{% endif %}
+
+		{% if o_card_image_wrap_classes %}
+	</div>
+	{% endif %}
+
+	<div class="o-card__content {{ o_card_content_classes }}">
+		{% if o_span_group %}
+			{% include "@larva/objects/o-span-group/o-span-group.twig" with o_span_group %}
+		{% endif %}
+
+		{% if c_svg %}
+			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+		{% endif %}
+
+		{% if article_kicker %}
+			<div class="article_kicker_outer // {{ article_kicker_outer_classes }}">
+				{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
+			</div>
+		{% endif %}
+
+		{% if c_span %}
+			{% include "@larva/components/c-span/c-span.twig" with c_span %}
+		{% endif %}
+
+		{% if c_title %}
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		{% endif %}
+
+		{% if c_timestamp %}
+			{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+		{% endif %}
+
+		{% if c_dek %}
+			{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+		{% endif %}
+
+		{% if c_tagline %}
+			{% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
+		{% endif %}
+
+		{% if o_author %}
+			{% include "@larva/objects/o-author/o-author.twig" with o_author %}
+		{% endif %}
+	</div>
+
+	{% if o_card_link_url %}
+	</a>
+	{% endif %}
+
+{% if o_card_tag_text %}
+</{{ o_card_tag_text }}>
+{% else %}
+</article>
+{% endif %}

package/objects/o-card-list/README.md

@@ -0,0 +1,3 @@
+`o-card-list` is a simple wrapping patttern for displaying a list of `o-card`s. This pattern is only necessary when semantic list elements are useful, or when a storing classes in a central place for the `li` wrapping element is useful.
+
+A future improvement to this pattern would be an option for an `ol` since many of the card lists will be ordered chronologically.

package/objects/o-card-list/o-card-list.prototype.js

@@ -0,0 +1,13 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_card = clonedeep( require( '../o-card/o-card.prototype' ) );
+
+module.exports = {
+	o_card_list_classes: 'lrv-a-unstyle-list',
+	o_card_list_item_classes: '',
+	o_card_list_items: [
+		o_card,
+		o_card,
+		o_card
+	]
+};

package/objects/o-card-list/o-card-list.twig

@@ -0,0 +1,7 @@
+<ul class="o-card-list {{ modifier_class }} {{ o_card_list_classes }}">
+	{% for item in o_card_list_items %}
+		<li class="o-card-list__item {{ o_card_list_item_classes }}">
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		</li>
+	{% endfor %}
+</ul>

package/objects/o-checkbox-input-list/o-checkbox-input-list.prototype.js

@@ -0,0 +1,16 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_checkbox_input = clonedeep( require( '../../components/c-checkbox-input/c-checkbox-input.prototype' ) );
+
+c_title.c_title_url = '';
+
+module.exports = {
+	o_checkbox_input_list_classes: '',
+	o_checkbox_input_list_items_classes: 'lrv-a-unstyle-list',
+	o_checkbox_input_list_item_classes: '',
+	c_title: c_title,
+	o_checkbox_input_list_items: [
+		c_checkbox_input, c_checkbox_input, c_checkbox_input
+	]
+};

package/objects/o-checkbox-input-list/o-checkbox-input-list.twig

@@ -0,0 +1,15 @@
+<section class="o-checkbox-input-list {{ o_checkbox_input_list_classes }}">
+
+	{% if c_title %}
+		{% include "@larva/components/c-title/c-title.twig" with c_title %}
+	{% endif %}
+
+	<ul class="{{ o_checkbox_input_list_items_classes }}">
+		{% for item in o_checkbox_input_list_items %}
+			<li class="{{ o_checkbox_input_list_item_classes }}">
+				{% include "@larva/components/c-checkbox-input/c-checkbox-input.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+
+</section>

package/objects/o-collection-item/o-collection-item.floated.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_collection_item = clonedeep( require( './o-collection-item.prototype' ) );
+
+o_collection_item.o_collection_item_classes += ' lrv-a-floated-parent';
+o_collection_item.o_figure.o_figure_classes += ' lrv-a-floated-left';
+
+module.exports = o_collection_item;

package/objects/o-collection-item/o-collection-item.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const o_figure = clonedeep( require( '../o-figure/o-figure.prototype' ) );
+const c_dek = clonedeep( require( '../../components/c-dek/c-dek.prototype' ) );
+
+module.exports = {
+	c_title: c_title,
+	c_dek: c_dek,
+	o_figure: o_figure,
+};

package/objects/o-collection-item/o-collection-item.twig

@@ -0,0 +1,5 @@
+<div class="o-collection-item {{ o_collection_item_classes }}">
+	{% include "@larva/components/c-title/c-title.twig" with c_title %}
+	{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+</div>

package/objects/o-email-capture-form/README.md

@@ -0,0 +1,11 @@
+o-email-capture-form is an object intended to collect emails via the ExactTarget API. It accepts an array of c-hidden-fields for this the Opted In and Date ExactTarget data. 
+
+Although it could be used to collect emails via other services, developers should consider creating project-level patterns for anything other than ExactTarget. 
+
+Also note that o-email-capture-form should not be used to provide an email input in a longer form – it should be used only when a form required a single input for an email.
+
+This pattern is intended to go along with the EmailCapture larva-js package that will handle appending the input value to a success URL when the form is submitted. 
+
+## Available configuraitons:
+
+* `o-email-capture-form.minimal` – This configuration shows the input as a single line, and the submit button as a small arrow to the right of the input.

package/objects/o-email-capture-form/o-email-capture-form.minimal.js

@@ -0,0 +1,15 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_email_capture_form = clonedeep( require( './o-email-capture-form.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.stripped' ) );
+const c_email_field = clonedeep( require( '../../components/c-email-field/c-email-field.ghost' ) );
+
+c_button.c_button_classes += ' lrv-a-icon-after lrv-a-icon-arrow-right';
+c_button.c_button_inner_classes = 'lrv-a-screen-reader-only';
+c_button.c_button_type_attr = 'submit';
+
+o_email_capture_form.c_button = c_button;
+o_email_capture_form.c_email_field = c_email_field;
+o_email_capture_form.o_email_capture_form_inner_classes = 'lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center lrv-u-border-b-1 lrv-u-border-color-currentColor';
+
+module.exports = o_email_capture_form;

package/objects/o-email-capture-form/o-email-capture-form.prototype.js

@@ -0,0 +1,17 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+const c_email_field = clonedeep( require( '../../components/c-email-field/c-email-field.prototype' ) );
+
+module.exports = {
+	o_email_capture_form_classes: '',
+	o_email_capture_form_context_name_attr: 'FormPost',
+	o_email_capture_form_inner_classes: '',
+	o_email_capture_form_action_url: '',
+	o_email_capture_form_button_text: 'Sign up',
+	o_email_capture_form_name_attr: 'email-capture-form',
+	o_email_capture_form_success_url: '',
+	c_button: c_button,
+	c_email_field: c_email_field,
+	o_email_capture_form_hidden_field_items: []
+};

package/objects/o-email-capture-form/o-email-capture-form.twig

@@ -0,0 +1,16 @@
+<form class="o-email-capture-form lrv-js-EmailCapture {{ o_email_capture_form_classes }}" method="post" action="{{ o_email_capture_form_action_url }}" name="{{ o_email_capture_form_name_attr }}" target="_blank">
+
+	<div class="o-email-capture-form__inner {{ o_email_capture_form_inner_classes }}">
+		{% include "@larva/components/c-email-field/c-email-field.twig" with c_email_field %}
+		{% include "@larva/components/c-button/c-button.twig" with c_button %}
+	</div>
+
+
+	<input type="hidden" name="__contextName" value="{{ o_email_capture_form_context_name_attr }}"/>
+	<input type="hidden" name="__executionContext" value="Post" />
+	<input type="hidden" name="__successPage" data-email-capture-success-url="{{ o_email_capture_form_success_url }}" value="" />
+
+	{% for item in o_email_capture_form_hidden_field_items %}
+		{% include "@larva/components/c-hidden-field/c-hidden-field.twig" with item %}
+	{% endfor %}
+</form>

package/objects/o-figure/README.md

@@ -0,0 +1,17 @@
+o-figure is designed to support images with a caption and a credit, primarily used within editorial content in `the_content` in WordPress. pmc-core-v2 contains a filter on the `caption` shortcode that applies this pattern. Is it also used in for featured images that include credits and captions.
+
+It consists of a `figure` element around a `c-lazy-image` and `c-figcaption`, with an optional link wrapper to make the entire block clickable.
+
+There is an option for adding an inline style for the width on the `figure` to provide a smooth paint in post content.
+
+The pattern supports Lazy Loading with `c-lazy-image`.
+
+## When to use:
+* For images or content that can stand on its own, outside of the document flow. Read more about [semantic use of `figure` here](http://html5doctor.com/the-figure-figcaption-elements/). 
+
+## When not to use:
+* For images that cannot stand on their own as content, e.g. a featured image for a post that requires additional post content to be understood.
+* Logo or icons
+
+## Future:
+Could support non-image figures such as charts, embeds, or quotes.

package/objects/o-figure/o-figure.prototype.js

@@ -1,8 +1,16 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_figcaption = clonedeep( require( '../../components/c-figcaption/c-figcaption.prototype' ) );
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+
 module.exports = {
-	"o_figure_permalink_url": "https://notlaura.com",
-	"o_figure_alt_attr": "Thumbnail image",
-	"o_figure_placeholder_image_url": "https://picsum.photos/300/300",
-	"o_figure_image_url": "https://picsum.photos/300/300",
-	"o_figure_caption_text": "Here is some caption text",
-	"o_figure_screen_reader_text": "Text if there is no caption"
-}
+	c_figcaption: c_figcaption,
+	c_lazy_image: c_lazy_image,
+	o_figure_link_tabindex_attr: '',
+	o_figure_link_target_attr: '_self',
+	o_figure_link_url: false,
+	o_figure_classes: '',
+	o_figure_link_classes: 'lrv-a-unstyle-link ',
+	o_figure_figcaption_outer: false,
+	o_figure_figcaption_outer_classes: '',
+};

package/objects/o-figure/o-figure.twig

@@ -1,57 +1,34 @@
-{% if o_figure_permalink_url %}
-	<a href="{{ o_figure_permalink_url }}" class="o-figure__link {{ o_figure_link_classes }}">
-{% endif %}
-
-{% if o_figure_screen_reader_text %}
-	<span class="a-screen-reader-only">{{ o_figure_screen_reader_text }}</span>
-{% endif %}
-
-{% if has_toaster %}
-	<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }}" data-toaster-activate-trigger>
-{% else %}
-	<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }}" style="{{ o_figure_width_attr }}">
+{% if o_figure_link_url %}
+	<a href="{{ o_figure_link_url }}" class="o-figure__link {{ o_figure_link_classes }}"
+		{% if o_figure_link_target_attr %}
+			target="{{ o_figure_link_target_attr }}"
+		{% endif %}
+		{% if o_figure_link_tabindex_attr %}
+			tabindex="{{ o_figure_link_tabindex_attr }}"
+		{% endif %}
+	>
 {% endif %}
 
-{% if o_figure_crop_class %}
-	<div class="{{ o_figure_crop_class }}">
-{% endif %}
+<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }} lrv-u-max-width-100p" style="{{ o_figure_width_attr }}">
 
-{% if o_figure_image_markup %}
-	{{ o_figure_image_markup }}
-{% else %}
-	<img class="o-figure__image {{ o_figure_image_classes }}" src="{{ o_figure_placeholder_image_url }}" data-lazy-src="{{ o_figure_image_url }}" alt="{{ o_figure_alt_attr }}">
-{% endif %}
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+	{% endif %}
 
-{% if c_button %}
-	{% include "@larva/components/c-button/c-button.twig" with c_button %}
-{% endif %}
-
-{% if o_figure_crop_class %}
-	</div>
-{% endif %}
+	{% if c_figcaption %}
+		{% if o_figure_figcaption_outer %}
+			<div class="o-figure__figcaption-outer {{ o_figure_figcaption_outer_classes }}">
+		{% endif %}
 
-{# Backwards Compatibility #}
-{% if o_figure_caption_text %}
-	<figcaption class="o-figure__caption {{ o_figure_caption_classes }}">{{ o_figure_caption_text }}</figcaption>
-{% endif %}
+			{% include "@larva/components/c-figcaption/c-figcaption.twig" with c_figcaption %}
 
-{% if o_figure_show_figcaption %}
-	<figcaption class="o-figure__caption {{ o_figure_figcaption_classes }}">
-		{% if o_figure_caption_markup %}
-			<span class="{{ o_figure_caption_classes }}">{{ o_figure_caption_markup }}</span>
+		{% if o_figure_figcaption_outer %}
+			</div>
 		{% endif %}
-		{% if o_figure_credit_text %}
-			<span class="{{ o_figure_credit_classes }}">{{ o_figure_credit_text }}</span>
-		{% endif %}
-	</figcaption>
-{% endif %}
-
-{% if c_play_badge %}
-	{% include "@larva/components/c-play-badge/c-play-badge.twig" with c_play_badge %}
-{% endif %}
+	{% endif %}
 
 </figure>
 
-{% if o_figure_permalink_url %}
+{% if o_figure_link_url %}
 	</a>
 {% endif %}

package/objects/o-header/o-header.prototype.js

@@ -1,12 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+
+c_button.c_button_classes = 'lrv-u-font-size-12 lrv-u-text-transform-uppercase lrv-a-icon-after lrv-a-icon-arrow-right lrv-u-margin-l-auto';
+c_button.c_button_text = 'Link';
+c_button.c_button_url = '#';
+
 module.exports = {
-	"o_heading_classes": "u-flex u-align-items-center pmc-u-background-black pmc-u-padding-a-1",
-	"c_heading": {
-		"c_heading_classes": "pmc-u-color-white",
-		"c_heading_text": "Section Heading"
-	},
-	"c_button": {
-		"modifier_class": "c-button--plain pmc-u-font-size-12 pmc-u-color-white pmc-u-text-transform-uppercase a-icon-after a-icon-arrow-right u-margin-l-auto",
-		"c_button_url": "#",
-		"c_button_text": "Link"
-	}
+	o_heading_classes: 'lrv-u-flex lrv-u-align-items-center lrv-u-padding-a-1',
+	c_heading: c_heading,
+	c_button: c_button
 };

package/objects/o-header/o-header.twig

@@ -1,4 +1,4 @@
-<header class="o-heading {{ modifier_class }} {{ o_heading_classes }}">
+<header class="o-header {{ modifier_class }} {{ o_heading_classes }}">
 	{% if c_heading %}
 		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 	{% endif %}
@@ -11,6 +11,10 @@
 		{% include "@larva/components/c-button/c-button.twig" with c_button %}
 	{% endif %}
 
+	{% if c_svg %}
+		{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+	{% endif %}
+
 	{% if o_sponsored_by %}
 		{% include "@larva/objects/o-sponsored-by/o-sponsored-by.twig" with o_sponsored_by %}
 	{% endif %}

package/objects/o-header-buttons/o-header-buttons.column.js

@@ -0,0 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const header_buttons_prototype = require( './o-header-buttons.prototype' );
+const header_buttons = clonedeep( header_buttons_prototype );
+
+header_buttons.button_wrap = true;
+header_buttons.c_subscribe_link.c_link_classes = 'lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-currentColor lrv-u-margin-b-025';
+header_buttons.c_got_a_tip.c_link_classes  = 'lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-margin-tb-025';
+header_buttons.o_header_button_classes = 'lrv-u-align-items-stretch lrv-a-space-children-horizontal lrv-a-space-children--1';
+module.exports = header_buttons;

package/objects/o-header-buttons/o-header-buttons.prototype.js

@@ -0,0 +1,41 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_link_prototype = require( '../../components/c-link/c-link.prototype' );
+const o_account_menu_prototype = require( '../../objects/o-account-menu/o-account-menu.prototype');
+
+const c_login_link = clonedeep( c_link_prototype );
+c_login_link.c_link_text = 'Log In';
+c_login_link.c_link_classes = ' lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const c_subscribe_link = clonedeep( c_link_prototype );
+c_subscribe_link.c_link_text = 'Subscribe';
+c_subscribe_link.c_link_classes = 'lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const c_account_link = clonedeep( c_link_prototype );
+c_account_link.c_link_text = 'Account';
+c_account_link.c_link_classes = 'lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const c_got_a_tip = clonedeep( c_link_prototype );
+c_got_a_tip.c_link_text = 'Got A Tip?';
+c_got_a_tip.c_link_classes = 'lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover';
+
+const o_account_menu = clonedeep( o_account_menu_prototype );
+
+o_account_menu.c_account_link.c_link_classes  = ' lrv-a-unstyle-link lrv-u-text-transform-uppercase lrv-u-font-family-body lrv-u-font-size-12 lrv-u-font-size-8@mobile-max  lrv-u-color-brand-primary:hover lrv-u-border-b-1 lrv-u-border-color-white lrv-u-border-color-brand-primary:hover lrv-u-margin-tb-025';
+
+module.exports = {
+	c_login_link,
+	c_subscribe_link,
+	o_account_menu,
+	c_got_a_tip,
+	c_account_link,
+	button_wrap: false,
+	show_flyout: true,
+	o_header_button_classes: 'lrv-a-space-children-horizontal lrv-a-space-children--1',
+	got_tip_wrapper_classes: 'lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-flex lrv-u-align-items-center lrv-u-margin-tb-025',
+	account_menu_classes: 'lrv-u-flex lrv-u-align-items-center lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-margin-tb-025',
+	hide_flyout_classes: ' ',
+	subscribe_wrapper_classes: 'subscribe-link cx-dynamic-link lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025 lrv-u-margin-tb-025',
+	login_wrapper_classes: 'subscriber-login-link lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-padding-tb-025  lrv-u-margin-tb-025',
+	button_wrap_classes: 'lrv-u-flex lrv-u-flex-direction-column lrv-u-align-items-center lrv-u-border-l-00@mobile-max lrv-u-border-l-1 lrv-u-padding-l-1 lrv-u-margin-tb-025',
+};

package/objects/o-header-buttons/o-header-buttons.twig

@@ -0,0 +1,42 @@
+<div class="lrv-u-flex {{o_header_button_classes}}">
+	<div class="item-wrap // {{ got_tip_wrapper_classes }}">
+		{% include "@larva/components/c-link/c-link.twig" with c_got_a_tip %}
+	</div>
+
+		{% if show_flyout %}
+
+			<div class="item-wrap // {{ account_menu_classes }} ">
+				{% include "@larva/objects/o-account-menu/o-account-menu.twig" with o_account_menu %}
+			</div>
+
+		{% else %}
+
+			<div class="item-wrap // {{ account_menu_classes }} {{ hide_flyout_classes}}">
+				{% include "@larva/components/c-link/c-link.twig" with c_account_link %}
+			</div>
+
+		{% endif %}
+
+		{% if button_wrap %}
+
+			<div class="items-wrap // {{ button_wrap_classes }}">
+				{% if c_subscribe_link %}
+					{% include "@larva/components/c-link/c-link.twig" with c_subscribe_link %}
+				{% endif %}
+
+				{% include "@larva/components/c-link/c-link.twig" with c_login_link %}
+			</div>
+
+		{% else %}
+
+			<div class="item-wrap // {{ subscribe_wrapper_classes }}">
+				{% if c_subscribe_link %}
+					{% include "@larva/components/c-link/c-link.twig" with c_subscribe_link %}
+				{% endif %}
+			</div>
+			<div class="item-wrap // {{ login_wrapper_classes }} ">
+				{% include "@larva/components/c-link/c-link.twig" with c_login_link %}
+			</div>
+
+		{% endif %}
+</div>

package/objects/o-icon-button/README.md

@@ -0,0 +1,5 @@
+The Icon button is comprised of c_icon and c_span. While c_icon and c_span both support URLs, any URL for o-icon-button should be passed using o_icon_button_url. In this case, it will render an anchor tag instead of a button tag.
+
+## Available configurations:
+
+* `o-icon-button.search` – Contains search icon from `c-icon` and no text.