@instructure/quiz-core 17.19.2 → 17.19.3-rc.0

package/lib/common/components/shared/Card/CardWrapper/index.js

@@ -0,0 +1,72 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.CardWrapper = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiView = require("@instructure/ui-view");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'caADp',
+  template: function template(theme) {
+    return "\n\n.caADp_gasz{background-color:".concat(theme.wrapperBackgroundColor || 'inherit', ";box-sizing:border-box;min-height:100%;padding:").concat(theme.wrapperPadding || 'inherit', ";transition:").concat(theme.wrapperTransitionDuration || 'inherit', " ease}\n\n@media screen and (--phoneBreakPoint){.caADp_gasz{padding:").concat(theme.phoneWrapperPadding || 'inherit', " 0}}");
+  },
+  'wrapper': 'caADp_gasz'
+};
+var CardWrapper = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(CardWrapper, _Component);
+
+  var _super = (0, _createSuper2.default)(CardWrapper);
+
+  function CardWrapper() {
+    (0, _classCallCheck2.default)(this, CardWrapper);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(CardWrapper, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div",
+        height: "100%"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)(styles.wrapper, this.props.className)
+      }, this.props.children));
+    }
+  }]);
+  CardWrapper.displayName = "CardWrapper";
+  return CardWrapper;
+}(_react.Component), _class2.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string
+}, _class2.defaultProps = {
+  className: null
+}, _temp)) || _class);
+exports.CardWrapper = CardWrapper;
+var _default = CardWrapper;
+exports.default = _default;

package/lib/common/components/shared/Card/CardWrapper/theme.js

@@ -0,0 +1,21 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      colors = _ref.colors,
+      borders = _ref.borders,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    wrapperPadding: spacing.medium,
+    wrapperTransitionDuration: transitions.duration,
+    wrapperBackgroundColor: colors.porcelain,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    phoneWrapperPadding: spacing.medium
+  };
+}

package/lib/common/components/shared/Card/index.js

@@ -0,0 +1,46 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.Card = Card;
+exports.default = void 0;
+
+var _objectWithoutProperties2 = _interopRequireDefault(require("@babel/runtime/helpers/objectWithoutProperties"));
+
+var _react = _interopRequireDefault(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _index = _interopRequireDefault(require("./CardContent/index.js"));
+
+var _index2 = _interopRequireDefault(require("./CardWrapper/index.js"));
+
+function Card(_ref) {
+  var children = _ref.children,
+      wrapped = _ref.wrapped,
+      wrapperClassName = _ref.wrapperClassName,
+      props = (0, _objectWithoutProperties2.default)(_ref, ["children", "wrapped", "wrapperClassName"]);
+
+  var card = /*#__PURE__*/_react.default.createElement(_index.default, props, children);
+
+  return wrapped ? /*#__PURE__*/_react.default.createElement(_index2.default, {
+    className: wrapperClassName
+  }, card) : card;
+}
+
+Card.propTypes = {
+  children: _propTypes.default.node.isRequired,
+  className: _propTypes.default.string,
+  wrapperClassName: _propTypes.default.string,
+  wrapped: _propTypes.default.bool
+};
+Card.defaultProps = {
+  wrapped: false,
+  className: null,
+  wrapperClassName: null
+};
+var _default = Card;
+exports.default = _default;

package/lib/common/components/shared/ExpandButton/index.js

@@ -0,0 +1,90 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.ExpandButton = void 0;
+
+var _defineProperty2 = _interopRequireDefault(require("@babel/runtime/helpers/defineProperty"));
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _classnames = _interopRequireDefault(require("classnames"));
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _uiReactUtils = require("@instructure/ui-react-utils");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'yAmvo',
+  template: function template(theme) {
+    return "\n\n.yAmvo_dnnz{transition:transform ".concat(theme.iconTransitionDuration || 'inherit', "}\n\n.yAmvo_bPeN{transform:rotateX(180deg)}");
+  },
+  'icon': 'yAmvo_dnnz',
+  'iconOpened': 'yAmvo_bPeN'
+};
+var ExpandButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(ExpandButton, _Component);
+
+  var _super = (0, _createSuper2.default)(ExpandButton);
+
+  function ExpandButton() {
+    (0, _classCallCheck2.default)(this, ExpandButton);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(ExpandButton, [{
+    key: "renderIcon",
+    value: function renderIcon() {
+      var _classNames;
+
+      return /*#__PURE__*/_react.default.createElement(_uiIcons.IconArrowOpenDownLine, {
+        className: (0, _classnames.default)((_classNames = {}, (0, _defineProperty2.default)(_classNames, styles.icon, true), (0, _defineProperty2.default)(_classNames, styles.iconOpened, this.props.isExpanded), _classNames))
+      });
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, Object.assign({
+        variant: "icon",
+        size: "medium",
+        onClick: this.props.onClick,
+        icon: this.renderIcon(),
+        title: this.props.title
+      }, (0, _uiReactUtils.omitProps)(this.props, this.constructor.propTypes)), /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, this.props.title));
+    }
+  }]);
+  ExpandButton.displayName = "ExpandButton";
+  return ExpandButton;
+}(_react.Component), _class2.propTypes = {
+  isExpanded: _propTypes.default.bool.isRequired,
+  title: _propTypes.default.string.isRequired,
+  onClick: _propTypes.default.func.isRequired
+}, _temp)) || _class);
+exports.ExpandButton = ExpandButton;
+var _default = ExpandButton;
+exports.default = _default;

