@penskemediacorp/larva-patterns 1.0.2-alpha.0 → 1.1.2

package/{src/objects → objects}/o-tease-list/o-tease-list.twig

@@ -1,4 +1,8 @@
-<ul class="o-tease-list {{ modifier_class }}">
+<ul class="o-tease-list {{ modifier_class }} {{ o_tease_list_classes }}"
+	{% if o_tease_list_labelledby_attr %}
+		aria-labelledby="{{ o_tease_list_labelledby_attr }}"
+	{% endif %}
+>
 	{% for item in o_tease_list_items %}
 		<li class="o-tease-list__item {{ o_tease_list_item_classes }}">
 			{% include "@larva/objects/o-tease/o-tease.twig" with item %}

package/package.json

@@ -1,19 +1,11 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.0.2-alpha.0",
-  "description": "> TODO: description",
+  "version": "1.1.2",
+  "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
   "license": "ISC",
   "main": "lib/patterns.js",
-  "directories": {
-    "lib": "scripts",
-    "test": "__tests__"
-  },
-  "files": [
-    "src/components/**/*",
-    "src/objects/**/*"
-  ],
   "repository": {
     "type": "git",
     "url": "git+https://github.com/Penske-Media-Corp/pmc-larva.git"
@@ -28,7 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva-scss": "^1.0.2-alpha.0"
+    "@penskemediacorp/larva-css": "^1.1.2",
+    "@penskemediacorp/larva-js": "^1.0.0",
+    "@penskemediacorp/larva-svg": "^1.0.0",
+    "lodash.clonedeep": "^4.5.0"
   },
-  "gitHead": "cf2b38a01e0a2c7c8404274af021f2fd909a7604"
+  "gitHead": "226d634b90913073b4b5734415acd3594570c79d"
 }

package/pattern.html

@@ -0,0 +1,68 @@
+{% extends "base.html" %}
+
+{% block content %}
+	{% if 'components' == type or 'modules' == type or 'objects' == type %}
+		{% set ext = '.twig' %}
+	{% else %}
+		{% set ext = '.html' %}
+	{% endif %}
+
+	{% set path = type ~"/" ~ name ~ "/" ~ name ~ ext %}
+
+	<header class="lrv-u-background-color-grey-light lrv-u-padding-a-1  js-LarvaUiToggle-panel">
+		<h1 class="lrv-u-font-family-basic lrv-u-margin-a-00">{{ source ~ ' ' ~ type ~ ': ' }}<code>{{ name  }}{{ variant ? '.' ~ variant }}</code></h1>
+		<div class="lrv-u-flex lrv-u-align-items-center lrv-a-space-children-horizontal lrv-a-space-children--1">
+			<h2>Available Variants</h2>
+			{% for item in variants %}
+				{% set slug = item == 'prototype' ? '' : item %}
+				{% set link = "/" ~ source ~ "/" ~ type ~ "/" ~ name ~ "/" ~ slug %}
+				{% set current_class = variant == item ? 'lrv-u-background-color-brand-primary lrv-u-color-white lrv-u-color-white:hover' : '' %}
+
+				<a href="{{ link }}" class="lrv-u-padding-a-050 {{ current_class }}">{{ item }}</a>
+			{% endfor %}
+		</div>
+	</header>
+
+	{% if data.error %}
+		<div class="lrv-a-wrapper">
+			<h2 style="color: red;">
+				{{ data.message|raw }}
+			</h2>
+			<code>{{ data.error.message }}</code>
+			<pre>
+				{{ data.error.stack }}
+			</pre>
+		</div>
+	{% else %}
+		{% include path with data %}
+	{% endif %}
+
+	<div class="lrv-u-background-color-grey-light lrv-a-grid lrv-u-font-size-12 lrv-u-border-t-1 lrv-u-border-color-grey lrv-u-padding-a-2 js-LarvaUiToggle-panel">
+		<details>
+			<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}</code> README</summary>
+			<div class="lrv-u-padding-a-1 lrv-u-background-color-white lrv-u-font-size-16">
+				{{ source( "@" ~ source ~ "/" ~ type ~"/" ~ name ~ "/" ~ 'README.md', true )|markdown|raw }}
+			</div>
+		</details>
+		<details>
+			{% if type == 'one-offs' %}
+				<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}</code> HTML <small class="lrv-u-font-size-16">Dummy HTML for development.</small></summary>
+			{% else %}
+				<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}</code> Twig <small class="lrv-u-font-size-16">The markup file.</small></summary>
+			{% endif %}
+
+			<pre class="lrv-a-wrapper language-twig"><code>{{ source( path )|escape }}</code></pre>
+		</details>
+
+		{% if type != 'algorithms' %}
+			<details>
+				<summary class="lrv-u-font-size-24 lrv-u-cursor-pointer"><code>{{ name }}{{ variant ? '.' ~ variant }}</code> JSON <small class="lrv-u-font-size-16">The data object for this pattern.</small></summary>
+				<pre class="lrv-a-wrapper language-json"><code>{{ json_pretty|raw }}</code></pre>
+			</details>
+		{% endif %}
+
+		{% if type == 'algorithms' %}
+
+		{% endif %}
+	</div>
+{% endblock %}

