@pie-element/passage 2.3.2-next.9 → 2.4.1-next.0

package/module/demo.js

@@ -8,6 +8,7 @@ generate.model = (id, element) => ({
   element,
   passages: [
     {
+      teacherInstructions: 'Teacher instructions tab 1',
       title: 'Hope Is the Thing with Feathers',
       text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p><p><span class="no-number">&#34;Hope is the Thing With Feathers&#34; by Emily Dickinson, from <em>The Complete Poems of Emily Dickinson</em>. In the public domain.</span></p>',
     },

package/module/element.js

@@ -1,4 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@2.0.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.1.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.0.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8576,9 +8577,11 @@ withTheme.default = _default;
 getDefaultExportFromCjs(styles$1);
 const React$1 = _dll_react;
 const PropTypes = _dll_prop_types;
+const classNames = _dll_classnames;
+const {Collapsible: Collapsible} = _dll_pie_lib__pie_toolbox_render_ui;
 const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__pie_toolbox_render_ui;
 const {Purpose: Purpose} = _dll_pie_lib__pie_toolbox_render_ui;
-const classNames = _dll_classnames;
 const _jsxFileName = "/home/circleci/repo/packages/passage/src/stimulus-tabs.jsx";
 const styles = theme => ({
   root: {
@@ -8612,6 +8615,9 @@ const styles = theme => ({
   },
   breakSpaces: {
     whiteSpace: 'break-spaces'
+  },
+  teacherInstructions: {
+    marginBottom: theme.spacing.unit * 2
   }
 });
 class StimulusTabs extends React$1.Component {
@@ -8689,8 +8695,38 @@ class StimulusTabs extends React$1.Component {
       return div.innerHTML;
     };
   }
+  renderInstructions(showTeacherInstructions, teacherInstructions, disabledTabs = false) {
+    if (!showTeacherInstructions || !teacherInstructions) {
+      return;
+    }
+    const teacherInstructionsDiv = React$1.createElement(PreviewPrompt, {
+      tagName: "div",
+      className: "prompt",
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 126
+      }
+    });
+    if (disabledTabs) {
+      return teacherInstructionsDiv;
+    }
+    return React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 139
+      }
+    }, teacherInstructionsDiv);
+  }
   render() {
-    const {classes, tabs, disabledTabs} = this.props;
+    const {classes, tabs, disabledTabs, showTeacherInstructions} = this.props;
     const {activeTab} = this.state;
     if (tabs && tabs.length > 1) {
       return disabledTabs ? React$1.createElement('div', {
@@ -8698,7 +8734,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 123
+          lineNumber: 156
         }
       }, tabs.map(tab => React$1.createElement('div', {
         key: tab.id,
@@ -8710,7 +8746,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 125
+          lineNumber: 158
         }
       }, React$1.createElement('div', {
         className: classes.tabContainer,
@@ -8720,7 +8756,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 133
+          lineNumber: 166
         }
       }, React$1.createElement('div', {
         className: classNames(classes.title, 'title'),
@@ -8730,14 +8766,14 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 139
+          lineNumber: 172
         }
-      }), React$1.createElement(Purpose, {
+      }), this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs), React$1.createElement(Purpose, {
         purpose: "passage-text",
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 143
+          lineNumber: 177
         }
       }, React$1.createElement('div', {
         className: "text",
@@ -8748,14 +8784,14 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 144
+          lineNumber: 178
         }
       })))))) : React$1.createElement('div', {
         className: classNames(classes.root, 'passages'),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 151
+          lineNumber: 185
         }
       }, React$1.createElement(Tabs, {
         classes: {
@@ -8767,7 +8803,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 152
+          lineNumber: 186
         }
       }, tabs.map(tab => React$1.createElement(Tab, {
         className: classes.tab,
@@ -8778,7 +8814,7 @@ class StimulusTabs extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 166
+            lineNumber: 200
           }
         }, React$1.createElement('span', {
           dangerouslySetInnerHTML: {
@@ -8787,7 +8823,7 @@ class StimulusTabs extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 167
+            lineNumber: 201
           }
         })),
         value: tab.id,
@@ -8799,7 +8835,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 161
+          lineNumber: 195
         }
       }))), tabs.map(tab => activeTab === tab.id ? React$1.createElement('div', {
         className: classes.tabContainer,
@@ -8810,14 +8846,14 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 182
+          lineNumber: 216
         }
-      }, React$1.createElement(Purpose, {
+      }, this.renderInstructions(showTeacherInstructions, tab.teacherInstructions), React$1.createElement(Purpose, {
         purpose: "passage-text",
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 189
+          lineNumber: 225
         }
       }, React$1.createElement('div', {
         key: tab.id,
@@ -8827,16 +8863,16 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 190
+          lineNumber: 226
         }
       }))) : null));
     } else if (tabs && tabs[0]) {
-      return React$1.createElement('div', {
+      return React$1.createElement(React$1.Fragment, null, this.renderInstructions(showTeacherInstructions, tabs[0].teacherInstructions, disabledTabs), React$1.createElement('div', {
         className: classNames(classes.root, classes.tabContainer, classes.breakSpaces, 'passage'),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 199
+          lineNumber: 237
         }
       }, React$1.createElement('div', {
         className: "text",
@@ -8846,9 +8882,9 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 200
+          lineNumber: 238
         }
-      }));
+      })));
     }
   }
 }
