@data-visuals/create 7.4.6 → 7.6.1

package/package.json

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

package/templates/__common__/_babel.config.json

@@ -0,0 +1,10 @@
+{
+  "env": {
+    "development": {
+      "compact": true
+    },
+    "production": {
+      "compact": true
+    }
+  }
+}

package/templates/__common__/_package.json

@@ -79,7 +79,7 @@
   "dependencies": {
     "@babel/runtime": "^7.0.0",
     "@newswire/frames": "^0.3.1",
-    "@texastribune/queso-ui": "^10.3.2",
+    "@texastribune/queso-ui": "^10.4.0",
     "classnames": "^2.2.5",
     "core-js": "^2.5.7",
     "d3": "^5.0.0",
@@ -88,7 +88,7 @@
     "preact": "^8.4.1",
     "preact-compat": "^3.18.4",
     "promise-polyfill": "^8.0.0",
-    "sass-mq": "^5.0.0",
+    "sass-mq": "^6.0.0",
     "whatwg-fetch": "^3.0.0"
   },
   "prettier": {

package/templates/__common__/app/styles/components/_graphic.scss

@@ -10,8 +10,9 @@
   font-weight: $font-weight-bold;
   font-size: to-rem(18);
   line-height: $line-height-title;
-  margin-bottom: $gutter-half;
   text-align: left;
+  max-width: 41.5rem;
+  margin: 0 auto $gutter-half;
 }
 
 .graphic-category {
@@ -28,12 +29,15 @@
 .graphic-prose {
   font-size: to-rem(14);
   line-height: $line-height-body;
-  margin-bottom: $gutter-half;
+  max-width: 41.5rem;
+  margin: 0 auto $gutter-half;
 }
 
 .graphic-footer {
   color: $color-grey;
   font-size: to-rem(12);
+  max-width: 41.5rem;;
+  margin: 0 auto $gutter-half;
 }
 
 .graphic-footer li {

package/templates/__common__/app/templates/macros/shares.html

@@ -9,3 +9,11 @@ https://twitter.com/share?url={{ href|urlencode }}&text={{ text|urlencode }}{% i
 {% macro email(subject, body) %}
 mailto:?subject={{ subject|urlencode }}&body={{ body|urlencode }}
 {% endmacro %}
+
+{% macro copy_link(href) %}
+{{ href|urlencode }}?utm_campaign=trib-social-buttons&utm_source=copy&utm_medium=social
+{% endmacro %}
+
+{% macro reddit(href, text) %}
+https://www.reddit.com/submit?url={{ href|urlencode }}?utm_campaign=trib-social-buttons&utm_source=copy&utm_medium=social%3Futm_campaign%3Dtrib-social-buttons%26utm_source%3Dreddit%26utm_medium%3Dsocial&title={{ text|urlencode }}
+{% endmacro %}

package/templates/__common__/config/scripts/develop.js

@@ -2,6 +2,7 @@
 const { clearConsole, series } = require('../utils');
 
 // tasks
+const parseFigma2html = require('../tasks/parse-figma2html');
 const api = require('../tasks/api');
 const clean = require('../tasks/clean');
 const serve = require('../tasks/serve');
@@ -9,7 +10,7 @@ const serve = require('../tasks/serve');
 async function develop() {
   clearConsole();
 
-  const runner = series([clean, api, serve]);
+  const runner = series([parseFigma2html, clean, api, serve]);
 
   await runner();
 }

package/templates/__common__/config/tasks/parse-figma2html.js

@@ -0,0 +1,116 @@
+const colors = require('ansi-colors');
+const fs = require('fs-extra');
+const extract = require('extract-zip');
+
+// internal
+const paths = require('../paths');
+const { resolve } = require('path');
+
+// functions
+const moveHtml = filename => {
+  // move the .html file in the app/templates directory
+  fs.renameSync(
+    'workspace/' + filename + '.html',
+    'app/templates/figma2html-output/' + filename + '.html'
+  );
+};
+
+const moveImages = filename => {
+  // move the image files in the app/assets/figma2html/FILENAME directory
+  const imagesPath = 'workspace/assets/figma2html/' + filename;
+  fs.readdir(imagesPath, (err, images) => {
+    images.forEach(image => {
+      console.log('moving ' + image + '...');
+      fs.renameSync(
+        imagesPath + '/' + image,
+        'app/assets/figma2html/' + filename + '/' + image
+      );
+    });
+  });
+};
+
+const moveFiles = filename => {
+  console.log('Now moving the figma2html files...');
+
+  // check if there's app/templates/figma2html-output directory
+  const templatesPath = 'app/templates/figma2html-output';
+  try {
+    fs.accessSync(templatesPath);
+  } catch (err) {
+    fs.mkdirSync(templatesPath, err => {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log('created figma2html-output directory!');
+      }
+    });
+  } finally {
+    moveHtml(filename);
+  }
+
+  // check if there's app/assets/figma2html directory
+  const assetsPath = 'app/assets/figma2html/';
+
+  try {
+    fs.accessSync(assetsPath);
+    console.log('figma2html directory already exists!');
+  } catch (err) {
+    fs.mkdirSync(assetsPath, err => {
+      if (err) {
+        console.log(err);
+      } else {
+        console.log('created new figma2html directory!');
+      }
+    });
+  } finally {
+    // create app/assets/figma2html/FILENAME directory
+    try {
+      fs.accessSync(assetsPath + filename);
+      console.log('app/assets/figma2html/' + filename + ' already exists!');
+    } catch (err) {
+      fs.mkdirSync(assetsPath + filename, err => {
+        if (err) {
+          console.log(err);
+        } else {
+          console.log('created figma2html/FILENAME directory!');
+        }
+      });
+    }
+    moveImages(filename);
+  }
+};
+
+const extractZip = async file => {
+  // extract the zip file
+  try {
+    console.log('Unzipping ' + colors.magentaBright(file) + '...');
+    await extract(
+      resolve('workspace/' + file),
+      // save the extracted zip file in the workspace directory
+      { dir: resolve('workspace') }
+    );
+    console.log(colors.magentaBright(file) + ' Extraction completed');
+  } catch (err) {
+    // handle any errors
+  } finally {
+    // get the file name
+    const filename = file.replace('.zip', '');
+    // then move files
+    moveFiles(filename);
+  }
+};
+
+module.exports = () => {
+  // check if a zip file exists in the workspace directory
+  fs.readdir('workspace', (err, files) => {
+    files.forEach(file => {
+      if (file.includes('assets')) {
+        // remove old assets files
+        fs.rmSync(file, { recursive: true, force: true });
+      } else if (file.includes('.zip')) {
+        // extract the zip file
+        extractZip(file);
+      }
+    });
+  });
+};

package/templates/feature/app/index.html

@@ -38,7 +38,9 @@
             </p>
           </header>
 
-          {% include 'components/share.html' %}
+          <div class="c-details t-size-xs t-uppercase t-lsp-m t-lh-b has-text-black-off has-text-vert-padding has-s-btm-marg t-byline t-links t-uppercase t-lsp-m t-size-xs has-text-gray-dark has-page-padding t-align-center">
+            {% include 'components/share.html' %}
+          </div>
         </div>
 
         <div class="t-serif t-links-underlined has-page-padding">

package/templates/feature/app/styles/components/_details.scss

@@ -0,0 +1,118 @@
+.c-details {
+  flex-wrap: wrap;
+  gap: 10px;
+  display: flex;
+  justify-content: space-around; /* ADJUSTMENT */
+  // margin-bottom: 1em; // Ensures spacing below the <p> syncs up with font-size
+  margin-left: auto; // Centers <p> tag within max-width
+  margin-right: auto; // Centers <p> tag within max-width
+  // margin-top: 1em; // Ensures spacing above the <p> syncs up with font-size
+  max-width: 34em; // Controls the measure
+}
+
+.c-details__wrapper {
+  flex: 1 0 auto;
+  display: flex
+}
+
+.c-details__spacer {
+  flex: auto
+}
+
+.c-details__icon-link {
+  cursor: pointer;
+  gap: 6px;
+  display: inline-flex
+}
+
+.c-social-share__dropdown {
+  --dropdown-width: 180px;
+  margin: 10px 0 0 calc(var(--dropdown-width)/1.5*-1);
+  width: var(--dropdown-width);
+  z-index: 3;
+  background: #fbfbfb;
+  border-radius: 6px;
+  position: absolute
+}
+
+.c-social-share__dropdown:before,.c-social-share__dropdown:after {
+  content: " ";
+  width: 0;
+  height: 0;
+  border: 10px solid transparent;
+  border-top-width: 0;
+  border-bottom-color: #d0d0d0;
+  margin-left: -10px;
+  position: absolute;
+  top: -10px;
+  left: 80%
+}
+
+@media (max-width: 845px) and (min-height:650px) {
+  .c-social-share__dropdown:before,.c-social-share__dropdown:after {
+      display:none
+  }
+}
+
+.c-social-share__dropdown:after {
+  border-bottom-color: #fbfbfb;
+  top: -9px
+}
+
+@media (max-width: 845px) and (min-height:650px) {
+  .c-social-share__dropdown {
+      width:100%;
+      border-bottom-right-radius: 0;
+      border-bottom-left-radius: 0;
+      position: fixed;
+      bottom: 0;
+      right: 0
+  }
+}
+
+.c-social-share__dropdown li {
+  border-bottom: 1px solid #d0d0d0;
+  margin: 0;
+  padding: 0
+}
+
+.c-social-share__dropdown li:last-child {
+  border-bottom: none
+}
+
+.c-social-share__dropdown li a {
+  width: 100%;
+  gap: 8px;
+  margin: 10px 0;
+  padding: 0 15px;
+  display: flex
+}
+
+@media (max-width: 845px) and (min-height:650px) {
+  .c-social-share__dropdown li a {
+      width:100%;
+      margin: 0;
+      padding: 20px 15px;
+      font-size: 1rem
+  }
+}
+
+.c-social-share__dropdown li a:hover {
+  text-decoration: none
+}
+
+.c-social-share[open]>.c-social-share__btn:before {
+  content: " ";
+  z-index: 2;
+  position: fixed;
+  top: 0;
+  bottom: 0;
+  left: 0;
+  right: 0
+}
+
+@media (max-width: 845px) and (min-height:650px) {
+  .c-social-share[open]>.c-social-share__btn:before {
+      background-color:rgba(0,0,0,.2)
+  }
+}

package/templates/feature/app/styles/components/_navbar.scss

@@ -12,3 +12,59 @@
     margin-right: $size-b;
   }
 }
