@pie-element/passage 2.13.1-next.0 → 2.13.1-next.5

package/module/print.js

@@ -8544,39 +8544,62 @@ 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 _jsxFileName = "/home/circleci/repo/packages/passage/src/stimulus-tabs.jsx";
+function _optionalChain(ops) {
+  let lastAccessLHS = undefined;
+  let value = ops[0];
+  let i = 1;
+  while (i < ops.length) {
+    const op = ops[i];
+    const fn = ops[i + 1];
+    i += 2;
+    if ((op === 'optionalAccess' || op === 'optionalCall') && value == null) {
+      return undefined;
+    }
+    if (op === 'access' || op === 'optionalAccess') {
+      lastAccessLHS = value;
+      value = fn(value);
+    } else if (op === 'call' || op === 'optionalCall') {
+      value = fn((...args) => value.call(lastAccessLHS, ...args));
+      lastAccessLHS = undefined;
+    }
+  }
+  return value;
+}
 const styles = theme => ({
-  root: {
+  passages: {
     flexGrow: 1,
     backgroundColor: color.background(),
     color: color.text()
   },
-  tab: {
-    background: theme.palette.common.white,
-    fontSize: 'inherit',
-    color: theme.palette.common.black
+  passage: {
+    backgroundColor: color.background(),
+    color: color.text(),
+    padding: theme.spacing.unit * 2
+  },
+  passageTitle: {
+    fontSize: '1.75rem'
+  },
+  passageSubtitle: {
+    fontSize: '1.5rem'
+  },
+  passageAuthor: {
+    fontSize: '1.25rem'
   },
+  passageText: {},
   stickyTabs: {
     background: color.background(),
     position: 'sticky',
     top: 0
   },
-  title: {
-    textTransform: 'uppercase',
-    padding: `${theme.spacing.unit}px ${theme.spacing.unit * 3}px`,
-    borderBottom: `2px solid ${color.secondary()}`,
-    width: 'fit-content',
-    marginBottom: theme.spacing.unit
+  tab: {
+    background: theme.palette.common.white,
+    fontSize: 'inherit',
+    color: theme.palette.common.black
   },
-  buttonContainer: {
+  tabButton: {
     background: theme.palette.common.white
   },
-  tabContainer: {
-    backgroundColor: color.background(),
-    color: color.text(),
-    padding: theme.spacing.unit * 2
-  },
   breakSpaces: {
     whiteSpace: 'break-spaces'
   },
@@ -8645,7 +8668,7 @@ class StimulusTabs extends React$1.Component {
     };
   }
   __init4() {
-    this.parsedText = text => {
+    this.parsedText = (text = '') => {
       const div = document.createElement('div');
       div.innerHTML = text.replace(/(<br\/>\n)/g, '<br/>');
       const audio = div.querySelector('audio');
@@ -8671,7 +8694,7 @@ class StimulusTabs extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 127
+        lineNumber: 130
       }
     });
     if (disabledTabs) {
@@ -8685,171 +8708,126 @@ class StimulusTabs extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 140
+        lineNumber: 143
       }
     }, teacherInstructionsDiv);
   }
+  renderTab(tab, showTeacherInstructions, disabledTabs) {
+    const {classes} = this.props;
+    return React$1.createElement('div', {
+      className: classNames(classes.passage, 'passage'),
+      key: tab.id,
+      id: `tabpanel-${tab.id}`,
+      role: "tabpanel",
+      'aria-labelledby': `button-${tab.id}`,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 158
+      }
+    }, this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs), React$1.createElement('h2', {
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 166
+      }
+    }, React$1.createElement('div', {
+      className: classNames(classes.passageTitle, 'title'),
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.title)
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 167
+      }
+    }), React$1.createElement('div', {
+      className: classNames(classes.passageSubtitle, 'subtitle'),
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.subtitle)
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 171
+      }
+    })), React$1.createElement('div', {
+      className: classNames(classes.passageAuthor, 'author'),
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.author)
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 176
+      }
+    }), React$1.createElement('div', {
+      key: tab.id,
+      className: classNames(classes.passageText, 'text'),
+      dangerouslySetInnerHTML: {
+        __html: this.parsedText(tab.text)
+      },
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 180
+      }
+    }));
+  }
   render() {
     const {classes, tabs, disabledTabs, showTeacherInstructions} = this.props;
     const {activeTab} = this.state;
-    if (tabs && tabs.length > 1) {
-      return disabledTabs ? React$1.createElement('div', {
-        className: classNames(classes.root, 'passages'),
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 157
-        }
-      }, tabs.map(tab => React$1.createElement('div', {
-        key: tab.id,
-        className: `passage-${tab.id}`,
-        id: `tabpanel-${tab.id}`,
-        'aria-labelledby': `tab-${tab.id}`,
-        'aria-controls': `tabpanel-${tab.id}`,
-        tabIndex: "0",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 159
-        }
-      }, React$1.createElement('div', {
-        className: classes.tabContainer,
-        id: `tabpanel-${tab.id}`,
-        role: "tabpanel",
-        'aria-labelledby': `button-${tab.id}`,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 167
-        }
-      }, React$1.createElement('div', {
-        className: classNames(classes.title, 'title'),
+    if (!_optionalChain([tabs, 'optionalAccess', _ => _.length])) {
+      return;
+    }
+    const selectedTab = (tabs || []).find(tab => tab.id === activeTab);
+    return React$1.createElement('div', {
+      className: classNames(classes.passages, {
+        [classes.breakSpaces]: tabs.length === 1
+      }, 'passages'),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 200
+      }
+    }, disabledTabs || tabs.length === 1 ? tabs.map(tab => this.renderTab(tab, showTeacherInstructions, disabledTabs)) : React$1.createElement(React$1.Fragment, null, React$1.createElement(Tabs, {
+      classes: {
+        root: classes.stickyTabs,
+        flexContainer: classes.tabButton
+      },
+      value: activeTab,
+      onChange: this.handleChange,
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 205
+      }
+    }, tabs.map(tab => React$1.createElement(Tab, {
+      className: classes.tab,
+      key: tab.id,
+      id: `button-${tab.id}`,
+      label: React$1.createElement('span', {
         dangerouslySetInnerHTML: {
           __html: this.parsedText(tab.title)
         },
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 173
-        }
-      }), this.renderInstructions(showTeacherInstructions, tab.teacherInstructions, disabledTabs), React$1.createElement(Purpose, {
-        purpose: "passage-text",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 178
-        }
-      }, React$1.createElement('div', {
-        className: "text",
-        key: tab.id,
-        dangerouslySetInnerHTML: {
-          __html: this.parsedText(tab.text)
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 179
-        }
-      })))))) : React$1.createElement('div', {
-        className: classNames(classes.root, 'passages'),
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 186
-        }
-      }, React$1.createElement(Tabs, {
-        classes: {
-          root: classes.stickyTabs,
-          flexContainer: classes.buttonContainer
-        },
-        value: activeTab,
-        onChange: this.handleChange,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 187
-        }
-      }, tabs.map(tab => React$1.createElement(Tab, {
-        className: classes.tab,
-        key: tab.id,
-        id: `button-${tab.id}`,
-        label: React$1.createElement(Purpose, {
-          purpose: "passage-title",
-          __self: this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 201
-          }
-        }, React$1.createElement('span', {
-          dangerouslySetInnerHTML: {
-            __html: this.parsedText(tab.title)
-          },
-          __self: this,
-          __source: {
-            fileName: _jsxFileName,
-            lineNumber: 202
-          }
-        })),
-        value: tab.id,
-        tabIndex: activeTab === tab.id ? 0 : -1,
-        'aria-controls': `tabpanel-${tab.id}`,
-        'aria-selected': activeTab === tab.id,
-        onFocus: () => this.handleChange(null, tab.id),
-        onKeyDown: event => this.handleKeyDown(event, tab.id),
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 196
-        }
-      }))), tabs.map(tab => activeTab === tab.id ? React$1.createElement('div', {
-        className: classes.tabContainer,
-        key: tab.id,
-        id: `tabpanel-${tab.id}`,
-        role: "tabpanel",
-        'aria-labelledby': `button-${tab.id}`,
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 217
-        }
-      }, this.renderInstructions(showTeacherInstructions, tab.teacherInstructions), React$1.createElement(Purpose, {
-        purpose: "passage-text",
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 226
-        }
-      }, React$1.createElement('div', {
-        key: tab.id,
-        dangerouslySetInnerHTML: {
-          __html: this.parsedText(tab.text)
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 227
-        }
-      }))) : null));
-    } else if (tabs && tabs[0]) {
-      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: 238
-        }
-      }, React$1.createElement('div', {
-        className: "text",
-        dangerouslySetInnerHTML: {
-          __html: this.parsedText(tabs[0].text)
-        },
-        __self: this,
-        __source: {
-          fileName: _jsxFileName,
-          lineNumber: 239
+          lineNumber: 218
         }
-      })));
-    }
+      }),
+      value: tab.id,
+      tabIndex: activeTab === tab.id ? 0 : -1,
+      'aria-controls': `tabpanel-${tab.id}`,
+      'aria-selected': activeTab === tab.id,
+      onFocus: () => this.handleChange(null, tab.id),
+      onKeyDown: event => this.handleKeyDown(event, tab.id),
+      __self: this,
+      __source: {
+        fileName: _jsxFileName,
+        lineNumber: 214
+      }
+    }))), selectedTab ? this.renderTab(selectedTab, showTeacherInstructions, disabledTabs) : null));
   }
 }
 StimulusTabs.propTypes = {
@@ -8857,6 +8835,8 @@ StimulusTabs.propTypes = {
   tabs: PropTypes.arrayOf(PropTypes.shape({
     id: PropTypes.number.isRequired,
     title: PropTypes.string.isRequired,
+    subtitle: PropTypes.string,
+    author: PropTypes.string,
     text: PropTypes.string.isRequired,
     teacherInstructions: PropTypes.string
   }).isRequired).isRequired,
@@ -8870,15 +8850,15 @@ const {debounce: debounce} = _dll_lodash;
 const debug = _dll_debug;
 const log = debug('pie-element:passage:print');
 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
-    };
-  });
+  const isInstructor = opts.role === 'instructor';
+  return model.passages.map((passage, index) => ({
+    id: index,
+    title: passage.title,
+    subtitle: passage.subtitle,
+    author: passage.author,
+    text: passage.text,
+    teacherInstructions: isInstructor && passage.teacherInstructions
+  }));
 };
 class PassagePrint extends HTMLElement {
   constructor() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/passage",
-  "version": "2.13.1-next.0+ce4977a7a",
+  "version": "2.13.1-next.5+13679356e",
   "publishConfig": {
     "access": "public"
   },
@@ -17,7 +17,7 @@
     "react": "^16.8.1",
     "react-dom": "^16.8.1"
   },
-  "gitHead": "ce4977a7a30f00151e885e5c41b69d6e3a5ee571",
+  "gitHead": "13679356ec1bc148cb4629364e415bb60cd77ec3",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },