@penskemediacorp/larva-patterns 1.10.0-alpha.0 → 1.10.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2019 Penske Media Corporation
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/__tests__/css/css.html

@@ -0,0 +1,9 @@
+<p>Test for media queries:</p>
+
+<div class="lrv-u-padding-b-1 lrv-u-padding-b-2@desktop lrv-u-padding-b-025@desktop-xl lrv-u-background-color-brand-primary lrv-u-color-white">Padding</div>
+
+<div class="lrv-u-border-a-1">
+	<div class="lrv-u-margin-a-025 lrv-u-margin-a-1@desktop lrv-u-margin-a-2@desktop-xl">Margin</div>
+</div>
+
+<div class="lrv-u-font-weight-bold lrv-u-font-weight-normal@desktop lrv-u-font-weight-bold@desktop-xl">Font weight</div>

package/__tests__/css/css.prototype.js

@@ -0,0 +1 @@
+// No data here.

package/__tests__/hub/hub.html

@@ -0,0 +1,25 @@
+<div class="lrv-a-wrapper">
+	{% include "modules/heading/heading.twig" with heading_h1 %}
+
+	{% include "modules/paragraph/paragraph.twig" with paragraph %}
+
+	{% include "modules/button/button.twig" with button %}
+
+	{% include "modules/carousel-grid/carousel-grid.twig" with carousel_grid %}
+
+	{% include "modules/separator/separator.twig" with separator %}
+
+	{% include "modules/carousel-slider/carousel-slider.twig" with carousel_slider %}
+
+	{% include "modules/heading/heading.twig" with heading_h3 %}
+
+	{% include "modules/story-grid/story-grid.twig" with story_grid %}
+
+	{% include "modules/story-grid/story-grid.twig" with story_grid %}
+
+	{% include "modules/story-grid/story-grid.twig" with story_grid_river %}
+
+	{% include "modules/injected-related-content/injected-related-content.twig" with injected_related_content %}
+
+	{% include "modules/secondary-stories/secondary-stories.twig" with secondary_stories %}
+</div>

package/__tests__/hub/hub.prototype.js

@@ -0,0 +1,30 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const { __experimentalCloneWithFallback } = require( '@penskemediacorp/larva' );
+
+const carousel_grid = __experimentalCloneWithFallback( 'modules/carousel-grid/carousel-grid.prototype' );
+const carousel_slider = __experimentalCloneWithFallback( 'modules/carousel-slider/carousel-slider.prototype' );
+const story_grid = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.prototype' );
+const story_grid_river = __experimentalCloneWithFallback( 'modules/story-grid/story-grid.river' );
+const heading_h1 = __experimentalCloneWithFallback( 'modules/heading/heading.h1' );
+const heading_h3 = __experimentalCloneWithFallback( 'modules/heading/heading.h3' );
+const story = __experimentalCloneWithFallback( 'modules/story/story.prototype' );
+const button = __experimentalCloneWithFallback( 'modules/button/button.prototype' );
+const paragraph = __experimentalCloneWithFallback( 'modules/paragraph/paragraph.prototype' );
+const separator = __experimentalCloneWithFallback( 'modules/separator/separator.prototype' );
+const injected_related_content = __experimentalCloneWithFallback( 'modules/injected-related-content/injected-related-content.prototype' );
+const secondary_stories = __experimentalCloneWithFallback( 'modules/secondary-stories/secondary-stories.prototype' );
+
+module.exports = {
+	carousel_grid,
+	carousel_slider,
+	story_grid,
+	heading_h1,
+	heading_h3,
+	paragraph,
+	story,
+	button,
+	separator,
+	injected_related_content,
+	story_grid_river,
+	secondary_stories
+};

package/__tests__/profile/profile.html

@@ -0,0 +1,29 @@
+<div>
+	{% include "@larva/modules/profile-header/profile-header.twig" with profile_header %}
+
+	<div class="lrv-a-wrapper">
+		<div>
+			{% include "@larva/modules/back-to-list/back-to-list.twig" with back_to_list %}
+		</div>
+
+		<div class="a-profile-grid">
+			<div class="a-profile-grid__blurb">
+				{% include "@larva/modules/profile-blurb/profile-blurb.twig" with profile_blurb %}
+			</div>
+
+			<div class="a-profile-grid__body">
+				{% include "@larva/modules/profile-body/profile-body.twig" with profile_body %}
+			</div>
+
+			<div class="a-profile-grid__ads">
+				<img src="https://picsum.photos/300/600" class="a-hidden@mobile-max">
+				<img src="https://picsum.photos/300/250" class="a-hidden@tablet">
+			</div>
+
+			<div class="a-profile-grid__stories">
+				{% include "@larva/modules/profile-gallery/profile-gallery.twig" with profile_gallery %}
+				{% include "@larva/modules/profile-related-stories/profile-related-stories.twig" with profile_related_stories %}
+			</div>
+		</div>
+	</div>
+</div>

