@pie-element/rubric 4.7.3-next.16 → 4.7.3-next.19

package/lib/main.js

@@ -29,10 +29,6 @@ var _ListItem = _interopRequireDefault(require("@material-ui/core/ListItem"));
 
 var _List = _interopRequireDefault(require("@material-ui/core/List"));
 
-var _ListItemText = _interopRequireDefault(require("@material-ui/core/ListItemText"));
-
-var _Link = _interopRequireDefault(require("@material-ui/core/Link"));
-
 var _Collapse = _interopRequireDefault(require("@material-ui/core/Collapse"));
 
 var _renderUi = require("@pie-lib/pie-toolbox/render-ui");
@@ -91,6 +87,8 @@ var Rubric = /*#__PURE__*/function (_React$Component) {
   }, {
     key: "render",
     value: function render() {
+      var _this2 = this;
+
       var _this$props = this.props,
           model = _this$props.model,
           value = _this$props.value,
@@ -113,46 +111,72 @@ var Rubric = /*#__PURE__*/function (_React$Component) {
           return /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, {
             key: index
           }, /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            key: "P".concat(index)
-          }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-            className: classes.rubricCol,
-            primary: /*#__PURE__*/_react["default"].createElement("div", {
-              className: classes.text
-            }, pointsLabel === 1 ? "".concat(pointsLabel, " PT") : "".concat(pointsLabel, " PTS"))
-          }), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-            primary: /*#__PURE__*/_react["default"].createElement("div", {
-              className: classes.text,
-              dangerouslySetInnerHTML: {
-                __html: desc
-              }
-            })
+            key: "P".concat(index),
+            className: classes.listColumn
+          }, /*#__PURE__*/_react["default"].createElement("h3", {
+            className: classes.titleText
+          }, pointsLabel === 1 ? "".concat(pointsLabel, " PT") : "".concat(pointsLabel, " PTS")), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.text,
+            dangerouslySetInnerHTML: {
+              __html: desc
+            }
           })), sampleAnswers && sampleAnswers[index] && /*#__PURE__*/_react["default"].createElement(_ListItem["default"], {
-            key: "S".concat(index)
-          }, /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-            className: classes.rubricCol,
+            key: "S".concat(index),
+            className: classes.listColumn
+          }, /*#__PURE__*/_react["default"].createElement("h4", {
+            className: classes.titleText,
             style: {
-              marginLeft: '20px'
-            },
-            primary: /*#__PURE__*/_react["default"].createElement("div", {
-              className: classes.text
-            }, "Sample Answer")
-          }), /*#__PURE__*/_react["default"].createElement(_ListItemText["default"], {
-            primary: /*#__PURE__*/_react["default"].createElement("div", {
-              className: classes.text,
-              dangerouslySetInnerHTML: {
-                __html: sampleAnswers[index]
-              }
-            })
+              fontWeight: 'normal'
+            }
+          }, "Sample Answer"), /*#__PURE__*/_react["default"].createElement("div", {
+            className: classes.text,
+            dangerouslySetInnerHTML: {
+              __html: sampleAnswers[index]
+            }
           })));
         }));
 
         return /*#__PURE__*/_react["default"].createElement(_renderUi.UiLayout, {
           extraCSSRules: extraCSSRules,
           className: classes.root
-        }, !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement(_Link["default"], {
-          href: this.dudUrl,
-          onClick: this.toggleRubric
-        }, this.state.linkPrefix, " Rubric"), /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
+        }, /*#__PURE__*/_react["default"].createElement("h2", {
+          className: classes.hiddenScreenReader
+        }, "Rubric"), !animationsDisabled ? /*#__PURE__*/_react["default"].createElement(_react["default"].Fragment, null, /*#__PURE__*/_react["default"].createElement("h2", {
+          id: 'rubric-toggle',
+          className: classes.rubricToggle,
+          tabIndex: 0,
+          role: "button",
+          "aria-expanded": this.state.rubricOpen,
+          onClick: this.toggleRubric,
+          onKeyPress: function onKeyPress(e) {
+            if (e.key === 'Enter' || e.key === ' ') _this2.toggleRubric();
+          }
+        }, this.state.linkPrefix, " Rubric", /*#__PURE__*/_react["default"].createElement("span", {
+          className: classes.chevronStyle,
+          "aria-hidden": "true"
+        }, this.state.rubricOpen ? /*#__PURE__*/_react["default"].createElement("svg", {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }, /*#__PURE__*/_react["default"].createElement("polyline", {
+          points: "18 15 12 9 6 15"
+        })) : /*#__PURE__*/_react["default"].createElement("svg", {
+          width: "20",
+          height: "20",
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: "2",
+          strokeLinecap: "round",
+          strokeLinejoin: "round"
+        }, /*#__PURE__*/_react["default"].createElement("polyline", {
+          points: "6 9 12 15 18 9"
+        })))), /*#__PURE__*/_react["default"].createElement(_Collapse["default"], {
           "in": this.state.rubricOpen,
           timeout: "auto"
         }, rubricList)) : rubricList);
