@pie-element/ebsr 11.0.0 → 12.0.1-esmbeta.1

package/configure/node_modules/@pie-lib/correct-answer-toggle/package.json

@@ -0,0 +1,44 @@
+{
+  "name": "@pie-lib/correct-answer-toggle",
+  "description": "A react based toggle component",
+  "repository": "pie-framework/pie-lib",
+  "license": "ISC",
+  "keywords": [
+    "react",
+    "pie",
+    "material-ui"
+  ],
+  "publishConfig": {
+    "access": "public"
+  },
+  "version": "2.22.3",
+  "main": "lib/index.js",
+  "module": "src/index.jsx",
+  "scripts": {},
+  "dependencies": {
+    "@material-ui/core": "^3.8.3",
+    "@pie-lib/icons": "^2.21.2",
+    "@pie-lib/render-ui": "^4.32.3",
+    "@pie-lib/translator": "^2.20.2",
+    "classnames": "^2.2.6",
+    "lodash": "^4.17.11",
+    "prop-types": "^15.6.2",
+    "react-transition-group": "^2.5.2"
+  },
+  "devDependencies": {
+    "react": "^16.8.1",
+    "react-dom": "^16.9.0"
+  },
+  "peerDependencies": {
+    "react": "^16.8.1",
+    "react-dom": "^16.8.1"
+  },
+  "gitHead": "8a327571bd64249e4c88c0c8e750d16d6213f535",
+  "exports": {
+    ".": {
+      "import": "./esm/index.js",
+      "require": "./lib/index.js",
+      "default": "./esm/index.js"
+    }
+  }
+}

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/__tests__/index.test.jsx

@@ -0,0 +1,99 @@
+import { mount, shallow, configure } from 'enzyme';
+
+import Expander from '../expander';
+import React from 'react';
+import { CorrectAnswerToggle } from '../index';
+import Adapter from 'enzyme-adapter-react-16';
+
+configure({ adapter: new Adapter() });
+
+describe('CorrectAnswerToggle', () => {
+  let onToggle;
+  let wrapper;
+  let sheet;
+
+  let mkWrapper = (toggled, msgs) => {
+    toggled = toggled === false ? false : true;
+    msgs = msgs || {};
+    return shallow(
+      <CorrectAnswerToggle
+        toggled={toggled}
+        classes={{
+          root: 'root',
+          label: 'label',
+        }}
+        onToggle={onToggle}
+        hideMessage={msgs.hide}
+        showMessage={msgs.show}
+        sheet={sheet}
+      />,
+      {
+        context: {},
+      },
+    );
+  };
+
+  beforeEach(() => {
+    let iconStub = {};
+
+    sheet = {
+      classes: {
+        root: 'root',
+        label: 'label',
+      },
+    };
+    onToggle = jest.fn();
+    wrapper = mkWrapper();
+  });
+
+  describe('render', () => {
+    it('has the hide message', () => {
+      let holder = wrapper.find('.label');
+      expect(holder.text()).toEqual('Hide correct answer');
+    });
+
+    it('has show message when toggled is false', () => {
+      const w = mkWrapper(false);
+      let holder = w.find(`.label`);
+      expect(holder.text()).toEqual('Show correct answer');
+    });
+
+    it('sets a custom hide message', () => {
+      wrapper = mkWrapper(true, { hide: 'hide!' });
+      let holder = wrapper.find('.label');
+      expect(holder.text()).toEqual('hide!');
+    });
+
+    it('sets a custom show message', () => {
+      wrapper = mkWrapper(false, { show: 'show!' });
+      let holder = wrapper.find('.label');
+      expect(holder.text()).toEqual('show!');
+    });
+  });
+
+  describe('onClick', () => {
+    it('calls onToggle', () => {
+      wrapper
+        .find(Expander)
+        .childAt(0)
+        .simulate('click');
+      expect(onToggle.mock.calls[0][0]).toEqual(false);
+    });
+
+    it('calls onToggle with update state', () => {
+      onToggle.mockReset();
+      wrapper
+        .find(Expander)
+        .childAt(0)
+        .simulate('click');
+      expect(onToggle.mock.calls[0][0]).toEqual(false);
+      //simulate updating the toggled prop
+      wrapper.setProps({ toggled: false });
+      wrapper
+        .find(Expander)
+        .childAt(0)
+        .simulate('click');
+      expect(onToggle.mock.calls[1][0]).toEqual(true);
+    });
+  });
+});

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/expander.jsx

@@ -0,0 +1,61 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { withStyles } from '@material-ui/core/styles';
+import { CSSTransition } from 'react-transition-group';
+
+const Expander = (props) => {
+  const { classes, show, children } = props;
+
+  return (
+    <CSSTransition in={show} appear={true} mountOnEnter={false} timeout={300} classNames={{ ...classes }}>
+      <div className={classes.expander}>{children}</div>
+    </CSSTransition>
+  );
+};
+
+Expander.propTypes = {
+  show: PropTypes.bool.isRequired,
+  className: PropTypes.string,
+  classes: PropTypes.object,
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]).isRequired,
+};
+
+const transition = 'height ease-in 300ms, opacity ease-in 300ms';
+
+export default withStyles(() => ({
+  expander: {
+    position: 'relative',
+    height: 0,
+    overflow: 'hidden',
+    display: 'flex',
+    visibility: 'hidden',
+    width: 0,
+  },
+  enter: {
+    transition,
+    opacity: 1,
+    height: 'auto',
+    width: 'auto',
+    visibility: 'visible',
+    minHeight: '25px',
+  },
+  enterDone: {
+    height: 'auto',
+    visibility: 'visible',
+    width: 'auto',
+    minHeight: '25px',
+  },
+  exit: {
+    transition,
+    opacity: 0,
+    height: 0,
+    visibility: 'visible',
+    width: 0,
+  },
+  exitDone: {
+    opacity: 0,
+    visibility: 'hidden',
+    height: 0,
+    width: 0,
+  },
+}))(Expander);

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/index.jsx

