From 7d21a3d4c9b7bc978d809874e45263b1f73f6b37 Mon Sep 17 00:00:00 2001
From: Kristin Aoki <42981026+KristinAoki@users.noreply.github.com>
Date: Tue, 17 Jan 2023 15:41:11 -0500
Subject: [PATCH] feat: change feedback and delete icons to outline variants
 (#198)

---
 package-lock.json                             | 14 +++----
 package.json                                  |  2 +-
 src/colors.scss                               |  1 -
 .../AnswerWidget/AnswerOption.jsx             | 14 ++++---
 .../AnswerWidget/AnswersContainer.jsx         |  4 +-
 .../__snapshots__/AnswerOption.test.jsx.snap  |  6 +--
 .../AnswersContainer.test.jsx.snap            | 12 ++++--
 .../Checker/__snapshots__/index.test.jsx.snap |  4 +-
 .../AnswerWidget/components/Checker/index.jsx |  2 +-
 .../components/Feedback/FeedbackBox.jsx       |  2 +-
 .../__snapshots__/FeedbackBox.test.jsx.snap   |  2 +-
 .../EditProblemView/AnswerWidget/index.jsx    |  6 +--
 .../EditProblemView/AnswerWidget/index.scss   | 25 ------------
 www/package-lock.json                         | 39 +++++++++++++------
 www/package.json                              |  2 +-
 15 files changed, 65 insertions(+), 70 deletions(-)

diff --git a/package-lock.json b/package-lock.json
index 62c55aa30..930a72c40 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -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",
diff --git a/package.json b/package.json
index 555f11e50..bc07d0ddb 100644
--- a/package.json
+++ b/package.json
@@ -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",
diff --git a/src/colors.scss b/src/colors.scss
index a6630db18..f3c642859 100644
--- a/src/colors.scss
+++ b/src/colors.scss
@@ -1,2 +1 @@
-$white: #fff;
 $black: #000;
\ No newline at end of file
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
index 725dbeddb..73f07b3ea 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswerOption.jsx
@@ -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}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
index 76bff6235..eea060eb5 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/AnswersContainer.jsx
@@ -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}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
index c6bf42cc8..fb4a9c8fa 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswerOption.test.jsx.snap
@@ -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"
       />
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
index 848eaa19e..fef7eb828 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/__snapshots__/AnswersContainer.test.jsx.snap
@@ -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"
   >
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
index d8108e18d..a9692438d 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/__snapshots__/index.test.jsx.snap
@@ -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"
 >
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
index de39a3d87..2ac2a4d7a 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Checker/index.jsx
@@ -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}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
index 4101f944a..347f4cd07 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/FeedbackBox.jsx
@@ -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}
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
index ae9ffb472..4c9113846 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/components/Feedback/__snapshots__/FeedbackBox.test.jsx.snap
@@ -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={
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
index 7e68f2cc9..8bb0e111d 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.jsx
@@ -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>
diff --git a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.scss b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.scss
index bd272ed1e..ad50bcf6c 100644
--- a/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.scss
+++ b/src/editors/containers/ProblemEditor/components/EditProblemView/AnswerWidget/index.scss
@@ -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%;
   }
diff --git a/www/package-lock.json b/www/package-lock.json
index 6dc2344c5..a251014fc 100644
--- a/www/package-lock.json
+++ b/www/package-lock.json
@@ -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=="
         }
       }
     },
diff --git a/www/package.json b/www/package.json
index 15fc6aaa6..fc163e96c 100644
--- a/www/package.json
+++ b/www/package.json
@@ -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",