@@ -8857,9 +8893,11 @@ StimulusTabs.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired
+    text: PropTypes.string.isRequired,
+    teacherInstructions: PropTypes.string
   }).isRequired).isRequired,
-  disabledTabs: PropTypes.bool
+  disabledTabs: PropTypes.bool,
+  showTeacherInstructions: PropTypes.bool
 };
 var StimulusTabs$1 = styles$1.withStyles(styles)(StimulusTabs);
 const React = _dll_react;
@@ -8886,16 +8924,19 @@ class PiePassage extends HTMLElement {
     this._render();
   }
   _render() {
+    const {showTeacherInstructions = false} = this._model;
     if (this._model.passages.length > 0) {
       const passagesTabs = this._model.passages.map((passage, index) => {
         return {
           id: index,
           title: passage.title,
-          text: passage.text
+          text: passage.text,
+          teacherInstructions: passage.teacherInstructions || ''
         };
       });
       let elem = React.createElement(StimulusTabs$1, {
-        tabs: passagesTabs
+        tabs: passagesTabs,
+        showTeacherInstructions
       });
       ReactDOM.render(elem, this);
     }

package/module/index.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/passage@2.3.1</title>
+      <title>@pie-element/passage@2.4.0</title>
       <script
         type="module"
         src="https://cdn.jsdelivr.net/npm/@pslb/demo-el@^1.0.0/dist/demo-el/demo-el.esm.js"></script>

package/module/manifest.json

@@ -1,10 +1,14 @@
 {
   "name": "@pie-element/passage",
-  "version": "2.3.1",
+  "version": "2.4.0",
   "modules": [
+    {
+      "name": "@pie-lib/pie-toolbox-math-rendering-module",
+      "version": "1.1.0"
+    },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "2.0.0"
+      "version": "4.0.0"
     }
   ]
 }

package/module/print-demo.js

