@penskemediacorp/larva-patterns 0.6.2 → 0.6.3

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

@@ -0,0 +1,4 @@
+module.exports = {
+	c_svg_classes: '',
+	c_svg_name: 'brand-logo'
+}

package/components/c-svg/c-svg.twig

@@ -0,0 +1,3 @@
+<div class="c-svg {{ c_svg_classes }}">
+	{% include '../../build/svg/' ~ c_svg_name ~ '.svg' %}
+</div>

package/modules/brands-most-popular/brands-most-popular.prototype.js

@@ -0,0 +1,40 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
+const o_card_prototype = require( '../../objects/o-card/o-card.prototype' );
+const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
+const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
+
+const c_heading = clonedeep( c_heading_prototype );
+const o_card = clonedeep( o_card_prototype );
+const c_title = clonedeep( c_title_prototype );
+const c_svg = clonedeep( c_svg_prototype );
+const c_span = clonedeep( c_span_prototype );
+
+c_heading.c_heading_text = 'Most Popular';
+
+c_svg.c_svg_classes = 'lrv-u-height-16 lrv-u-color-black';
+c_svg.c_svg_name = 'brand-logo';
+
+c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit. Animi expedita pariatur.';
+c_title.c_title_classes += ' lrv-u-margin-b-075';
+c_title.c_title_url = false;
+
+o_card.o_card_classes = 'lrv-u-flex lrv-u-height-100p lrv-u-color-brand-primary:hover';
+o_card.o_card_link_url = '#';
+o_card.o_card_link_classes = 'lrv-a-unstyle-link';
+o_card.o_card_content_classes = 'lrv-u-flex lrv-u-flex-direction-column';
+o_card.o_card_image_wrap_classes = '';
+o_card.c_lazy_image = false;
+o_card.c_span = false;
+o_card.c_svg = c_svg;
+o_card.c_title = c_title;
+o_card.c_timestamp = false;
+
+module.exports = {
+	brands_most_popular_classes: 'lrv-a-wrapper lrv-u-margin-b-150',
+	brands_most_popular_items_wrapper_classes: '',
+	c_heading: c_heading,
+	popular_items: [ o_card, o_card, o_card, o_card ],
+};

package/modules/brands-most-popular/brands-most-popular.twig

@@ -0,0 +1,11 @@
+<section class="brands-most-popular // {{brands_most_popular_classes}}">
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<div class="{{ brands_most_popular_items_wrapper_classes }}">
+		{% for item in popular_items %}
+			{% include "@larva/objects/o-card/o-card.twig" with item %}
+		{% endfor %}
+	</div>
+</section>

package/modules/newswire/newswire.prototype.js

@@ -5,12 +5,14 @@ const c_span_prototype = require( '../../components/c-span/c-span.prototype' );
 const c_timestamp_prototype = require( '../../components/c-timestamp/c-timestamp.prototype' );
 const c_heading_prototype = require( '../../components/c-heading/c-heading.prototype' );
 const c_title_prototype = require( '../../components/c-title/c-title.prototype' );
+const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype' );
 
 const o_card = clonedeep( o_card_prototype );
 const c_span = clonedeep( c_span_prototype );
 const c_timestamp = clonedeep( c_timestamp_prototype );
 const c_heading = clonedeep( c_heading_prototype );
 const c_title = clonedeep( c_title_prototype );
+const c_svg = clonedeep( c_svg_prototype );
 
 c_heading.c_heading_text = 'Newswire';
 c_heading.c_heading_classes = 'lrv-u-font-family-primary lrv-u-font-size-32 lrv-u-margin-b-050';
@@ -23,7 +25,7 @@ c_title.c_title_text = 'Lorem ipsum dolor, sit amet consectetur adipisicing elit
 c_title.c_title_classes += ' lrv-u-font-size-12 lrv-u-font-size-14@desktop lrv-u-font-weight-normal lrv-u-margin-b-050';
 c_title.c_title_url = false;
 
-o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-color-brand-primary:hover';
+o_card.o_card_classes = 'lrv-u-flex lrv-u-flex-direction-column';
 o_card.o_card_link_url = '#';
 o_card.o_card_link_classes = 'lrv-a-unstyle-link lrv-u-display-block';
 o_card.o_card_image_wrap_classes = '';
@@ -32,8 +34,12 @@ o_card.c_lazy_image.c_lazy_image_crop_class = 'lrv-a-crop-4x3';
 o_card.c_span = c_span;
 o_card.c_title = c_title;
 o_card.c_timestamp = c_timestamp;
+o_card.c_svg = c_svg;
 
 module.exports = {
+	newswire_classes: 'lrv-a-wrapper lrv-u-padding-b-2',
+	newswire_list_classes: 'lrv-a-unstyle-list js-Flickity js-Flickity--fourths js-Flickity--isContained js-Flickity--nav-top-right js-Flickity--bordered-buttons js-Flickity--isFreeScrol js-Flickity--newswire lrv-u-padding-l-00',
+	newswire_list_item_classes: 'js-Flickity-cell lrv-u-margin-r-150',
 	c_heading: c_heading,
 	newswire_aria_labelledby_attr: c_heading.c_heading_id_attr,
 	newswire_items: [ o_card, o_card, o_card, o_card, o_card ]

package/modules/newswire/newswire.twig

@@ -1,14 +1,14 @@
-<section class="newswire // lrv-a-wrapper lrv-u-padding-b-2 lrv-u-margin-t-2">
+<section class="newswire // {{ newswire_classes }}">
 	{% if c_heading %}
 		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
 	{% endif %}
-	<ul class="lrv-a-unstyle-list lrv-a-grid lrv-a-cols2 lrv-a-cols5@desktop lrv-a-grid-first-child-span-all@mobile-max"
+	<ul class="{{ newswire_list_classes }}"
 		{% if newswire_aria_labelledby_attr %}
 			aria-labelledby="{{ newswire_aria_labelledby_attr }}"
 		{% endif %}
 	>
 		{% for item in newswire_items %}
-			<li class="lrv-a-grid-item lrv-u-height-100p">
+			<li class="{{ newswire_list_item_classes }}">
 				{% include "@larva/objects/o-card/o-card.twig" with item %}
 			</li>
 		{% endfor %}

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

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "0.6.2",
+  "version": "0.6.3",
   "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.2",
+    "@penskemediacorp/larva-css": "^0.6.3",
     "@penskemediacorp/larva-js": "^0.6.0",
     "@penskemediacorp/larva-svg": "^0.6.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "c54da41f516960a630885fb7ce9bd12bc00dff6e"
+  "gitHead": "f0ffbd9ac9ba9b13889ade0e4dbc9c94f9e6dd11"
 }