@instructure/quiz-core 20.11.3-rc.3 → 20.11.3-rc.5

package/es/common/components/layout/navbar/presenter.js

@@ -3,18 +3,25 @@ import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
 import _createSuper from "@babel/runtime/helpers/esm/createSuper";
-import React, { Component } from 'react';
+
+var _dec, _class, _class2, _temp;
+
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import { TopNavBar } from '@instructure/ui-top-nav-bar';
 import { IconQuizLine } from '@instructure/ui-icons';
 import t from '@instructure/quiz-i18n/es/format-message';
+import { withStyle, jsx } from '@instructure/emotion';
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 
-var _ref = /*#__PURE__*/React.createElement(IconQuizLine, {
+var _ref = jsx(IconQuizLine, {
   color: "primary",
   size: "small"
 });
 
-export var NavBar = /*#__PURE__*/function (_Component) {
+export var NavBar = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(NavBar, _Component);
 
   var _super = _createSuper(NavBar);
@@ -50,15 +57,15 @@ export var NavBar = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/React.createElement(TopNavBar, {
-        breakpoint: "48em",
+      return jsx(TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
         mediaQueryMatch: "element",
         inverseColor: true
       }, function () {
-        return /*#__PURE__*/React.createElement(TopNavBar.Layout, {
+        return jsx(TopNavBar.Layout, {
           themeOverride: {
-            desktopBackgroundInverse: '#f5f5f5',
-            smallViewportBackgroundInverse: '#f5f5f5'
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
           },
           navLabel: t('Quizzes navigation bar'),
           desktopConfig: {
@@ -68,16 +75,16 @@ export var NavBar = /*#__PURE__*/function (_Component) {
             dropdownMenuToggleButtonLabel: t('Toggle Menu'),
             dropdownMenuLabel: t('Main Menu')
           },
-          renderBrand: /*#__PURE__*/React.createElement(TopNavBar.Brand, {
+          renderBrand: jsx(TopNavBar.Brand, {
             screenReaderLabel: t('Quizzes'),
             renderIcon: _ref
           }),
-          renderMenuItems: /*#__PURE__*/React.createElement(TopNavBar.MenuItems, {
+          renderMenuItems: jsx(TopNavBar.MenuItems, {
             listLabel: t('Page navigation'),
             currentPageId: window.location.pathname,
             renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
           }, _this2.props.menuItems.map(function (menuItem) {
-            return /*#__PURE__*/React.createElement(TopNavBar.Item, {
+            return jsx(TopNavBar.Item, {
               id: menuItem.path,
               key: menuItem.path,
               onClick: function onClick() {
@@ -86,7 +93,7 @@ export var NavBar = /*#__PURE__*/function (_Component) {
 
             }, menuItem.text);
           })),
-          renderActionItems: /*#__PURE__*/React.createElement(TopNavBar.ActionItems, {
+          renderActionItems: jsx(TopNavBar.ActionItems, {
             listLabel: t('Actions'),
             renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
           }, _toConsumableArray(_this2.props.actionItems))
@@ -97,18 +104,17 @@ export var NavBar = /*#__PURE__*/function (_Component) {
 
   NavBar.displayName = "NavBar";
   return NavBar;
-}(Component);
-NavBar.propTypes = {
+}(Component), _class2.propTypes = {
   menuItems: PropTypes.arrayOf(PropTypes.shape({
     path: PropTypes.string.isRequired,
     text: PropTypes.string.isRequired
   })),
   handleMenuItemChange: PropTypes.func,
-  actionItems: PropTypes.arrayOf(PropTypes.node)
-};
-NavBar.defaultProps = {
+  actionItems: PropTypes.arrayOf(PropTypes.node),
+  styles: PropTypes.object
+}, _class2.defaultProps = {
   menuItems: [],
   handleMenuItemChange: function handleMenuItemChange() {},
   actionItems: []
-};
+}, _temp)) || _class);
 export default NavBar;

package/es/common/components/layout/navbar/styles.js

@@ -0,0 +1,8 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    backgroundColor: componentTheme.backgroundColor,
+    phoneBreakPoint: componentTheme.phoneBreakPoint
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/navbar/theme.js

@@ -0,0 +1,10 @@
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var breakpoints = _ref.breakpoints,
+      colors = _ref.colors;
+  return {
+    backgroundColor: colors.porcelain,
+    phoneBreakPoint: breakpoints.medium
+  };
+};
+
+export default generateComponentTheme;

package/lib/common/components/layout/navbar/presenter.js

@@ -1,7 +1,5 @@
 "use strict";
 
-var _interopRequireWildcard = require("@babel/runtime/helpers/interopRequireWildcard");
-
 var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault");
 
 Object.defineProperty(exports, "__esModule", {
@@ -19,7 +17,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"));
 
@@ -29,12 +27,20 @@ var _uiIcons = require("@instructure/ui-icons");
 
 var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/format-message"));
 
-var _ref = /*#__PURE__*/_react.default.createElement(_uiIcons.IconQuizLine, {
+var _emotion = require("@instructure/emotion");
+
+var _styles = _interopRequireDefault(require("./styles.js"));
+
+var _theme = _interopRequireDefault(require("./theme.js"));
+
+var _dec, _class, _class2, _temp;
+
+var _ref = (0, _emotion.jsx)(_uiIcons.IconQuizLine, {
   color: "primary",
   size: "small"
 });
 
-var NavBar = /*#__PURE__*/function (_Component) {
+var NavBar = (_dec = (0, _emotion.withStyle)(_styles.default, _theme.default), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   (0, _inherits2.default)(NavBar, _Component);
 
   var _super = (0, _createSuper2.default)(NavBar);
@@ -70,15 +76,15 @@ var NavBar = /*#__PURE__*/function (_Component) {
     value: function render() {
       var _this2 = this;
 
-      return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar, {
-        breakpoint: "48em",
+      return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar, {
+        breakpoint: this.props.styles.phoneBreakPoint,
         mediaQueryMatch: "element",
         inverseColor: true
       }, function () {
-        return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Layout, {
+        return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Layout, {
           themeOverride: {
-            desktopBackgroundInverse: '#f5f5f5',
-            smallViewportBackgroundInverse: '#f5f5f5'
+            desktopBackgroundInverse: _this2.props.styles.backgroundColor,
+            smallViewportBackgroundInverse: _this2.props.styles.backgroundColor
           },
           navLabel: (0, _formatMessage.default)('Quizzes navigation bar'),
           desktopConfig: {
@@ -88,16 +94,16 @@ var NavBar = /*#__PURE__*/function (_Component) {
             dropdownMenuToggleButtonLabel: (0, _formatMessage.default)('Toggle Menu'),
             dropdownMenuLabel: (0, _formatMessage.default)('Main Menu')
           },
-          renderBrand: /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Brand, {
+          renderBrand: (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Brand, {
             screenReaderLabel: (0, _formatMessage.default)('Quizzes'),
             renderIcon: _ref
           }),
-          renderMenuItems: /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.MenuItems, {
+          renderMenuItems: (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.MenuItems, {
             listLabel: (0, _formatMessage.default)('Page navigation'),
             currentPageId: window.location.pathname,
             renderHiddenItemsMenuTriggerLabel: _this2.hiddenMenuItemsMenuTriggerLabel
           }, _this2.props.menuItems.map(function (menuItem) {
-            return /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.Item, {
+            return (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.Item, {
               id: menuItem.path,
               key: menuItem.path,
               onClick: function onClick() {
@@ -106,7 +112,7 @@ var NavBar = /*#__PURE__*/function (_Component) {
 
             }, menuItem.text);
           })),
-          renderActionItems: /*#__PURE__*/_react.default.createElement(_uiTopNavBar.TopNavBar.ActionItems, {
+          renderActionItems: (0, _emotion.jsx)(_uiTopNavBar.TopNavBar.ActionItems, {
             listLabel: (0, _formatMessage.default)('Actions'),
             renderHiddenItemsMenuTriggerLabel: _this2.hiddenActionItemsMenuTriggerLabel
           }, (0, _toConsumableArray2.default)(_this2.props.actionItems))
@@ -116,21 +122,19 @@ var NavBar = /*#__PURE__*/function (_Component) {
   }]);
   NavBar.displayName = "NavBar";
   return NavBar;
-}(_react.Component);
-
-exports.NavBar = NavBar;
-NavBar.propTypes = {
+}(_react.Component), _class2.propTypes = {
   menuItems: _propTypes.default.arrayOf(_propTypes.default.shape({
     path: _propTypes.default.string.isRequired,
     text: _propTypes.default.string.isRequired
   })),
   handleMenuItemChange: _propTypes.default.func,
-  actionItems: _propTypes.default.arrayOf(_propTypes.default.node)
-};
-NavBar.defaultProps = {
+  actionItems: _propTypes.default.arrayOf(_propTypes.default.node),
+  styles: _propTypes.default.object
+}, _class2.defaultProps = {
   menuItems: [],
   handleMenuItemChange: function handleMenuItemChange() {},
   actionItems: []
-};
+}, _temp)) || _class);
+exports.NavBar = NavBar;
 var _default = NavBar;
 exports.default = _default;

package/lib/common/components/layout/navbar/styles.js

@@ -0,0 +1,16 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    backgroundColor: componentTheme.backgroundColor,
+    phoneBreakPoint: componentTheme.phoneBreakPoint
+  };
+};
+
+var _default = generateStyle;
+exports.default = _default;

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

@@ -0,0 +1,18 @@
+"use strict";
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = void 0;
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
+  var breakpoints = _ref.breakpoints,
+      colors = _ref.colors;
+  return {
+    backgroundColor: colors.porcelain,
+    phoneBreakPoint: breakpoints.medium
+  };
+};
+
+var _default = generateComponentTheme;
+exports.default = _default;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@instructure/quiz-core",
-  "version": "20.11.3-rc.3+6bfd94d50",
+  "version": "20.11.3-rc.5+4a959564f",
   "license": "MIT",
   "description": "The Quiz React SDK by Instructure Inc.",
   "author": "Instructure, Inc. Engineering and Product Design",
@@ -44,11 +44,11 @@
     "@instructure/emotion": "^8.51.0",
     "@instructure/grading-utils": "^1.0.0",
     "@instructure/outcomes-ui": "^3.2.0",
-    "@instructure/quiz-common": "20.11.3-rc.3+6bfd94d50",
-    "@instructure/quiz-i18n": "20.11.3-rc.3+6bfd94d50",
-    "@instructure/quiz-interactions": "20.11.3-rc.3+6bfd94d50",
-    "@instructure/quiz-number-input": "20.11.3-rc.3+6bfd94d50",
-    "@instructure/quiz-rce": "20.11.3-rc.3+6bfd94d50",
+    "@instructure/quiz-common": "20.11.3-rc.5+4a959564f",
+    "@instructure/quiz-i18n": "20.11.3-rc.5+4a959564f",
+    "@instructure/quiz-interactions": "20.11.3-rc.5+4a959564f",
+    "@instructure/quiz-number-input": "20.11.3-rc.5+4a959564f",
+    "@instructure/quiz-rce": "20.11.3-rc.5+4a959564f",
     "@instructure/ui-a11y-content": "^8.51.0",
     "@instructure/ui-alerts": "^8.51.0",
     "@instructure/ui-avatar": "^8.51.0",
@@ -112,7 +112,7 @@
     "file-saver": "~2.0.5",
     "humps": "^2.0.0",
     "immutable": "^3.8.1",
-    "instructure-validations": "20.11.3-rc.3+6bfd94d50",
+    "instructure-validations": "20.11.3-rc.5+4a959564f",
     "ipaddr.js": "^1.5.4",
     "isomorphic-fetch": "^2.2.0",
     "isuuid": "^0.1.0",
@@ -163,7 +163,7 @@
     "intl": "^1.2.4",
     "jquery": "^2.2.3",
     "most-subject": "^5.3.0",
-    "quiz-presets": "20.11.3-rc.3+6bfd94d50",
+    "quiz-presets": "20.11.3-rc.5+4a959564f",
     "react": "^16.8.6",
     "react-addons-test-utils": "^15.6.2",
     "react-dom": "^16.8.6",
@@ -179,5 +179,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "6bfd94d50c5e237356b51b33f10f686b0682644b"
+  "gitHead": "4a959564fc538c3cc7059e99002ddda868c0bc81"
 }