@penskemediacorp/larva-patterns 1.8.0-alpha.0 → 1.9.0

package/components/c-heading/c-heading.twig

@@ -1,7 +1,11 @@
+{% if c_heading_outer %}
+	<div class="c-heading__outer {{ c_heading_outer_classes }}">
+{% endif %}
+
 {% if c_heading_is_primary_heading %}
-	<h1 class="c-heading {{ modifier_class }} {{ c_heading_classes }}">
+	<h1 id="{{ c_heading_id_attr }}" class="c-heading larva {{ modifier_class }} {{ c_heading_classes }}">
 {% else %}
-	<h2 class="c-heading {{ modifier_class }} {{ c_heading_classes }}">
+	<h2 id="{{ c_heading_id_attr }}" class="c-heading larva {{ modifier_class }} {{ c_heading_classes }}">
 {% endif %}
 
 	{% if c_heading_url %}
@@ -13,8 +17,13 @@
 	{% if c_heading_url %}
 		</a>
 	{% endif %}
+
 {% if c_heading_is_primary_heading %}
 	</h1>
 {% else %}
 	</h2>
 {% endif %}
+
+{% if c_heading_outer %}
+	</div>
+{% endif %}

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

@@ -0,0 +1,5 @@
+module.exports = {
+	c_hidden_field_name_attr: '',
+	c_hidden_field_value_attr: '',
+	c_hidden_field_id_attr: ''
+};

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

@@ -0,0 +1 @@
+<input type="hidden" name="{{ c_hidden_field_name_attr }}" id="{{ c_hidden_field_id_attr }}" value="{{ c_hidden_field_value_attr }}" />

package/components/c-icon/c-icon.full.js

@@ -1,7 +1,8 @@
-const path = require( 'path' );
-const clone = require( '../../../larva/lib/utils/clonePatternData' );// This should be in this repo, probably
-const c_icon = clone( path.resolve( __dirname, './c-icon.prototype' ) );
+const clonedeep = require( 'lodash.clonedeep' );
 
-c_icon.c_icon_classes = 'pmc-u-height-100p pmc-u-width-100p';
+const c_icon_prototype = require( './c-icon.prototype' );
+const c_icon = clonedeep( c_icon_prototype );
 
-module.exports = c_icon;
+c_icon.c_icon_classes = 'lrv-u-height-100p lrv-u-width-100p';
+
+module.exports = c_icon;

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

@@ -1,10 +1,12 @@
-const path = require( 'path' );
-
-let c_icon = {};
-
-c_icon.c_icon_link_classes = '';
-c_icon.c_icon_name = 'byline-plus';
-c_icon.c_icon_url = '#';
-c_icon.c_icon_classes = 'pmc-u-display-block pmc-u-width-16 pmc-u-height-16';
-c_icon.c_icon_rel_name = 'noopener noreferrer';
-module.exports = c_icon;
+module.exports = {
+	c_icon_link_classes: '',
+	c_icon_name: 'byline-plus',
+	c_icon_target_attr: '_blank',
+	c_icon_link_screen_reader_text: 'Icon Link',
+	c_icon_url: false,
+	c_icon_classes: 'lrv-u-display-block lrv-u-width-16 lrv-u-height-16',
+	c_icon_rel_name: 'noopener noreferrer',
+	c_icon_screen_reader_tag_text: '',
+	c_icon_screen_reader_text: 'Plus Icon',
+	c_icon_screen_reader_title_attr: 'Plus Icon'
+};

package/components/c-icon/c-icon.twig

@@ -1,8 +1,28 @@
 {% if c_icon_url %}