package/__tests__/profile/profile.prototype.js

@@ -0,0 +1,17 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const profile_header = clonedeep( require( '../../modules/profile-header/profile-header.prototype' ) );
+const back_to_list = clonedeep( require( '../../modules/back-to-list/back-to-list.prototype' ) );
+const profile_blurb = clonedeep( require( '../../modules/profile-blurb/profile-blurb.prototype' ) );
+const profile_body = clonedeep( require( '../../modules/profile-body/profile-body.prototype' ) );
+const profile_gallery = clonedeep( require( '../../modules/profile-gallery/profile-gallery.prototype' ) );
+const profile_related_stories = clonedeep( require( '../../modules/profile-related-stories/profile-related-stories.prototype' ) );
+
+module.exports = {
+	profile_header,
+	back_to_list,
+	profile_blurb,
+	profile_body,
+	profile_gallery,
+	profile_related_stories
+};

package/__tests__/profile-index/profile-index.html

@@ -0,0 +1,9 @@
+<div>
+	<div class="lrv-a-wrapper lrv-a-grid lrv-a-cols4@tablet">
+		{% include "@larva/modules/profile-filter/profile-filter.twig" with profile_filter %}
+
+		<div class="lrv-a-span3@tablet">
+			{% include "@larva/modules/profile-card-list/profile-card-list.twig" with profile_card_list %}
+		</div>
+	</div>
+</div>

package/__tests__/profile-index/profile-index.prototype.js

@@ -0,0 +1,6 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+module.exports = {
+	profile_filter: clonedeep( require( '../../modules/profile-filter/profile-filter.prototype' ) ),
+	profile_card_list: clonedeep( require( '../../modules/profile-card-list/profile-card-list.prototype' ) ),
+};

package/__tests__/vlanding/vlanding.html

@@ -0,0 +1,7 @@
+<div>
+	{% include "@larva/modules/header/header.twig" with header %}
+	{% include "@larva/modules/vlanding-video-showcase/vlanding-video-showcase.twig" with vlanding_video_showcase %}
+	{% include "@larva/modules/vlanding-playlist/vlanding-playlist.twig" with vlanding_playlist %}
+	{% include "@larva/modules/vlanding-playlist/vlanding-playlist.twig" with vlanding_playlist %}
+	{% include "@larva/modules/vlanding-playlist/vlanding-playlist.twig" with vlanding_playlist %}
+</div>

package/__tests__/vlanding/vlanding.prototype.js

@@ -0,0 +1,11 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const header = clonedeep( require( '../../modules/header/header.prototype' ) );
+const vlanding_video_showcase = clonedeep( require( '../../modules/vlanding-video-showcase/vlanding-video-showcase.prototype' ) );
+const vlanding_playlist = clonedeep( require( '../../modules/vlanding-playlist/vlanding-playlist.prototype' ) );
+
+module.exports = {
+	vlanding_video_showcase: vlanding_video_showcase,
+	vlanding_playlist: vlanding_playlist,
+	header: header
+};

package/_templates/pattern-nav.html