+
+.c-navbar__clickable {
+  letter-spacing: .07rem;
+  font-weight: 700
+}
+
+.c-navbar__clickable {
+  border: none;
+  align-items: center;
+  padding: 0;
+  text-decoration: none;
+  transition: all .15s;
+  display: flex;
+  position: relative
+}
+
+.c-navbar--light .c-navbar__clickable {
+  color: #222;
+  background-color: #fff
+}
+
+.c-navbar--dark .c-navbar__clickable {
+  color: #d0d0d0;
+  background-color: #222
+}
+
+.c-navbar--dark .c-navbar__clickable:hover,.c-navbar--dark .c-navbar__clickable:active,.c-navbar--dark .c-navbar__clickable.is-active {
+  color: #fff
+}
+
+@media (min-width: 52.8125em) {
+  .c-navbar__clickable--animated:hover:after {
+      background-color:#ffc200
+  }
+}
+
+.c-navbar__clickable.is-active:after {
+  background-color: #ffc200
+}
+
+.c-navbar__clickable:after {
+  content: "";
+  height: 3px;
+  width: 100%;
+  transition: background-color .15s;
+  position: absolute;
+  top: 100%;
+  left: 0
+}
+
+@media (min-width: 52.8125em) {
+  .c-navbar__clickable:after {
+      top: auto;
+      bottom: 0
+  }
+}

