@penskemediacorp/larva-patterns 1.52.0 → 1.54.0

package/algorithms/a-term-content-grid/README.md

@@ -0,0 +1 @@
+Layout pattern for Term Content Top module.

package/algorithms/a-term-content-grid/a-term-content-grid.html

@@ -0,0 +1,27 @@
+<div class="lrv-a-wrapper">
+    <div class="{{ term_content_grid_layout_class }}">
+        <div class="lrv-a-term-content-grid__primary lrv-u-padding-a-1 \\ {{ term_content_grid_primary_class }}">
+            <div style="background-color: #f7f7f7; height: 300px;"></div>
+        </div>
+
+        <div class="{{ term_content_grid_secondary_class }} lrv-u-padding-a-1">
+            <ul class="{{ term_content_grid_fact_list_menu_class }}">
+                <li><a href="#">Link 1</a></li>
+                <li><a href="#">Link 2</a></li>
+            </ul>
+            <div>Magna hexagon stumptown pork belly paleo tilde.</div>
+            <div>Cat ipsum dolor sit amet, Why dog in house?</div>
+        </div>
+
+        <div class="{{ term_content_grid_tertiary_class }} lrv-u-padding-a-1">
+            <div>Cat ipsum dolor sit amet, Why dog in house?</div>
+            <div class="{{ term_content_grid_fact_list_class }}">
+                <div class="{{ term_content_grid_fact_list_item_class }}">
+                    <dt class="{{ term_content_grid_fact_list_dt_class }}">Definition Term, column 1</dt>
+                    <dd class="{{ term_content_grid_fact_list_dd_class }}">Definition Description 1, column 2</dd>
+                    <dd class="{{ term_content_grid_fact_list_dd_class }}">Definition Description 2, column 2</dd>
+                </div>
+            </div>
+        </div>
+    </div>
+</div>

package/algorithms/a-term-content-grid/a-term-content-grid.prototype.js

@@ -0,0 +1,11 @@
+module.exports = {
+	term_content_grid_layout_class:         'lrv-a-term-content-grid',
+	term_content_grid_primary_class:        'lrv-a-term-content-grid__primary',
+	term_content_grid_secondary_class:      'lrv-a-term-content-grid__secondary',
+	term_content_grid_tertiary_class:       'lrv-a-term-content-grid__tertiary',
+	term_content_grid_fact_list_class:      'lrv-a-term-content-grid__fact-list',
+	term_content_grid_fact_list_item_class: 'lrv-a-term-content-grid__fact-list-item',
+	term_content_grid_fact_list_dt_class:   'lrv-a-term-content-grid__fact-list-dt',
+	term_content_grid_fact_list_dd_class:   'lrv-a-term-content-grid__fact-list-dd',
+	term_content_grid_fact_list_menu_class: 'lrv-a-term-content-grid__fact-list-menu',
+};

package/modules/author-details/author-details.prototype.js

@@ -29,18 +29,18 @@ for ( let i = 0; i < storyTitles.length; i++ ) {
 }
 
 c_title.c_title_classes =
-	'lrv-u-font-size-13 lrv-u-font-weight-bold lrv-u-margin-r-auto lrv-u-text-transform-uppercase lrv-u-width-100';
+	'lrv-u-margin-r-auto lrv-u-width-100 lrv-u-font-size-13 lrv-u-font-weight-bold lrv-u-text-transform-uppercase';
 c_title.c_title_url = '#';
 c_title.c_title_text = 'PATRICIA MESCHINO';
 c_title.c_title_link_classes = 'lrv-u-color-black';
 
 o_nav.o_nav_classes =
-	'lrv-u-border-t-1 lrv-u-width-100p lrv-u-margin-t-075 lrv-u-padding-t-025 ';
+	'lrv-u-margin-t-075 lrv-u-border-t-1 lrv-u-padding-t-025 lrv-u-width-100p ';
 o_nav.o_nav_title_text = '';
 o_nav.o_nav_title_classes =
 	'lrv-u-padding-t-050 lrv-u-padding-b-025 lrv-u-font-family-primary lrv-u-font-size-20';
 o_nav.o_nav_list_classes =