package/style-guide/colors.html

@@ -0,0 +1,33 @@
+<section>
+	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Text Colors</h2>
+	<div class="lrv-a-grid lrv-a-cols3 lrv-a-cols4@tablet lrv-u-margin-tb-1">
+		{% for class in colors.color %}
+			<div class="lrv-u-flex lrv-u-flex-direction-column">
+				<strong class="lrv-u-width-100 {{ class }}">Here is some text</strong>
+				<p><code>.{{ class }}</code></p>
+			</div>
+		{% endfor %}
+	</div>
+</section>
+<section>
+	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Border Colors</h2>
+	<div class="lrv-a-grid lrv-a-cols3 lrv-a-cols4@tablet lrv-u-margin-tb-1">
+		{% for class in colors['border-color'] %}
+			<div class="lrv-u-flex lrv-u-flex-direction-column">
+				<div class="lrv-u-width-100 lrv-u-padding-a-025 lrv-u-border-a-3 {{ class }}"></div>
+				<p><code>.{{ class }}</code></p>
+			</div>
+		{% endfor %}
+	</div>
+</section>
+<section>
+	<h2 style="background-color: whitesmoke;" class="lrv-u-padding-a-1 lrv-u-margin-b-2">Background Colors</h2>
+	<div class="lrv-a-grid lrv-a-cols3 lrv-u-margin-tb-1">
+		{% for class in colors['background-color'] %}
+			<div class="lrv-u-flex lrv-u-flex-direction-column">
+				<div class="lrv-u-width-100 lrv-u-border-a-1 lrv-u-padding-a-1 {{ class }}"></div>
+				<p><code>.{{ class }}</code></p>
+			</div>
+		{% endfor %}
+	</div>
+</section>

package/style-guide/fonts.html

@@ -0,0 +1,22 @@
+{% if not font_styles %}
+	<section class="lrv-a-wrapper lrv-u-width-50p lrv-u-color-white lrv-u-margin-tb-2 lrv-u-padding-a-1 lrv-u-background-color-grey-darkest">
+		{% set url = 'https://' ~ brand ~ '.larva.pmcdev.io/project/__tests__/style-guide' %}
+		<h2>This brand does not have typography tokens yet.</h2>
+		<p>Visit this documentation to learn how to set them up in Larva, and in the mean time, the brand's typography styles may be available at the legacy URL:</p>
+		<a href="{{url}}">{{url}}</a></p>
+	</section>
+
+{% endif %}
+
+{% for key, sizes in font_styles %}
+	<div class="lrv-u-border-t-1 lrv-u-padding-b-2">
+		<h2 class="lrv-u-padding-a-1" style="background-color: lemonchiffon;">{{ key }}</h2>
+
+		{% for class in sizes %}
+			<div class="lrv-u-border-b-1 lrv-u-border-color-grey lrv-u-margin-t-1">
+				<code>.{{class}}</code>
+				<p class="{{ class }}">Each of us knows a little, together we know a lot.</p>
+			</div>
+		{% endfor %}
+	</div>
+{% endfor %}

package/style-guide/index.html

@@ -0,0 +1,14 @@
+{% extends "base.html" %}
+
+{% block content %}
+	<div class="lrv-a-wrapper">
+		<header class="lrv-u-margin-tb-1">
+			<h1>Style Guide for <code class="lrv-u-background-color-grey-dark lrv-u-border-radius-5 lrv-u-padding-lr-050 lrv-u-padding-tb-025 lrv-u-color-white">{{brand}}</code></h1>
+			<p>This style guide is generated from design tokens. The correct way to set up and customize the style guide is outlined in <a href="https://confluence.pmcdev.io/x/TgmeAw"><u>this Confluence Page</u></a>.</p>
+		</header>
+		{% include "style-guide/fonts.html" %}
+		{% include "style-guide/colors.html" %}
+		{% block elements %}
+		{% endblock elements %}
+	</div>
+{% endblock content %}

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