-<a class="{{ c_icon_link_classes }}" href="{{ c_icon_url }}" aria-label="{{ c_icon_name }}" {% if c_icon_rel_name %}rel="{{ c_icon_rel_name }}"{% endif %} target="_blank">
+<a class="{{ c_icon_link_classes }}" href="{{ c_icon_url }}"
+	{% if c_icon_rel_name %}
+		rel="{{ c_icon_rel_name }}"
+	{% endif %}
+	{% if c_icon_target_attr %}
+		target="{{ c_icon_target_attr }}"
+	{% endif %}
+>
+	<span class="lrv-a-screen-reader-only">{{ c_icon_link_screen_reader_text }}</span>
+{% endif %}
+
+{% if c_icon_screen_reader_text %}
+	{% if c_icon_screen_reader_tag_text %}
+	<{{ c_icon_screen_reader_tag_text }} class="lrv-a-screen-reader-only" title="{{ c_icon_screen_reader_title_attr }}">{{ c_icon_screen_reader_text }}</{{ c_icon_screen_reader_tag_text }}>
+	{% else %}
+	<span class="lrv-a-screen-reader-only" title="{{ c_icon_screen_reader_title_attr }}">{{ c_icon_screen_reader_text }}</span>
+	{% endif %}
 {% endif %}
 
-<svg class="c-icon {{ modifier_class }} {{ c_icon_classes }}">
+<svg class="c-icon {{ modifier_class }} {{ c_icon_classes }}"
+	{% if c_icon_screen_reader_text %}
+		aria-hidden="true"
+	{% endif %}
+>
 	<use xlink:href="#{{ c_icon_name }}" />
 	{% if c_icon_secondary_name %}
 		<use xlink:href="#{{ c_icon_secondary_name }}" />

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

@@ -0,0 +1,8 @@
+module.exports = {
+	c_input_type_attr: 'text',
+	c_input_id_attr: 'inputExample',
+	c_input_label_class: 'lrv-a-screen-reader-only',
+	c_input_label_text: 'Input Example',
+	c_input_class: '',
+	c_input_placeholder_attr: 'Enter text.',
+};

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

@@ -0,0 +1,14 @@
+<label class="c-input" for="{{ c_input_id_attr }}">
+	<span class="{{ c_input_label_class }}">{{ c_input_label_text }}</span>
+	<input
+		id="{{ c_input_id_attr }}"
+		type="{{ c_input_type_attr }}"
+		class="{{ c_input_class }}"
+		name="{{ c_input_id_attr }}"
+		placeholder="{{ c_input_placeholder_attr }}"
+		aria-invalid="{{ c_input_aria_invalid_attr }}"
+		data-error="{{ c_input_error_attr }}"
+		size="{{ c_input_size_attr }}"
+		maxlength="{{ c_input_maxlength_attr }}"
+	/>
+</label>

package/components/c-label/README.md

@@ -0,0 +1,12 @@
+`c-label` should be used for the labels for components.
+
+| Attributes           | Description                                                                               |
+|----------------------|-------------------------------------------------------------------------------------------|
+| c_label_text         | Text content for the label.                                                               |
+| c_label_classes      | CSS classes of the label.                                                                 |
+| c_label_tag          | Which tag need to use to render label, either `h2` or `span` where default will be `span` |
+| c_label_id_attr      | Value of id attribute label.                                                              |
+| c_label_url          | URL for label. (optional)                                                                 |
+| c_label_link_classes | CSS classes for link.                                                                     |
+
+

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

@@ -0,0 +1,7 @@
+module.exports = {
+	c_label_text: 'Label Here',
+	c_label_tag_text: 'span',
+	c_label_id_attr: '',
+	c_label_url: '#',
+	c_label_link_classes: ''
+};

package/components/c-label/c-label.twig

@@ -0,0 +1,19 @@
+{% if c_label_tag_text %}
+<{{ c_label_tag_text }} id="{{ c_label_id_attr }}" class="c-label {{ modifier_class }} {{ c_label_classes }}" {{ c_label_data_attr }}>
+{% else %}
+<span id="{{ c_label_id_attr }}" class="c-label {{ modifier_class }} {{ c_label_classes }}" {{ c_label_data_attr }}>
+{% endif %}
+
+{% if c_label_url %}
+	<a href="{{ c_label_url }}" class="c-label__link {{ c_label_link_classes }}">
+{% endif %}
+	{{ c_label_text }}
+{% if c_label_url %}
+	</a>
+{% endif %}
+
+{% if c_label_tag_text %}
+</{{ c_label_tag_text }}>
+{% else %}
+</span>
+{% endif %}