@@ -7,6 +7,7 @@ generate.model = (id, element) => ({
   element,
   passages: [
     {
+      teacherInstructions: 'Teacher instructions tab 1',
       title: 'Hope Is the Thing with Feathers',
       text: '<p><font style="visibility:hidden">00000</font>Hope is the thing with feathers<br /><font style="visibility:hidden">00000</font>That perches in the soul,<br /><font style="visibility:hidden">00000</font>And sings the tune without the words,<br /><font style="visibility:hidden">00000</font>And never stops at all,</p><p>5<font style="visibility:hidden">0000</font>And sweetest in the gale is heard;<br /><font style="visibility:hidden">00000</font>And sore must be the storm<br /><font style="visibility:hidden">00000</font>That could abash the little bird<br /><font style="visibility:hidden">00000</font>That kept so many warm.</p><p><font style="visibility:hidden">00000</font>I&#8217;ve heard it in the chillest land,<br />10<font style="visibility:hidden">000</font>And on the strangest sea;<br /><font style="visibility:hidden">00000</font>Yet, never, in extremity,<br /><font style="visibility:hidden">00000</font>It asked a crumb of me.</p><p><span class="no-number">&#34;Hope is the Thing With Feathers&#34; by Emily Dickinson, from <em>The Complete Poems of Emily Dickinson</em>. In the public domain.</span></p>',
     },

package/module/print.html

@@ -2,7 +2,7 @@
   <!doctype html>
   <html>
     <head>
-      <title>@pie-element/passage@2.3.1</title>
+      <title>@pie-element/passage@2.4.0</title>
       <link
         href="https://fonts.googleapis.com/css?family=Roboto&display=swap"
         rel="stylesheet"

package/module/print.js

@@ -1,4 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_pie_lib__pie_toolbox_render_ui, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-module@2.0.0/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@1.1.0/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@4.0.0/module/index.js";
 var commonjsGlobal = typeof globalThis !== 'undefined' ? globalThis : typeof window !== 'undefined' ? window : typeof global !== 'undefined' ? global : typeof self !== 'undefined' ? self : {};
 function getDefaultExportFromCjs(x) {
   return x && x.__esModule && Object.prototype.hasOwnProperty.call(x, 'default') ? x['default'] : x;
@@ -8539,9 +8540,11 @@ withTheme.default = _default;
 getDefaultExportFromCjs(styles$1);
 const React$1 = _dll_react;
 const PropTypes = _dll_prop_types;
+const classNames = _dll_classnames;
+const {Collapsible: Collapsible} = _dll_pie_lib__pie_toolbox_render_ui;
 const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
+const {PreviewPrompt: PreviewPrompt} = _dll_pie_lib__pie_toolbox_render_ui;
 const {Purpose: Purpose} = _dll_pie_lib__pie_toolbox_render_ui;
-const classNames = _dll_classnames;
 const _jsxFileName = "/home/circleci/repo/packages/passage/src/stimulus-tabs.jsx";
 const styles = theme => ({
   root: {
@@ -8575,6 +8578,9 @@ const styles = theme => ({
   },
   breakSpaces: {
     whiteSpace: 'break-spaces'
+  },
+  teacherInstructions: {
+    marginBottom: theme.spacing.unit * 2
   }
 });
 class StimulusTabs extends React$1.Component {
@@ -8652,8 +8658,38 @@ class StimulusTabs extends React$1.Component {
       return div.innerHTML;
     };
   }
+  renderInstructions(showTeacherInstructions, teacherInstructions, disabledTabs = false) {
+    if (!showTeacherInstructions || !teacherInstructions) {
+      return;
+    }
+    const teacherInstructionsDiv = React$1.createElement(PreviewPrompt, {
+      tagName: "div",
+      className: "prompt",
+      defaultClassName: "teacher-instructions",
+      prompt: teacherInstructions,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 126
+      }
+    });
+    if (disabledTabs) {
+      return teacherInstructionsDiv;
+    }
+    return React$1.createElement(Collapsible, {
+      labels: {
+        hidden: 'Show Teacher Instructions',
+        visible: 'Hide Teacher Instructions'
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 139
+      }
+    }, teacherInstructionsDiv);
+  }
   render() {
-    const {classes, tabs, disabledTabs} = this.props;
+    const {classes, tabs, disabledTabs, showTeacherInstructions} = this.props;
     const {activeTab} = this.state;
     if (tabs && tabs.length > 1) {
       return disabledTabs ? React$1.createElement('div', {
@@ -8661,7 +8697,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 123
+          lineNumber: 156
         }
       }, tabs.map(tab => React$1.createElement('div', {
         key: tab.id,
@@ -8673,7 +8709,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 125
+          lineNumber: 158
         }
       }, React$1.createElement('div', {
         className: classes.tabContainer,
@@ -8683,7 +8719,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 133
+          lineNumber: 166
         }
       }, React$1.createElement('div', {
         className: classNames(classes.title, 'title'),
@@ -8693,14 +8729,14 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 139
+          lineNumber: 172
         }
-      }), React$1.createElement(Purpose, {
+      }), this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs), React$1.createElement(Purpose, {
         purpose: "passage-text",
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 143
+          lineNumber: 177
         }
       }, React$1.createElement('div', {
         className: "text",
@@ -8711,14 +8747,14 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 144
+          lineNumber: 178
         }
       })))))) : React$1.createElement('div', {
         className: classNames(classes.root, 'passages'),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 151
+          lineNumber: 185
         }
       }, React$1.createElement(Tabs, {
         classes: {
@@ -8730,7 +8766,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 152
+          lineNumber: 186
         }
       }, tabs.map(tab => React$1.createElement(Tab, {
         className: classes.tab,
@@ -8741,7 +8777,7 @@ class StimulusTabs extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 166
+            lineNumber: 200
           }
         }, React$1.createElement('span', {
           dangerouslySetInnerHTML: {
@@ -8750,7 +8786,7 @@ class StimulusTabs extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 167
+            lineNumber: 201
           }
         })),
         value: tab.id,
@@ -8762,7 +8798,7 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 161
+          lineNumber: 195
         }
       }))), tabs.map(tab => activeTab === tab.id ? React$1.createElement('div', {
         className: classes.tabContainer,
@@ -8773,14 +8809,14 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 182
+          lineNumber: 216
         }
-      }, React$1.createElement(Purpose, {
+      }, this.renderInstructions(showTeacherInstructions, tab.teacherInstructions), React$1.createElement(Purpose, {
         purpose: "passage-text",
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 189
+          lineNumber: 225
         }
       }, React$1.createElement('div', {
         key: tab.id,
@@ -8790,16 +8826,16 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 190
+          lineNumber: 226
         }
       }))) : null));
     } else if (tabs && tabs[0]) {
-      return React$1.createElement('div', {
+      return React$1.createElement(React$1.Fragment, null, this.renderInstructions(showTeacherInstructions, tabs[0].teacherInstructions, disabledTabs), React$1.createElement('div', {
         className: classNames(classes.root, classes.tabContainer, classes.breakSpaces, 'passage'),
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 199
+          lineNumber: 237
         }
       }, React$1.createElement('div', {
         className: "text",
@@ -8809,9 +8845,9 @@ class StimulusTabs extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 200
+          lineNumber: 238
         }
-      }));
+      })));
     }
   }
 }
