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

package/module/element.js

@@ -8581,39 +8581,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'
   },
@@ -8682,7 +8705,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');
@@ -8708,7 +8731,7 @@ class StimulusTabs extends React$1.Component {
       __self: this,
       __source: {
         fileName: _jsxFileName,
-        lineNumber: 127
+        lineNumber: 130
       }
     });
     if (disabledTabs) {
@@ -8722,171 +8745,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 = {
@@ -8894,6 +8872,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,
@@ -8925,17 +8905,17 @@ class PiePassage extends HTMLElement {
     this._render();
   }
   _render() {
-    const {showTeacherInstructions = false} = this._model;
+    const {passages = [], 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,
-          teacherInstructions: passage.teacherInstructions || ''
-        };
-      });
-      let elem = React.createElement(StimulusTabs$1, {
+      const passagesTabs = passages.map((passage, index) => ({
+        id: index,
+        title: passage.title,
+        subtitle: passage.subtitle,
+        author: passage.author,
+        text: passage.text,
+        teacherInstructions: passage.teacherInstructions || ''
+      }));
+      const elem = React.createElement(StimulusTabs$1, {
         tabs: passagesTabs,
         showTeacherInstructions
       });

package/module/print-demo.js

@@ -7,28 +7,30 @@ generate.model = (id, element) => ({
   element,
   passages: [
     {
-      teacherInstructions: 'Teacher instructions tab 1',
+      teacherInstructions: 'Teacher instructions for first tab',
       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>',
+      subtitle: 'from <em>The Complete Poems of Emily Dickinson</em>',
+      author: 'by Emily Dickinson',
+      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>',
     },
     {
       title: 'Ineskeen Road, July Evening',
-      text: `The bicycles go by in twos and threes -<br/> 
-      There's a dance in Billy Brennan's barn tonight,<br/>
-      And there's the half-talk code of mysteries<br/>
-      And the wink-and-elbow language of delight.<br/>
-      Half-past eight and there is not a spot<br/>
-      Upon a mile of road, no shadow thrown<br/>
-      That might turn out a man or woman, not<br/>
-      A footfall tapping secrecies of stone. <br/>
-      <p/>
-      I have what every poet hates in spite<br/>
-      Of all the solemn talk of contemplation.<br/>
-      Oh, Alexander Selkirk knew the plight<br/>
-      Of being king and government and nation.<br/>
-      A road, a mile of kingdom. I am king<br/>
-      Of banks and stones and every blooming thing.<br/>
-      `,
+      text: `The bicycles go by in twos and threes -<br/>
+        There's a dance in Billy Brennan's barn tonight,<br/>
+        And there's the half-talk code of mysteries<br/>
+        And the wink-and-elbow language of delight.<br/>
+        Half-past eight and there is not a spot<br/>
+        Upon a mile of road, no shadow thrown<br/>
+        That might turn out a man or woman, not<br/>
+        A footfall tapping secrecies of stone. <br/>
+        <p/>
+        I have what every poet hates in spite<br/>
+        Of all the solemn talk of contemplation.<br/>
+        Oh, Alexander Selkirk knew the plight<br/>
+        Of being king and government and nation.<br/>
+        A road, a mile of kingdom. I am king<br/>
+        Of banks and stones and every blooming thing.<br/>
+        `,
     },
   ],
 });