@penskemediacorp/larva-patterns 1.0.2-alpha.0 → 1.1.2

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

@@ -0,0 +1,34 @@
+{% 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 %}
+
+<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }} lrv-u-max-width-100p" style="{{ o_figure_width_attr }}">
+
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
+	{% endif %}
+
+	{% if c_figcaption %}
+		{% if o_figure_figcaption_outer %}
+			<div class="o-figure__figcaption-outer {{ o_figure_figcaption_outer_classes }}">
+		{% endif %}
+
+			{% include "@larva/components/c-figcaption/c-figcaption.twig" with c_figcaption %}
+
+		{% if o_figure_figcaption_outer %}
+			</div>
+		{% endif %}
+	{% endif %}
+
+</figure>
+
+{% if o_figure_link_url %}
+	</a>
+{% endif %}

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

@@ -0,0 +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: 'lrv-u-flex lrv-u-align-items-center lrv-u-padding-a-1',
+	c_heading: c_heading,
+	c_button: c_button
+};

package/{src/objects → 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.

package/objects/o-icon-button/o-icon-button.prototype.js

@@ -0,0 +1,18 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span = clonedeep( require( '../../components/c-span/c-span.prototype' ) );
+const c_icon = clonedeep( require( '../../components/c-icon/c-icon.prototype' ) );
+
+c_icon.c_icon_name = 'hamburger';
+c_icon.c_icon_url = false;
+
+c_span.c_span_text = 'Menu';
+c_span.c_span_classes = 'lrv-u-margin-l-050';
+c_span.c_span_url = false;
+
+module.exports = {
+	o_icon_button_classes: 'lrv-a-unstyle-button lrv-a-unstyle-link lrv-u-cursor-pointer lrv-u-flex',
+	o_icon_button_screen_reader_text: '',
+	c_icon: c_icon,
+	c_span: c_span,
+};

package/objects/o-icon-button/o-icon-button.search.js

@@ -0,0 +1,9 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_icon_button_search = clonedeep( require( './o-icon-button.prototype' ) );
+
+o_icon_button_search.c_icon.c_icon_name = 'search';
+o_icon_button_search.o_icon_button_screen_reader_text = 'Click to Expand Search Input';
+o_icon_button_search.c_span = false;
+
+module.exports = o_icon_button_search;

package/objects/o-icon-button/o-icon-button.twig

@@ -0,0 +1,21 @@
+{% if o_icon_button_url %}
+	<a href="{{ o_button_url }}" class="{{ o_icon_button_classes }}">
+{% else %}
+	<button class="o-icon-button {{ o_icon_button_classes }}">
+{% endif %}
+
+	{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+
+	{% if o_icon_button_screen_reader_text %}
+		<span class="lrv-a-screen-reader-only">{{ o_icon_button_screen_reader_text }}</span>
+	{% endif %}
+
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
+
+{% if o_icon_button_url %}
+	</a>
+{% else %}
+	</button>
+{% endif %}

package/objects/o-indicator/README.md

@@ -0,0 +1 @@
+The indicator object supports `c-span` and/or `c-icon`. It is useful for arbitrary icons or text that visually support other elements, for example, the "Photos" or "Video" indication stuck to the image in a `story` excerpt. Works nicely with `a-glue`.

package/objects/o-indicator/o-indicator.photos.js

@@ -0,0 +1,12 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_indicator = clonedeep( require( './o-indicator.prototype' ) );
+const c_icon = clonedeep( require( '../../components/c-icon/c-icon.prototype' ) );
+
+o_indicator.c_icon = clonedeep( c_icon );
+o_indicator.c_icon.c_icon_name = 'gallery';
+o_indicator.c_span.c_span_text = 'Photos';
+o_indicator.c_span.c_span_classes += ' lrv-u-margin-l-050 lrv-u-text-transform-uppercase lrv-a-font-secondary-s';
+o_indicator.o_indicator_classes += ' lrv-u-flex lrv-u-background-color-black lrv-u-color-white lrv-u-padding-a-050 lrv-u-border-radius-5 lrv-u-margin-a-050';
+
+module.exports = o_indicator;

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

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span = clonedeep( require( '../../components/c-span/c-span.prototype.js' ) );
+
+module.exports = {
+	o_indicator_classes: 'lrv-a-glue lrv-a-glue--b-0 lrv-a-glue--r-0 u-pointer-events-none',
+	c_span: c_span
+};

package/objects/o-indicator/o-indicator.twig

@@ -0,0 +1,9 @@
+<span class="o-indicator {{ o_indicator_classes }}">
+	{% if c_icon %}
+		{% include "@larva/components/c-icon/c-icon.twig" with c_icon %}
+	{% endif %}
+
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
+</span>

package/objects/o-input-group/o-input-group.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const c_input = clonedeep(require('@penskemediacorp/larva-patterns/components/c-input/c-input.prototype'));
+
+module.exports = {
+	o_input_group_class: '',
+	o_input_group_items: [
+		c_input,
+		c_input,
+		c_input
+	]
+};

package/objects/o-input-group/o-input-group.twig

@@ -0,0 +1,5 @@
+<div class="o-input-group {{ o_input_group_class }}">
+	{% for item in o_input_group_items %}
+		{% include "@larva/components/c-input/c-input.twig" with item %}
+	{% endfor %}
+</div>

package/objects/o-nav/README.md

@@ -0,0 +1,3 @@
+o-nav is an object with a `nav` element containing an unordered list with list items in a for loop that contain an instance of `c-link`. It contains an optional `h4` list title. o-nav is useful for menus with several items, and the ability to apply utilities to all `li`s inside the loop with a single key can useful.
+
+In general, o-nav should be used for internal site links. It can be adapted to work with the JS pattern `MobileHeightToggle`. See the footer-menus module for an example.

package/objects/o-nav/o-nav.horizontal.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_nav = clonedeep( require( '../../objects/o-nav/o-nav.prototype' ) );
+
+o_nav.o_nav_classes = 'lrv-u-flex';
+o_nav.o_nav_list_classes += ' lrv-u-flex lrv-a-space-children-horizontal lrv-a-space-children--1 lrv-u-align-items-center lrv-u-a-unstyle-list';
+
+module.exports = o_nav;

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

@@ -0,0 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const c_link_prototype = require( '../../components/c-link/c-link.prototype' );
+
+const o_nav_list_items = [
+	clonedeep( c_link_prototype ),
+	clonedeep( c_link_prototype ),
+	clonedeep( c_link_prototype )
+];
+
+module.exports = {
+	modifier_class: '',
+	o_nav_classes: '',
+	o_nav_title_text: '',
+	o_nav_title_id_attr: '',
+	o_nav_title_classes: '',
+	o_nav_aria_labelledby_attr: '',
+	o_nav_screen_reader_id_attr: 'optional-screen-reader',
+	o_nav_screen_reader_text: 'optional screen reader',
+	o_nav_list_classes: 'lrv-a-unstyle-list',
+	o_nav_list_item_classes: '',
+	o_nav_list_items: o_nav_list_items,
+	o_nav_list_labelledby_attr: ''
+};

package/objects/o-nav/o-nav.twig

@@ -0,0 +1,40 @@
+{% if o_nav_screen_reader_text %}
+	<h2 id="{{ o_nav_screen_reader_id_attr }}" class="lrv-a-screen-reader-only">
+		{{ o_nav_screen_reader_text }}
+	</h2>
+{% endif %}
+<nav class="o-nav {{ modifier_class }} {{ o_nav_classes }}" data-dropdown="{{ o_nav_data_attributes }}"
+	{% if o_nav_title_id_attr %}
+		aria-label="{{ o_nav_title_id_attr }}"
+	{% endif %}
+	{% if o_nav_aria_labelledby_attr %}
+		aria-labelledby="{{ o_nav_aria_labelledby_attr }}"
+	{% endif %}
+>
+
+	{% if o_nav_title_text %}
+		{% if o_nav_title_outer %}
+			<div class="o-nav__title-outer {{ o_nav_title_outer_classes }}">
+		{% endif %}
+				{% if o_nav_tag_text %}
+					<{{ o_nav_tag_text }} id="{{ o_nav_title_id_attr }}" class="o-nav__title {{ o_nav_title_classes }}">{{ o_nav_title_text }}</{{ o_nav_tag_text }}>
+				{% else %}
+					<h4 id="{{ o_nav_title_id_attr }}" class="o-nav__title {{ o_nav_title_classes }}">{{ o_nav_title_text }}</h4>
+				{% endif %}
+		{% if o_nav_title_outer %}
+			</div>
+		{% endif %}
+	{% endif %}
+
+	<ul class="o-nav__list {{ o_nav_list_classes }}"
+		{% if o_nav_list_labelledby_attr %}
+			aria-labelledby="{{ o_nav_list_labelledby_attr }}"
+		{% endif %}
+	>
+		{% for item in o_nav_list_items %}
+			<li class="o-nav__list-item {{ o_nav_list_item_classes }}">
+				{% include "@larva/components/c-link/c-link.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+</nav>

package/objects/o-select-nav/o-select-nav.prototype.js

@@ -0,0 +1,17 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button = clonedeep( require( '../../components/c-button/c-button.prototype' ) );
+const c_select_option = clonedeep( require( '../../components/c-select-option/c-select-option.prototype' ) );
+
+c_button.c_button_text = 'Click Me';
+
+module.exports = {
+	o_select_nav_classes: '',
+	o_select_nav_select_classes: '',
+	c_button: c_button,
+	o_select_nav_options: [
+		c_select_option,
+		c_select_option,
+		c_select_option
+	]
+};

package/objects/o-select-nav/o-select-nav.twig

@@ -0,0 +1,9 @@
+<div class="o-select-nav js-SelectNav js-SelectNav-redirect lrv-a-glue-parent {{ o_select_nav_classes }}">
+	{% include "@larva/components/c-button/c-button.twig" with c_button %}
+
+	<select class="o-select-nav__select js-SelectNav-select lrv-u-cursor-pointer lrv-a-glue lrv-a-glue--t-0 lrv-a-glue--l-0 lrv-u-width-100p lrv-u-height-100p lrv-u-opacity-0 {{ o_select_nav_select_classes }}">
+		{% for item in o_select_nav_options %}
+			{% include "@larva/components/c-select-option/c-select-option.twig" with item %}
+		{% endfor %}
+	</select>
+</div>

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

@@ -0,0 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype' );
+
+const social = [ 'instagram', 'pinit', 'twitter', 'facebook', 'youtube' ];
+const o_social_list_icons = [];
+
+for ( let i = 0; i < social.length; i++ ) {
+	let c_icon = clonedeep( c_icon_prototype );
+
+	c_icon.c_icon_url = '#';
+	c_icon.c_icon_name = social[i];
+	c_icon.c_icon_link_classes += ' lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover';
+	c_icon.c_icon_rel_name = 'noopener noreferrer';
+
+	o_social_list_icons.push( c_icon );
+}
+
+module.exports = {
+	o_social_list_classes: 'lrv-a-unstyle-list',
+	o_social_list_labelledby_attr: '',
+	o_social_list_icons: o_social_list_icons
+};

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

@@ -0,0 +1,15 @@
+<ul class="o-social-list {{ modifier_class }} {{ o_social_list_classes }}"
+	{% if o_social_list_labelledby_attr %}
+		aria-labelledby="{{ o_social_list_labelledby_attr }}"
+	{% endif %}
+>
+	{% for item in o_social_list_icons %}
+		<li class="o-social-list__item {{ o_social_list_item_classes }}">
+			{% if o_social_list_is_icon_button %}
+				{% include "@larva/objects/o-icon-button/o-icon-button.twig" with item %}
+			{% else %}
+				{% include "@larva/components/c-icon/c-icon.twig" with item %}
+			{% endif %}
+		</li>
+	{% endfor %}
+</ul>

package/objects/o-span-group/README.md

@@ -0,0 +1 @@
+`o-span-group` consists of a `div` containing an interderminate numer of `c-span`s. This can be useful for arbitrary decorative borders around single word links, or similar.

package/objects/o-span-group/o-span-group.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_span = clonedeep( require( '../../components/c-span/c-span.prototype' ) );
+
+module.exports = {
+	o_span_group_classes: '',
+	o_span_group_items: [
+		c_span,
+		c_span
+	]
+};

package/objects/o-span-group/o-span-group.twig

@@ -0,0 +1,5 @@
+<div class="o-span-group {{ o_span_group_classes }}">
+	{% for item in o_span_group_items %}
+		{% include "@larva/components/c-span/c-span.twig" with item %}
+	{% endfor %}
+</div>

package/objects/o-sponsored-by/o-sponsored-by.prototype.js

@@ -0,0 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+
+module.exports = {
+	o_sponsored_by_classes: 'lrv-u-flex lrv-u-align-items-center',
+	o_sponsored_by_title_classes: 'lrv-u-font-size-14 lrv-u-margin-r-050 lrv-u-font-style-italic',
+	o_sponsored_by_text: 'Sponsored by',
+	c_lazy_image: c_lazy_image
+};

package/{src/objects → objects}/o-sponsored-by/o-sponsored-by.twig

@@ -1,7 +1,7 @@
 <div class="o-sponsored-by {{ modifier_class }} {{ o_sponsored_by_classes }}">
 	<span class="{{ o_sponsored_by_title_classes }}">{{ o_sponsored_by_text }}</span>
 
-	{% if o_figure %}
-		{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	{% if c_lazy_image %}
+		{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
 	{% endif %}
 </div>

package/objects/o-story-arc-item/o-story-arc-item.prototype.js

@@ -0,0 +1,29 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_timestamp_prototype = require( '../../components/c-timestamp/c-timestamp.prototype' );
+const o_tease_prototype = require( '../o-tease/o-tease.prototype.js' );
+
+const c_timestamp = clonedeep( c_timestamp_prototype );
+const o_tease = clonedeep( o_tease_prototype );
+
+c_timestamp.c_timestamp_classes = "lrv-u-font-family-primary lrv-u-background-color-body lrv-u-font-weight-bold lrv-u-font-size-12 lrv-u-color-brand-primary";
+
+o_tease.c_tagline = false;
+o_tease.c_heading = false;
+o_tease.c_button = false;
+o_tease.c_span = false;
+
+o_tease.o_tease_classes += ' u-align-items-flex-start@mobile-max u-flex-direction-row-reverse';
+o_tease.o_tease_secondary_classes += ' lrv-u-margin-r-1 u-width-65';
+
+o_tease.c_lazy_image.c_lazy_image_img_classes += ' lrv-u-border-radius-5 u-box-shadow-light';
+o_tease.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-1x1';
+
+o_tease.c_title.c_title_text = 'Art Basel Plans ‘Interventions’ for 50th Anniversary, with Kasper König in Charge';
+o_tease.c_title.c_title_classes = 'lrv-u-font-family-primary lrv-u-font-size-14 lrv-u-font-size-16@desktop u-color-black lrv-u-font-weight-normal';
+
+module.exports = {
+	o_story_arc_item_classes: '',
+	c_timestamp: c_timestamp,
+	o_tease: o_tease,
+};

package/objects/o-story-arc-item/o-story-arc-item.twig

@@ -0,0 +1,9 @@
+<div class="{{ o_story_arc_item_classes }}">
+	<span class="a-span-sandwich lrv-u-margin-b-1">
+		{% if c_timestamp %}
+			{% include "@larva/components/c-timestamp/c-timestamp.twig" with c_timestamp %}
+		{% endif %}
+	</span>
+
+	{% include "@larva/objects/o-tease/o-tease.twig" with o_tease %}
+</div>

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

@@ -0,0 +1,39 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype.js' );
+const c_heading = clonedeep( c_heading_prototype );
+
+const o_nav_prototype = require( '@penskemediacorp/larva-patterns/objects/o-nav/o-nav.prototype' );
+const o_nav = clonedeep( o_nav_prototype );
+
+const o_nav_items_c_links__prototype = require( '@penskemediacorp/larva-patterns/components/c-link/c-link.prototype.js' );
+
+c_heading.c_heading_text = 'Market';
+c_heading.c_heading_classes = 'lrv-u-font-family-secondary lrv-u-font-size-56@desktop-xl lrv-u-font-size-50 lrv-u-margin-b-050@mobile-max lrv-u-line-height-small lrv-u-text-align-center@mobile-max lrv-u-margin-r-2@desktop';
+c_heading.c_heading_is_primary_heading = true;
+
+o_nav.o_nav_list_items = [];
+const menuLinks = [ 'View All', 'Tag Title', 'Tag Title', 'Tag Title', 'Tag Title', 'Tag Title' ];
+
+for (let i = 0; i < menuLinks.length; i++) {
+	let c_link = clonedeep( o_nav_items_c_links__prototype );
+
+	c_link.c_link_text = menuLinks[i];
+	c_link.c_link_classes += ' c_link_classes lrv-u-font-family-primary lrv-u-color-grey-dark:hover';
+
+	o_nav.o_nav_list_items.push( c_link );
+}
+
+const mobileDropdownUtilities = ' lrv-u-border-a-1@mobile-max lrv-u-justify-content-center lrv-u-margin-b-050@mobile-max lrv-u-border-color-grey-light';
+
+o_nav.o_nav_classes = 'lrv-u-flex@desktop lrv-u-align-items-center lrv-u-text-align-center lrv-js-MobileHeightToggle';
+o_nav.o_nav_title_text = 'View Categories';
+o_nav.o_nav_title_classes = 'lrv-a-hidden@desktop lrv-js-MobileHeightToggle-trigger lrv-a-icon-after lrv-a-icon-arrow-down lrv-u-font-size-16 lrv-u-font-family-primary lrv-u-font-weight-normal lrv-u-padding-tb-050 lrv-u-width-100p@mobile-max ' + mobileDropdownUtilities;
+o_nav.o_nav_list_classes += ' lrv-js-MobileHeightToggle-target lrv-u-flex lrv-u-flex-direction-column@mobile-max  lrv-u-line-height-large lrv-u-flex-wrap-wrap lrv-a-space-children--1 lrv-a-space-children-horizontal@tablet';
+o_nav.o_nav_list_item_classes = mobileDropdownUtilities;
+
+module.exports = {
+	o_sub_header_classes: 'lrv-u-flex u-align-items-flex-end@tablet lrv-u-flex-direction-column@mobile-max',
+	c_heading: c_heading,
+	o_nav: o_nav,
+};

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

@@ -0,0 +1,9 @@
+<header class="o-sub-header // {{ o_sub_header_classes }}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	{% if o_nav %}
+		{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
+	{% endif %}
+</header>

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

@@ -0,0 +1,26 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_lazy_image = clonedeep( require( '../../components/c-lazy-image/c-lazy-image.prototype' ) );
+const c_title = clonedeep( require( '../../components/c-title/c-title.prototype' ) );
+const c_tagline = clonedeep( require( '../../components/c-tagline/c-tagline.prototype' ) );
+const c_heading = clonedeep( require( '../../components/c-heading/c-heading.prototype' ) );
+
+c_title.c_title_url = false;
+
+c_heading.c_heading_url = false;
+
+c_lazy_image.c_lazy_image_link_url = false;
+c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-3x2';
+c_lazy_image.c_lazy_image_alt_attr = 'Post tease thumbnail image';
+
+module.exports = {
+	o_tease_url: '#',
+	o_tease_classes: 'lrv-u-flex lrv-u-align-items-center',
+	o_tease_link_classes: 'lrv-u-display-contents',
+	o_tease_primary_classes: 'lrv-u-flex-grow-1',
+	o_tease_secondary_classes: 'lrv-u-flex-shrink-0 lrv-u-width-30p',
+	c_heading: c_heading,
+	c_title: c_title,
+	c_tagline: c_tagline,
+	c_lazy_image: c_lazy_image
+};

package/{src/objects → objects}/o-tease/o-tease.twig

@@ -5,9 +5,13 @@
 {% endif %}
 
 	{% if o_tease_url %}
-		<a href="{{ o_tease_url }}" class="u-display-contents {{ o_tease_url_classes }}">
+		<a href="{{ o_tease_url }}" class="{{ o_tease_link_classes }}">
 	{% endif %}
 		<div class="o-tease__primary {{ o_tease_primary_classes }}">
+			{% if c_span %}
+				{% include "@larva/components/c-span/c-span.twig" with c_span %}
+			{% endif %}
+
 			{% if c_heading %}
 				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 			{% endif %}
@@ -29,9 +33,9 @@
 			{% endif %}
 		</div>
 
-		{% if o_figure %}
+		{% if c_lazy_image %}
 		<div class="o-tease__secondary {{ o_tease_secondary_classes }}">
-			{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+			{% include "@larva/components/c-lazy-image/c-lazy-image.twig" with c_lazy_image %}
 		</div>
 		{% endif %}
 

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

@@ -0,0 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const o_tease = clonedeep( require( '../o-tease/o-tease.prototype' ) );
+
+module.exports = {
+	o_tease_list_classes: 'lrv-a-unstyle-list',
+	o_tease_list_labelledby_attr: '',
+	o_tease_list_item_classes: '',
+	o_tease_list_items: [
+		o_tease,
+		o_tease,
+		o_tease
+	]
+};