@@ -1,5 +0,0 @@
-module.exports = {
-	"c_button_classes": "",
-	"c_button_url": "#",
-	"c_button_text": "Nice Button"
-}

package/src/components/c-button/c-button.scss

@@ -1,33 +0,0 @@
-// Button
-//
-// .c-button--block - Used on previous next, etc.
-// .c-button--plain - Plain button.
-//
-// Markup: c-button.twig
-//
-// Style Guide: Components.Button
-
-@import '~@setup';
-
-.c-button {
-	@include _button-base( $color: $color-red-31, $color-hover: $color-red-18 );
-}
-
-.c-button--block {
-	background-color: $color-red-31;
-	box-shadow: $shadow-light;
-	color: $color-white;
-	border: none;
-	border-radius: 0;
-	transition: box-shadow $transition-button;
-
-	&:hover {
-		color: $color-white;
-		box-shadow: $shadow-dark;
-	}
-}
-
-.c-button--plain {
-	border: none;
-	border-radius: 0;
-}

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

@@ -1,13 +0,0 @@
-{% if c_button_use_button_element %}
-	<button class="c-button {{ modifier_class }} {{ c_button_classes }}">
-{% else %}
-	<a class="c-button {{ modifier_class }} {{ c_button_classes }}" href="{{ c_button_url }}">
-{% endif %}
-
-	{{ c_button_text }}
-
-{% if c_button_use_button_element %}
-	</button>
-{% else %}
-	</a>
-{% endif %}

package/src/components/c-heading/c-heading.prototype.js

@@ -1,5 +0,0 @@
-module.exports = {
-	"c_heading_text": "Section Heading",
-	"c_heading_url": "",
-	"c_heading_link_classes": ""
-}

package/src/components/c-heading/c-heading.scss

@@ -1,12 +0,0 @@
-// Heading
-//
-// Markup: c-heading.twig
-//
-// Style guide: Components.Text.Heading
-
-@import '@setup';
-
-.c-heading {
-	@include font-family( eksell );
-	font-weight: $font-weight-normal;
-}

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

@@ -1,20 +0,0 @@
-{% if c_heading_is_primary_heading %}
-	<h1 class="c-heading {{ modifier_class }} {{ c_heading_classes }}">
-{% else %}
-	<h2 class="c-heading {{ modifier_class }} {{ c_heading_classes }}">
-{% endif %}
-
-	{% if c_heading_url %}
-		<a href="{{ c_heading_url }}" class="{{ c_heading_link_classes }}">
-	{% endif %}
-
-		{{ c_heading_text }}
-
-	{% if c_heading_url %}
-		</a>
-	{% endif %}
-{% if c_heading_is_primary_heading %}
-	</h1>
-{% else %}
-	</h2>
-{% endif %}

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

@@ -1,8 +0,0 @@
-module.exports = {
-	"modifier_class": "",
-	"c_label_data_attr": "",
-	"c_label_classes": "",
-	"c_label_text": "Label Text",
-	"c_label_url": "#",
-	"c_label_link_classes": ""
-};

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

@@ -1,11 +0,0 @@
-<span class="c-label {{ modifier_class }} {{ c_label_classes }}" {{ c_label_data_attr }}>
-{% 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 %}
-</span>

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

@@ -1,6 +0,0 @@
-module.exports = {
-	"modifier_class": "",
-	"c_nav_link_classes": "",
-	"c_nav_link_text": "Navigation Link",
-	"c_nav_link_url": "#"
-};

package/src/components/c-nav-link/c-nav-link.scss

@@ -1,14 +0,0 @@
-// Nav Link
-//
-// The nav link assumes the color and hover color applied to its container via utilities.
-//
-// Markup: c-nav-link.twig
-//
-// Style Guide: Components.NavLink
-
-@import '../../../node_modules/@penskemediacorp/larva-scss/src/setup.scss';
-
-.c-nav-link,
-.c-nav-link:hover {
-	@include pmc-unstyle-link;
-}

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

@@ -1,3 +0,0 @@
-<a class="c-nav-link {{ modifier_class }} {{ c_nav_link_classes }}" href="{{ c_nav_link_url }}">
-	{{ c_nav_link_text }}
-</a>

package/src/components/c-tagline/c-tagline.json

