@penskemediacorp/larva-patterns 0.6.4 → 0.7.1

package/components/c-input/c-input.prototype.js

@@ -0,0 +1,9 @@
+module.exports = {
+	c_input_type_attr: 'text',
+	c_input_id_attr: 'inputExample',
+	c_input_label_class: 'lrv-a-screen-reader-only',
+	c_input_label_text: 'Input Example',
+	c_input_class: '',
+	c_input_name: 'input_example',
+	c_input_placeholder_attr: 'Enter text.',
+};

package/components/c-input/c-input.twig

@@ -0,0 +1,13 @@
+<label class="c-input" for="{{ id_attr }}">
+	<span class="{{ c_input_label_class }}">{{ c_input_label_text }}</span>
+	<input
+		type="{{ c_input_type_attr }}"
+		class="{{ c_input_class }}"
+		name="{{ c_input_name }}"
+		placeholder="{{ c_input_placeholder_attr }}"
+		aria-invalid="{{ c_input_aria_invalid_attr }}"
+		data-error="{{ c_input_error_attr }}"
+		size="{{ c_input_size_attr }}"
+		maxlength="{{ c_input_maxlength_attr }}"
+	/>
+</label>

package/modules/age-gate/README.md

@@ -0,0 +1,3 @@
+# age-gate
+
+This module is relied heavily upon in the `pmc-age-gate` plugin and contains `js-` classes in the twig file that are important to its functionality.

package/modules/age-gate/age-gate.prototype.js

