diff --git a/CHANGELOG.md b/CHANGELOG.md
index 5edde0b6..4bd1da99 100644
--- a/CHANGELOG.md
+++ b/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.)
diff --git a/package-lock.json b/package-lock.json
index dc3c6b54..12a72171 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -1,6 +1,6 @@
{
"name": "@data-visuals/create",
- "version": "3.7.0",
+ "version": "4.0.0",
"lockfileVersion": 1,
"requires": true,
"dependencies": {
diff --git a/package.json b/package.json
index 8ff58f01..cc6d266b 100644
--- a/package.json
+++ b/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",
diff --git a/templates/__common__/_package.json b/templates/__common__/_package.json
index 975eddfe..5d963301 100644
--- a/templates/__common__/_package.json
+++ b/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",
diff --git a/templates/__common__/app/styles/_typography-queso.scss b/templates/__common__/app/styles/_typography-queso.scss
deleted file mode 100644
index fde98380..00000000
--- a/templates/__common__/app/styles/_typography-queso.scss
+++ /dev/null
@@ -1,75 +0,0 @@
-// Overrides of some queso helpers
-// and additional data visuals helpers
-.t-headline {
- font-size: to-rem(24);
- margin-top: 1em;
- @include mq($from: s) {
- font-size: to-rem(28);
- }
- @include mq($from: m) {
- font-size: to-rem(32);
- }
-}
-
-.t-subheader {
- font-weight: $font-weight-bold;
- font-size: 1.4rem;
- line-height: $line-height-subtitle;
- margin-top: 1em;
- margin-bottom: 1em;
- margin: auto;
- max-width: 24em;
-
- @include mq($from: m) {
- font-size: 1.6rem;
- line-height: 2.2rem;
- }
-}
-
-.t-byline {
- &__item {
- display: block;
- margin-bottom: $size-tiny;
- line-height: 1.3;
- &:last-child {
- margin-right: 0;
- }
- }
- @include mq($until: bp-s) {
- &__item {
- margin-right: 0;
- }
- }
- @include mq($from: bp-s) {
- &__item {
- display: inline-block;
- }
- }
-}
-
-// 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
tag directly, NOT
-// to the body copy's container. This makes it easier to float things around
-// individual paragraphs.
-.t-copy {
- font-size: 1.125rem;
- line-height: $line-height-body;
- margin-bottom: 1em; // Ensures spacing below the
syncs up with font-size
- margin-left: auto; // Centers
tag within max-width
- margin-right: auto; // Centers
tag within max-width
- margin-top: 1em; // Ensures spacing above the
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
syncs up with font-size
@@ -121,22 +61,15 @@
margin-top: 1em; // Ensures spacing above the
{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}
-
- By {%- for author in context.authors or ['Super Cool Corgi', 'Friends'] -%}
- {% if not loop.last %}{{ authorComma() }}{% elif not loop.first %} and{% endif %} {{ author }}
- {% endfor %}
-
-
- {% if context.update_date %}
-
- Published:
- Updated:
-
- {% else %}
-
- {% endif %}
-
-
-
- {% include 'components/share.html' %}
-
-
-
- {{ prose(context.prose, context, data) }}
-
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.
-
-
{{ 'A cool subhead here' | widont }}
-
-
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.
-
-
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.
-
-
- {# use 'none' as the value if the ad shoud not have a gray background #}
- {# do not put ads inside a container div #}
- {{ ad('gray') }}
-
- {# create another container for more prose if the text needs to be split by an ad #}
-
-
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.
-
-
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.
-
-
{{ 'A cool subhead here' | widont }}
-
-
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.
-
-
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.
-
-
-
-{# use 'none' as the value if the ad shoud not have a gray background #}
-{# do not put ads inside a container div #}
-{{ ad('gray') }}
-
-{# create another container for more prose if the text needs to be split by an ad #}
-
-
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.
-
-
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.
Duis mattis orci a porta maximus. Pellentesque vel pellentesque augue, a condimentum nibh. Integer eget feugiat turpis, at vehicula metus. Vestibulum arcu dui, hendrerit sed purus sed, vulputate aliquam est. Duis quis metus sed odio commodo dapibus. Maecenas pulvinar elit sit amet lorem iaculis blandit. Aliquam vitae sollicitudin urna. Sed viverra tincidunt felis.
+
+
{{ 'A cool subhead here' | widont }}
+
+
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.
+
+
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.
+
+
+ {# use 'none' as the background if the ad shoud not have a gray background #}
+ {# use 'header', 'footer' or '' as the type, depending on where the ad is placed #}
+ {{ ad({background: 'gray', type: ''}) }}
+
+
+
Curabitur vestibulum sagittis diam, vitae pulvinar lorem accumsan ut. Mauris enim massa, vestibulum sed sollicitudin dapibus, ultrices eget ligula. Aenean tempor mi urna, eu porta tortor vehicula quis. Morbi hendrerit, eros nec interdum tempus, sem purus fringilla leo, ut iaculis urna tortor id diam. Duis laoreet maximus sapien, sed scelerisque sapien volutpat vel. Sed est lacus, sollicitudin nec euismod eu, placerat eget turpis. Quisque ultricies urna et mollis bibendum. Quisque tempus, elit ut faucibus hendrerit, augue enim faucibus massa, eu scelerisque dui eros at dolor. Sed rutrum, ipsum id convallis facilisis, justo ex rhoncus ex, in ultrices nisi augue vitae erat. Donec consequat ipsum ac nunc aliquam, eu porttitor quam viverra. Praesent ultrices, diam eget placerat sodales, magna magna porttitor urna, nec mollis ipsum odio at magna. Nulla ac consectetur turpis. Cras non ligula elementum, aliquet arcu ut, interdum nulla.
+
+
Nam ornare ante eget erat egestas, eget pulvinar diam tincidunt. Nunc eget ligula ac mi facilisis tempus. Proin molestie nisl at urna pharetra commodo. Praesent tincidunt vestibulum purus, id dictum tortor aliquet ac. Pellentesque semper scelerisque justo ac luctus. Nullam malesuada urna a magna fringilla bibendum. Mauris quis hendrerit nisl, a lacinia lectus.