-	' lrv-u-font-size-13 lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-padding-l-1 lrv-u-padding-t-075  lrv-u-list-style-type-disclosure-closed';
+	' lrv-u-border-t-1 lrv-u-border-b-1 lrv-u-padding-t-075 lrv-u-padding-l-1 lrv-u-font-size-13 lrv-u-list-style-type-disclosure-closed';
 o_nav.o_nav_list_item_classes = 'lrv-u-padding-b-075';
 
 c_icon_twitter.c_icon_name = 'twitter';
@@ -61,13 +61,13 @@ c_icon_mail.c_icon_link_classes = 'lrv-u-flex';
 
 c_link_view_all = clonedeep( c_link_prototype );
 c_link_view_all.c_link_classes =
-	'lrv-a-unstyle-link lrv-u-font-size-10 lrv-u-text-transform-uppercase';
+	'lrv-u-font-size-10 lrv-u-text-transform-uppercase lrv-a-unstyle-link';
 c_link_view_all.c_link_text = 'View All Stories ▶';
 c_link_view_all.c_link_url = '#';
 
 module.exports = {
 	author_details_classes:
-		'lrv-u-padding-lr-125 lrv-u-padding-t-125 lrv-u-padding-b-1 lrv-u-width-215 lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-background-color-white lrv-u-border-a-2 lrv-a-glue-parent lrv-a-icon-after-arrow-top-left lrv-u-margin-t-1',
+		'lrv-u-flex lrv-u-flex-wrap-wrap lrv-u-margin-t-1 lrv-u-padding-lr-125 lrv-u-padding-t-125 lrv-u-padding-b-1 lrv-u-border-a-2 lrv-u-width-215 lrv-u-background-color-white lrv-a-glue-parent lrv-a-icon-after-arrow-top-left',
 	author_details_icons_classes:
 		'lrv-u-flex lrv-u-align-items-center lrv-u-margin-l-auto',
 	author_details_view_link_classes: ' lrv-u-flex lrv-u-margin-l-auto',

package/modules/fact-list/README.md

@@ -0,0 +1 @@
+Renders a list of `fact-list-item` modules. Module used to add schema data associated with a taxonomy term. Usage is associated with `pmc/term-content` plugin.

package/modules/fact-list/fact-list.prototype.js

@@ -0,0 +1,21 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Larva includes.
+ */
+const c_title        = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' ) );
+const fact_list_item = clonedeep( require( '@penskemediacorp/larva-patterns/modules/fact-list-item/fact-list-item.prototype' ) );
+
+c_title.c_title_classes = '';
+c_title.c_title_text = 'Fact List';
+c_title.c_title_id_attr = 'fact-list';
+c_title.c_title_url = '';
+
+module.exports = {
+	c_title,
+	fact_list_classes: 'lrv-u-font-family-secondary lrv-u-margin-t-1 lrv-a-term-content-grid__tertiary',
+	fact_list_data_attributes: 'itemscope itemprop=Thing itemtype=http://schema.org/Thing',
+	fact_list_dl_classes: 'lrv-u-border-t-1 lrv-u-padding-t-1 lrv-u-margin-t-00 lrv-a-term-content-grid__fact-list',
+	fact_list_items: [ fact_list_item ],
+	fact_list_title_classes: 'lrv-u-margin-b-050 lrv-u-font-size-20',
+};

package/modules/fact-list/fact-list.twig

@@ -0,0 +1,14 @@
+{% if fact_list_items %}
+<div class="fact-list // {{ fact_list_classes }}">
+	{% if c_title %}
+		<div class="fact-list-title // {{ fact_list_title_classes }}">
+			{% include "@larva/components/c-title/c-title.twig" with c_title %}
+		</div>
+	{% endif %}
+	<dl class="fact-list-items // {{ fact_list_dl_classes }}" {{ fact_list_data_attributes }}>
+		{% for fact_list_item in fact_list_items %}
+			{% include "@larva/modules/fact-list-item/fact-list-item.twig" with fact_list_item %}
+		{% endfor %}
+	</dl>
+</div>
+{% endif %}

package/modules/fact-list-item/README.md

@@ -0,0 +1 @@
+Renders a description term and detail block. These blocks comprise the content of a `fact-list` module. Usage is associated with `pmc/term-content` plugin. A thumbnail variant is available to display a fact list item containing a tag list with images.

package/modules/fact-list-item/fact-list-item.prototype.js

@@ -0,0 +1,28 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Larva includes.
+ */
+const c_dek    = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype' ) );
+const tag_list = clonedeep( require( '@penskemediacorp/larva-patterns/modules/tag-list/tag-list.prototype' ) );
+
+c_dek.c_dek_markup = 'Term Content. <em>Rich text</em> <strong>is</strong> <a href="#">supported</a>.';
+c_dek.c_dek_text   = '';
+
+module.exports = {
+	fact_list_item_classes: [
+		'lrv-a-cols2@tablet',
+		'lrv-u-border-b-1',
+		'lrv-u-border-color-grey-light',
+		'lrv-u-margin-b-1',
+		'lrv-u-padding-b-1',
+		'lrv-a-term-content-grid__fact-list-item',
+	].join( ' ' ),
+	fact_list_item_dd_classes: 'lrv-u-margin-l-00 lrv-a-term-content-grid__fact-list-dd',
+	fact_list_item_dd_data_attributes: 'itemprop=Thing itemtype=http://schema.org/Thing',
+	fact_list_item_dd_content: { ...c_dek, c_dek_classes: 'lrv-u-margin-tb-00 lrv-u-display-block' },
+	fact_list_item_tag_list: tag_list,
+	fact_list_item_dd_terms_classes: '',
+	fact_list_item_dt_classes: 'lrv-u-font-weight-bold lrv-a-term-content-grid__fact-list-dt',
+	fact_list_item_dt_text: 'Term Title',
+};

package/modules/fact-list-item/fact-list-item.thumbnail.js

@@ -0,0 +1,13 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Module includes.
+ */
+const fact_item = clonedeep( require( './fact-list-item.prototype' ) );
+const tag_list  = clonedeep( require( '@penskemediacorp/larva-patterns/modules/tag-list/tag-list.thumbnail' ) );
+
+fact_item.fact_list_item_tag_list = tag_list;
+
+module.exports = {
+	...fact_item,
+};

package/modules/fact-list-item/fact-list-item.twig

@@ -0,0 +1,17 @@
+<div class="fact-list-item // {{ fact_list_item_classes }}">
+	{% if fact_list_item_dt_text %}
+		<dt class="fact-list-item-dt // {{ fact_list_item_dt_classes }}">
+			{{ fact_list_item_dt_text }}
+		</dt>
+	{% endif %}
+	<dd class="fact-list-item-dd // {{ fact_list_item_dd_classes }}" {{ fact_list_item_dd_data_attributes }}>
+		{% if fact_list_item_dd_content %}
+			{% include "@larva/components/c-dek/c-dek.twig" with fact_list_item_dd_content %}
+		{% endif %}
+		{% if fact_list_item_tag_list %}
+		<div class="fact-list-item-tags // {{ fact_list_item_tag_list_classes }}">
+			{% include "@larva/modules/tag-list/tag-list.twig" with fact_list_item_tag_list %}
+		</div>
+		{% endif %}
+	</dd>
+</div>

package/modules/fact-list-menu/README.md

@@ -0,0 +1 @@
+Renders menu of links to be displayed in the `term-content-top` module. Usage is associated with `pmc/term-content` plugin.

package/modules/fact-list-menu/fact-list-menu.prototype.js

@@ -0,0 +1,40 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Larva includes.
+ */
+const c_link_prototype = require( '@penskemediacorp/larva-patterns/components/c-link/c-link.prototype.js' );
+
+/**
+ * Module includes.
+ */
+const c_link = clonedeep( c_link_prototype );
+
+/* Generate a list of menu item titles. */
+const titles = [ 'Wikipedia', 'IMDB', 'Amazon', 'Google' ];
+
+/* Generate a list of `c_span` links. */
+const fact_list_menu_items = Array.from( titles, ( title, index ) => ( {
+	...c_link,
+	c_link_text: title,
+	c_link_classes: 'lrv-u-color-black',
+	c_link_url: `#test-link-${ index + 1 }`,
+} ) );
+
+module.exports = {
+	fact_list_menu_classes: 'lrv-u-margin-t-1',
+	fact_list_menu_ul_classes: [
+		'lrv-a-unstyle-list',
+		'lrv-u-border-b-1',
+		'lrv-u-border-t-1',
+		'lrv-u-display-inline-flex',
+		'lrv-u-flex-wrap-wrap',
+		'lrv-u-padding-tb-075',
+		'lrv-a-term-content-grid__fact-list-menu',
+	].join( ' ' ),
+	fact_list_menu_li_classes: [
+		'a-font-secondary',
+		'lrv-u-text-transform-uppercase',
+	].join( ' ' ),
+	fact_list_menu_items,
+};

package/modules/fact-list-menu/fact-list-menu.twig

@@ -0,0 +1,11 @@
+{% if fact_list_menu_items %}
+<div class="fact-list-menu // {{ fact_list_menu_classes }}">
+	<ul class="fact-list-menu-items // {{ fact_list_menu_ul_classes }}">
+		{% for item in fact_list_menu_items %}
+			<li class="fact-list-menu-item // {{ fact_list_menu_li_classes }}">
+				{% include "@larva/components/c-link/c-link.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+</div>
+{% endif %}

package/modules/tag-list/README.md

@@ -0,0 +1 @@
+Renders a styled list of tags. Usage is associated with `pmc/term-content` plugin. A thumbnail variant is available to display tags with their corresponding thumbnails.

package/modules/tag-list/tag-list.prototype.js

@@ -0,0 +1,42 @@
+const clonedeep = require( 'lodash.clonedeep');
+
+/**
+ * Larva includes.
+ */
+const c_span = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-span/c-span.prototype' ) );
+
+/* Generate a list of tag titles. */
+const titles = [
+	'Music',
+	'Software Development',
+	'Data Science',
+	'Sustainable Agriculture',
+	'Art',
+	'Digital Marketing Strategies'
+];
+
+/**
+ * Generate a list of `c_span` links.
+ * For demo purposes, append commas to all items except last in array.
+ */
+const tag_list_terms = Array.from( titles, ( title, index ) => ( {
+	c_span: {
+		...c_span,
+		c_span_classes: '',
+		c_span_link_classes: 'lrv-u-color-black',
+		c_span_text: `${title}${index === titles.length - 1 ? '' : ','}`,
+		c_span_url: `#test-link-${ index + 1 }`,
+	}
+} ) );
+
+module.exports = {
+	tag_list_classes: [
+		'lrv-a-unstyle-list',
+		'lrv-u-display-inline-flex',
+		'lrv-u-flex-wrap-wrap',
+		'lrv-u-flex-direction-row',
+	].join(' '),
+	tag_list_term_item_classes: 'lrv-u-margin-r-025',
+	tag_list_term_classes: '',
+	tag_list_terms,
+};

package/modules/tag-list/tag-list.thumbnail.js

@@ -0,0 +1,49 @@
+const clonedeep    = require( 'lodash.clonedeep' );
+/**
+ * Larva includes.
+ */
+const c_lazy_image = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-lazy-image/c-lazy-image.prototype.js' ) );
+const tag_list     = clonedeep( require( '@penskemediacorp/larva-patterns/modules/tag-list/tag-list.prototype' ) );
+
+/* Update `c_span` styles and add thumbnail. */
+const tag_list_terms = Array.from( tag_list.tag_list_terms, ( term, index ) => ( {
+	...term,
+	c_span: {
+		...term.c_span,
+		c_span_text: term.c_span.c_span_text.replace(/,\s*$/, ''),
+		c_span_classes: [
+			'a-truncate-ellipsis',
+			'lrv-u-color-brand-secondary-dark',
+			'lrv-u-display-block',
+			'lrv-u-font-family-basic',
+			'lrv-u-font-size-13',
+			'lrv-u-text-align-center',
+			'lrv-u-text-transform-uppercase',
+		].join( ' ' ),
+	},
+	o_figure: {
+		...term.o_figure,
+		o_figure_classes: 'lrv-u-margin-b-050',
+		c_lazy_image: {
+			...c_lazy_image,
+			c_lazy_image_img_classes: 'lrv-u-background-color-grey-light lrv-u-border-radius-50p lrv-u-display-block lrv-u-height-auto',
+			c_lazy_image_crop_class: 'lrv-a-crop-1x1',
+			c_lazy_image_classes: 'lrv-u-margin-lr-auto',
+			c_lazy_image_placeholder_url: `https://source.unsplash.com/random/200x200/#${index}`,
+		},
+	},
+} ) );
+
+module.exports = {
+	...tag_list,
+	tag_list_classes: [
+		'lrv-a-cols2',
+		'lrv-a-cols1@tablet',
+		'lrv-a-cols3@desktop',
+		'lrv-a-grid',
+		'lrv-a-unstyle-list',
+	].join( ' ' ),
+	tag_list_term_classes: 'lrv-u-align-items-center lrv-u-flex-direction-column lrv-u-flex-wrap-wrap lrv-u-flex',
+	tag_list_term_item_classes: 'lrv-u-margin-lr-auto lrv-u-width-150 lrv-u-max-width-100p',
+	tag_list_terms,
+};

package/modules/tag-list/tag-list.twig

@@ -0,0 +1,16 @@
+{% if tag_list_terms %}
+	<ul class="tag-list-terms // {{ tag_list_classes }}">
+		{% for term_item in tag_list_terms %}
+		<li class="tag-list-term // {{ tag_list_term_classes }}">
+			<div class="tag-list-term-item // {{ tag_list_term_item_classes }}">
+				{% if term_item['o_figure'] %}
+					{% include "@larva/objects/o-figure/o-figure.twig" with term_item['o_figure'] %}
+				{% endif %}
+				{% if term_item['c_span'] %}
+					{% include "@larva/components/c-span/c-span.twig" with term_item['c_span'] %}
+				{% endif %}
+			</div>
+		</li>
+		{% endfor %}
+	</ul>
+{% endif %}

package/modules/term-content-top/README.md

@@ -0,0 +1 @@
+Renders a styled term content area. Usage is associated with `pmc/term-content` plugin. A `heading-tags` variable is available to render an alternate layout that features a tag list with thumbnails.

package/modules/term-content-top/term-content-top.heading-tags.js

@@ -0,0 +1,14 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Module includes.
+ */
+const term_content_top = clonedeep( require( './term-content-top.prototype' ) );
+const tag_list         = clonedeep( require( '../../modules/tag-list/tag-list.thumbnail' ) );
+
+term_content_top.o_figure       = '';
+term_content_top.fact_list      = '';
+term_content_top.fact_list_menu = '';
+term_content_top.tag_list       = tag_list
+
+module.exports = term_content_top;

package/modules/term-content-top/term-content-top.prototype.js

@@ -0,0 +1,73 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+/**
+ * Larva includes.
+ */
+const c_tagline       = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype' ) );
+const o_figure        = clonedeep( require( '@penskemediacorp/larva-patterns/objects/o-figure/o-figure.prototype.js' ) );
+const article_excerpt = clonedeep( require( '@penskemediacorp/larva-patterns/modules/article-excerpt/article-excerpt.prototype' ) );
+const article_title   = clonedeep( require( '@penskemediacorp/larva-patterns/modules/article-title/article-title.prototype' ) );
+const fact_list       = clonedeep( require( '@penskemediacorp/larva-patterns/modules/fact-list/fact-list.prototype' ) );
+const fact_list_menu  = clonedeep( require( '@penskemediacorp/larva-patterns/modules/fact-list-menu/fact-list-menu.prototype' ) );
+
+// Configure page title.
+article_title.article_title_markup = 'Kitchen Appliances';
+article_title.article_title_classes = [
+	'lrv-u-font-family-primary',
+	'lrv-u-font-size-32',
+	'lrv-u-font-size-46@tablet',
+	'lrv-u-line-height-small',
+	'lrv-u-margin-b-00',
+	'lrv-u-padding-tb-075@tablet',
+].join( ' ' );
+
+// Configure tagline.
+c_tagline.c_tagline_text = 'The best products for your kitchen';
+c_tagline.c_tagline_classes = [
+	'lrv-u-font-family-secondary',
+	'lrv-u-font-size-18@mobile-max',
+	'lrv-u-font-size-28',
+	'lrv-u-margin-b-1',
+	'lrv-u-margin-t-00',
+].join( ' ' );
+article_title.c_tagline = c_tagline;
+
+// Begin configuring featured iamge.
+o_figure.o_figure_classes = 'lrv-u-font-family-secondary lrv-u-margin-b-00 lrv-u-width-100p lrv-a-term-content-grid__primary';
+o_figure.c_lazy_image.c_lazy_image_placeholder_url = 'https://source.unsplash.com/random/500x500';
+
+// Configure featured image captions and credit.
+o_figure.c_figcaption.c_figcaption_caption_markup = 'Caption text.';
+o_figure.c_figcaption.c_figcaption_credit_text = 'Photo credit text.';
+o_figure.c_figcaption.c_figcaption_caption_classes = 'lrv-u-font-size-12 lrv-u-font-size-14@tablet';
+o_figure.c_figcaption.c_figcaption_classes = [
+	'lrv-u-flex',
+	'lrv-u-flex-direction-column',
+	'lrv-u-margin-t-050',
+	'lrv-u-padding-b-1',
+].join( ' ' );
+
+o_figure.c_figcaption.c_figcaption_credit_classes = [
+	'lrv-u-color-grey-dark',
+	'lrv-u-font-family-basic',
+	'lrv-u-font-size-10',
+	'lrv-u-font-size-12@mobile-max',
+	'lrv-u-line-height-large',
+].join( ' ' );
+
+article_excerpt.article_excerpt_markup = 'We’ve spent hundreds of hours researching appliances, '
+	+ 'interviewing experts, poring over owner reviews, and testing appliances both large '
+	+ 'and small—many over the course of several years—to find the best appliances for your '
+	+ 'kitchen and home. From dishwashers and refrigerators to vacuums and steam cleaners, '
+	+ 'our experts pick out the right appliances for all kinds of living situations, to '
+	+ 'help keep your chores short and sweet.';
+
+module.exports = {
+	article_excerpt,
+	article_title,
+	fact_list_menu,
+	fact_list,
+	o_figure,
+	term_content_top_classes: 'lrv-u-margin-t-1 lrv-a-term-content-grid',
+	term_content_secondary_classes: 'lrv-a-term-content-grid__secondary',
+};

package/modules/term-content-top/term-content-top.twig

@@ -0,0 +1,22 @@
+<div class="term-content-top // {{ term_content_top_classes }}">
+	{% if o_figure %}
+		{% include "@larva/objects/o-figure/o-figure.twig" with o_figure %}
+	{% endif %}
+	<div class="term-content-detail // {{ term_content_secondary_classes }}">
+		{% if article_title %}
+			{% include "@larva/modules/article-title/article-title.twig" with article_title %}
+		{% endif %}
+		{% if fact_list_menu %}
+			{% include "@larva/modules/fact-list-menu/fact-list-menu.twig" with fact_list_menu %}
+		{% endif %}
+		{% if article_excerpt %}
+			{% include "@larva/modules/article-excerpt/article-excerpt.twig" with article_excerpt %}
+		{% endif %}
+	</div>
+	{% if tag_list %}
+		{% include "@larva/modules/tag-list/tag-list.twig" with tag_list %}
+	{% endif %}
+	{% if fact_list %}
+		{% include "@larva/modules/fact-list/fact-list.twig" with fact_list %}
+	{% endif %}
+</div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.52.0",
+  "version": "1.54.0",
   "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": "^1.52.0",
-    "@penskemediacorp/larva-js": "^1.52.0",
-    "@penskemediacorp/larva-svg": "^1.52.0",
+    "@penskemediacorp/larva-css": "^1.54.0",
+    "@penskemediacorp/larva-js": "^1.54.0",
+    "@penskemediacorp/larva-svg": "^1.54.0",
     "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "2bd2a40e3813ad13ab64c609ad7762e4b9ff1838"
+  "gitHead": "bd3cf3a26bc5308802b872db3592b5dab40ce921"
 }