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

package/es/common/components/layout/sidebar/Sidebar/styles.js

@@ -0,0 +1,117 @@
+import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  var _commonContainer;
+
+  var mq = "@media screen and (".concat(componentTheme.phoneBreakPoint, ")");
+  var mp = '@media print';
+  return {
+    sidebar: _objectSpread(_objectSpread(_defineProperty({
+      boxSizing: 'border-box',
+      width: componentTheme.sidebarWidthClosed,
+      backgroundColor: componentTheme.sidebarBackgroundColor,
+      border: "".concat(componentTheme.sidebarBorderWidth, " solid ").concat(componentTheme.sidebarBorderColor),
+      color: componentTheme.sidebarColor,
+      height: '100%',
+      overflow: 'hidden',
+      position: 'relative',
+      zIndex: componentTheme.sidebarZIndex,
+      transition: "".concat(componentTheme.sidebarTransitionDuration, " ease")
+    }, mq, {
+      position: 'absolute',
+      width: 0
+    }), props.sidebarOpen && _defineProperty({
+      width: componentTheme.sidebarWidthOpen,
+      opacity: 1
+    }, mq, {
+      width: '100vw',
+      maxWidth: '100vw'
+    })), {}, {
+      description: _objectSpread({
+        color: componentTheme.descriptionFontColor,
+        display: 'none',
+        fontSize: componentTheme.descriptionFontSize
+      }, props.sidebarOpen && {
+        cursor: 'pointer',
+        display: 'inline-block'
+      }),
+      actionableInfo: _objectSpread({
+        borderBottom: "".concat(componentTheme.sidebarHeaderBorderWidth, " solid ").concat(componentTheme.sidebarHeaderBorderColor),
+        borderRight: "".concat(componentTheme.actionableInfoBorderWidth, " solid ").concat(componentTheme.sidebarBackgroundColor),
+        textAlign: 'center',
+        ':hover': {
+          borderRight: "".concat(componentTheme.actionableInfoBorderWidth, " solid ").concat(componentTheme.actionableInfoHoverBorderColor)
+        }
+      }, props.sidebarOpen && {
+        textAlign: 'inherit'
+      })
+    }),
+
+    /* Decrease z-index when RCE editor is in fullscreen mode */
+    globalStyles: {
+      sidebar: {
+        zIndex: 0
+      }
+    },
+    sidebarWrapper: {
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    },
+    sidebarContent: {
+      overflowY: 'auto',
+      overflowX: 'hidden'
+    },
+    headerSpacing: {
+      display: 'flex',
+      flexDirection: 'row',
+      padding: componentTheme.headerSpacingPadding,
+      flexShrink: 0,
+      h2: {
+        paddingTop: '0.3em'
+      }
+    },
+    headerBottomBorder: {
+      borderBottom: "solid ".concat(componentTheme.sidebarHeaderBorderWidth),
+      borderColor: componentTheme.sidebarHeaderBorderColor
+    },
+    iconWrapper: _objectSpread({
+      marginLeft: 'auto'
+    }, !props.sidebarOpen && {
+      display: 'block',
+      margin: 'auto'
+    }),
+    pinnedSection: {
+      width: '100%',
+      backgroundColor: componentTheme.pinnedSectionBackgroundColor,
+      headerSpacing: {
+        flexGrow: 1
+      }
+    },
+    questionNavigatorPadding: _objectSpread({
+      paddingTop: componentTheme.questionNavigatorPadding
+    }, !props.sidebarOpen && {
+      display: 'none'
+    }),
+    buttonWrapper: _objectSpread({
+      button: {
+        paddingLeft: componentTheme.pinnedQuestionSpacing,
+        paddingBottom: componentTheme.pinnedQuestionSpacing,
+        fontSize: componentTheme.pinnedQuestionFontSize,
+        display: 'block'
+      }
+    }, !props.sidebarOpen && {
+      display: 'none'
+    }),
+    commonContainer: (_commonContainer = {
+      height: '100%'
+    }, _defineProperty(_commonContainer, mq, {
+      position: 'relative'
+    }), _defineProperty(_commonContainer, mp, {
+      display: 'none'
+    }), _commonContainer)
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/sidebar/Sidebar/theme.js

@@ -1,5 +1,6 @@
 import { alpha } from '@instructure/ui-color-utils';
-export default function generator(_ref) {
+
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       typography = _ref.typography,
@@ -34,11 +35,6 @@ export default function generator(_ref) {
     focusBorderColor: colors.brand,
     focusOutlineColor: alpha(colors.brand, 50)
   };
-}
+};
 