@@ -171,18 +195,57 @@ var Rubric = /*#__PURE__*/function (_React$Component) {
   value: RubricType
 });
 
-var styles = function styles() {
+var styles = function styles(theme) {
   return {
     root: {
       color: _renderUi.color.text(),
       backgroundColor: _renderUi.color.background()
     },
-    rubricCol: {
-      flex: '0 1 auto',
-      minWidth: 'fit-content'
+    listColumn: {
+      display: 'flex',
+      flexDirection: 'column',
+      alignItems: 'flex-start',
+      padding: '12px 0px'
+    },
+    listColumnItem: {
+      padding: 0
     },
     text: {
       color: _renderUi.color.text()
+    },
+    titleText: {
+      color: _renderUi.color.text(),
+      fontSize: '16px',
+      fontWeight: '700',
+      margin: 0,
+      paddingBottom: '6px'
+    },
+    rubricToggle: {
+      display: 'flex',
+      alignItems: 'center',
+      cursor: 'pointer',
+      userSelect: 'none',
+      fontSize: theme.typography.fontSize,
+      fontWeight: '500',
+      color: _renderUi.color.tertiary(),
+      margin: 0
+    },
+    chevronStyle: {
+      display: 'inline-flex',
+      transition: 'transform 0.2s',
+      marginLeft: 2,
+      alignSelf: 'center'
+    },
+    hiddenScreenReader: {
+      position: 'absolute',
+      width: '1px',
+      height: '1px',
+      padding: 0,
+      margin: '-1px',
+      overflow: 'hidden',
+      clip: 'rect(0,0,0,0)',
+      border: 0,
+      whiteSpace: 'nowrap'
     }
   };
 };

package/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["RubricType","PropTypes","shape","excludeZero","bool","points","arrayOf","string","sampleAnswers","animationsDisabled","Rubric","props","index","value","state","rubricOpen","linkPrefix","toggleRubric","bind","setState","model","classes","extraCSSRules","rubricList","slice","reverse","map","desc","length","pointsLabel","rubricCol","text","__html","marginLeft","root","dudUrl","React","Component","object","isRequired","styles","color","backgroundColor","background","flex","minWidth"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport ListItem from '@material-ui/core/ListItem';\nimport List from '@material-ui/core/List';\nimport ListItemText from '@material-ui/core/ListItemText';\nimport Link from '@material-ui/core/Link';\nimport Collapse from '@material-ui/core/Collapse';\nimport { color, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport PropTypes from 'prop-types';\n\nexport const RubricType = PropTypes.shape({\n  excludeZero: PropTypes.bool,\n  points: PropTypes.arrayOf(PropTypes.string),\n  sampleAnswers: PropTypes.arrayOf(PropTypes.string),\n  animationsDisabled: PropTypes.bool,\n});\n\nclass Rubric extends React.Component {\n  dudUrl = 'javascript:;';\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      rubricOpen: false,\n      linkPrefix: 'Show',\n    };\n    this.toggleRubric = this.toggleRubric.bind(this);\n  }\n\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    animationsDisabled: PropTypes.bool,\n    value: RubricType,\n  };\n\n  toggleRubric() {\n    this.setState({ rubricOpen: !this.state.rubricOpen });\n    this.setState({ linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide' });\n  }\n\n  shouldRenderPoint = (index, value) => {\n    if (!value.excludeZero) {\n      return true;\n    } else {\n      return index !== 0;\n    }\n  };\n\n  render() {\n    const { model, value, classes } = this.props;\n    let { animationsDisabled } = this.props;\n    animationsDisabled = animationsDisabled || value.animationsDisabled;\n\n    if (value && value.points) {\n      const { extraCSSRules } = model || {};\n      const { points, sampleAnswers } = value;\n\n      const rubricList = (\n        <List component=\"nav\">\n          {points\n            .slice(0)\n            .reverse()\n            .map((desc, index) => {\n              index = points.length - index - 1;\n              const pointsLabel = value.excludeZero ? index + 1: index;\n\n              return (\n                  <React.Fragment key={index}>\n                    <ListItem key={`P${index}`}>\n                      <ListItemText\n                          className={classes.rubricCol}\n                          primary={<div className={classes.text}>{pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`}</div>}\n                      />\n\n                      <ListItemText\n                          primary={<div className={classes.text} dangerouslySetInnerHTML={{ __html: desc }} />}\n                      />\n                    </ListItem>\n\n                    {sampleAnswers && sampleAnswers[index] && (\n                        <ListItem key={`S${index}`}>\n                          <ListItemText\n                              className={classes.rubricCol}\n                              style={{ marginLeft: '20px' }}\n                              primary={<div className={classes.text}>Sample Answer</div>}\n                          />\n\n                          <ListItemText\n                              primary={\n                                <div className={classes.text} dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />\n                              }\n                          />\n                        </ListItem>\n                    )}\n                  </React.Fragment>\n              );\n            })}\n        </List>\n      );\n\n      return (\n        <UiLayout extraCSSRules={extraCSSRules} className={classes.root}>\n          {!animationsDisabled ? (\n            <React.Fragment>\n              <Link href={this.dudUrl} onClick={this.toggleRubric}>\n                {this.state.linkPrefix} Rubric\n              </Link>\n              <Collapse in={this.state.rubricOpen} timeout=\"auto\">\n                {rubricList}\n              </Collapse>\n            </React.Fragment>\n          ) : (\n            rubricList\n          )}\n        </UiLayout>\n      );\n    } else {\n      return null;\n    }\n  }\n}\n\nconst styles = () => ({\n  root: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  rubricCol: {\n    flex: '0 1 auto',\n    minWidth: 'fit-content',\n  },\n  text: {\n    color: color.text(),\n  },\n});\n\nexport default withStyles(styles)(Rubric);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["RubricType","PropTypes","shape","excludeZero","bool","points","arrayOf","string","sampleAnswers","animationsDisabled","Rubric","props","index","value","state","rubricOpen","linkPrefix","toggleRubric","bind","setState","model","classes","extraCSSRules","rubricList","slice","reverse","map","desc","length","pointsLabel","listColumn","titleText","text","__html","fontWeight","root","hiddenScreenReader","rubricToggle","e","key","chevronStyle","React","Component","object","isRequired","styles","theme","color","backgroundColor","background","display","flexDirection","alignItems","padding","listColumnItem","fontSize","margin","paddingBottom","cursor","userSelect","typography","tertiary","transition","marginLeft","alignSelf","position","width","height","overflow","clip","border","whiteSpace"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport ListItem from '@material-ui/core/ListItem';\nimport List from '@material-ui/core/List';\nimport Collapse from '@material-ui/core/Collapse';\nimport { color, UiLayout } from '@pie-lib/pie-toolbox/render-ui';\nimport PropTypes from 'prop-types';\n\nexport const RubricType = PropTypes.shape({\n  excludeZero: PropTypes.bool,\n  points: PropTypes.arrayOf(PropTypes.string),\n  sampleAnswers: PropTypes.arrayOf(PropTypes.string),\n  animationsDisabled: PropTypes.bool,\n});\n\nclass Rubric extends React.Component {\n  dudUrl = 'javascript:;';\n\n  constructor(props) {\n    super(props);\n    this.state = {\n      rubricOpen: false,\n      linkPrefix: 'Show',\n    };\n    this.toggleRubric = this.toggleRubric.bind(this);\n  }\n\n  static propTypes = {\n    classes: PropTypes.object.isRequired,\n    model: PropTypes.object.isRequired,\n    animationsDisabled: PropTypes.bool,\n    value: RubricType,\n  };\n\n  toggleRubric() {\n    this.setState({ rubricOpen: !this.state.rubricOpen });\n    this.setState({ linkPrefix: this.state.rubricOpen ? 'Show' : 'Hide' });\n  }\n\n  shouldRenderPoint = (index, value) => {\n    if (!value.excludeZero) {\n      return true;\n    } else {\n      return index !== 0;\n    }\n  };\n\n  render() {\n    const { model, value, classes } = this.props;\n    let { animationsDisabled } = this.props;\n    animationsDisabled = animationsDisabled || value.animationsDisabled;\n\n    if (value && value.points) {\n      const { extraCSSRules } = model || {};\n      const { points, sampleAnswers } = value;\n\n      const rubricList = (\n        <List component=\"nav\">\n          {points\n            .slice(0)\n            .reverse()\n            .map((desc, index) => {\n              index = points.length - index - 1;\n              const pointsLabel = value.excludeZero ? index + 1 : index;\n\n              return (\n                <React.Fragment key={index}>\n                  <ListItem key={`P${index}`} className={classes.listColumn}>\n                    <h3 className={classes.titleText}>{pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`}</h3>\n                    <div className={classes.text} dangerouslySetInnerHTML={{ __html: desc }} />\n                  </ListItem>\n\n                  {sampleAnswers && sampleAnswers[index] && (\n                    <ListItem key={`S${index}`} className={classes.listColumn}>\n                      <h4 className={classes.titleText} style={{ fontWeight: 'normal' }}>Sample Answer</h4>\n                      <div className={classes.text} dangerouslySetInnerHTML={{ __html: sampleAnswers[index] }} />\n                    </ListItem>\n                  )}\n                </React.Fragment>\n              );\n            })}\n        </List>\n      );\n\n      return (\n        <UiLayout extraCSSRules={extraCSSRules} className={classes.root}>\n          {/* screen reader only heading for navigation as per PD-5057 */}\n          <h2 className={classes.hiddenScreenReader}>Rubric</h2>\n          {!animationsDisabled ? (\n            <React.Fragment>\n              <h2\n                id={'rubric-toggle'}\n                className={classes.rubricToggle}\n                tabIndex={0}\n                role=\"button\"\n                aria-expanded={this.state.rubricOpen}\n                onClick={this.toggleRubric}\n                onKeyPress={e => {\n                  if (e.key === 'Enter' || e.key === ' ') this.toggleRubric();\n                }}\n              >\n                {this.state.linkPrefix} Rubric\n                <span\n                  className={classes.chevronStyle}\n                  aria-hidden=\"true\"\n                >\n                  {this.state.rubricOpen ? (\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"18 15 12 9 6 15\"></polyline></svg>\n                  ) : (\n                    <svg width=\"20\" height=\"20\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><polyline points=\"6 9 12 15 18 9\"></polyline></svg>\n                  )}\n                </span>\n              </h2>\n              <Collapse in={this.state.rubricOpen} timeout=\"auto\">\n                {rubricList}\n              </Collapse>\n            </React.Fragment>\n          ) : (\n            rubricList\n          )}\n        </UiLayout>\n      );\n    } else {\n      return null;\n    }\n  }\n}\n\nconst styles = (theme) => ({\n  root: {\n    color: color.text(),\n    backgroundColor: color.background(),\n  },\n  listColumn: {\n    display: 'flex',\n    flexDirection: 'column',\n    alignItems: 'flex-start',\n    padding: '12px 0px',\n  },\n  listColumnItem: {\n    padding: 0,\n  },\n  text: {\n    color: color.text(),\n  },\n  titleText: {\n    color: color.text(),\n    fontSize: '16px',\n    fontWeight: '700',\n    margin: 0,\n    paddingBottom: '6px',\n  },\n  rubricToggle: {\n    display: 'flex',\n    alignItems: 'center',\n    cursor: 'pointer',\n    userSelect: 'none',\n    fontSize: theme.typography.fontSize,\n    fontWeight: '500',\n    color: color.tertiary(),\n    margin: 0\n  },\n  chevronStyle: {\n    display: 'inline-flex',\n    transition: 'transform 0.2s',\n    marginLeft: 2,\n    alignSelf: 'center',\n  },\n  hiddenScreenReader: {\n    position: 'absolute',\n    width: '1px',\n    height: '1px',\n    padding: 0,\n    margin: '-1px',\n    overflow: 'hidden',\n    clip: 'rect(0,0,0,0)',\n    border: 0,\n    whiteSpace: 'nowrap',\n  },\n});\n\nexport default withStyles(styles)(Rubric);\n"],"file":"main.js"}