@@ -0,0 +1,51 @@
+const clonedeep = require('lodash.clonedeep');
+
+const c_svg = clonedeep(require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype'));
+const c_heading = clonedeep(require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype'));
+const o_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-input-group/o-input-group.prototype'));
+const c_button = clonedeep(require('@penskemediacorp/larva-patterns/components/c-button/c-button.prototype'));
+const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype'));
+
+c_svg.c_svg_name = 'brand-logo-white';
+c_svg.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
+
+c_heading.c_heading_classes += ' lrv-u-margin-b-2';
+c_heading.c_heading_text = 'You must be 21 to enter.';
+
+o_input_group.o_input_group_class = 'lrv-u-margin-b-2';
+o_input_group_item = clonedeep( o_input_group.o_input_group_items[0] );
+o_input_group_item.c_input_class = 'lrv-u-font-size-32 lrv-u-color-white lrv-u-background-color-grey-darkest lrv-u-padding-lr-050 lrv-u-padding-tb-150 lrv-u-width-100 lrv-u-text-align-center';
+o_input_group_item.c_input_size_attr = 2;
+o_input_group_item.c_input_maxlength_attr = 4;
+
+o_input_day_item = clonedeep( o_input_group_item );
+o_input_month_item = clonedeep( o_input_group_item );
+o_input_year_item = clonedeep( o_input_group_item );
+
+o_input_day_item.c_input_placeholder_attr = 'DD';
+o_input_month_item.c_input_placeholder_attr = 'MM';
+o_input_year_item.c_input_placeholder_attr = 'YYYY';
+
+o_input_group.o_input_group_items = [
+	o_input_day_item,
+	o_input_month_item,
+	o_input_year_item
+];
+
+c_button.c_button_classes = ' lrv-u-color-white lrv-u-background-color-brand-primary lrv-u-padding-lr-2 lrv-u-padding-tb-075 lrv-u-margin-b-2 lrv-u-text-align-center lrv-u-text-transform-uppercase lrv-u-font-size-32 lrv-u-font-size-18@mobile-max';
+
+c_dek.c_dek_text = 'Legal text.'
+
+module.exports = {
+	age_gate_class: 'lrv-u-height-100p lrv-u-padding-t-2 lrv-u-background-color-black lrv-u-text-align-center lrv-u-color-white',
+	age_gate_inner_class: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
+	age_gate_form_class: 'lrv-u-border-b-1',
+	age_gate_error_class: '',
+	form_wrapper_class: '',
+	age_gate_footer_class: 'lrv-u-border-t-1 lrv-u-margin-t-025',
+	c_heading,
+	c_svg,
+	o_input_group,
+	c_button,
+	c_dek
+};

package/modules/age-gate/age-gate.twig

@@ -0,0 +1,26 @@
+<div class="age-gate // js-AgeGate {{ age_gate_class }}">
+	<div class="age-gate-inner // {{ age_gate_inner_class }}">
+		<div class="age-gate-header // {{ age_gate_header_class }}">
+			{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
+			{% if c_heading %}
+				{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+			{% endif %}
+		</div>
+		<div class="age-gate-form // {{ age_gate_form_class }}">
+			<form class="js-AgeGateForm">
+				{% if o_input_group %}
+					{% include "@larva/objects/o-input-group/o-input-group.twig" with o_input_group %}
+				{% endif %}
+				<div class="age-gate-error // {{ age_gate_error_class }}"></div>
+				<div class="age-gate-button-wrapper">
+					{% include "@larva/components/c-button/c-button.twig" with c_button %}
+				</div>
+			</form>
+		</div>
+		<div class="age-gate-footer // {{ age_gate_footer_class }}">
+			{% if c_dek %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% endif %}
+		</div>
+	</div>
+</div>

package/modules/featured-stories/featured-stories.prototype.js

@@ -0,0 +1,23 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const story_prototype = require( '@penskemediacorp/larva-patterns/modules/story/story.prototype' );
+
+const story = clonedeep( story_prototype );
+
+story.story_grid_classes = '';
+
+story.story_grid_primary_classes = 'lrv-u-margin-r-00';
+
+story.story_grid_secondary_classes += ' lrv-u-padding-lr-1 lrv-u-padding-lr-2@desktop-xl lrv-u-padding-tb-075 lrv-u-padding-tb-150@desktop-xl';
+
+const featured_story = clonedeep( story );
+
+/**
+ * Budle all objects.
+ */
+module.exports = {
+	featured_stories_classes: '',
+	featured_story,
+	featured_stories_secondary_classes: 'lrv-a-grid lrv-a-cols3@desktop',
+	story_items: [ story, story, story ],
+};

package/modules/featured-stories/featured-stories.twig

@@ -0,0 +1,18 @@
+<div class="featured-stories // {{ featured_stories_classes }}">
+
+	{% if featured_story %}
+		<div class="featured-stories__primary // {{ featured_stories_primary_classes }}" >
+			{% include "@larva/modules/story/story.twig" with featured_story %}
+		</div>
+	{% endif %}
+
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="featured-stories__secondary {{ featured_stories_secondary_classes }}">
+		{% for item in story_items %}
+			{% include "@larva/modules/story/story.twig" with item %}
+		{% endfor %}
+	</div>
+</div>

package/modules/heading/heading.twig

@@ -1 +1,3 @@
-<h{{ heading_level_text }} class="heading larva // {{ heading_classes }} {{ heading_typography_class }} {{ heading_color_class }} {{ heading_background_color_class }} {{ heading_text_align_class }}">{{ heading_markup }}</h{{ heading_level_text }}>
+{% if heading_markup %}
+	<h{{ heading_level_text }} class="heading larva // {{ heading_classes }} {{ heading_typography_class }} {{ heading_color_class }} {{ heading_background_color_class }} {{ heading_text_align_class }}">{{ heading_markup }}</h{{ heading_level_text }}>
+{% endif %}

package/modules/story/story.twig

@@ -35,6 +35,12 @@
 						{% include "@larva/components/c-span/c-span.twig" with c_span %}
 					</li>
 				{% endif %}
+
+				{% if article_kicker %}
+					<li>
+						{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
+					</li>
+				{% endif %}
 			</ul>
 
 			<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
@@ -74,4 +80,9 @@
 			{% include "@larva/modules/story-arc-stories/story-arc-stories.twig" with story_arc_stories %}
 		</div>
 	{% endif %}
+
 </div>
+
+{% if is_river_story %}
+	{{ story_after_wp_action }}
+{% endif %}

package/modules/story-featured-quote/story-featured-quote.prototype.js

@@ -0,0 +1,32 @@
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+const clonedeep = require( 'lodash.clonedeep' );
+
+
+const c_title = __experimentalCloneWithFallback( 'components/c-title/c-title.prototype' );
+const c_dek = __experimentalCloneWithFallback( 'components/c-dek/c-dek.prototype' );
+const c_tagline = __experimentalCloneWithFallback( 'components/c-tagline/c-tagline.prototype' );
+
+const c_tagline_author = clonedeep( c_tagline );
+
+c_title.c_title_text = '‘A Momentous Weekend’: LACMA’s High-Stakes Collectors Committee Event Raises $2.4 M.';
+c_title.c_title_classes = 'lrv-u-font-size-14 lrv-u-font-family-primary lrv-u-display-block lrv-u-font-weight-normal lrv-u-line-height-small';
+c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
+
+c_dek.c_dek_text = false;
+c_dek.c_dek_markup = 'Lorem ipsum <i>dolor</i> sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation.';
+c_dek.c_dek_classes = 'lrv-a-font-primary-l';
+
+c_tagline_author.c_tagline_classes = 'lrv-u-margin-l-050';
+c_tagline_author.c_tagline_markup = "<a href='#'>Staff Writer</a>";
+c_tagline_author.c_tagline_text = false;
+
+module.exports = {
+    story_featured_quote_classes: 'lrv-u-text-align-center',
+    story_nav_classes: 'lrv-u-font-size-12 lrv-u-font-family-primary lrv-u-text-transform-uppercase lrv-u-font-weight-bold lrv-u-color-black ',
+    story_nav_layout_classes: 'lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--2 lrv-a-hidden@mobile-max lrv-u-margin-t-050 lrv-u-justify-content-center',
+    c_title: c_title,
+    c_dek: c_dek,
+    c_dek_url:'#',
+    c_dek_url_classes:'lrv-u-color-black lrv-a-unstyle-link',
+    c_tagline_author,
+};

package/modules/story-featured-quote/story-featured-quote.twig

@@ -0,0 +1,25 @@
+<div class="story lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_featured_quote_classes }}">
+	<div class="{{ story_featured_quote_primary_classes }} // lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-center">
+		{% if c_dek_url %}
+		<a href="{{ c_dek_url }}" class="c-dek__link ">
+			{% endif %}
+			{% if c_dek %}
+				{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
+			{% endif %}
+			{% if c_dek_url %}
+		</a>
+		{% endif %}
+
+		<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
+			{% if c_title %}
+				{% include "@larva/components/c-title/c-title.twig" with c_title %}
+			{% endif %}
+
+			{% if c_tagline_author %}
+				<li class="lrv-u-flex // {{ c_tagline_author_wrapper_classes }}">
+					By {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_author %}
+				</li>
+			{% endif %}
+		</ul>
+	</div>
+</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-input-group/o-input-group.prototype.js

@@ -0,0 +1,14 @@
+ /**
+ * Properties intentionally not prefixed with module name to avoid twig-to-php parser issues.
+ */
+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,6 @@
+{# Properties intentionally not prefixed with module name to avoid twig-to-php parser issues. #}
+<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.4",
+  "version": "0.7.1",
   "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.4",
-    "@penskemediacorp/larva-js": "^0.6.0",
-    "@penskemediacorp/larva-svg": "^0.6.0",
+    "@penskemediacorp/larva-css": "^0.7.1",
+    "@penskemediacorp/larva-js": "^0.7.0",
+    "@penskemediacorp/larva-svg": "^0.7.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "8bb6f5065f67b2284d187b5e6c6558ff57bc7ee5"
+  "gitHead": "c67261fe638b9c40d03875515249d147221d0a08"
 }