package/lib/common/components/shared/ExpandButton/theme.js

@@ -0,0 +1,12 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator() {
+  return {
+    iconTransitionDuration: '0.3s'
+  };
+}

package/lib/common/components/shared/FormattedDuration/FormattedDuration.examples.js

@@ -0,0 +1,27 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _react = _interopRequireDefault(require("react"));
+
+var _uiText = require("@instructure/ui-text");
+
+var _default = {
+  propValues: {
+    seconds: [void 0, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      color: "primary"
+    }, "450"), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      color: "primary"
+    }, "1800"), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      color: "primary"
+    }, "3600"), /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+      color: "primary"
+    }, "5400")]
+  }
+};
+exports.default = _default;

package/lib/common/components/shared/FormattedDuration/index.js

@@ -0,0 +1,126 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.breakdownSeconds = breakdownSeconds;
+exports.default = exports.FormattedTimer = exports.MINUTE_IN_SECONDS = exports.HOUR_IN_SECONDS = exports.DAY_IN_SECONDS = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
+var _react = _interopRequireWildcard(require("react"));
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _quizCommon = require("@instructure/quiz-common");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _formatTimespan = require("../../../util/formatTimespan.js");
+
+var _uiText = require("@instructure/ui-text");
+
+var DAY_IN_SECONDS = 86400;
+exports.DAY_IN_SECONDS = DAY_IN_SECONDS;
+var HOUR_IN_SECONDS = 3600;
+exports.HOUR_IN_SECONDS = HOUR_IN_SECONDS;
+var MINUTE_IN_SECONDS = 60;
+/**
+ * @param  {integer} seconds Number of seconds
+ * @return {object}
+ */
+
+exports.MINUTE_IN_SECONDS = MINUTE_IN_SECONDS;
+
+function breakdownSeconds(seconds) {
+  var includeDays = arguments.length > 1 && arguments[1] !== void 0 ? arguments[1] : false;
+
+  if (seconds <= 0 || seconds === null || seconds === void 0) {
+    return (0, _objectSpread2.default)((0, _objectSpread2.default)({}, includeDays && {
+      days: 0
+    }), {}, {
+      hours: 0,
+      minutes: 0,
+      seconds: 0
+    });
+  }
+
+  return (0, _objectSpread2.default)({
+    seconds: seconds % MINUTE_IN_SECONDS,
+    minutes: Math.floor(seconds / MINUTE_IN_SECONDS) % MINUTE_IN_SECONDS,
+    hours: includeDays ? Math.floor(seconds % DAY_IN_SECONDS / HOUR_IN_SECONDS) : Math.floor(seconds / HOUR_IN_SECONDS)
+  }, includeDays && {
+    days: Math.floor(seconds / DAY_IN_SECONDS)
+  });
+}
+
+var FormattedTimer = /*#__PURE__*/function (_withI18nSupport) {
+  (0, _inherits2.default)(FormattedTimer, _withI18nSupport);
+
+  var _super = (0, _createSuper2.default)(FormattedTimer);
+
+  function FormattedTimer() {
+    (0, _classCallCheck2.default)(this, FormattedTimer);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(FormattedTimer, [{
+    key: "render",
+    value: function render() {
+      var _breakdownSeconds = breakdownSeconds(this.props.seconds),
+          hours = _breakdownSeconds.hours,
+          minutes = _breakdownSeconds.minutes,
+          seconds = _breakdownSeconds.seconds;
+
+      var altText = (0, _formatTimespan.formatTime)(this.props.seconds);
+      var display = hours > 0 ? (0, _formatMessage.default)('{ hours }:{ minutes }:{ seconds }', {
+        hours: this.formatDecimal2MinIntegerNoFraction(hours),
+        minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+        seconds: this.formatDecimal2MinIntegerNoFraction(seconds)
+      }) : (0, _formatMessage.default)('{ minutes }:{ seconds }', {
+        minutes: this.formatDecimal2MinIntegerNoFraction(minutes),
+        seconds: this.formatDecimal2MinIntegerNoFraction(seconds)
+      });
+      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.AccessibleContent, {
+        alt: altText
+      }, /*#__PURE__*/_react.default.createElement(_uiText.Text, {
+        color: "primary",
+        size: this.props.fontSize,
+        weight: this.props.fontWeight
+      }, display));
+    }
+  }]);
+  FormattedTimer.displayName = "FormattedTimer";
+  return FormattedTimer;
+}((0, _quizCommon.withI18nSupport)(_react.Component));
+
+exports.FormattedTimer = FormattedTimer;
+FormattedTimer.propTypes = {
+  fontSize: _uiText.Text.propTypes.size,
+  fontWeight: _uiText.Text.propTypes.weight,
+  seconds: _propTypes.default.number
+};
+FormattedTimer.defaultProps = {
+  fontSize: _uiText.Text.defaultProps.size,
+  fontWeight: _uiText.Text.defaultProps.weight,
+  seconds: 0
+};
+FormattedTimer.contextTypes = {
+  locale: _propTypes.default.string
+};
+var _default = FormattedTimer;
+exports.default = _default;

