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

fix: settings font size and spacing (#308)

Browse Source
This commit is contained in:
Kristin Aoki
2023-04-18 11:56:20 -04:00
committed by GitHub
parent 405003045c
commit 4f1dc98ecc
13 changed files with 111 additions and 50 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/CardSection.jsx
View File

@@ -11,7 +11,7 @@ const CardSection = ({
if (!show) { return null; }
return (
<Card.Section className="px-4 pb-4 pt-3">
<Card.Section>
<Collapsible.Advanced
open={!isCardCollapsibleOpen}
>
@@ -22,7 +22,7 @@ const CardSection = ({
<Collapsible.Advanced
open={isCardCollapsibleOpen}
>
<Collapsible.Body className="collapsible-body">
<Collapsible.Body className="collapsible-body text-primary-500 x-small">
{children}
</Collapsible.Body>
</Collapsible.Advanced>

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

@@ -3,9 +3,7 @@
exports[`CardSection closed 1`] = `""`;
exports[`CardSection open 1`] = `
<Card.Section
className="px-4 pb-4 pt-3"
>
<Card.Section>
<Advanced
open={false}
>
@@ -23,7 +21,7 @@ exports[`CardSection open 1`] = `
open={true}
>
<Body
className="collapsible-body"
className="collapsible-body text-primary-500 x-small"
>
<h1>
Section Text

5
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/GroupFeedbackRow.jsx
View File

@@ -44,7 +44,10 @@ export const GroupFeedbackRow = ({
value={letter.id}
checked={value.answers.indexOf(letter.id)}
isValid={value.answers.indexOf(letter.id) >= 0}
>{letter.id}
>
<div className="x-small">
{letter.id}
</div>
</Form.Checkbox>
))}
</Row>

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

@@ -38,22 +38,38 @@ exports[`GroupFeedbackRow snapshot snapshot: renders hints row 1`] = `
checked={-1}
className="mr-4 mt-1"
isValid={false}
/>
>
<div
className="x-small"
/>
</Form.Checkbox>
<Form.Checkbox
checked={-1}
className="mr-4 mt-1"
isValid={false}
/>
>
<div
className="x-small"
/>
</Form.Checkbox>
<Form.Checkbox
checked={-1}
className="mr-4 mt-1"
isValid={false}
/>
>
<div
className="x-small"
/>
</Form.Checkbox>
<Form.Checkbox
checked={-1}
className="mr-4 mt-1"
isValid={false}
/>
>
<div
className="x-small"
/>
</Form.Checkbox>
</Row>
</Component>
</div>

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

@@ -10,7 +10,7 @@ exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card multip
title="Group Feedback"
>
<div
className="py-3"
className="pb-3"
>
<FormattedMessage
defaultMessage="Group feedback will appear when a student selects a specific set of answers."
@@ -89,7 +89,7 @@ exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card no gro
title="Group Feedback"
>
<div
className="py-3"
className="pb-3"
>
<FormattedMessage
defaultMessage="Group feedback will appear when a student selects a specific set of answers."
@@ -123,7 +123,7 @@ exports[`HintsCard snapshot snapshot: renders groupFeedbacks setting card one gr
title="Group Feedback"
>
<div
className="py-3"
className="pb-3"
>
<FormattedMessage
defaultMessage="Group feedback will appear when a student selects a specific set of answers."

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/GroupFeedback/index.jsx
View File

@@ -22,7 +22,7 @@ export const GroupFeedbackCard = ({
none={!groupFeedbacks.length}
hasExpandableTextArea
>
<div className="py-3">
<div className="pb-3">
<FormattedMessage {...messages.groupFeedbackInputLabel} />
</div>
{groupFeedbacks.map((groupFeedback) => (

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

@@ -1,6 +1,6 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`RandomizationCard snapshot snapshot: renders reset true setting card 1`] = `
exports[`RandomizationCard snapshot snapshot: renders randonmization setting card with randomization defined 1`] = `
<SettingsOption
className=""
extraSections={Array []}
@@ -10,15 +10,12 @@ exports[`RandomizationCard snapshot snapshot: renders reset true setting card 1`
title="Randomization"
>
<div
className="halfSpacedMessage"
className="mb-3"
>
<span>
<FormattedMessage
defaultMessage="Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify \\"Never\\"."
description="Description of Possibilities for value in Randomization widget"
id="authoring.problemeditor.settings.randomization.SettingText"
/>
</span>
{randomization, select,
null {No Python based randomization is present in this problem.}
other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
}
</div>
<Form.Group>
<Form.Control
@@ -54,3 +51,37 @@ exports[`RandomizationCard snapshot snapshot: renders reset true setting card 1`
</Form.Group>
</SettingsOption>
`;
exports[`RandomizationCard snapshot snapshot: renders randonmization setting card with randomization null 1`] = `
<SettingsOption
className=""
extraSections={Array []}
hasExpandableTextArea={false}
none={true}
summary="sUmmary"
title="Randomization"
>
<div
className="mb-3"
>
{randomization, select,
null {No Python based randomization is present in this problem.}
other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
}
</div>
<Form.Group>
<Form.Control
as="select"
onChange={[MockFunction randomizationCardHooks.handleChange]}
value={null}
>
<option
key="notApplicable"
value={null}
>
Not Applicable
</option>
</Form.Control>
</Form.Group>
</SettingsOption>
`;

27
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.jsx
View File

@@ -1,5 +1,5 @@
import React from 'react';
import { injectIntl, FormattedMessage, intlShape } from '@edx/frontend-platform/i18n';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import { Form } from '@edx/paragon';
import PropTypes from 'prop-types';
import SettingsOption from '../../SettingsOption';
@@ -20,10 +20,8 @@ export const RandomizationCard = ({
summary={intl.formatMessage(summary.message)}
none={!randomization}
>
<div className="halfSpacedMessage">
<span>
<FormattedMessage {...messages.randomizationSettingText} />
</span>
<div className="mb-3">
{intl.formatMessage(messages.randomizationSettingText, { randomization })}
</div>
<Form.Group>
@@ -32,14 +30,23 @@ export const RandomizationCard = ({
value={randomization}
onChange={handleChange}
>
{Object.values(RandomizationTypesKeys).map((randomizationType) => (
{randomization ? (
Object.values(RandomizationTypesKeys).map((randomizationType) => (
<option
key={randomizationType}
value={randomizationType}
>
{intl.formatMessage(RandomizationTypes[randomizationType])}
</option>
))
) : (
<option
key={randomizationType}
value={randomizationType}
key="notApplicable"
value={randomization}
>
{intl.formatMessage(RandomizationTypes[randomizationType])}
{intl.formatMessage(messages.noRandomizationSummary)}
</option>
))}
)}
</Form.Control>
</Form.Group>

5
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/index.test.jsx
View File

@@ -32,8 +32,11 @@ describe('RandomizationCard', () => {
});
describe('snapshot', () => {
test('snapshot: renders reset true setting card', () => {
test('snapshot: renders randonmization setting card with randomization defined', () => {
expect(shallow(<RandomizationCard {...props} />)).toMatchSnapshot();
});
test('snapshot: renders randonmization setting card with randomization null', () => {
expect(shallow(<RandomizationCard {...props} randomization={null} />)).toMatchSnapshot();
});
});
});

7
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Randomization/messages.js
View File

@@ -9,12 +9,15 @@ const messages = defineMessages({
},
randomizationSettingText: {
id: 'authoring.problemeditor.settings.randomization.SettingText',
defaultMessage: 'Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".',
defaultMessage: `{randomization, select,
null {No Python based randomization is present in this problem.}
other {Defines when to randomize the variables specified in the associated Python script. For problems that do not randomize values, specify "Never".}
}`,
description: 'Description of Possibilities for value in Randomization widget',
},
noRandomizationSummary: {
id: 'authoring.problemeditor.settings.randomization.noRandomizationSummary',
defaultMessage: 'No Python based randomization is present in this problem.',
defaultMessage: 'Not Applicable',
description: 'text shown when no randomization option is given',
},
});

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

@@ -41,9 +41,9 @@ export const ScoringCard = ({
summary={getScoringSummary(scoring.weight, scoring.attempts.number, scoring.attempts.unlimited)}
className="scoringCard"
>
<Form.Label className="mb-4">
<div className="mb-4">
<FormattedMessage {...messages.scoringSettingsLabel} />
</Form.Label>
</div>
<Form.Group>
<Form.Control
type="number"
@@ -71,7 +71,7 @@ export const ScoringCard = ({
checked={scoring.attempts.unlimited}
onChange={handleUnlimitedChange}
>
<div className="small">
<div className="x-small">
<FormattedMessage {...messages.unlimitedAttemptsCheckboxLabel} />
</div>
</Form.Checkbox>

2
src/editors/containers/ProblemEditor/components/EditProblemView/SettingsWidget/settingsComponents/Tolerance/index.jsx
View File

@@ -66,7 +66,7 @@ export const ToleranceCard = ({
<FormattedMessage {...messages.toleranceAnswerRangeWarning} />
</Alert>
)}
<div className="halfSpacedMessage">
<div className="mb-3">
<span>
<FormattedMessage {...messages.toleranceSettingText} />
</span>

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

@@ -8,7 +8,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
summary="{weight, plural, =0 {Ungraded} other {# points}} · {attempts, plural, =1 {# attempt} other {# attempts}}"
title="Scoring"
>
<Form.Label
<div
className="mb-4"
>
<FormattedMessage
@@ -16,7 +16,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
description="Descriptive text for scoring settings"
id="authoring.problemeditor.settings.scoring.label"
/>
</Form.Label>
</div>
<Form.Group>
<Form.Control
floatingLabel="Points"
@@ -51,7 +51,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card 1`] = `
className="mt-3 decoration-control-label"
>
<div
className="small"
className="x-small"
>
<FormattedMessage
defaultMessage="Unlimited attempts"
@@ -82,7 +82,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] =
summary="{weight, plural, =0 {Ungraded} other {# points}} · Unlimited attempts"
title="Scoring"
>
<Form.Label
<div
className="mb-4"
>
<FormattedMessage
@@ -90,7 +90,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] =
description="Descriptive text for scoring settings"
id="authoring.problemeditor.settings.scoring.label"
/>
</Form.Label>
</div>
<Form.Group>
<Form.Control
floatingLabel="Points"
@@ -125,7 +125,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card max attempts 1`] =
className="mt-3 decoration-control-label"
>
<div
className="small"
className="x-small"
>
<FormattedMessage
defaultMessage="Unlimited attempts"
@@ -156,7 +156,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`
summary="{weight, plural, =0 {Ungraded} other {# points}} · {attempts, plural, =1 {# attempt} other {# attempts}}"
title="Scoring"
>
<Form.Label
<div
className="mb-4"
>
<FormattedMessage
@@ -164,7 +164,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`
description="Descriptive text for scoring settings"
id="authoring.problemeditor.settings.scoring.label"
/>
</Form.Label>
</div>
<Form.Group>
<Form.Control
floatingLabel="Points"
@@ -199,7 +199,7 @@ exports[`ScoringCard snapshot snapshot: scoring setting card zero zero weight 1`
className="mt-3 decoration-control-label"
>
<div
className="small"
className="x-small"
>
<FormattedMessage
defaultMessage="Unlimited attempts"