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

package/lib/common/components/layout/Page/theme.js

@@ -0,0 +1,17 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var typography = _ref.typography,
+      breakpoints = _ref.breakpoints,
+      transitions = _ref.transitions;
+  return {
+    fontFamily: typography.fontFamily,
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    contentTransition: "transform ".concat(transitions.duration)
+  };
+}

package/lib/common/components/layout/header/Calculator/index.js

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Calculator = void 0;
+
+var _presenter = require("./presenter.js");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _ui = require("../../../../../common/selectors/ui.js");
+
+var _calculator = require("../../../../../common/selectors/calculator.js");
+
+var _ui2 = require("../../../../../common/actions/ui.js");
+
+var _quizSessions = require("../../../../selectors/quizSessions.js");
+
+var _quizzes = require("../../../../selectors/quizzes.js");
+
+var mapStateToProps = function mapStateToProps(state) {
+  return {
+    activeCalculatorId: (0, _ui.getActiveCalculatorId)(state),
+    calculatorType: (0, _calculator.hasVisibleQuestionCalculator)(state) ? 'none' : (0, _quizzes.getActiveQuizCaluclatorType)(state),
+    quizSessionId: (0, _quizSessions.getActiveQuizSessionId)(state)
+  };
+};
+
+var mapDispatchToProps = {
+  setActiveCalculatorId: _ui2.setActiveCalculatorId
+};
+var Calculator = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.Calculator);
+exports.Calculator = Calculator;
+var _default = Calculator;
+exports.default = _default;

package/lib/common/components/layout/header/Calculator/presenter.js

@@ -0,0 +1,84 @@
+"use strict";
+
+var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.Calculator = 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 _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _index = _interopRequireDefault(require("../../../LearnosityCalculator/index.js"));
+
+var CalculatorButton = function CalculatorButton(_ref) {
+  var toggleCalculator = _ref.toggleCalculator,
+      enabled = _ref.enabled;
+  return /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+    icon: _uiIcons.IconCalculatorLine,
+    onClick: toggleCalculator,
+    disabled: !enabled
+  }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Calculator')));
+};
+
+CalculatorButton.propTypes = {
+  toggleCalculator: _propTypes.default.func.isRequired,
+  enabled: _propTypes.default.bool.isRequired
+};
+
+var Calculator = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Calculator, _Component);
+
+  var _super = (0, _createSuper2.default)(Calculator);
+
+  function Calculator() {
+    (0, _classCallCheck2.default)(this, Calculator);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(Calculator, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement(_index.default, Object.assign({}, this.props, {
+        render: CalculatorButton
+      }));
+    }
+  }]);
+  Calculator.displayName = "Calculator";
+  return Calculator;
+}(_react.Component);
+
+exports.Calculator = Calculator;
+Calculator.propTypes = {
+  activeCalculatorId: _propTypes.default.string,
+  calculatorType: _propTypes.default.oneOf(['none', 'basic', 'scientific']),
+  quizSessionId: _propTypes.default.string,
+  setActiveCalculatorId: _propTypes.default.func.isRequired
+};
+Calculator.defaultProps = {
+  activeCalculatorId: void 0,
+  calculatorType: void 0,
+  quizSessionId: void 0
+};
+var _default = Calculator;
+exports.default = _default;

package/lib/common/components/layout/header/HeaderMenuButton/index.js

@@ -0,0 +1,39 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.mapDispatchToProps = mapDispatchToProps;
+exports.default = exports.HeaderMenuButton = exports.mapStateToProps = void 0;
+
+var _redux = require("redux");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _quizSessions = require("../../../../selectors/quizSessions.js");
+
+var _sidebar = require("../../../../actions/sidebar.js");
+
+var _presenter = require("./presenter.js");
+
+var mapStateToProps = function mapStateToProps(state, props) {
+  var hideOnTake = (0, _quizSessions.isOneQuestionAtATime)(state) && !(0, _quizSessions.getBacktrackingIsAllowed)(state);
+  var quizSessionNotLoaded = (0, _quizSessions.getActiveQuizSessionId)(state) === '0';
+  var hidden = !!props.onTake && (hideOnTake || quizSessionNotLoaded);
+  return {
+    hidden: hidden
+  };
+};
+
+exports.mapStateToProps = mapStateToProps;
+
+function mapDispatchToProps(dispatch, props) {
+  return {
+    sidebarMenuClick: props.sidebarMenuClick || (0, _redux.bindActionCreators)(_sidebar.toggleSidebar, dispatch)
+  };
+}
+
+var HeaderMenuButton = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.HeaderMenuButton);
+exports.HeaderMenuButton = HeaderMenuButton;
+var _default = HeaderMenuButton;
+exports.default = _default;