package/lib/common/components/shared/IfFeature/index.js

@@ -0,0 +1,24 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapStateToProps = mapStateToProps;
+exports.default = exports.IfFeature = void 0;
+
+var _reactRedux = require("../../../react-redux.js");
+
+var _presenter = require("./presenter.js");
+
+var _featureCheck = require("../../../util/featureCheck.js");
+
+function mapStateToProps(state, props) {
+  return {
+    isOn: (0, _featureCheck.featureOn)(props.name)
+  };
+}
+
+var IfFeature = (0, _reactRedux.connect)(mapStateToProps)(_presenter.IfFeature);
+exports.IfFeature = IfFeature;
+var _default = IfFeature;
+exports.default = _default;

package/lib/common/components/shared/IfFeature/presenter.js

@@ -0,0 +1,56 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.IfFeature = void 0;
+
+var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
+
+var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
+
+var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits"));
+
+var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
+
+var _react = require("react");
+
+var _propTypes = _interopRequireDefault(require("prop-types"));
+
+var IfFeature = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(IfFeature, _Component);
+
+  var _super = (0, _createSuper2.default)(IfFeature);
+
+  function IfFeature() {
+    (0, _classCallCheck2.default)(this, IfFeature);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(IfFeature, [{
+    key: "render",
+    value: function render() {
+      if (!this.props.isOn) {
+        return null;
+      }
+
+      return this.props.children;
+    }
+  }]);
+  IfFeature.displayName = "IfFeature";
+  return IfFeature;
+}(_react.Component);
+
+exports.IfFeature = IfFeature;
+IfFeature.propTypes = {
+  children: _propTypes.default.oneOfType([_propTypes.default.arrayOf(_propTypes.default.node), _propTypes.default.node]),
+  isOn: _propTypes.default.bool
+};
+IfFeature.defaultProps = {
+  children: null,
+  isOn: false
+};
+var _default = IfFeature;
+exports.default = _default;

package/lib/common/components/shared/InteractionTypes/index.js

@@ -0,0 +1,20 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _reactRedux = require("../../../react-redux.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+function mapStateToProps(state) {
+  return {};
+}
+
+var _default = (0, _reactRedux.connect)(mapStateToProps)(_presenter.default);
+
+exports.default = _default;