@penskemediacorp/larva-patterns 1.72.0 → 1.73.0

package/modules/navigation/navigation.prototype.js

@@ -0,0 +1,33 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const navigation_item = clonedeep(
+	require( '../navigation-item/navigation-item.prototype' )
+);
+const c_heading = clonedeep(
+	require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' )
+);
+
+navigation_item.toggle_button_classes = 'lrv-u-display-none';
+navigation_item.navigation_parent_list_classes =
+	'lrv-u-flex lrv-u-justify-content-center lrv-u-width-100p@mobile-max lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025';
+navigation_item.parent_list_item_heading_classes =
+	'lrv-u-flex lrv-u-justify-content-center lrv-u-padding-tb-050';
+navigation_item.parent_list_item_classes =
+	'lrv-u-width-100p@mobile-max lrv-u-justify-content-center';
+c_heading.c_heading_classes =
+	'lrv-a-glue-parent has-text-color lrv-u-width-100p lrv-u-border-a-1 lrv-js-MobileHeightToggle-trigger lrv-u-padding-tb-050 lrv-u-justify-content-center lrv-u-text-transform-uppercase  lrv-a-icon-after a-icon-after-caret-down a-icon-height-8 a-icon-width-13';
+c_heading.c_heading_text = 'All';
+
+module.exports = {
+	c_heading,
+	navigation_classes: '',
+	navigation_items: [
+		navigation_item,
+		navigation_item,
+		navigation_item,
+		navigation_item,
+	],
+	main_toggle_button_classes: 'lrv-a-hidden@tablet',
+	nav_content_classes:
+		'lrv-js-MobileHeightToggle-target a-children-border-color-current lrv-a-space-children-horizontal@tablet a-space-children--350 lrv-u-border-b-1@mobile-max lrv-a-children-border-vertical@mobile-max lrv-u-flex-direction-column@mobile-max lrv-u-align-items-center lrv-a-unstyle-list lrv-u-flex lrv-u-justify-content-center lrv-u-flex-wrap-wrap',
+};

package/modules/navigation/navigation.twig

@@ -0,0 +1,14 @@
+<div class="navigation-menu // lrv-js-MobileHeightToggle {{ navigation_classes }}">
+
+	{% if c_heading %}
+		{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
+	{% endif %}
+
+	<ul class="navigation-content // {{ nav_content_classes }}">
+
+		{% for item in navigation_items %}
+			{% include "@project/modules//navigation-item/navigation-item.twig" with item %}
+		{% endfor %}
+
+	</ul>
+</div>

package/modules/navigation-item/navigation-item.prototype.js

@@ -0,0 +1,37 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_link = clonedeep(
+	require( '@penskemediacorp/larva-patterns/components/c-link/c-link.prototype' )
+);
+const c_link__parent = clonedeep( c_link );
+const c_link__child = clonedeep( c_link );
+
+c_link__parent.c_link_text = 'Parent item';
+c_link__parent.c_link_classes =
+	'lrv-u-color-brand-primary:hover lrv-u-color-currentColor lrv-u-text-transform-uppercase lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block';
+
+c_link__child.c_link_text = 'Child item';
+c_link__child.c_link_classes =
+	'lrv-u-color-brand-primary:hover lrv-a-hover-effect lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-u-display-inline-block lrv-u-color-currentColor';
+
+module.exports = {
+	c_link: c_link__parent,
+	navigation_item_heading_id_attr: '',
+	navigation_aria_labelledby_attr: '',
+	navigation_item_toggle_screen_reader_text: 'Expand the sub menu',
+	toggle_button_classes:
+		'lrv-a-unstyle-button lrv-u-margin-l-auto lrv-u-padding-a-025 lrv-u-display-none',
+	navigation_item_children: [
+		c_link__child,
+		c_link__child,
+		c_link__child,
+		c_link__child,
+	],
+	navigation_child_list_classes:
+		'lrv-u-display-none lrv-a-unstyle-list lrv-a-glue lrv-a-glue--l-0 lrv-u-width-200 lrv-u-background-color-white lrv-u-overflow-auto lrv-u-border-a-1 lrv-u-padding-lr-050 lrv-u-padding-tb-025 lrv-u-border-color-brand-accent',
+	navigation_parent_list_classes:
+		'lrv-u-flex lrv-u-margin-lr-050 lrv-a-glue-parent lrv-u-margin-tb-025',
+	parent_list_item_classes: '',
+	parent_list_item_heading_classes:
+		'lrv-u-flex lrv-u-align-items-center lrv-u-color-currentColor',
+};

package/modules/navigation-item/navigation-item.twig

@@ -0,0 +1,25 @@
+<li class="navigaiton-item // navigaiton__parent-list-item {{ parent_list_item_classes }}">
+	<h3 id="{{ navigation_item_heading_id_attr }}" class="navigaiton-item-heading {{ parent_list_item_heading_classes }}">
+		{% include "@larva/components/c-link/c-link.twig" with c_link %}
+
+		<button class="{{ toggle_button_classes }}">
+			<span class="lrv-a-icon-after lrv-a-icon-arrow-down a-icon-down-arrow-color-wild-strawberry">
+				<span class="lrv-a-screen-reader-only">
+					{{navigation_item_toggle_screen_reader_text}}
+				</span>
+			</span>
+		</button>
+	</h3>
+
+	<ul class="navigaiton__child-list // {{ navigation_child_list_classes }}"
+		{% if navigation_aria_labelledby_attr %}
+			aria-labelledby="{{ navigation_aria_labelledby_attr }}"
+		{% endif %}
+	>
+		{% for item in navigation_item_children %}
+			<li class="navigaiton__child-list-item // lrv-u-margin-tb-025">
+				{% include "@larva/components/c-link/c-link.twig" with item %}
+			</li>
+		{% endfor %}
+	</ul>
+</li>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.72.0",
+  "version": "1.73.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.72.0",
-    "@penskemediacorp/larva-js": "^1.72.0",
+    "@penskemediacorp/larva-css": "^1.73.0",
+    "@penskemediacorp/larva-js": "^1.73.0",
     "@penskemediacorp/larva-svg": "^1.66.4",
     "lodash.clonedeep": "^4"
   },
-  "gitHead": "7f2877cd5094a5b83691f0beb2ee84efe54a0650"
+  "gitHead": "725a97fa8e3b54d47897ddbda7913b5cbf8c9e78"
 }