@penskemediacorp/larva-patterns 1.60.1-alpha.0 → 1.62.0

package/_data/social-platforms.json

@@ -0,0 +1,66 @@
+[
+	{
+		"name": "email",
+		"label": "Email"
+	},
+	{
+		"name": "facebook",
+		"label": "Facebook"
+	},
+	{
+		"name": "facebook-circle",
+		"label": "Facebook"
+	},
+	{
+		"name": "flipboard",
+		"label": "Fliboard"
+	},
+	{
+		"name": "instagram",
+		"label": "Instagram"
+	},
+	{
+		"name": "linkedin",
+		"label": "LinkedIn"
+	},
+	{
+		"name": "mastodon",
+		"label": "Mastodon"
+	},
+	{
+		"name": "pinit",
+		"label": "Pinterest"
+	},
+	{
+		"name": "print",
+		"label": "Print"
+	},
+	{
+		"name": "reddit",
+		"label": "Reddit"
+	},
+	{
+		"name": "threads",
+		"label": "Threads"
+	},
+	{
+		"name": "tiktok",
+		"label": "Tiktok"
+	},
+	{
+		"name": "tumblr",
+		"label": "Tumblr"
+	},
+	{
+		"name": "twitch",
+		"label": "Twitch"
+	},
+	{
+		"name": "twitter",
+		"label": "X"
+	},
+	{
+		"name": "youtube",
+		"label": "YouTube"
+	}
+]

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

@@ -1,20 +1,24 @@
 {% if c_icon_url %}