package/templates/feature/app/styles/main-queso.scss

@@ -18,6 +18,7 @@
 @import 'components/ads';
 @import 'components/footer';
 @import 'components/navbar';
+@import 'components/details';
 @import 'components/ribbon';
 @import 'components/chart';
 @import 'components/graphic';

package/templates/feature/app/templates/components/footer.html

@@ -10,7 +10,7 @@
       <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/terms-of-service/">Terms of Service</a></li>
       <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/ethics/">Code of Ethics</a></li>
       <li class="footer-nav-item"><a class="footer-link" href="http://www.texastribune.org/about/privacy-policy/">Privacy Policy</a></li>
-      <li class="footer-nav-item"><a class="footer-link footer-link-donate" href="https://support.texastribune.org/">Donate</a></li>
+      <li class="footer-nav-item"><a class="footer-link footer-link-donate has-text-yellow" href="https://support.texastribune.org/">Donate</a></li>
     </ul>
   </div>
-</footer>
+</footer>

package/templates/feature/app/templates/components/navbar.html

@@ -1,20 +1,42 @@
-<header class="c-navbar c-navbar--dark">
-  <div class="c-navbar__top l-align-center-x">
-    <div class="c-navbar__branding l-align-center-children">
-      <a href="https://www.texastribune.org" class="c-navbar__logo">
-        <span class="is-sr-only">The Texas Tribune</span>
-        {% include 'includes/logo.html' %}
-      </a>
-      {% if context.masthead_title %}
-        <p class="has-text-white is-hidden-until-bp-m t-weight-bold t-links-underlined-hover-thin">{{ context.masthead_title }}</p>
-      {% endif %}
-    </div>
-    <div class="c-navbar__content">
-      <div class="c-navbar__items l-align-center-children">
-         <a href="https://support.texastribune.org/" class="c-button c-button--standard t-uppercase">
-            <span class="t-size-xxs t-lsp-l">Donate</span>
+<header class="gradient-navbar">
+  <div class="inner-navbar">
+    <div class="c-navbar c-navbar--dark">
+      <div class="c-navbar__top l-align-center-x">
+        <div class="c-navbar__branding l-align-center-children">
+          <a href="https://www.texastribune.org" class="c-navbar__logo">
+            <span class="is-sr-only">The Texas Tribune</span>
+          {% include 'includes/logo.html' %}
           </a>