-generator.canvas = function (variables) {
-  return {
-    focusBorderColor: variables['ic-brand-primary'],
-    focusOutlineColor: alpha(variables['ic-brand-primary'], 50)
-  };
-};
+export default generateComponentTheme;

package/es/common/components/layout/sidebar/SidebarItem/presenter.js

@@ -1,4 +1,3 @@
-import _defineProperty from "@babel/runtime/helpers/esm/defineProperty";
 import _classCallCheck from "@babel/runtime/helpers/esm/classCallCheck";
 import _createClass from "@babel/runtime/helpers/esm/createClass";
 import _inherits from "@babel/runtime/helpers/esm/inherits";
@@ -6,36 +5,20 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
-import classNames from 'classnames';
 import { AccessibleContent } from '@instructure/ui-a11y-content';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import PositionSummary from "../PositionSummary/index.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 import { RichContentRenderer } from '@instructure/quiz-rce';
-var styles = {
-  componentId: 'cwwgG',
-  template: function template(theme) {
-    return "\n\n.cwwgG_kQJA{border-bottom:".concat(theme.bottomBorderWidth || 'inherit', " solid ").concat(theme.bottomBorderColor || 'inherit', ";border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', "}\n\n.cwwgG_kQJA:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cwwgG_cdGL{color:").concat(theme.infoHeaderColor || 'inherit', ";display:flex;font-size:").concat(theme.infoHeaderFontSize || 'inherit', "}\n\n.cwwgG_ecuB{width:60%}\n\n.cwwgG_echV{width:40%}\n\n.cwwgG_doeu{font-size:").concat(theme.numberFontSize || 'inherit', ";font-weight:").concat(theme.numberFontWeight || 'inherit', "}\n\n.cwwgG_doeu,.cwwgG_esVF{color:").concat(theme.darkTextColor || 'inherit', "}\n\n.cwwgG_esVF{font-size:").concat(theme.itemBodyFontSize || 'inherit', ";margin-top:").concat(theme.itemBodyMarginTop || 'inherit', ";overflow:hidden;text-overflow:ellipsis;white-space:nowrap}\n\n.cwwgG_fBqo{cursor:pointer;position:relative}\n\n.cwwgG_eQGE{margin:0 ").concat(theme.sidebarClosedMargin || 'inherit', ";padding:").concat(theme.sidebarClosedPadding || 'inherit', " 0;text-align:center}\n\n[dir=ltr] .cwwgG_eQGE,[dir=rtl] .cwwgG_eQGE{text-align:center}\n\n.cwwgG_csre{display:flex;justify-content:flex-end}\n\n.cwwgG_cRFW{border-bottom:none}\n\n.cwwgG_eNNp{padding:").concat(theme.sidebarIsOpenPadding || 'inherit', "}\n\n.cwwgG_eNNp.cwwgG_cRFW{margin-left:10%}\n\n.cwwgG_eNNp .cwwgG_fBqo{font-size:").concat(theme.sidebarIsOpenMainTextFontSize || 'inherit', ";margin-top:").concat(theme.mainTextPaddingTop || 'inherit', "}");
-  },
-  'sidebarItem': 'cwwgG_kQJA',
-  'infoHeader': 'cwwgG_cdGL',
-  'interactionType': 'cwwgG_ecuB',
-  'pointsPossible': 'cwwgG_echV',
-  'displayNumber': 'cwwgG_doeu',
-  'itemBody': 'cwwgG_esVF',
-  'mainText': 'cwwgG_fBqo',
-  'sidebarClosed': 'cwwgG_eQGE',
-  'pinWrapper': 'cwwgG_csre',
-  'inStimulus': 'cwwgG_cRFW',
-  'sidebarIsOpen': 'cwwgG_eNNp'
-};
-import theme from "./theme.js";
-export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
+export var SidebarItem = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SidebarItem, _Component);
 
   var _super = _createSuper(SidebarItem);