@@ -1,13 +1,52 @@
-<div class="pmc-u-flex pmc-u-align-items-center" {{ source == 'larva' ? 'style="background: yellow;"' }}>
-	<h3 class="pmc-u-padding-r-1">Larva Modules</h3>
-	<ul class="pmc-a-unstyle-list pmc-a-space-children-horizontal pmc-a-space-children--050 pmc-u-flex-grow-1">
-		<li class="pmc-u-display-inline-block"><a href="/larva/modules/pmc-footer">PMC Footer</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/breadcrumbs">Breadcrumbs</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/article-tags">Article Tags</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/badge">Badge</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/footer-menus">Footer Menus</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/footer-social">Footer Social</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/footer-tip">Footer Tip</a></li>
-		<li class="a-icon-before a-icon-bullet"><a href="/larva/modules/footer-newsletter">Footer Newsletter</a></li>
-	</ul>
-</div>
+{% if 'larva' == source %}
+	{% set patterns = pattern_nav.larva %}
+{% else %}
+	{% set patterns = pattern_nav.project %}
+{% endif %}
+
+<nav style="width: 200px">
+	<h3 class="lrv-u-padding-r-1">{{ source|capitalize }}</h3>
+
+	{% if 'larva' == source %}
+		<ul class="lrv-a-unstyle-list">
+			<li><a class="lrv-u-display-block" href="/">Home</a></li>
+			<li><a class="lrv-u-display-block" href="/larva/css">Larva CSS Docs</a></li>
+			<li><a class="lrv-u-display-block" href="/larva/style-guide">Style Guide</a></li>
+		</ul>
+	{% endif %}
+
+	{% for type, value in patterns %}
+
+		<h4 class="lrv-u-padding-tb-050">{{ type }}</h4>
+
+		<ul class="lrv-a-unstyle-list">
+			{% for name, variants in value %}
+				<li>
+					{% set prototype_link = "/" ~ source ~ "/" ~ type ~ "/" ~ name ~ "/" %}
+
+					{% if variants|length > 1 %}
+						<details>
+							<summary>{{ name }}</summary>
+							<ul>
+								{% for item in variants %}
+									{% set link = item == 'prototype' ? '' : item %}
+									<li>
+										{% include "@larva/components/c-link/c-link.twig" with {
+											c_link_text: item,
+											c_link_classes: 'lrv-u-display-block',
+											c_link_url: "/" ~ source ~ "/" ~ type ~ "/" ~ name ~ "/" ~ link,
+										} %}
+									</li>
+								{% endfor %}
+							</ul>
+						</details>
+					{% else %}
+						<a href="{{ prototype_link }}">{{ name }}</a>
+					{% endif %}
+				</li>
+			{% endfor %}
+		</ul>
+
+	{% endfor %}
+
+</nav>

package/algorithms/a-carousel-grid/README.md

@@ -0,0 +1,5 @@
+Layout pattern for carousel-grid module.
+
+Default pattern displays a primary or main post and two secondary posts in a sidebar.
+
+Overlay pattern displays a fuller width primary post with text overlay, and a stacked row of three secondary posts.

package/algorithms/a-carousel-grid/a-carousel-grid.html

@@ -0,0 +1,25 @@
+<div class="lrv-a-wrapper">
+    <div class="lrv-a-carousel-grid {{ carousel_grid_overlay_layout_class }}">
+        <div class="lrv-a-carousel-grid__primary lrv-u-padding-a-1">
+            <div class=" {{ carousel_grid_overlay_content_class }}">
+                <div class="{{ carousel_grid_overlay_img_class }}" style="background-color: #f7f7f7; height: 300px;"></div>
+                <div class="{{ carousel_grid_overlay_content_class }}">Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
+            </div>
+        </div>
+
+        <div class="lrv-a-carousel-grid__secondary {{ carousel_grid_overlay_secondary_class }} lrv-u-padding-a-1">
+            <div class="lrv-a-carousel-grid__overlay--secondary-card lrv-u-flex lrv-u-align-items-center lrv-u-margin-b-1@mobile-max">
+                <div class="lrv-u-width-75p" style="background-color: #f7f7f7; height: 150px;"></div>
+                <div>Magna hexagon stumptown pork belly paleo tilde.</div>
+            </div>
+            <div class="lrv-a-carousel-grid__overlay--secondary-card lrv-u-flex lrv-u-align-items-center lrv-u-margin-b-1@mobile-max">
+                <div class="lrv-u-width-75p" style="background-color: #f7f7f7; height: 150px;"></div>
+                <div>Cat ipsum dolor sit amet, Why dog in house?</div>
+            </div>
+            <div class="lrv-a-carousel-grid__overlay--secondary-card lrv-u-flex lrv-u-align-items-center lrv-u-margin-b-1@mobile-max">
+                <div class="lrv-u-width-75p" style="background-color: #f7f7f7; height: 150px;"></div>
+                <div>Cat ipsum dolor sit amet, Why dog in house?</div>
+            </div>
+        </div>
+    </div>
+</div>

package/algorithms/a-carousel-grid/a-carousel-grid.overlay.js

