@penskemediacorp/larva-patterns 1.48.1 → 1.49.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.
Files changed (4) hide show
  1. package/modules/page-404/page-404.prototype.js +25 -38
  2. package/modules/page-404/page-404.smart.js +60 -0
  3. package/modules/page-404/page-404.twig +12 -0
  4. package/package.json +5 -5
package/modules/page-404/page-404.prototype.js CHANGED
@@ -1,62 +1,49 @@
1
1
  const clonedeep = require( 'lodash.clonedeep' );
2
2
 
3
3
  const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' );
4
- const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype.js' );
5
- const c_title_prototype = require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' );
6
- const c_tagline_prototype = require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype' );
7
- const suggested_link_items_prototype = require( '@penskemediacorp/larva-patterns/modules/list/list.prototype' );
8
- const search_form_prototype = require( '@penskemediacorp/larva-patterns/modules/search-form/search-form.prototype' );
9
-
10
4
  const c_heading = clonedeep( c_heading_prototype );
11
- const c_suggestion_title = clonedeep( c_title_prototype );
12
- const c_search_title = clonedeep( c_title_prototype );
5
+
6
+ const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype.js' );
13
7
  const c_svg = clonedeep( c_svg_prototype );
8
+
9
+ const c_title_prototype = require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' );
14
10
  const c_title = clonedeep( c_title_prototype );
15
- const c_tagline = clonedeep( c_tagline_prototype );
16
- const suggested_link_items = clonedeep( suggested_link_items_prototype );
17
- const search_form = clonedeep( search_form_prototype );
18
11
 
12
+ const c_button_prototype = require( '@penskemediacorp/larva-patterns/components/c-button/c-button.prototype' );
13
+ const c_button_home = clonedeep( c_button_prototype );
14
+ const c_button_search = clonedeep( c_button_prototype );
15
+
16
+ c_heading.c_heading_text = '404';
19
17
  c_heading.c_heading_classes = 'lrv-a-screen-reader-only';
20
18
  c_heading.c_heading_is_primary_heading = true;
21
- c_heading.c_heading_text = '404';
22
19
 
23
20
  c_svg.c_svg_name = 'logo-404';
24
21
  c_svg.c_svg_classes = 'lrv-u-max-width-100p';
25
22
 
26
23
  c_title.c_title_text = 'OOPS! Something went wrong here!';
27
- c_title.c_title_classes = 'lrv-a-font-secondary-l lrv-u-text-transform-uppercase lrv-u-margin-b-125';
24
+ c_title.c_title_classes =
25
+ 'lrv-a-font-secondary-l lrv-u-text-transform-uppercase lrv-u-margin-b-125';
28
26
  c_title.c_title_url = false;
29
27
 
30
- c_suggestion_title.c_title_classes = 'lrv-u-text-align-left lrv-u-margin-b-075';
31
- c_suggestion_title.c_title_text = 'Here are some suggestions that might be the page you were looking for:';
32
- c_suggestion_title.c_title_url = false;
28
+ c_button_home.c_button_text = 'Back To Homepage';
29
+ c_button_home.c_button_url = '/';
30
+ c_button_home.c_button_classes +=
31
+ ' lrv-u-background-color-black lrv-u-margin-lr-075 lrv-u-text-transform-uppercase lrv-u-font-weight-bold u-background-color-brand-primary-dark:hover lrv-u-color-white lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-1';
33
32
 
34
- suggested_link_items.list_classes = 'lrv-u-text-align-left lrv-u-padding-b-1';
35
- suggested_link_items.list_items = [
36
- { list_markup: 'item_one' },
37
- { list_markup: 'item_two' },
38
- ];
39
-
40
- c_search_title.c_title_classes = 'lrv-u-text-align-left';
41
- c_search_title.c_title_text = 'Or try searching for it here...';
42
- c_search_title.c_title_url = false;
43
-
44
- search_form.search_form_classes = 'lrv-u-text-align-left lrv-u-margin-t-1 search-form-404';
45
- search_form.search_form_input_classes = 'lrv-u-border-a-1 lrv-u-width-100p';
46
- search_form.search_form_action_url = '/?s=';
33
+ c_button_search.c_button_text = 'Head To Search';
34
+ c_button_search.c_button_url = '#';
35
+ c_button_search.c_button_classes +=
36
+ ' lrv-u-background-color-black lrv-u-margin-lr-075 lrv-u-text-transform-uppercase lrv-u-font-weight-bold u-background-color-brand-primary-dark:hover lrv-u-color-white lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-margin-t-050@mobile-max';
47
37
 
48
38
  module.exports = {
49
- button_outer_classes:
50
- 'lrv-u-flex lrv-u-justify-content-center lrv-u-align-items-center lrv-u-flex-direction-column@mobile-max',
51
39
  c_heading,
52
- c_suggestion_title,
53
- c_search_title,
54
- c_svg,
55
- c_tagline,
56
40
  c_title,
57
- page_404_inner_classes: 'lrv-u-margin-lr-auto lrv-u-padding-lr-1',
58
- search_form,
59
- suggested_link_items,
41
+ c_button_home,
42
+ c_button_search,
43
+ c_svg,
60
44
  wrapper_classes:
61
45
  'lrv-u-text-align-center lrv-u-padding-t-1 lrv-u-padding-b-2 lrv-u-margin-b-2 lrv-u-max-width-830 lrv-u-margin-lr-auto',
46
+ page_404_inner_classes: 'lrv-u-margin-lr-auto lrv-u-padding-lr-1',
47
+ button_outer_classes:
48
+ 'lrv-u-flex lrv-u-justify-content-center lrv-u-align-items-center lrv-u-flex-direction-column@mobile-max',
62
49
  };
