Change old ds-toolbox names to queso

texastribune · Jul 18, 2019 · eccd17b · eccd17b
1 parent e3a2a7d
commit eccd17b
Show file tree

Hide file tree

Showing 19 changed files with 356 additions and 95 deletions.
diff --git a/README.md b/README.md
@@ -33,7 +33,7 @@ When you add a new class, component, scss variable, mixin, etc., you'll want to
 ### SCSS docs boilerplate
 > How to document a new CSS class
 
-We use a comment parser along with some [extra logic](https://github.com/texastribune/ds-toolbox/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below: 
+We use a comment parser along with some [extra logic](https://github.com/texastribune/queso-ui/blob/master/tasks/style-doc.js) to generate our docs. To add a new section of documentation, add a boilerplate above your CSS rules like the one below: 
 
 ```scss
 // Title of Section (root-class-name)

diff --git a/assets/scss/all-legacy.scss b/assets/scss/all-legacy.scss
@@ -1,6 +1,6 @@
 // all-legacy.css
 //
-// Deprecated: We (minimally) documented our legacy styles. Moving forward, we won't use this file; it's only for reference. <div>`@import "ds-toolbox-test/assets/scss/1-settings/all-legacy"`</div>
+// Deprecated: We (minimally) documented our legacy styles. Moving forward, we won't use this file; it's only for reference. <div>`@import "@texastribune/queso-ui/assets/scss/1-settings/all-legacy"`</div>
 //
 //
 // Styleguide 0.0.1

diff --git a/assets/scss/all.scss b/assets/scss/all.scss
@@ -1,6 +1,6 @@
 // all.css
 //
-// This includes our <strong>whole system</strong>. You will very rarely want to import this. One use case is this documentation site. <div>`@import "ds-toolbox-test/assets/scss/all"`</div>
+// This includes our <strong>whole system</strong>. You will very rarely want to import this. One use case is this documentation site. <div>`@import "@texastribune/queso-ui/assets/scss/all"`</div>
 //
 // Styleguide 0.0.1
 @import '1-settings/all';

diff --git a/assets/scss/base-v2.scss b/assets/scss/base-v2.scss
@@ -1,6 +1,6 @@
 // base-v2.css
 //
-// Think of this as our <strong>MVP</strong> (most viable product). The minimum amount of styles you'd need to get up and running with a new template in our eco-system. <div>`@import "ds-toolbox-test/assets/scss/base-v2"`</div>
+// Think of this as our <strong>MVP</strong> (most viable product). The minimum amount of styles you'd need to get up and running with a new template in our eco-system. <div>`@import "@texastribune/queso-ui/assets/scss/base-v2"`</div>
 //
 // Styleguide 0.0.1
 @import '1-settings/all';

diff --git a/assets/scss/no-resets.scss b/assets/scss/no-resets.scss
@@ -1,6 +1,6 @@
 // no-resets.css
 //
-// This CSS file uses <strong>everything with the exception of our resets</strong>. We use this to generate standalone CSS for components. In that process we take the component HTML and no-resets.css. We then prune the excess CSS that isn't referenced in the HTML. If you were to navigate to _pages/components/{c-component-name}/raw-preview.html_ and view source, you'll see the pruned output of this file based on the HTML of the component. <div>`@import "ds-toolbox-test/assets/scss/no-resets"`</div>
+// This CSS file uses <strong>everything with the exception of our resets</strong>. We use this to generate standalone CSS for components. In that process we take the component HTML and no-resets.css. We then prune the excess CSS that isn't referenced in the HTML. If you were to navigate to _pages/components/{c-component-name}/raw-preview.html_ and view source, you'll see the pruned output of this file based on the HTML of the component. <div>`@import "@texastribune/queso-ui/assets/scss/no-resets"`</div>
 //
 // Styleguide 0.0.1
 @import '1-settings/all';

diff --git a/docs/config/paths.js b/docs/config/paths.js
@@ -19,9 +19,6 @@ const mappedStyles = [
   },
 ];
 
-// cache busting map
-const mappedStylesManifest = `${buildDir}css/styles.json`;
-
 const docsStyles = './assets/scss/';
 
 const mappedIcons = [
@@ -56,7 +53,6 @@ const mappedGithubData = {
 
 module.exports = {
   mappedStyles,
-  mappedStylesManifest,
   mappedGithubData,
   docsStyles,
   mappedIcons,

diff --git a/docs/config/tasks/build.js b/docs/config/tasks/build.js
@@ -8,19 +8,14 @@ const copy = require('./copy');
 const docs = require('./docs.js');
 const github = require('./github.js');
 
-const {
-  mappedStyles,
-  mappedIcons,
-  mappedCopies,
-  mappedStylesManifest,
-} = require('../paths.js');
+const { mappedStyles, mappedIcons, mappedCopies } = require('../paths.js');
 
 async function build() {
   // grab github data
   await github();
 
   // compile and move files
-  await styles(mappedStyles, mappedStylesManifest);
+  await styles(mappedStyles);
   await icons(mappedIcons);
   await copy(mappedCopies);
 

diff --git a/docs/config/tasks/dev.js b/docs/config/tasks/dev.js
@@ -10,12 +10,7 @@ const copyRunner = require('./copy');
 const docsRunner = require('./docs.js');
 const githubRunner = require('./github.js');
 
-const {
-  mappedStyles,
-  mappedCopies,
-  mappedStylesManifest,
-  mappedIcons,
-} = require('../paths.js');
+const { mappedStyles, mappedCopies, mappedIcons } = require('../paths.js');
 
 const printInstructions = (external, local) => {
   utils.logMessage(`${external} | ${local}`, 'green');
@@ -29,7 +24,7 @@ async function dev() {
     {
       logConnections: true,
       logLevel: 'silent',
-      logPrefix: 'ds-toolbox',
+      logPrefix: 'queso-ui',
       notify: false,
       open: false,
       port: 3000,
@@ -79,7 +74,7 @@ async function dev() {
 
       const compile = async () => {
         try {
-          await styles(mappedStyles, mappedStylesManifest);
+          await styles(mappedStyles);
           stylesError = null;
         } catch (e) {
           stylesError = e;

diff --git a/docs/config/tasks/docs.js b/docs/config/tasks/docs.js
@@ -7,23 +7,17 @@ const fs = require('fs-extra');
 const Purgecss = require('purgecss');
 const purgeHtml = require('purgecss-from-html');
 const path = require('path');
-const { utils } = require('@texastribune/queso-tools');
 const styleDocRunner = require('./style-doc');
 const iconDocRunner = require('./icon-doc');
 const htmlRunner = require('./html');
 
-const {
-  docsStyles,
-  docsIcons,
-  mappedStylesManifest,
-  mappedGithubData,
-} = require('../paths.js');
+const { docsStyles, docsIcons, mappedGithubData } = require('../paths.js');
 
-const COMPONENT_CSS_FILE = 'no-resets';
+const COMPONENT_CSS_FILE = 'no-resets.css';
 const COMPONENT_CSS_PATH = './docs/dist/css';
 
-const clean = async (html, bundles) => {
-  const filePath = `${COMPONENT_CSS_PATH}/${bundles[COMPONENT_CSS_FILE]}`;
+const clean = async html => {
+  const filePath = `${COMPONENT_CSS_PATH}/${COMPONENT_CSS_FILE}`;
 
   const purgecss = new Purgecss({
     content: [html],
@@ -105,7 +99,6 @@ module.exports = async () => {
   // creates object for docs
   let styleDocs = await styleDocRunner(docsStyles);
   const iconDocs = await iconDocRunner(docsIcons);
-  const bundles = await utils.getBundles(mappedStylesManifest);
 
   // add github data
   try {
@@ -119,7 +112,6 @@ module.exports = async () => {
   const allDocs = {
     styleDocs,
     iconDocs,
-    bundles,
   };
   try {
     await fs.outputFile(
@@ -139,7 +131,6 @@ module.exports = async () => {
       out: `${pagesPathOut}${section.slug}/index.html`,
       data: {
         ...section,
-        bundles,
       },
     };
   });
@@ -162,7 +153,6 @@ module.exports = async () => {
           out: `${out}.html`,
           data: {
             ...item,
-            bundles,
           },
         });
         // build raw preview
@@ -179,9 +169,7 @@ module.exports = async () => {
   await htmlRunner(componentArr);
 
   // generate component CSS
-  await Promise.all(
-    componentArr.map(component => clean(component.out, bundles))
-  );
+  await Promise.all(componentArr.map(component => clean(component.out)));
 
   // creates main
   const mainPathIn = './docs/src/index.html';

diff --git a/docs/config/tasks/style-doc.js b/docs/config/tasks/style-doc.js
@@ -14,7 +14,7 @@ const md = require('markdown-it')({ html: true });
 // internal
 const { slugify, stripTags } = require('./utils');
 
-const GITHUB_URL = 'https://github.com/texastribune/ds-toolbox/blob/master';
+const GITHUB_URL = 'https://github.com/texastribune/queso-ui/blob/master';
 
 const createMap = arr => {
   const object = {};

diff --git a/docs/src/includes/header.html b/docs/src/includes/header.html
@@ -0,0 +1,15 @@
+<header class="hero ds-header">
+  <div class="hero-body">
+    <div class="container">
+      <h1 class="title">
+      queso-ui 🧀
+      </h1>
+      <h2 class="subtitle">
+        CSS + HTML Guide for The Texas Tribune.
+      </h2>
+    </div>
+  </div>
+  <a href="https://github.com/texastribune/queso-ui/" class="ds-header__link" target="_blank" rel="noopener noreferrer">
+    <svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 24 24" class="ds-header__icon"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg>
+  </a>
+</header>
diff --git a/docs/src/index.html b/docs/src/index.html
@@ -8,27 +8,16 @@
   <meta content="ie=edge" http-equiv="X-UA-Compatible" />
   <title>CSS + HTML Guide for The Texas Tribune</title>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="css/{{bundles['all-legacy']}}" />
-  <link rel="stylesheet" href="css/{{bundles['all']}}" />
-  <link rel="stylesheet" href="css/{{bundles['ds']}}" />
+  <link rel="stylesheet" href="css/all-legacy.css" />
+  <link rel="stylesheet" href="css/all.css" />
+  <link rel="stylesheet" href="css/ds.css" />
 </head>
 
 <body class="fonts-loaded">
   <div style="display: none">
     {% include '../dist/sprites/base.html' %}
   </div>
-  <section class="hero">
-    <div class="hero-body">
-      <div class="container">
-        <h1 class="title">
-          Style Docs
-        </h1>
-        <h2 class="subtitle">
-          CSS + HTML Guide for The Texas Tribune.
-        </h2>
-      </div>
-    </div>
-  </section>
+  {% include '../src/includes/header.html' %}
   <div class="container">
     <div class="tile is-ancestor">
       <div class="tile is-parent is-vertical is-3">

diff --git a/docs/src/macros/snippet.html b/docs/src/macros/snippet.html
@@ -12,8 +12,8 @@
     <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" 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" 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" 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>
         </div>
 
 

diff --git a/docs/src/macros/title-bar.html b/docs/src/macros/title-bar.html
@@ -1,5 +1,5 @@
 {% macro titleBar(name, item) %}
-<a href="{{ item.githubLink }}" target="_blank" class="ds-breathe menu-label ds-stick-it has-text-white has-background-black-ter is-block ds-title-bar">{{name}}{%
+<a href="{{ item.githubLink }}" target="_blank" rel="noopener noreferrer" class="ds-breathe menu-label ds-stick-it has-text-white has-background-black-ter is-block ds-title-bar">{{name}}{%
   if item.depth !== 1 %} > <span class="has-text-weight-bold {% if item.experimental  %}has-text-info{% elif item.deprecated %}has-text-warning{% endif %}">{{item.prettyName}}</span>{%
 endif %}<svg xmlns="http://www.w3.org/2000/svg" class="ds-icon" width="24" height="24" viewBox="0 0 24 24"><path d="M12 0c-6.626 0-12 5.373-12 12 0 5.302 3.438 9.8 8.207 11.387.599.111.793-.261.793-.577v-2.234c-3.338.726-4.033-1.416-4.033-1.416-.546-1.387-1.333-1.756-1.333-1.756-1.089-.745.083-.729.083-.729 1.205.084 1.839 1.237 1.839 1.237 1.07 1.834 2.807 1.304 3.492.997.107-.775.418-1.305.762-1.604-2.665-.305-5.467-1.334-5.467-5.931 0-1.311.469-2.381 1.236-3.221-.124-.303-.535-1.524.117-3.176 0 0 1.008-.322 3.301 1.23.957-.266 1.983-.399 3.003-.404 1.02.005 2.047.138 3.006.404 2.291-1.552 3.297-1.23 3.297-1.23.653 1.653.242 2.874.118 3.176.77.84 1.235 1.911 1.235 3.221 0 4.609-2.807 5.624-5.479 5.921.43.372.823 1.102.823 2.222v3.293c0 .319.192.694.801.576 4.765-1.589 8.199-6.086 8.199-11.386 0-6.627-5.373-12-12-12z"/></svg></a>
 {% endmacro %}

diff --git a/docs/src/page.html b/docs/src/page.html
@@ -13,15 +13,16 @@
   <meta content="ie=edge" http-equiv="X-UA-Compatible" />
   <title>{{name}} | Style Docs for The Texas Tribune.</title>
   <link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css" rel="stylesheet" />
-  <link rel="stylesheet" href="../../css/{{bundles['all-legacy']}}" />
-  <link rel="stylesheet" href="../../css/{{bundles['all']}}" />
-  <link rel="stylesheet" href="../../css/{{bundles['ds']}}" />
+  <link rel="stylesheet" href="../../css/all-legacy.css" />
+  <link rel="stylesheet" href="../../css/all.css" />
+  <link rel="stylesheet" href="../../css/ds.css" />
 </head>
 
 <body class="fonts-loaded">
   <div style="display: none">
     {% include '../dist/sprites/base.html' %}
   </div>
+  {% include '../src/includes/header.html' %}
   <div class="container">
     <div id="content" class="tile is-ancestor ds-content">
       <div class="tile is-parent is-vertical is-3 ds-sidebar">

diff --git a/docs/src/preview.html b/docs/src/preview.html
@@ -5,9 +5,9 @@
   <meta content="width=device-width, initial-scale=1.0" name="viewport" />
   <meta content="ie=edge" http-equiv="X-UA-Compatible" />
   <title>{{header}} | Style Docs for The Texas Tribune.</title>
-  <link rel="stylesheet" href="../../css/{{bundles['all-legacy']}}" />
-  <link rel="stylesheet" href="../../css/{{bundles['all']}}" />
-  <link rel="stylesheet" href="../../css/{{bundles['ds']}}" />
+  <link rel="stylesheet" href="../../css/all-legacy.css" />
+  <link rel="stylesheet" href="../../css/all.css" />
+  <link rel="stylesheet" href="../../css/ds.css" />
 </head>
 <body>
   <div style="display: none">

diff --git a/docs/src/scss/ds.scss b/docs/src/scss/ds.scss
@@ -1,3 +1,11 @@
+.ds-header {
+  &__link {
+    position: absolute;
+    top: 1rem;
+    right: 2rem;
+  }
+}
+
 .ds-stick-it {
   position: sticky;
   top: 0;

diff --git a/package.json b/package.json
@@ -17,7 +17,7 @@
   ],
   "repository": {
     "type": "git",
-    "url": "https://github.com/texastribune/ds-toolbox.git"
+    "url": "https://github.com/texastribune/queso-ui.git"
   },
   "publishConfig": {
     "access": "public"
@@ -102,7 +102,7 @@
   },
   "homepage": "https://github.com/texastribune/queso-ui#readme",
   "devDependencies": {
-    "@texastribune/queso-tools": "^0.0.1-4",
+    "@texastribune/queso-tools": "^1.2.1",
     "axios": "^0.19.0",
     "browser-sync": "^2.26.3",
     "eslint": "^5.16.0",