@pie-lib/text-select 1.13.1-beta.0 → 1.15.0

package/src/legend.js

@@ -2,9 +2,9 @@ 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 { color } from '@pie-lib/render-ui';
+import { color } from '../../render-ui/src/index';
 import Translator from '@pie-lib/translator';
+import classNames from 'classnames';
 
 const { translator } = Translator;
 
@@ -12,6 +12,7 @@ export const Legend = withStyles((theme) => ({
   flexContainer: {
     display: 'flex',
     flexDirection: 'row',
+    alignItems: 'center',
     gap: `${2 * theme.spacing.unit}px`,
     borderBottom: '1px solid lightgrey',
     borderTop: '1px solid lightgrey',
@@ -19,60 +20,77 @@ export const Legend = withStyles((theme) => ({
     paddingTop: theme.spacing.unit,
     marginBottom: theme.spacing.unit,
   },
+  key: {
+    fontSize: '14px',
+    fontWeight: 'bold',
+    color: color.black(),
+    marginLeft: theme.spacing.unit,
+  },
   container: {
-    display: 'flex',
-    flexDirection: 'row',
-    gap: `${theme.spacing.unit / 2}px`,
-    alignItems: 'center',
+    position: 'relative',
+    padding: '4px',
+    fontSize: '14px',
+    borderRadius: '4px',
   },
   correct: {
-    fontSize: 'larger',
-    color: color.correct(),
-    backgroundColor: color.correctSecondary(),
-    border: `2px solid ${color.correct()}`,
+    border: `${color.correctTertiary()} solid 2px`,
   },
   incorrect: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px solid ${color.missing()}`,
+    border: `${color.incorrectWithIcon()} solid 2px`,
   },
   missing: {
-    fontSize: 'larger',
-    color: color.missing(),
-    backgroundColor: color.incorrectSecondary(),
-    border: `2px dashed ${color.missing()}`,
+    border: `${color.incorrectWithIcon()} dashed 2px`,
+  },
+  incorrectIcon: {
+    backgroundColor: color.incorrectWithIcon(),
+  },
+  correctIcon: {
+    backgroundColor: color.correctTertiary(),
   },
-}))(({ classes, language }) => {
-  const icons = [
+  icon: {
+    color: color.white(),
+    position: 'absolute',
+    top: '-8px',
+    left: '-8px',
+    borderRadius: '50%',
+    fontSize: '12px',
+    padding: '2px',
+  },
+}))(({ classes, language, showOnlyCorrect }) => {
+  const legendItems = [
     {
-      iconName: Check,
+      Icon: Check,
       label: translator.t('selectText.correctAnswerSelected', { lng: language }),
-      className: classes.correct,
+      containerClass: classNames(classes.correct, classes.container),
+      iconClass: classNames(classes.correctIcon, classes.icon),
     },
     {
-      iconName: Remove,
-      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
-      className: classes.missing,
+      Icon: Close,
+      label: translator.t('selectText.incorrectSelection', { lng: language }),
+      containerClass: classNames(classes.incorrect, classes.container),
+      iconClass: classNames(classes.incorrectIcon, classes.icon),
     },
     {
-      iconName: Close,
-      label: translator.t('selectText.incorrectSelection', { lng: language }),
-      className: classes.incorrect,
+      Icon: Close,
+      label: translator.t('selectText.correctAnswerNotSelected', { lng: language }),
+      containerClass: classNames(classes.missing, classes.container),
+      iconClass: classNames(classes.incorrectIcon, classes.icon),
     },
   ];
 
+  if (showOnlyCorrect) {
+    legendItems.splice(1, 2);
+  }
+
   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>
-            <span>{icon.label}</span>
-          </div>
-        );
-      })}
+      <span className={classes.key}>{translator.t('selectText.key', { lng: language })}</span>
+      {legendItems.map(({ Icon, label, containerClass, iconClass }, idx) => (
+        <div key={idx} className={containerClass}>
+          <Icon className={iconClass} />
+          <span>{label}</span>
+        </div>
+      ))}
     </div>
   );
 });

package/src/token-select/__tests__/__snapshots__/token.test.jsx.snap

@@ -1,9 +1,7 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`token snapshot renders 1`] = `
-<Wrapper
-  useWrapper={false}
->
+<Wrapper>
   <span
     className="tokenRootClass token"
     dangerouslySetInnerHTML={
@@ -16,9 +14,7 @@ exports[`token snapshot renders 1`] = `
 `;
 
 exports[`token snapshot renders with brs 1`] = `
-<Wrapper
-  useWrapper={false}
->
+<Wrapper>
   <span
     className="tokenRootClass token"
     dangerouslySetInnerHTML={

package/src/token-select/token.jsx

@@ -2,22 +2,26 @@ import React from 'react';
 import PropTypes from 'prop-types';
 import { withStyles } from '@material-ui/core/styles';
 import classNames from 'classnames';
-import { color } from '@pie-lib/render-ui';
 import Check from '@material-ui/icons/Check';
 import Close from '@material-ui/icons/Close';
 
-const Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) => {
-  if (useWrapper) {
-    return (
-      <span className={classNameContainer}>
-        {children}
-        <Icon className={iconClass} viewBox={'0 1 24 24'} />
-      </span>
-    );
-  }
+import { color } from '../../render-ui/src/index';
 
-  return children;
-};
+// we need to use a larger line height for the token to be more readable
+const LINE_HEIGHT_MULTIPLIER = 3.2;
+// we need a bit more space for correctness indicators
+const CORRECTNESS_LINE_HEIGHT_MULTIPLIER = 3.4;
+const CORRECTNESS_PADDING = 2;
+
+const Wrapper = ({ useWrapper, children, classNameContainer, iconClass, Icon }) =>
+  useWrapper ? (
+    <span className={classNameContainer}>
+      {children}
+      <Icon className={iconClass} />
+    </span>
+  ) : (
+    children
+  );
 
 Wrapper.propTypes = {
   useWrapper: PropTypes.bool,
@@ -38,11 +42,11 @@ export class Token extends React.Component {
   static propTypes = {
     ...TokenTypes,
     classes: PropTypes.object.isRequired,
+    text: PropTypes.string.isRequired,
     className: PropTypes.string,
     disabled: PropTypes.bool,
     highlight: PropTypes.bool,
     correct: PropTypes.bool,
-    text: PropTypes.string.isRequired,
   };
 
   static defaultProps = {
@@ -50,39 +54,55 @@ export class Token extends React.Component {
     text: '',
   };
 
-  render() {
+  getClassAndIconConfig = () => {
     const {
-      text,
       selectable,
       selected,
       classes,
       className: classNameProp,
       disabled,
-      index,
       highlight,
       correct,
       animationsDisabled,
       isMissing,
     } = this.props;
     const isTouchEnabled = 'ontouchstart' in window || navigator.maxTouchPoints > 0 || navigator.msMaxTouchPoints > 0;
-
-    let className;
+    const baseClassName = Token.rootClassName;
     let classNameContainer;
     let Icon;
     let iconClass;
 
     if (correct === undefined && selected && disabled) {
-      className = classNames(classes.token, classes.selected, classes.disabledBlack);
-    } else if (correct !== undefined) {
-      className = classNames(Token.rootClassName, classes.custom);
-      Icon = correct ? Check : Close;
-      classNameContainer = correct === true ? classes.correct : classes.incorrect;
-      iconClass = correct === true ? classes.correctIcon : classes.incorrectIcon;
-    } else if (isMissing) {
-      className = classNames(Token.rootClassName, classes.custom, isMissing === true && classes.missing);
-    } else {
-      className = classNames(
-        Token.rootClassName,
+      return {
+        className: classNames(classes.token, classes.selected, classes.disabledBlack),
+      };
+    }
+
+    if (correct !== undefined) {
+      const isCorrect = correct === true;
+      return {
+        className: classNames(baseClassName, classes.custom),
+        classNameContainer: classNames(isCorrect ? classes.correct : classes.incorrect, classes.commonTokenStyle),
+        Icon: isCorrect ? Check : Close,
+        iconClass: classNames(
+          classes.correctnessIndicatorIcon,
+          isCorrect ? classes.correctIcon : classes.incorrectIcon,
+        ),
+      };
+    }
+
+    if (isMissing) {
+      return {
+        className: classNames(baseClassName, classes.custom, classes.missing, classes.commonTokenStyle),
+        classNameContainer: classes.commonTokenStyle,
+        Icon: Close,
+        iconClass: classNames(classes.correctnessIndicatorIcon, classes.incorrectIcon),
+      };
+    }
+
+    return {
+      className: classNames(
+        baseClassName,
         classes.token,
         disabled && classes.disabled,
         selectable && !disabled && !isTouchEnabled && classes.selectable,
@@ -91,11 +111,20 @@ export class Token extends React.Component {
         highlight && selectable && !disabled && !selected && classes.highlight,
         animationsDisabled && classes.print,
         classNameProp,
-      );
-    }
+      ),
+      classNameContainer,
+      Icon,
+      iconClass,
+    };
+  };
+
+  render() {
+    const { text, index, correct, isMissing } = this.props;
+    const { className, classNameContainer, Icon, iconClass } = this.getClassAndIconConfig();
+
     return (
       <Wrapper
-        useWrapper={correct !== undefined}
+        useWrapper={correct !== undefined || isMissing}
         classNameContainer={classNameContainer}
         iconClass={iconClass}
         Icon={Icon}
@@ -124,67 +153,73 @@ export default withStyles((theme) => {
       cursor: 'inherit',
     },
     disabledAndSelected: {
-      backgroundColor: color.secondaryLight(),
+      backgroundColor: color.blueGrey100(),
     },
     selectable: {
       [theme.breakpoints.up(769)]: {
         '&:hover': {
-          backgroundColor: color.primaryLight(),
+          backgroundColor: color.blueGrey300(),
           color: theme.palette.common.black,
           '& > *': {
-            backgroundColor: color.primaryLight(),
+            backgroundColor: color.blueGrey300(),
           },
         },
       },
     },
     selected: {
-      backgroundColor: color.primaryLight(),
+      backgroundColor: color.blueGrey100(),
       color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
+      border: `solid 2px ${color.blueGrey900()}`,
+      borderRadius: '4px',
       '& > *': {
-        backgroundColor: color.primaryLight(),
+        backgroundColor: color.blueGrey100(),
       },
     },
     highlight: {
-      border: `dashed 2px ${color.disabled()}`,
-      lineHeight: `${theme.spacing.unit * 3}px`,
+      border: `dashed 2px ${color.blueGrey600()}`,
+      borderRadius: '4px',
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
     },
     print: {
-      border: `dashed 2px ${color.disabled()}`,
-      lineHeight: `${theme.spacing.unit * 3}px`,
+      border: `dashed 2px ${color.blueGrey600()}`,
+      borderRadius: '4px',
+      lineHeight: `${theme.spacing.unit * LINE_HEIGHT_MULTIPLIER}px`,
       color: color.text(),
     },
     custom: {
       display: 'initial',
     },
-    correct: {
-      backgroundColor: color.correctSecondary(),
-      border: `${color.correct()} solid 2px`,
+    commonTokenStyle: {
+      position: 'relative',
+      borderRadius: '4px',
       color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
+      lineHeight: `${theme.spacing.unit * CORRECTNESS_LINE_HEIGHT_MULTIPLIER + CORRECTNESS_PADDING}px`,
+      padding: `${CORRECTNESS_PADDING}px`,
+    },
+    correct: {
+      border: `${color.correctTertiary()} solid 2px`,
     },
     incorrect: {
-      backgroundColor: color.incorrectSecondary(),
-      border: `${color.missing()} solid 2px`,
-      color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
+      border: `${color.incorrectWithIcon()} solid 2px`,
     },
     missing: {
-      backgroundColor: color.incorrectSecondary(),
-      border: `${color.missing()} dashed 2px`,
-      color: theme.palette.common.black,
-      lineHeight: `${theme.spacing.unit * 3}px`,
-      textDecoration: `line-through ${color.missing()}`,
+      border: `${color.incorrectWithIcon()} dashed 2px`,
     },
     incorrectIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: color.missing(),
+      backgroundColor: color.incorrectWithIcon(),
     },
     correctIcon: {
-      verticalAlign: 'middle',
-      fontSize: 'larger',
-      color: color.correct(),
+      backgroundColor: color.correctTertiary(),
+    },
+    correctnessIndicatorIcon: {
+      color: color.white(),
+      position: 'absolute',
+      top: '-8px',
+      left: '-8px',
+      borderRadius: '50%',
+      fontSize: '12px',
+      padding: '2px',
     },
   };
 })(Token);

package/src/tokenizer/controls.jsx

@@ -4,7 +4,7 @@ import Button from '@material-ui/core/Button';
 import { withStyles } from '@material-ui/core/styles';
 import Switch from '@material-ui/core/Switch';
 import FormControlLabel from '@material-ui/core/FormControlLabel';
-import { color } from '@pie-lib/render-ui';
+import { color } from '../../../render-ui/src/index';
 import classNames from 'classnames';
 
 export class Controls extends React.Component {