package/components/c-lazy-image/README.md

@@ -0,0 +1,35 @@
+This is our lazy loading, responsive image pattern. It is optimized to provide an aspect ratio and no reflow when the image is loaded for a smooth user experience. Images loaded using this pattern **must**:
+
+**Option 1:** Be cropped using a class from `a-crop` applied to `c_lazy_image_crop_class`. This is the most common and simplest option.
+
+**Option 2:** Calculate a padding-bottom value based on the image's height and width in `c_lazy_image_crop_style_attr`. This is useful for images with unpredictable aspect ratios such as those in `the_content`in WordPress.
+
+## Option 2: Inline aspect ratio
+
+An example of calculating the padding-bottom attribute in a PHP object is as follows:
+
+```language-php
+if ( ! empty( $image_height ) && ! empty( $image_width ) ) {
+	$post_content_image['c_lazy_image_crop_style_attr'] = 'padding-bottom:calc((' . $image_height . '/' . $image_width . ')*100%);';
+}
+```
+
+Assuming an image URL in the following format:
+https://pmcdeadline2.files.wordpress.com/2019/10/monica-beletsky-apple.jpg?w=450&h=253&crop=1
+
+The image's dimensions are retrieved from the image URL in class-image-caption.php using the following regex (adapted from the ArtNews 2019 theme in class-image-captions.php): 
+
+```language-php
+$image_src    = '';
+$image_height = '';
+$image_width  = '';
+if ( preg_match(
+	"/\<img.+src\=(?:\"|\')(.+?)(?:\"|\').+width\=(?:\"|\')(.+?)(?:\"|\').+height\=(?:\"|\')(.+?)(?:\"|\')\>/",
+	$content,
+	$matches
+) ) {
+	$image_src    = $matches[1]; // @codeCoverageIgnore
+	$image_width  = $matches[2]; // @codeCoverageIgnore
+	$image_height = $matches[3]; // @codeCoverageIgnore
+}
+```

package/components/c-lazy-image/c-lazy-image.prototype.js

@@ -0,0 +1,17 @@
+module.exports = {
+	c_lazy_image_classes: '',
+	c_lazy_image_link_url: false,
+	c_lazy_image_link_classes: 'lrv-a-unstyle-link',
+	c_lazy_image_crop_class: 'lrv-a-crop-16x9',
+	c_lazy_image_crop_style_attr: false,
+	c_lazy_image_link_tab_index_attr: false,
+	c_lazy_image_alt_attr: 'Lazy loaded image',
+	c_lazy_image_src_url: 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg',
+	c_lazy_image_placeholder_url: 'data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==',
+	c_lazy_image_srcset_attr: 'https://farm5.staticflickr.com/4078/5441060528_31db7838ba_m.jpg 240w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_n.jpg 320w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba.jpg 500w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_z.jpg 640w,https://farm5.staticflickr.com/4078/5441060528_31db7838ba_b.jpg 1024w',
+	c_lazy_image_sizes_attr: 'auto',
+	c_lazy_image_img_classes: 'lrv-u-background-color-grey-lightest lrv-u-width-100p lrv-u-display-block lrv-u-height-auto',
+	c_lazy_image_height_attr: '',
+	c_lazy_image_width_attr: '',
+	c_lazy_image_in_initial_viewport: false
+}

package/components/c-lazy-image/c-lazy-image.twig

