UIKit Refactor Part 7: Modal Refactor

lerna.json

@@ -1,5 +1,5 @@
 {
-  "lerna": "3.2.1",
+  "lerna": "3.10.8",
   "packages": [
     "packages/*"
   ],

package.json

@@ -1,12 +1,14 @@
 {
-  "devDependencies": {
-    "lerna": "3.2.1"
+  "dependencies": {
+    "lerna": "3.10.8",
+    "prettier": "^1.14.3",
+    "pretty-quick": "^1.8.0"
   },
   "private": true,
   "scripts": {
     "bootstrap": "lerna bootstrap",
-    "setup": "npm run bootstrap && npm run build:uikit",
-    "build:uikit": "lerna exec --scope @pattern-lab/uikit-workshop -- npm run build",
+    "setup": "npm install && npm run bootstrap && npm run build:uikit",
+    "build:uikit": "cd packages/uikit-workshop && npm run build",
     "precommit": "pretty-quick --staged",
     "prettier": "prettier --config .prettierrc --write ./**/*.js --ignore-path .prettierignore",
     "test": "lerna run test",

packages/core/src/lib/addPattern.js

@@ -1,7 +1,5 @@
 'use strict';
 
-const _ = require('lodash');
-
 const logger = require('./log');
 
 module.exports = function(pattern, patternlab) {

packages/core/src/lib/buildPatterns.js

@@ -141,7 +141,10 @@ module.exports = (deletePatternDir, patternlab, additionalData) => {
                     }
                     //render all patterns last, so lineageR works
                     const allPatternsPromise = patternsToBuild.map(pattern =>
-                      compose(pattern, patternlab)
+                      compose(
+                        pattern,
+                        patternlab
+                      )
                     );
                     //copy non-pattern files like JavaScript
                     const allJS = patternsToBuild.map(pattern => {

packages/core/src/lib/markModifiedPatterns.js

@@ -28,10 +28,8 @@ module.exports = function(lastModified, patternlab) {
       array.forEach(func);
     }
   };
-  const modifiedOrNot = _.groupBy(
-    patternlab.patterns,
-    p =>
-      changes_hunter.needsRebuild(lastModified, p) ? 'modified' : 'notModified'
+  const modifiedOrNot = _.groupBy(patternlab.patterns, p =>
+    changes_hunter.needsRebuild(lastModified, p) ? 'modified' : 'notModified'
   );
 
   // For all unmodified patterns load their rendered template output

packages/core/src/lib/object_factory.js

@@ -76,7 +76,9 @@ const Pattern = function(relPath, data, patternlab) {
   // (rendered!) html file for this pattern, to be shown in the iframe
   this.patternLink = this.patternSectionSubtype
     ? `$${this.name}/index.html`
-    : patternlab ? this.getPatternLink(patternlab, 'rendered') : null;
+    : patternlab
+    ? this.getPatternLink(patternlab, 'rendered')
+    : null;
 
   // The canonical "key" by which this pattern is known. This is the callable
   // name of the pattern. UPDATE: this.key is now known as this.patternPartial

packages/core/src/lib/plugin_manager.js

@@ -3,9 +3,6 @@
 const plugin_manager = function() {
   const path = require('path');
   const findModules = require('./findModules');
-
-  const _ = require('lodash');
-
   const logger = require('./log');
 
   const pluginMatcher = /^plugin-(.*)$/;

packages/uikit-workshop/dist/index.html

@@ -77,27 +77,7 @@
 
 </div>
 <!--end pl-c-viewport-->
-      <div class="pl-c-modal__cover pl-js-modal-cover"></div>
-<div class="pl-c-modal pl-js-modal">
-    <div class="pl-c-modal__toolbar">
-        <div class="pl-c-modal__resizer pl-js-modal-resizer"></div>
-        <div class="pl-c-modal__toolbar-controls">
-            <!-- @todo: revisit to see if slotted content might make sense here (ex. to have an extra toggle for switching the layout -->
-            <pl-toggle-layout></pl-toggle-layout>
-
-            <button class="pl-c-modal__close-btn pl-js-modal-close-btn" title="Hide pattern info">
-                <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="12" height="12" viewBox="0 0 12 12" class="pl-c-modal__close-btn-icon">
-                    <title>Close</title>
-                    <path fill="currentColor" d="M11.8905,9.6405 L11.8905,9.6405 L8.25,6 L11.8905,2.3595 L11.8905,2.3595 C11.9295,2.3205 11.958,2.27475 11.976,2.226 C12.0255,2.0925 11.997,1.9365 11.8905,1.82925 L10.17075,0.1095 C10.0635,0.00225 9.9075,-0.02625 9.774,0.024 C9.72525,0.042 9.6795,0.0705 9.6405,0.1095 L9.6405,0.1095 L6,3.75 L2.3595,0.1095 L2.3595,0.1095 C2.3205,0.0705 2.27475,0.042 2.226,0.024 C2.0925,-0.0255 1.9365,0.00225 1.82925,0.1095 L0.1095,1.82925 C0.00225,1.9365 -0.02625,2.0925 0.024,2.226 C0.042,2.27475 0.0705,2.3205 0.1095,2.3595 L0.1095,2.3595 L3.75,6 L0.1095,9.6405 L0.1095,9.6405 C0.0705,9.6795 0.042,9.72525 0.024,9.774 C-0.0255,9.9075 0.00225,10.0635 0.1095,10.17075 L1.82925,11.8905 C1.9365,11.99775 2.0925,12.02625 2.226,11.976 C2.27475,11.958 2.3205,11.9295 2.3595,11.8905 L2.3595,11.8905 L6,8.25 L9.6405,11.8905 L9.6405,11.8905 C9.6795,11.9295 9.72525,11.958 9.774,11.976 C9.9075,12.0255 10.0635,11.99775 10.17075,11.8905 L11.8905,10.17075 C11.99775,10.0635 12.02625,9.9075 11.976,9.774 C11.958,9.72525 11.9295,9.6795 11.8905,9.6405 L11.8905,9.6405 Z"></path>
-                </svg>
-            </button>
-        </div>
-    </div>
-    <div class="pl-c-modal__content-wrapper">
-        <div class="pl-c-modal__content pl-js-modal-content"></div>
-    </div>
-</div>
-
+      <pl-drawer></pl-drawer>
     </div>
   </pl-layout>
 
@@ -229,9 +209,7 @@
 
     <ul class="pl-c-tools__list pl-js-acc-panel">
         <li class="pl-c-tools__item">
-            <button class="pl-c-tools__action pl-js-pattern-info-toggle">Show Pattern Info</button>
-            <!-- WIP - commenting out for now -->
-            <!-- <pl-info-toggle></pl-info-toggle> -->
+            <pl-toggle-info></pl-toggle-info>
         </li>
         <li class="pl-c-tools__item">
             <pl-toggle-layout text="Switch Layout"><pl-toggle-layout>