Make queso-ified templates the default

CHANGELOG.md

@@ -10,6 +10,15 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Removed
 ### Fixed
 
+## [4.0.0] - 2021-03-16
+### Changed
+- `templates/__common__/_package.json` - bump version of `queso-ui`
+- `templates/feature/app/index.html` - changed ad inputs, added comments, set variable for feature data
+- `templates/feature/app/templates/macros/processors.html` - added CSS classes to list component, fixed ad component inputs (to allow us to process ads fetched in the ArchieML text)
+
+### Removed
+- Old common `typography.scss` and `prose.html`, feature `index.html`, `main.scss` and `processors.html` files were replaced by the `queso-ui` versions.
+
 ## [3.7.0] - 2021-03-16
 ### Changed
 - `templates/graphic/project.config.js` - Adds new key for adding customization to the parsing step. For now the only one there is one to ignore Apple News for specified files. Adds some placeholder tags to tag our graphics also. (Tags will be included in the graphic metadata.)

package.json

@@ -1,6 +1,6 @@
 {
   "name": "@data-visuals/create",
-  "version": "3.7.0",
+  "version": "4.0.0",
   "description": "Create graphics and features the Data Visuals way.",
   "scripts": {
     "build:docs": "doctoc README.md --github",

templates/__common__/_package.json

@@ -79,7 +79,7 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@newswire/frames": "^0.3.1",
-    "@texastribune/queso-ui": "^9.4.2",
+    "@texastribune/queso-ui": "^10.0.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.7",
     "d3": "^5.0.0",

templates/__common__/app/styles/_typography.scss

@@ -1,118 +1,58 @@
-.article-header {
-  margin-bottom: $gutter;
-}
-
-// The article's title.
-.article-title {
-  font-family: $font-serif;
+// Overrides of some queso helpers
+// and additional data visuals helpers
+.t-headline {
   font-size: to-rem(24);
-  font-weight: $font-weight-bold;
-  line-height: $line-height-title;
-  margin-bottom: 0.625em;
-  margin-left: auto;
-  margin-right: auto;
   margin-top: 1em;
-  max-width: 20em;
-
   @include mq($from: s) {
     font-size: to-rem(28);
-    margin-bottom: 0.25rem;
   }
-
   @include mq($from: m) {
     font-size: to-rem(32);
   }
 }
 
-.article-byline {
-  color: $color-grey;
-  font-family: $font-sans-serif;
-  font-size: to-rem(14);
-  letter-spacing: 0.04em;
-  margin-bottom: 1em;
-  margin-top: 1em;
-  text-transform: uppercase;
-
-  a {
-    @include default-uppercase-link;
-  }
-}
-
-.article-author {
-  display: block;
+.t-subheader {
+  font-weight: $font-weight-bold;
+  font-size: 1.4rem;
   line-height: $line-height-subtitle;
-  margin-bottom: $gutter-quarter;
-
-  @include mq($from: s) {
-    display: inline;
-    margin-bottom: 0;
-    margin-right: $gutter;
-  }
-}
-
-.article-pub-date {
-  display: block;
+  max-width: 24em;
+  margin: auto;
+  margin-top: 1em;
+  margin-bottom: 1em;
 
-  @include mq($from: s) {
-    display: inline;
+  @include mq($from: m) {
+    font-size: 1.6rem;
+    line-height: 2.2rem;
   }
 }
 
-.article-pub-update-date {
-  display: block;
-  margin-top: $gutter-quarter;
-
-  time {
-    @include mq($until: s) {
-      display: block;
-      margin-top: $gutter-quarter;
+.t-byline {
+  &__item {
+    display: block;
+    margin-bottom: $size-tiny;
+    line-height: 1.3;
+    &:last-child {
+      margin-right: 0;
     }
-
-    &:not(:first-child) {
-      margin-left: .625rem;
-
-      @include mq($until: s) {
-        margin-left: 0;
-      }
+  }
+  @include mq($until: bp-s) {
+    &__item {
+      margin-right: 0;
     }
   }
-}
-
-.article-shares {
-  display: flex;
-  flex-direction: row;
-  flex-wrap: wrap;
-  justify-content: center;
-  margin-bottom: $gutter;
-  margin-top: $gutter;
-  margin-left: auto;
-  margin-right: auto;
-  max-width: to-rem(300);
-}
-
-.article-shares-button {
-  display: block;
-  flex-basis: 0;
-  flex-grow: 1;
-  font-size: 1rem;
-  max-width: 100%;
-  text-align: center;
-
-  > svg {
-    vertical-align: bottom;
+  @include mq($from: bp-s) {
+    &__item {
+      display: inline-block;
+    }
   }
 }
 
-.article-shares-button + .article-shares-button {
-  margin-left: $gutter-half;
-}
-
+// Mirrored from old styles and adapted for queso
 // For most forms of body copy. Takes most of its notes from the main site's
 // body copy. Typically you'll be applying this to each <p> tag directly, NOT
 // to the body copy's container. This makes it easier to float things around
 // individual paragraphs.
-.copy {
-  font-family: $font-serif;
+.t-copy {
   font-size: 1.125rem;
   line-height: $line-height-body;
   margin-bottom: 1em; // Ensures spacing below the <p> syncs up with font-size
@@ -121,22 +61,15 @@
   margin-top: 1em; // Ensures spacing above the <p> syncs up with font-size
   max-width: 34em; // Controls the measure
 
-  > a {
-    @include default-link;
-  }
-}
-
-.article-subheader {
-  font-weight: $font-weight-bold;
-  font-size: 1.4rem;
-  line-height: $line-height-subtitle;
-  margin-top: 1em;
-  margin-bottom: 1em;
-  max-width: 27em;
+  &--subheader {
+    font-size: 1.4rem;
+    line-height: $line-height-subtitle;
+    max-width: 27em;
 
-  @include mq($from: m) {
-    font-size: 1.6rem;
-    line-height: 2.2rem;
-    max-width: 24em;
+    @include mq($from: m) {
+      font-size: 1.6rem;
+      line-height: 2.2rem;
+      max-width: 24em;
+    }
   }
 }

templates/__common__/config/scripts/parse.js

@@ -13,6 +13,7 @@ const paths = require('../paths');
 const api = require('../tasks/api');
 const images = require('../tasks/images');
 const styles = require('../tasks/styles');
+const unusedCSS = require('../tasks/unused-css');
 const templates = require('../tasks/templates');
 const graphicsMeta = require('../tasks/graphics-meta');
 
@@ -21,7 +22,11 @@ const cleanTemp = async () => {
 };
 
 async function runParser() {
-  const runner = series([parallel([api, images, styles]), templates]);
+  const runner = series([
+    parallel([api, images, styles]),
+    templates,
+    unusedCSS,
+  ]);
 
   await runner();
   const bs = browserSync.create();