@@ -0,0 +1,31 @@
+<div class="c-lazy-image {{ modifier_class }} {{ c_lazy_image_classes }}">
+	{% if c_lazy_image_link_url %}
+		<a href="{{ c_lazy_image_link_url }}" class="c-lazy-image__link {{ c_lazy_image_link_classes }}"
+			{% if c_lazy_image_link_tab_index_attr %}
+				tabindex="{{ c_lazy_image_link_tab_index_attr }}"
+			{% endif %}
+		>
+	{% endif %}
+
+	{% if c_lazy_image_crop_class %}
+		<div class="{{ c_lazy_image_crop_class }}" style="{{ c_lazy_image_crop_style_attr }}">
+	{% endif %}
+
+	{% if c_lazy_image_markup %}
+		{{ c_lazy_image_markup }}
+	{% else %}
+		{% if c_lazy_image_in_initial_viewport %}
+			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" srcset="{{ c_lazy_image_srcset_attr }}" sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% else %}
+			<img class="c-lazy-image__img {{ c_lazy_image_img_classes }}" src="{{ c_lazy_image_placeholder_url }}" data-lazy-src="{{ c_lazy_image_src_url }}" alt="{{ c_lazy_image_alt_attr }}" data-lazy-srcset="{{ c_lazy_image_srcset_attr }}" data-lazy-sizes="{{ c_lazy_image_sizes_attr }}" height="{{ c_lazy_image_height_attr }}" width="{{ c_lazy_image_width_attr }}">
+		{% endif %}
+	{% endif %}
+
+	{% if c_lazy_image_crop_class %}
+		</div>
+	{% endif %}
+
+	{% if c_lazy_image_link_url %}
+		</a>
+	{% endif %}
+</div>

package/components/c-link/README.md

@@ -0,0 +1 @@
+A simple text link element with no other containing or inner markup.

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

@@ -1,6 +1,9 @@
 module.exports = {
-	"modifier_class": "",
-	"c_link_classes": "pmc-a-unstyle-link",
-	"c_link_text": "A plain text link",
-	"c_link_url": "#"
-};
+	modifier_class: '',
+	c_link_classes: 'lrv-a-unstyle-link',
+	c_link_text: 'A plain text link',
+	c_link_url: '#',
+	c_link_rel_attr: false,
+	c_link_aria_label_attr: false,
+	c_link_target_attr: false,
+};

package/components/c-link/c-link.twig

@@ -1,3 +1,13 @@
-<a class="c-link {{ modifier_class }} {{ c_link_classes }}" href="{{ c_link_url }}">
+<a class="c-link {{ modifier_class }} {{ c_link_classes }}" href="{{ c_link_url }}"
+	{% if c_link_target_attr %}
+		target="{{ c_link_target_attr }}"
+	{% endif %}
+	{% if c_link_rel_attr %}
+		rel="{{ c_link_rel_attr }}"
+	{% endif %}
+	{% if c_link_aria_label_attr %}
+		aria-label="{{ c_link_aria_label_attr }}"
+	{% endif %}
+>
 	{{ c_link_text }}
 </a>

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

@@ -0,0 +1,7 @@
+module.exports = {
+	c_logo_is_h1: false,
+	c_logo_classes: '',
+	c_logo_url: '/',
+	c_logo_svg: 'brand-logo',
+	c_logo_screen_reader_text: 'Logo text'
+};

package/components/c-logo/c-logo.twig

@@ -0,0 +1,10 @@
+{% if c_logo_is_h1 %}
+	<h1 class="lrv-u-flex">
+{% endif %}
+	<a class="c-logo {{ modifier_class }} {{ c_logo_classes }}" href="{{ c_logo_url }}">
+		{% include '../../build/svg/' ~ c_logo_svg ~ '.svg' %}
+		<span class="lrv-a-screen-reader-only">{{ c_logo_screen_reader_text }}</span>
+	</a>
+{% if c_logo_is_h1 %}
+	</h1>
+{% endif %}

package/components/c-nav-link/c-nav-link.prototype.js

@@ -0,0 +1,7 @@
+module.exports = {
+	c_nav_link_classes: '',
+	c_nav_link_text: 'Navigation Item',
+	c_nav_link_screen_reader_text: 'Navigation Item',
+	c_nav_link_url: '#',
+	c_nav_link_aria_current_attr: 'page'
+}

package/components/c-nav-link/c-nav-link.twig

@@ -0,0 +1,10 @@
+<a class="c-nav-link {{ modifier_class }} {{ c_nav_link_classes }}" href="{{ c_nav_link_url }}"
+	{% if c_nav_link_aria_current_attr %}
+		aria-current="{{ c_nav_link_aria_current_attr }}"
+	{% endif %}
+>
+	{{ c_nav_link_text }}
+	{% if c_nav_link_screen_reader_text %}
+	<span class="lrv-a-screen-reader-only">{{ c_nav_link_screen_reader_text }}</span>
+	{% endif %}
+</a>