-<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>
+	<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 %}
+		{% if c_icon_screen_reader_title_attr %}
+			title="{{ c_icon_screen_reader_title_attr }}"
+		{% endif %}
+	>
+
+	<span class="lrv-a-screen-reader-only" data-label="c_icon_link_screen_reader_text">{{ 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 }}>
+		<{{ c_icon_screen_reader_tag_text }} class="lrv-a-screen-reader-only" data-label="c_icon_screen_reader_text">{{ 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>
+		<span class="lrv-a-screen-reader-only" data-label="c_icon_screen_reader_text">{{ c_icon_screen_reader_text }}</span>
 	{% endif %}
 {% endif %}
 
@@ -30,5 +34,5 @@
 </svg>
 
 {% if c_icon_url %}
-</a>
+	</a>
 {% endif %}

package/modules/author-blurb/author-blurb.prototype.js

@@ -32,19 +32,22 @@ c_tagline.c_tagline_text =
 
 o_social_list.o_social_list_classes += ' lrv-u-flex';
 
-const social = [ 'instagram', 'twitter', 'facebook', 'youtube' ];
+const socialPlatforms = require( '../../utils/getSocialPlatforms' )( [ 'instagram', 'twitter', 'facebook', 'youtube' ] );
 const o_social_list_icons = [];
 
-for ( let i = 0; i < social.length; i++ ) {
+socialPlatforms.forEach( ( { name, label } ) => {
 	const c_icon = clonedeep( c_icon_prototype );
 
-	c_icon.c_icon_name = social[ i ];
+	c_icon.c_icon_name = name;
 	c_icon.c_icon_link_classes +=
 		' lrv-u-display-block lrv-u-border-radius-50p lrv-u-padding-a-025 lrv-u-color-grey lrv-u-background-color-white lrv-u-color-grey-dark:hover lrv-u-margin-r-1';
 	c_icon.c_icon_url = '#';
+	c_icon.c_icon_screen_reader_text = label;
+	c_icon.c_icon_screen_reader_title_attr = label;
 
 	o_social_list_icons.push( c_icon );
-}
+} );
+
 o_social_list.o_social_list_icons = o_social_list_icons;
 
 module.exports = {

package/modules/author-details/author-details.prototype.js

@@ -47,15 +47,17 @@ c_icon_twitter.c_icon_name = 'twitter';
 c_icon_twitter.c_icon_classes =
 	'lrv-u-width-16 lrv-u-height-16 lrv-u-color-black';
 c_icon_twitter.c_icon_url = '#';
-c_icon_twitter.c_icon_screen_reader_text = 'Twitter Icon';
-c_icon_twitter.c_icon_screen_reader_title_attr = 'Twitter Icon';
+c_icon_twitter.c_icon_link_screen_reader_text = 'X Icon';
+c_icon_twitter.c_icon_screen_reader_text = false;
+c_icon_twitter.c_icon_screen_reader_title_attr = 'X Icon';
 c_icon_twitter.c_icon_link_classes = 'lrv-u-flex';
 
 c_icon_mail.c_icon_name = 'envelope';
 c_icon_mail.c_icon_classes =
 	'lrv-u-margin-l-075 lrv-u-width-16 lrv-u-height-16 lrv-u-color-black';
 c_icon_mail.c_icon_url = '#';
-c_icon_mail.c_icon_screen_reader_text = 'Email Icon';
+c_icon_mail.c_icon_link_screen_reader_text = 'Email Icon';
+c_icon_mail.c_icon_screen_reader_text = false;
 c_icon_mail.c_icon_screen_reader_title_attr = 'Email Icon';
 c_icon_mail.c_icon_link_classes = 'lrv-u-flex';
 

package/modules/footer-social/footer-social.prototype.js

@@ -21,22 +21,24 @@ c_tagline.c_tagline_classes =
 c_tagline.c_tagline_text =
 	'Get our latest stories in the feed of your favorite networks';
 
-const social = [ 'instagram', 'pinit', 'twitter', 'facebook', 'youtube' ];
+const socialPlatforms = require( '../../utils/getSocialPlatforms' )();
 
 // Clear existing icons, update classes
 o_social_list.o_social_list_icons = [];
 o_social_list.o_social_list_classes =
 	'lrv-a-unstyle-list lrv-u-flex lrv-u-align-items-center lrv-u-justify-content-center';
 
-for ( let i = 0; i < social.length; i++ ) {
+socialPlatforms.forEach( ( { name, label } ) => {
 	const c_icon = clonedeep( c_icon_prototype );
 	c_icon.c_icon_url = '#';
-	c_icon.c_icon_name = social[ i ];
+	c_icon.c_icon_name = name;
 	c_icon.c_icon_link_classes +=
 		' lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover';
+	c_icon.c_icon_screen_reader_text = label;
+	c_icon.c_icon_screen_reader_title_attr = label;
 
 	o_social_list.o_social_list_icons.push( c_icon );
-}
+} );
 
 module.exports = {
 	footer_social_classes:

package/modules/header-sticky/header-sticky.article.js

@@ -15,18 +15,22 @@ read_next.c_title.c_title_link_classes =
 	'lrv-a-unstyle-link lrv-u-whitespace-nowrap lrv-a-font-body-m';
 
 const o_social_list = clonedeep( o_social_list_prototype );
-const social_icons = [ 'facebook-rs', 'twitter', 'email' ];
+
+const socialPlatforms = require( '../../utils/getSocialPlatforms' )( [ 'facebook', 'twitter', 'email' ] );
+
 const social_list_icons = [];
 o_social_list.o_social_list_icons = [];
-for ( let i = 0; i < social_icons.length; i++ ) {
+socialPlatforms.forEach( ( { name, label } ) => {
 	const c_icon = clonedeep( c_icon_prototype );
-	c_icon.c_icon_name = social_icons[ i ];
+	c_icon.c_icon_name = name;
 	c_icon.c_icon_url = '#';
 	c_icon.c_icon_link_classes +=
 		'lrv-u-background-color-white lrv-u-border-radius-50p lrv-u-color-black lrv-u-color-brand-primary:hover lrv-u-display-block';
 	c_icon.c_icon_rel_name = 'noopener noreferrer';
+	c_icon.c_icon_screen_reader_text = label;
+	c_icon.c_icon_screen_reader_title_attr = label;
 	social_list_icons.push( c_icon );
-}
+} );
 o_social_list.o_social_list_icons = social_list_icons;
 
 const header_sticky = clonedeep( header_sticky_prototype );

package/modules/social-share/social-share.prototype.js

@@ -3,15 +3,10 @@ const clonedeep = require( 'lodash.clonedeep' );
 const c_icon = clonedeep(
 	require( '../../components/c-icon/c-icon.prototype' )
 );
-const social_share_primary_items = [
-	'facebook',
-	'twitter',
-	'pinterest',
-	'tumblr',
-	'reddit',
-	'linkedin',
-	'print',
-];
+
+const socialPlatforms = require( '../../utils/getSocialPlatforms' )( [
+	'facebook', 'twitter', 'pinit', 'tumblr', 'reddit', 'linkedin', 'print'
+] );
 
 const social_share_primary = [];
 const social_share_secondary = [];
@@ -22,11 +17,13 @@ c_icon_struct.c_icon_link_classes =
 c_icon_struct.c_icon_url = '#';
 c_icon_struct.c_icon_classes = 'lrv-u-width-16 lrv-u-height-16';
 
-for ( let i = 0; i < social_share_primary_items.length; i++ ) {
+for ( let i = 0; i < socialPlatforms.length; i++ ) {
 	const c_icon_social = clonedeep( c_icon_struct );
 
-	c_icon_social.c_icon_rel_name = social_share_primary_items[ i ];
-	c_icon_social.c_icon_name = social_share_primary_items[ i ];
+	c_icon_social.c_icon_rel_name = socialPlatforms[ i ].name;
+	c_icon_social.c_icon_name = socialPlatforms[ i ].name;
+	c_icon_social.c_icon_screen_reader_text = socialPlatforms[ i ].label;
+	c_icon_social.c_icon_screen_reader_title_attr = socialPlatforms[ i ].label;
 
 	if ( 3 < i ) {
 		social_share_primary.push( c_icon_social );

package/objects/o-social-list/o-social-list.prototype.js

@@ -2,20 +2,22 @@ const clonedeep = require( 'lodash.clonedeep' );
 
 const c_icon_prototype = require( '../../components/c-icon/c-icon.prototype' );
 
-const social = [ 'instagram', 'pinit', 'twitter', 'facebook', 'youtube' ];
+const socialPlatforms = require( '../../utils/getSocialPlatforms' )();
 const o_social_list_icons = [];
 
-for ( let i = 0; i < social.length; i++ ) {
+socialPlatforms.forEach( ( { name, label } ) => {
 	const c_icon = clonedeep( c_icon_prototype );
 
 	c_icon.c_icon_url = '#';
-	c_icon.c_icon_name = social[ i ];
+	c_icon.c_icon_name = name;
 	c_icon.c_icon_link_classes +=
 		' lrv-u-display-block lrv-u-border-radius-50p lrv-u-color-grey lrv-u-margin-lr-050 lrv-u-padding-a-050 lrv-u-background-color-white lrv-u-color-grey-dark:hover';
 	c_icon.c_icon_rel_name = 'noopener noreferrer';
+	c_icon.c_icon_screen_reader_text = label;
+	c_icon.c_icon_screen_reader_title_attr = label;
 
 	o_social_list_icons.push( c_icon );
-}
+} );
 
 module.exports = {
 	o_social_list_classes: 'lrv-a-unstyle-list',

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@penskemediacorp/larva-patterns",
-  "version": "1.60.1-alpha.0",
+  "version": "1.62.0",
   "description": "Larva markup patterns.",
   "author": "laras126 <laras126@gmail.com>",
   "homepage": "https://github.com/Penske-Media-Corp/pmc-larva/tree/master/packages/patterns#readme",
@@ -20,10 +20,10 @@
     "url": "https://github.com/Penske-Media-Corp/pmc-larva/issues"
   },
   "dependencies": {
-    "@penskemediacorp/larva-css": "^1.60.1-alpha.0",
-    "@penskemediacorp/larva-js": "^1.60.1-alpha.0",
-    "@penskemediacorp/larva-svg": "^1.60.1-alpha.0",
+    "@penskemediacorp/larva-css": "^1.62.0",
+    "@penskemediacorp/larva-js": "^1.62.0",
+    "@penskemediacorp/larva-svg": "^1.62.0",
     "lodash.clonedeep": "^4"
   },
-  "gitHead": "dd87a592e9f55e1283f6509ecd75147fdab552db"
+  "gitHead": "98f814d7a39a0f7ca6e1b2ed4c928e8604a1001f"
 }

package/utils/getDataSet.js

@@ -0,0 +1,24 @@
+/**
+ * Helper function to get larva-patterns/_data array by property
+ *
+ * @param {String} filename    JSON filenames in ../_data.
+ * @param {String} orderKey    Object property name to sort/order by.
+ * @param {Array}  orderValues Desired items from data file(s) (by orderKey property).
+ */
+module.exports = function( filename, orderKey, orderValues ) {
+	const data = require( `../_data/${ filename }.json` );
+
+	if ( orderKey && orderValues ) {
+		const sortedData = [];
+
+		orderValues.forEach( ( orderValue ) => {
+			sortedData.push(
+				data.find( ( values ) => values[ orderKey ] === orderValue )
+			);
+		} );
+
+		return sortedData;
+	} else {
+		return data;
+	}
+};

package/utils/getSocialPlatforms.js

@@ -0,0 +1,10 @@
+/**
+ * Get social platform information
+ *
+ * @param {Array} platforms "name" property values of desired platforms (see ../_data/social-platforms.json).
+ */
+module.exports = function( platforms ) {
+	return require( './getDataSet' )( 'social-platforms', 'name',
+		undefined === platforms ? [ 'instagram', 'pinit', 'twitter', 'facebook', 'youtube' ] : platforms
+	);
+}