@pie-lib/text-select 1.10.1-next.0 → 1.11.0

package/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.
 
+# [1.11.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.10.0...@pie-lib/text-select@1.11.0) (2023-08-16)
+
+
+### Features
+
+* **text-select:** PD-1163 - add legend for icons used in eval mode ([7b2bac2](https://github.com/pie-framework/pie-lib/commit/7b2bac262d29986db2ce57ff6cee6c04af08472a))
+
+
+
+
+
 # [1.10.0](https://github.com/pie-framework/pie-lib/compare/@pie-lib/text-select@1.9.29...@pie-lib/text-select@1.10.0) (2023-08-15)
 
 

package/lib/index.js

@@ -7,6 +7,12 @@ var _typeof = require("@babel/runtime/helpers/typeof");
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
+Object.defineProperty(exports, "Legend", {
+  enumerable: true,
+  get: function get() {
+    return _legend.Legend;
+  }
+});
 Object.defineProperty(exports, "TextSelect", {
   enumerable: true,
   get: function get() {
@@ -50,6 +56,8 @@ var _tokenSelect = _interopRequireWildcard(require("./token-select"));
 
 var _textSelect = _interopRequireDefault(require("./text-select"));
 
+var _legend = require("./legend");
+
 var _token = _interopRequireDefault(require("./token-select/token"));
 
 var _utils = require("./utils");

package/lib/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Tokenizer from './tokenizer';\nimport TokenSelect, { TokenTypes } from './token-select';\nimport TextSelect from './text-select';\nimport Token from './token-select/token';\nimport { prepareText } from './utils';\n\nexport { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText };\n"],"file":"index.js"}
+{"version":3,"sources":["../src/index.js"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAAA;;AACA;;AACA;;AACA;;AACA;;AACA","sourcesContent":["import Tokenizer from './tokenizer';\nimport TokenSelect, { TokenTypes } from './token-select';\nimport TextSelect from './text-select';\nimport { Legend } from './legend';\nimport Token from './token-select/token';\nimport { prepareText } from './utils';\n\nexport { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };\n"],"file":"index.js"}

package/lib/legend.js

@@ -0,0 +1,93 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Legend = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _styles = require("@material-ui/core/styles");
+
+var _Check = _interopRequireDefault(require("@material-ui/icons/Check"));
+
+var _Close = _interopRequireDefault(require("@material-ui/icons/Close"));
+
+var _Remove = _interopRequireDefault(require("@material-ui/icons/Remove"));
+
+var _core = require("@material-ui/core");
+
+var _renderUi = require("@pie-lib/render-ui");
+
+var Legend = (0, _styles.withStyles)(function (theme) {
+  return {
+    flexContainer: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: "".concat(2 * theme.spacing.unit, "px"),
+      borderBottom: '1px solid lightgrey',
+      borderTop: '1px solid lightgrey',
+      paddingBottom: theme.spacing.unit,
+      paddingTop: theme.spacing.unit,
+      marginBottom: theme.spacing.unit
+    },
+    container: {
+      display: 'flex',
+      flexDirection: 'row',
+      gap: "".concat(theme.spacing.unit / 2, "px"),
+      alignItems: 'center'
+    },
+    correct: {
+      fontSize: 'larger',
+      color: _renderUi.color.correct(),
+      backgroundColor: _renderUi.color.correctSecondary(),
+      border: "2px solid ".concat(_renderUi.color.correct())
+    },
+    incorrect: {
+      fontSize: 'larger',
+      color: _renderUi.color.missing(),
+      backgroundColor: _renderUi.color.incorrectSecondary(),
+      border: "2px solid ".concat(_renderUi.color.missing())
+    },
+    missing: {
+      fontSize: 'larger',
+      color: _renderUi.color.missing(),
+      backgroundColor: _renderUi.color.incorrectSecondary(),
+      border: "2px dashed ".concat(_renderUi.color.missing())
+    }
+  };
+})(function (_ref) {
+  var classes = _ref.classes;
+  var icons = [{
+    iconName: _Check["default"],
+    label: 'Correct answer selected',
+    className: classes.correct
+  }, {
+    iconName: _Remove["default"],
+    label: 'Correct answer not selected',
+    className: classes.missing
+  }, {
+    iconName: _Close["default"],
+    label: 'Incorrect selection',
+    className: classes.incorrect
+  }];
+  return /*#__PURE__*/_react["default"].createElement("div", {
+    className: classes.flexContainer
+  }, icons.map(function (icon, index) {
+    var Icon = icon.iconName;
+    return /*#__PURE__*/_react["default"].createElement("div", {
+      key: index,
+      className: classes.container
+    }, /*#__PURE__*/_react["default"].createElement(Icon, {
+      className: icon.className,
+      width: '19px',
+      height: '19px'
+    }), /*#__PURE__*/_react["default"].createElement(_core.Typography, {
+      variant: 'subtitle1'
+    }, icon.label));
+  }));
+});
+exports.Legend = Legend;
+//# sourceMappingURL=legend.js.map

package/lib/legend.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/legend.js"],"names":["Legend","theme","flexContainer","display","flexDirection","gap","spacing","unit","borderBottom","borderTop","paddingBottom","paddingTop","marginBottom","container","alignItems","correct","fontSize","color","backgroundColor","correctSecondary","border","incorrect","missing","incorrectSecondary","classes","icons","iconName","Check","label","className","Remove","Close","map","icon","index","Icon"],"mappings":"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","sourcesContent":["import React from 'react';\nimport { withStyles } from '@material-ui/core/styles';\nimport Check from '@material-ui/icons/Check';\nimport Close from '@material-ui/icons/Close';\nimport Remove from '@material-ui/icons/Remove';\nimport { Typography } from '@material-ui/core';\nimport { color } from '@pie-lib/render-ui';\n\nexport const Legend = withStyles((theme) => ({\n  flexContainer: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: `${2 * theme.spacing.unit}px`,\n    borderBottom: '1px solid lightgrey',\n    borderTop: '1px solid lightgrey',\n    paddingBottom: theme.spacing.unit,\n    paddingTop: theme.spacing.unit,\n    marginBottom: theme.spacing.unit,\n  },\n  container: {\n    display: 'flex',\n    flexDirection: 'row',\n    gap: `${theme.spacing.unit / 2}px`,\n    alignItems: 'center',\n  },\n  correct: {\n    fontSize: 'larger',\n    color: color.correct(),\n    backgroundColor: color.correctSecondary(),\n    border: `2px solid ${color.correct()}`,\n  },\n  incorrect: {\n    fontSize: 'larger',\n    color: color.missing(),\n    backgroundColor: color.incorrectSecondary(),\n    border: `2px solid ${color.missing()}`,\n  },\n  missing: {\n    fontSize: 'larger',\n    color: color.missing(),\n    backgroundColor: color.incorrectSecondary(),\n    border: `2px dashed ${color.missing()}`,\n  },\n}))(({ classes }) => {\n  const icons = [\n    { iconName: Check, label: 'Correct answer selected', className: classes.correct },\n    { iconName: Remove, label: 'Correct answer not selected', className: classes.missing },\n    { iconName: Close, label: 'Incorrect selection', className: classes.incorrect },\n  ];\n  return (\n    <div className={classes.flexContainer}>\n      {icons.map((icon, index) => {\n        const Icon = icon.iconName;\n        return (\n          <div key={index} className={classes.container}>\n            <Icon className={icon.className} width={'19px'} height={'19px'}></Icon>\n            <Typography variant={'subtitle1'}>{icon.label}</Typography>\n          </div>\n        );\n      })}\n    </div>\n  );\n});\n"],"file":"legend.js"}

package/package.json

@@ -3,7 +3,7 @@
   "publishConfig": {
     "access": "public"
   },
-  "version": "1.10.1-next.0+1f4273ab",
+  "version": "1.11.0",
   "description": "Some react components for text selection",
   "keywords": [
     "react",
@@ -18,7 +18,7 @@
   "license": "ISC",
   "dependencies": {
     "@pie-framework/parse-english": "^1.0.0",
-    "@pie-lib/render-ui": "^4.15.1-next.0+1f4273ab",
+    "@pie-lib/render-ui": "^4.15.0",
     "@pie-lib/style-utils": "^0.1.43",
     "classnames": "^2.2.6",
     "debug": "^4.1.1",
@@ -38,6 +38,6 @@
     "@material-ui/core": "^3.8.3",
     "react": "^16.8.1"
   },
-  "gitHead": "1f4273ab1a244f1586c06526b703b2777859f481",
+  "gitHead": "f132e61da631843d03513f3ee7f81ffb8155bf75",
   "scripts": {}
 }

package/src/index.js

@@ -1,7 +1,8 @@
 import Tokenizer from './tokenizer';
 import TokenSelect, { TokenTypes } from './token-select';
 import TextSelect from './text-select';
+import { Legend } from './legend';
 import Token from './token-select/token';
 import { prepareText } from './utils';
 
-export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText };
+export { TextSelect, TokenTypes, Tokenizer, TokenSelect, Token, prepareText, Legend };

package/src/legend.js

@@ -0,0 +1,63 @@
+import React from 'react';
+import { withStyles } from '@material-ui/core/styles';
+import Check from '@material-ui/icons/Check';
+import Close from '@material-ui/icons/Close';
+import Remove from '@material-ui/icons/Remove';
+import { Typography } from '@material-ui/core';
+import { color } from '@pie-lib/render-ui';
+
+export const Legend = withStyles((theme) => ({
+  flexContainer: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: `${2 * theme.spacing.unit}px`,
+    borderBottom: '1px solid lightgrey',
+    borderTop: '1px solid lightgrey',
+    paddingBottom: theme.spacing.unit,
+    paddingTop: theme.spacing.unit,
+    marginBottom: theme.spacing.unit,
+  },
+  container: {
+    display: 'flex',
+    flexDirection: 'row',
+    gap: `${theme.spacing.unit / 2}px`,
+    alignItems: 'center',
+  },
+  correct: {
+    fontSize: 'larger',
+    color: color.correct(),
+    backgroundColor: color.correctSecondary(),
+    border: `2px solid ${color.correct()}`,
+  },
+  incorrect: {
+    fontSize: 'larger',
+    color: color.missing(),
+    backgroundColor: color.incorrectSecondary(),
+    border: `2px solid ${color.missing()}`,
+  },
+  missing: {
+    fontSize: 'larger',
+    color: color.missing(),
+    backgroundColor: color.incorrectSecondary(),
+    border: `2px dashed ${color.missing()}`,
+  },
+}))(({ classes }) => {
+  const icons = [
+    { iconName: Check, label: 'Correct answer selected', className: classes.correct },
+    { iconName: Remove, label: 'Correct answer not selected', className: classes.missing },
+    { iconName: Close, label: 'Incorrect selection', className: classes.incorrect },
+  ];
+  return (
+    <div className={classes.flexContainer}>
+      {icons.map((icon, index) => {
+        const Icon = icon.iconName;
+        return (
+          <div key={index} className={classes.container}>
+            <Icon className={icon.className} width={'19px'} height={'19px'}></Icon>
+            <Typography variant={'subtitle1'}>{icon.label}</Typography>
+          </div>
+        );
+      })}
+    </div>
+  );
+});