@@ -0,0 +1,98 @@
+import styles from './styles';
+import { withStyles } from '@material-ui/core/styles';
+import CSSTransition from 'react-transition-group/CSSTransition';
+import { CorrectResponse } from '@pie-lib/icons';
+import { Readable } from '@pie-lib/render-ui';
+import Expander from './expander';
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import Translator from '@pie-lib/translator';
+
+const { translator } = Translator;
+
+/**
+ * We export the raw unstyled class for testability. For public use please use the default export.
+ */
+export class CorrectAnswerToggle extends React.Component {
+  static propTypes = {
+    onToggle: PropTypes.func,
+    toggled: PropTypes.bool,
+    show: PropTypes.bool,
+    hideMessage: PropTypes.string,
+    showMessage: PropTypes.string,
+    classes: PropTypes.object.isRequired,
+    className: PropTypes.string,
+    language: PropTypes.string,
+  };
+
+  static defaultProps = {
+    showMessage: 'Show correct answer',
+    hideMessage: 'Hide correct answer',
+    show: false,
+    toggled: false,
+  };
+
+  constructor(props) {
+    super(props);
+    this.state = {
+      show: props.show,
+    };
+
+    CorrectAnswerToggle.defaultProps = {
+      ...CorrectAnswerToggle.defaultProps,
+      showMessage: translator.t('common:showCorrectAnswer', { lng: props.language }),
+      hideMessage: translator.t('common:hideCorrectAnswer', { lng: props.language }),
+    };
+  }
+
+  onClick() {
+    this.props.onToggle(!this.props.toggled);
+  }
+  onTouch(event) {
+    event.preventDefault(); // Prevents the default action (click event)
+    this.props.onToggle(!this.props.toggled);
+  }
+
+  UNSAFE_componentWillReceiveProps(nextProps) {
+    this.setState({
+      show: nextProps.show,
+    });
+
+    if (nextProps.language !== this.props?.language) {
+      CorrectAnswerToggle.defaultProps = {
+        ...CorrectAnswerToggle.defaultProps,
+        showMessage: translator.t('common:showCorrectAnswer', { lng: nextProps.language }),
+        hideMessage: translator.t('common:hideCorrectAnswer', { lng: nextProps.language }),
+      };
+    }
+  }
+
+  render() {
+    const { classes, className, toggled, hideMessage, showMessage } = this.props;
+
+    return (
+      <div className={classNames(classes.root, className)}>
+        <Expander show={this.state.show} className={classes.expander}>
+          <div className={classes.content} onClick={this.onClick.bind(this)} onTouchEnd={this.onTouch.bind(this)}>
+            <div className={classes.iconHolder}>
+              <CSSTransition timeout={400} in={toggled} exit={!toggled} classNames={classes}>
+                <CorrectResponse open={toggled} key="correct-open" className={classes.icon} />
+              </CSSTransition>
+              <CSSTransition timeout={5000} in={!toggled} exit={toggled} classNames={classes}>
+                <CorrectResponse open={toggled} key="correct-closed" className={classes.icon} />
+              </CSSTransition>
+            </div>
+            <Readable false>
+              <div className={classes.label} aria-hidden={!this.state.show}>
+                {toggled ? hideMessage : showMessage}
+              </div>
+            </Readable>
+          </div>
+        </Expander>
+      </div>
+    );
+  }
+}
+
+export default withStyles(styles)(CorrectAnswerToggle);

package/configure/node_modules/@pie-lib/correct-answer-toggle/src/styles.js

@@ -0,0 +1,61 @@
+import { color } from '@pie-lib/render-ui';
+
+const noTouch = {
+  '-webkit-touchCcallout': 'none',
+  '-webkit-user-select': 'none',
+  '-khtml-user-select': 'none',
+  '-moz-user-select': 'none',
+  '-ms-user-select': 'none',
+  'user-select': 'none',
+};
+
+export default {
+  root: {
+    width: '100%',
+    cursor: 'pointer',
+  },
+  content: {
+    margin: '0 auto',
+    textAlign: 'center',
+    display: 'flex',
+  },
+  label: Object.assign(
+    {
+      width: 'fit-content',
+      minWidth: '140px',
+      // eslint-disable-next-line
+      fontFamily: "'Roboto', sans-serif",
+      alignSelf: 'center',
+      verticalAlign: 'middle',
+      color: `var(--correct-answer-toggle-label-color,  ${color.text()})`,
+      fontWeight: 'normal',
+    },
+    noTouch,
+  ),
+  icon: {
+    position: 'absolute',
+    width: '25px',
+  },
+  iconHolder: {
+    width: '25px',
+    marginRight: '5px',
+    display: 'flex',
+    alignItems: 'center',
+  },
+  enter: {
+    opacity: '0',
+  },
+  enterActive: {
+    opacity: '1',
+    transition: 'opacity 0.3s ease-in',
+  },
+  exit: {
+    opacity: '1',
+  },
+  exitActive: {
+    opacity: '0',
+    transition: 'opacity 0.3s ease-in',
+  },
+};
+
+export const animationStyles = {};

package/configure/node_modules/@pie-lib/icons/CHANGELOG.json

@@ -0,0 +1 @@
+[]