feat(passage): add purpose tags to tabs and text + tab change event

Author: elodszopos

packages/passage/package.json

@@ -18,6 +18,7 @@
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-player-events": "^0.1.0",
+    "@pie-lib/render-ui": "^4.9.4",
     "prop-types": "^15.6.1",
     "react": "^16.8.1",
     "react-dom": "^16.8.1"

packages/passage/src/stimulus-tabs.jsx

@@ -4,11 +4,9 @@ import Tabs from '@material-ui/core/Tabs';
 import Tab from '@material-ui/core/Tab';
 import { withStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
+import { Purpose } from '@pie-lib/render-ui';
 
-
-
- 
-const styles = theme => ({
+const styles = (theme) => ({
   root: {
     flexGrow: 1,
     backgroundColor: theme.palette.background.paper,
@@ -17,14 +15,14 @@ const styles = theme => ({
     color: 'red',
   },
   tab: {
-    fontSize: '0.8125em'
+    fontSize: '0.8125em',
   },
   stickyTabs: {
     background: '#fff',
     paddingBottom: '20px',
     position: 'sticky',
-    top: 0
-  }
+    top: 0,
+  },
 });
 
 function TabContainer(props) {
@@ -39,73 +37,90 @@ function TabContainer(props) {
 
 TabContainer.propTypes = {
   children: PropTypes.node.isRequired,
-  multiple: PropTypes.bool
+  multiple: PropTypes.bool,
 };
- 
+
 class StimulusTabs extends React.Component {
   state = {
     activeTab: 0,
   };
- 
+
   handleChange = (event, activeTab) => {
-    this.setState( () => ({activeTab}));
+    this.setState(() => ({ activeTab }));
+    setTimeout(() => {
+      const tabChangeEvent = new CustomEvent('pie-ui-passage-tabChanged', {
+        detail: {
+          tab: activeTab
+        }
+      });
+
+      window.dispatchEvent(tabChangeEvent);
+    })
   };
- 
+
   render() {
     const { classes, tabs } = this.props;
     const { activeTab } = this.state;
     if (tabs && tabs.length > 1) {
       return (
         <div className={classes.root}>
-         
-            <Tabs
-              classes={{
-                root: classes.stickyTabs
-              }}
-              value={activeTab}
-              onChange={this.handleChange}
-            >
-              {
-              tabs.map( tab => (
-                <Tab
-                  className={classes.tab}
-                  key={tab.id}
-                  label={<span dangerouslySetInnerHTML={{__html: tab.title}}></span>}
-                  value={tab.id}
-                />
-                
-              ))
-              }
-            </Tabs>
-              {
-                tabs.map( tab => (
-                  activeTab === tab.id
-                    ? <TabContainer multiple key={tab.id}><div key={tab.id}  dangerouslySetInnerHTML={{__html: tab.text}} /></TabContainer>
-                    : null
-                ))
-              }
+          <Tabs
+            classes={{
+              root: classes.stickyTabs,
+            }}
+            value={activeTab}
+            onChange={this.handleChange}
+          >
+            {tabs.map((tab) => (
+              <Tab
+                className={classes.tab}
+                key={tab.id}
+                label={
+                  <Purpose purpose="passage-title">
+                    <span
+                      dangerouslySetInnerHTML={{ __html: tab.title }}
+                    ></span>
+                  </Purpose>
+                }
+                value={tab.id}
+              />
+            ))}
+          </Tabs>
+          {tabs.map((tab) =>
+            activeTab === tab.id ? (
+              <TabContainer multiple key={tab.id}>
+                <Purpose purpose="passage-text">
+                  <div
+                    key={tab.id}
+                    dangerouslySetInnerHTML={{ __html: tab.text }}
+                  />
+                </Purpose>
+              </TabContainer>
+            ) : null
+          )}
         </div>
       );
     } else if (tabs && tabs[0]) {
       return (
         <div>
-         <TabContainer><div dangerouslySetInnerHTML={{__html: tabs[0].text}} /></TabContainer>
+          <TabContainer>
+            <div dangerouslySetInnerHTML={{ __html: tabs[0].text }} />
+          </TabContainer>
         </div>
       );
     }
- 
   }
 }
- 
+
 StimulusTabs.propTypes = {
   classes: PropTypes.object.isRequired,
   tabs: PropTypes.arrayOf(
     PropTypes.shape({
       id: PropTypes.number.isRequired,
       title: PropTypes.string.isRequired,
       text: PropTypes.string.isRequired,
-    }).isRequired)
-    .isRequired,
+    }).isRequired
+  ).isRequired,
 };
- 
+
 export default withStyles(styles)(StimulusTabs);