-      </div>
+        {% if context.masthead_title %}
+          <p class="has-text-white is-hidden-until-bp-m t-weight-bold t-links-underlined-hover-thin">{{ context.masthead_title }}</p>
+        {% endif %}
+        </div>
+        <div class="c-navbar__content">
+          <ul class="c-navbar__items t-uppercase t-size-xxs hide_until--l is-hidden-until-bp-l js-toggle-on-search">
+            <li class="c-navbar__item">
+              <a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/topics/texas-tribune-investigations/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="investigations">Investigations</a>
+            </li>
+            <li class="c-navbar__item">
+              <a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/series/guides/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="guides">Guides</a>
+            </li>
+            <li class="c-navbar__item">
+              <a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/newsletters/" ga-on="click" ga-event-category="subscribe intent" ga-event-action="top nav click" ga-event-label="not frontpage">Newsletters</a>
+            </li>
+            <li class="c-navbar__item">
+              <a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/events/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="events">Events</a>
+            </li>
+            <li class="c-navbar__item">
+              <a class="c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/series/news-apps-graphics-databases/" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="data">Data</a>
+            </li>
+            <li class="c-navbar__item">
+              <a class="t-uppercase t-size-xxs c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated " href="https://www.texastribune.org/about/?utm_medium=top-nav-about" ga-on="click" ga-event-category="navigation" ga-event-action="top nav click" ga-event-label="about">About</a>
+            </li>
+            <li class="c-navbar__item">
+              <a class="t-uppercase t-size-xxs c-navbar__item-content c-navbar__clickable c-navbar__clickable--animated" href="https://support.texastribune.org/donate?installmentPeriod=once&amp;amount=100&amp;campaignId=7016f000002Gv2vAAC" ga-on="click" ga-event-category="donations" ga-event-action="membership-intent" ga-event-label="c-navbar"><span class="has-text-yellow">Donate</span></a>
+            </li>
+          </ul>
+        </div>
+        </div>
     </div>
   </div>
-</header>
+</header>

package/templates/feature/app/templates/components/share.html

@@ -1,28 +1,21 @@
 {% import "macros/shares.html" as shares %}
 