package/lib/common/components/layout/header/HeaderMenuButton/presenter.js

@@ -0,0 +1,86 @@
+"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.HeaderMenuButton = 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 _uiIcons = require("@instructure/ui-icons");
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'cUqra',
+  template: function template(theme) {
+    return "\n\n.cUqra_nvdO{display:none;height:inherit}\n\n@media screen and (--phoneBreakPoint){.cUqra_nvdO{align-items:center;display:flex}}\n\n.cUqra_cdzo{background:transparent;border:none;color:".concat(theme.menuButtonColor || 'inherit', ";font-size:").concat(theme.menuButtonFontSize || 'inherit', ";height:inherit}\n\n.cUqra_cdzo:hover{opacity:").concat(theme.menuButtonHoverOpacity || 'inherit', "}");
+  },
+  'title': 'cUqra_nvdO',
+  'menuButton': 'cUqra_cdzo'
+};
+
+var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconHamburgerLine, null);
+
+var HeaderMenuButton = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(HeaderMenuButton, _Component);
+
+  var _super = (0, _createSuper2.default)(HeaderMenuButton);
+
+  function HeaderMenuButton() {
+    (0, _classCallCheck2.default)(this, HeaderMenuButton);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(HeaderMenuButton, [{
+    key: "render",
+    value: function render() {
+      var _this$props = this.props,
+          hidden = _this$props.hidden,
+          sidebarMenuClick = _this$props.sidebarMenuClick;
+
+      if (hidden) {
+        return null;
+      }
+
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.title
+      }, /*#__PURE__*/_react.default.createElement("button", {
+        className: styles.menuButton,
+        onClick: sidebarMenuClick,
+        tabIndex: "0",
+        "data-automation": "sdk-hamburger-button"
+      }, _ref, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Open Menu'))));
+    }
+  }]);
+  HeaderMenuButton.displayName = "HeaderMenuButton";
+  return HeaderMenuButton;
+}(_react.Component), _class2.propTypes = {
+  sidebarMenuClick: _propTypes.default.func.isRequired,
+  hidden: _propTypes.default.bool.isRequired
+}, _temp)) || _class);
+exports.HeaderMenuButton = HeaderMenuButton;
+var _default = HeaderMenuButton;
+exports.default = _default;

package/lib/common/components/layout/header/HeaderMenuButton/theme.js

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var breakpoints = _ref.breakpoints,
+      colors = _ref.colors,
+      typography = _ref.typography;
+  return {
+    phoneBreakPoint: "max-width: ".concat(breakpoints.medium),
+    menuButtonFontSize: typography.fontSizeLarge,
+    menuButtonColor: colors.licorice,
+    menuButtonHoverOpacity: '0.6'
+  };
+}

package/lib/common/components/layout/header/Timer/index.js