package/components/c-play-badge/c-play-badge.prototype.js

@@ -0,0 +1,3 @@
+module.exports = {
+	c_play_badge_classes: ''
+}

package/components/c-play-badge/c-play-badge.twig

@@ -0,0 +1,7 @@
+<svg class="c-play-badge {{ modifier_class }} {{ c_play_badge_classes }}" viewBox="0 0 88 88">
+	<g transform="translate(-.082 -.082)" fill="none" fill-rule="evenodd">
+		<circle class="c-play-badge__fill" stroke-width="4" cx="44" cy="44" r="44" />
+		<circle class="c-play-badge__border" fill="none" stroke="none" stroke-width=4 cx="44" cy="44" r="44" stroke-dasharray="276" stroke-dashoffset="276" />
+		<path class="c-play-badge__icon" d="M38.242 28.835c-.634-.467-2.323-.467-2.46 1.298v19.743a.99.99 0 0 0 1.577.796 3.88 3.88 0 0 0 1.577-3.123V33.105l16.008 10.969-18.458 12.61c-.44.3-.703.798-.703 1.331a1.564 1.564 0 0 0 2.46 1.298l20.383-13.941c.528-.317 1.252-1.615 0-2.596l-20.384-13.94z" />
+	</g>
+</svg>

package/components/c-select-option/c-select-option.prototype.js

@@ -0,0 +1,5 @@
+module.exports = {
+	c_select_option_url: '#',
+	c_select_option_value_attr: 'option-value',
+	c_select_option_text: 'Option Text'
+};

package/components/c-select-option/c-select-option.twig

@@ -0,0 +1,5 @@
+{% if c_select_option_url %}
+	<option data-select-url="{{ c_select_option_url }}" value="{{ c_select_option_value_attr }}">{{ c_select_option_text }}</option>
+{% else %}
+	<option value="{{ c_select_option_value_attr }}">{{ c_select_option_text }}</option>
+{% endif %}

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

@@ -1,8 +1,7 @@
 module.exports = {
-	"modifier_class": "",
-	"c_span_data_attr": "",
-	"c_span_classes": "pmc-u-whitespace-nowrap",
-	"c_span_text": "Label Text",
-	"c_span_url": "#",
-	"c_span_link_classes": ""
-};
+	modifier_class: '',
+	c_span_classes: 'lrv-u-whitespace-nowrap',
+	c_span_text: 'Label Text',
+	c_span_url: '',
+	c_span_link_classes: ''
+};

package/components/c-span/c-span.tag.js

@@ -0,0 +1,7 @@
+const clonedeep = require( 'lodash.clonedeep' );
+const c_span = clonedeep( require( './c-span.prototype' ) );
+
+c_span.c_span_text = 'News';
+c_span.c_span_url = '#';
+
+module.exports = c_span;

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

@@ -0,0 +1,4 @@
+module.exports = {
+	c_svg_classes: '',
+	c_svg_name: 'brand-logo'
+}

package/components/c-svg/c-svg.twig

@@ -0,0 +1,3 @@
+<div class="c-svg {{ c_svg_classes }}">
+	{% include '../../build/svg/' ~ c_svg_name ~ '.svg' %}
+</div>

package/components/c-tagline/README.md

@@ -0,0 +1,3 @@
+# c-tagline
+
+c-tagline is similar to c-dek, but intended for single line taglines or descriptions of other content. Use c_tagline_markup if the content you are passing needs to use `wp_kses`.

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

@@ -0,0 +1,4 @@
+module.exports = {
+	c_tagline_classes: '',
+	c_tagline_text: 'Here is a pretty small amount of text for the tagline. It is a very flexible components, and is really just a single line of text.'
+};

package/components/c-tagline/c-tagline.twig

@@ -1,9 +1,9 @@
 {% if c_tagline_text %}