@@ -1,4 +0,0 @@
-{
-	"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/src/components/c-tagline/c-tagline.scss

@@ -1,19 +0,0 @@
-// Tagline
-//
-// Tagline supports both escaped text data as `c_tagline_text` and markup from `wp_kses_post` as `c_tagline_markup`.
-//
-// Markup: c-tagline.twig
-//
-// Style Guide: Components.Tagline
-
-@import '~@setup';
-
-.c-tagline,
-.c-tagline > p {
-	margin-top: 0;
-	margin-bottom: $spacer-050;
-}
-
-.c-tagline--a-content__link a {
-	@include a-content__link( inherit );
-}

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

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

package/src/components/c-timestamp/c-timestamp.scss

@@ -1,5 +0,0 @@
-// Timestamp
-//
-// Markup: c-timestamp.twig
-//
-// Style Guide: Components.Timestamp

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

@@ -1 +0,0 @@
-<time class="c-timestamp {{ modifier_class }} {{ c_timestamp_classes }}" datetime="{{ c_timestamp_datetime_attr }}">{{ c_timestamp_text }}</time>

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

@@ -1,5 +0,0 @@
-module.exports = {
-	"c_title_classes": "",
-	"c_title_text": "Title of a story",
-	"c_title_url": "#"
-}

package/src/components/c-title/c-title.scss

@@ -1,30 +0,0 @@
-// Title
-//
-// Markup: c-title.twig
-//
-// Style guide: Components.Text.Title
-
-@import '@setup';
-
-@mixin _c-title--overlay-title {
-	margin-top: -$spacer-2;
-	position: relative;
-}
-
-.c-title {
-	font-weight: $font-weight-bold;
-}
-
-.c-title__before {
-	color: map-get( $semantic-color-list, brand-red );
-}
-
-.c-title--overlay-title {
-	@include _c-title--overlay-title;
-}
-
-.c-title--overlay-title\@desktop {
-	@include breakpoint( desktop ) {
-		@include _c-title--overlay-title;
-	}
-}

package/src/components/components.scss

@@ -1 +0,0 @@
-@import './c-nav-link/c-nav-link.scss';

package/src/objects/o-figure/o-figure.prototype.js

@@ -1,8 +0,0 @@
-module.exports = {
-	"o_figure_permalink_url": "https://notlaura.com",
-	"o_figure_alt_attr": "Thumbnail image",
-	"o_figure_placeholder_image_url": "https://picsum.photos/300/300",
-	"o_figure_image_url": "https://picsum.photos/300/300",
-	"o_figure_caption_text": "Here is some caption text",
-	"o_figure_screen_reader_text": "Text if there is no caption"
-}

package/src/objects/o-figure/o-figure.scss

@@ -1,46 +0,0 @@
-// Figure
-//
-// This pattern should be applied to containers of `img` elements that use the .u-crop
-// pattern. It will assume the width of it's parent and supports an optional cropping class,
-// link wrapper, and a caption.
-//
-// .o-figure--circle - Should be used in conjunction with pmc-u-crop-1x1 for the crop class.
-//
-// Markup: o-figure.twig
-//
-// Style guide: Components.Figure
-
-@import '../../../node_modules/@penskemediacorp/larva-scss/src/setup.scss';
-
-.o-figure {
-	width: 100%;
-	display: block;
-}
-
-.o-figure--circle {
-	border-radius: 50%;
-	overflow: hidden;
-}
-
-.o-figure--embedded {
-	width: auto;
-}
-
-.o-figure__link {
-	@include pmc-unstyle-link;
-}
-
-.o-figure__image {
-	width: 100%;
-	height: auto;
-	display: block;
-	background-color: map-get( $semantic-color-list, grey-light );
-	transition: opacity $transition-thumbnail-hover;
-
-	// Prevent small movement when opacity changes on hover.
-	transform: translate3d( 0px, 0px, 0px ); // stylelint-disable-line unit-blacklist
-}
-
-.o-figure__link:hover .o-figure__image {
-	opacity: 0.75;
-}

package/src/objects/o-figure/o-figure.twig

@@ -1,57 +0,0 @@
-{% if o_figure_permalink_url %}
-	<a href="{{ o_figure_permalink_url }}" class="o-figure__link {{ o_figure_link_classes }}">
-{% endif %}
-
-{% if o_figure_screen_reader_text %}
-	<span class="a-screen-reader-only">{{ o_figure_screen_reader_text }}</span>
-{% endif %}
-
-{% if has_toaster %}
-	<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }}" data-toaster-activate-trigger>
-{% else %}
-	<figure class="o-figure {{ modifier_class }} {{ o_figure_classes }}" style="{{ o_figure_width_attr }}">
-{% endif %}
-
-{% if o_figure_crop_class %}
-	<div class="{{ o_figure_crop_class }}">
-{% endif %}
-
-{% if o_figure_image_markup %}
-	{{ o_figure_image_markup }}
-{% else %}
-	<img class="o-figure__image {{ o_figure_image_classes }}" src="{{ o_figure_placeholder_image_url }}" data-lazy-src="{{ o_figure_image_url }}" alt="{{ o_figure_alt_attr }}">
-{% endif %}
-
-{% if c_button %}
-	{% include "@larva/components/c-button/c-button.twig" with c_button %}
-{% endif %}
-
-{% if o_figure_crop_class %}
-	</div>
-{% endif %}
-
-{# Backwards Compatibility #}
-{% if o_figure_caption_text %}
-	<figcaption class="o-figure__caption {{ o_figure_caption_classes }}">{{ o_figure_caption_text }}</figcaption>
-{% endif %}
-
-{% if o_figure_show_figcaption %}
-	<figcaption class="o-figure__caption {{ o_figure_figcaption_classes }}">
-		{% if o_figure_caption_markup %}
-			<span class="{{ o_figure_caption_classes }}">{{ o_figure_caption_markup }}</span>
-		{% endif %}
-		{% if o_figure_credit_text %}
-			<span class="{{ o_figure_credit_classes }}">{{ o_figure_credit_text }}</span>
-		{% endif %}
-	</figcaption>
-{% endif %}
-
-{% if c_play_badge %}
-	{% include "@larva/components/c-play-badge/c-play-badge.twig" with c_play_badge %}
-{% endif %}
-
-</figure>
-
-{% if o_figure_permalink_url %}
-	</a>
-{% endif %}

package/src/objects/o-header/o-header.prototype.js

@@ -1,12 +0,0 @@
-module.exports = {
-	"o_heading_classes": "u-flex u-align-items-center pmc-u-background-black pmc-u-padding-a-1",
-	"c_heading": {
-		"c_heading_classes": "pmc-u-color-white",
-		"c_heading_text": "Section Heading"
-	},
-	"c_button": {
-		"modifier_class": "c-button--plain pmc-u-font-size-12 pmc-u-color-white pmc-u-text-transform-uppercase a-icon-after a-icon-right-arrow u-margin-l-auto",
-		"c_button_url": "#",
-		"c_button_text": "Link"
-	}
-};

package/src/objects/o-header/o-header.scss

@@ -1,5 +0,0 @@
-// Heading
-//
-// Markup: o-header.twig
-//
-// Style Guide: Objects.Header

package/src/objects/o-nav/o-nav.prototype.js

@@ -1,20 +0,0 @@
-const c_nav_link = require( '../../components/c-nav-link/c-nav-link.prototype' );
-
-const o_nav_list_items = [
-	c_nav_link,
-	c_nav_link,
-	c_nav_link
-];
-
-module.exports = {
-	"modifier_class": "",
-	"o_nav_data_attributes": "",
-	"o_nav_classes": "pmc-u-background-brand-red",
-	"o_nav_title_text": "",
-	"o_nav_title_classes": "",
-	"o_nav_list_data_attributes": "",
-	"o_nav_list_classes" : "",
-	"o_nav_list_item_data_attributes": "",
-	"o_nav_list_item_classes": "",
-	"o_nav_list_items": o_nav_list_items
-};

package/src/objects/o-nav/o-nav.scss

@@ -1,41 +0,0 @@
-// Nav
-//
-// .o-nav--flexy - A horizontal, flexible, centered nav.
-// .o-nav--horizontal - A horizontal, centered nav.
-//
-// Markup: o-nav.twig
-//
-// Style Guide: Objects.Nav
-
-@import '../../../node_modules/@penskemediacorp/larva-scss/src/setup.scss';
-
-.o-nav {}
-
-.o-nav__title {}
-
-.o-nav__list {
-	@include pmc-unstyle-list;
-}
-
-.o-nav--flexy .o-nav__list {
-	display: flex;
-	justify-content: center;
-	align-items: center;
-}
-
-.o-nav--horizontal .o-nav__list {
-	display: flex;
-	align-items: center;
-}
-
-.o-nav--flexy .o-nav__list-item {
-	padding-left: $spacer-050;
-	padding-right: $spacer-050;
-}
-
-.o-nav__list-item:last-child {
-
-	.o-nav--flexy  & {
-		border-right: 0;
-	}
-}