@@ -0,0 +1,48 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var _redux = require("redux");
+
+var _immutable = require("immutable");
+
+var _reactRedux = require("../../../../react-redux.js");
+
+var _taking = require("../../../../selectors/taking.js");
+
+var _quizSessions = require("../../../../selectors/quizSessions.js");
+
+var _presenter = _interopRequireDefault(require("./presenter.js"));
+
+var _alerts = require("../../../../actions/alerts.js");
+
+var _taking2 = require("../../../../actions/taking.js");
+
+var mapDispatchToProps = function mapDispatchToProps(dispatch) {
+  return {
+    screenreaderNotification: (0, _redux.bindActionCreators)(_alerts.screenreaderNotification, dispatch),
+    updateTimerMinimized: (0, _redux.bindActionCreators)(_taking2.updateTimerMinimized, dispatch)
+  };
+};
+
+var mapStateToProps = function mapStateToProps(state) {
+  var timerData = (0, _taking.getTimerData)(state).toJS();
+  var isTaking = (0, _taking.getIsTaking)(state);
+  var activeQuizSession = (0, _quizSessions.getActiveQuizSession)(state);
+  var takingData = activeQuizSession.takingData || (0, _immutable.Map)();
+  return {
+    showTimer: takingData.get('timeAllowed') > 0,
+    timerRunning: isTaking && timerData.timerRunning,
+    timeLeftInSeconds: timerData.timeLeftInSeconds,
+    timerMinimized: timerData.timerMinimized
+  };
+};
+
+var _default = (0, _reactRedux.connect)(mapStateToProps, mapDispatchToProps)(_presenter.default);
+
+exports.default = _default;

package/lib/common/components/layout/header/Timer/presenter.js

