@sis-cc/dotstatsuite-visions 7.16.0 → 7.17.0

package/lib/Contact/Contact.js

@@ -0,0 +1,357 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _core = require('@material-ui/core');
+
+var _isemail = require('isemail');
+
+var _styles = require('@material-ui/styles');
+
+var _Mode = require('./Mode');
+
+var _Mode2 = _interopRequireDefault(_Mode);
+
+var _Input = require('./Input');
+
+var _Input2 = _interopRequireDefault(_Input);
+
+var _ = require('../');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    paper: {
+      backgroundColor: theme.palette.background.paper,
+      padding: theme.spacing(2)
+    },
+    emailReasonMessage: {
+      backgroundColor: R.path(['palette', 'tertiary', 'dark'])(theme) || theme.palette.grey[100],
+      padding: theme.spacing(2),
+      margin: theme.spacing(2, 0)
+    },
+    label: {
+      color: theme.palette.primary.main
+    },
+    textarea: {
+      width: '100%',
+      padding: theme.spacing(1)
+    },
+    textareaError: {
+      borderColor: theme.palette.error.main,
+      borderWidth: theme.spacing(0.25)
+    }
+  };
+});
+
+var Contact = function Contact(_ref) {
+  var _cx;
+
+  var modes = _ref.modes,
+      _ref$defaultMode = _ref.defaultMode,
+      defaultMode = _ref$defaultMode === undefined ? 'question' : _ref$defaultMode,
+      defaultFullName = _ref.defaultFullName,
+      defaultEmail = _ref.defaultEmail,
+      labels = _ref.labels,
+      send = _ref.send,
+      isSubmitDisable = _ref.isSubmitDisable,
+      children = _ref.children;
+
+  var classes = useStyles();
+
+  var _useState = (0, _react.useState)(defaultMode),
+      mode = _useState[0],
+      setMode = _useState[1];
+
+  var _useState2 = (0, _react.useState)(''),
+      title = _useState2[0],
+      setTitle = _useState2[1];
+
+  var _useState3 = (0, _react.useState)(defaultFullName || ''),
+      name = _useState3[0],
+      setName = _useState3[1];
+
+  var _useState4 = (0, _react.useState)(''),
+      organisation = _useState4[0],
+      setOrganisation = _useState4[1];
+
+  var _useState5 = (0, _react.useState)(defaultEmail || ''),
+      email = _useState5[0],
+      setEmail = _useState5[1];
+
+  var _useState6 = (0, _react.useState)(false),
+      emailHasError = _useState6[0],
+      setEmailError = _useState6[1];
+
+  var _useState7 = (0, _react.useState)(''),
+      details = _useState7[0],
+      setDetails = _useState7[1];
+
+  var _useState8 = (0, _react.useState)(true),
+      checked = _useState8[0],
+      setChecked = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(true),
+      isSendDisable = _useState9[0],
+      setSendDisable = _useState9[1];
+
+  var _useState10 = (0, _react.useState)(false),
+      detailsHasError = _useState10[0],
+      setDetailsError = _useState10[1];
+
+  var checkEmail = function checkEmail(email) {
+    if ((0, _isemail.validate)(email)) {
+      return setEmailError(false);
+    }
+    return setEmailError(true);
+  };
+
+  var checkDetails = function checkDetails(details) {
+    if (R.isEmpty(details)) {
+      return setDetailsError(true);
+    }
+    return setDetailsError(false);
+  };
+
+  var onSubmit = function onSubmit() {
+    if (R.is(Function)(send)) return send({
+      mode: mode,
+      title: title,
+      name: name,
+      organisation: organisation,
+      email: email,
+      details: details,
+      checkbox: checked
+    });
+  };
+
+  (0, _react.useEffect)(function () {
+    if (R.isEmpty(email)) return setSendDisable(true);
+    if (R.isEmpty(details)) return setSendDisable(true);
+    if (emailHasError) return setSendDisable(true);
+    if (detailsHasError) return setSendDisable(true);
+    return setSendDisable(isSubmitDisable || false);
+  }, [emailHasError, detailsHasError, email, details, isSubmitDisable]);
+
+  return _react2.default.createElement(
+    _core.Grid,
+    { container: true, className: classes.paper, 'data-testid': 'contact-test-id' },
+    _react2.default.createElement(
+      _core.Grid,
+      { item: true, container: true, xs: 12, md: 12, justifyContent: 'space-between' },
+      _react2.default.createElement(
+        _core.Grid,
+        { item: true, xs: 12, sm: 12, md: 5 },
+        _react2.default.createElement(_Mode2.default, {
+          changeMode: setMode,
+          modes: modes,
+          mode: mode,
+          title: R.prop('modeTitle')(labels)
+        })
+      ),
+      _react2.default.createElement(
+        _core.Grid,
+        { item: true, container: true, xs: 12, sm: 12, md: 6, 'flex-direction': 'column' },
+        _react2.default.createElement(
+          _core.Grid,
+          { item: true, xs: 12 },
+          _react2.default.createElement(_Input2.default, {
+            variant: 'outlined',
+            label: labels.personalTitle,
+            name: 'title',
+            type: 'text',
+            fullWidth: true,
+            value: title,
+            onChange: function onChange(e) {
+              return setTitle(e.target.value);
+            },
+            isControlled: true
+          })
+        ),
+        _react2.default.createElement(
+          _core.Grid,
+          { item: true, xs: 12 },
+          _react2.default.createElement(_Input2.default, {
+            variant: 'outlined',
+            isControlled: true,
+            label: labels.name,
+            name: 'name',
+            type: 'text',
+            onChange: function onChange(e) {
+              return setName(e.target.value);
+            },
+            value: name,
+            fullWidth: true
+          })
+        ),
+        _react2.default.createElement(
+          _core.Grid,
+          { item: true, xs: 12 },
+          _react2.default.createElement(_Input2.default, {
+            variant: 'outlined',
+            isControlled: true,
+            label: labels.organisation,
+            type: 'text',
+            name: 'organisation',
+            onChange: function onChange(e) {
+              return setOrganisation(e.target.value);
+            },
+            value: organisation,
+            fullWidth: true
+          })
+        ),
+        _react2.default.createElement(
+          _core.Grid,
+          { item: true, xs: 12 },
+          _react2.default.createElement(_Input2.default, {
+            inputProps: {
+              'aria-label': R.prop('email')(labels),
+              autoComplete: 'email',
+              onBlur: function onBlur() {
+                return checkEmail(email);
+              }
+            },
+            label: R.prop('email')(labels),
+            type: 'email',
+            value: email,
+            onChange: function onChange(e) {
+              return setEmail(e.target.value);
+            },
+            variant: 'outlined',
+            fullWidth: true,
+            isControlled: true,
+            defaultValue: defaultEmail,
+            textFieldProps: { error: emailHasError }
+          })
+        )
+      )
+    ),
+    _react2.default.createElement(
+      _core.Grid,
+      { item: true, xs: 12, md: 12 },
+      _react2.default.createElement(
+        _core.Paper,
+        { className: classes.emailReasonMessage },
+        R.prop('message')(R.find(R.propEq('value', mode))(modes))
+      )
+    ),
+    _react2.default.createElement(
+      _core.Grid,
+      { item: true, xs: 12, md: 12 },
+      _react2.default.createElement(_core.TextareaAutosize, {
+        name: 'details',
+        onChange: function onChange(e) {
+          return setDetails(e.target.value);
+        },
+        className: (0, _classnames2.default)(classes.textarea, (_cx = {}, _cx[classes.textareaError] = detailsHasError, _cx)),
+        'aria-label': R.prop('details')(labels),
+        minRows: 6,
+        placeholder: R.prop('details')(labels),
+        value: details,
+        onBlur: function onBlur() {
+          return checkDetails(details);
+        }
+      })
+    ),
+    _react2.default.createElement(
+      _core.Grid,
+      { item: true, container: true, justifyContent: 'space-between' },
+      _react2.default.createElement(
+        _core.Grid,
+        { item: true },
+        _react2.default.createElement(_core.FormControlLabel, {
+          control: _react2.default.createElement(_core.Checkbox, { name: 'checkedB', color: 'primary' }),
+          label: _react2.default.createElement(
+            _core.Typography,
+            { variant: 'h6', className: classes.label },
+            R.prop('checkbox')(labels)
+          ),
+          checked: checked,
+          onChange: function onChange(e) {
+            return setChecked(e.target.checked);
+          }
+        })
+      ),
+      _react2.default.createElement(
+        _core.Grid,
+        { item: true },
+        _react2.default.createElement(
+          _core.Typography,
+          { variant: 'h6', className: classes.label, style: { paddingTop: 8 } },
+          R.prop('organisationPrivacyPolicy')(labels)
+        )
+      )
+    ),
+    _react2.default.createElement(
+      _core.Grid,
+      { item: true, container: true, justifyContent: 'space-between', alignItems: 'center' },
+      _react2.default.createElement(
+        _core.Grid,
+        { item: true },
+        children
+      ),
+      _react2.default.createElement(
+        _core.Grid,
+        { item: true },
+        _react2.default.createElement(
+          _.Button,
+          {
+            'aria-label': R.prop('submit')(labels),
+            type: 'submit',
+            disabled: isSendDisable,
+            variant: 'contained',
+            color: 'primary',
+            alternative: 'siscc',
+            onClick: onSubmit,
+            size: 'large',
+            className: classes.submitButton
+          },
+          R.prop('submit')(labels)
+        )
+      )
+    )
+  );
+};
+
+Contact.propTypes = process.env.NODE_ENV !== "production" ? {
+  defaultMode: _propTypes2.default.string,
+  defaultFullName: _propTypes2.default.string,
+  defaultEmail: _propTypes2.default.string,
+  lang: _propTypes2.default.string,
+  theme: _propTypes2.default.string,
+  modes: _propTypes2.default.array,
+  send: _propTypes2.default.func,
+  isSubmitDisable: _propTypes2.default.bool,
+  children: _propTypes2.default.node,
+  labels: _propTypes2.default.shape({
+    name: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    organisation: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    personalTitle: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    submit: _propTypes2.default.string,
+    email: _propTypes2.default.string,
+    details: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    contactForHelp: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+  })
+} : {};
+exports.default = Contact;
+module.exports = exports['default'];