-<div class="c-share t-align-center l-container l-container--share">
-  <a class="c-button c-button--outline c-button--standard has-text-facebook has-bg-facebook has-text-hover-facebook l-align-center-children"
-    href="{{ shares.facebook(CURRENT_PAGE_URL) }}" aria-label="Share on Facebook">
-    <span class="c-button__inner c-icon t-size-s">
-      <svg aria-hidden="true">
-        <use xlink:href="#icon-facebook"></use>
-      </svg>
-    </span>
-  </a>
-  <a class="c-button c-button--outline c-button--standard has-text-twitter has-bg-twitter has-text-hover-twitter l-align-center-children"
-    href="{{ shares.twitter(CURRENT_PAGE_URL, context.tweet_text, '') }}" aria-label="Share on Twitter">
-    <span class="c-button__inner c-icon t-size-s">
-      <svg aria-hidden="true">
-        <use xlink:href="#icon-twitter"></use>
-      </svg>
-    </span>
-  </a>
-  <a class="c-button c-button--outline c-button--standard has-text-yellow has-bg-yellow has-text-hover-yellow l-align-center-children"
-    href="{{ shares.email(context.headline, CURRENT_PAGE_URL) }}" aria-label="Share this story by email">
-    <span class="c-button__inner c-icon t-size-s">
-      <svg aria-hidden="true">
-        <use xlink:href="#icon-envelope"></use>
-      </svg>
-    </span>
-  </a>
-</div>
+<div class="c-details__social-share">
+  <details class="c-social-share">
+      <summary class="c-social-share__btn" id="native-share">
+          <span class="c-details__icon-link t-weight-bold has-text-hover-teal" ga-event-category="social-share" ga-event-action="share-intent">Share
+            <span class="c-icon c-icon--baseline">
+              <svg width="21" height="20" viewBox="0 0 21 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M10.94 2.11L17.1001 2.13L0.7 18.53L2.17 20L18.5701 3.6L18.5901 9.76L20.68 9.74V0L18.25 0.00999999H10.9501L10.94 2.11Z"></path></svg>
+            </span>
+          </span>
+      </summary>
+        <ul class="c-social-share__dropdown has-border t-titlecase has-text-gray-dark">
+          <li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="" ga-event-category="social-share" ga-event-action="copy-url-intent" aria-label="Copy URL" id="copy-url"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#link"></use></svg></span>
+            <span id="copy-url-text">Copy URL</span></a></li>
+          <li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.twitter(CURRENT_PAGE_URL, context.tweet_text, '') }}" target="_blank" rel="noopener noreferrer" ga-event-category="social-share" ga-event-action="twitter-intent" aria-label="Share on Twitter"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#twitter"></use></svg></span>Twitter</a></li>
+          <li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.facebook(CURRENT_PAGE_URL) }}" target="_blank" rel="noopener noreferrer" ga-event-category="social-share" ga-event-action="facebook-intent" aria-label="Share on Facebook"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#facebook"></use></svg></span>Facebook</a></li>
+          <li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.reddit(CURRENT_PAGE_URL, context.headline ) }}" target="_blank" rel="noopener noreferrer" ga-event-category="social-share" ga-event-action="reddit-intent" aria-label="Share on Reddit"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#reddit"></use></svg></span>Reddit</a></li>
+          <li><a class="t-links-unset t-weight-bold has-text-hover-teal" href="{{ shares.email(context.headline, CURRENT_PAGE_URL) }}" ga-event-category="social-share" ga-event-action="email-intent" aria-label="Share this story by email"><span class="c-icon c-icon--baseline"><svg aria-hidden="true"><use xlink:href="#envelope"></use></svg></span>Email</a></li>
+      </ul>
+  </details>
+</div>

package/templates/feature/app/templates/includes/shares.html

@@ -24,4 +24,4 @@
       </a>
     </div>
   </div>
-</div>
+</div>

package/templates/feature/app/templates/includes/svg-defs.html

@@ -1,16 +1,31 @@
 <svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
   <defs>
-    <symbol id="icon-twitter" viewBox="0 0 26 28">
+    <symbol id="twitter" viewBox="0 0 26 28">
       <title>twitter</title>