@@ -0,0 +1,201 @@
+"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.Timer = 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 _partial = _interopRequireDefault(require("lodash/partial"));
+
+var _uiA11yContent = require("@instructure/ui-a11y-content");
+
+var _uiIcons = require("@instructure/ui-icons");
+
+var _uiButtons = require("@instructure/ui-buttons");
+
+var _uiView = require("@instructure/ui-view");
+
+var _uiThemeable = require("@instructure/ui-themeable");
+
+var _index = _interopRequireDefault(require("../../../shared/FormattedDuration/index.js"));
+
+var _formatTimespan = require("../../../../util/formatTimespan.js");
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'fBhoO',
+  template: function template(theme) {
+    return "\n\n.fBhoO_dAhe{flex-direction:row;font-size:".concat(theme.timerFontSize || 'inherit', ";justify-content:center;line-height:1rem}\n\n.fBhoO_dAhe,.fBhoO_Swlx{align-items:center;display:flex}\n\n.fBhoO_Swlx{flex-direction:column-reverse}\n\n.fBhoO_dkDW{padding:").concat(theme.timerRightPadding || 'inherit', "}\n\n.fBhoO_bYJj{font-size:").concat(theme.timeRemainingLabelFontSize || 'inherit', ";text-align:center;width:100%}\n\n[dir=ltr] .fBhoO_bYJj,[dir=rtl] .fBhoO_bYJj{text-align:center}");
+  },
+  'timer': 'fBhoO_dAhe',
+  'timerLeft': 'fBhoO_Swlx',
+  'timerRight': 'fBhoO_dkDW',
+  'timeRemainingLabel': 'fBhoO_bYJj'
+};
+var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(Timer, _Component);
+
+  var _super = (0, _createSuper2.default)(Timer);
+
+  function Timer() {
+    var _this;
+
+    (0, _classCallCheck2.default)(this, Timer);
+
+    for (var _len = arguments.length, args = new Array(_len), _key = 0; _key < _len; _key++) {
+      args[_key] = arguments[_key];
+    }
+
+    _this = _super.call.apply(_super, [this].concat(args));
+
+    _this.handleKeyDown = function (event) {
+      // Check for Alt+Shift+T and nothing else
+      if (event.keyCode === 84 && event.altKey && event.shiftKey && !event.ctrlKey) {
+        var message;
+        event.preventDefault();
+
+        if (_this.props.timeLeftInSeconds >= 1) {
+          var timeString = (0, _formatTimespan.formatTime)(_this.props.timeLeftInSeconds);
+          message = (0, _formatMessage.default)('The remaining time is: {timeleft}', {
+            timeleft: timeString
+          });
+        } else {
+          message = (0, _formatMessage.default)('There is no remaining time left');
+        }
+
+        _this.props.screenreaderNotification(message);
+      }
+    };
+
+    _this.showTimerRef = function (node) {
+      _this.showTimerBtn = node;
+    };
+
+    _this.hideTimerRef = function (node) {
+      _this.hideTimerBtn = node;
+    };
+
+    _this.focusOnShow = function () {
+      _this.showTimerBtn && _this.showTimerBtn.focus();
+    };
+
+    _this.focusOnHide = function () {
+      _this.hideTimerBtn && _this.hideTimerBtn.focus();
+    };
+
+    return _this;
+  }
+
+  (0, _createClass2.default)(Timer, [{
+    key: "componentDidUpdate",
+    value: function componentDidUpdate(prevProps, prevState) {
+      var _this$props = this.props,
+          timerMinimized = _this$props.timerMinimized,
+          screenreaderNotification = _this$props.screenreaderNotification,
+          timerRunning = _this$props.timerRunning;
+
+      if (timerMinimized !== prevProps.timerMinimized) {
+        var message = timerMinimized ? (0, _formatMessage.default)('timer minimized') : (0, _formatMessage.default)('timer showing');
+        screenreaderNotification(message);
+        var focusFn = timerMinimized ? this.focusOnShow : this.focusOnHide;
+        focusFn();
+      }
+
+      if (timerRunning && !prevProps.timerRunning) {
+        document.body.addEventListener('keydown', this.handleKeyDown);
+      } else if (!timerRunning && prevProps.timerRunning) {
+        document.body.removeEventListener('keydown', this.handleKeyDown);
+      }
+    }
+  }, {
+    key: "componentWillUnmount",
+    value: function componentWillUnmount() {
+      document.body.removeEventListener('keydown', this.handleKeyDown);
+    }
+  }, {
+    key: "renderHelpScreenreaderText",
+    value: function renderHelpScreenreaderText() {
+      return /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('During the quiz, press Alt+Shift+T to have the remaining time read'));
+    }
+  }, {
+    key: "renderMinimizedTimer",
+    value: function renderMinimizedTimer() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.timer
+      }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        ref: this.showTimerRef,
+        icon: _uiIcons.IconClockLine,
+        onClick: (0, _partial.default)(this.props.updateTimerMinimized, false)
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Toggle Timer Visibility'))));
+    }
+  }, {
+    key: "renderMaximizedTimer",
+    value: function renderMaximizedTimer() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.timer
+      }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+        as: "div"
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.timerLeft
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.timeRemainingLabel
+      }, (0, _formatMessage.default)('Time Remaining')), /*#__PURE__*/_react.default.createElement(_index.default, {
+        seconds: this.props.timeLeftInSeconds
+      }))), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.timerRight
+      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+        ref: this.hideTimerRef,
+        icon: _uiIcons.IconArrowOpenStartLine,
+        onClick: (0, _partial.default)(this.props.updateTimerMinimized, true)
+      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Toggle Timer Visibility')))));
+    }
+  }, {
+    key: "render",
+    value: function render() {
+      if (!this.props.timerRunning || !this.props.showTimer) {
+        return null;
+      } else if (this.props.timerMinimized) {
+        return this.renderMinimizedTimer();
+      } else {
+        return this.renderMaximizedTimer();
+      }
+    }
+  }]);
+  Timer.displayName = "Timer";
+  return Timer;
+}(_react.Component), _class2.propTypes = {
+  screenreaderNotification: _propTypes.default.func.isRequired,
+  showTimer: _propTypes.default.bool.isRequired,
+  timeLeftInSeconds: _propTypes.default.number,
+  timerMinimized: _propTypes.default.bool,
+  timerRunning: _propTypes.default.bool,
+  updateTimerMinimized: _propTypes.default.func.isRequired
+}, _class2.defaultProps = {
+  timerRunning: false,
+  timeLeftInSeconds: 0,
+  timerMinimized: false
+}, _temp)) || _class);
+exports.Timer = Timer;
+var _default = Timer;
+exports.default = _default;

package/lib/common/components/layout/header/Timer/theme.js