package/lib/Contact/Input.js

@@ -0,0 +1,163 @@
+'use strict';
+
+exports.__esModule = true;
+exports.MyInput = undefined;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _classnames = require('classnames');
+
+var _classnames2 = _interopRequireDefault(_classnames);
+
+var _styles = require('@material-ui/core/styles');
+
+var _TextField = require('@material-ui/core/TextField');
+
+var _TextField2 = _interopRequireDefault(_TextField);
+
+var _InputAdornment = require('@material-ui/core/InputAdornment');
+
+var _InputAdornment2 = _interopRequireDefault(_InputAdornment);
+
+var _IconButton = require('@material-ui/core/IconButton');
+
+var _IconButton2 = _interopRequireDefault(_IconButton);
+
+var _Done = require('@material-ui/icons/Done');
+
+var _Done2 = _interopRequireDefault(_Done);
+
+var _withInput = require('../Input/with-input');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function () {
+  return {
+    visibility: {
+      visibility: 'hidden'
+    }
+  };
+});
+
+var LefttIcon = function LefttIcon(_ref) {
+  var Icon = _ref.Icon;
+  return _react2.default.createElement(Icon, null);
+};
+
+LefttIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  Icon: _propTypes2.default.object
+} : {};
+
+var RightIcon = function RightIcon(_ref2) {
+  var onSubmit = _ref2.onSubmit,
+      _ref2$Icon = _ref2.Icon,
+      Icon = _ref2$Icon === undefined ? _Done2.default : _ref2$Icon;
+  return _react2.default.createElement(
+    _IconButton2.default,
+    { color: 'primary', onClick: function onClick() {
+        return onSubmit();
+      } },
+    _react2.default.createElement(Icon, null)
+  );
+};
+
+RightIcon.propTypes = process.env.NODE_ENV !== "production" ? {
+  Icon: _propTypes2.default.object,
+  onSubmit: _propTypes2.default.func,
+  classes: _propTypes2.default.object
+} : {};
+
+var MyInput = exports.MyInput = function MyInput(_ref3) {
+  var _cx;
+
+  var id = _ref3.id,
+      label = _ref3.label,
+      name = _ref3.name,
+      placeholder = _ref3.placeholder,
+      leftIcon = _ref3.leftIcon,
+      rightIcon = _ref3.rightIcon,
+      value = _ref3.value,
+      type = _ref3.type,
+      onChange = _ref3.onChange,
+      onSubmit = _ref3.onSubmit,
+      fullWidth = _ref3.fullWidth,
+      withValidationIcon = _ref3.withValidationIcon,
+      textFieldProps = _ref3.textFieldProps,
+      inputProps = _ref3.inputProps,
+      endAdornment = _ref3.endAdornment;
+
+  var classes = useStyles();
+  var startAdornment = R.isNil(leftIcon) ? null : _react2.default.createElement(
+    _InputAdornment2.default,
+    { position: 'start' },
+    _react2.default.createElement(LefttIcon, { Icon: leftIcon })
+  );
+  var endMyadornment = R.or(withValidationIcon, !R.isNil(rightIcon)) ? _react2.default.createElement(
+    _InputAdornment2.default,
+    { position: 'end', className: (0, _classnames2.default)((_cx = {}, _cx[classes.visibility] = R.isEmpty(value), _cx)) },
+    _react2.default.createElement(RightIcon, { onSubmit: onSubmit, Icon: rightIcon })
+  ) : null;
+
+  var onEnterLabel = function onEnterLabel(event) {
+    if (event.key === 'Enter') {
+      event.preventDefault();
+      if (R.is(Function, onSubmit)) {
+        onSubmit();
+      }
+    }
+  };
+
+  return _react2.default.createElement(_TextField2.default, _extends({
+    'data-testid': 'input-test-id',
+    margin: 'dense',
+    fullWidth: fullWidth,
+    id: id,
+    name: name,
+    type: type,
+    label: label,
+    value: value,
+    variant: 'outlined',
+    placeholder: placeholder,
+    onChange: onChange,
+    onKeyPress: onEnterLabel,
+    InputProps: {
+      startAdornment: startAdornment,
+      endAdornment: R.isNil(endAdornment) ? endMyadornment : endAdornment
+    },
+    inputProps: inputProps
+  }, textFieldProps));
+};
+
+MyInput.propTypes = process.env.NODE_ENV !== "production" ? {
+  id: _propTypes2.default.string,
+  name: _propTypes2.default.string,
+  label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  placeholder: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+  leftIcon: _propTypes2.default.object,
+  rightIcon: _propTypes2.default.object,
+  value: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.number]),
+  type: _propTypes2.default.string,
+  onChange: _propTypes2.default.func,
+  onSubmit: _propTypes2.default.func,
+  fullWidth: _propTypes2.default.bool,
+  withValidationIcon: _propTypes2.default.bool,
+  textFieldProps: _propTypes2.default.object,
+  inputProps: _propTypes2.default.object,
+  endAdornment: _propTypes2.default.node
+} : {};
+
+exports.default = (0, _withInput.withInput)(MyInput);