-      <path class="path1" d="M25.312 6.375c-0.688 1-1.547 1.891-2.531 2.609 0.016 0.219 0.016 0.438 0.016 0.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-0.828-7.75-2.266 0.406 0.047 0.797 0.063 1.219 0.063 2.359 0 4.531-0.797 6.266-2.156-2.219-0.047-4.078-1.5-4.719-3.5 0.313 0.047 0.625 0.078 0.953 0.078 0.453 0 0.906-0.063 1.328-0.172-2.312-0.469-4.047-2.5-4.047-4.953v-0.063c0.672 0.375 1.453 0.609 2.281 0.641-1.359-0.906-2.25-2.453-2.25-4.203 0-0.938 0.25-1.797 0.688-2.547 2.484 3.062 6.219 5.063 10.406 5.281-0.078-0.375-0.125-0.766-0.125-1.156 0-2.781 2.25-5.047 5.047-5.047 1.453 0 2.766 0.609 3.687 1.594 1.141-0.219 2.234-0.641 3.203-1.219-0.375 1.172-1.172 2.156-2.219 2.781 1.016-0.109 2-0.391 2.906-0.781z"></path>
+      <path d="M25.312 6.375a10.85 10.85 0 01-2.531 2.609c.016.219.016.438.016.656 0 6.672-5.078 14.359-14.359 14.359-2.859 0-5.516-.828-7.75-2.266.406.047.797.063 1.219.063 2.359 0 4.531-.797 6.266-2.156a5.056 5.056 0 01-4.719-3.5c.313.047.625.078.953.078.453 0 .906-.063 1.328-.172a5.048 5.048 0 01-4.047-4.953v-.063a5.093 5.093 0 002.281.641 5.044 5.044 0 01-2.25-4.203c0-.938.25-1.797.688-2.547a14.344 14.344 0 0010.406 5.281 5.708 5.708 0 01-.125-1.156 5.045 5.045 0 015.047-5.047 5.03 5.03 0 013.687 1.594 9.943 9.943 0 003.203-1.219 5.032 5.032 0 01-2.219 2.781c1.016-.109 2-.391 2.906-.781z"></path>
     </symbol>
-      <symbol id="icon-facebook" viewBox="0 0 16 28">
+    <symbol id="facebook" viewBox="0 0 16 28">
       <title>facebook</title>
-      <path class="path1" d="M14.984 0.187v4.125h-2.453c-1.922 0-2.281 0.922-2.281 2.25v2.953h4.578l-0.609 4.625h-3.969v11.859h-4.781v-11.859h-3.984v-4.625h3.984v-3.406c0-3.953 2.422-6.109 5.953-6.109 1.687 0 3.141 0.125 3.563 0.187z"></path>
+      <path d="M14.984.187v4.125h-2.453c-1.922 0-2.281.922-2.281 2.25v2.953h4.578l-.609 4.625H10.25v11.859H5.469V14.14H1.485V9.515h3.984V6.109C5.469 2.156 7.891 0 11.422 0c1.687 0 3.141.125 3.563.187z"></path>
     </symbol>
-    <symbol id="icon-envelope" viewBox="0 0 28 28">
+    <symbol id="envelope" viewBox="0 0 28 28">
       <title>envelope</title>
