Andal.LND/frontend-app-authoring
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: problem editor styling (#212)

Browse Source 
* fix: test name

* fix: make horizontal paddings 24px

* fix: space between widgets

* fix: remove settings heading

* fix: remove button hover effects

* fix: font size

* fix: make buttons small

* fix: change theme

* fix: reset buttons

* refactor: add Button component

* fix: hints widget

* fix: hints widget

* fix: tooltip

* fix: make settings fixed width

* fix: modal heading

* fix: center header text

* fix: modal header

* fix: settings fonts

* fix: settings fonts

* fix: fonts

* fix: padding

* fix: alignments

* fix: package.json

* fix: package.json

* fix: lint
This commit is contained in:
Jesper Hodge
2023-01-24 13:00:38 -05:00
committed by GitHub
parent 77afb7465b
commit 1a2f175989
45 changed files with 582 additions and 519 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
package-lock.json generated
View File

@@ -58,7 +58,7 @@
},
"peerDependencies": {
"@edx/frontend-platform": ">1.15.0",
"@edx/paragon": "^20.21.0",
"@edx/paragon": "^20.27.0",
"prop-types": "^15.5.10",
"react": "^16.14.0",
"react-dom": "^16.14.0"

2
package.json
View File

@@ -83,7 +83,7 @@
},
"peerDependencies": {
"@edx/frontend-platform": ">1.15.0",
"@edx/paragon": "^20.21.0",
"@edx/paragon": "^20.27.0",
"prop-types": "^15.5.10",
"react": "^16.14.0",
"react-dom": "^16.14.0"

62
src/editors/containers/EditorContainer/__snapshots__/index.test.jsx.snap
View File

@@ -38,29 +38,22 @@ exports[`EditorContainer component render snapshot: initialized. enable save and
<ModalDialog.Header
className="shadow-sm zindex-10"
>
<ModalDialog.Title>
<div
style={
Object {
"height": "44px",
"margin": "auto",
}
}
<div
className="d-flex flex-row justify-content-between"
>
<h2
className="h3 d-flex flex-row align-items-center"
>
<injectIntl(ShimmedIntlComponent)
isInitialized={true}
/>
</div>
<div
className="pgn__modal-close-container"
>
<IconButton
iconAs="Icon"
onClick={[MockFunction openCancelConfirmModal]}
src={[MockFunction icons.Close]}
/>
</div>
</ModalDialog.Title>
</h2>
<IconButton
iconAs="Icon"
onClick={[MockFunction openCancelConfirmModal]}
src={[MockFunction icons.Close]}
/>
</div>
</ModalDialog.Header>
<ModalDialog.Body
className="pb-6"
@@ -123,29 +116,22 @@ exports[`EditorContainer component render snapshot: not initialized. disable sav
<ModalDialog.Header
className="shadow-sm zindex-10"
>
<ModalDialog.Title>
<div
style={
Object {
"height": "44px",
"margin": "auto",
}
}
<div
className="d-flex flex-row justify-content-between"
>
<h2
className="h3 d-flex flex-row align-items-center"
>
<injectIntl(ShimmedIntlComponent)
isInitialized={false}
/>
</div>
<div
className="pgn__modal-close-container"
>
<IconButton
iconAs="Icon"
onClick={[MockFunction openCancelConfirmModal]}
src={[MockFunction icons.Close]}
/>
</div>
</ModalDialog.Title>
</h2>
<IconButton
iconAs="Icon"
onClick={[MockFunction openCancelConfirmModal]}
src={[MockFunction icons.Close]}
/>
</div>
</ModalDialog.Header>
<ModalDialog.Body
className="pb-6"

5
src/editors/containers/EditorContainer/components/TitleHeader/__snapshots__/index.test.jsx.snap
View File

@@ -12,18 +12,17 @@ exports[`TitleHeader snapshots editing 1`] = `
exports[`TitleHeader snapshots initialized 1`] = `
<div
className="d-flex"
className="d-flex flex-row align-items-center"
>
<Truncate>
TeST LocALtitLE
</Truncate>
<IconButton
alt="Edit Title"
className="mr-2"
className="mx-2"
iconAs="Icon"
onClick={[MockFunction localTitleHooks.startEditing]}
size="sm"
src={[MockFunction icons.Edit]}
/>
</div>
`;

8
src/editors/containers/EditorContainer/components/TitleHeader/index.jsx
View File

@@ -3,7 +3,7 @@ import { useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import { Icon, IconButton, Truncate } from '@edx/paragon';
import { Edit } from '@edx/paragon/icons';
import { EditOutline } from '@edx/paragon/icons';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { localTitleHooks } from './hooks';
@@ -44,17 +44,17 @@ export const TitleHeader = ({
);
}
return (
<div className="d-flex">
<div className="d-flex flex-row align-items-center">
<Truncate>
{localTitle}
</Truncate>
<IconButton
alt={intl.formatMessage(messages.editTitleLabel)}
iconAs={Icon}
className="mr-2"
className="mx-2"
onClick={startEditing}
size="sm"
src={Edit}
src={EditOutline}
/>
</div>
);

23
src/editors/containers/EditorContainer/index.jsx
View File

@@ -47,20 +47,19 @@ export const EditorContainer = ({
<FormattedMessage {...messages.cancelConfirmDescription} />
</BaseModal>
<ModalDialog.Header className="shadow-sm zindex-10">
<ModalDialog.Title>
<div
style={{ height: '44px', margin: 'auto' }}
<div className="d-flex flex-row justify-content-between">
<h2
className="h3 d-flex flex-row align-items-center"
>
<TitleHeader isInitialized={isInitialized} />
</div>
<div className="pgn__modal-close-container">
<IconButton
src={Close}
iconAs={Icon}
onClick={openCancelConfirmModal}
/>
</div>
</ModalDialog.Title>
</h2>
<IconButton
src={Close}
iconAs={Icon}
onClick={openCancelConfirmModal}
/>
</div>
</ModalDialog.Header>
<ModalDialog.Body className="pb-6">
{isInitialized && children}

6
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
View File

@@ -36,14 +36,14 @@ export const AnswerOption = ({
onToggle={toggleFeedback}
className="answer-option d-flex flex-row justify-content-between flex-nowrap pb-2 pt-2"
>
<div className="answer-option-flex-item-1 mr-1 d-flex">
<div className="mr-1 d-flex">
<Checker
hasSingleAnswer={hasSingleAnswer}
answer={answer}
setAnswer={setAnswer}
/>
</div>
<div className="answer-option-flex-item-2 ml-1">
<div className="ml-1 flex-grow-1">
<Form.Control
as="textarea"
className="answer-option-textarea text-gray-500 small"
@@ -62,7 +62,7 @@ export const AnswerOption = ({
/>
</Collapsible.Body>
</div>
<div className="answer-option-flex-item-3 d-flex flex-row flex-nowrap">
<div className="d-flex flex-row flex-nowrap">
<Collapsible.Trigger>
<IconButton
src={FeedbackOutline}

9
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
View File

@@ -1,8 +1,6 @@
import React from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Button } from '@edx/paragon';
import { Add } from '@edx/paragon/icons';
import { FormattedMessage } from '@edx/frontend-platform/i18n';
import messages from './messages';
@@ -10,6 +8,7 @@ import { useAnswerContainer, isSingleAnswerProblem } from './hooks';
import { actions, selectors } from '../../../../../data/redux';
import { answerOptionProps } from '../../../../../data/services/cms/types';
import AnswerOption from './AnswerOption';
import Button from '../../../../../sharedComponents/Button';
export const AnswersContainer = ({
problemType,
@@ -23,7 +22,7 @@ export const AnswersContainer = ({
useAnswerContainer({ answers, problemType, updateField });
return (
<div className="border border-light-700 rounded py-4 pl-4 pr-3">
<div className="answers-container border border-light-700 rounded py-4 pl-4 pr-3">
{answers.map((answer) => (
<AnswerOption
key={answer.id}
@@ -32,9 +31,7 @@ export const AnswersContainer = ({
/>
))}
<Button
className="pl-0 text-primary-500"
iconBefore={Add}
variant="tertiary"
variant="add"
onClick={addAnswer}
>
<FormattedMessage {...messages.addAnswerButtonText} />

2
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.test.jsx
View File

@@ -53,7 +53,7 @@ describe('AnswersContainer', () => {
});
});
test('with react-testing-library', async () => {
test('useAnswerContainer', async () => {
let container = null;
await act(async () => {
const wrapper = render(

12
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
View File

@@ -7,7 +7,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
open={false}
>
<div
className="answer-option-flex-item-1 mr-1 d-flex"
className="mr-1 d-flex"
>
<Checker
answer={
@@ -23,7 +23,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
/>
</div>
<div
className="answer-option-flex-item-2 ml-1"
className="ml-1 flex-grow-1"
>
<Form.Control
as="textarea"
@@ -55,7 +55,7 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
</Body>
</div>
<div
className="answer-option-flex-item-3 d-flex flex-row flex-nowrap"
className="d-flex flex-row flex-nowrap"
>
<Trigger>
<IconButton
@@ -81,7 +81,7 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
open={false}
>
<div
className="answer-option-flex-item-1 mr-1 d-flex"
className="mr-1 d-flex"
>
<Checker
answer={
@@ -98,7 +98,7 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
/>
</div>
<div
className="answer-option-flex-item-2 ml-1"
className="ml-1 flex-grow-1"
>
<Form.Control
as="textarea"
@@ -131,7 +131,7 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
</Body>
</div>
<div
className="answer-option-flex-item-3 d-flex flex-row flex-nowrap"
className="d-flex flex-row flex-nowrap"
>
<Trigger>
<IconButton

14
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
View File

@@ -2,12 +2,13 @@
exports[`AnswersContainer render snapshot: renders correct default 1`] = `
<div
className="border border-light-700 rounded py-4 pl-4 pr-3"
className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
>
<Button
className="pl-0 text-primary-500"
className={null}
onClick={[MockFunction]}
variant="tertiary"
text={null}
variant="add"
>
<FormattedMessage
defaultMessage="Add answer"
@@ -20,7 +21,7 @@ exports[`AnswersContainer render snapshot: renders correct default 1`] = `
exports[`AnswersContainer render snapshot: renders correctly with answers 1`] = `
<div
className="border border-light-700 rounded py-4 pl-4 pr-3"
className="answers-container border border-light-700 rounded py-4 pl-4 pr-3"
>
<Component
answer={
@@ -45,9 +46,10 @@ exports[`AnswersContainer render snapshot: renders correctly with answers 1`] =
key="b"
/>
<Button
className="pl-0 text-primary-500"
className={null}
onClick={[MockFunction]}
variant="tertiary"
text={null}
variant="add"
>
<FormattedMessage
defaultMessage="Add answer"

2
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
View File

@@ -16,7 +16,7 @@ export const FeedbackBox = ({
};
return (
<div className="bg-light-300 p-4 mt-3 rounded">
<div className="bg-light-300 p-4 mt-3 rounded text-primary-500">
<FeedbackControl
key={`selectedfeedback-${answer.id}`}
feedback={answer.selectedFeedback}

2
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
View File

@@ -2,7 +2,7 @@
exports[`FeedbackBox component renders 1`] = `
<div
className="bg-light-300 p-4 mt-3 rounded"
className="bg-light-300 p-4 mt-3 rounded text-primary-500"
>
<FeedbackControl
answer={

12
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.scss
View File

@@ -1,16 +1,4 @@
.answer-option {
.answer-option-flex-item-1 {
flex-basis: 8.33%;
}
.answer-option-flex-item-2 {
flex-basis: 83.34%;
}
.answer-option-flex-item-3 {
flex-basis: 8.33%;
}
.answer-option-textarea {
textarea {
border: none;

2
src/editors/containers/ProblemEditor/components/EditProblemView/QuestionWidget/index.jsx
View File

@@ -17,7 +17,7 @@ export const QuestionWidget = ({
if (!refReady) { return null; }
return (
<div className="question-widget">
<div className="h4">
<div className="h4 mb-3">
<FormattedMessage {...messages.questionWidgetTitle} />
</div>
<Editor {

16
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/SettingsOption.jsx
View File

@@ -7,19 +7,21 @@ import { showFullCard } from './hooks';
export const SettingsOption = ({
title,
summary,
none,
children,
className,
}) => {
const { isCardCollapsed, toggleCardCollapse } = showFullCard();
return (
<Card className="border border-light-700 shadow-none">
<Card className={`${className} settingsOption border border-light-700 shadow-none`}>
<Card.Section className="settingsCardTitleSection">
<Collapsible.Advanced
open={isCardCollapsed}
onToggle={toggleCardCollapse}
>
<Collapsible.Trigger className="collapsible-trigger d-flex">
<span className="flex-grow-1">{title}</span>
<span className="flex-grow-1 text-primary-500 x-small">{title}</span>
<Collapsible.Visible whenClosed>
<Icon src={KeyboardArrowDown} />
</Collapsible.Visible>
@@ -29,12 +31,12 @@ export const SettingsOption = ({
</Collapsible.Trigger>
</Collapsible.Advanced>
</Card.Section>
<Card.Section>
<Card.Section className="px-4 pb-4 pt-3">
<Collapsible.Advanced
open={!isCardCollapsed}
>
<Collapsible.Body className="collapsible-body">
<span>{summary}</span>
<span className={`small ${none ? 'text-gray-500' : 'text-primary-500'}`}>{summary}</span>
</Collapsible.Body>
</Collapsible.Advanced>
<Collapsible.Advanced
@@ -52,7 +54,13 @@ export const SettingsOption = ({
SettingsOption.propTypes = {
title: PropTypes.string.isRequired,
summary: PropTypes.string.isRequired,
none: PropTypes.bool,
className: PropTypes.string,
children: PropTypes.node.isRequired,
};
SettingsOption.defaultProps = {
none: false,
className: '',
};
export default SettingsOption;

12
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/SettingsOption.test.jsx.snap
View File

@@ -2,7 +2,7 @@
exports[`SettingsOption render snapshot: renders correct 1`] = `
<Card
className="border border-light-700 shadow-none"
className=" settingsOption border border-light-700 shadow-none"
>
<Card.Section
className="settingsCardTitleSection"
@@ -15,7 +15,7 @@ exports[`SettingsOption render snapshot: renders correct 1`] = `
className="collapsible-trigger d-flex"
>
<span
className="flex-grow-1"
className="flex-grow-1 text-primary-500 x-small"
>
Settings Option Title
</span>
@@ -32,14 +32,18 @@ exports[`SettingsOption render snapshot: renders correct 1`] = `
</Trigger>
</Advanced>
</Card.Section>
<Card.Section>
<Card.Section
className="px-4 pb-4 pt-3"
>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<span>
<span
className="small text-primary-500"
>
Settings Option Summary
</span>
</Body>

298
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/__snapshots__/index.test.jsx.snap
View File

@@ -1,183 +1,157 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`SettingsWidget snapshot snapshot: renders Settings widget page 1`] = `
<div>
<div
className="settingsWidget ml-4"
>
<div
className="h4"
className="mb-3 settingsCardTopdiv"
>
<FormattedMessage
defaultMessage="Settings"
description="Settings Title"
id="authoring.problemeditor.settings.settingsWidgetTitle"
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
/>
</div>
<Container>
<Row>
<Col>
<Row
className="mb-2"
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="mt-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div>
<Advanced
open={true}
>
<Body
className="collapsible-body small"
>
<Button
className="my-3 px-0 text-info-500"
size="inline"
variant="link"
>
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="mt-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<Button
className="my-3 ml-2"
size="inline"
variant="link"
>
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Button>
</Body>
</Advanced>
</Row>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
</Body>
</Advanced>
</Col>
</Row>
</Container>
</Button>
</Body>
</Advanced>
</div>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
</Body>
</Advanced>
</div>
`;
exports[`SettingsWidget snapshot snapshot: renders Settings widget page advanced settings visible 1`] = `
<div>
<div
className="settingsWidget ml-4"
>
<div
className="h4"
className="mb-3 settingsCardTopdiv"
>
<FormattedMessage
defaultMessage="Settings"
description="Settings Title"
id="authoring.problemeditor.settings.settingsWidgetTitle"
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
/>
</div>
<Container>
<Row>
<Col>
<Row
className="mb-2"
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="mt-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div>
<Advanced
open={false}
>
<Body
className="collapsible-body small"
>
<Button
className="my-3 px-0 text-info-500"
size="inline"
variant="link"
>
<injectIntl(ShimmedIntlComponent)
problemType="stringresponse"
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="mt-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row>
<Advanced
open={false}
>
<Body
className="collapsible-body"
>
<Button
className="my-3 ml-2"
size="inline"
variant="link"
>
<FormattedMessage
defaultMessage="Show advanced settings"
description="Button text to show advanced settings"
id="authoring.problemeditor.settings.showAdvancedButton"
/>
</Button>
</Body>
</Advanced>
</Row>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
<Row
className="my-2"
>
<injectIntl(ShimmedIntlComponent) />
</Row>
</Body>
</Advanced>
</Col>
</Row>
</Container>
</Button>
</Body>
</Advanced>
</div>
<Advanced
open={true}
>
<Body
className="collapsible-body"
>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
<div
className="my-3"
>
<injectIntl(ShimmedIntlComponent) />
</div>
</Body>
</Advanced>
</div>
`;

1
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/hooks.js
View File

@@ -172,7 +172,6 @@ export const showAnswerCardHooks = (showAnswer, updateSettings) => {
};
export const timerCardHooks = (updateSettings) => ({
handleChange: (event) => {
let time = parseInt(event.target.value);
if (_.isNaN(time)) {

107
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.jsx
View File

@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import { connect } from 'react-redux';
import {
Button, Col, Collapsible, Container, Row,
Button, Collapsible,
} from '@edx/paragon';
import { selectors, actions } from '../../../../../data/redux';
import ScoringCard from './settingsComponents/ScoringCard';
@@ -32,66 +32,57 @@ export const SettingsWidget = ({
}) => {
const { isAdvancedCardsVisible, showAdvancedCards } = showAdvancedSettingsCards();
return (
<div>
<div className="h4">
<FormattedMessage {...messages.settingsWidgetTitle} />
<div className="settingsWidget ml-4">
<div className="mb-3 settingsCardTopdiv">
<TypeCard
answers={answers}
correctAnswerCount={correctAnswerCount}
problemType={problemType}
updateField={updateField}
updateAnswer={updateAnswer}
/>
</div>
<div className="my-3">
<ScoringCard scoring={settings.scoring} updateSettings={updateSettings} />
</div>
<div className="mt-3">
<HintsCard hints={settings.hints} updateSettings={updateSettings} />
</div>
<Container>
<Row>
<Col>
<Row className="mb-2">
<TypeCard
answers={answers}
correctAnswerCount={correctAnswerCount}
problemType={problemType}
updateField={updateField}
updateAnswer={updateAnswer}
/>
</Row>
<Row className="my-2">
<ScoringCard scoring={settings.scoring} updateSettings={updateSettings} />
</Row>
<Row className="mt-2">
<HintsCard hints={settings.hints} updateSettings={updateSettings} />
</Row>
<Row>
<Collapsible.Advanced open={!isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body">
<Button
className="my-3 ml-2"
variant="link"
size="inline"
onClick={showAdvancedCards}
>
<FormattedMessage {...messages.showAdvanceSettingsButtonText} />
</Button>
</Collapsible.Body>
</Collapsible.Advanced>
</Row>
<div>
<Collapsible.Advanced open={!isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body small">
<Button
className="my-3 px-0 text-info-500"
variant="link"
size="inline"
onClick={showAdvancedCards}
>
<FormattedMessage {...messages.showAdvanceSettingsButtonText} />
</Button>
</Collapsible.Body>
</Collapsible.Advanced>
</div>
<Collapsible.Advanced open={isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body">
<Row className="my-2">
<ShowAnswerCard showAnswer={settings.showAnswer} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<ResetCard showResetButton={settings.showResetButton} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<MatlabCard matLabApiKey={settings.matLabApiKey} updateSettings={updateSettings} />
</Row>
<Row className="my-2">
<SwitchToAdvancedEditorCard />
</Row>
</Collapsible.Body>
</Collapsible.Advanced>
</Col>
</Row>
</Container>
<Collapsible.Advanced open={isAdvancedCardsVisible}>
<Collapsible.Body className="collapsible-body">
<div className="my-3">
<ShowAnswerCard showAnswer={settings.showAnswer} updateSettings={updateSettings} />
</div>
<div className="my-3">
<ResetCard showResetButton={settings.showResetButton} updateSettings={updateSettings} />
</div>
<div className="my-3">
<TimerCard timeBetween={settings.timeBetween} updateSettings={updateSettings} />
</div>
<div className="my-3">
<MatlabCard matLabApiKey={settings.matLabApiKey} updateSettings={updateSettings} />
</div>
<div className="my-3">
<SwitchToAdvancedEditorCard />
</div>
</Collapsible.Body>
</Collapsible.Advanced>
</div>
);
};

16
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/index.scss
View File

@@ -9,3 +9,19 @@
.spacedMessage {
padding-bottom: 1.5rem;
}
.settingsWidget {
margin-top: 40px;
}
.resetCard {
.resetSettingsButtons {
width: 100%;
}
}
.hintRow {
.flex-grow-1 {
flex-grow: 1;
}
}

45
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintRow.jsx
View File

@@ -1,9 +1,9 @@
import React from 'react';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import {
Col, Container, Form, Icon, IconButton, Row,
Form, Icon, IconButton,
} from '@edx/paragon';
import { Delete } from '@edx/paragon/icons';
import { DeleteOutline } from '@edx/paragon/icons';
import PropTypes from 'prop-types';
import messages from '../messages';
@@ -14,29 +14,26 @@ export const HintRow = ({
// inject
intl,
}) => (
<Container fluid>
<Row>
<Col xs={10}>
<Form.Group>
<Form.Control
value={value}
onChange={handleChange}
floatingLabel={intl.formatMessage(messages.hintInputLabel)}
/>
</Form.Group>
</Col>
<Col xs={2}>
<IconButton
src={Delete}
iconAs={Icon}
alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
onClick={handleDelete}
variant="secondary"
<div className="hintRow d-flex flex-row flex-nowrap justify-content-end">
<div className="flex-grow-1">
<Form.Group>
<Form.Control
value={value}
onChange={handleChange}
floatingLabel={intl.formatMessage(messages.hintInputLabel)}
/>
</Col>
</Row>
</Container>
</Form.Group>
</div>
<div>
<IconButton
src={DeleteOutline}
iconAs={Icon}
alt={intl.formatMessage(messages.settingsDeleteIconAltText)}
onClick={handleDelete}
variant="secondary"
/>
</div>
</div>
);
HintRow.propTypes = {

10
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/HintsCard.jsx
View File

@@ -1,12 +1,11 @@
import React from 'react';
import PropTypes from 'prop-types';
import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
import { Button } from '@edx/paragon';
import { Add } from '@edx/paragon/icons';
import SettingsOption from '../SettingsOption';
import messages from '../messages';
import { hintsCardHooks, hintsRowHooks } from '../hooks';
import HintRow from './HintRow';
import Button from '../../../../../../sharedComponents/Button';
export const HintsCard = ({
hints,
@@ -19,6 +18,7 @@ export const HintsCard = ({
<SettingsOption
title={intl.formatMessage(messages.hintSettingTitle)}
summary={intl.formatMessage(summary.message, { ...summary.values })}
none={!hints.length}
>
{hints.map((hint) => (
<HintRow
@@ -29,10 +29,10 @@ export const HintsCard = ({
/>
))}
<Button
className="pl-0 text-primary-500"
iconBefore={Add}
variant="tertiary"
className="m-0 p-0 font-weight-bold"
variant="add"
onClick={handleAdd}
size="sm"
>
<FormattedMessage {...messages.addHintButtonText} />
</Button>

1
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/MatlabCard.jsx
View File

@@ -18,6 +18,7 @@ export const MatlabCard = ({
<SettingsOption
title={intl.formatMessage(messages.matlabSettingTitle)}
summary={summary.intl ? intl.formatMessage(summary.message, { ...summary.values }) : summary.message}
none={!matLabApiKey}
>
<div className="halfSpacedMessage">
<span>

7
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/ResetCard.jsx
View File

@@ -18,6 +18,7 @@ export const ResetCard = ({
title={intl.formatMessage(messages.resetSettingsTitle)}
summary={showResetButton
? intl.formatMessage(messages.resetSettingsTrue) : intl.formatMessage(messages.resetSettingsFalse)}
className="resetCard"
>
<div className="halfSpacedMessage">
<span>
@@ -29,11 +30,11 @@ export const ResetCard = ({
<FormattedMessage {...messages.advancedSettingsLinkText} />
</Hyperlink>
</div>
<ButtonGroup size="lg" className="mb-2">
<Button variant={showResetButton ? 'outline-primary' : 'primary'} onClick={setResetFalse}>
<ButtonGroup size="sm" className="resetSettingsButtons mb-2">
<Button variant={showResetButton ? 'outline-primary' : 'primary'} size="sm" onClick={setResetFalse}>
<FormattedMessage {...messages.resetSettingsFalse} />
</Button>
<Button variant={showResetButton ? 'primary' : 'outline-primary'} onClick={setResetTrue}>
<Button variant={showResetButton ? 'primary' : 'outline-primary'} size="sm" onClick={setResetTrue}>
<FormattedMessage {...messages.resetSettingsTrue} />
</Button>
</ButtonGroup>

7
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/SwitchToAdvancedEditorCard.jsx
View File

@@ -1,11 +1,12 @@
import React from 'react';
import { connect } from 'react-redux';
import { injectIntl, FormattedMessage } from '@edx/frontend-platform/i18n';
import { Button, Card } from '@edx/paragon';
import { Card } from '@edx/paragon';
import PropTypes from 'prop-types';
import messages from '../messages';
import { thunkActions } from '../../../../../../data/redux';
import BaseModal from '../../../../../TextEditor/components/BaseModal';
import Button from '../../../../../../sharedComponents/Button';
import { confirmSwitchToAdvancedEditor } from '../hooks';
export const SwitchToAdvancedEditorCard = ({
@@ -31,9 +32,9 @@ export const SwitchToAdvancedEditorCard = ({
<FormattedMessage {...messages.ConfirmSwitchMessage} />
</BaseModal>
<Button
className="my-3 ml-2"
className="my-3 ml-2 py-0"
variant="link"
size="inline"
size="sm"
onClick={() => { setConfirmOpen(true); }}
>
<FormattedMessage {...messages.SwitchButtonLabel} />

10
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/TypeRow.jsx
View File

@@ -1,9 +1,11 @@
import React from 'react';
import { Container, Icon } from '@edx/paragon';
import { Icon } from '@edx/paragon';
import PropTypes from 'prop-types';
import { Check } from '@edx/paragon/icons';
import { typeRowHooks } from '../hooks';
import Button from '../../../../../../sharedComponents/Button';
export const TypeRow = ({
answers,
correctAnswerCount,
@@ -24,10 +26,10 @@ export const TypeRow = ({
return (
<>
<Container size="xl" onClick={onClick} role="button" className="d-flex" fluid>
<span className="flex-grow-1">{label}</span>
<Button onClick={onClick} className="d-flex p-0 flex-row justify-content-between w-100">
<span className="small text-primary-500">{label}</span>
<span hidden={selected}><Icon src={Check} className="text-success" /></span>
</Container>
</Button>
<hr className={lastRow ? 'd-none' : 'd-block'} />
</>
);

46
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintRow.test.jsx.snap
View File

@@ -1,31 +1,27 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`HintRow snapshot snapshot: renders hints row 1`] = `
<Container
fluid={true}
<div
className="hintRow d-flex flex-row flex-nowrap justify-content-end"
>
<Row>
<Col
xs={10}
>
<Form.Group>
<Form.Control
floatingLabel="Hint"
onChange={[MockFunction]}
value="hint_1"
/>
</Form.Group>
</Col>
<Col
xs={2}
>
<IconButton
alt="Delete answer"
iconAs="Icon"
onClick={[MockFunction]}
variant="secondary"
<div
className="flex-grow-1"
>
<Form.Group>
<Form.Control
floatingLabel="Hint"
onChange={[MockFunction]}
value="hint_1"
/>
</Col>
</Row>
</Container>
</Form.Group>
</div>
<div>
<IconButton
alt="Delete answer"
iconAs="Icon"
onClick={[MockFunction]}
variant="secondary"
/>
</div>
</div>
`;

24
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/HintsCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`HintsCard snapshot snapshot: renders hints setting card multiple hints 1`] = `
<SettingsOption
className=""
none={false}
summary=" {count, plural, =0 {} other {(+# more)}}"
title="Hints"
>
@@ -20,9 +22,11 @@ exports[`HintsCard snapshot snapshot: renders hints setting card multiple hints
value=""
/>
<Button
className="pl-0 text-primary-500"
className="m-0 p-0 font-weight-bold"
onClick={[MockFunction hintsCardHooks.handleAdd]}
variant="tertiary"
size="sm"
text={null}
variant="add"
>
<FormattedMessage
defaultMessage="Add hint"
@@ -35,13 +39,17 @@ exports[`HintsCard snapshot snapshot: renders hints setting card multiple hints
exports[`HintsCard snapshot snapshot: renders hints setting card no hints 1`] = `
<SettingsOption
className=""
none={true}
summary="None"
title="Hints"
>
<Button
className="pl-0 text-primary-500"
className="m-0 p-0 font-weight-bold"
onClick={[MockFunction hintsCardHooks.handleAdd]}
variant="tertiary"
size="sm"
text={null}
variant="add"
>
<FormattedMessage
defaultMessage="Add hint"
@@ -54,6 +62,8 @@ exports[`HintsCard snapshot snapshot: renders hints setting card no hints 1`] =
exports[`HintsCard snapshot snapshot: renders hints setting card one hint 1`] = `
<SettingsOption
className=""
none={false}
summary="hint1 {count, plural, =0 {} other {(+# more)}}"
title="Hints"
>
@@ -65,9 +75,11 @@ exports[`HintsCard snapshot snapshot: renders hints setting card one hint 1`] =
value="hint1"
/>
<Button
className="pl-0 text-primary-500"
className="m-0 p-0 font-weight-bold"
onClick={[MockFunction hintsCardHooks.handleAdd]}
variant="tertiary"
size="sm"
text={null}
variant="add"
>
<FormattedMessage
defaultMessage="Add hint"

4
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/MatlabCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`MatlabCard snapshot snapshot: renders matlab setting card 1`] = `
<SettingsOption
className=""
none={false}
summary="matlab_api_key"
title="MATLAB API Key"
>
@@ -45,6 +47,8 @@ exports[`MatlabCard snapshot snapshot: renders matlab setting card 1`] = `
exports[`MatlabCard snapshot snapshot: renders matlab setting card no key 1`] = `
<SettingsOption
className=""
none={true}
summary="None"
title="MATLAB API Key"
>

16
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ResetCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`ResetCard snapshot snapshot: renders reset true setting card 1`] = `
<SettingsOption
className="resetCard"
none={false}
summary="False"
title="Show reset option"
>
@@ -31,11 +33,12 @@ exports[`ResetCard snapshot snapshot: renders reset true setting card 1`] = `
</Hyperlink>
</div>
<ButtonGroup
className="mb-2"
size="lg"
className="resetSettingsButtons mb-2"
size="sm"
>
<Button
onClick={[MockFunction resetCardHooks.setResetFalse]}
size="sm"
variant="primary"
>
<FormattedMessage
@@ -46,6 +49,7 @@ exports[`ResetCard snapshot snapshot: renders reset true setting card 1`] = `
</Button>
<Button
onClick={[MockFunction resetCardHooks.setResetTrue]}
size="sm"
variant="outline-primary"
>
<FormattedMessage
@@ -60,6 +64,8 @@ exports[`ResetCard snapshot snapshot: renders reset true setting card 1`] = `
exports[`ResetCard snapshot snapshot: renders reset true setting card 2`] = `
<SettingsOption
className="resetCard"
none={false}
summary="True"
title="Show reset option"
>
@@ -89,11 +95,12 @@ exports[`ResetCard snapshot snapshot: renders reset true setting card 2`] = `
</Hyperlink>
</div>
<ButtonGroup
className="mb-2"
size="lg"
className="resetSettingsButtons mb-2"
size="sm"
>
<Button
onClick={[MockFunction resetCardHooks.setResetFalse]}
size="sm"
variant="outline-primary"
>
<FormattedMessage
@@ -104,6 +111,7 @@ exports[`ResetCard snapshot snapshot: renders reset true setting card 2`] = `
</Button>
<Button
onClick={[MockFunction resetCardHooks.setResetTrue]}
size="sm"
variant="primary"
>
<FormattedMessage

6
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ScoringCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
<SettingsOption
className=""
none={false}
summary="{attempts, plural, =1 {# attempt} other {# attempts}} · {weight, plural, =0 {Ungraded} other {# points}}"
title="Scoring"
>
@@ -49,6 +51,8 @@ exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] = `
<SettingsOption
className=""
none={false}
summary="Unlimited attempts · {weight, plural, =0 {Ungraded} other {# points}}"
title="Scoring"
>
@@ -96,6 +100,8 @@ exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] =
exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`] = `
<SettingsOption
className=""
none={false}
summary="{attempts, plural, =1 {# attempt} other {# attempts}} · {weight, plural, =0 {Ungraded} other {# points}}"
title="Scoring"
>

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/ShowAnswerCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`ShowAnswerCard snapshot snapshot: show answer setting card 1`] = `
<SettingsOption
className=""
none={false}
summary="After Some Number of Attempts"
title="Show answer"
>

8
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/SwitchToAdvancedEditorCard.test.jsx.snap
View File

@@ -8,7 +8,10 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
close={[Function]}
confirmAction={
<Button
className={null}
onClick={[Function]}
text={null}
variant="default"
>
<FormattedMessage
defaultMessage="Switch To Advanced Editor"
@@ -35,9 +38,10 @@ exports[`SwitchToAdvancedEditorCard snapshot snapshot: SwitchToAdvancedEditorCar
/>
</BaseModal>
<Button
className="my-3 ml-2"
className="my-3 ml-2 py-0"
onClick={[Function]}
size="inline"
size="sm"
text={null}
variant="link"
>
<FormattedMessage

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TimerCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`TimerCard snapshot snapshot: renders reset true setting card 1`] = `
<SettingsOption
className=""
none={false}
summary="5 seconds"
title="Time between attempts"
>

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeCard.test.jsx.snap
View File

@@ -2,6 +2,8 @@
exports[`TypeCard snapshot snapshot: renders type setting card 1`] = `
<SettingsOption
className=""
none={false}
summary="Text input"
title="Type"
>

39
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/__snapshots__/TypeRow.test.jsx.snap
View File

@@ -2,15 +2,14 @@
exports[`TypeRow snapshot snapshot: renders type row setting card 1`] = `
<Fragment>
<Container
className="d-flex"
fluid={true}
<Button
className="d-flex p-0 flex-row justify-content-between w-100"
onClick={[MockFunction typeRowHooks.onClick]}
role="button"
size="xl"
text={null}
variant="default"
>
<span
className="flex-grow-1"
className="small text-primary-500"
>
Text Input Problem
</span>
@@ -21,7 +20,7 @@ exports[`TypeRow snapshot snapshot: renders type row setting card 1`] = `
className="text-success"
/>
</span>
</Container>
</Button>
<hr
className="d-block"
/>
@@ -30,15 +29,14 @@ exports[`TypeRow snapshot snapshot: renders type row setting card 1`] = `
exports[`TypeRow snapshot snapshot: renders type row setting card last row 1`] = `
<Fragment>
<Container
className="d-flex"
fluid={true}
<Button
className="d-flex p-0 flex-row justify-content-between w-100"
onClick={[MockFunction typeRowHooks.onClick]}
role="button"
size="xl"
text={null}
variant="default"
>
<span
className="flex-grow-1"
className="small text-primary-500"
>
Text Input Problem
</span>
@@ -49,7 +47,7 @@ exports[`TypeRow snapshot snapshot: renders type row setting card last row 1`] =
className="text-success"
/>
</span>
</Container>
</Button>
<hr
className="d-none"
/>
@@ -58,15 +56,14 @@ exports[`TypeRow snapshot snapshot: renders type row setting card last row 1`] =
exports[`TypeRow snapshot snapshot: renders type row setting card not selected 1`] = `
<Fragment>
<Container
className="d-flex"
fluid={true}
<Button
className="d-flex p-0 flex-row justify-content-between w-100"
onClick={[MockFunction typeRowHooks.onClick]}
role="button"
size="xl"
text={null}
variant="default"
>
<span
className="flex-grow-1"
className="small text-primary-500"
>
Text Input Problem
</span>
@@ -77,7 +74,7 @@ exports[`TypeRow snapshot snapshot: renders type row setting card not selected 1
className="text-success"
/>
</span>
</Container>
</Button>
<hr
className="d-block"
/>

86
src/editors/containers/ProblemEditor/components/EditProblemView/__snapshots__/index.test.jsx.snap
View File

@@ -4,33 +4,30 @@ exports[`EditorProblemView component renders raw editor 1`] = `
<injectIntl(ShimmedIntlComponent)
getContent={[Function]}
>
<Container
className="mt-3 px-4"
fluid={true}
<div
className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
>
<Row>
<Col
xs={9}
>
<RawEditor
content={null}
editorRef={
Object {
"current": null,
}
<span
className="flex-grow-1"
>
<RawEditor
content={null}
editorRef={
Object {
"current": null,
}
lang="xml"
/>
</Col>
<Col
xs={3}
>
<injectIntl(ShimmedIntlComponent)
problemType="advanced"
/>
</Col>
</Row>
</Container>
}
lang="xml"
/>
</span>
<span
className="editProblemView-settingsColumn"
>
<injectIntl(ShimmedIntlComponent)
problemType="advanced"
/>
</span>
</div>
</injectIntl(ShimmedIntlComponent)>
`;
@@ -38,27 +35,24 @@ exports[`EditorProblemView component renders simple view 1`] = `
<injectIntl(ShimmedIntlComponent)
getContent={[Function]}
>
<Container
className="mt-3 px-4"
fluid={true}
<div
className="editProblemView d-flex flex-row flex-nowrap justify-content-end"
>
<Row>
<Col
xs={9}
>
<injectIntl(ShimmedIntlComponent) />
<AnswerWidget
problemType="multiplechoiceresponse"
/>
</Col>
<Col
xs={3}
>
<injectIntl(ShimmedIntlComponent)
problemType="multiplechoiceresponse"
/>
</Col>
</Row>
</Container>
<span
className="flex-grow-1"
>
<injectIntl(ShimmedIntlComponent) />
<AnswerWidget
problemType="multiplechoiceresponse"
/>
</span>
<span
className="editProblemView-settingsColumn"
>
<injectIntl(ShimmedIntlComponent)
problemType="multiplechoiceresponse"
/>
</span>
</div>
</injectIntl(ShimmedIntlComponent)>
`;

34
src/editors/containers/ProblemEditor/components/EditProblemView/index.jsx
View File

@@ -2,7 +2,6 @@ import React, { useRef } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { Col, Container, Row } from '@edx/paragon';
import AnswerWidget from './AnswerWidget';
import SettingsWidget from './SettingsWidget';
import QuestionWidget from './QuestionWidget';
@@ -12,6 +11,7 @@ import RawEditor from '../../../../sharedComponents/RawEditor';
import { ProblemTypeKeys } from '../../../../data/constants/problem';
import { parseState } from './hooks';
import './index.scss';
export const EditProblemView = ({
problemType,
@@ -24,23 +24,21 @@ export const EditProblemView = ({
return (
<EditorContainer getContent={getContent}>
<Container fluid className="mt-3 px-4">
<Row>
<Col xs={9}>
{isAdvancedProblemType ? (
<RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
) : (
<>
<QuestionWidget />
<AnswerWidget problemType={problemType} />
</>
)}
</Col>
<Col xs={3}>
<SettingsWidget problemType={problemType} />
</Col>
</Row>
</Container>
<div className="editProblemView d-flex flex-row flex-nowrap justify-content-end">
<span className="flex-grow-1">
{isAdvancedProblemType ? (
<RawEditor editorRef={editorRef} lang="xml" content={problemState.rawOLX} />
) : (
<>
<QuestionWidget />
<AnswerWidget problemType={problemType} />
</>
)}
</span>
<span className="editProblemView-settingsColumn">
<SettingsWidget problemType={problemType} />
</span>
</div>
</EditorContainer>
);
};

5
src/editors/containers/ProblemEditor/components/EditProblemView/index.scss Normal file
View File

@@ -0,0 +1,5 @@
.editProblemView {
.editProblemView-settingsColumn {
flex-basis: 320px;
}
}

2
src/editors/containers/ProblemEditor/components/SelectTypeModal/content/AdvanceTypeSelect.jsx
View File

@@ -52,7 +52,7 @@ export const AdvanceTypeSelect = ({
placement="right"
overlay={(
<Tooltip>
<div className="text-gray-300 text-left">
<div className="text-left">
{intl.formatMessage(messages.supportStatusTooltipMessage, { supportStatus: data.status.replace(' ', '_') })}
</div>
</Tooltip>

64
src/editors/containers/ProblemEditor/components/SelectTypeModal/content/__snapshots__/AdvanceTypeSelect.test.jsx.snap
View File

@@ -59,7 +59,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -114,7 +114,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -158,7 +158,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -213,7 +213,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with default
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -317,7 +317,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -372,7 +372,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -416,7 +416,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -471,7 +471,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -575,7 +575,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -630,7 +630,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -674,7 +674,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -729,7 +729,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -833,7 +833,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -888,7 +888,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -932,7 +932,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -987,7 +987,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1091,7 +1091,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1146,7 +1146,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1190,7 +1190,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1245,7 +1245,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1349,7 +1349,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1404,7 +1404,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1448,7 +1448,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1503,7 +1503,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1607,7 +1607,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1662,7 +1662,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1706,7 +1706,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1761,7 +1761,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1865,7 +1865,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1920,7 +1920,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -1964,7 +1964,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality
@@ -2019,7 +2019,7 @@ exports[`AdvanceTypeSelect snapshots snapshots: renders as expected with problem
overlay={
<Tooltip>
<div
className="text-gray-300 text-left"
className="text-left"
>
{supportStatus, select,
Provisional {Provisionally supported tools might lack the robustness of functionality

23
src/editors/sharedComponents/Button/hooks.js Normal file
View File

@@ -0,0 +1,23 @@
/* eslint-disable import/prefer-default-export */
export const isVariantAdd = (variant) => variant === 'add';
export const getButtonProps = ({ variant, className, Add }) => {
const variantClasses = {
default: 'shared-button',
add: 'shared-button pl-0 text-primary-500 button-variant-add',
};
const variantMap = {
add: 'tertiary',
};
const classes = [variantClasses[variant]];
if (className) { classes.push(className); }
const iconProps = {};
if (isVariantAdd(variant)) { iconProps.iconBefore = Add; }
return {
className: classes.join(' '),
variant: variantMap[variant] || variant,
...iconProps,
};
};

32
src/editors/sharedComponents/Button/index.jsx Normal file
View File

@@ -0,0 +1,32 @@
import React from 'react';
import { string, node, arrayOf } from 'prop-types';
import { Button as ParagonButton } from '@edx/paragon';
import { Add } from '@edx/paragon/icons';
import { getButtonProps } from './hooks';
import './index.scss';
const Button = ({
variant, className, text, children, ...props
}) => (
<ParagonButton
{...getButtonProps({ variant, className, Add })}
{...props}
>
{children || text}
</ParagonButton>
);
Button.propTypes = {
variant: string,
className: string,
text: string,
children: node || arrayOf(node),
};
Button.defaultProps = {
variant: 'default',
className: null,
text: null,
children: null,
};
export default Button;

13
src/editors/sharedComponents/Button/index.scss Normal file
View File

@@ -0,0 +1,13 @@
.button-variant-add {
&:not(:disabled) {
&:not(.disabled) {
&:hover, &:active, &:focus {
background-color: transparent;
&:before {
display: none;
}
}
}
}
}