-	<p class="c-tagline {{ modifier_class }} {{ c_tagline_classes }}" {{ c_tagline_data_attr }}>{{ c_tagline_text }}</p>
+	<p class="c-tagline {{ modifier_class }} {{ c_tagline_classes }}">{{ c_tagline_text }}</p>
 {% endif %}
 
 {% if c_tagline_markup %}
-	<div class="c-tagline {{ modifier_class }} {{ c_tagline_classes }}" {{ c_tagline_data_attr }}>
-		{{ c_tagline_markup }}
+	<div class="c-tagline {{ modifier_class }} {{ c_tagline_classes }}">
+		{{ c_tagline_markup|raw }}
 	</div>
 {% endif %}

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

@@ -1,5 +1,6 @@
 module.exports = {
-	"c_timestamp_classes": "",
-	"c_timestamp_datetime_attr": "00:00-YY-DD-MM",
-	"c_timestamp_text": "July 3, 2001"
-};
+	c_timestamp_classes: '',
+	c_timestamp_datetime_attr: '00:00-YY-DD-MM',
+	c_timestamp_text: 'July 3, 2001',
+	c_timestamp_aria_label_attr: false
+};

package/components/c-timestamp/c-timestamp.twig

@@ -1 +1,9 @@
-<time class="c-timestamp {{ modifier_class }} {{ c_timestamp_classes }}" datetime="{{ c_timestamp_datetime_attr }}">{{ c_timestamp_text }}</time>
+<time class="c-timestamp {{ modifier_class }} {{ c_timestamp_classes }}"
+	datetime="{{ c_timestamp_datetime_attr }}"
+	{% if c_timestamp_aria_label_attr %}
+		aria-label="{{ c_timestamp_aria_label_attr }}"
+	{% endif %}
+	>
+	{{ c_timestamp_text }}
+
+</time>

package/components/c-title/README.md

@@ -0,0 +1,7 @@
+`c-title` should be used for the titles of articles, usually contained within a river or other `section` element. It is an `h3` and supports either `text` or `markup` for its content.
+
+If a value for `c_title_markup` is present, it will display in place of `c_title_text`. This is so that `i` and `em` tags are supported. 
+
+This pattern also supports `c_title_above_url` which is an anchor tag, within the `h3` but with a separate URL, as well as `c_title_before_text` which is a span within the same link as the main `h3`.
+
+In the future, these should/could be refactored into something like `c_title_pre`, and should not have conditionals checking the data.

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

@@ -1,5 +1,9 @@
 module.exports = {
-	"c_title_classes": "",
-	"c_title_text": "Title of a story",
-	"c_title_url": "#"
+	c_title_classes: '',
+	c_title_tag_text: '',
+	c_title_id_attr: 'title-of-a-story',
+	c_title_text: 'Title of a story',
+	c_title_markup: '',
+	c_title_link_classes: '',
+	c_title_url: '#'
 }

package/components/c-title/c-title.twig

@@ -1,4 +1,8 @@
-<h3 class="c-title {{ modifier_class }} {{ c_title_classes }}">
+{% if c_title_tag_text %}
+<{{ c_title_tag_text }} id="{{ c_title_id_attr }}" class="c-title {{ modifier_class }} {{ c_title_classes }}">
+{% else %}
+<h3 id="{{ c_title_id_attr }}" class="c-title {{ modifier_class }} {{ c_title_classes }}">
+{% endif %}
 
 	{% if c_title_above_url %}
 		<a href="{{ c_title_above_url }}" class="{{ c_title_above_link_classes }}">
@@ -14,10 +18,18 @@
 			<span class="c-title__before {{ c_title_before_classes }}">{{ c_title_before_text }}</span>
 		{% endif %}
 
-		{{ c_title_text }}
+		{% if c_title_markup %}
+			{{ c_title_markup|raw }}
+		{% else %}
+			{{ c_title_text }}
+		{% endif %}
 
 	{% if c_title_url %}
 		</a>
 	{% endif %}
 
+{% if c_title_tag_text %}
+</{{ c_title_tag_text }}>
+{% else %}
 </h3>
+{% endif %}

package/css.html