-      <path class="path1" d="M28 11.094v12.406c0 1.375-1.125 2.5-2.5 2.5h-23c-1.375 0-2.5-1.125-2.5-2.5v-12.406c0.469 0.516 1 0.969 1.578 1.359 2.594 1.766 5.219 3.531 7.766 5.391 1.313 0.969 2.938 2.156 4.641 2.156h0.031c1.703 0 3.328-1.188 4.641-2.156 2.547-1.844 5.172-3.625 7.781-5.391 0.562-0.391 1.094-0.844 1.563-1.359zM28 6.5c0 1.75-1.297 3.328-2.672 4.281-2.438 1.687-4.891 3.375-7.313 5.078-1.016 0.703-2.734 2.141-4 2.141h-0.031c-1.266 0-2.984-1.437-4-2.141-2.422-1.703-4.875-3.391-7.297-5.078-1.109-0.75-2.688-2.516-2.688-3.938 0-1.531 0.828-2.844 2.5-2.844h23c1.359 0 2.5 1.125 2.5 2.5z"></path>
+      <path d="M28 11.094V23.5c0 1.375-1.125 2.5-2.5 2.5h-23A2.507 2.507 0 010 23.5V11.094c.469.516 1 .969 1.578 1.359 2.594 1.766 5.219 3.531 7.766 5.391 1.313.969 2.938 2.156 4.641 2.156h.031c1.703 0 3.328-1.188 4.641-2.156 2.547-1.844 5.172-3.625 7.781-5.391a9.278 9.278 0 001.563-1.359zM28 6.5c0 1.75-1.297 3.328-2.672 4.281-2.438 1.687-4.891 3.375-7.313 5.078-1.016.703-2.734 2.141-4 2.141h-.031c-1.266 0-2.984-1.437-4-2.141-2.422-1.703-4.875-3.391-7.297-5.078-1.109-.75-2.688-2.516-2.688-3.938 0-1.531.828-2.844 2.5-2.844h23c1.359 0 2.5 1.125 2.5 2.5z"></path>
+    </symbol>
+    <symbol id="link" viewBox="0 0 72 72">
+      <title>link</title>
+      <path d="M67.6 25.5L55 38.1c-1.2 1.2-3.1 1.2-4.2 0s-1.2-3.1 0-4.2l12.7-12.7c3.5-3.5 3.5-9.2 0-12.7s-9.2-3.5-12.7 0l-16.9 17c-1 1.1-6 6.7 0 12.7 1.2 1.2 1.2 3.1 0 4.2s-3.1 1.2-4.2 0c-8.3-8.3-3.6-17.4 0-21.1L46.5 4.4c5.8-5.8 15.3-5.8 21.1 0s5.9 15.2 0 21.1zm-25.3 4.2c-1.2-1.2-3.1-1.2-4.2 0-1.2 1.2-1.2 3.1 0 4.2 6 6 1 11.6 0 12.7L21.2 63.4c-3.5 3.5-9.2 3.5-12.7 0s-3.5-9.2 0-12.7L21.2 38c1.2-1.2 1.2-3.1 0-4.2s-3.1-1.2-4.2 0L4.4 46.5c-5.8 5.8-5.8 15.3 0 21.1 5.8 5.8 15.3 5.8 21.1 0l16.9-16.9c3.6-3.6 8.3-12.7-.1-21z"></path></symbol>
+    <symbol id="reddit" viewBox="0 0 28 28">
+      <title>reddit</title>
+      <path d="M17.109 18.234c.141.141.141.359 0 .484-.891.891-2.609.969-3.109.969s-2.219-.078-3.109-.969c-.141-.125-.141-.344 0-.484a.34.34 0 01.469 0c.562.578 1.781.766 2.641.766s2.063-.187 2.641-.766a.34.34 0 01.469 0zm-4.796-2.828c0 .766-.625 1.391-1.391 1.391a1.397 1.397 0 01-1.406-1.391A1.4 1.4 0 0110.922 14c.766 0 1.391.625 1.391 1.406zm6.171 0c0 .766-.625 1.391-1.406 1.391a1.394 1.394 0 01-1.391-1.391c0-.781.625-1.406 1.391-1.406a1.4 1.4 0 011.406 1.406zm3.922-1.875a1.867 1.867 0 00-1.875-1.859c-.531 0-1 .219-1.344.562-1.266-.875-2.969-1.437-4.859-1.5l.984-4.422 3.125.703c0 .766.625 1.391 1.391 1.391.781 0 1.406-.641 1.406-1.406s-.625-1.406-1.406-1.406a1.42 1.42 0 00-1.25.781l-3.453-.766c-.172-.047-.344.078-.391.25l-1.078 4.875c-1.875.078-3.563.641-4.828 1.516a1.877 1.877 0 00-1.359-.578 1.867 1.867 0 00-1.875 1.859c0 .75.438 1.375 1.062 1.687a4.024 4.024 0 00-.094.875c0 2.969 3.344 5.375 7.453 5.375 4.125 0 7.469-2.406 7.469-5.375 0-.297-.031-.609-.109-.891a1.878 1.878 0 001.031-1.672zM28 14c0 7.734-6.266 14-14 14S0 21.734 0 14 6.266 0 14 0s14 6.266 14 14z"></path>
+    </symbol>
+    <symbol id="icon-info" viewBox="0 0 7 13">
+      <title>Click to learn more about this district</title>
+      <path class="path1" d="M.967 11.01c.564-1.789 1.632-3.932 1.821-4.474.273-.787-.211-1.136-1.74.209l-.34-.64c1.744-1.897 5.335-2.326 4.113.613-.763 1.835-1.309 3.074-1.621 4.03-.455 1.393.694.828 1.819-.211.153.25.203.331.356.619C2.877 13.534.104 13.744.967 11.01zm4.742-8.169c-.532.453-1.32.443-1.761-.022-.441-.465-.367-1.208.164-1.661.532-.453 1.32-.442 1.761.022.439.466.367 1.209-.164 1.661z"></path>
+    </symbol>
+    <symbol id="icon-drawn-left-arrow" viewBox="0 0 17 32">
+      <title>drawn-left-arrow</title>
+      <path d="M1.027 3.583c1.137 1.309 2.179 2.765 3.076 4.314l0.072 0.135c0.64 1.082 2.211 0.13 1.667-0.975-0.367-0.738-0.722-1.349-1.11-1.937l0.042 0.068c4.009 1.971 7.060 5.378 8.52 9.534l0.036 0.117c1.687 4.737 2.053 11.636-1.314 15.743-0.305 0.376 0.092 1.027 0.554 0.722 4.822-3.292 4.213-11.77 2.676-16.623-1.508-4.787-4.757-8.652-8.987-10.93l-0.099-0.049c1.036-0.339 1.934-0.764 2.766-1.286l-0.052 0.030c0.787-0.489 0.524-1.917-0.5-1.845-2.527 0.171-4.882 0.642-7.116 1.379l0.203-0.058c-0.417 0.129-0.715 0.511-0.715 0.963 0 0.271 0.107 0.516 0.281 0.697l-0-0z"></path>
     </symbol>
   </defs>