@@ -0,0 +1,12 @@
+module.exports = {
+    
+    carousel_grid_overlay_layout_class: 'lrv-a-carousel-grid__overlay',
+    
+    carousel_grid_overlay_content_class: 'lrv-a-carousel-grid__overlay--primary',
+    
+    carousel_grid_overlay_img_class: 'lrv-a-carousel-grid__overlay--primary-img',
+
+    carousel_grid_overlay_content_class: 'lrv-a-carousel-grid__overlay--primary-content',
+
+    carousel_grid_overlay_secondary_class: 'lrv-a-carousel-grid__overlay--secondary'
+}

package/algorithms/a-icon/a-icon.html

@@ -0,0 +1 @@
+<p><span class="lrv-a-icon-before lrv-a-icon-arrow-left">Text</span></p>

package/base.html

@@ -1,30 +1,73 @@
+{% set has_side_skins = query.has_side_skins %}
+
 <!doctype html>
 <html lang="en" class="wf-active">
 	<head>
 		<meta charset="utf-8">
-		<link rel="stylesheet" href="/patterns/scratch-pad.css">
-		<link rel="stylesheet" href="/static/css/prism.css">
-		<link rel="stylesheet" href="/css/generic.common.inline.css">
-		{# <link rel="stylesheet" href="/css/generic.common.async.css"> #}
-		<link rel="stylesheet" href="/css/algorithms.common.inline.css">
-		<link rel="stylesheet" href="/css/algorithms.common.async.css">
-		<link rel="stylesheet" href="/css/utilities.common.inline.css">
-		<link rel="stylesheet" href="/css/utilities.common.async.css">
-		<link rel="stylesheet" href="/css/js.common.inline.css">
-		{# <link rel="stylesheet" href="/css/js.common.async.css"> #}
-		
-		<script async src="/static/js/prism.js"></script>
-		<script async src="/js/common.js"></script>
+		<meta name="viewport" content="width=device-width, initial-scale=1.0">
+		<title>LRVA: {{brand}} | {{ source }} | {{ name }}</title>
+
+		{% block stylesheets %}
+		{% endblock %}
+
+		<link rel="stylesheet" href="/assets/build/tokens/{{brand}}.custom-properties.css">
+		{% block compat_stylesheet %}
+		{% endblock compat_stylesheet %}
+
+		<link rel="stylesheet" href="/assets/build/css/larva.css">
+		<link rel="stylesheet" href="/assets/build/css/larva-ui.css">
+
+
+		<script>
+			// Stub in PMC cookie object so fonts load on Larva server
+			if ( ! window.pmc ) {
+				window.pmc = {
+					cookie: {
+						get: () => {},
+						set: () => {},
+						expire: () => {},
+					}
+				};
+			}
+
+			// Stub skins object
+			{% if has_side_skins %}
+				window.pmc_dfp_skin = {};
+			{% endif %}
+
+		</script>
+
 	</head>
-	<body class="pmc-u-margin-a-00">
-		<main>
-			<div class="pmc-u-padding-a-1 pmc-a-glue-parent">
-				{% include "@larva/_templates/pattern-nav.html" with source %}
-				{% include "@project/_templates/pattern-nav.html" with source %}
+	<body class="lrv-u-margin-a-00 {{ compat_class }}">
+
+		<main class="lrv-u-flex">
+			<div class="lrv-u-padding-a-1 lrv-a-glue-parent lrv-u-flex js-LarvaUiToggle-panel">
+				{% include "@larva/_templates/pattern-nav.html" with { source: 'larva' } %}
+				{% if pattern_nav.project %}
+					{% include "@larva/_templates/pattern-nav.html" with { source: 'project' } %}
+				{% endif %}
 			</div>
-			<div>
+			<div class="lrv-u-flex-grow-1">
 				{% block content %}{% endblock %}
 			</div>
 		</main>
+		<br>
+
+		{# Note: Don't write CSS like this in an actual product. #}
+		<div style="position: fixed;
+					bottom: 0;
+					right: 0;
+					z-index: 9999999;">
+			{% include "@larva/components/c-button/c-button.twig" with {
+				"c_button_text": "Toggle Larva UI",
+				"c_button_classes": "js-LarvaUiToggle-button lrv-a-unstyle-button lrv-u-background-color-black lrv-u-color-white lrv-u-padding-a-1 lrv-u-cursor-pointer"
+			} %}
+		</div>
+
+		<script src="/assets/public/webfontloader.js"></script>
+		<script src="/assets/build/js/larva-ui.js"></script>
+		<script src="/assets/build/js/common.js"></script>
+
+		{% block scripts %}{% endblock %}
 	</body>
 </html>

package/components/c-button/README.md

@@ -0,0 +1,3 @@
+The button component should be used for anything that _looks like_ a button - this includes acutual `button` elements and anchor tags. c-button in larva includes certain design configurations to provide a starting point.
+
+If the button is actually an anchor tag, styled as a button, simply configure the button with `c_button_url` and it will use an anchor. If `c_button_url` is not set, it will use a button element. Any JS should be attached using a `js-*` class. This is intended to encourage the use of the button element for on-page interactions, and the use of an anchor tag for buttons that are actually links.  

package/components/c-button/c-button.black.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button = clonedeep( require( './c-button.prototype' ) );
+
+c_button.c_button_classes += ' lrv-u-background-color-black lrv-u-color-white lrv-u-border-radius-5 lrv-u-color-white:hover lrv-u-padding-tb-050 lrv-u-padding-lr-2';
+
+module.exports = c_button;

package/components/c-button/c-button.brand-basic.js

@@ -0,0 +1,8 @@
+const clonedeep = require( 'lodash.clonedeep' );
+
+const c_button_protoype = require( './c-button.prototype' );
+const c_button = clonedeep( c_button_protoype );
+
+c_button.c_button_classes += ' lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-background-color-brand-primary lrv-u-color-white';
+
+module.exports = c_button;

package/components/c-button/c-button.ghost.js

@@ -1,9 +1,10 @@
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;
-const c_button = clone( path.resolve( __dirname, './c-button.prototype' ) );
+const clonedeep = require( 'lodash.clonedeep' );
 
-c_button.c_button_classes += "pmc-a-unstyle-button pmc-u-cursor-pointer pmc-u-border-a-3 pmc-u-border-radius-5 pmc-u-color-brand-primary pmc-u-padding-tb-050 pmc-u-padding-lr-1 pmc-u-color-grey-dark:hover pmc-u-font-weight-bold pmc-u-display-inline-block";
-c_button.c_button_type_attr = "";
-c_button.c_button_url = "#";
+const c_button_protoype = require( './c-button.prototype' );
+const c_button = clonedeep( c_button_protoype );
 
-module.exports = c_button;
+c_button.c_button_classes += ' lrv-u-border-a-3 lrv-u-border-radius-5 lrv-u-color-brand-primary lrv-u-padding-tb-050 lrv-u-padding-lr-1 lrv-u-color-grey-dark:hover lrv-u-font-weight-bold lrv-u-display-inline-block';
+c_button.c_button_type_attr = '';
+c_button.c_button_url = '#';
+
+module.exports = c_button;

package/components/c-button/c-button.prototype.js

@@ -1,6 +1,11 @@
 module.exports = {
-	"c_button_classes": "pmc-a-unstyle-button pmc-u-cursor-pointer",
-	"c_button_text": "Sign Up",
-	"c_button_url": "",
-	"c_button_type_attr": "submit"
-}
+	c_button_classes: 'lrv-a-unstyle-button lrv-u-cursor-pointer',
+	c_button_ga_tracking: {}, // by default we do not want to enable any ga tracking
+	c_button_inner_classes: '',
+	c_button_rel_attr: '',
+	c_button_screen_reader_text: 'Sign Up',
+	c_button_target_attr: '',
+	c_button_text: 'Sign Up',
+	c_button_type_attr: 'submit',
+	c_button_url: ''
+}

package/components/c-button/c-button.stripped.js

@@ -1,7 +1,8 @@
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;
-const c_button = clone( path.resolve( __dirname, './c-button.prototype' ) );
+const clonedeep = require("lodash.clonedeep");
 
-c_button.c_button_classes += "  pmc-u-display-inline-flex";
+const c_button_protoype = require("./c-button.prototype");
+const c_button = clonedeep(c_button_protoype);
 
-module.exports = c_button;
+c_button.c_button_classes += ' lrv-u-display-inline-flex';
+
+module.exports = c_button;

package/components/c-button/c-button.twig

@@ -1,13 +1,17 @@
 {% if c_button_url %}
-	<a class="c-button {{ modifier_class }} {{ c_button_classes }}" href="{{ c_button_url }}">
+	<a class="c-button larva {{ modifier_class }} {{ c_button_classes }}" href="{{ c_button_url }}" target="{{ c_button_target_attr }}" rel="{{ c_button_rel_attr }}" {{ wp_action( 'pmc_do_render_custom_ga_tracking_attr', c_button_ga_tracking ) }}>
 {% else %}
-	<button class="c-button {{ modifier_class }} {{ c_button_classes }}" type="{{ c_button_type_attr }}">
+	<button class="c-button larva {{ modifier_class }} {{ c_button_classes }}" type="{{ c_button_type_attr }}">
 {% endif %}
 
 	<span class="c-button__inner {{ c_button_inner_classes }}">
 		{{ c_button_text }}
 	</span>
-	
+
+	{% if c_button_screen_reader_text %}
+		<span class="lrv-a-screen-reader-only">{{ c_button_screen_reader_text }}</span>
+	{% endif %}
+
 {% if c_button_url %}
 	</a>
 {% else %}

package/components/c-checkbox-input/c-checkbox-input.prototype.js

@@ -0,0 +1,6 @@
+module.exports = {
+	c_checkbox_input_name_attr: '',
+	c_checkbox_input_id_attr: '',
+	c_checkbox_input_value_attr: '',
+	c_checkbox_label_text: 'Option 1',
+}

package/components/c-checkbox-input/c-checkbox-input.twig

@@ -0,0 +1,4 @@
+<label>
+	<input type="checkbox" name="{{ c_checkbox_input_name_attr }}" id="{{ c_checkbox_input_id_attr }}" value="{{ c_checkbox_input_value_attr }}" />
+	{{ c_checkbox_label_text }}
+</label>

package/components/c-dek/README.md

@@ -0,0 +1,3 @@
+# c-dek
+
+c-dek is intended for small paragraphs of text such as an excerpt or a small description of other content. It is a paragraph tag. If c_dek_markup is used for populating the tag, back-end developers should ensure that the markup does not contain surrounding `p` tags.

package/components/c-dek/c-dek.prototype.js

@@ -1,4 +1,5 @@
 module.exports = {
-	"c_dek_classes": "",
-	"c_dek_text": "Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot. Over two days in January 1972, the Queen of Soul, Aretha Franklin — she was 29 at the time — sweeps into the New Temple Missionary Baptist Church in Watts in front of a congregation and testifies to God in song. The blessed thing took nearly half a century to come out because director Sydney Pollack failed to sync the image with the sound. Then digital angels stepped in, and glory, glory, hallelujah! During Franklin’s euphoric vocal on the title song, the Rev. James Cleveland gets up, sits to one side and cries like a baby. No mystery. That’s what you do when you witness a miracle.",
+	c_dek_classes: '',
+	c_dek_markup: '',
+	c_dek_text: 'Perfection is rarely achieved in movies, but this heaven-sent concert doc hits the sweet spot. Over two days in January 1972, the Queen of Soul, Aretha Franklin — she was 29 at the time — sweeps into the New Temple Missionary Baptist Church in Watts in front of a congregation and testifies to God in song. The blessed thing took nearly half a century to come out because director Sydney Pollack failed to sync the image with the sound. Then digital angels stepped in, and glory, glory, hallelujah!',
 };

package/components/c-dek/c-dek.twig

@@ -1 +1,9 @@
-<p class="c-dek {{ c_dek_classes }}">{{ c_dek_text }}</p>
+{% if c_dek_text %}
+	<p class="c-dek {{ modifier_class }} {{ c_dek_classes }}">{{ c_dek_text }}</p>
+{% endif %}
+
+{% if c_dek_markup %}
+	<p class="c-dek {{ modifier_class }} {{ c_dek_classes }}">
+		{{ c_dek_markup|raw }}
+	</p>
+{% endif %}

package/components/c-email-field/c-email-field.ghost.js

@@ -1,10 +1,10 @@
+const clonedeep = require( 'lodash.clonedeep' );
 
-const path = require( 'path' );
-const clone = require( '@penskemediacorp/larva' ).clone;// This should be in this repo, probably
-const c_email_field = clone( path.resolve( __dirname, './c-email-field.prototype' ) );
+const c_email_field_prototype = require( './c-email-field.prototype' );
+const c_email_field = clonedeep( c_email_field_prototype );
 
-c_email_field.c_email_field_classes = "pmc-u-font-size-14 pmc-u-flex pmc-u-align-items-center";
-c_email_field.c_email_field_label_classes = "pmc-u-padding-r-050 pmc-u-font-weight-bold pmc-u-whitespace-nowrap";
-c_email_field.c_email_field_input_classes = "pmc-u-background-transparent pmc-u-border-a-0 pmc-u-color-currentColor pmc-u-padding-a-050 pmc-u-font-size-14";
+c_email_field.c_email_field_classes = 'lrv-u-font-size-14 lrv-u-flex lrv-u-align-items-center';
+c_email_field.c_email_field_label_classes = 'lrv-u-padding-r-050 lrv-u-font-weight-bold lrv-u-whitespace-nowrap';
+c_email_field.c_email_field_input_classes = 'lrv-u-background-color-transparent lrv-u-border-a-0 lrv-u-color-currentColor lrv-u-padding-a-050 lrv-u-font-size-14';
 
-module.exports = c_email_field;
+module.exports = c_email_field;

package/components/c-email-field/c-email-field.prototype.js

@@ -1,9 +1,8 @@
 module.exports = {
-	"c_email_field_classes": "",
-	"c_email_field_label_classes": "",
-	"c_email_field_label_for_attr": "",
-	"c_email_field_label_text": "Your Email",
-	"c_email_field_input_id_attr": "",
-	"c_email_field_input_name_attr": "",
-	"c_email_field_input_placeholder_attr": "email@example.com"
-};
+	c_email_field_classes: '',
+	c_email_field_label_classes: '',
+	c_email_field_label_text: 'Your Email',
+	c_email_field_input_id_attr: '',
+	c_email_field_input_name_attr: '',
+	c_email_field_input_placeholder_attr: 'email@example.com'
+};

package/components/c-email-field/c-email-field.twig

@@ -1,4 +1,4 @@
 <div class="c-email-field {{ modifier_class }} {{ c_email_field_classes }}">
-	<label class="c-email-field__label {{ c_email_field_label_classes }}" for="{{ c_email_field_label_for_attr }}">{{ c_email_field_label_text }}</label>
+	<label class="c-email-field__label {{ c_email_field_label_classes }}" for="{{ c_email_field_input_id_attr }}">{{ c_email_field_label_text }}</label>
 	<input class="c-email-field__input {{ c_email_field_input_classes }}" name="{{ c_email_field_input_name_attr }}" id="{{ c_email_field_input_id_attr }}" required type="email" placeholder="{{ c_email_field_input_placeholder_attr }}" pattern="[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$" />
 </div>

package/components/c-figcaption/c-figcaption.prototype.js

@@ -0,0 +1,9 @@
+module.exports = {
+	c_figcaption_classes: '',
+	c_figcaption_caption_markup: 'Protest art hangs at Hong Kong <em>International Airport</em>.',
+	c_figcaption_caption_classes: '',
+	c_figcaption_credit_text: 'Courtesty Wong Ka Ying',
+	c_figcaption_credit_classes: '',
+	c_figcaption_inner: false,
+	c_figcaption_inner_classes: '',
+}

package/components/c-figcaption/c-figcaption.twig

@@ -0,0 +1,16 @@
+<figcaption class="c-figcaption {{ modifier_class }} {{ c_figcaption_classes }}">
+	{% if c_figcaption_inner %}
+		<div class="c-figcaption__inner {{ c_figcaption_inner_classes }}">
+	{% endif %}
+
+		{% if c_figcaption_caption_markup %}
+			<span class="{{ c_figcaption_caption_classes }}">{{ c_figcaption_caption_markup|raw }}</span>
+		{% endif %}
+		{% if c_figcaption_credit_text %}
+			<cite class="{{ c_figcaption_credit_classes }}">{{ c_figcaption_credit_text }}</cite>
+		{% endif %}
+
+	{% if c_figcaption_inner %}
+		</div>
+	{% endif %}
+</figcaption>

package/components/c-heading/README.md

@@ -0,0 +1,4 @@
+This pattern is for major section headings. It has the following options:
+
+1. `c_heading_is_primary_heading` - default is false, but true will set this to an `h1`. Useful for category and tag templates.
+2. `c_heading_outer` - a wrapping div that exposes `c_heading_outer_classes`. Useful for adding borders or background colors to the heading.