@@ -69,6 +52,19 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
   }
 
   _createClass(SidebarItem, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    } // ============
+    //   ACTIONS
+    // ============
+
+  }, {
     key: "getPointsText",
     // ============
     //   HELPERS
@@ -91,14 +87,14 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
           sidebarOpen = _this$props.sidebarOpen;
 
       if (!sidebarOpen && quizEntry && quizEntry.sizeOfBank > 1) {
-        return /*#__PURE__*/React.createElement(PositionSummary, {
+        return jsx(PositionSummary, {
           firstPosition: position,
           lastPosition: position + quizEntry.sizeOfBank - 1
         });
       }
 
-      return /*#__PURE__*/React.createElement("span", {
-        className: styles.displayNumber
+      return jsx("span", {
+        css: this.props.styles.displayNumber
       }, displayPosition);
     }
   }, {
@@ -113,7 +109,7 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
       }) : t('Navigate to question at position {displayPosition}', {
         displayPosition: displayPosition
       });
-      return /*#__PURE__*/React.createElement(Link, {
+      return jsx(Link, {
         href: "#",
         size: "small",
         margin: "0 small",
@@ -122,16 +118,15 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
         onClick: this.scrollToItem,
         "data-automation-item-id": itemId,
         "data-automation": "sdk-sidebar-item-button"
-      }, /*#__PURE__*/React.createElement(AccessibleContent, {
+      }, jsx(AccessibleContent, {
         alt: screenReaderContent
       }, this.renderPosition()));
     }
   }, {
     key: "renderClosed",
     value: function renderClosed() {
-      var contentWrapperClasses = classNames(styles.sidebarItem, styles.sidebarClosed, _defineProperty({}, styles.inStimulus, this.props.inStimulus));
-      return /*#__PURE__*/React.createElement("div", {
-        className: contentWrapperClasses
+      return jsx("div", {
+        css: this.props.styles.sidebarItem
       }, this.renderButton());
     }
   }, {
@@ -140,32 +135,34 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
       var _this$props3 = this.props,
           children = _this$props3.children,
           itemName = _this$props3.itemName,
-          inStimulus = _this$props3.inStimulus,
-          pointsPossible = _this$props3.pointsPossible;
-      var contentWrapperClasses = classNames(styles.sidebarItem, styles.sidebarIsOpen, _defineProperty({}, styles.inStimulus, inStimulus));
-      return /*#__PURE__*/React.createElement("div", {
-        className: contentWrapperClasses
-      }, /*#__PURE__*/React.createElement(Flex, {
+          pointsPossible = _this$props3.pointsPossible,
+          styles = _this$props3.styles;
+      return jsx("div", {
+        className: "sidebarIsOpen",
+        css: styles.sidebarItem
+      }, jsx(Flex, {
         justifyItems: "space-between"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderButton()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, null, this.renderButton()), jsx(Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.mainText
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.infoHeader
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.interactionType
-      }, itemName), /*#__PURE__*/React.createElement("div", {
-        className: styles.pointsPossible
-      }, this.getPointsText(pointsPossible || 0))), /*#__PURE__*/React.createElement("div", {
-        className: styles.itemBody
-      }, /*#__PURE__*/React.createElement(RichContentRenderer, {
+      }, jsx("div", {
+        css: this.props.styles.mainText
+      }, jsx("div", {
+        css: this.props.styles.infoHeader
+      }, jsx("div", {
+        className: "interactionType",
+        css: this.props.styles.interactionType
+      }, itemName), jsx("div", {
+        className: "pointsPossible",
+        css: this.props.styles.pointsPossible
+      }, this.getPointsText(pointsPossible || 0))), jsx("div", {
+        css: this.props.styles.itemBody
+      }, jsx(RichContentRenderer, {
         content: this.props.itemBody
-      })))), /*#__PURE__*/React.createElement(Flex.Item, null, /*#__PURE__*/React.createElement("div", {
-        className: styles.pinWrapper
+      })))), jsx(Flex.Item, null, jsx("div", {
+        css: this.props.styles.pinWrapper
       }, children))));
     }
   }, {
@@ -184,6 +181,7 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
   itemId: PropTypes.string.isRequired,
   itemBody: PropTypes.string,
   itemName: PropTypes.string.isRequired,
+  // eslint-disable-next-line react/no-unused-prop-types
   inStimulus: PropTypes.bool,
   isAnswered: PropTypes.bool,
   position: PropTypes.number.isRequired,
@@ -193,7 +191,9 @@ export var SidebarItem = (_dec = themeable(theme, styles), _dec(_class = (_temp
   // not used on Take
   sidebarOpen: PropTypes.bool.isRequired,
   // from connect
-  scrollToItem: PropTypes.func.isRequired
+  scrollToItem: PropTypes.func.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   children: null,
   inStimulus: false,

package/es/common/components/layout/sidebar/SidebarItem/styles.js

@@ -0,0 +1,59 @@
+import _objectSpread from "@babel/runtime/helpers/esm/objectSpread2";
+
+var generateStyle = function generateStyle(componentTheme, props) {
+  return {
+    sidebarItem: _objectSpread(_objectSpread(_objectSpread({
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
+      borderBottom: "".concat(componentTheme.bottomBorderWidth, " solid ").concat(componentTheme.bottomBorderColor),
+      '&:hover': {
+        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
+      },
+      padding: componentTheme.sidebarIsOpenPadding
+    }, props.inStimulus && {
+      borderBottom: 'none'
+    }), props.sidebarOpen && props.inStimulus && {
+      marginLeft: '10%'
+    }), !props.sidebarOpen && {
+      padding: "".concat(componentTheme.sidebarClosedPadding, " 0"),
+      margin: "0 ".concat(componentTheme.sidebarClosedMargin),
+      textAlign: 'center'
+    }),
+    infoHeader: {
+      fontSize: componentTheme.infoHeaderFontSize,
+      display: 'flex',
+      color: componentTheme.infoHeaderColor
+    },
+    interactionType: {
+      width: '60%'
+    },
+    pointsPossible: {
+      width: '40%'
+    },
+    displayNumber: {
+      color: componentTheme.darkTextColor,
+      fontSize: componentTheme.numberFontSize,
+      fontWeight: componentTheme.numberFontWeight
+    },
+    itemBody: {
+      fontSize: componentTheme.itemBodyFontSize,
+      color: componentTheme.darkTextColor,
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+      overflow: 'hidden',
+      marginTop: componentTheme.itemBodyMarginTop
+    },
+    mainText: _objectSpread({
+      position: 'relative',
+      cursor: 'pointer'
+    }, props.sidebarOpen && {
+      fontSize: componentTheme.sidebarIsOpenMainTextFontSize,
+      marginTop: componentTheme.mainTextPaddingTop
+    }),
+    pinWrapper: {
+      display: 'flex',
+      justifyContent: 'flex-end'
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/sidebar/SidebarItem/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var borders = _ref.borders,
       colors = _ref.colors,
       typography = _ref.typography,
@@ -23,4 +23,6 @@ export default function generator(_ref) {
     sidebarIsOpenPadding: "".concat(spacing.small, " 0 ").concat(spacing.medium, " 0"),
     sidebarItemLogoFontSize: typography.fontSizeMedium
   };
-}
+};
+
+export default generateComponentTheme;

package/es/common/components/layout/sidebar/Stimulus/presenter.js

@@ -5,37 +5,28 @@ import _createSuper from "@babel/runtime/helpers/esm/createSuper";
 
 var _dec, _class, _class2, _temp;
 
-import React, { Component } from 'react';
+/** @jsx jsx */
+import { Component } from 'react';
 import PropTypes from 'prop-types';
 import ImmutablePropTypes from 'react-immutable-proptypes';
 import { IconTextLeftLine } from '@instructure/ui-icons';
-import { themeable } from '@instructure/ui-themeable';
+import { withStyle, jsx } from '@instructure/emotion';
 import { Link } from '@instructure/ui-link';
 import { Flex } from '@instructure/ui-flex';
 import { ScreenReaderContent } from '@instructure/ui-a11y-content';
 import Collection from "./Collection/index.js";
 import Title from "./Title/index.js";
 import Summary from "./Summary/index.js";
-var styles = {
-  componentId: 'cqghd',
-  template: function template(theme) {
-    return "\n\n.cqghd_kQJA{border-bottom:".concat(theme.sidebarItemBorderWidth || 'inherit', " solid ").concat(theme.sidebarItemBorderColor || 'inherit', "}\n\n.cqghd_cESm{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', ";padding:").concat(theme.sidebarClosedButtonPadding || 'inherit', ";text-align:center}\n\n[dir=ltr] .cqghd_cESm,[dir=rtl] .cqghd_cESm{text-align:center}\n\n.cqghd_cESm:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cqghd_faDl{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.borderColor || 'inherit', ";padding:").concat(theme.sidebarHeaderPadding || 'inherit', " 0}\n\n.cqghd_faDl:hover{border-right:").concat(theme.hoverBorderWidth || 'inherit', " solid ").concat(theme.hoverBorderColor || 'inherit', "}\n\n.cqghd_bTns{margin-left:5%}\n\n.cqghd_cdGL{color:").concat(theme.sidebarIsOpenInfoHeaderColor || 'inherit', ";font-size:").concat(theme.sidebarIsOpenInfoHeaderFontSize || 'inherit', ";margin-bottom:").concat(theme.sidebarIsOpenInfoHeaderMargin || 'inherit', ";padding-left:").concat(theme.sidebarIsOpenInfoHeaderPadding || 'inherit', "}");
-  },
-  'sidebarItem': 'cqghd_kQJA',
-  'sidebarItemClosedButton': 'cqghd_cESm',
-  'stimulusHeader': 'cqghd_faDl',
-  'stimulusBody': 'cqghd_bTns',
-  'infoHeader': 'cqghd_cdGL'
-};
-import theme from "./theme.js";
+import generateStyle from "./styles.js";
+import generateComponentTheme from "./theme.js";
 import t from '@instructure/quiz-i18n/es/format-message';
 export var DISPLAY_AS_SUMMARY_LIMIT = 5;
 
-var _ref = /*#__PURE__*/React.createElement(IconTextLeftLine, {
+var _ref = jsx(IconTextLeftLine, {
   color: "primary"
 });
 
-export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
+export var SidebarStimulus = (_dec = withStyle(generateStyle, generateComponentTheme), _dec(_class = (_temp = _class2 = /*#__PURE__*/function (_Component) {
   _inherits(SidebarStimulus, _Component);
 
   var _super = _createSuper(SidebarStimulus);
@@ -65,6 +56,16 @@ export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_t
   }
 
   _createClass(SidebarStimulus, [{
+    key: "componentDidMount",
+    value: function componentDidMount() {
+      this.props.makeStyles();
+    }
+  }, {
+    key: "componentDidUpdate",
+    value: function componentDidUpdate() {
+      this.props.makeStyles();
+    }
+  }, {
     key: "renderCollection",
     value: function renderCollection() {
       if (this.props.isDragging) {
@@ -77,7 +78,7 @@ export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_t
           isShowingItems = _this$props.isShowingItems,
           renderSidebarItem = _this$props.renderSidebarItem,
           sidebarOpen = _this$props.sidebarOpen;
-      return /*#__PURE__*/React.createElement(Collection, {
+      return jsx(Collection, {
         firstPosition: displayPosition,
         isOver: isOver,
         isShowingItems: isShowingItems,
@@ -91,23 +92,23 @@ export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_t
     key: "renderButton",
     value: function renderButton() {
       var displayPosition = this.props.displayPosition;
-      return /*#__PURE__*/React.createElement(Link, {
+      return jsx(Link, {
         href: "#",
         margin: "small",
         forceButtonRole: false,
         onClick: this.scrollToItem,
         renderIcon: _ref
-      }, /*#__PURE__*/React.createElement(ScreenReaderContent, null, t('Navigate to stimulus at position { displayPosition }', {
+      }, jsx(ScreenReaderContent, null, t('Navigate to stimulus at position { displayPosition }', {
         displayPosition: displayPosition
       })));
     }
   }, {
     key: "renderClosed",
     value: function renderClosed() {
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarItem
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarItemClosedButton
+      return jsx("div", {
+        css: this.props.styles.sidebarItem
+      }, jsx("div", {
+        css: this.props.styles.sidebarItemClosedButton
       }, this.renderButton()), this.renderCollection());
     }
   }, {
@@ -120,24 +121,24 @@ export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_t
           isShowingItems = _this$props2.isShowingItems,
           sidebarOpen = _this$props2.sidebarOpen,
           stimulus = _this$props2.stimulus;
-      return /*#__PURE__*/React.createElement("div", {
-        className: styles.sidebarItem
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusHeader
-      }, /*#__PURE__*/React.createElement("div", {
-        className: styles.infoHeader
-      }, t('Stimulus')), /*#__PURE__*/React.createElement("div", {
-        className: styles.stimulusBody
-      }, /*#__PURE__*/React.createElement(Flex, {
+      return jsx("div", {
+        css: this.props.styles.sidebarItem
+      }, jsx("div", {
+        css: this.props.styles.stimulusHeader
+      }, jsx("div", {
+        css: this.props.styles.infoHeader
+      }, t('Stimulus')), jsx("div", {
+        css: this.props.styles.stimulusBody
+      }, jsx(Flex, {
         justifyItems: "space-between"
-      }, /*#__PURE__*/React.createElement(Flex.Item, null, this.renderButton()), /*#__PURE__*/React.createElement(Flex.Item, {
+      }, jsx(Flex.Item, null, this.renderButton()), jsx(Flex.Item, {
         shouldGrow: true,
         shouldShrink: true,
         onClick: this.scrollToItem,
         tabIndex: "-1"
-      }, /*#__PURE__*/React.createElement(Title, {
+      }, jsx(Title, {
         title: stimulus.title
-      })), /*#__PURE__*/React.createElement(Flex.Item, null, children)), /*#__PURE__*/React.createElement(Summary, {
+      })), jsx(Flex.Item, null, children)), jsx(Summary, {
         startPosition: displayPosition,
         isDragging: isDragging,
         isShowingItems: isShowingItems,
@@ -169,7 +170,9 @@ export var SidebarStimulus = (_dec = themeable(theme, styles), _dec(_class = (_t
   scrollToItem: PropTypes.func.isRequired,
   sidebarOpen: PropTypes.bool.isRequired,
   stimulus: ImmutablePropTypes.record.isRequired,
-  stimulusParent: ImmutablePropTypes.record.isRequired
+  stimulusParent: ImmutablePropTypes.record.isRequired,
+  styles: PropTypes.object,
+  makeStyles: PropTypes.func
 }, _class2.defaultProps = {
   children: null,
   isDragging: false,

package/es/common/components/layout/sidebar/Stimulus/styles.js

@@ -0,0 +1,33 @@
+var generateStyle = function generateStyle(componentTheme) {
+  return {
+    sidebarItem: {
+      borderBottom: "".concat(componentTheme.sidebarItemBorderWidth, " solid ").concat(componentTheme.sidebarItemBorderColor)
+    },
+    sidebarItemClosedButton: {
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
+      padding: componentTheme.sidebarClosedButtonPadding,
+      textAlign: 'center',
+      '&:hover': {
+        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
+      }
+    },
+    stimulusHeader: {
+      padding: "".concat(componentTheme.sidebarHeaderPadding, " 0"),
+      borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
+      '&:hover:': {
+        borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
+      }
+    },
+    stimulusBody: {
+      marginLeft: '5%'
+    },
+    infoHeader: {
+      fontSize: componentTheme.sidebarIsOpenInfoHeaderFontSize,
+      color: componentTheme.sidebarIsOpenInfoHeaderColor,
+      marginBottom: componentTheme.sidebarIsOpenInfoHeaderMargin,
+      paddingLeft: componentTheme.sidebarIsOpenInfoHeaderPadding
+    }
+  };
+};
+
+export default generateStyle;

package/es/common/components/layout/sidebar/Stimulus/theme.js

@@ -1,4 +1,4 @@
-export default function generator(_ref) {
+var generateComponentTheme = function generateComponentTheme(_ref) {
   var colors = _ref.colors,
       spacing = _ref.spacing,
       borders = _ref.borders,
@@ -16,4 +16,6 @@ export default function generator(_ref) {
     sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
     sidebarIsOpenInfoHeaderColor: colors.ash
   };
-}
+};
+
+export default generateComponentTheme;