@@ -0,0 +1,25 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var spacing = _ref.spacing,
+      borders = _ref.borders,
+      colors = _ref.colors,
+      typography = _ref.typography;
+  return {
+    timerBackgroundColor: colors.porcelain,
+    timerColor: colors.ash,
+    timerBorderWidth: borders.widthSmall,
+    timerBorderColor: colors.tiara,
+    timerBorderRadius: borders.radiusMedium,
+    timerFontSize: typography.fontSizeMedium,
+    timerPadding: spacing.xxSmall,
+    timerMargin: spacing.small,
+    timerRightPadding: spacing.xxSmall,
+    timeRemainingLabelFontSize: typography.fontSizeXSmall
+  };
+}

package/lib/common/components/layout/sidebar/PositionSummary/index.js

@@ -0,0 +1,81 @@
+"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.PositionSummary = 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 _theme = _interopRequireDefault(require("./theme.js"));
+
+var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
+
+var _dec, _class, _class2, _temp;
+
+var styles = {
+  componentId: 'CixOW',
+  template: function template(theme) {
+    return "\n\n.CixOW_bZNM{display:flex;flex-flow:column}\n\n.CixOW_dlMM{padding-bottom:".concat(theme.firstNumberSummaryPadding || 'inherit', "}\n\n.CixOW_dWEq{padding-top:").concat(theme.secondNumberSummaryPadding || 'inherit', "}\n\n.CixOW_fJqn{color:").concat(theme.numberSummaryColor || 'inherit', ";font-size:").concat(theme.numberSummaryFontSize || 'inherit', ";font-weight:").concat(theme.numberSummaryFontWeight || 'inherit', ";margin:auto}\n\n.CixOW_EKnN{border-color:").concat(theme.verticalDotsBorderColor || 'inherit', ";border-left:dotted ").concat(theme.verticalDotsBorderWidth || 'inherit', ";height:1.5rem;margin:auto}");
+  },
+  'column': 'CixOW_bZNM',
+  'firstNumberSummary': 'CixOW_dlMM',
+  'secondNumberSummary': 'CixOW_dWEq',
+  'numberSummary': 'CixOW_fJqn',
+  'verticalDots': 'CixOW_EKnN'
+};
+var PositionSummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+  (0, _inherits2.default)(PositionSummary, _Component);
+
+  var _super = (0, _createSuper2.default)(PositionSummary);
+
+  function PositionSummary() {
+    (0, _classCallCheck2.default)(this, PositionSummary);
+    return _super.apply(this, arguments);
+  }
+
+  (0, _createClass2.default)(PositionSummary, [{
+    key: "render",
+    value: function render() {
+      return /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.column
+      }, /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)([styles.numberSummary, styles.firstNumberSummary])
+      }, (0, _formatMessage.default)('{first, number}', {
+        first: this.props.firstPosition
+      })), /*#__PURE__*/_react.default.createElement("div", {
+        className: styles.verticalDots
+      }), /*#__PURE__*/_react.default.createElement("div", {
+        className: (0, _classnames.default)([styles.numberSummary, styles.secondNumberSummary])
+      }, (0, _formatMessage.default)('{last, number}', {
+        last: this.props.lastPosition
+      })));
+    }
+  }]);
+  PositionSummary.displayName = "PositionSummary";
+  return PositionSummary;
+}(_react.Component), _class2.propTypes = {
+  firstPosition: _propTypes.default.number.isRequired,
+  lastPosition: _propTypes.default.number.isRequired
+}, _temp)) || _class);
+exports.PositionSummary = PositionSummary;
+var _default = PositionSummary;
+exports.default = _default;

package/lib/common/components/layout/sidebar/PositionSummary/theme.js

@@ -0,0 +1,22 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = generator;
+
+function generator(_ref) {
+  var colors = _ref.colors,
+      spacing = _ref.spacing,
+      borders = _ref.borders,
+      typography = _ref.typography;
+  return {
+    numberSummaryColor: colors.licorice,
+    numberSummaryFontSize: typography.fontSizeMedium,
+    numberSummaryFontWeight: typography.fontWeightBold,
+    firstNumberSummaryPadding: spacing.xxSmall,
+    secondNumberSummaryPadding: spacing.xxSmall,
+    verticalDotsBorderWidth: borders.widthSmall,
+    verticalDotsBorderColor: colors.licorice
+  };
+}