Add more standalone previews

texastribune · Aug 1, 2019 · 7896b70 · 7896b70
1 parent 4c9d3c6
commit 7896b70
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 5 deletions.
diff --git a/docs/config/tasks/docs.js b/docs/config/tasks/docs.js
@@ -14,11 +14,16 @@ const htmlRunner = require('./html');
 const { docsStyles, docsIcons, mappedGithubData } = require('../paths.js');
 
 const COMPONENT_CSS_FILE = 'no-resets.css';
+const LEGACY_CSS_FILE = 'all-legacy.css';
 const COMPONENT_CSS_PATH = './docs/dist/css';
 
-const clean = async html => {
-  const filePath = `${COMPONENT_CSS_PATH}/${COMPONENT_CSS_FILE}`;
+const clean = async (html, deprecated) => {
+  let css = COMPONENT_CSS_FILE;
+  if (deprecated) {
+    css = LEGACY_CSS_FILE;
+  }
 
+  const filePath = `${COMPONENT_CSS_PATH}/${css}`;
   const purgecss = new Purgecss({
     content: [html],
     css: [filePath],
@@ -169,7 +174,11 @@ module.exports = async () => {
   await htmlRunner(componentArr);
 
   // generate component CSS
-  await Promise.all(componentArr.map(component => clean(component.out)));
+  await Promise.all(
+    componentArr.map(component =>
+      clean(component.out, component.data.deprecated)
+    )
+  );
 
   // creates main
   const mainPathIn = './docs/src/index.html';

diff --git a/docs/src/macros/snippet.html b/docs/src/macros/snippet.html
@@ -12,8 +12,7 @@
     <div class="card-header has-background-light">
         <pre class="has-text-info">.{{mainClass}}</pre>
         <div class="ds-icon buttons">
-            <a class="button is-primary" target="_blank" rel="noopener noreferrer" href="{{mainClass}}.html"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M16 0v2h-8v-2h8zm2 2h4v4h2v-6h-6v2zm-16 4v-4h4v-2h-6v6h2zm22 2h-2v8h2v-8zm-2 10v4h-4v2h6v-6h-2zm-22 6h16v-16h-16v16z" /></svg></a>
-            <a class="button is-primary" target="_blank" rel="noopener noreferrer" href="{{mainClass}}/raw-preview.html">Standalone&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" /></svg></a>
+            <a class="button is-primary" fill="#fff" target="_blank" rel="noopener noreferrer" href="{{mainClass}}/raw-preview.html">Standalone&nbsp;<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" /></svg></a>
         </div>
 
 

diff --git a/docs/src/page.html b/docs/src/page.html
@@ -115,6 +115,10 @@ <h2 class="title is-{{ item.depth }} is-spaced">
                 <div class="column is-full">
                   {{ snippet(item.header, markup, '', isFile, description, codeSnippet, item.mainClass) }}
                 </div>
+              {% else %}
+                <div class="column is-full">
+                  <a class="button is-primary" target="_blank" rel="noopener noreferrer" href="{{item.mainClass}}/raw-preview.html">Standalone&nbsp;<svg fill="#fff" xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24"><path d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z" /></svg></a>
+                </div>
               {% endif %}
               {% if (item.modifiers|length) and ( item.groupName === 'Typography' or item.groupName === 'Utility') %}
                 <div class="column is-full">