@penskemediacorp/larva-patterns 0.6.3 → 0.7.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.
- package/components/c-text-input/c-text-input.prototype.js +8 -0
- package/components/c-text-input/c-text-input.twig +13 -0
- package/modules/age-gate/README.md +3 -0
- package/modules/age-gate/age-gate.prototype.js +51 -0
- package/modules/age-gate/age-gate.twig +26 -0
- package/modules/featured-stories/featured-stories.prototype.js +23 -0
- package/modules/featured-stories/featured-stories.twig +18 -0
- package/modules/footer-button-list/footer-button-list.prototype.js +43 -0
- package/modules/footer-button-list/footer-button-list.twig +13 -0
- package/modules/footer-magazine-image/footer-magazine-image.prototype.js +15 -0
- package/modules/footer-magazine-image/footer-magazine-image.twig +3 -0
- package/modules/heading/heading.twig +3 -1
- package/modules/story/story.twig +11 -0
- package/modules/story-featured-quote/story-featured-quote.prototype.js +32 -0
- package/modules/story-featured-quote/story-featured-quote.twig +25 -0
- package/modules/sub-header/sub-header.prototype.js +8 -0
- package/modules/sub-header/sub-header.twig +7 -0
- package/objects/o-nav/o-nav.twig +10 -4
- package/objects/o-sub-header/o-sub-header.prototype.js +39 -0
- package/objects/o-sub-header/o-sub-header.twig +9 -0
- package/objects/o-text-input-group/o-text-input-group.prototype.js +11 -0
- package/objects/o-text-input-group/o-text-input-group.twig +5 -0
- package/package.json +5 -5
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
module.exports = {
|
|
2
|
+
c_text_input_id: 'inputExample',
|
|
3
|
+
c_text_input_label_classes: 'lrv-a-screen-reader-only',
|
|
4
|
+
c_text_input_label_text: 'Input Example',
|
|
5
|
+
c_text_input_classes: '',
|
|
6
|
+
c_text_input_name: 'input_example',
|
|
7
|
+
c_text_input_placeholder: 'Enter text.',
|
|
8
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<label class="c-text-input" for="{{ c_text_input_id }}">
|
|
2
|
+
<span class="{{ c_text_input_label_classes }}">{{ c_text_input_label_text }}</span>
|
|
3
|
+
<input
|
|
4
|
+
type="text"
|
|
5
|
+
class="{{ c_text_input_classes }}"
|
|
6
|
+
name="{{ c_text_input_name }}"
|
|
7
|
+
placeholder="{{ c_text_input_placeholder }}"
|
|
8
|
+
aria-invalid="{{ c_text_input_aria_invalid }}"
|
|
9
|
+
data-error="{{ c_text_input_error }}"
|
|
10
|
+
size="{{ c_text_input_size }}"
|
|
11
|
+
maxlength="{{ c_text_input_maxlength }}"
|
|
12
|
+
/>
|
|
13
|
+
</label>
|
|
@@ -0,0 +1,51 @@
|
|
|
1
|
+
const clonedeep = require('lodash.clonedeep');
|
|
2
|
+
|
|
3
|
+
const c_svg = clonedeep(require('@penskemediacorp/larva-patterns/components/c-svg/c-svg.prototype'));
|
|
4
|
+
const c_heading = clonedeep(require('@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype'));
|
|
5
|
+
const o_text_input_group = clonedeep(require('@penskemediacorp/larva-patterns/objects/o-text-input-group/o-text-input-group.prototype'));
|
|
6
|
+
const c_button = clonedeep(require('@penskemediacorp/larva-patterns/components/c-button/c-button.prototype'));
|
|
7
|
+
const c_dek = clonedeep(require('@penskemediacorp/larva-patterns/components/c-dek/c-dek.prototype'));
|
|
8
|
+
|
|
9
|
+
c_svg.c_svg_name = 'brand-logo-white';
|
|
10
|
+
c_svg.c_svg_classes = 'lrv-u-width-150 lrv-u-margin-lr-auto lrv-u-margin-b-2';
|
|
11
|
+
|
|
12
|
+
c_heading.c_heading_classes += ' lrv-u-margin-b-2';
|
|
13
|
+
c_heading.c_heading_text = 'You must be 21 to enter.';
|
|
14
|
+
|
|
15
|
+
o_text_input_group.o_text_input_group_classes = 'lrv-u-margin-b-2';
|
|
16
|
+
o_text_input_item = clonedeep( o_text_input_group.o_text_input_group_items[0] );
|
|
17
|
+
o_text_input_item.c_text_input_classes = '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';
|
|
18
|
+
o_text_input_item.c_text_input_size = 2;
|
|
19
|
+
o_text_input_item.c_text_input_maxlength = 4;
|
|
20
|
+
|
|
21
|
+
o_text_input_day = clonedeep( o_text_input_item );
|
|
22
|
+
o_text_input_month = clonedeep( o_text_input_item );
|
|
23
|
+
o_text_input_year = clonedeep( o_text_input_item );
|
|
24
|
+
|
|
25
|
+
o_text_input_day.c_text_input_placeholder = 'DD';
|
|
26
|
+
o_text_input_month.c_text_input_placeholder = 'MM';
|
|
27
|
+
o_text_input_year.c_text_input_placeholder = 'YYYY';
|
|
28
|
+
|
|
29
|
+
o_text_input_group.o_text_input_group_items = [
|
|
30
|
+
o_text_input_day,
|
|
31
|
+
o_text_input_month,
|
|
32
|
+
o_text_input_year
|
|
33
|
+
];
|
|
34
|
+
|
|
35
|
+
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';
|
|
36
|
+
|
|
37
|
+
c_dek.c_dek_text = 'Legal text.'
|
|
38
|
+
|
|
39
|
+
module.exports = {
|
|
40
|
+
age_gate_classes: 'lrv-u-height-100p lrv-u-padding-t-2 lrv-u-background-color-black lrv-u-text-align-center lrv-u-color-white',
|
|
41
|
+
age_gate_inner_classes: 'lrv-u-max-width-1000 lrv-u-margin-lr-auto',
|
|
42
|
+
age_gate_form_classes: 'lrv-u-border-b-1',
|
|
43
|
+
age_gate_error_classes: '',
|
|
44
|
+
form_wrapper_classes: '',
|
|
45
|
+
age_gate_footer_classes: 'lrv-u-border-t-1 lrv-u-margin-t-025',
|
|
46
|
+
c_heading,
|
|
47
|
+
c_svg,
|
|
48
|
+
o_text_input_group,
|
|
49
|
+
c_button,
|
|
50
|
+
c_dek
|
|
51
|
+
};
|
|
@@ -0,0 +1,26 @@
|
|
|
1
|
+
<div class="age-gate // js-AgeGate {{ age_gate_classes }}">
|
|
2
|
+
<div class="age-gate-inner // {{ age_gate_inner_classes }}">
|
|
3
|
+
<div class="age-gate-header // {{ age_gate_header_classes }}">
|
|
4
|
+
{% include "@larva/components/c-svg/c-svg.twig" with c_svg %}
|
|
5
|
+
{% if c_heading %}
|
|
6
|
+
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
7
|
+
{% endif %}
|
|
8
|
+
</div>
|
|
9
|
+
<div class="age-gate-form // {{ age_gate_form_classes }}">
|
|
10
|
+
<form class="js-AgeGateForm">
|
|
11
|
+
{% if o_text_input_group %}
|
|
12
|
+
{% include "@larva/objects/o-text-input-group/o-text-input-group.twig" with o_text_input_group %}
|
|
13
|
+
{% endif %}
|
|
14
|
+
<div class="age-gate-error // {{ age_gate_error_classes }}"></div>
|
|
15
|
+
<div class="age-gate-button-wrapper">
|
|
16
|
+
{% include "@larva/components/c-button/c-button.twig" with c_button %}
|
|
17
|
+
</div>
|
|
18
|
+
</form>
|
|
19
|
+
</div>
|
|
20
|
+
<div class="age-gate-footer // {{ age_gate_footer_classes }}">
|
|
21
|
+
{% if c_dek %}
|
|
22
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
|
|
23
|
+
{% endif %}
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
26
|
+
</div>
|
|
@@ -0,0 +1,23 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const story_prototype = require( '@penskemediacorp/larva-patterns/modules/story/story.prototype' );
|
|
4
|
+
|
|
5
|
+
const story = clonedeep( story_prototype );
|
|
6
|
+
|
|
7
|
+
story.story_grid_classes = '';
|
|
8
|
+
|
|
9
|
+
story.story_grid_primary_classes = 'lrv-u-margin-r-00';
|
|
10
|
+
|
|
11
|
+
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';
|
|
12
|
+
|
|
13
|
+
const featured_story = clonedeep( story );
|
|
14
|
+
|
|
15
|
+
/**
|
|
16
|
+
* Budle all objects.
|
|
17
|
+
*/
|
|
18
|
+
module.exports = {
|
|
19
|
+
featured_stories_classes: '',
|
|
20
|
+
featured_story,
|
|
21
|
+
featured_stories_secondary_classes: 'lrv-a-grid lrv-a-cols3@desktop',
|
|
22
|
+
story_items: [ story, story, story ],
|
|
23
|
+
};
|
|
@@ -0,0 +1,18 @@
|
|
|
1
|
+
<div class="featured-stories // {{ featured_stories_classes }}">
|
|
2
|
+
|
|
3
|
+
{% if featured_story %}
|
|
4
|
+
<div class="featured-stories__primary // {{ featured_stories_primary_classes }}" >
|
|
5
|
+
{% include "@larva/modules/story/story.twig" with featured_story %}
|
|
6
|
+
</div>
|
|
7
|
+
{% endif %}
|
|
8
|
+
|
|
9
|
+
{% if c_heading %}
|
|
10
|
+
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
11
|
+
{% endif %}
|
|
12
|
+
|
|
13
|
+
<div class="featured-stories__secondary {{ featured_stories_secondary_classes }}">
|
|
14
|
+
{% for item in story_items %}
|
|
15
|
+
{% include "@larva/modules/story/story.twig" with item %}
|
|
16
|
+
{% endfor %}
|
|
17
|
+
</div>
|
|
18
|
+
</div>
|
|
@@ -0,0 +1,43 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_button_prototype = require( '../../components/c-button/c-button.prototype.js' );
|
|
4
|
+
const get_digital_access = clonedeep( c_button_prototype );
|
|
5
|
+
const get_magazine = clonedeep( c_button_prototype );
|
|
6
|
+
const get_gift = clonedeep( c_button_prototype );
|
|
7
|
+
const customer_service = clonedeep( c_button_prototype );
|
|
8
|
+
|
|
9
|
+
get_digital_access.c_button_type_attr = 'button';
|
|
10
|
+
get_digital_access.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
|
|
11
|
+
get_digital_access.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-background-color-white lrv-u-color-black cx-dynamic-link';
|
|
12
|
+
get_digital_access.c_button_screen_reader_text = 'Get Digital Access';
|
|
13
|
+
get_digital_access.c_button_text = 'Get Digital Access';
|
|
14
|
+
get_digital_access.c_button_url = '#get-digital-access';
|
|
15
|
+
|
|
16
|
+
get_magazine.c_button_type_attr = 'button';
|
|
17
|
+
get_magazine.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
|
|
18
|
+
get_magazine.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-background-color-white lrv-u-color-black';
|
|
19
|
+
get_magazine.c_button_screen_reader_text = 'Get The Magazine';
|
|
20
|
+
get_magazine.c_button_text = 'Get The Magazine';
|
|
21
|
+
get_magazine.c_button_url = '#get-the-magazine';
|
|
22
|
+
|
|
23
|
+
get_gift.c_button_type_attr = 'button';
|
|
24
|
+
get_gift.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
|
|
25
|
+
get_gift.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-color-white lrv-u-border-a-1 lrv-u-border-color-grey lrv-u-border-color-brand-primary-dark:hover';
|
|
26
|
+
get_gift.c_button_screen_reader_text = 'Get a Gift';
|
|
27
|
+
get_gift.c_button_text = 'Get a Gift';
|
|
28
|
+
get_gift.c_button_url = '#get-a-gift';
|
|
29
|
+
|
|
30
|
+
customer_service.c_button_type_attr = 'button';
|
|
31
|
+
customer_service.c_button_inner_classes = 'lrv-u-display-inline-block lrv-u-border-color-grey lrv-u-border-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-025 lrv-u-width-100p lrv-u-border-a-1';
|
|
32
|
+
customer_service.c_button_classes = 'lrv-u-text-align-center lrv-u-margin-b-1 lrv-u-padding-a-025 lrv-u-background-color-brand-primary:hover lrv-u-color-white:hover lrv-u-font-weight-bold lrv-a-font-body-xxs lrv-u-color-white lrv-u-border-a-1 lrv-u-border-color-grey lrv-u-border-color-brand-primary-dark:hover';
|
|
33
|
+
customer_service.c_button_screen_reader_text = 'Customer Service';
|
|
34
|
+
customer_service.c_button_text = 'Customer Service';
|
|
35
|
+
customer_service.c_button_url = '#customer-service';
|
|
36
|
+
|
|
37
|
+
module.exports = {
|
|
38
|
+
footer_button_list_content_classes: 'o-footer-button-list__content a-font-body-s lrv-u-flex lrv-u-flex-direction-column a-double-underline a-double-underline-color-grey a-double-underline-bottom@mobile-max lrv-u-padding-b-2@mobile-max',
|
|
39
|
+
footer_button_list_title_classes: 'a-font-accent-medium-l lrv-u-font-weight-bold lrv-u-display-none@mobile-max lrv-u-padding-b-050',
|
|
40
|
+
footer_button_list_classes: 'lrv-u-text-transform-uppercase u-letter-spacing-0063',
|
|
41
|
+
footer_button_list_title_text: '',
|
|
42
|
+
footer_button_list_buttons: [ get_digital_access, get_magazine, get_gift, customer_service],
|
|
43
|
+
};
|
|
@@ -0,0 +1,13 @@
|
|
|
1
|
+
<div class="footer-button-list {{ footer_button_list_classes }}">
|
|
2
|
+
{% if footer_button_list_title_text %}
|
|
3
|
+
<h4 class="footer-button-list__title {{ footer_button_list_title_classes }}">
|
|
4
|
+
{{ footer_button_list_title_text }}
|
|
5
|
+
</h4>
|
|
6
|
+
{% endif %}
|
|
7
|
+
|
|
8
|
+
<section class="footer-button-list__content lrv-u-flex lrv-u-flex-direction-column {{ footer_button_list_content_classes }}">
|
|
9
|
+
{% for item in footer_button_list_buttons %}
|
|
10
|
+
{% include "@larva/components/c-button/c-button.twig" with item %}
|
|
11
|
+
{% endfor %}
|
|
12
|
+
</section>
|
|
13
|
+
</div>
|
|
@@ -0,0 +1,15 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_lazy_magazine_image_prototype = require( '../../components/c-lazy-image/c-lazy-image.prototype' );
|
|
4
|
+
const c_lazy_magazine_image = clonedeep( c_lazy_magazine_image_prototype );
|
|
5
|
+
|
|
6
|
+
c_lazy_magazine_image.c_lazy_image_classes = 'lrv-u-flex-shrink-0 lrv-u-margin-r-2 lrv-u-width-300 a-hidden@desktop-xl-max';
|
|
7
|
+
c_lazy_magazine_image.c_lazy_image_src_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
|
|
8
|
+
c_lazy_magazine_image.c_lazy_image_placeholder_url = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg';
|
|
9
|
+
c_lazy_magazine_image.c_lazy_image_crop_class = '';
|
|
10
|
+
c_lazy_magazine_image.c_lazy_image_link_url = '/subscribe-us/';
|
|
11
|
+
c_lazy_magazine_image.c_lazy_image_srcset_attr = 'https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 240w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 320w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 500w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 640w,https://cdn.shopify.com/s/files/1/0238/6647/products/2019_37_540x.jpg 1024w';
|
|
12
|
+
|
|
13
|
+
module.exports = {
|
|
14
|
+
c_lazy_magazine_image,
|
|
15
|
+
};
|
|
@@ -1 +1,3 @@
|
|
|
1
|
-
|
|
1
|
+
{% if heading_markup %}
|
|
2
|
+
<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 }}>
|
|
3
|
+
{% endif %}
|
package/modules/story/story.twig
CHANGED
|
@@ -35,6 +35,12 @@
|
|
|
35
35
|
{% include "@larva/components/c-span/c-span.twig" with c_span %}
|
|
36
36
|
</li>
|
|
37
37
|
{% endif %}
|
|
38
|
+
|
|
39
|
+
{% if article_kicker %}
|
|
40
|
+
<li>
|
|
41
|
+
{% include "@larva/modules/article-kicker/article-kicker.twig" with article_kicker %}
|
|
42
|
+
</li>
|
|
43
|
+
{% endif %}
|
|
38
44
|
</ul>
|
|
39
45
|
|
|
40
46
|
<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
|
|
@@ -74,4 +80,9 @@
|
|
|
74
80
|
{% include "@larva/modules/story-arc-stories/story-arc-stories.twig" with story_arc_stories %}
|
|
75
81
|
</div>
|
|
76
82
|
{% endif %}
|
|
83
|
+
|
|
77
84
|
</div>
|
|
85
|
+
|
|
86
|
+
{% if is_river_story %}
|
|
87
|
+
{{ story_after_wp_action }}
|
|
88
|
+
{% endif %}
|
|
@@ -0,0 +1,32 @@
|
|
|
1
|
+
const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
|
|
2
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
3
|
+
|
|
4
|
+
|
|
5
|
+
const c_title = __experimentalCloneWithFallback( 'components/c-title/c-title.prototype' );
|
|
6
|
+
const c_dek = __experimentalCloneWithFallback( 'components/c-dek/c-dek.prototype' );
|
|
7
|
+
const c_tagline = __experimentalCloneWithFallback( 'components/c-tagline/c-tagline.prototype' );
|
|
8
|
+
|
|
9
|
+
const c_tagline_author = clonedeep( c_tagline );
|
|
10
|
+
|
|
11
|
+
c_title.c_title_text = '‘A Momentous Weekend’: LACMA’s High-Stakes Collectors Committee Event Raises $2.4 M.';
|
|
12
|
+
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';
|
|
13
|
+
c_title.c_title_link_classes = 'lrv-a-unstyle-link lrv-u-color-brand-primary:hover';
|
|
14
|
+
|
|
15
|
+
c_dek.c_dek_text = false;
|
|
16
|
+
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.';
|
|
17
|
+
c_dek.c_dek_classes = 'lrv-a-font-primary-l';
|
|
18
|
+
|
|
19
|
+
c_tagline_author.c_tagline_classes = 'lrv-u-margin-l-050';
|
|
20
|
+
c_tagline_author.c_tagline_markup = "<a href='#'>Staff Writer</a>";
|
|
21
|
+
c_tagline_author.c_tagline_text = false;
|
|
22
|
+
|
|
23
|
+
module.exports = {
|
|
24
|
+
story_featured_quote_classes: 'lrv-u-text-align-center',
|
|
25
|
+
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 ',
|
|
26
|
+
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',
|
|
27
|
+
c_title: c_title,
|
|
28
|
+
c_dek: c_dek,
|
|
29
|
+
c_dek_url:'#',
|
|
30
|
+
c_dek_url_classes:'lrv-u-color-black lrv-a-unstyle-link',
|
|
31
|
+
c_tagline_author,
|
|
32
|
+
};
|
|
@@ -0,0 +1,25 @@
|
|
|
1
|
+
<div class="story lrv-u-padding-tb-1 lrv-u-padding-tb-2@desktop // {{ story_featured_quote_classes }}">
|
|
2
|
+
<div class="{{ story_featured_quote_primary_classes }} // lrv-u-flex lrv-u-flex-direction-column lrv-u-height-100p lrv-u-justify-content-center">
|
|
3
|
+
{% if c_dek_url %}
|
|
4
|
+
<a href="{{ c_dek_url }}" class="c-dek__link ">
|
|
5
|
+
{% endif %}
|
|
6
|
+
{% if c_dek %}
|
|
7
|
+
{% include "@larva/components/c-dek/c-dek.twig" with c_dek %}
|
|
8
|
+
{% endif %}
|
|
9
|
+
{% if c_dek_url %}
|
|
10
|
+
</a>
|
|
11
|
+
{% endif %}
|
|
12
|
+
|
|
13
|
+
<ul class="lrv-a-unstyle-list // {{ story_nav_classes }} {{ story_nav_layout_classes }}">
|
|
14
|
+
{% if c_title %}
|
|
15
|
+
{% include "@larva/components/c-title/c-title.twig" with c_title %}
|
|
16
|
+
{% endif %}
|
|
17
|
+
|
|
18
|
+
{% if c_tagline_author %}
|
|
19
|
+
<li class="lrv-u-flex // {{ c_tagline_author_wrapper_classes }}">
|
|
20
|
+
By {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline_author %}
|
|
21
|
+
</li>
|
|
22
|
+
{% endif %}
|
|
23
|
+
</ul>
|
|
24
|
+
</div>
|
|
25
|
+
</div>
|
|
@@ -0,0 +1,8 @@
|
|
|
1
|
+
const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
|
|
2
|
+
|
|
3
|
+
const o_sub_header = __experimentalCloneWithFallback( 'objects/o-sub-header/o-sub-header.prototype' );
|
|
4
|
+
|
|
5
|
+
module.exports = {
|
|
6
|
+
sub_header_classes: '',
|
|
7
|
+
o_sub_header: o_sub_header,
|
|
8
|
+
};
|
|
@@ -0,0 +1,7 @@
|
|
|
1
|
+
{% if o_sub_header %}
|
|
2
|
+
<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">
|
|
3
|
+
<div class="lrv-a-wrapper">
|
|
4
|
+
{% include "@larva/objects/o-sub-header/o-sub-header.twig" with o_sub_header %}
|
|
5
|
+
</div>
|
|
6
|
+
</div>
|
|
7
|
+
{% endif %}
|
package/objects/o-nav/o-nav.twig
CHANGED
|
@@ -13,10 +13,16 @@
|
|
|
13
13
|
>
|
|
14
14
|
|
|
15
15
|
{% if o_nav_title_text %}
|
|
16
|
-
{% if
|
|
17
|
-
<
|
|
18
|
-
{%
|
|
19
|
-
|
|
16
|
+
{% if o_nav_title_outer %}
|
|
17
|
+
<div class="o-nav__title-outer {{ o_nav_title_outer_classes }}">
|
|
18
|
+
{% endif %}
|
|
19
|
+
{% if o_nav_tag_text %}
|
|
20
|
+
<{{ 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 }}>
|
|
21
|
+
{% else %}
|
|
22
|
+
<h4 id="{{ o_nav_title_id_attr }}" class="o-nav__title {{ o_nav_title_classes }}">{{ o_nav_title_text }}</h4>
|
|
23
|
+
{% endif %}
|
|
24
|
+
{% if o_nav_title_outer %}
|
|
25
|
+
</div>
|
|
20
26
|
{% endif %}
|
|
21
27
|
{% endif %}
|
|
22
28
|
|
|
@@ -0,0 +1,39 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
|
|
3
|
+
const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype.js' );
|
|
4
|
+
const c_heading = clonedeep( c_heading_prototype );
|
|
5
|
+
|
|
6
|
+
const o_nav_prototype = require( '@penskemediacorp/larva-patterns/objects/o-nav/o-nav.prototype' );
|
|
7
|
+
const o_nav = clonedeep( o_nav_prototype );
|
|
8
|
+
|
|
9
|
+
const o_nav_items_c_links__prototype = require( '@penskemediacorp/larva-patterns/components/c-link/c-link.prototype.js' );
|
|
10
|
+
|
|
11
|
+
c_heading.c_heading_text = 'Market';
|
|
12
|
+
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';
|
|
13
|
+
c_heading.c_heading_is_primary_heading = true;
|
|
14
|
+
|
|
15
|
+
o_nav.o_nav_list_items = [];
|
|
16
|
+
const menuLinks = [ 'View All', 'Tag Title', 'Tag Title', 'Tag Title', 'Tag Title', 'Tag Title' ];
|
|
17
|
+
|
|
18
|
+
for (let i = 0; i < menuLinks.length; i++) {
|
|
19
|
+
let c_link = clonedeep( o_nav_items_c_links__prototype );
|
|
20
|
+
|
|
21
|
+
c_link.c_link_text = menuLinks[i];
|
|
22
|
+
c_link.c_link_classes += ' c_link_classes lrv-u-font-family-primary lrv-u-color-grey-dark:hover';
|
|
23
|
+
|
|
24
|
+
o_nav.o_nav_list_items.push( c_link );
|
|
25
|
+
}
|
|
26
|
+
|
|
27
|
+
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';
|
|
28
|
+
|
|
29
|
+
o_nav.o_nav_classes = 'lrv-u-flex@desktop lrv-u-align-items-center lrv-u-text-align-center lrv-js-MobileHeightToggle';
|
|
30
|
+
o_nav.o_nav_title_text = 'View Categories';
|
|
31
|
+
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;
|
|
32
|
+
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';
|
|
33
|
+
o_nav.o_nav_list_item_classes = mobileDropdownUtilities;
|
|
34
|
+
|
|
35
|
+
module.exports = {
|
|
36
|
+
o_sub_header_classes: 'lrv-u-flex u-align-items-flex-end@tablet lrv-u-flex-direction-column@mobile-max',
|
|
37
|
+
c_heading: c_heading,
|
|
38
|
+
o_nav: o_nav,
|
|
39
|
+
};
|
|
@@ -0,0 +1,9 @@
|
|
|
1
|
+
<header class="o-sub-header // {{ o_sub_header_classes }}">
|
|
2
|
+
{% if c_heading %}
|
|
3
|
+
{% include "@larva/components/c-heading/c-heading.twig" with c_heading %}
|
|
4
|
+
{% endif %}
|
|
5
|
+
|
|
6
|
+
{% if o_nav %}
|
|
7
|
+
{% include "@larva/objects/o-nav/o-nav.twig" with o_nav %}
|
|
8
|
+
{% endif %}
|
|
9
|
+
</header>
|
|
@@ -0,0 +1,11 @@
|
|
|
1
|
+
const clonedeep = require( 'lodash.clonedeep' );
|
|
2
|
+
const c_text_input = clonedeep(require('@penskemediacorp/larva-patterns/components/c-text-input/c-text-input.prototype'));
|
|
3
|
+
|
|
4
|
+
module.exports = {
|
|
5
|
+
o_text_input_group_classes: '',
|
|
6
|
+
o_text_input_group_items: [
|
|
7
|
+
c_text_input,
|
|
8
|
+
c_text_input,
|
|
9
|
+
c_text_input
|
|
10
|
+
]
|
|
11
|
+
};
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@penskemediacorp/larva-patterns",
|
|
3
|
-
"version": "0.
|
|
3
|
+
"version": "0.7.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": "^0.
|
|
24
|
-
"@penskemediacorp/larva-js": "^0.
|
|
25
|
-
"@penskemediacorp/larva-svg": "^0.
|
|
23
|
+
"@penskemediacorp/larva-css": "^0.7.0",
|
|
24
|
+
"@penskemediacorp/larva-js": "^0.7.0",
|
|
25
|
+
"@penskemediacorp/larva-svg": "^0.7.0",
|
|
26
26
|
"lodash.clonedeep": "^4.5.0"
|
|
27
27
|
},
|
|
28
|
-
"gitHead": "
|
|
28
|
+
"gitHead": "4f647cfb574dcae8905f806957c7dfa75420dbbe"
|
|
29
29
|
}
|