@instructure/quiz-core 21.0.1-rc.26 → 21.0.1-rc.27
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/es/common/components/layout/sidebar/Stimulus/presenter.js +97 -39
- package/es/common/components/layout/sidebar/Stimulus/styles.js +2 -26
- package/es/common/components/layout/sidebar/Stimulus/theme.js +1 -10
- package/lib/common/components/layout/sidebar/Stimulus/presenter.js +97 -39
- package/lib/common/components/layout/sidebar/Stimulus/styles.js +2 -26
- package/lib/common/components/layout/sidebar/Stimulus/theme.js +1 -10
- package/package.json +9 -9
|
@@ -35,6 +35,8 @@ import t from '@instructure/quiz-i18n/es/format-message';
|
|
|
35
35
|
import { Flex, END_EDITING_TRIGGER_CLASSNAME, withStyleOverrides } from '@instructure/quiz-common';
|
|
36
36
|
import { Tooltip } from '@instructure/ui-tooltip';
|
|
37
37
|
import { ScreenReaderContent } from '@instructure/ui-a11y-content';
|
|
38
|
+
import { View } from '@instructure/ui-view';
|
|
39
|
+
import { Text } from '@instructure/ui-text';
|
|
38
40
|
export var DISPLAY_AS_SUMMARY_LIMIT = 5;
|
|
39
41
|
export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateComponentTheme), _dec(_class = (_SidebarStimulus = /*#__PURE__*/function (_Component) {
|
|
40
42
|
function SidebarStimulus() {
|
|
@@ -64,19 +66,26 @@ export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateC
|
|
|
64
66
|
value: function componentDidUpdate() {
|
|
65
67
|
this.props.makeStyles();
|
|
66
68
|
}
|
|
69
|
+
}, {
|
|
70
|
+
key: "stimulusIsPassage",
|
|
71
|
+
value: function stimulusIsPassage() {
|
|
72
|
+
var _this$props$stimulus;
|
|
73
|
+
return (_this$props$stimulus = this.props.stimulus) === null || _this$props$stimulus === void 0 ? void 0 : _this$props$stimulus.isPassage;
|
|
74
|
+
}
|
|
67
75
|
}, {
|
|
68
76
|
key: "renderCollection",
|
|
69
77
|
value: function renderCollection() {
|
|
70
|
-
var _this$props$
|
|
71
|
-
if (this.props.isDragging) {
|
|
72
|
-
return;
|
|
73
|
-
}
|
|
78
|
+
var _this$props$stimulus2;
|
|
74
79
|
var _this$props = this.props,
|
|
75
80
|
displayPosition = _this$props.displayPosition,
|
|
76
81
|
isOver = _this$props.isOver,
|
|
77
82
|
isShowingItems = _this$props.isShowingItems,
|
|
78
83
|
renderSidebarItem = _this$props.renderSidebarItem,
|
|
79
|
-
sidebarOpen = _this$props.sidebarOpen
|
|
84
|
+
sidebarOpen = _this$props.sidebarOpen,
|
|
85
|
+
isDragging = _this$props.isDragging;
|
|
86
|
+
if (this.stimulusIsPassage() || isDragging) {
|
|
87
|
+
return null;
|
|
88
|
+
}
|
|
80
89
|
return jsx(Collection, {
|
|
81
90
|
firstPosition: displayPosition,
|
|
82
91
|
isOver: isOver,
|
|
@@ -85,22 +94,29 @@ export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateC
|
|
|
85
94
|
renderSidebarItem: renderSidebarItem,
|
|
86
95
|
sidebarOpen: sidebarOpen,
|
|
87
96
|
stimulusId: this.props.stimulus.id,
|
|
88
|
-
isPassage: (_this$props$
|
|
97
|
+
isPassage: (_this$props$stimulus2 = this.props.stimulus) === null || _this$props$stimulus2 === void 0 ? void 0 : _this$props$stimulus2.isPassage
|
|
89
98
|
});
|
|
90
99
|
}
|
|
91
100
|
}, {
|
|
92
101
|
key: "renderButton",
|
|
93
102
|
value: function renderButton() {
|
|
94
|
-
var
|
|
95
|
-
|
|
103
|
+
var _this$props2 = this.props,
|
|
104
|
+
displayPosition = _this$props2.displayPosition,
|
|
105
|
+
sidebarOpen = _this$props2.sidebarOpen;
|
|
106
|
+
var itemName = this.stimulusIsPassage() ? 'passage' : 'stimulus';
|
|
107
|
+
var textForNavigation = t('Navigate to {itemName} at position {displayPosition}', {
|
|
108
|
+
itemName: itemName,
|
|
96
109
|
displayPosition: displayPosition
|
|
97
110
|
});
|
|
111
|
+
var content = sidebarOpen ? '' : textForNavigation;
|
|
112
|
+
var tip = jsx(Text, {
|
|
113
|
+
"aria-hidden": !sidebarOpen,
|
|
114
|
+
"aria-label": content
|
|
115
|
+
}, content);
|
|
98
116
|
return jsx(Tooltip, {
|
|
99
|
-
renderTip:
|
|
100
|
-
"aria-hidden": "true"
|
|
101
|
-
}, textForNavigation),
|
|
117
|
+
renderTip: tip,
|
|
102
118
|
placement: "start",
|
|
103
|
-
on:
|
|
119
|
+
on: sidebarOpen ? [] : ['hover', 'focus']
|
|
104
120
|
}, jsx(Link, {
|
|
105
121
|
href: "#",
|
|
106
122
|
margin: "small",
|
|
@@ -112,33 +128,82 @@ export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateC
|
|
|
112
128
|
className: END_EDITING_TRIGGER_CLASSNAME
|
|
113
129
|
}, jsx(ScreenReaderContent, null, textForNavigation)));
|
|
114
130
|
}
|
|
131
|
+
}, {
|
|
132
|
+
key: "infoHeaderLabel",
|
|
133
|
+
value: function infoHeaderLabel() {
|
|
134
|
+
return this.stimulusIsPassage() ? t('Passage') : t('Stimulus');
|
|
135
|
+
}
|
|
136
|
+
}, {
|
|
137
|
+
key: "renderSummary",
|
|
138
|
+
value: function renderSummary() {
|
|
139
|
+
var _this$props3 = this.props,
|
|
140
|
+
displayPosition = _this$props3.displayPosition,
|
|
141
|
+
isDragging = _this$props3.isDragging,
|
|
142
|
+
isShowingItems = _this$props3.isShowingItems,
|
|
143
|
+
sidebarOpen = _this$props3.sidebarOpen,
|
|
144
|
+
stimulus = _this$props3.stimulus;
|
|
145
|
+
if (this.stimulusIsPassage()) {
|
|
146
|
+
return null;
|
|
147
|
+
}
|
|
148
|
+
return jsx(Summary, {
|
|
149
|
+
startPosition: displayPosition,
|
|
150
|
+
isDragging: isDragging,
|
|
151
|
+
isShowingItems: isShowingItems,
|
|
152
|
+
stimulusId: stimulus.id,
|
|
153
|
+
sidebarOpen: sidebarOpen,
|
|
154
|
+
numberOfItems: this.props.childEntries.size
|
|
155
|
+
});
|
|
156
|
+
}
|
|
157
|
+
}, {
|
|
158
|
+
key: "stimulusHoverCss",
|
|
159
|
+
value: function stimulusHoverCss() {
|
|
160
|
+
return {
|
|
161
|
+
// TODO: figure out how to get rid of the last of these styles.
|
|
162
|
+
':hover': this.props.styles.onHover
|
|
163
|
+
};
|
|
164
|
+
}
|
|
115
165
|
}, {
|
|
116
166
|
key: "renderClosed",
|
|
117
167
|
value: function renderClosed() {
|
|
118
|
-
return jsx(
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
168
|
+
return jsx(View, {
|
|
169
|
+
borderWidth: "0 0 small 0",
|
|
170
|
+
borderColor: "primary",
|
|
171
|
+
as: "div"
|
|
172
|
+
}, jsx(View, {
|
|
173
|
+
textAlign: "center",
|
|
174
|
+
padding: "xx-small 0",
|
|
175
|
+
borderWidth: "none large none none",
|
|
176
|
+
borderColor: "transparent",
|
|
177
|
+
css: this.stimulusHoverCss(),
|
|
178
|
+
as: "div"
|
|
122
179
|
}, this.renderButton()), this.renderCollection());
|
|
123
180
|
}
|
|
124
181
|
}, {
|
|
125
182
|
key: "renderOpen",
|
|
126
183
|
value: function renderOpen() {
|
|
127
|
-
var _this$
|
|
128
|
-
|
|
129
|
-
|
|
130
|
-
|
|
131
|
-
|
|
132
|
-
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
},
|
|
141
|
-
|
|
184
|
+
var _this$props4 = this.props,
|
|
185
|
+
stimulus = _this$props4.stimulus,
|
|
186
|
+
children = _this$props4.children;
|
|
187
|
+
return jsx(View, {
|
|
188
|
+
borderWidth: "0 0 small 0",
|
|
189
|
+
borderColor: "primary",
|
|
190
|
+
as: "div"
|
|
191
|
+
}, jsx(View, {
|
|
192
|
+
padding: "small 0",
|
|
193
|
+
borderWidth: "none large none none",
|
|
194
|
+
borderColor: "transparent",
|
|
195
|
+
css: this.stimulusHoverCss(),
|
|
196
|
+
as: "div"
|
|
197
|
+
}, jsx(View, {
|
|
198
|
+
margin: "auto auto x-small x-small",
|
|
199
|
+
padding: "auto auto auto x-small",
|
|
200
|
+
as: "div"
|
|
201
|
+
}, jsx(Text, {
|
|
202
|
+
size: "x-small",
|
|
203
|
+
color: "secondary"
|
|
204
|
+
}, this.infoHeaderLabel())), jsx(View, {
|
|
205
|
+
margin: "auto auto auto small",
|
|
206
|
+
as: "div"
|
|
142
207
|
}, jsx(Flex, {
|
|
143
208
|
justifyItems: "space-between"
|
|
144
209
|
}, jsx(Flex.Item, null, this.renderButton()), jsx(Flex.Item, {
|
|
@@ -148,14 +213,7 @@ export var SidebarStimulus = (_dec = withStyleOverrides(generateStyle, generateC
|
|
|
148
213
|
tabIndex: "-1"
|
|
149
214
|
}, jsx(Title, {
|
|
150
215
|
title: stimulus.title
|
|
151
|
-
})), jsx(Flex.Item, null, children)),
|
|
152
|
-
startPosition: displayPosition,
|
|
153
|
-
isDragging: isDragging,
|
|
154
|
-
isShowingItems: isShowingItems,
|
|
155
|
-
sidebarOpen: sidebarOpen,
|
|
156
|
-
stimulusId: stimulus.id,
|
|
157
|
-
numberOfItems: this.props.childEntries.size
|
|
158
|
-
}))), this.renderCollection());
|
|
216
|
+
})), jsx(Flex.Item, null, children)), this.renderSummary())), this.renderCollection());
|
|
159
217
|
}
|
|
160
218
|
}, {
|
|
161
219
|
key: "render",
|
|
@@ -1,31 +1,7 @@
|
|
|
1
1
|
var generateStyle = function generateStyle(componentTheme) {
|
|
2
2
|
return {
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
},
|
|
6
|
-
sidebarItemClosedButton: {
|
|
7
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
|
|
8
|
-
padding: componentTheme.sidebarClosedButtonPadding,
|
|
9
|
-
textAlign: 'center',
|
|
10
|
-
'&:hover': {
|
|
11
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
|
|
12
|
-
}
|
|
13
|
-
},
|
|
14
|
-
stimulusHeader: {
|
|
15
|
-
padding: "".concat(componentTheme.sidebarHeaderPadding, " 0"),
|
|
16
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
|
|
17
|
-
'&:hover:': {
|
|
18
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
|
|
19
|
-
}
|
|
20
|
-
},
|
|
21
|
-
stimulusBody: {
|
|
22
|
-
marginLeft: '5%'
|
|
23
|
-
},
|
|
24
|
-
infoHeader: {
|
|
25
|
-
fontSize: componentTheme.sidebarIsOpenInfoHeaderFontSize,
|
|
26
|
-
color: componentTheme.sidebarIsOpenInfoHeaderColor,
|
|
27
|
-
marginBottom: componentTheme.sidebarIsOpenInfoHeaderMargin,
|
|
28
|
-
paddingLeft: componentTheme.sidebarIsOpenInfoHeaderPadding
|
|
3
|
+
onHover: {
|
|
4
|
+
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
|
|
29
5
|
}
|
|
30
6
|
};
|
|
31
7
|
};
|
|
@@ -5,16 +5,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
|
|
|
5
5
|
typography = _ref.typography;
|
|
6
6
|
return {
|
|
7
7
|
borderColor: colors.contrasts.white1010,
|
|
8
|
-
hoverBorderColor: colors.contrasts.blue4570
|
|
9
|
-
hoverBorderWidth: borders.widthLarge,
|
|
10
|
-
sidebarClosedButtonPadding: "".concat(spacing.xxSmall, " 0"),
|
|
11
|
-
sidebarHeaderPadding: spacing.small,
|
|
12
|
-
sidebarItemBorderWidth: borders.widthSmall,
|
|
13
|
-
sidebarItemBorderColor: colors.contrasts.grey1214,
|
|
14
|
-
sidebarIsOpenInfoHeaderFontSize: typography.fontSizeXSmall,
|
|
15
|
-
sidebarIsOpenInfoHeaderPadding: spacing.xSmall,
|
|
16
|
-
sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
|
|
17
|
-
sidebarIsOpenInfoHeaderColor: colors.contrasts.grey4570
|
|
8
|
+
hoverBorderColor: colors.contrasts.blue4570
|
|
18
9
|
};
|
|
19
10
|
};
|
|
20
11
|
export default generateComponentTheme;
|
|
@@ -26,6 +26,8 @@ var _formatMessage = _interopRequireDefault(require("@instructure/quiz-i18n/es/f
|
|
|
26
26
|
var _quizCommon = require("@instructure/quiz-common");
|
|
27
27
|
var _uiTooltip = require("@instructure/ui-tooltip");
|
|
28
28
|
var _uiA11yContent = require("@instructure/ui-a11y-content");
|
|
29
|
+
var _uiView = require("@instructure/ui-view");
|
|
30
|
+
var _uiText = require("@instructure/ui-text");
|
|
29
31
|
var _dec, _class, _SidebarStimulus;
|
|
30
32
|
/** @jsx jsx */
|
|
31
33
|
function _callSuper(_this, derived, args) {
|
|
@@ -71,19 +73,26 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
|
|
|
71
73
|
value: function componentDidUpdate() {
|
|
72
74
|
this.props.makeStyles();
|
|
73
75
|
}
|
|
76
|
+
}, {
|
|
77
|
+
key: "stimulusIsPassage",
|
|
78
|
+
value: function stimulusIsPassage() {
|
|
79
|
+
var _this$props$stimulus;
|
|
80
|
+
return (_this$props$stimulus = this.props.stimulus) === null || _this$props$stimulus === void 0 ? void 0 : _this$props$stimulus.isPassage;
|
|
81
|
+
}
|
|
74
82
|
}, {
|
|
75
83
|
key: "renderCollection",
|
|
76
84
|
value: function renderCollection() {
|
|
77
|
-
var _this$props$
|
|
78
|
-
if (this.props.isDragging) {
|
|
79
|
-
return;
|
|
80
|
-
}
|
|
85
|
+
var _this$props$stimulus2;
|
|
81
86
|
var _this$props = this.props,
|
|
82
87
|
displayPosition = _this$props.displayPosition,
|
|
83
88
|
isOver = _this$props.isOver,
|
|
84
89
|
isShowingItems = _this$props.isShowingItems,
|
|
85
90
|
renderSidebarItem = _this$props.renderSidebarItem,
|
|
86
|
-
sidebarOpen = _this$props.sidebarOpen
|
|
91
|
+
sidebarOpen = _this$props.sidebarOpen,
|
|
92
|
+
isDragging = _this$props.isDragging;
|
|
93
|
+
if (this.stimulusIsPassage() || isDragging) {
|
|
94
|
+
return null;
|
|
95
|
+
}
|
|
87
96
|
return (0, _emotion.jsx)(_Collection["default"], {
|
|
88
97
|
firstPosition: displayPosition,
|
|
89
98
|
isOver: isOver,
|
|
@@ -92,22 +101,29 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
|
|
|
92
101
|
renderSidebarItem: renderSidebarItem,
|
|
93
102
|
sidebarOpen: sidebarOpen,
|
|
94
103
|
stimulusId: this.props.stimulus.id,
|
|
95
|
-
isPassage: (_this$props$
|
|
104
|
+
isPassage: (_this$props$stimulus2 = this.props.stimulus) === null || _this$props$stimulus2 === void 0 ? void 0 : _this$props$stimulus2.isPassage
|
|
96
105
|
});
|
|
97
106
|
}
|
|
98
107
|
}, {
|
|
99
108
|
key: "renderButton",
|
|
100
109
|
value: function renderButton() {
|
|
101
|
-
var
|
|
102
|
-
|
|
110
|
+
var _this$props2 = this.props,
|
|
111
|
+
displayPosition = _this$props2.displayPosition,
|
|
112
|
+
sidebarOpen = _this$props2.sidebarOpen;
|
|
113
|
+
var itemName = this.stimulusIsPassage() ? 'passage' : 'stimulus';
|
|
114
|
+
var textForNavigation = (0, _formatMessage["default"])('Navigate to {itemName} at position {displayPosition}', {
|
|
115
|
+
itemName: itemName,
|
|
103
116
|
displayPosition: displayPosition
|
|
104
117
|
});
|
|
118
|
+
var content = sidebarOpen ? '' : textForNavigation;
|
|
119
|
+
var tip = (0, _emotion.jsx)(_uiText.Text, {
|
|
120
|
+
"aria-hidden": !sidebarOpen,
|
|
121
|
+
"aria-label": content
|
|
122
|
+
}, content);
|
|
105
123
|
return (0, _emotion.jsx)(_uiTooltip.Tooltip, {
|
|
106
|
-
renderTip:
|
|
107
|
-
"aria-hidden": "true"
|
|
108
|
-
}, textForNavigation),
|
|
124
|
+
renderTip: tip,
|
|
109
125
|
placement: "start",
|
|
110
|
-
on:
|
|
126
|
+
on: sidebarOpen ? [] : ['hover', 'focus']
|
|
111
127
|
}, (0, _emotion.jsx)(_uiLink.Link, {
|
|
112
128
|
href: "#",
|
|
113
129
|
margin: "small",
|
|
@@ -119,33 +135,82 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
|
|
|
119
135
|
className: _quizCommon.END_EDITING_TRIGGER_CLASSNAME
|
|
120
136
|
}, (0, _emotion.jsx)(_uiA11yContent.ScreenReaderContent, null, textForNavigation)));
|
|
121
137
|
}
|
|
138
|
+
}, {
|
|
139
|
+
key: "infoHeaderLabel",
|
|
140
|
+
value: function infoHeaderLabel() {
|
|
141
|
+
return this.stimulusIsPassage() ? (0, _formatMessage["default"])('Passage') : (0, _formatMessage["default"])('Stimulus');
|
|
142
|
+
}
|
|
143
|
+
}, {
|
|
144
|
+
key: "renderSummary",
|
|
145
|
+
value: function renderSummary() {
|
|
146
|
+
var _this$props3 = this.props,
|
|
147
|
+
displayPosition = _this$props3.displayPosition,
|
|
148
|
+
isDragging = _this$props3.isDragging,
|
|
149
|
+
isShowingItems = _this$props3.isShowingItems,
|
|
150
|
+
sidebarOpen = _this$props3.sidebarOpen,
|
|
151
|
+
stimulus = _this$props3.stimulus;
|
|
152
|
+
if (this.stimulusIsPassage()) {
|
|
153
|
+
return null;
|
|
154
|
+
}
|
|
155
|
+
return (0, _emotion.jsx)(_Summary["default"], {
|
|
156
|
+
startPosition: displayPosition,
|
|
157
|
+
isDragging: isDragging,
|
|
158
|
+
isShowingItems: isShowingItems,
|
|
159
|
+
stimulusId: stimulus.id,
|
|
160
|
+
sidebarOpen: sidebarOpen,
|
|
161
|
+
numberOfItems: this.props.childEntries.size
|
|
162
|
+
});
|
|
163
|
+
}
|
|
164
|
+
}, {
|
|
165
|
+
key: "stimulusHoverCss",
|
|
166
|
+
value: function stimulusHoverCss() {
|
|
167
|
+
return {
|
|
168
|
+
// TODO: figure out how to get rid of the last of these styles.
|
|
169
|
+
':hover': this.props.styles.onHover
|
|
170
|
+
};
|
|
171
|
+
}
|
|
122
172
|
}, {
|
|
123
173
|
key: "renderClosed",
|
|
124
174
|
value: function renderClosed() {
|
|
125
|
-
return (0, _emotion.jsx)(
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
175
|
+
return (0, _emotion.jsx)(_uiView.View, {
|
|
176
|
+
borderWidth: "0 0 small 0",
|
|
177
|
+
borderColor: "primary",
|
|
178
|
+
as: "div"
|
|
179
|
+
}, (0, _emotion.jsx)(_uiView.View, {
|
|
180
|
+
textAlign: "center",
|
|
181
|
+
padding: "xx-small 0",
|
|
182
|
+
borderWidth: "none large none none",
|
|
183
|
+
borderColor: "transparent",
|
|
184
|
+
css: this.stimulusHoverCss(),
|
|
185
|
+
as: "div"
|
|
129
186
|
}, this.renderButton()), this.renderCollection());
|
|
130
187
|
}
|
|
131
188
|
}, {
|
|
132
189
|
key: "renderOpen",
|
|
133
190
|
value: function renderOpen() {
|
|
134
|
-
var _this$
|
|
135
|
-
|
|
136
|
-
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
|
|
145
|
-
|
|
146
|
-
|
|
147
|
-
}, (0,
|
|
148
|
-
|
|
191
|
+
var _this$props4 = this.props,
|
|
192
|
+
stimulus = _this$props4.stimulus,
|
|
193
|
+
children = _this$props4.children;
|
|
194
|
+
return (0, _emotion.jsx)(_uiView.View, {
|
|
195
|
+
borderWidth: "0 0 small 0",
|
|
196
|
+
borderColor: "primary",
|
|
197
|
+
as: "div"
|
|
198
|
+
}, (0, _emotion.jsx)(_uiView.View, {
|
|
199
|
+
padding: "small 0",
|
|
200
|
+
borderWidth: "none large none none",
|
|
201
|
+
borderColor: "transparent",
|
|
202
|
+
css: this.stimulusHoverCss(),
|
|
203
|
+
as: "div"
|
|
204
|
+
}, (0, _emotion.jsx)(_uiView.View, {
|
|
205
|
+
margin: "auto auto x-small x-small",
|
|
206
|
+
padding: "auto auto auto x-small",
|
|
207
|
+
as: "div"
|
|
208
|
+
}, (0, _emotion.jsx)(_uiText.Text, {
|
|
209
|
+
size: "x-small",
|
|
210
|
+
color: "secondary"
|
|
211
|
+
}, this.infoHeaderLabel())), (0, _emotion.jsx)(_uiView.View, {
|
|
212
|
+
margin: "auto auto auto small",
|
|
213
|
+
as: "div"
|
|
149
214
|
}, (0, _emotion.jsx)(_quizCommon.Flex, {
|
|
150
215
|
justifyItems: "space-between"
|
|
151
216
|
}, (0, _emotion.jsx)(_quizCommon.Flex.Item, null, this.renderButton()), (0, _emotion.jsx)(_quizCommon.Flex.Item, {
|
|
@@ -155,14 +220,7 @@ var SidebarStimulus = exports.SidebarStimulus = (_dec = (0, _quizCommon.withStyl
|
|
|
155
220
|
tabIndex: "-1"
|
|
156
221
|
}, (0, _emotion.jsx)(_Title["default"], {
|
|
157
222
|
title: stimulus.title
|
|
158
|
-
})), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), (
|
|
159
|
-
startPosition: displayPosition,
|
|
160
|
-
isDragging: isDragging,
|
|
161
|
-
isShowingItems: isShowingItems,
|
|
162
|
-
sidebarOpen: sidebarOpen,
|
|
163
|
-
stimulusId: stimulus.id,
|
|
164
|
-
numberOfItems: this.props.childEntries.size
|
|
165
|
-
}))), this.renderCollection());
|
|
223
|
+
})), (0, _emotion.jsx)(_quizCommon.Flex.Item, null, children)), this.renderSummary())), this.renderCollection());
|
|
166
224
|
}
|
|
167
225
|
}, {
|
|
168
226
|
key: "render",
|
|
@@ -6,32 +6,8 @@ Object.defineProperty(exports, "__esModule", {
|
|
|
6
6
|
exports["default"] = void 0;
|
|
7
7
|
var generateStyle = function generateStyle(componentTheme) {
|
|
8
8
|
return {
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
},
|
|
12
|
-
sidebarItemClosedButton: {
|
|
13
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
|
|
14
|
-
padding: componentTheme.sidebarClosedButtonPadding,
|
|
15
|
-
textAlign: 'center',
|
|
16
|
-
'&:hover': {
|
|
17
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
|
|
18
|
-
}
|
|
19
|
-
},
|
|
20
|
-
stimulusHeader: {
|
|
21
|
-
padding: "".concat(componentTheme.sidebarHeaderPadding, " 0"),
|
|
22
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.borderColor),
|
|
23
|
-
'&:hover:': {
|
|
24
|
-
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
|
|
25
|
-
}
|
|
26
|
-
},
|
|
27
|
-
stimulusBody: {
|
|
28
|
-
marginLeft: '5%'
|
|
29
|
-
},
|
|
30
|
-
infoHeader: {
|
|
31
|
-
fontSize: componentTheme.sidebarIsOpenInfoHeaderFontSize,
|
|
32
|
-
color: componentTheme.sidebarIsOpenInfoHeaderColor,
|
|
33
|
-
marginBottom: componentTheme.sidebarIsOpenInfoHeaderMargin,
|
|
34
|
-
paddingLeft: componentTheme.sidebarIsOpenInfoHeaderPadding
|
|
9
|
+
onHover: {
|
|
10
|
+
borderRight: "".concat(componentTheme.hoverBorderWidth, " solid ").concat(componentTheme.hoverBorderColor)
|
|
35
11
|
}
|
|
36
12
|
};
|
|
37
13
|
};
|
|
@@ -11,16 +11,7 @@ var generateComponentTheme = function generateComponentTheme(_ref) {
|
|
|
11
11
|
typography = _ref.typography;
|
|
12
12
|
return {
|
|
13
13
|
borderColor: colors.contrasts.white1010,
|
|
14
|
-
hoverBorderColor: colors.contrasts.blue4570
|
|
15
|
-
hoverBorderWidth: borders.widthLarge,
|
|
16
|
-
sidebarClosedButtonPadding: "".concat(spacing.xxSmall, " 0"),
|
|
17
|
-
sidebarHeaderPadding: spacing.small,
|
|
18
|
-
sidebarItemBorderWidth: borders.widthSmall,
|
|
19
|
-
sidebarItemBorderColor: colors.contrasts.grey1214,
|
|
20
|
-
sidebarIsOpenInfoHeaderFontSize: typography.fontSizeXSmall,
|
|
21
|
-
sidebarIsOpenInfoHeaderPadding: spacing.xSmall,
|
|
22
|
-
sidebarIsOpenInfoHeaderMargin: spacing.xSmall,
|
|
23
|
-
sidebarIsOpenInfoHeaderColor: colors.contrasts.grey4570
|
|
14
|
+
hoverBorderColor: colors.contrasts.blue4570
|
|
24
15
|
};
|
|
25
16
|
};
|
|
26
17
|
var _default = exports["default"] = generateComponentTheme;
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@instructure/quiz-core",
|
|
3
|
-
"version": "21.0.1-rc.
|
|
3
|
+
"version": "21.0.1-rc.27+2e775b6c8",
|
|
4
4
|
"license": "MIT",
|
|
5
5
|
"description": "The Quiz React SDK by Instructure Inc.",
|
|
6
6
|
"author": "Instructure, Inc. Engineering and Product Design",
|
|
@@ -46,11 +46,11 @@
|
|
|
46
46
|
"@instructure/emotion": "10.14.0",
|
|
47
47
|
"@instructure/grading-utils": "^1.0.0",
|
|
48
48
|
"@instructure/outcomes-ui": "3.2.3",
|
|
49
|
-
"@instructure/quiz-common": "21.0.1-rc.
|
|
50
|
-
"@instructure/quiz-i18n": "21.0.1-rc.
|
|
51
|
-
"@instructure/quiz-interactions": "21.0.1-rc.
|
|
52
|
-
"@instructure/quiz-number-input": "21.0.1-rc.
|
|
53
|
-
"@instructure/quiz-rce": "21.0.1-rc.
|
|
49
|
+
"@instructure/quiz-common": "21.0.1-rc.27+2e775b6c8",
|
|
50
|
+
"@instructure/quiz-i18n": "21.0.1-rc.27+2e775b6c8",
|
|
51
|
+
"@instructure/quiz-interactions": "21.0.1-rc.27+2e775b6c8",
|
|
52
|
+
"@instructure/quiz-number-input": "21.0.1-rc.27+2e775b6c8",
|
|
53
|
+
"@instructure/quiz-rce": "21.0.1-rc.27+2e775b6c8",
|
|
54
54
|
"@instructure/ui-a11y-content": "10.14.0",
|
|
55
55
|
"@instructure/ui-alerts": "10.14.0",
|
|
56
56
|
"@instructure/ui-avatar": "10.14.0",
|
|
@@ -109,7 +109,7 @@
|
|
|
109
109
|
"file-saver": "~2.0.5",
|
|
110
110
|
"humps": "^2.0.0",
|
|
111
111
|
"immutable": "^3.8.1",
|
|
112
|
-
"instructure-validations": "21.0.1-rc.
|
|
112
|
+
"instructure-validations": "21.0.1-rc.27+2e775b6c8",
|
|
113
113
|
"ipaddr.js": "^1.5.4",
|
|
114
114
|
"isomorphic-fetch": "^2.2.0",
|
|
115
115
|
"isuuid": "^0.1.0",
|
|
@@ -158,7 +158,7 @@
|
|
|
158
158
|
"jquery": "^2.2.3",
|
|
159
159
|
"karma-junit-reporter": "^2.0.1",
|
|
160
160
|
"most-subject": "^5.3.0",
|
|
161
|
-
"quiz-presets": "21.0.1-rc.
|
|
161
|
+
"quiz-presets": "21.0.1-rc.27+2e775b6c8",
|
|
162
162
|
"react": "^16.8.6",
|
|
163
163
|
"react-addons-test-utils": "^15.6.2",
|
|
164
164
|
"react-dom": "^16.8.6",
|
|
@@ -174,5 +174,5 @@
|
|
|
174
174
|
"publishConfig": {
|
|
175
175
|
"access": "public"
|
|
176
176
|
},
|
|
177
|
-
"gitHead": "
|
|
177
|
+
"gitHead": "2e775b6c8301807d61316c23c7ad71256d239485"
|
|
178
178
|
}
|