@@ -0,0 +1,44 @@
+{% extends "base.html" %}
+
+{% block content %}
+
+	<h1>{{ name }}</h1>
+
+	<div class="lrv-u-padding-a-1 lrv-a-grid lrv-a-cols2">
+		<section>
+			<h2>Utilities - Default tokens</h2>
+			{% for key, value in spec %}
+				{% if value.selectors|length > 0  and 'u-' in key %}
+					<details>
+						<summary>
+							<strong class="lrv-u-cursor-pointer">.lrv-{{ key }}{% if true == value.tokens %}<strong class="lrv-u-font-size-14" style="background-color: yellow;">From Tokens</strong>{% endif %}</strong>
+						</summary>
+						<ul>
+							{% for selector in value.selectors %}
+								<li>{{ selector }}</li>
+							{% endfor %}
+						</ul>
+					</details>
+				{% endif %}
+			{% endfor %}
+		</section>
+		<section>
+			<h2>Algorithms</h2>
+			{% for key, value in spec %}
+				{% if value.selectors|length > 0 and 'a-' in key %}
+					<details>
+						<summary>
+							<strong class="lrv-u-cursor-pointer">.lrv-{{ key }}{% if true == value.tokens %}<strong class="lrv-u-font-size-14" style="background-color: yellow;">From Tokens</strong>{% endif %}</strong>
+						</summary>
+						<ul>
+							{% for selector in value.selectors %}
+								<li>{{ selector }}</li>
+							{% endfor %}
+						</ul>
+					</details>
+				{% endif %}
+			{% endfor %}
+		</section>
+	</div>
+
+{% endblock content %}

package/index.html

@@ -1,27 +1,9 @@
-<!DOCTYPE html>
-<html lang="en">
-<head>
-	<meta charset="UTF-8">
-	<meta name="viewport" content="width=device-width, initial-scale=1.0">
-	<meta http-equiv="X-UA-Compatible" content="ie=edge">
-	<title>Larva Homepage</title>
-</head>
-<body>
+{% extends "base.html" %}
 
-	<div class="pmc-a-wrapper pmc-u-margin-t-1">
-		<h1>Welcome to Larva!</h1>
-		<p>This is a little baby server for building patterns. To navigate to a pattern, provide the route:</p>
-		<pre>http://localhost:3000/{project|larva}/{patternType}/{patternName}</pre>
-	
-		<p>For example:</p>
-		<a href="http://localhost:3000/larva/objects/o-nav">
-			<pre>http://localhost:3000/larva/objects/o-nav</pre>
-		</a>
-		<p>or, if you are working in a project, point to the local project with:</p>
-		<a href="http://localhost:3000/project/modules/breadcrumbs">
-			<pre>http://localhost:3000/project/modules/breadcrumbs</pre>
-		</a>
+{% block content %}
+	<div class="lrv-a-wrapper lrv-u-margin-tb-2">
+		<h1>Welcome to the Larva pattern library for {{brand}}!</h1>
+		<p>When viewing this page from a local server, you can use the server to quickly update and build front-end Larva modules. As a static site, this pattern library is for documentation.</p>
+		<p>View available patterns by clicking the "Show Larva UI" button on the bottom right. Anything under the "Larva" column is shared across all brands and themed with design tokens. Anything under the "Project" column is a brand-specific pattern. If there is no "Project" column, then the brand is only using shared patterns.</p>
 	</div>
-
-</body>
-</html>
+{% endblock %}

package/index.js

@@ -1,3 +1,4 @@
 module.exports = {
-	o_nav: require( './objects/o-nav/o-nav.prototype' )
+	o_nav: require( './objects/o-nav/o-nav.prototype' ),
+	o_tease: require( './objects/o-tease/o-tease.prototype' )
 }

package/modules/age-gate/README.md

@@ -0,0 +1,3 @@
+# age-gate
+
+This module is relied heavily upon in the `pmc-age-gate` plugin and contains `js-` classes in the twig file that are important to its functionality. Custom JS and CSS (to handle pop-up modal in which the age gate module will appear) are handled in the aforementioned plugin.