Add Article Callout Module (#473)

* Add Article Callout Module

* Making updates based on PR feedback

* Updating changes to CSS addin width auto, updates to a-icon CSS,  and callout files

* Removing package-locks.json after resetting branch

* Removing package-lock.json files from branch

CHANGELOG.md

@@ -5,6 +5,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
 ## Unpublished
+* larva-patterns - Add `article-callout` module.
 * larva-patterns - Update `c-email-field` component and 'newsletter' module to improve label and input accessibility.
 
 ## 0.5.6 - 03-29-2022

build/svg/defs/sprite.defs.html

@@ -798,7 +798,7 @@ <h2>youtube</h2>
 
 		</section>
 		<footer>
-			<p>Generated at Tue, 29 Mar 2022 15:23:22 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
+			<p>Generated at Fri, 01 Apr 2022 12:43:38 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
 		</footer>
 	</body>
 </html>

packages/larva-css/src/02-algorithms/a-icon/a-icon.common.inline.scss

@@ -61,7 +61,8 @@
 // Specific Icons
 
 .lrv-a-icon-forward-slash,
-.lrv-a-icon-bullet {
+.lrv-a-icon-bullet,
+.lrv-a-icon-vertical-pipe {
 	@include _a-icon-reset( before ) {
 		padding-right: $spacer-050;
 	};
@@ -79,6 +80,11 @@
 	--a-icon-content: '\02022';
 }
 
+.lrv-a-icon-vertical-pipe {
+	--a-icon-content: '\007C';
+	padding-right: $spacer-025;
+}
+
 .lrv-a-icon-after-arrow-top-left {
 	&::before {
 		position: absolute;
@@ -94,4 +100,5 @@
 		top: pmc-rem(-12);
 		background-color: $color-white;
 	}
-}
+}
+

packages/larva-css/src/03-utilities/u-width.common.inline.scss

@@ -1,6 +1,7 @@
 @import 'setup';
 
 $widths_map: (
+	'width-auto': auto,
 	'width-16': pmc-rem(16),
 	'width-30': pmc-rem(30),
 	'width-50': pmc-rem(50),
@@ -16,6 +17,7 @@ $widths_map: (
 );
 
 @include basic-utility-generator( 'width', (
+	width-auto,
 	width-16,
 	width-30,
 	width-50,

packages/larva-patterns/modules/article-callout/article-callout.prototype.js

@@ -0,0 +1,5 @@
+module.exports = {
+    article_callout_classes: '',
+    article_callout_title_text: 'Update',
+    article_callout_markup: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.'
+};

packages/larva-patterns/modules/article-callout/article-callout.twig

@@ -0,0 +1,3 @@
+<p class="article-callout larva // {{ article_callout_classes }}">
+        <span class="article-callout-title lrv-a-icon lrv-a-icon-after lrv-a-icon-vertical-pipe lrv-u-width-auto // {{ article_callout_primary_classes }}">{{ article_callout_title_text }}</span><span class="article-callout-text {{ article_callout_secondary_classes }}">{{ article_callout_markup|raw }}</span>
+</p>

packages/larva/build/svg/defs/sprite.defs.html

@@ -798,7 +798,7 @@ <h2>youtube</h2>
 
 		</section>
 		<footer>
-			<p>Generated at Tue, 29 Mar 2022 15:23:22 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
+			<p>Generated at Fri, 01 Apr 2022 12:43:38 GMT by <a href="https://github.com/jkphl/svg-sprite" target="_blank">svg-sprite</a>.</p>
 		</footer>
 	</body>
 </html>