@@ -8820,9 +8856,11 @@ StimulusTabs.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
-    text: PropTypes.string.isRequired
+    text: PropTypes.string.isRequired,
+    teacherInstructions: PropTypes.string
   }).isRequired).isRequired,
-  disabledTabs: PropTypes.bool
+  disabledTabs: PropTypes.bool,
+  showTeacherInstructions: PropTypes.bool
 };
 var StimulusTabs$1 = styles$1.withStyles(styles)(StimulusTabs);
 const React = _dll_react;
@@ -8830,25 +8868,31 @@ const ReactDOM = _dll_react_dom;
 const {debounce: debounce} = _dll_lodash;
 const debug = _dll_debug;
 const log = debug('pie-element:passage:print');
-const preparePrintPassage = model => model.passages.map((passage, index) => {
-  return {
-    id: index,
-    title: passage.title,
-    text: passage.text
-  };
-});
+const preparePrintPassage = (model, opts) => {
+  const instr = opts.role === 'instructor';
+  return model.passages.map((passage, index) => {
+    return {
+      id: index,
+      title: passage.title,
+      text: passage.text,
+      teacherInstructions: instr && passage.teacherInstructions
+    };
+  });
+};
 class PassagePrint extends HTMLElement {
   constructor() {
     super();
     this._model = null;
+    this._options = null;
     this._session = [];
     this._rerender = debounce(() => {
       if (this._model && this._session) {
         if (this._model.passages && this._model.passages.length > 0) {
-          const printPassage = preparePrintPassage(this._model);
+          const printPassage = preparePrintPassage(this._model, this._options);
           const element = React.createElement(StimulusTabs$1, {
             tabs: printPassage,
-            disabledTabs: true
+            disabledTabs: true,
+            showTeacherInstructions: this._options.role === 'instructor'
           });
           ReactDOM.render(element, this);
         }
@@ -8864,6 +8908,9 @@ class PassagePrint extends HTMLElement {
     this._model = s;
     this._rerender();
   }
+  set options(o) {
+    this._options = o;
+  }
   connectedCallback() {}
 }
 export {PassagePrint as default};

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/passage",
-  "version": "2.3.2-next.9+0e3bad244",
+  "version": "2.4.1-next.0+6142ef5c9",
   "publishConfig": {
     "access": "public"
   },
@@ -11,13 +11,13 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
-    "@pie-lib/pie-toolbox": "1.7.4",
+    "@pie-lib/pie-toolbox": "1.8.1",
     "classnames": "^2.2.5",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "0e3bad2448efb7228818808395371d5c4df6fca1",
+  "gitHead": "6142ef5c90d80fe9f0c50572e8a99693f6420731",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },