Lint Test Fixes

.stylelintrc

@@ -3,7 +3,18 @@
 	"rules": {
 		"property-no-unknown": [
 			true, {
-				"ignoreProperties": ["container-type"]
+				"ignoreProperties": [
+					"container-type",
+					"container"
+				]
+			}
+		],
+		"at-rule-no-unknown": [
+			true, {
+				"ignoreAtRules": [
+					"container",
+					"mixin"
+				]
 			}
 		]
 	},

package.json

@@ -20,7 +20,8 @@
       "src/resources/js/**/*.js",
       "!src/resources/js/**/*.min.js",
       "!src/resources/js/app/**/*.js",
-      "!src/resources/js/utils/query-string.js"
+      "!src/resources/js/utils/query-string.js",
+      "!src/**/__tests__/**/*.js"
     ],
     "stylelint": [
       "src/resources/postcss/**/*.pcss",

src/modules/components/form/select/component.js

@@ -19,10 +19,10 @@ import './style.pcss';
 
 export default class Select extends PureComponent {
 	static propTypes = {
-		options: PropTypes.shape( {
-			label: PropTypes.string,
-			value: PropTypes.any,
-		} ),
+		options: PropTypes.arrayOf( PropTypes.shape( {
+			label: PropTypes.string.isRequired,
+			value: PropTypes.any.isRequired,
+		} ) ),
 		onOptionClick: PropTypes.func.isRequired,
 		optionClassName: PropTypes.string,
 		isOpen: PropTypes.bool.isRequired,

src/modules/elements/accordion/row/template.js

@@ -23,6 +23,7 @@ class Row extends PureComponent {
 		onClick: PropTypes.func,
 		onClose: PropTypes.func,
 		onOpen: PropTypes.func,
+		contentId: PropTypes.string,
 	};
 
 	static defaultProps = {

src/modules/elements/block-icon/index.js

@@ -9,8 +9,10 @@ import React from 'react';
 import { TEC } from '@moderntribe/common/icons';
 import './style.pcss';
 
-export default () => (
+const BlockIcon = () => (
 	<div className="tribe-editor__icons__container tribe-editor__icons--tec">
 		<TEC />
 	</div>
 );
+
+export default BlockIcon;

src/modules/elements/heading/element.js

@@ -27,6 +27,7 @@ const Heading = ( { level, children, className } ) => {
 Heading.propTypes = {
 	children: PropTypes.node.isRequired,
 	level: PropTypes.oneOf( [ 1, 2, 3, 4, 5, 6 ] ).isRequired,
+	className: PropTypes.string,
 };
 
 export default Heading;

src/modules/elements/image-upload/element.js

@@ -21,6 +21,7 @@ import { wpEditor } from '@moderntribe/common/utils/globals';
 import './style.pcss';
 const { MediaUpload } = wpEditor;
 
+// eslint-disable-next-line react/display-name, react/prop-types
 export const renderImageUploadButton = ( disabled, label ) => ( { open } ) => (
 	<Button
 		onClick={ open }

src/modules/elements/paragraph/element.js

@@ -32,6 +32,7 @@ const Paragraph = ( { children, size, className } ) => (
 Paragraph.propTypes = {
 	children: PropTypes.node.isRequired,
 	size: PropTypes.oneOf( Object.keys( SIZES ) ),
+	className: PropTypes.string,
 };
 
 Paragraph.defaultProps = {

src/modules/elements/placeholder/element.js

@@ -18,6 +18,7 @@ const Placeholder = ( { children, className } ) => (
 
 Placeholder.propTypes = {
 	children: PropTypes.node.isRequired,
+	className: PropTypes.string,
 };
 
 export default Placeholder;

src/modules/elements/url-input/element.js

@@ -20,6 +20,7 @@ const UrlInput = ( { checked, className, onChange, ...rest } ) => (
 );
 
 UrlInput.propTypes = {
+	checked: PropTypes.bool,
 	className: PropTypes.string,
 	onChange: PropTypes.func,
 };

src/resources/js/admin-image-field.js

@@ -89,7 +89,7 @@ tribe.settings.fields.image = {};
 		}
 
 		if ( $fieldParent.is( '[data-image-id=1]' ) ) {
-			 $fieldParent.find( obj.selectors.imgIdInput ).val( attachment.id );
+			$fieldParent.find( obj.selectors.imgIdInput ).val( attachment.id );
 		} else {
 			$fieldParent.find( obj.selectors.imgIdInput ).val( attachment.url );
 		}
@@ -174,4 +174,4 @@ tribe.settings.fields.image = {};
 
 	$( obj.init );
 
-} )( jQuery, tribe.settings.fields.image );
+} )( jQuery, tribe.settings.fields.image );

src/resources/js/dropdowns.js

@@ -1,4 +1,4 @@
-var tribe_dropdowns = window.tribe_dropdowns || {};
+window.tribe_dropdowns = window.tribe_dropdowns || {};
 
 ( function( $, obj, _ ) {
 	'use strict';
@@ -609,4 +609,4 @@ var tribe_dropdowns = window.tribe_dropdowns || {};
 		$( obj.selector.dropdown ).tribe_dropdowns();
 	});
 
-} )( jQuery, tribe_dropdowns, window.underscore || window._ );
+} )( jQuery, window.tribe_dropdowns, window.underscore || window._ );

src/resources/js/tec-a11y-dialog.js

@@ -1,15 +1,28 @@
-/* global NodeList, Element, define */
-
+/* eslint-disable no-undef */
 (function (global) {
 	'use strict';
 
-	var FOCUSABLE_ELEMENTS = ['a[href]', 'area[href]', 'input:not([disabled])', 'select:not([disabled])', 'textarea:not([disabled])', 'button:not([disabled])', 'iframe', 'object', 'embed', '[contenteditable]', '[tabindex]:not([tabindex^="-"])'];
+	var FOCUSABLE_ELEMENTS = [
+		'a[href]',
+		'area[href]',
+		'input:not([disabled])',
+		'select:not([disabled])',
+		'textarea:not([disabled])',
+		'button:not([disabled])',
+		'iframe',
+		'object',
+		'embed',
+		'[contenteditable]',
+		'[tabindex]:not([tabindex^="-"])',
+	];
 	var TAB_KEY = 9;
 	var ESCAPE_KEY = 27;
 	var focusedBeforeDialog;
 	var browser = browserTests();
 	var scroll = 0;
-	var scroller = browser.ie || browser.firefox || (browser.chrome && !browser.edge) ? document.documentElement : document.body;
+	var scroller = browser.ie || browser.firefox || (browser.chrome && !browser.edge)
+		? document.documentElement
+		: document.body;
 
 	/**
 	 * Define the constructor to instantiate a dialog
@@ -43,7 +56,9 @@
 		this._maintainFocus = this._maintainFocus.bind(this);
 		this._bindKeypress = this._bindKeypress.bind(this);
 
-		this.trigger = isString(this.options.trigger) ? getNodes(this.options.trigger, true, document, true) : this.options.trigger;
+		this.trigger = isString(this.options.trigger)
+			? getNodes(this.options.trigger, true, document, true)
+			: this.options.trigger;
 		this.node = null;
 
 		if (!this.trigger) {
@@ -88,14 +103,24 @@
 		if (!contentNode) {
 			return this;
 		}
-		var ariaDescribedBy = this.options.ariaDescribedBy ? 'aria-describedby="' + this.options.ariaDescribedBy + '" ' : '';
+		var ariaDescribedBy = this.options.ariaDescribedBy ?
+			'aria-describedby="' + this.options.ariaDescribedBy + '" '
+			: '';
 		var ariaLabel = this.options.ariaLabel ? 'aria-label="' + this.options.ariaLabel + '"' : '';
-		var ariaLabelledBy = this.options.ariaLabelledBy ? 'aria-labelledby="' + this.options.ariaLabelledBy + '"' : '';
+		var ariaLabelledBy = this.options.ariaLabelledBy ?
+			'aria-labelledby="' + this.options.ariaLabelledBy + '"'
+			: '';
 		var node = document.createElement('div');
 		node.setAttribute('aria-hidden', 'true');
 		node.classList.add(this.options.wrapperClasses);
-		node.innerHTML = '<div data-js="a11y-overlay" tabindex="-1" class="' + this.options.overlayClasses + '"></div>\n' +
-			'  <div class="' + this.options.contentClasses + '" role="dialog" aria-modal="true" ' + ariaLabelledBy + ariaDescribedBy + ariaLabel + '>\n' +
+		node.innerHTML = '<div ' +
+			'data-js="a11y-overlay" ' +
+			'tabindex="-1" ' +
+			'class="' + this.options.overlayClasses + '"></div>\n' +
+			'  <div ' +
+			'    class="' + this.options.contentClasses + '" ' +
+			'    role="dialog" ' +
+			'    aria-modal="true" ' + ariaLabelledBy + ariaDescribedBy + ariaLabel + '>\n' +
 			'    <div role="document">\n' +
 			'      <button ' +
 			'           data-js="a11y-close-button"' +
@@ -342,7 +367,8 @@
 		}, 50);
 		if (this.options.effect === 'fade') {
 			this.node.style.opacity = '0';
-			this.node.style.transition = 'opacity ' + this.options.effectSpeed + 'ms ' + this.options.effectEasing;
+			this.node.style.transition = 'opacity ' + this.options.effectSpeed +
+				'ms ' + this.options.effectEasing;
 			setTimeout(function() {
 				_this.node.style.opacity = '1';
 			}, 50);
@@ -387,10 +413,13 @@
 	}
 
 	/**
-	 * Should be used at all times for getting nodes throughout our app. Please use the data-js attribute whenever possible
+	 * Should be used at all times for getting nodes throughout our app. Please use the data-js
+	 * attribute whenever possible.
 	 *
-	 * @param selector The selector string to search for. If arg 4 is false (default) then we search for [data-js="selector"]
-	 * @param convert Convert the NodeList to an array? Then we can Array.forEach directly. Uses convertElements from above
+	 * @param selector The selector string to search for. If arg 4 is false (default) then we
+	 *                 search for [data-js="selector"]
+	 * @param convert Convert the NodeList to an array? Then we can Array.forEach directly.
+	 *                Uses convertElements from above
 	 * @param node Parent node to search from. Defaults to document
 	 * @param custom Is this a custom selector where we don't want to use the data-js attribute?
 	 * @returns {NodeList}

src/resources/js/utils/tec-copy-to-clipboard.js

@@ -1,3 +1,5 @@
+/* global tribeCopyToClipboard */
+
 tribe.copyToClipboard = tribe.copyToClipboard || {};
 
 ( function ( $, obj ) {

src/resources/postcss/base/full/typography/_anchors.pcss

@@ -1,18 +1,18 @@
 .tribe-common {
 
 	a:not(.tribe-common-anchor--unstyle) {
-		 color: var(--tec-color-text-primary);
-		 outline: 0;
-		 text-decoration: none;
-
-		 &:hover,
-		 &:focus,
-		 &:active,
-		 &:visited {
-			 color: var(--tec-color-text-primary);
-			 outline: 0;
-			 text-decoration: none;
-		 }
+		color: var(--tec-color-text-primary);
+		outline: 0;
+		text-decoration: none;
+
+		&:hover,
+		&:focus,
+		&:active,
+		&:visited {
+			color: var(--tec-color-text-primary);
+			outline: 0;
+			text-decoration: none;
+		}
 
 		&:focus {
 			outline: auto;

src/resources/postcss/dialog.pcss

@@ -155,11 +155,11 @@ This can include modals, toasters, confirms. alerts.
 
 	.tribe-dialog__content .tribe-dialog__content__wrapper {
 		&.tribe-dialog__content__wrapper--centered {
+			align-items: center;
 			display: flex;
-			min-height: 145px;
 			height: 100%;
 			justify-content: center;
-			align-items: center;
+			min-height: 145px;
 		}
 	}
 

src/resources/postcss/resets/skeleton/_reset.pcss

@@ -1,7 +1,6 @@
 .tribe-common {
 	-webkit-font-smoothing: antialiased;
 	-moz-osx-font-smoothing: grayscale;
-	font-smoothing: antialiased;
 
 	/* -----------------------------------------------------------------------------
 	 *

src/resources/postcss/tribe-common-admin/_main.pcss

@@ -1142,7 +1142,7 @@ p.tribe-update-message {
 
 .tribe_update_page h4:before {
 	content: '\f145';
-	font-family: dashicons;
+	font-family: dashicons, serif;
 	font-size: 34px;
 	line-height: 1;
 	margin-right: 5px;
@@ -1646,7 +1646,7 @@ a.tribe-rating-link {
 	padding-right: 0;
 
 	&.tribe-notice-stellar-sale-2024 {
-		background-color: #1D202F;
+		background-color: #1d202f;
 		overflow: hidden;
 
 		@media screen and (max-width: 767px) {
@@ -1671,8 +1671,8 @@ a.tribe-rating-link {
 		.notice-dismiss {
 			&:before {
 				content: "X";
-				font-size: 30px;
 				font-family: inherit;
+				font-size: 30px;
 				font-weight: 300;
 				position: absolute;
 				right: 20px;
@@ -1698,7 +1698,8 @@ a.tribe-rating-link {
 				padding: 30px 0 10px 25px;
 			}
 
-			h3, h4 {
+			h3,
+			h4 {
 				color: #fff;
 			}
 
@@ -1724,8 +1725,8 @@ a.tribe-rating-link {
 				color: #fff;
 				font-size: 14px;
 				font-weight: 400;
-				line-height: 22px;
 				letter-spacing: 1px;
+				line-height: 22px;
 				margin: 0 0 20px;
 			}
 
@@ -1738,8 +1739,8 @@ a.tribe-rating-link {
 
 			.tribe-marketing-notice__cta-shop-now {
 				a {
-					background-color: #3849F5;
-					border: 1px solid #3849F5;
+					background-color: #3849f5;
+					border: 1px solid #3849f5;
 					border-radius: 125px;
 					color: #fff;
 					font-family: 'Inconsolata', monospace; /* todo: enqueue font */
@@ -1772,8 +1773,8 @@ a.tribe-rating-link {
 					&:focus,
 					&:focus-within,
 					&:hover {
-						color: #1c39bb;
 						box-shadow: none;
+						color: #1c39bb;
 						outline: none;
 					}
 				}