@instructure/quiz-core 20.9.0 → 20.9.1-rc.1

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

@@ -2,8 +2,6 @@
 
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
@@ -17,7 +15,7 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
@@ -33,34 +31,25 @@ var _uiTopNavBar = require("@instructure/ui-top-nav-bar");
 
 var _uiView = require("@instructure/ui-view");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _emotion = require("@instructure/emotion");
 
 var _index = _interopRequireDefault(require("../../../shared/FormattedDuration/index.js"));
 
 var _formatTimespan = require("../../../../util/formatTimespan.js");
 
+var _styles = _interopRequireDefault(require("./styles.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 _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconClockLine, null);
+var _ref = (0, _emotion.jsx)(_uiIcons.IconClockLine, null);
 
-var _ref2 = /*#__PURE__*/_react.default.createElement(_uiIcons.IconClockSolid, null);
+var _ref2 = (0, _emotion.jsx)(_uiIcons.IconClockSolid, null);
 
-var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+var Timer = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(Timer, _Component);
 
   var _super = (0, _createSuper2.default)(Timer);
@@ -146,13 +135,13 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   }, {
     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'));
+      return (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('During the quiz, press Alt+Shift+T to have the remaining time read'));
     }
   }, {
     key: "renderMinimizedTimer",
     value: function renderMinimizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
           id: "TimerButton",
           onClick: (0, _partial.default)(this.props.updateTimerMinimized, false),
           variant: "icon",
@@ -163,20 +152,20 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
         }, (0, _formatMessage.default)('Show Timer'));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), (0, _emotion.jsx)(_uiButtons.Button, {
         "aria-expanded": "false",
         ref: this.showTimerRef,
         renderIcon: _uiIcons.IconClockLine,
         onClick: (0, _partial.default)(this.props.updateTimerMinimized, false)
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Show Timer'))));
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Show Timer'))));
     }
   }, {
     key: "renderMaximizedTimer",
     value: function renderMaximizedTimer() {
       if (this.props.iceTopNavBarEnabled) {
-        return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
           id: "TimerButton",
           onClick: (0, _partial.default)(this.props.updateTimerMinimized, true),
           variant: "forceIconWithLabel",
@@ -184,29 +173,29 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
           tooltip: (0, _formatMessage.default)('Hide Timer'),
           "aria-expanded": "true",
           itemRef: this.hideTimerRef
-        }, /*#__PURE__*/_react.default.createElement(_index.default, {
+        }, (0, _emotion.jsx)(_index.default, {
           seconds: this.props.timeLeftInSeconds
         }));
       }
 
-      return /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timer
-      }, this.renderHelpScreenreaderText(), /*#__PURE__*/_react.default.createElement(_uiView.View, {
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.timer
+      }, this.renderHelpScreenreaderText(), (0, _emotion.jsx)(_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, {
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.timerLeft
+      }, (0, _emotion.jsx)("div", {
+        css: this.props.styles.timeRemainingLabel
+      }, (0, _formatMessage.default)('Time Remaining')), (0, _emotion.jsx)(_index.default, {
         seconds: this.props.timeLeftInSeconds
-      }))), /*#__PURE__*/_react.default.createElement("div", {
-        className: styles.timerRight
-      }, /*#__PURE__*/_react.default.createElement(_uiButtons.Button, {
+      }))), (0, _emotion.jsx)("div", {
+        css: this.props.styles.timerRight
+      }, (0, _emotion.jsx)(_uiButtons.Button, {
         "aria-expanded": "true",
         ref: this.hideTimerRef,
         renderIcon: _uiIcons.IconArrowOpenStartLine,
         onClick: (0, _partial.default)(this.props.updateTimerMinimized, true)
-      }, /*#__PURE__*/_react.default.createElement(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Hide Timer')))));
+      }, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, (0, _formatMessage.default)('Hide Timer')))));
     }
   }, {
     key: "render",
@@ -230,7 +219,8 @@ var Timer = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles), _dec(_c
   timerRunning: _propTypes.default.bool,
   updateTimerMinimized: _propTypes.default.func.isRequired,
   iceTopNavBarEnabled: _propTypes.default.bool,
-  setTimerEnabled: _propTypes.default.func
+  setTimerEnabled: _propTypes.default.func,
+  styles: _propTypes.default.object
 }, _class2.defaultProps = {
   timerRunning: false,
   timeLeftInSeconds: 0,

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

@@ -0,0 +1,35 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    timer: {
+      lineHeight: '1rem',
+      fontSize: componentTheme.timerFontSize,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      justifyContent: 'center'
+    },
+    timerLeft: {
+      display: 'flex',
+      flexDirection: 'column-reverse',
+      alignItems: 'center'
+    },
+    timerRight: {
+      padding: componentTheme.timerRightPadding
+    },
+    timeRemainingLabel: {
+      fontSize: componentTheme.timeRemainingLabelFontSize,
+      width: '100%',
+      textAlign: 'center'
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var spacing = _ref.spacing,
       borders = _ref.borders,
       colors = _ref.colors,
@@ -22,4 +22,7 @@ function generator(_ref) {
     timerRightPadding: spacing.xxSmall,
     timeRemainingLabelFontSize: typography.fontSizeXSmall
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

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

@@ -2,13 +2,13 @@
 
 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 _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/objectSpread2"));
+
 var _classCallCheck2 = _interopRequireDefault(require("@babel/runtime/helpers/classCallCheck"));
 
 var _createClass2 = _interopRequireDefault(require("@babel/runtime/helpers/createClass"));
@@ -17,13 +17,13 @@ var _inherits2 = _interopRequireDefault(require("@babel/runtime/helpers/inherits
 
 var _createSuper2 = _interopRequireDefault(require("@babel/runtime/helpers/createSuper"));
 
-var _react = _interopRequireWildcard(require("react"));
+var _react = require("react");
 
 var _propTypes = _interopRequireDefault(require("prop-types"));
 
-var _classnames = _interopRequireDefault(require("classnames"));
+var _emotion = require("@instructure/emotion");
 
-var _uiThemeable = require("@instructure/ui-themeable");
+var _styles = _interopRequireDefault(require("./styles.js"));
 
 var _theme = _interopRequireDefault(require("./theme.js"));
 
@@ -31,18 +31,7 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
 
 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) {
+var PositionSummary = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(PositionSummary, _Component);
 
   var _super = (0, _createSuper2.default)(PositionSummary);
@@ -55,16 +44,16 @@ var PositionSummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   (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])
+      return (0, _emotion.jsx)("div", {
+        css: this.props.styles.column
+      }, (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.numberSummary), this.props.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, _emotion.jsx)("div", {
+        css: this.props.styles.verticalDots
+      }), (0, _emotion.jsx)("div", {
+        css: (0, _objectSpread2.default)((0, _objectSpread2.default)({}, this.props.styles.numberSummary), this.props.styles.secondNumberSummary)
       }, (0, _formatMessage.default)('{last, number}', {
         last: this.props.lastPosition
       })));
@@ -74,7 +63,8 @@ var PositionSummary = (_dec = (0, _uiThemeable.themeable)(_theme.default, styles
   return PositionSummary;
 }(_react.Component), _class2.propTypes = {
   firstPosition: _propTypes.default.number.isRequired,
-  lastPosition: _propTypes.default.number.isRequired
+  lastPosition: _propTypes.default.number.isRequired,
+  styles: _propTypes.default.object
 }, _temp)) || _class);
 exports.PositionSummary = PositionSummary;
 var _default = PositionSummary;

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

@@ -0,0 +1,36 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    column: {
+      display: 'flex',
+      flexFlow: 'column'
+    },
+    firstNumberSummary: {
+      paddingBottom: "".concat(componentTheme.firstNumberSummaryPadding)
+    },
+    secondNumberSummary: {
+      paddingTop: "".concat(componentTheme.secondNumberSummaryPadding)
+    },
+    numberSummary: {
+      color: componentTheme.numberSummaryColor,
+      fontSize: componentTheme.numberSummaryFontSize,
+      fontWeight: componentTheme.numberSummaryFontWeight,
+      margin: 'auto'
+    },
+    verticalDots: {
+      margin: 'auto',
+      height: '1.5rem',
+      borderLeft: "dotted ".concat(componentTheme.verticalDotsBorderWidth),
+      borderColor: componentTheme.verticalDotsBorderColor
+    }
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -3,9 +3,9 @@
 Object.defineProperty(exports, "__esModule", {
   value: true
 });
-exports.default = generator;
+exports.default = void 0;
 
-function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders,
@@ -19,4 +19,7 @@ function generator(_ref) {
     verticalDotsBorderWidth: borders.widthSmall,
     verticalDotsBorderColor: colors.licorice
   };
-}
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;