chore(deps): update Aetna and Pressbooks Build Tools (#349)

* chore(deps): update Aetna and Pressbooks Build Tools

* fix: lint styles

* ci: add Node 16 to matrix

* chore(deps): bump Aetna to 1.0.1

.github/workflows/build-and-lint.yml

@@ -11,7 +11,7 @@ jobs:
     runs-on: ubuntu-latest
     strategy:
       matrix:
-        node: [ '14' ]
+        node: [ '14', '16' ]
     name: Node ${{ matrix.node }}
 
     steps:

assets/scripts/call-to-action.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 ( function () {
 	tinymce.create( 'tinymce.plugins.aldine_call_to_action', {
 		/**

assets/scripts/page-section.js

@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 ( function () {
 	tinymce.create( 'tinymce.plugins.aldine_page_section', {
 		/**

assets/scripts/routes/catalog.js

@@ -15,7 +15,7 @@ export default {
 				// Give each <h3> a toggle button child
 				heading.innerHTML = `
 				<button type="button" aria-expanded="false">
-					${heading.textContent}
+					${ heading.textContent }
 					<svg aria-hidden="true" focusable="false" class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
 				</button>
 			  `;
@@ -85,7 +85,7 @@ export default {
 				// Give each <h3> a toggle button child
 				heading.innerHTML = `
 				<button type="button" aria-expanded="false">
-					${heading.innerHTML}
+					${ heading.innerHTML }
 					<svg class="arrow" width="13" height="8" viewBox="0 0 13 8" xmlns="http://www.w3.org/2000/svg"><path d="M6.255 8L0 0h12.51z" fill="currentColor" fill-rule="evenodd"></path></svg>
 				</button>
 			  `;
@@ -175,16 +175,16 @@ export default {
 				}
 
 				const subject = subjects.querySelector( 'input[type="radio"]:checked' ).value
-					? `[data-subject="${subjects.querySelector( 'input[type="radio"]:checked' ).value}"]`
+					? `[data-subject="${ subjects.querySelector( 'input[type="radio"]:checked' ).value }"]`
 					: '';
 				const institution = institutions.querySelector( 'input[type="radio"]:checked' ).value
-					? `[data-institution*="${institutions.querySelector( 'input[type="radio"]:checked' ).value}"]`
+					? `[data-institution*="${ institutions.querySelector( 'input[type="radio"]:checked' ).value }"]`
 					: '';
 				const license = event.target.value
-					? `[data-license="${event.target.value}"]`
+					? `[data-license="${ event.target.value }"]`
 					: '';
 
-				const filterValue = subject || license || institution ? `${subject}${license}${institution}` : '*';
+				const filterValue = subject || license || institution ? `${ subject }${ license }${ institution }` : '*';
 
 				$grid.isotope( { filter: filterValue } );
 			} );
@@ -194,16 +194,16 @@ export default {
 				}
 
 				const subject = subjects.querySelector( 'input[type="radio"]:checked' ).value
-					? `[data-subject="${subjects.querySelector( 'input[type="radio"]:checked' ).value}"]`
+					? `[data-subject="${ subjects.querySelector( 'input[type="radio"]:checked' ).value }"]`
 					: '';
 				const license = licenses.querySelector( 'input[type="radio"]:checked' ).value
-					? `[data-license="${licenses.querySelector( 'input[type="radio"]:checked' ).value}"]`
+					? `[data-license="${ licenses.querySelector( 'input[type="radio"]:checked' ).value }"]`
 					: '';
 				const institution = event.target.value
-					? `[data-institution*="${event.target.value}"]`
+					? `[data-institution*="${ event.target.value }"]`
 					: '';
 
-				const filterValue = subject || license || institution ? `${subject}${license}${institution}` : '*';
+				const filterValue = subject || license || institution ? `${ subject }${ license }${ institution }` : '*';
 
 				$grid.isotope( { filter: filterValue } );
 			} );
@@ -213,16 +213,16 @@ export default {
 				}
 
 				const license = licenses.querySelector( 'input[type="radio"]:checked' ).value
-					? `[data-license="${licenses.querySelector( 'input[type="radio"]:checked' ).value}"]`
+					? `[data-license="${ licenses.querySelector( 'input[type="radio"]:checked' ).value }"]`
 					: '';
 				const institution = institutions.querySelector( 'input[type="radio"]:checked' ).value
-					? `[data-institution*="${institutions.querySelector( 'input[type="radio"]:checked' ).value}"]`
+					? `[data-institution*="${ institutions.querySelector( 'input[type="radio"]:checked' ).value }"]`
 					: '';
 				const subject = event.target.value
-					? `[data-subject="${event.target.value}"]`
+					? `[data-subject="${ event.target.value }"]`
 					: '';
 
-				const filterValue = subject || license || institution ? `${subject}${license}${institution}` : '*';
+				const filterValue = subject || license || institution ? `${ subject }${ license }${ institution }` : '*';
 
 				$grid.isotope( { filter: filterValue } );
 			} );

assets/scripts/util/camelCase.js

@@ -5,9 +5,9 @@
  * @returns {string} String converted to camel-case, e.g., camelCaseIsHard
  */
 export default str =>
-	`${str.charAt( 0 ).toLowerCase()}${str
+	`${ str.charAt( 0 ).toLowerCase() }${ str
 		.replace( /[\W_]/g, '|' )
 		.split( '|' )
-		.map( part => `${part.charAt( 0 ).toUpperCase()}${part.slice( 1 )}` )
+		.map( part => `${ part.charAt( 0 ).toUpperCase() }${ part.slice( 1 ) }` )
 		.join( '' )
-		.slice( 1 )}`;
+		.slice( 1 ) }`;

assets/styles/aldine.scss

@@ -6,7 +6,7 @@
  * Prefix your imports with `~` to grab from node_modules/
  * @see https://github.com/webpack-contrib/sass-loader#imports
  */
-@import "~aetna/assets/styles/aetna.scss";
+@import "~aetna/assets/styles/aetna";
 
 /** Import theme styles */
 @import "common/global";

assets/styles/components/_book.scss

@@ -8,6 +8,7 @@
   margin: 0 0 2rem;
   padding: 1.5rem 1rem 2rem;
   @media #{$breakpoint-not-small} { padding: 1.5rem 1.85rem 2.1875rem; }
+
   border: solid 2px var(--accent);
   background: var(--accent);
 
@@ -27,6 +28,7 @@
     margin: 0;
     font-size: 1.25rem;
     @media #{$breakpoint-not-small} { font-size: 1.75rem; }
+
     font-weight: 500;
     line-height: 1.2;
     text-align: left;
@@ -38,14 +40,15 @@
     @media #{$breakpoint-not-small} {
       font-size: 1rem;
     }
+
     text-align: left;
   }
 
   &__institutions {
-    margin: .5rem 0 0 0;
+    margin: .5rem 0 0;
     font-size: 0.875rem;
     text-align: left;
-    display: -webkit-box;
+    display: box;
     overflow: hidden;
     -webkit-line-clamp: 2;
     -webkit-box-orient: vertical;
@@ -55,6 +58,7 @@
     margin: auto 0 0;
     font-size: 1rem;
     @media #{$breakpoint-not-small} { font-size: 1.125rem; }
+
     text-align: left;
 
     a {
@@ -66,6 +70,7 @@
           height: 1.125rem;
           margin-left: 0.5rem;
         }
+
         vertical-align: middle;
       }
     }

assets/styles/components/_forms.scss

@@ -23,8 +23,7 @@ textarea {
   font-weight: 600;
   font-family: $font-family-sans-serif;
   background: transparent;
-  -webkit-appearance: none;
-  -moz-appearance: none;
+  appearance: none;
 
   &:focus {
     outline: none;
@@ -88,6 +87,7 @@ input[type="submit"] {
           font-size: 0.75rem;
         }
       }
+
       &.error {
         border-bottom: solid 2px var(--error);
 

assets/styles/editor.scss

@@ -1,8 +1,10 @@
-@import '~aetna/assets/styles/common/_variables.scss';
-@import '~aetna/assets/styles/common/_global.scss';
+@import '~aetna/assets/styles/common/variables';
+@import '~aetna/assets/styles/common/global';
 
 body#tinymce {
   margin: 12px !important;
-  @import '~aetna/assets/styles/components/_buttons.scss';
-  @import '~aetna/assets/styles/layouts/_page-sections.scss';
+  /* stylelint-disable no-invalid-position-at-import-rule */
+  @import '~aetna/assets/styles/components/buttons';
+  @import '~aetna/assets/styles/layouts/page-sections';
+  /* stylelint-enable */
 }

assets/styles/layouts/_header.scss

@@ -12,6 +12,7 @@
 
   @media #{$breakpoint-large} {
     height: 880px;
+
     .header__inside {
       position: relative;
       z-index: 99;
@@ -47,6 +48,7 @@
       line-height: 1.25em;
       margin-top: 1.5em;
     }
+
     margin-bottom: 0;
     text-align: center;
     max-width: 100%;
@@ -58,6 +60,7 @@
     @media #{$breakpoint-large} {
       font-size: 2rem;
     }
+
     margin-top: 0;
     margin-bottom: 0;
     text-align: center;

assets/styles/layouts/_page-catalog.scss

@@ -12,7 +12,7 @@ fieldset {
     text-align: left;
     text-transform: none;
 
-    &:before {
+    &::before {
       display: none;
     }
 
@@ -127,6 +127,7 @@ fieldset {
     padding: 0;
     margin: 2rem 0 1rem 1rem;
   }
+
   .book {
     height: 14.375rem;
     width: calc(50% - 1rem);
@@ -224,12 +225,12 @@ fieldset {
 
     .subject-groups {
       width: calc(100% + 0.125rem);
-      margin-left: -0.06125rem;
+      margin-left: -0.0612rem;
 
       div {
         position: relative;
         width: calc(100% + 0.125rem);
-        margin-left: -0.06125rem;
+        margin-left: -0.0612rem;
         border-bottom: 0;
       }
     }

assets/styles/layouts/_page-home.scss

@@ -74,6 +74,7 @@
       width: calc(100vw - 5.125rem);
       max-width: 75rem;
     }
+
     .books {
       flex-direction: row;
       justify-content: center;
@@ -93,6 +94,7 @@
     .previous,
     .next {
       width: rem(32);
+
       svg {
         width: rem(32);
         height: rem(32);

assets/styles/layouts/_signup.scss

@@ -1,6 +1,7 @@
 .wp-activate-container,
 .mu_register.wp-signup-container {
    @extend .page-section;
+
    margin: rem(120) auto 4rem;
 
    * {

dist/mix-manifest.json

@@ -1,19 +1,19 @@
 {
-    "/scripts/aldine.js": "/scripts/aldine.js?id=f7e0ad5cfcc135b918f6",
-    "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=33370b66c7af12320fc0",
-    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=e8d84fb090536b8e49e9",
-    "/scripts/customizer.js": "/scripts/customizer.js?id=14dca3944228dd789c27",
-    "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=c31594589675d7c5662a",
-    "/scripts/page-section.js": "/scripts/page-section.js?id=19d5c30146ea1a763bcf",
-    "/styles/editor.css": "/styles/editor.css?id=b7c2449babe566571767",
-    "/styles/aldine.css": "/styles/aldine.css?id=8d3bfb61118a9ee435a1",
-    "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff?id=2a7aae81673f4707bbe7",
-    "/images/banner.jpg": "/images/banner.jpg?id=04a813e0b4f94ddfef19",
-    "/images/catalog-header.jpg": "/images/catalog-header.jpg?id=223b9f7a23985f2a72df",
-    "/images/header.jpg": "/images/header.jpg?id=c6712212b6aa749cf1cf",
-    "/images/left-arrow.svg": "/images/left-arrow.svg?id=91d479e2d001857a3ee4",
-    "/images/logo.svg": "/images/logo.svg?id=d71cb98d33ef823ffd27",
-    "/images/pb.svg": "/images/pb.svg?id=c08fb158c15a470648a7",
-    "/images/right-arrow.svg": "/images/right-arrow.svg?id=ee2d7230318ea54ae20b",
-    "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png?id=ee68b73409979a929440"
+    "/scripts/aldine.js": "/scripts/aldine.js?id=9a92306ccdc10e63f9f74ea17764c5f6",
+    "/scripts/call-to-action.js": "/scripts/call-to-action.js?id=33370b66c7af12320fc0e1250f6be399",
+    "/scripts/catalog-admin.js": "/scripts/catalog-admin.js?id=2bc3bfa90831ab142ee9ebeb14ddab3c",
+    "/scripts/customizer.js": "/scripts/customizer.js?id=14dca3944228dd789c27c772d55bf471",
+    "/scripts/customizer-toggle.js": "/scripts/customizer-toggle.js?id=c31594589675d7c5662aaddcf7a9669a",
+    "/scripts/page-section.js": "/scripts/page-section.js?id=19d5c30146ea1a763bcf2bd733a75e77",
+    "/styles/editor.css": "/styles/editor.css?id=3fd7086e0f2bcacabc5152bf57ca90ca",
+    "/styles/aldine.css": "/styles/aldine.css?id=45e9d79c2620145986f1572789ea60fa",
+    "/fonts/pressbooks-theme.woff": "/fonts/pressbooks-theme.woff?id=2a7aae81673f4707bbe78c8f12b72b64",
+    "/images/banner.jpg": "/images/banner.jpg?id=04a813e0b4f94ddfef1951557166e417",
+    "/images/catalog-header.jpg": "/images/catalog-header.jpg?id=223b9f7a23985f2a72df72e4e4a2ffdc",
+    "/images/header.jpg": "/images/header.jpg?id=c6712212b6aa749cf1cf1f077c679f9f",
+    "/images/left-arrow.svg": "/images/left-arrow.svg?id=91d479e2d001857a3ee46691c0187854",
+    "/images/logo.svg": "/images/logo.svg?id=d71cb98d33ef823ffd27b15ae07e723a",
+    "/images/pb.svg": "/images/pb.svg?id=c08fb158c15a470648a74591e1fc94a4",
+    "/images/right-arrow.svg": "/images/right-arrow.svg?id=ee2d7230318ea54ae20bd9d5fd96efd6",
+    "/images/yt_icon_mono_dark.png": "/images/yt_icon_mono_dark.png?id=ee68b73409979a92944025ae95a18011"
 }

dist/scripts/aldine.js.LICENSE.txt

@@ -15,7 +15,7 @@
  */
 
 /*!
- * Masonry v4.2.1
+ * Masonry v4.2.2
  * Cascading grid layout library
  * https://masonry.desandro.com
  * MIT License

package.json

@@ -55,26 +55,30 @@
 		"assets/scripts/routes/common.js"
 	],
 	"stylelint": {
-		"extends": "./node_modules/pressbooks-build-tools/config/stylelint.js"
+		"extends": "./node_modules/pressbooks-build-tools/config/stylelint.js",
+		"rules": {
+			"scss/at-extend-no-missing-placeholder": null
+		}
 	},
 	"scripts": {
-		"watch": "mix watch",
-		"build": "npm run production",
+		"build": "mix",
+		"lint:scripts": "eslint \"assets/scripts/**/*.js\"",
+		"lint:styles": "stylelint \"assets/styles/**/*.scss\"",
+		"lint": "run-s lint:*",
 		"production": "mix --production",
 		"rmdist": "rimraf dist",
-		"test": "npm run -s lint",
-		"lint": "npm run -s lint:scripts && npm run -s lint:styles",
-		"lint:scripts": "eslint \"assets/scripts/**/*.js\"",
-		"lint:styles": "stylelint \"assets/styles/**/*.scss\" --syntax scss"
+		"start": "mix watch",
+		"test": "npm run lint"
 	},
 	"engines": {
 		"node": ">= 14"
 	},
 	"devDependencies": {
-		"pressbooks-build-tools": "^3.0.1"
+		"npm-run-all": "^4.1.5",
+		"pressbooks-build-tools": "^4.0.0"
 	},
 	"dependencies": {
-		"aetna": "^1.0.0-alpha.27",
+		"aetna": "^1.0.0",
 		"isotope-layout": "^3.0.6",
 		"jquery-bridget": "^3.0.1"
 	}