@pie-element/rubric 4.1.6-next.3 → 4.2.0

package/CHANGELOG.md

@@ -3,6 +3,23 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.2.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/rubric@4.1.5...@pie-element/rubric@4.2.0) (2024-10-29)
+
+
+### Bug Fixes
+
+* fixed all tests after updating pie-toolbox [PD-1460] ([9f5293d](https://github.com/pie-framework/pie-elements/commit/9f5293d618edc06f69fabb27a042ec5eee66e151))
+
+
+### Features
+
+* fixed most of the tests, waiting on PR merge to fix the rest [PD-1460] ([9b12daf](https://github.com/pie-framework/pie-elements/commit/9b12dafc8e7d8dd8cd9bef71dce37d0c62760355))
+* used configlayout, preview layout or uilayout to enable extraCSSRules inside author and player elements [PD-1460] ([eeebb02](https://github.com/pie-framework/pie-elements/commit/eeebb02f200208620c1af56366a22bf65944ba3e))
+
+
+
+
+
 ## [4.1.5](https://github.com/pie-framework/pie-elements/compare/@pie-element/rubric@4.1.4...@pie-element/rubric@4.1.5) (2024-10-28)
 
 

package/configure/CHANGELOG.md

@@ -3,6 +3,22 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+# [4.1.0](https://github.com/pie-framework/pie-elements/compare/@pie-element/rubric-configure@4.0.7...@pie-element/rubric-configure@4.1.0) (2024-10-29)
+
+
+### Bug Fixes
+
+* fixed all tests after updating pie-toolbox [PD-1460] ([9f5293d](https://github.com/pie-framework/pie-elements/commit/9f5293d618edc06f69fabb27a042ec5eee66e151))
+
+
+### Features
+
+* used configlayout, preview layout or uilayout to enable extraCSSRules inside author and player elements [PD-1460] ([eeebb02](https://github.com/pie-framework/pie-elements/commit/eeebb02f200208620c1af56366a22bf65944ba3e))
+
+
+
+
+
 ## [4.0.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/rubric-configure@4.0.6...@pie-element/rubric-configure@4.0.7) (2024-10-28)
 
 

package/configure/lib/main.js

@@ -112,6 +112,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
 
 
       var value = this.verifyRubriclessModel(model, configuration);
+      var extraCSSRules = model.extraCSSRules;
       var panelProperties = {
         excludeZeroEnabled: showExcludeZero.settings && toggle(showExcludeZero.label),
         maxPointsEnabled: showMaxPoint.settings && toggle(showMaxPoint.label),
@@ -123,6 +124,7 @@ var Main = /*#__PURE__*/function (_React$Component) {
       };
 
       return /*#__PURE__*/_react["default"].createElement(_configUi.layout.ConfigLayout, {
+        extraCSSRules: extraCSSRules,
         dimensions: contentDimensions,
         hideSettings: settingsPanelDisabled,
         settings: /*#__PURE__*/_react["default"].createElement(Panel, {

package/configure/lib/main.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/main.jsx"],"names":["Panel","settings","toggle","styles","theme","design","fontFamily","fontSize","typography","Main","m","config","rubricless","points","sampleAnswers","rest","props","model","configuration","onConfigurationChanged","onModelChanged","imageSupport","baseInputConfiguration","contentDimensions","settingsPanelDisabled","showExcludeZero","showMaxPoint","mathMlOptions","rubriclessInstruction","width","value","verifyRubriclessModel","panelProperties","excludeZeroEnabled","label","maxPointsEnabled","rubriclessInstructionEnabled","getPluginProps","Object","assign","inputConfiguration","Properties","maxWidth","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Authoring } from './pie-toolbox-rubric/index';\nimport { withStyles } from '@material-ui/core/styles';\nimport { layout, settings } from '@pie-lib/pie-toolbox/config-ui';\n\nconst { Panel, toggle } = settings;\n\nconst styles = (theme) => ({\n  design: {\n    fontFamily: 'Cerebri Sans',\n    fontSize: theme.typography.fontSize,\n  },\n});\n\nclass Main extends React.Component {\n  verifyRubriclessModel = (m, config) => {\n    const { rubricless = false } = config || {};\n    return rubricless ? (({ points, sampleAnswers, ...rest }) => rest)(m) : m;\n  };\n\n  render() {\n    const { model, configuration, onConfigurationChanged, onModelChanged, imageSupport } = this.props || {};\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      settingsPanelDisabled,\n      showExcludeZero = {},\n      showMaxPoint = {},\n      mathMlOptions = {},\n      rubricless = false,\n      rubriclessInstruction,\n      width,\n    } = configuration || {};\n\n    // ensure to eliminate points and sampleAnswers in case of rubricless\n    const value = this.verifyRubriclessModel(model, configuration);\n\n    const panelProperties = {\n      excludeZeroEnabled: showExcludeZero.settings && toggle(showExcludeZero.label),\n      maxPointsEnabled: showMaxPoint.settings && toggle(showMaxPoint.label),\n      rubriclessInstructionEnabled: rubricless && rubriclessInstruction.settings && toggle(rubriclessInstruction.label),\n    };\n\n    const getPluginProps = (props) => {\n      return Object.assign(\n        {\n          ...baseInputConfiguration,\n        },\n        props || {},\n      );\n    };\n\n    return (\n      <layout.ConfigLayout\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChanged}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            pluginOpts={getPluginProps(rubriclessInstruction?.inputConfiguration)}\n            groups={{\n              Properties: panelProperties,\n            }}\n            imageSupport={imageSupport}\n          />\n        }\n      >\n        <div style={{ maxWidth: width }}>\n          <Authoring\n            value={value}\n            config={configuration}\n            onChange={onModelChanged}\n            mathMlOptions={mathMlOptions}\n            rubricless={rubricless}\n            pluginOpts={baseInputConfiguration}\n            imageSupport={imageSupport}\n          />\n        </div>\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}
+{"version":3,"sources":["../src/main.jsx"],"names":["Panel","settings","toggle","styles","theme","design","fontFamily","fontSize","typography","Main","m","config","rubricless","points","sampleAnswers","rest","props","model","configuration","onConfigurationChanged","onModelChanged","imageSupport","baseInputConfiguration","contentDimensions","settingsPanelDisabled","showExcludeZero","showMaxPoint","mathMlOptions","rubriclessInstruction","width","value","verifyRubriclessModel","extraCSSRules","panelProperties","excludeZeroEnabled","label","maxPointsEnabled","rubriclessInstructionEnabled","getPluginProps","Object","assign","inputConfiguration","Properties","maxWidth","React","Component"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { Authoring } from './pie-toolbox-rubric/index';\nimport { withStyles } from '@material-ui/core/styles';\nimport { layout, settings } from '@pie-lib/pie-toolbox/config-ui';\n\nconst { Panel, toggle } = settings;\n\nconst styles = (theme) => ({\n  design: {\n    fontFamily: 'Cerebri Sans',\n    fontSize: theme.typography.fontSize,\n  },\n});\n\nclass Main extends React.Component {\n  verifyRubriclessModel = (m, config) => {\n    const { rubricless = false } = config || {};\n    return rubricless ? (({ points, sampleAnswers, ...rest }) => rest)(m) : m;\n  };\n\n  render() {\n    const { model, configuration, onConfigurationChanged, onModelChanged, imageSupport } = this.props || {};\n    const {\n      baseInputConfiguration = {},\n      contentDimensions = {},\n      settingsPanelDisabled,\n      showExcludeZero = {},\n      showMaxPoint = {},\n      mathMlOptions = {},\n      rubricless = false,\n      rubriclessInstruction,\n      width,\n    } = configuration || {};\n\n    // ensure to eliminate points and sampleAnswers in case of rubricless\n    const value = this.verifyRubriclessModel(model, configuration);\n    const { extraCSSRules } = model;\n\n    const panelProperties = {\n      excludeZeroEnabled: showExcludeZero.settings && toggle(showExcludeZero.label),\n      maxPointsEnabled: showMaxPoint.settings && toggle(showMaxPoint.label),\n      rubriclessInstructionEnabled: rubricless && rubriclessInstruction.settings && toggle(rubriclessInstruction.label),\n    };\n\n    const getPluginProps = (props) => {\n      return Object.assign(\n        {\n          ...baseInputConfiguration,\n        },\n        props || {},\n      );\n    };\n\n    return (\n      <layout.ConfigLayout\n        extraCSSRules={extraCSSRules}\n        dimensions={contentDimensions}\n        hideSettings={settingsPanelDisabled}\n        settings={\n          <Panel\n            model={model}\n            onChangeModel={onModelChanged}\n            configuration={configuration}\n            onChangeConfiguration={onConfigurationChanged}\n            pluginOpts={getPluginProps(rubriclessInstruction?.inputConfiguration)}\n            groups={{\n              Properties: panelProperties,\n            }}\n            imageSupport={imageSupport}\n          />\n        }\n      >\n        <div style={{ maxWidth: width }}>\n          <Authoring\n            value={value}\n            config={configuration}\n            onChange={onModelChanged}\n            mathMlOptions={mathMlOptions}\n            rubricless={rubricless}\n            pluginOpts={baseInputConfiguration}\n            imageSupport={imageSupport}\n          />\n        </div>\n      </layout.ConfigLayout>\n    );\n  }\n}\n\nexport default withStyles(styles)(Main);\n"],"file":"main.js"}

package/configure/package.json

@@ -1,14 +1,14 @@
 {
   "name": "@pie-element/rubric-configure",
   "private": true,
-  "version": "4.0.7",
+  "version": "4.1.0",
   "description": "Rubric authoring view",
   "main": "lib/index.js",
   "author": "Pie Framework Authors",
   "dependencies": {
     "@material-ui/core": "^3.9.2",
     "@pie-framework/pie-configure-events": "^1.3.0",
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "debug": "^4.1.1",
     "react": "^16.8.6",
     "react-dom": "^16.8.6"

package/configure/src/main.jsx

@@ -34,6 +34,7 @@ class Main extends React.Component {
 
     // ensure to eliminate points and sampleAnswers in case of rubricless
     const value = this.verifyRubriclessModel(model, configuration);
+    const { extraCSSRules } = model;
 
     const panelProperties = {
       excludeZeroEnabled: showExcludeZero.settings && toggle(showExcludeZero.label),
@@ -52,6 +53,7 @@ class Main extends React.Component {
 
     return (
       <layout.ConfigLayout
+        extraCSSRules={extraCSSRules}
         dimensions={contentDimensions}
         hideSettings={settingsPanelDisabled}
         settings={

package/controller/CHANGELOG.md

@@ -3,6 +3,17 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.0.7](https://github.com/pie-framework/pie-elements/compare/@pie-element/rubric-controller@3.0.6...@pie-element/rubric-controller@3.0.7) (2024-10-29)
+
+
+### Bug Fixes
+
+* fixed all tests after updating pie-toolbox [PD-1460] ([9f5293d](https://github.com/pie-framework/pie-elements/commit/9f5293d618edc06f69fabb27a042ec5eee66e151))
+
+
+
+
+
 ## [3.0.6](https://github.com/pie-framework/pie-elements/compare/@pie-element/rubric-controller@3.0.5...@pie-element/rubric-controller@3.0.6) (2024-10-28)
 
 

package/controller/package.json

@@ -1,13 +1,13 @@
 {
   "name": "@pie-element/rubric-controller",
   "private": true,
-  "version": "3.0.6",
+  "version": "3.0.7",
   "main": "lib/index.js",
   "scripts": {
     "test": "./node_modules/.bin/jest"
   },
   "dependencies": {
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "lodash": "^4.17.15"
   }
 }

package/lib/main.js

@@ -92,12 +92,16 @@ var Rubric = /*#__PURE__*/function (_React$Component) {
     key: "render",
     value: function render() {
       var _this$props = this.props,
+          model = _this$props.model,
           value = _this$props.value,
           classes = _this$props.classes;
       var animationsDisabled = this.props.animationsDisabled;
       animationsDisabled = animationsDisabled || value.animationsDisabled;
 
       if (value && value.points) {
+        var _ref = model || {},
+            extraCSSRules = _ref.extraCSSRules;
+
         var points = value.points,
             sampleAnswers = value.sampleAnswers;
 
@@ -142,7 +146,8 @@ var Rubric = /*#__PURE__*/function (_React$Component) {
           })));
         }));
 
-        return /*#__PURE__*/_react["default"].createElement("div", {
+        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,
@@ -161,6 +166,7 @@ var Rubric = /*#__PURE__*/function (_React$Component) {
 
 (0, _defineProperty2["default"])(Rubric, "propTypes", {
   classes: _propTypes["default"].object.isRequired,
+  model: _propTypes["default"].object.isRequired,
   animationsDisabled: _propTypes["default"].bool,
   value: RubricType
 });

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","classes","rubricList","slice","reverse","map","desc","length","pointsLabel","rubricCol","text","__html","marginLeft","root","dudUrl","React","Component","object","isRequired","styles","color","backgroundColor","background","flex","minWidth"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;AAEO,IAAMA,UAAU,GAAGC,sBAAUC,KAAV,CAAgB;AACxCC,EAAAA,WAAW,EAAEF,sBAAUG,IADiB;AAExCC,EAAAA,MAAM,EAAEJ,sBAAUK,OAAV,CAAkBL,sBAAUM,MAA5B,CAFgC;AAGxCC,EAAAA,aAAa,EAAEP,sBAAUK,OAAV,CAAkBL,sBAAUM,MAA5B,CAHyB;AAIxCE,EAAAA,kBAAkB,EAAER,sBAAUG;AAJU,CAAhB,CAAnB;;;;IAODM,M;;;;;AAGJ,kBAAYC,KAAZ,EAAmB;AAAA;;AAAA;AACjB,8BAAMA,KAAN;AADiB,+FAFV,cAEU;AAAA,0GAoBC,UAACC,KAAD,EAAQC,KAAR,EAAkB;AACpC,UAAI,CAACA,KAAK,CAACV,WAAX,EAAwB;AACtB,eAAO,IAAP;AACD,OAFD,MAEO;AACL,eAAOS,KAAK,KAAK,CAAjB;AACD;AACF,KA1BkB;AAEjB,UAAKE,KAAL,GAAa;AACXC,MAAAA,UAAU,EAAE,KADD;AAEXC,MAAAA,UAAU,EAAE;AAFD,KAAb;AAIA,UAAKC,YAAL,GAAoB,MAAKA,YAAL,CAAkBC,IAAlB,gDAApB;AANiB;AAOlB;;;;WAQD,wBAAe;AACb,WAAKC,QAAL,CAAc;AAAEJ,QAAAA,UAAU,EAAE,CAAC,KAAKD,KAAL,CAAWC;AAA1B,OAAd;AACA,WAAKI,QAAL,CAAc;AAAEH,QAAAA,UAAU,EAAE,KAAKF,KAAL,CAAWC,UAAX,GAAwB,MAAxB,GAAiC;AAA/C,OAAd;AACD;;;WAUD,kBAAS;AACP,wBAA2B,KAAKJ,KAAhC;AAAA,UAAQE,KAAR,eAAQA,KAAR;AAAA,UAAeO,OAAf,eAAeA,OAAf;AACA,UAAMX,kBAAN,GAA6B,KAAKE,KAAlC,CAAMF,kBAAN;AACAA,MAAAA,kBAAkB,GAAGA,kBAAkB,IAAII,KAAK,CAACJ,kBAAjD;;AAEA,UAAII,KAAK,IAAIA,KAAK,CAACR,MAAnB,EAA2B;AACzB,YAAQA,MAAR,GAAkCQ,KAAlC,CAAQR,MAAR;AAAA,YAAgBG,aAAhB,GAAkCK,KAAlC,CAAgBL,aAAhB;;AAEA,YAAMa,UAAU,gBACd,gCAAC,gBAAD;AAAM,UAAA,SAAS,EAAC;AAAhB,WACGhB,MAAM,CACJiB,KADF,CACQ,CADR,EAEEC,OAFF,GAGEC,GAHF,CAGM,UAACC,IAAD,EAAOb,KAAP,EAAiB;AACpBA,UAAAA,KAAK,GAAGP,MAAM,CAACqB,MAAP,GAAgBd,KAAhB,GAAwB,CAAhC;AACA,cAAMe,WAAW,GAAGd,KAAK,CAACV,WAAN,GAAoBS,KAAK,GAAG,CAA5B,GAA+BA,KAAnD;AAEA,8BACI,gCAAC,iBAAD,CAAO,QAAP;AAAgB,YAAA,GAAG,EAAEA;AAArB,0BACE,gCAAC,oBAAD;AAAU,YAAA,GAAG,aAAMA,KAAN;AAAb,0BACE,gCAAC,wBAAD;AACI,YAAA,SAAS,EAAEQ,OAAO,CAACQ,SADvB;AAEI,YAAA,OAAO,eAAE;AAAK,cAAA,SAAS,EAAER,OAAO,CAACS;AAAxB,eAA+BF,WAAW,KAAK,CAAhB,aAAuBA,WAAvB,qBAA6CA,WAA7C,SAA/B;AAFb,YADF,eAME,gCAAC,wBAAD;AACI,YAAA,OAAO,eAAE;AAAK,cAAA,SAAS,EAAEP,OAAO,CAACS,IAAxB;AAA8B,cAAA,uBAAuB,EAAE;AAAEC,gBAAAA,MAAM,EAAEL;AAAV;AAAvD;AADb,YANF,CADF,EAYGjB,aAAa,IAAIA,aAAa,CAACI,KAAD,CAA9B,iBACG,gCAAC,oBAAD;AAAU,YAAA,GAAG,aAAMA,KAAN;AAAb,0BACE,gCAAC,wBAAD;AACI,YAAA,SAAS,EAAEQ,OAAO,CAACQ,SADvB;AAEI,YAAA,KAAK,EAAE;AAAEG,cAAAA,UAAU,EAAE;AAAd,aAFX;AAGI,YAAA,OAAO,eAAE;AAAK,cAAA,SAAS,EAAEX,OAAO,CAACS;AAAxB;AAHb,YADF,eAOE,gCAAC,wBAAD;AACI,YAAA,OAAO,eACL;AAAK,cAAA,SAAS,EAAET,OAAO,CAACS,IAAxB;AAA8B,cAAA,uBAAuB,EAAE;AAAEC,gBAAAA,MAAM,EAAEtB,aAAa,CAACI,KAAD;AAAvB;AAAvD;AAFN,YAPF,CAbN,CADJ;AA8BD,SArCF,CADH,CADF;;AA2CA,4BACE;AAAK,UAAA,SAAS,EAAEQ,OAAO,CAACY;AAAxB,WACG,CAACvB,kBAAD,gBACC,gCAAC,iBAAD,CAAO,QAAP,qBACE,gCAAC,gBAAD;AAAM,UAAA,IAAI,EAAE,KAAKwB,MAAjB;AAAyB,UAAA,OAAO,EAAE,KAAKhB;AAAvC,WACG,KAAKH,KAAL,CAAWE,UADd,YADF,eAIE,gCAAC,oBAAD;AAAU,gBAAI,KAAKF,KAAL,CAAWC,UAAzB;AAAqC,UAAA,OAAO,EAAC;AAA7C,WACGM,UADH,CAJF,CADD,GAUCA,UAXJ,CADF;AAgBD,OA9DD,MA8DO;AACL,eAAO,IAAP;AACD;AACF;;;EArGkBa,kBAAMC,S;;iCAArBzB,M,eAYe;AACjBU,EAAAA,OAAO,EAAEnB,sBAAUmC,MAAV,CAAiBC,UADT;AAEjB5B,EAAAA,kBAAkB,EAAER,sBAAUG,IAFb;AAGjBS,EAAAA,KAAK,EAAEb;AAHU,C;;AA4FrB,IAAMsC,MAAM,GAAG,SAATA,MAAS;AAAA,SAAO;AACpBN,IAAAA,IAAI,EAAE;AACJO,MAAAA,KAAK,EAAEA,gBAAMV,IAAN,EADH;AAEJW,MAAAA,eAAe,EAAED,gBAAME,UAAN;AAFb,KADc;AAKpBb,IAAAA,SAAS,EAAE;AACTc,MAAAA,IAAI,EAAE,UADG;AAETC,MAAAA,QAAQ,EAAE;AAFD,KALS;AASpBd,IAAAA,IAAI,EAAE;AACJU,MAAAA,KAAK,EAAEA,gBAAMV,IAAN;AADH;AATc,GAAP;AAAA,CAAf;;eAce,wBAAWS,MAAX,EAAmB5B,MAAnB,C","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 } 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    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 { value, classes } = this.props;\n    let { animationsDisabled } = this.props;\n    animationsDisabled = animationsDisabled || value.animationsDisabled;\n\n    if (value && value.points) {\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        <div 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        </div>\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","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"}

package/module/configure.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_classnames, _dll_react_dom, _dll_lodash, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.0.13/module/index.js";
-import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@5.0.12/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@2.0.14/module/index.js";
+import {_dll_pie_lib__pie_toolbox_editable_html, _dll_pie_lib__pie_toolbox_config_ui} from "../../../@pie-lib/pie-toolbox-module@5.0.13/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;
@@ -42346,6 +42346,7 @@ const require$$12$1 = _dll_pie_lib__pie_toolbox_config_ui;
         var _ref3 = this.props || ({}), model = _ref3.model, configuration = _ref3.configuration, onConfigurationChanged = _ref3.onConfigurationChanged, onModelChanged = _ref3.onModelChanged, imageSupport = _ref3.imageSupport;
         var _ref4 = configuration || ({}), _ref4$baseInputConfig = _ref4.baseInputConfiguration, baseInputConfiguration = _ref4$baseInputConfig === void 0 ? {} : _ref4$baseInputConfig, _ref4$contentDimensio = _ref4.contentDimensions, contentDimensions = _ref4$contentDimensio === void 0 ? {} : _ref4$contentDimensio, settingsPanelDisabled = _ref4.settingsPanelDisabled, _ref4$showExcludeZero = _ref4.showExcludeZero, showExcludeZero = _ref4$showExcludeZero === void 0 ? {} : _ref4$showExcludeZero, _ref4$showMaxPoint = _ref4.showMaxPoint, showMaxPoint = _ref4$showMaxPoint === void 0 ? {} : _ref4$showMaxPoint, _ref4$mathMlOptions = _ref4.mathMlOptions, mathMlOptions = _ref4$mathMlOptions === void 0 ? {} : _ref4$mathMlOptions, _ref4$rubricless = _ref4.rubricless, rubricless = _ref4$rubricless === void 0 ? false : _ref4$rubricless, rubriclessInstruction = _ref4.rubriclessInstruction, width = _ref4.width;
         var value = this.verifyRubriclessModel(model, configuration);
+        var extraCSSRules = model.extraCSSRules;
         var panelProperties = {
           excludeZeroEnabled: showExcludeZero.settings && toggle(showExcludeZero.label),
           maxPointsEnabled: showMaxPoint.settings && toggle(showMaxPoint.label),
@@ -42355,6 +42356,7 @@ const require$$12$1 = _dll_pie_lib__pie_toolbox_config_ui;
           return Object.assign(_objectSpread({}, baseInputConfiguration), props || ({}));
         };
         return _react["default"].createElement(_configUi.layout.ConfigLayout, {
+          extraCSSRules: extraCSSRules,
           dimensions: contentDimensions,
           hideSettings: settingsPanelDisabled,
           settings: _react["default"].createElement(Panel, {

package/module/element.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.0.13/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.0.12/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_debug, _dll_pie_lib__pie_toolbox_math_rendering_accessible} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.0.14/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.0.13/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;
@@ -8116,6 +8116,7 @@ var Collapse = getDefaultExportFromCjs(Collapse$3);
 const React$1 = _dll_react;
 const PropTypes = _dll_prop_types;
 const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
+const {UiLayout: UiLayout} = _dll_pie_lib__pie_toolbox_render_ui;
 const _jsxFileName$1 = "/home/circleci/repo/packages/rubric/src/main.jsx";
 const RubricType = PropTypes.shape({
   excludeZero: PropTypes.bool,
@@ -8140,6 +8141,7 @@ class Rubric extends React$1.Component {
   static __initStatic() {
     this.propTypes = {
       classes: PropTypes.object.isRequired,
+      model: PropTypes.object.isRequired,
       animationsDisabled: PropTypes.bool,
       value: RubricType
     };
@@ -8162,17 +8164,18 @@ class Rubric extends React$1.Component {
     };
   }
   render() {
-    const {value, classes} = this.props;
+    const {model, value, classes} = this.props;
     let {animationsDisabled} = this.props;
     animationsDisabled = animationsDisabled || value.animationsDisabled;
     if (value && value.points) {
+      const {extraCSSRules} = model || ({});
       const {points, sampleAnswers} = value;
       const rubricList = React$1.createElement(List, {
         component: "nav",
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 58
+          lineNumber: 60
         }
       }, points.slice(0).reverse().map((desc, index) => {
         index = points.length - index - 1;
@@ -8182,14 +8185,14 @@ class Rubric extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 67
+            lineNumber: 69
           }
         }, React$1.createElement(ListItem, {
           key: `P${index}`,
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 68
+            lineNumber: 70
           }
         }, React$1.createElement(ListItemText, {
           className: classes.rubricCol,
@@ -8198,13 +8201,13 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName$1,
-              lineNumber: 71
+              lineNumber: 73
             }
           }, pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`),
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 69
+            lineNumber: 71
           }
         }), React$1.createElement(ListItemText, {
           primary: React$1.createElement('div', {
@@ -8215,20 +8218,20 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName$1,
-              lineNumber: 75
+              lineNumber: 77
             }
           }),
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 74
+            lineNumber: 76
           }
         })), sampleAnswers && sampleAnswers[index] && React$1.createElement(ListItem, {
           key: `S${index}`,
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 80
+            lineNumber: 82
           }
         }, React$1.createElement(ListItemText, {
           className: classes.rubricCol,
@@ -8240,13 +8243,13 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName$1,
-              lineNumber: 84
+              lineNumber: 86
             }
           }, "Sample Answer"),
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 81
+            lineNumber: 83
           }
         }), React$1.createElement(ListItemText, {
           primary: React$1.createElement('div', {
@@ -8257,28 +8260,29 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName$1,
-              lineNumber: 89
+              lineNumber: 91
             }
           }),
           __self: this,
           __source: {
             fileName: _jsxFileName$1,
-            lineNumber: 87
+            lineNumber: 89
           }
         })));
       }));
-      return React$1.createElement('div', {
+      return React$1.createElement(UiLayout, {
+        extraCSSRules: extraCSSRules,
         className: classes.root,
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 101
+          lineNumber: 103
         }
       }, !animationsDisabled ? React$1.createElement(React$1.Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 103
+          lineNumber: 105
         }
       }, React$1.createElement(Link, {
         href: this.dudUrl,
@@ -8286,7 +8290,7 @@ class Rubric extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 104
+          lineNumber: 106
         }
       }, this.state.linkPrefix, " Rubric"), React$1.createElement(Collapse, {
         in: this.state.rubricOpen,
@@ -8294,7 +8298,7 @@ class Rubric extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName$1,
-          lineNumber: 107
+          lineNumber: 109
         }
       }, rubricList)) : rubricList);
     } else {

package/module/manifest.json

@@ -4,11 +4,11 @@
   "modules": [
     {
       "name": "@pie-lib/pie-toolbox-math-rendering-module",
-      "version": "2.0.13"
+      "version": "2.0.14"
     },
     {
       "name": "@pie-lib/pie-toolbox-module",
-      "version": "5.0.12"
+      "version": "5.0.13"
     }
   ]
 }

package/module/print.js

@@ -1,5 +1,5 @@
-import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.0.13/module/index.js";
-import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.0.12/module/index.js";
+import {_dll_react, _dll_prop_types, _dll_react_dom, _dll_classnames, _dll_lodash, _dll_pie_lib__pie_toolbox_math_rendering_accessible, _dll_debug} from "../../../@pie-lib/pie-toolbox-math-rendering-module@2.0.14/module/index.js";
+import {_dll_pie_lib__pie_toolbox_render_ui} from "../../../@pie-lib/pie-toolbox-module@5.0.13/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;
@@ -8116,6 +8116,7 @@ var Collapse = getDefaultExportFromCjs(Collapse$3);
 const React$1 = _dll_react;
 const PropTypes = _dll_prop_types;
 const {color: color} = _dll_pie_lib__pie_toolbox_render_ui;
+const {UiLayout: UiLayout} = _dll_pie_lib__pie_toolbox_render_ui;
 const _jsxFileName = "/home/circleci/repo/packages/rubric/src/main.jsx";
 const RubricType = PropTypes.shape({
   excludeZero: PropTypes.bool,
@@ -8140,6 +8141,7 @@ class Rubric extends React$1.Component {
   static __initStatic() {
     this.propTypes = {
       classes: PropTypes.object.isRequired,
+      model: PropTypes.object.isRequired,
       animationsDisabled: PropTypes.bool,
       value: RubricType
     };
@@ -8162,17 +8164,18 @@ class Rubric extends React$1.Component {
     };
   }
   render() {
-    const {value, classes} = this.props;
+    const {model, value, classes} = this.props;
     let {animationsDisabled} = this.props;
     animationsDisabled = animationsDisabled || value.animationsDisabled;
     if (value && value.points) {
+      const {extraCSSRules} = model || ({});
       const {points, sampleAnswers} = value;
       const rubricList = React$1.createElement(List, {
         component: "nav",
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 58
+          lineNumber: 60
         }
       }, points.slice(0).reverse().map((desc, index) => {
         index = points.length - index - 1;
@@ -8182,14 +8185,14 @@ class Rubric extends React$1.Component {
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 67
+            lineNumber: 69
           }
         }, React$1.createElement(ListItem, {
           key: `P${index}`,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 68
+            lineNumber: 70
           }
         }, React$1.createElement(ListItemText, {
           className: classes.rubricCol,
@@ -8198,13 +8201,13 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 71
+              lineNumber: 73
             }
           }, pointsLabel === 1 ? `${pointsLabel} PT` : `${pointsLabel} PTS`),
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 69
+            lineNumber: 71
           }
         }), React$1.createElement(ListItemText, {
           primary: React$1.createElement('div', {
@@ -8215,20 +8218,20 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 75
+              lineNumber: 77
             }
           }),
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 74
+            lineNumber: 76
           }
         })), sampleAnswers && sampleAnswers[index] && React$1.createElement(ListItem, {
           key: `S${index}`,
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 80
+            lineNumber: 82
           }
         }, React$1.createElement(ListItemText, {
           className: classes.rubricCol,
@@ -8240,13 +8243,13 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 84
+              lineNumber: 86
             }
           }, "Sample Answer"),
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 81
+            lineNumber: 83
           }
         }), React$1.createElement(ListItemText, {
           primary: React$1.createElement('div', {
@@ -8257,28 +8260,29 @@ class Rubric extends React$1.Component {
             __self: this,
             __source: {
               fileName: _jsxFileName,
-              lineNumber: 89
+              lineNumber: 91
             }
           }),
           __self: this,
           __source: {
             fileName: _jsxFileName,
-            lineNumber: 87
+            lineNumber: 89
           }
         })));
       }));
-      return React$1.createElement('div', {
+      return React$1.createElement(UiLayout, {
+        extraCSSRules: extraCSSRules,
         className: classes.root,
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 101
+          lineNumber: 103
         }
       }, !animationsDisabled ? React$1.createElement(React$1.Fragment, {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 103
+          lineNumber: 105
         }
       }, React$1.createElement(Link, {
         href: this.dudUrl,
@@ -8286,7 +8290,7 @@ class Rubric extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 104
+          lineNumber: 106
         }
       }, this.state.linkPrefix, " Rubric"), React$1.createElement(Collapse, {
         in: this.state.rubricOpen,
@@ -8294,7 +8298,7 @@ class Rubric extends React$1.Component {
         __self: this,
         __source: {
           fileName: _jsxFileName,
-          lineNumber: 107
+          lineNumber: 109
         }
       }, rubricList)) : rubricList);
     } else {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pie-element/rubric",
-  "version": "4.1.6-next.3+59535a35f",
+  "version": "4.2.0",
   "main": "lib/index.js",
   "module": "src/index.js",
   "description": "Rubric Scoring Interaction",
@@ -10,12 +10,12 @@
   },
   "dependencies": {
     "@material-ui/core": "^3.9.2",
-    "@pie-lib/pie-toolbox": "2.0.15",
+    "@pie-lib/pie-toolbox": "2.1.0",
     "prop-types": "^15.7.2"
   },
   "author": "pie framework developers",
   "license": "ISC",
-  "gitHead": "59535a35fed818c74f3d6d6cc41b352c1ed939eb",
+  "gitHead": "0ceacdb80b0be7b4cae60b1eff7974170b088358",
   "scripts": {
     "postpublish": "../../scripts/postpublish"
   },