package/lib/Contact/Mode.js

@@ -0,0 +1,169 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; };
+
+var _react = require('react');
+
+var _react2 = _interopRequireDefault(_react);
+
+var _propTypes = require('prop-types');
+
+var _propTypes2 = _interopRequireDefault(_propTypes);
+
+var _ramda = require('ramda');
+
+var R = _interopRequireWildcard(_ramda);
+
+var _Card = require('@material-ui/core/Card');
+
+var _Card2 = _interopRequireDefault(_Card);
+
+var _styles = require('@material-ui/core/styles');
+
+var _CardContent = require('@material-ui/core/CardContent');
+
+var _CardContent2 = _interopRequireDefault(_CardContent);
+
+var _Typography = require('@material-ui/core/Typography');
+
+var _Typography2 = _interopRequireDefault(_Typography);
+
+var _RadioGroup = require('@material-ui/core/RadioGroup');
+
+var _RadioGroup2 = _interopRequireDefault(_RadioGroup);
+
+var _FormControlLabel = require('@material-ui/core/FormControlLabel');
+
+var _FormControlLabel2 = _interopRequireDefault(_FormControlLabel);
+
+var _Radio = require('@material-ui/core/Radio');
+
+var _Radio2 = _interopRequireDefault(_Radio);
+
+var _ = require('../');
+
+function _interopRequireWildcard(obj) { if (obj && obj.__esModule) { return obj; } else { var newObj = {}; if (obj != null) { for (var key in obj) { if (Object.prototype.hasOwnProperty.call(obj, key)) newObj[key] = obj[key]; } } newObj.default = obj; return newObj; } }
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+var useStyles = (0, _styles.makeStyles)(function (theme) {
+  return {
+    container: {
+      backgroundColor: theme.palette.secondary.dark,
+      boxShadow: 'none',
+      padding: theme.spacing(2),
+      width: '100%',
+      height: '100%'
+    },
+    title: _extends({
+      padding: 0
+    }, R.pathOr({}, ['mixins', 'share', 'title'], theme)),
+    content: {
+      padding: theme.spacing(1, 0),
+      '&:last-child': {
+        padding: theme.spacing(1, 0)
+      }
+    },
+    label: theme.typography.body2,
+    warning: _extends({
+      marginLeft: theme.spacing(0.5),
+      width: 'unset',
+      fontSize: 'inherit',
+      height: '1.3em'
+    }, R.pathOr({}, ['mixins', 'share', 'warning'], theme))
+  };
+});
+
+var Warning = function Warning(_ref) {
+  var title = _ref.title;
+
+  var classes = useStyles();
+  var theme = (0, _styles.useTheme)();
+  var warningColor = R.path(['palette', 'highlight', 'hl1'], theme) || theme.palette.primary.dark;
+  var warningTextColor = theme.palette.getContrastText(warningColor);
+  return _react2.default.createElement(
+    _.Tooltip,
+    {
+      className: classes.warning,
+      title: title,
+      tabIndex: 0,
+      variant: 'warning',
+      'aria-hidden': false,
+      placement: 'bottom',
+      PopperProps: {
+        modifiers: {
+          flip: {
+            behavior: ['bottom', 'top', 'left', 'right']
+          }
+        }
+      }
+    },
+    _react2.default.createElement(_.Warning, { pathBackgroundColor: warningColor, pathColor: warningTextColor })
+  );
+};
+
+Warning.propTypes = process.env.NODE_ENV !== "production" ? {
+  title: _propTypes2.default.string
+} : {};
+
+var Mode = function Mode(_ref2) {
+  var changeMode = _ref2.changeMode,
+      mode = _ref2.mode,
+      _ref2$modes = _ref2.modes,
+      modes = _ref2$modes === undefined ? [] : _ref2$modes,
+      title = _ref2.title;
+
+  var classes = useStyles();
+  return _react2.default.createElement(
+    _Card2.default,
+    { className: classes.container },
+    _react2.default.createElement(
+      _CardContent2.default,
+      { className: classes.content },
+      _react2.default.createElement(
+        _Typography2.default,
+        { variant: 'h6', className: classes.title },
+        title
+      ),
+      _react2.default.createElement(
+        _RadioGroup2.default,
+        { onChange: function onChange(e) {
+            return changeMode(e.target.value);
+          }, value: mode },
+        R.map(function (_ref3) {
+          var label = _ref3.label,
+              value = _ref3.value,
+              warningMessage = _ref3.warningMessage;
+          return _react2.default.createElement(_FormControlLabel2.default, {
+            classes: { label: classes.label },
+            key: value,
+            control: _react2.default.createElement(_Radio2.default, { variant: 'outlined', color: 'primary' }),
+            label: _react2.default.createElement(
+              'span',
+              null,
+              label,
+              warningMessage && _react2.default.createElement(Warning, { title: warningMessage })
+            ),
+            value: value
+          });
+        })(modes)
+      )
+    )
+  );
+};
+
+Mode.propTypes = process.env.NODE_ENV !== "production" ? {
+  changeMode: _propTypes2.default.func,
+  mode: _propTypes2.default.string,
+  modes: _propTypes2.default.arrayOf(_propTypes2.default.shape({
+    label: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element]),
+    value: _propTypes2.default.string,
+    warningMessage: _propTypes2.default.string
+  })),
+  title: _propTypes2.default.oneOfType([_propTypes2.default.string, _propTypes2.default.element])
+} : {};
+
+exports.default = Mode;
+module.exports = exports['default'];

package/lib/Contact/index.js

@@ -0,0 +1,16 @@
+'use strict';
+
+exports.__esModule = true;
+
+var _Contact = require('./Contact');
+
+Object.defineProperty(exports, 'default', {
+  enumerable: true,
+  get: function get() {
+    return _interopRequireDefault(_Contact).default;
+  }
+});
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+module.exports = exports['default'];