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

feat: change feedback and delete icons to outline variants (#198)

Browse Source
This commit is contained in:
Kristin Aoki
2023-01-17 15:41:11 -05:00
committed by GitHub
parent b7c24d1e1a
commit 7d21a3d4c9
15 changed files with 65 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
package-lock.json generated
View File

@@ -36,7 +36,7 @@
"devDependencies": {
"@edx/frontend-build": "^11.0.2",
"@edx/frontend-platform": "2.4.0",
"@edx/paragon": "^20.21.3",
"@edx/paragon": "^20.27.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/react": "12.1.1",
"@testing-library/user-event": "^13.5.0",
@@ -4327,9 +4327,9 @@
}
},
"node_modules/@edx/paragon": {
"version": "20.21.5",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.21.5.tgz",
"integrity": "sha512-7+pRDS3MejiF3tsOFs9R6PC66zZJb8eN2nYObNWnyUmKZ7DfzzpHVsDuUYUg+J5cm3dYMY2imyIrMrqov6ettA==",
"version": "20.27.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.27.0.tgz",
"integrity": "sha512-jy62ZEBdAVlsP6tAm1/YDyMtc9fiD47H00whoW+y2Z+lLZqPsv6D5boIPQIcdBeg0W4f2gCU4TEy2+b2q8mYGA==",
"dev": true,
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
@@ -37695,9 +37695,9 @@
}
},
"@edx/paragon": {
"version": "20.21.5",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.21.5.tgz",
"integrity": "sha512-7+pRDS3MejiF3tsOFs9R6PC66zZJb8eN2nYObNWnyUmKZ7DfzzpHVsDuUYUg+J5cm3dYMY2imyIrMrqov6ettA==",
"version": "20.27.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.27.0.tgz",
"integrity": "sha512-jy62ZEBdAVlsP6tAm1/YDyMtc9fiD47H00whoW+y2Z+lLZqPsv6D5boIPQIcdBeg0W4f2gCU4TEy2+b2q8mYGA==",
"dev": true,
"requires": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",

2
package.json
View File

@@ -36,7 +36,7 @@
"devDependencies": {
"@edx/frontend-build": "^11.0.2",
"@edx/frontend-platform": "2.4.0",
"@edx/paragon": "^20.21.3",
"@edx/paragon": "^20.27.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/react": "12.1.1",
"@testing-library/user-event": "^13.5.0",

1
src/colors.scss
View File

@@ -1,2 +1 @@
$white: #fff;
$black: #000;

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

@@ -2,9 +2,12 @@ import React, { memo } from 'react';
import { connect, useDispatch } from 'react-redux';
import PropTypes from 'prop-types';
import {
Collapsible, Icon, IconButton, Form,
Collapsible,
Icon,
IconButton,
Form,
} from '@edx/paragon';
import { Feedback, Delete } from '@edx/paragon/icons';
import { FeedbackOutline, DeleteOutline } from '@edx/paragon/icons';
import { injectIntl, intlShape } from '@edx/frontend-platform/i18n';
import messages from './messages';
@@ -33,7 +36,7 @@ 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 align-items-center">
<div className="answer-option-flex-item-1 mr-1 d-flex">
<Checker
hasSingleAnswer={hasSingleAnswer}
answer={answer}
@@ -62,15 +65,14 @@ export const AnswerOption = ({
<div className="answer-option-flex-item-3 d-flex flex-row flex-nowrap">
<Collapsible.Trigger>
<IconButton
src={Feedback}
className="feedback-icon-button"
src={FeedbackOutline}
iconAs={Icon}
alt={intl.formatMessage(messages.feedbackToggleIconAltText)}
variant="primary"
/>
</Collapsible.Trigger>
<IconButton
src={Delete}
src={DeleteOutline}
iconAs={Icon}
alt={intl.formatMessage(messages.answerDeleteIconAltText)}
onClick={removeAnswer}

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

@@ -20,7 +20,7 @@ export const AnswersContainer = ({
}) => {
const { hasSingleAnswer } = initializeAnswerContainer({ answers, problemType, updateField });
return (
<div>
<div className="border rounded border-light-700 py-4 pl-4 pr-3">
{answers.map((answer) => (
<AnswerOption
key={answer.id}
@@ -29,7 +29,7 @@ export const AnswersContainer = ({
/>
))}
<Button
className="my-3 ml-2"
className="pl-0 text-primary-500"
iconBefore={Add}
variant="tertiary"
onClick={addAnswer}

6
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 align-items-center"
className="answer-option-flex-item-1 mr-1 d-flex"
>
<Checker
answer={
@@ -60,7 +60,6 @@ exports[`AnswerOption render snapshot: renders correct option with feedback 1`]
<Trigger>
<IconButton
alt="Toggle feedback"
className="feedback-icon-button"
iconAs="Icon"
variant="primary"
/>
@@ -82,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 align-items-center"
className="answer-option-flex-item-1 mr-1 d-flex"
>
<Checker
answer={
@@ -137,7 +136,6 @@ exports[`AnswerOption render snapshot: renders correct option with selected unse
<Trigger>
<IconButton
alt="Toggle feedback"
className="feedback-icon-button"
iconAs="Icon"
variant="primary"
/>

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

@@ -1,9 +1,11 @@
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`AnswersContainer render snapshot: renders correct default 1`] = `
<div>
<div
className="border rounded border-light-700 py-4 pl-4 pr-3"
>
<Button
className="my-3 ml-2"
className="pl-0 text-primary-500"
onClick={[MockFunction]}
variant="tertiary"
>
@@ -17,9 +19,11 @@ exports[`AnswersContainer render snapshot: renders correct default 1`] = `
`;
exports[`AnswersContainer render snapshot: renders correctly with answers 1`] = `
<div>
<div
className="border rounded border-light-700 py-4 pl-4 pr-3"
>
<Button
className="my-3 ml-2"
className="pl-0 text-primary-500"
onClick={[MockFunction]}
variant="tertiary"
>

4
src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
View File

@@ -3,7 +3,7 @@
exports[`Checker component with multiple answers 1`] = `
<Form.Checkbox
checked={true}
className="pl-4"
className="pt-2.5"
onChange={[Function]}
value="A"
>
@@ -14,7 +14,7 @@ exports[`Checker component with multiple answers 1`] = `
exports[`Checker component with single answer 1`] = `
<Radio
checked={true}
className="pl-4"
className="pt-2.5"
onChange={[Function]}
value="A"
>

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

@@ -11,7 +11,7 @@ const Checker = ({
}
return (
<CheckerType
className="pl-4"
className="pt-2.5"
value={answer.id}
onChange={(e) => setAnswer({ correct: e.target.checked })}
checked={answer.correct}

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">
<div className="bg-light-300 p-4 mt-3 rounded">
<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"
className="bg-light-300 p-4 mt-3 rounded"
>
<FeedbackControl
answer={

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

@@ -15,11 +15,11 @@ const AnswerWidget = ({
const problemStaticData = ProblemTypes[problemType];
return (
<div>
<div className="problem-answer">
<div className="problem-answer-title">
<div className="p-3 text-primary-500">
<div className="h4">
<FormattedMessage {...messages.answerWidgetTitle} />
</div>
<div className="problem-answer-description">
<div className="small">
{problemStaticData.description}
</div>
</div>

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

@@ -1,31 +1,6 @@
@import '../../../../../../colors.scss';
.problem-answer {
padding: 12px;
.problem-answer-title {
font-weight: bold;
}
.problem-answer-description {
font-size: 0.9rem;
}
}
.answer-option {
// The paragon icon path is missing "fill: currentColor"
.feedback-icon-button {
&:hover {
&:not(:focus) {
svg {
path {
fill: $white;
}
}
}
}
}
.answer-option-flex-item-1 {
flex-basis: 8.33%;
}

39
www/package-lock.json generated
View File

@@ -14,7 +14,7 @@
"@edx/frontend-build": "^11.0.0",
"@edx/frontend-lib-content-components": "file:..",
"@edx/frontend-platform": "2.5.1",
"@edx/paragon": "20.13.0",
"@edx/paragon": "^20.27.0",
"core-js": "^3.21.1",
"dotenv": "^16.0.0",
"prop-types": "^15.5.10",
@@ -31,6 +31,7 @@
"license": "AGPL-3.0",
"dependencies": {
"@codemirror/lang-html": "^6.0.0",
"@codemirror/lang-xml": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@reduxjs/toolkit": "^1.8.1",
@@ -56,7 +57,7 @@
"devDependencies": {
"@edx/frontend-build": "^11.0.2",
"@edx/frontend-platform": "2.4.0",
"@edx/paragon": "^20.21.3",
"@edx/paragon": "^20.27.0",
"@testing-library/dom": "^8.13.0",
"@testing-library/react": "12.1.1",
"@testing-library/user-event": "^13.5.0",
@@ -1987,9 +1988,9 @@
}
},
"node_modules/@edx/paragon": {
"version": "20.13.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.13.0.tgz",
"integrity": "sha512-Zp4nU3YwGviapT9P77I2KV2HSV/5wSip/k2MHPZO235P5usmsJ4zG5UaIkD7X9ciYB3JPrTBfSP05FU2/k2o2g==",
"version": "20.27.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.27.0.tgz",
"integrity": "sha512-jy62ZEBdAVlsP6tAm1/YDyMtc9fiD47H00whoW+y2Z+lLZqPsv6D5boIPQIcdBeg0W4f2gCU4TEy2+b2q8mYGA==",
"dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
@@ -2013,7 +2014,8 @@
"react-table": "^7.7.0",
"react-transition-group": "^4.4.2",
"tabbable": "^5.3.3",
"uncontrollable": "^7.2.1"
"uncontrollable": "^7.2.1",
"uuid": "^9.0.0"
},
"peerDependencies": {
"react": "^16.8.6 || ^17.0.0",
@@ -2058,6 +2060,14 @@
"node": ">=10"
}
},
"node_modules/@edx/paragon/node_modules/uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg==",
"bin": {
"uuid": "dist/bin/uuid"
}
},
"node_modules/@formatjs/ecma402-abstract": {
"version": "1.11.4",
"resolved": "https://registry.npmjs.org/@formatjs/ecma402-abstract/-/ecma402-abstract-1.11.4.tgz",
@@ -22118,11 +22128,12 @@
"version": "file:..",
"requires": {
"@codemirror/lang-html": "^6.0.0",
"@codemirror/lang-xml": "^6.0.0",
"@codemirror/state": "^6.0.0",
"@codemirror/view": "^6.0.0",
"@edx/frontend-build": "^11.0.2",
"@edx/frontend-platform": "2.4.0",
"@edx/paragon": "^20.21.3",
"@edx/paragon": "^20.27.0",
"@reduxjs/toolkit": "^1.8.1",
"@testing-library/dom": "^8.13.0",
"@testing-library/react": "12.1.1",
@@ -22220,9 +22231,9 @@
}
},
"@edx/paragon": {
"version": "20.13.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.13.0.tgz",
"integrity": "sha512-Zp4nU3YwGviapT9P77I2KV2HSV/5wSip/k2MHPZO235P5usmsJ4zG5UaIkD7X9ciYB3JPrTBfSP05FU2/k2o2g==",
"version": "20.27.0",
"resolved": "https://registry.npmjs.org/@edx/paragon/-/paragon-20.27.0.tgz",
"integrity": "sha512-jy62ZEBdAVlsP6tAm1/YDyMtc9fiD47H00whoW+y2Z+lLZqPsv6D5boIPQIcdBeg0W4f2gCU4TEy2+b2q8mYGA==",
"requires": {
"@fortawesome/fontawesome-svg-core": "^6.1.1",
"@fortawesome/react-fontawesome": "^0.1.18",
@@ -22246,7 +22257,8 @@
"react-table": "^7.7.0",
"react-transition-group": "^4.4.2",
"tabbable": "^5.3.3",
"uncontrollable": "^7.2.1"
"uncontrollable": "^7.2.1",
"uuid": "^9.0.0"
},
"dependencies": {
"brace-expansion": {
@@ -22276,6 +22288,11 @@
"requires": {
"brace-expansion": "^2.0.1"
}
},
"uuid": {
"version": "9.0.0",
"resolved": "https://registry.npmjs.org/uuid/-/uuid-9.0.0.tgz",
"integrity": "sha512-MXcSTerfPa4uqyzStbRoTgt5XIe3x5+42+q1sDuy3R5MDk66URdLMOZe5aPX/SQd+kuYAh0FdP/pO28IkQyTeg=="
}
}
},

2
www/package.json
View File

@@ -15,7 +15,7 @@
"@edx/frontend-build": "^11.0.0",
"@edx/frontend-lib-content-components": "file:..",
"@edx/frontend-platform": "2.5.1",
"@edx/paragon": "20.13.0",
"@edx/paragon": "^20.27.0",
"core-js": "^3.21.1",
"dotenv": "^16.0.0",
"prop-types": "^15.5.10",