package/modules/page-404/page-404.smart.js ADDED
@@ -0,0 +1,60 @@
1
+ const clonedeep = require( 'lodash.clonedeep' );
2
+
3
+ const c_heading_prototype = require( '@penskemediacorp/larva-patterns/components/c-heading/c-heading.prototype' );
4
+ const c_svg_prototype = require( '../../components/c-svg/c-svg.prototype.js' );
5
+ const c_title_prototype = require( '@penskemediacorp/larva-patterns/components/c-title/c-title.prototype' );
6
+ const c_tagline_prototype = require( '@penskemediacorp/larva-patterns/components/c-tagline/c-tagline.prototype' );
7
+ const suggested_link_items_prototype = require( '@penskemediacorp/larva-patterns/modules/list/list.prototype' );
8
+ const search_form_prototype = require( '@penskemediacorp/larva-patterns/modules/search-form/search-form.prototype' );
9
+
10
+ const c_heading = clonedeep( c_heading_prototype );
11
+ const c_suggestion_title = clonedeep( c_title_prototype );
12
+ const c_search_title = clonedeep( c_title_prototype );
13
+ const c_svg = clonedeep( c_svg_prototype );
14
+ const c_title = clonedeep( c_title_prototype );
15
+ const c_tagline = clonedeep( c_tagline_prototype );
16
+ const suggested_link_items = clonedeep( suggested_link_items_prototype );
17
+ const search_form = clonedeep( search_form_prototype );
18
+
19
+ c_heading.c_heading_classes = 'lrv-a-screen-reader-only';
20
+ c_heading.c_heading_is_primary_heading = true;
21
+ c_heading.c_heading_text = '404';
22
+
23
+ c_svg.c_svg_name = 'logo-404';
24
+ c_svg.c_svg_classes = 'lrv-u-max-width-100p';
25
+
26
+ c_title.c_title_text = 'OOPS! Something went wrong here!';
27
+ c_title.c_title_classes = 'lrv-a-font-secondary-l lrv-u-text-transform-uppercase lrv-u-margin-b-125';
28
+ c_title.c_title_url = false;
29
+
30
+ c_suggestion_title.c_title_classes = 'lrv-u-text-align-left lrv-u-margin-b-075';
31
+ c_suggestion_title.c_title_text = 'Here are some suggestions that might be the page you were looking for:';
32
+ c_suggestion_title.c_title_url = false;
33
+
34
+ suggested_link_items.list_classes = 'lrv-u-text-align-left lrv-u-padding-b-1';
35
+ suggested_link_items.list_items = [
36
+ { list_markup: 'item_one' },
37
+ { list_markup: 'item_two' },
38
+ ];
39
+
40
+ c_search_title.c_title_classes = 'lrv-u-text-align-left';
41
+ c_search_title.c_title_text = 'Or try searching for it here...';
42
+ c_search_title.c_title_url = false;
43
+
44
+ search_form.search_form_classes = 'lrv-u-text-align-left lrv-u-margin-t-1 lrv-u-display-inline-flex lrv-u-width-100p search-form-404';
45
+ search_form.search_form_input_classes = 'lrv-u-border-a-1 lrv-u-width-100p';
46
+ search_form.search_form_action_url = '/?s=';
47
+
48
+ module.exports = {
49
+ c_heading,
50
+ c_suggestion_title,
51
+ c_search_title,
52
+ c_svg,
53
+ c_tagline,
54
+ c_title,
55
+ page_404_inner_classes: 'lrv-u-margin-lr-auto lrv-u-padding-lr-1',
56
+ search_form,
57
+ suggested_link_items,
58
+ wrapper_classes:
59
+ 'lrv-u-text-align-center lrv-u-padding-t-1 lrv-u-padding-b-2 lrv-u-margin-b-2 lrv-u-max-width-830 lrv-u-margin-lr-auto',
60
+ };
package/modules/page-404/page-404.twig CHANGED
@@ -16,6 +16,18 @@
16
16
  {% include "@larva/components/c-tagline/c-tagline.twig" with c_tagline %}
17
17
  {% endif %}
18
18
 
19
+ <div class="buttons-outer {{ button_outer_classes }}">
20
+
21
+ {% if c_button_home %}
22
+ {% include "@larva/components/c-button/c-button.twig" with c_button_home %}
23
+ {% endif %}
24
+
25
+ {% if c_button_search %}
26
+ {% include "@larva/components/c-button/c-button.twig" with c_button_search %}
27
+ {% endif %}
28
+
29
+ </div>
30
+
19
31
  {% if c_suggestion_title %}
20
32
  {% include "@larva/components/c-title/c-title.twig" with c_suggestion_title %}
21
33
  {% endif %}
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@penskemediacorp/larva-patterns",
3
- "version": "1.48.1",
3
+ "version": "1.49.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.48.1",
24
- "@penskemediacorp/larva-js": "^1.48.1",
25
- "@penskemediacorp/larva-svg": "^1.48.1",
23
+ "@penskemediacorp/larva-css": "^1.49.0",
24
+ "@penskemediacorp/larva-js": "^1.49.0",
25
+ "@penskemediacorp/larva-svg": "^1.49.0",
26
26
  "lodash.clonedeep": "^4.5.0"
27
27
  },
28
- "gitHead": "7c0a66de46a48c1e51eaf4225f9fe57521001de8"
28
+ "gitHead": "b3385249708181dc1f48b4530bd3c10a387c3778"
29
29
  }