@penskemediacorp/larva-patterns 1.34.0 → 1.35.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
|
@@ -2,8 +2,14 @@
|
|
|
2
2
|
{% if c_nav_link_aria_current_attr %}
|
|
3
3
|
aria-current="{{ c_nav_link_aria_current_attr }}"
|
|
4
4
|
{% endif %}
|
|
5
|
+
{% if c_nav_link_title_attr %}
|
|
6
|
+
title="{{ c_nav_link_title_attr }}"
|
|
7
|
+
{% endif %}
|
|
5
8
|
>
|
|
6
9
|
{{ c_nav_link_text }}
|
|
10
|
+
{% if c_nav_link_markup %}
|
|
11
|
+
{{ c_nav_link_markup }}
|
|
12
|
+
{% endif %}
|
|
7
13
|
{% if c_nav_link_screen_reader_text %}
|
|
8
14
|
<span class="lrv-a-screen-reader-only">{{ c_nav_link_screen_reader_text }}</span>
|
|
9
15
|
{% endif %}
|
|
@@ -0,0 +1,38 @@
|
|
|
1
|
+
const clonedeep = require('lodash.clonedeep');
|
|
2
|
+
|
|
3
|
+
const c_heading = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' ) );
|
|
4
|
+
const c_nav_link = clonedeep( require( '@penskemediacorp/larva-patterns/components/c-nav-link/c-nav-link.prototype' ) );
|
|
5
|
+
|
|
6
|
+
|
|
7
|
+
c_heading.c_heading_classes = 'lrv-a-font-primary-l u-font-size-25 lrv-u-padding-b-075 lrv-u-border-b-1';
|
|
8
|
+
|
|
9
|
+
c_nav_link.c_nav_link_markup = 'Moon Landing on July 21,1968';
|
|
10
|
+
c_nav_link.c_nav_link_title_attr = 'Moon Landing on July 21,1968';
|
|
11
|
+
c_nav_link.c_nav_link_url = '#';
|
|
12
|
+
c_nav_link.c_nav_link_text = false;
|
|
13
|
+
|
|
14
|
+
const toc_list_items = [
|
|
15
|
+
c_nav_link,
|
|
16
|
+
c_nav_link,
|
|
17
|
+
c_nav_link,
|
|
18
|
+
c_nav_link,
|
|
19
|
+
c_nav_link,
|
|
20
|
+
];
|
|
21
|
+
|
|
22
|
+
const toc_mobile_list_items = toc_list_items;
|
|
23
|
+
|
|
24
|
+
module.exports = {
|
|
25
|
+
toc_classes: 'lrv-u-border-a-1 lrv-u-padding-a-1 lrv-u-margin-b-1',
|
|
26
|
+
toc_navigation_classes: 'lrv-js-MobileHeightToggle',
|
|
27
|
+
toc_list_classes: 'lrv-js-MobileHeightToggle-target lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid lrv-a-cols2@desktop u-grid-row-gap-0 u-grid-gap-1 lrv-u-padding-t-050',
|
|
28
|
+
toc_mobile_list_classes: 'lrv-a-hidden@desktop lrv-u-color-brand-secondary a-font-theme-secondary-medium-xs lrv-a-unstyle-list lrv-a-grid u-grid-row-gap-0 lrv-u-padding-t-050',
|
|
29
|
+
toc_list_item_outer_classes: 'lrv-u-line-height-large lrv-u-width-100p',
|
|
30
|
+
toc_mobile_list_item_outer_classes: 'lrv-u-line-height-large lrv-u-width-100p',
|
|
31
|
+
toc_navigation_anchor_classes: 'lrv-u-display-block lrv-u-whitespace-nowrap lrv-u-overflow-hidden',
|
|
32
|
+
nav_title_text: 'View More',
|
|
33
|
+
nav_title_outer_classes: 'lrv-a-hidden@desktop a-heading-border lrv-u-text-align-center',
|
|
34
|
+
nav_title_classes: 'lrv-js-MobileHeightToggle-trigger lrv-u-background-color-white lrv-u-font-weight-normal lrv-u-padding-a-050 lrv-u-justify-content-center lrv-u-text-transform-capitalize',
|
|
35
|
+
toc_list_items: toc_list_items,
|
|
36
|
+
c_heading: c_heading,
|
|
37
|
+
toc_mobile_list_items: toc_mobile_list_items,
|
|
38
|
+
}
|
|
@@ -0,0 +1,44 @@
|
|
|
1
|
+
<div class="toc // {{ toc_classes }}" >
|
|
2
|
+
|
|
3
|
+
{% if c_heading %}
|
|
4
|
+
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
5
|
+
{% endif %}
|
|
6
|
+
|
|
7
|
+
<nav class="toc-navigation // {{ toc_navigation_classes }}"
|
|
8
|
+
{% if nav_title_id_attr %}
|
|
9
|
+
aria-label="{{ nav_title_id_attr }}"
|
|
10
|
+
{% endif %}
|
|
11
|
+
{% if nav_list_labelledby_attr %}
|
|
12
|
+
aria-labelledby="{{ nav_list_labelledby_attr }}"
|
|
13
|
+
{% endif %}
|
|
14
|
+
>
|
|
15
|
+
|
|
16
|
+
<ul class="toc-list // {{ toc_list_classes }}">
|
|
17
|
+
{% for item in toc_list_items %}
|
|
18
|
+
<li class="toc-list-item // {{ toc_list_item_outer_classes }}">
|
|
19
|
+
{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
|
|
20
|
+
</li>
|
|
21
|
+
{% endfor %}
|
|
22
|
+
</ul>
|
|
23
|
+
|
|
24
|
+
{% if toc_mobile_list_items %}
|
|
25
|
+
<ul class="toc-list-mobile // {{ toc_mobile_list_classes }}">
|
|
26
|
+
{% for item in toc_mobile_list_items %}
|
|
27
|
+
<li class="toc-list-item // {{ toc_mobile_list_item_outer_classes }}">
|
|
28
|
+
{% include "@larva/components/c-nav-link/c-nav-link.twig" with item %}
|
|
29
|
+
</li>
|
|
30
|
+
{% endfor %}
|
|
31
|
+
</ul>
|
|
32
|
+
{% endif %}
|
|
33
|
+
|
|
34
|
+
{% if nav_title_text %}
|
|
35
|
+
{% if nav_title_outer_classes %}
|
|
36
|
+
<div class="nav__title-outer {{ nav_title_outer_classes }}">
|
|
37
|
+
{% endif %}
|
|
38
|
+
<h4 id="{{ nav_title_id_attr }}" class="nav__title {{ nav_title_classes }}">{{ nav_title_text }}</h4>
|
|
39
|
+
{% if nav_title_outer_classes %}
|
|
40
|
+
</div>
|
|
41
|
+
{% endif %}
|
|
42
|
+
{% endif %}
|
|
43
|
+
</nav>
|
|
44
|
+
</div>
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-patterns",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.35.0",
|
|
4
4
|
"description": "Larva markup patterns.",
|
|
5
5
|
"author": "laras126 <laras126@gmail.com>",
|
|
6
6
|
"homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
|
|
@@ -20,10 +20,10 @@
|
|
|
20
20
|
"url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
|
|
21
21
|
},
|
|
22
22
|
"dependencies": {
|
|
23
|
-
"@penskemediacorp/larva-css": "^1.
|
|
24
|
-
"@penskemediacorp/larva-js": "^1.
|
|
23
|
+
"@penskemediacorp/larva-css": "^1.35.0",
|
|
24
|
+
"@penskemediacorp/larva-js": "^1.35.0",
|
|
25
25
|
"@penskemediacorp/larva-svg": "^1.28.0",
|
|
26
26
|
"lodash.clonedeep": "^4.5.0"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "ee8e6d25de6617a4b38de5cf351bccc16497d31a"
|
|
29
29
|
}
|