-</svg>
+</svg>

package/templates/graphic/app/templates/graphic-static.html

@@ -12,7 +12,7 @@
 {% set graphicData = data.data %}
 
 {# used by the CMS #}
-{# if this is an ai2html graphic, fill out these variables #}
+{# if this is an ai2html or figma2html graphic, fill out these variables #}
 {% set graphicTitle = context.headline %}
 {% set graphicCaption = '' %}
 {# graphicAltText is used by the CMS for accessibility #}
@@ -27,19 +27,23 @@
 {# data-graphic signifies that this can be embedded in the CMS #}
 <div class="app" data-graphic>
   {# data-title is used to grab the title in the CMS #}
-  <h1 class="graphic-title" data-title>{{ context.headline | widont or 'The only member-supported, digital-first, nonpartisan media organization' | widont }}</h1>
+  <h1 class="graphic-title" data-title>{{ context.headline | widont or "The only member-supported, digital-first, nonpartisan media organization" | widont }}</h1>
   {# data-caption is used to grab the caption in the CMS #}
-  <span data-caption>{{ prose(context.prose, context, graphicData) }}</span>
+  <div class="graphic-prose"><span data-caption>{{ prose(context.prose, context, graphicData) | widont or "Graphics chatter goes here" | widont }}</span></div>
 
   {# add name of your ai2html file here #}
   {# {% set ai2html = "" %}
   {% include "ai2html-output/" + ai2html + ".html" %} #}
 
+  {# add name of your figma2html file here #}
+  {# {% set figma2html = "" %}
+  {% include "figma2html-output/" + figma2html + ".html" %} #}
+
   {# data-source and data-credit are also used in the CMS #}
   <ul class="graphic-footer">
-    {% if context.note %}<li>Note: <span data-note>{{ context.note }}</span></li>{% endif %}
-    {% if context.source %}<li>Source: <span data-source>{{ context.source }}</span></li>{% endif %}
-    {% if context.credit %}<li>Credit: <span data-credit>{{ context.credit }}</span></li>{% endif %}
+    {% if context.note %}<li>Note: <span data-note>{{ context.note | widont or "Graphics note goes here" | widont }}</span></li>{% endif %}
+    {% if context.source %}<li>Source: <span data-source>{{ context.source | widont or "Graphics source goes here" | widont }}</span></li>{% endif %}
+    {% if context.credit %}<li>Credit: <span data-credit>{{ context.credit or "YOUR NAME" }}</span></li>{% endif %}
   </ul>
 </div>
 {% endblock content %}