updates to canon-core 17.4

Datawheel · Feb 8, 2019 · 612ff4a · 612ff4a
1 parent c18235b
commit 612ff4a
Show file tree

Hide file tree

Showing 44 changed files with 3,431 additions and 3,121 deletions.
diff --git a/packages/cms/app/components/Loading.css b/packages/cms/app/components/Loading.css
@@ -8,14 +8,14 @@
   top: 0;
   width: 100%;
   z-index: 100;
-  & .pt-non-ideal-state-visual {
+  & .bp3-non-ideal-state-visual {
     max-width: 200px;
     width: 100%;
-    & .pt-progress-meter {
+    & .bp3-progress-meter {
       background-color: var(--accent);
     }
   }
-  & .pt-non-ideal-state-title {
+  & .bp3-non-ideal-state-title {
     color: var(--foreground);
   }
 }
diff --git a/packages/cms/package-lock.json b/packages/cms/package-lock.json
diff --git a/packages/cms/package.json b/packages/cms/package.json
@@ -13,8 +13,8 @@
     "start": "canon-start"
   },
   "dependencies": {
-    "@blueprintjs/datetime": "^1.25.5",
-    "@blueprintjs/labs": "^0.14.5",
+    "@blueprintjs/datetime": "^3.7.1",
+    "@blueprintjs/select": "^3.6.1",
     "axios": "^0.18.0",
     "buble": "^0.19.3",
     "d3-selection": "^1.3.2",
@@ -25,11 +25,11 @@
     "react-quill": "^1.3.1"
   },
   "devDependencies": {
-    "@datawheel/canon-core": "^0.16.7",
+    "@datawheel/canon-core": "^0.17.4",
     "@datawheel/canon-logiclayer": "^0.2.2"
   },
   "peerDependencies": {
-    "@datawheel/canon-core": "^0.16.7"
+    "@datawheel/canon-core": "^0.17.4"
   },
   "repository": {
     "type": "git",

diff --git a/packages/cms/src/api/mortarRoute.js b/packages/cms/src/api/mortarRoute.js
@@ -281,9 +281,9 @@ module.exports = function(app) {
   app.get("/api/profile/:slug/:pid", async(req, res) => {
     req.setTimeout(1000 * 60 * 30); // 30 minute timeout for non-cached cube queries
     const {slug, pid} = req.params;
-    const {locale} = req.query;
+    const locale = req.query.locale || envLoc;
     const origin = `http${ req.connection.encrypted ? "s" : "" }://${ req.headers.host }`;
-    const localeString = locale ? `?locale=${locale}` : "";
+    const localeString = `?locale=${locale}`;
 
     const attribute = await db.search.findOne({where: {[sequelize.Op.or]: {id: pid, slug: pid}}});
     const {id} = attribute;
@@ -332,8 +332,8 @@ module.exports = function(app) {
   app.get("/api/topic/:slug/:pid/:topicId", async(req, res) => {
     req.setTimeout(1000 * 60 * 30); // 30 minute timeout for non-cached cube queries
     const {slug, pid, topicId} = req.params;
-    const {locale} = req.query;
-    const localeString = locale ? `?locale=${locale}` : "";
+    const locale = req.query.locale || envLoc;
+    const localeString = `?locale=${locale}`;
     const origin = `http${ req.connection.encrypted ? "s" : "" }://${ req.headers.host }`;
 
     const attribute = await db.search.findOne({where: {[sequelize.Op.or]: {id: pid, slug: pid}}});

diff --git a/packages/cms/src/cms.css b/packages/cms/src/cms.css
@@ -22,14 +22,14 @@
 
   /* keep select menus from breaking outside of container */
   & select,
-  & .pt-select {
+  & .bp3-select {
     width: 100%;
     max-width: 100%;
   }
 
   /* override blueprint margin & apply to non label elements  */
   & label,
-  & .pt-label {
+  & .bp3-label {
     margin-bottom: 1rem;
   }
 
@@ -86,11 +86,11 @@
   }
 
   & .inline-radio-group {
-    & > .pt-label,
-    & > .pt-radio {
+    & > .bp3-label,
+    & > .bp3-radio {
       display: inline-block;
     }
-    & > .pt-radio {
+    & > .bp3-radio {
       padding-left: 20px;
 
       &:not(:last-of-type) {
@@ -104,7 +104,7 @@
     z-index: 2;
   }
   /* fix blueprint popover */
-  & .pt-overlay-inline {
+  & .bp3-overlay-inline {
     position: fixed;
     top: 0;
     left: 0;
@@ -116,19 +116,19 @@
     /* hide by default */
     display: none;
 
-    &.pt-overlay-open {
+    &.bp3-overlay-open {
       display: flex;
       position: fixed;
     }
   }
-  & .pt-overlay-inline.pt-overlay-open > span {
+  & .bp3-overlay-inline.bp3-overlay-open > span {
     display: block;
     width: 100%;
     height: 100%;
   }
 
   /* dialogs */
-  & .pt-dialog {
+  & .bp3-dialog {
     width: calc(100vw - 2rem);
     height: auto;
     max-height: calc(100vh - 2rem);
@@ -143,16 +143,16 @@
       width: 56rem;
     }
   }
-  & .pt-dialog-header {
+  & .bp3-dialog-header {
     padding: 0.75rem 1.5rem;
     border-radius: 4px 4px 0 0;
     box-shadow: none;
   }
-  & .pt-dialog-footer {
+  & .bp3-dialog-footer {
     margin: 0;
     padding: 0.75rem 1.5rem;
   }
-  & .pt-dialog-close-button {
+  & .bp3-dialog-close-button {
     padding: 0.5rem 0.75rem;
     margin: -1rem;
     transition:
@@ -163,17 +163,17 @@
       transform: scale(1.25);
     }
   }
-  & .pt-dialog-body {
+  & .bp3-dialog-body {
     margin: 0;
     padding: 2.125rem 1.5rem;
   }
 
   /* input group button overrides */
-  & .pt-input-group {
+  & .bp3-input-group {
     display: flex;
     align-items: stretch;
 
-    & .pt-input:first-child:not(:last-child) {
+    & .bp3-input:first-child:not(:last-child) {
       flex: 1 1 auto;
       margin-top: 5px; /* match blueprint */
       padding: 0 1em;
@@ -216,15 +216,15 @@
     border-color 0.2s ease-out;
 
   /* override blueprint when both classes are in place */
-  &.pt-button {
+  &.bp3-button {
     box-shadow: none;
     background-image: none;
     &:hover {
       box-shadow: none;
     }
   }
 
-  & .pt-icon {
+  & .bp3-icon {
     top: -1px;
   }
 
@@ -269,7 +269,7 @@
 }
 
 /* hacks the stupid multi-select */
-.cms .pt-multi-select.pt-tag-input {
+.cms .bp3-multi-select.bp3-tag-input {
   border: 0;
   margin: 0 0 -0.5rem 0; /* reset & offset inner element margin */
   padding: 0;
@@ -289,12 +289,12 @@
     margin-bottom: 0.5rem;
   }
 
-  & .pt-tag {
+  & .bp3-tag {
     display: flex;
     line-height: 2.25;
     padding-right: 2em;
 
-    & .pt-tag-remove {
+    & .bp3-tag-remove {
       position: absolute;
       width: 100%;
       height: 100%;
@@ -303,13 +303,13 @@
   }
 
   /* the real input */
-  & .pt-input-ghost {
+  & .bp3-input-ghost {
     order: -1;
     border-radius: 3px;
     border: 1px solid var(--middle);
     padding-left: 0.75em;
     padding-right: 0.75em;
-    min-width: 180px; /* match .pt-menu min-width ¯\_(ツ)_/¯ */
+    min-width: 180px; /* match .bp3-menu min-width ¯\_(ツ)_/¯ */
   }
 }
 
@@ -509,7 +509,7 @@
     }
   }
 
-  & .pt-checkbox {
+  & .bp3-checkbox {
     margin-bottom: 0;
   }
 }

diff --git a/packages/cms/src/components/CtxMenu.jsx b/packages/cms/src/components/CtxMenu.jsx
@@ -13,13 +13,13 @@ class CtxMenu extends Component {
 
     const menu = <Menu>
       <MenuItem
-        iconName="arrow-up"
+        icon="arrow-up"
         onClick={this.props.moveItem.bind(this, node, "up")}
         text={`Move ${node.itemType} Up`}
         disabled={node.data.ordering === 0}
       />
       <MenuItem
-        iconName="arrow-down"
+        icon="arrow-down"
         onClick={this.props.moveItem.bind(this, node, "down")}
         text={`Move ${node.itemType} Down`}
         disabled={node.data.ordering === this.props.parentLength - 1}
@@ -31,30 +31,30 @@ class CtxMenu extends Component {
       */}
       {node.itemType !== "profile" &&
         <MenuItem
-          iconName="add"
+          icon="add"
           onClick={this.props.addItem.bind(this, node, "above")}
           text={`Add ${node.itemType} Above`}
         />
       }
       {node.itemType !== "profile" &&
         <MenuItem
-          iconName="add"
+          icon="add"
           onClick={this.props.addItem.bind(this, node, "below")}
           text={`Add ${node.itemType} Below`}
         />
       }
       {node.itemType !== "profile" && <MenuDivider />}
       <MenuItem
-        className="pt-intent-danger"
+        className="bp3-intent-danger"
         onClick={this.props.deleteItem.bind(this, node)}
         text={`Delete ${node.itemType}`}
-        iconName="delete"
+        icon="delete"
         disabled={this.props.parentLength === 1} />
     </Menu>;
 
     return (
       <Popover content={menu} position={Position.RIGHT_TOP}>
-        <span className="pt-icon-standard pt-icon-cog" />
+        <span className="bp3-icon-standard bp3-icon-cog" />
       </Popover>
     );
   }

diff --git a/packages/cms/src/components/FooterButtons.jsx b/packages/cms/src/components/FooterButtons.jsx
@@ -8,15 +8,15 @@ class FooterButtons extends Component {
 
     return (
       <div id="buttons">
-        <div className="pt-dialog-footer">
-          <div className="pt-dialog-footer-actions">
+        <div className="bp3-dialog-footer">
+          <div className="bp3-dialog-footer-actions">
             {this.props.onDelete &&
               <button className="cms-dialog-footer-button" onClick={onDelete}>
-                <span className="cms-dialog-footer-button-icon pt-icon pt-icon-trash" /> Delete
+                <span className="cms-dialog-footer-button-icon bp3-icon bp3-icon-trash" /> Delete
               </button>
             }
             <button className="cms-dialog-footer-button" onClick={onSave}>
-              <span className="cms-dialog-footer-button-icon pt-icon pt-icon-tick-circle" /> Save & close
+              <span className="cms-dialog-footer-button-icon bp3-icon bp3-icon-tick-circle" /> Save & close
             </button>
           </div>
         </div>

diff --git a/packages/cms/src/components/MoveButtons.jsx b/packages/cms/src/components/MoveButtons.jsx
@@ -75,14 +75,14 @@ class MoveButtons extends Component {
           <button
             className="cms-button cms-reorder-button cms-reorder-button-back"
             onClick={() => this.move("left")}>
-            <span className="pt-icon pt-icon-arrow-left" />
+            <span className="bp3-icon bp3-icon-arrow-left" />
           </button> }
         {item.ordering < array.length - 1 &&
           <button
             className="cms-button cms-reorder-button cms-reorder-button-forward"
             onClick={() => this.move("right")}
           >
-            <span className="pt-icon pt-icon-arrow-right" />
+            <span className="bp3-icon bp3-icon-arrow-right" />
           </button> }
       </div>
     );

diff --git a/packages/cms/src/components/Search/Search.css b/packages/cms/src/components/Search/Search.css
@@ -2,16 +2,16 @@
   width: 100%;
   margin-top: 5px; /* mimic blueprint label margin */
 
-  & > span, & .pt-popover-target, & .pt-input-group, & .pt-overlay-content, & .pt-popover, & .pt-popover-content {
+  & > span, & .bp3-popover-target, & .bp3-input-group, & .bp3-overlay-content, & .bp3-popover, & .bp3-popover-content {
     max-width: none;
     width: 100%;
   }
 
-  & .pt-input {
+  & .bp3-input {
     border-radius: 2px !important;
   }
 
-  & .pt-overlay-content {
+  & .bp3-overlay-content {
     box-shadow:
       0 0 0 1px rgba(16, 22, 26, 0.1),
       0 2px 4px rgba(16, 22, 26, 0.2),

diff --git a/packages/cms/src/components/Search/Search.jsx b/packages/cms/src/components/Search/Search.jsx
@@ -1,6 +1,6 @@
 import React, {Component} from "react";
 import PropTypes from "prop-types";
-import {Popover2} from "@blueprintjs/labs";
+import {Popover} from "@blueprintjs/core";
 
 import axios from "axios";
 
@@ -150,13 +150,13 @@ class Search extends Component {
     const show = searchEmpty || active && userQuery.length;
 
     return (
-      <div ref={comp => this.container = comp} className={`cms-search pt-control-group canon-search ${className} ${active ? "active" : ""}`}>
+      <div ref={comp => this.container = comp} className={`cms-search bp3-control-group canon-search ${className} ${active ? "active" : ""}`}>
         {InactiveComponent && <InactiveComponent active={active} onClick={this.onToggle.bind(this)} />}
-        <Popover2 minimal={true} inline={true} autoFocus={false} isOpen={show}>
-          <div className={`pt-input-group pt-fill ${active ? "active" : ""}`}>
-            {icon && <span className="pt-icon pt-icon-search"></span>}
-            <input type="text" className="pt-input" ref={input => this.input = input} onChange={this.onChange.bind(this)} onFocus={this.onFocus.bind(this)} placeholder={placeholder} value={userQuery} />
-            {buttonLink && <a href={`${buttonLink}?q=${userQuery}`} className="pt-button">{buttonText}</a>}
+        <Popover minimal={true} usePortal={false} autoFocus={false} isOpen={show}>
+          <div className={`bp3-input-group bp3-fill ${active ? "active" : ""}`}>
+            {icon && <span className="bp3-icon bp3-icon-search"></span>}
+            <input type="text" className="bp3-input" ref={input => this.input = input} onChange={this.onChange.bind(this)} onFocus={this.onFocus.bind(this)} placeholder={placeholder} value={userQuery} />
+            {buttonLink && <a href={`${buttonLink}?q=${userQuery}`} className="bp3-button">{buttonText}</a>}
           </div>
           <ul className={active ? "results active" : "results"}>
             {results.map(result =>
@@ -167,9 +167,9 @@ class Search extends Component {
               </li>
             )}
             {!results.length && <li className="no-results">No Results Found</li>}
-            {results.length && buttonLink ? <a className="all-results pt-button pt-fill" href={`${buttonLink}?q=${userQuery}`}>Show All Results</a> : null}
+            {results.length && buttonLink ? <a className="all-results bp3-button bp3-fill" href={`${buttonLink}?q=${userQuery}`}>Show All Results</a> : null}
           </ul>
-        </Popover2>
+        </Popover>
       </div>
     );