@penskemediacorp/larva-patterns 0.6.0 → 0.6.4-develop.17

package/modules/story-grid/story-grid.river.js

@@ -3,9 +3,13 @@ const clonedeep = require( 'lodash.clonedeep' );
 
 const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
 const story_prototype = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+const c_span = __experimentalCloneWithFallback( 'components/c-span/c-span.prototype' );
 
 story_grid.story_grid_story_cards = story_grid.story_grid_story_cards.map( () => clonedeep( story_prototype ) );
 
 story_grid.story_grid_grid_classes = '';
 
+c_span.c_span_text = 'Read more'; 
+story_grid.c_span = c_span;
+
 module.exports = story_grid;

package/modules/story-grid/story-grid.twig

@@ -1,9 +1,17 @@
 <div class="story-grid lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_grid_classes }}">
-	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-a-space-children-horizontal lrv-a-space-children--050 lrv-u-margin-b-050">
+
+	{% if o_header %}
+		{% include "@larva/objects/o-header/o-header.twig" with o_header %}
+	{% endif %}
+
+	<ul class="{{ story_grid_grid_classes }} // lrv-a-unstyle-list lrv-u-margin-b-050">
 		{% for item in story_grid_story_cards %}
-			<li>
+			<li class="{{ story_grid_grid_item_classes }}">
 				{% include "@larva/modules/story/story.twig" with item %}
 			</li>
 		{% endfor %}
 	</ul>
+	{% if c_span %}
+		{% include "@larva/components/c-span/c-span.twig" with c_span %}
+	{% endif %}
 </div>

package/modules/sub-header/sub-header.prototype.js

@@ -0,0 +1,8 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const o_sub_header = __experimentalCloneWithFallback( 'objects/o-sub-header/o-sub-header.prototype' );
+
+module.exports = {
+	sub_header_classes: '',
+	o_sub_header: o_sub_header,
+};

package/modules/sub-header/sub-header.twig

@@ -0,0 +1,7 @@
+{% if o_sub_header %}
+	<div class="sub-header // {{ sub_header_classes }} lrv-u-padding-t-1 lrv-u-padding-t-2@desktop-xl lrv-u-padding-b-1@mobile-max">
+		<div class="lrv-a-wrapper">
+			{% include "@larva/objects/o-sub-header/o-sub-header.twig" with o_sub_header %}
+		</div>
+	</div>
+{% endif %}

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-card/o-card.prototype.js

@@ -14,6 +14,7 @@ module.exports = {
 	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,

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

@@ -29,6 +29,10 @@
 			{% 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 c_span %}
 			{% include "@larva/components/c-span/c-span.twig" with c_span %}
 		{% endif %}

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

@@ -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-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/o-nav.twig

@@ -13,10 +13,16 @@
 >
 
 	{% if o_nav_title_text %}
-		{% 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>
+		{% 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 %}
 

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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.6.0",
+  "version": "0.6.4-develop.17+854eedf7",
   "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,10 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva-css": "^0.6.0",
-    "@penskemediacorp/larva-js": "^0.6.0",
-    "@penskemediacorp/larva-svg": "^0.6.0",
+    "@penskemediacorp/larva-css": "^0.6.4-develop.17+854eedf7",
+    "@penskemediacorp/larva-js": "^0.6.4-develop.17+854eedf7",
+    "@penskemediacorp/larva-svg": "^0.6.4-develop.17+854eedf7",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "a1bb1fceaf6aa39eb3a0f2730f11821f02dcca00"
+  "gitHead": "854eedf76f31c2ed8f5300329cc2242f936e69b8"
 }