From 9957251234fe2f760c0d212dbc7e12a2f37887b3 Mon Sep 17 00:00:00 2001
From: Jonas Carlsen <jonas.carlsen@knowit.no>
Date: Fri, 1 Nov 2024 11:38:39 +0100
Subject: [PATCH] refactor: primitives for rest of quality evaluation

---
 .../AverageQualityEvaluation.tsx              | 20 ++---
 .../QualityEvaluation/QualityEvaluation.tsx   | 37 ++++----
 .../QualityEvaluationForm.tsx                 | 26 ++----
 .../QualityEvaluationModal.tsx                | 88 +++++++++----------
 .../resourceComponents/SubjectBanner.tsx      |  2 +-
 .../TopicResourceBanner.tsx                   |  2 +-
 6 files changed, 79 insertions(+), 96 deletions(-)

diff --git a/src/components/QualityEvaluation/AverageQualityEvaluation.tsx b/src/components/QualityEvaluation/AverageQualityEvaluation.tsx
index 99c0602e1f..b4f9b3bce8 100644
--- a/src/components/QualityEvaluation/AverageQualityEvaluation.tsx
+++ b/src/components/QualityEvaluation/AverageQualityEvaluation.tsx
@@ -7,16 +7,16 @@
  */
 
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors } from "@ndla/core";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { GradeAverage } from "@ndla/types-taxonomy";
-import { Text } from "@ndla/typography";
 import QualityEvaluationGrade from "../../containers/StructurePage/resourceComponents/QualityEvaluationGrade";
 
-const StyledNoEvaluation = styled(Text)`
-  color: ${colors.brand.greyMedium};
-  font-style: italic;
-`;
+const StyledText = styled(Text, {
+  base: {
+    fontStyle: "italic",
+  },
+});
 
 interface Props {
   gradeAverage: GradeAverage | undefined;
@@ -28,7 +28,7 @@ const AverageQualityEvaluation = ({ gradeAverage, nodeType }: Props) => {
 
   return (
     <>
-      <Text margin="none" textStyle="button">
+      <Text textStyle="label.small" fontWeight="semibold">
         {`${t("taxonomy.average")}:`}
       </Text>
       {gradeAverage ? (
@@ -41,9 +41,9 @@ const AverageQualityEvaluation = ({ gradeAverage, nodeType }: Props) => {
           })}
         />
       ) : (
-        <StyledNoEvaluation margin="none" textStyle="button">
+        <StyledText textStyle="body.small" fontWeight="bold" color="text.subtle">
           {t("qualityEvaluationForm.unavailable")}
-        </StyledNoEvaluation>
+        </StyledText>
       )}
     </>
   );
diff --git a/src/components/QualityEvaluation/QualityEvaluation.tsx b/src/components/QualityEvaluation/QualityEvaluation.tsx
index e673b4a9e9..506e09f36c 100644
--- a/src/components/QualityEvaluation/QualityEvaluation.tsx
+++ b/src/components/QualityEvaluation/QualityEvaluation.tsx
@@ -8,31 +8,32 @@
 
 import { FieldHelperProps, FieldInputProps } from "formik";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { colors, spacing } from "@ndla/core";
+import { Text } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
 import { IArticle, IUpdatedArticle } from "@ndla/types-backend/draft-api";
 import { Node } from "@ndla/types-taxonomy";
-import { Text } from "@ndla/typography";
 import QualityEvaluationModal from "./QualityEvaluationModal";
 import { ArticleFormType } from "../../containers/FormikForm/articleFormHooks";
 import SmallQualityEvaluationGrade from "../../containers/StructurePage/resourceComponents/QualityEvaluationGrade";
 
-const FlexWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  gap: ${spacing.xsmall};
-`;
+const FlexWrapper = styled("div", {
+  base: {
+    display: "flex",
+    alignItems: "center",
+    gap: "3xsmall",
+  },
+});
 
-const StyledNoEvaluation = styled(Text)`
-  color: ${colors.brand.greyMedium};
-  font-style: italic;
-`;
+const StyledText = styled(Text, {
+  base: {
+    fontStyle: "italic",
+  },
+});
 
 interface Props {
   articleType?: string;
   article?: IArticle;
   taxonomy?: Node[];
-  iconButtonColor?: "light" | "primary";
   revisionMetaField?: FieldInputProps<ArticleFormType["revisionMeta"]>;
   revisionMetaHelpers?: FieldHelperProps<ArticleFormType["revisionMeta"]>;
   updateNotes?: (art: IUpdatedArticle) => Promise<IArticle>;
@@ -42,7 +43,6 @@ const QualityEvaluation = ({
   articleType,
   article,
   taxonomy,
-  iconButtonColor,
   revisionMetaField,
   revisionMetaHelpers,
   updateNotes,
@@ -53,23 +53,20 @@ const QualityEvaluation = ({
 
   return (
     <FlexWrapper>
-      <Text margin="none" textStyle="button">
-        {`${t("qualityEvaluationForm.title")}:`}
-      </Text>
+      <Text textStyle="label.small" fontWeight="semibold">{`${t("qualityEvaluationForm.title")}:`}</Text>
       {qualityEvaluation?.grade ? (
         <>
           <SmallQualityEvaluationGrade grade={qualityEvaluation.grade} tooltip={qualityEvaluation?.note} />
         </>
       ) : (
-        <StyledNoEvaluation margin="none" textStyle="button">
+        <StyledText textStyle="body.small" fontWeight="bold" color="text.subtle">
           {t("qualityEvaluationForm.unavailable")}
-        </StyledNoEvaluation>
+        </StyledText>
       )}
       <QualityEvaluationModal
         articleType={articleType}
         article={article}
         taxonomy={taxonomy}
-        iconButtonColor={iconButtonColor}
         revisionMetaField={revisionMetaField}
         revisionMetaHelpers={revisionMetaHelpers}
         updateNotes={updateNotes}
diff --git a/src/components/QualityEvaluation/QualityEvaluationForm.tsx b/src/components/QualityEvaluation/QualityEvaluationForm.tsx
index 8f301bc0b2..38bb53cea3 100644
--- a/src/components/QualityEvaluation/QualityEvaluationForm.tsx
+++ b/src/components/QualityEvaluation/QualityEvaluationForm.tsx
@@ -42,17 +42,11 @@ import validateFormik, { RulesType } from "../formikValidationSchema";
 
 export type QualityEvaluationValue = "1" | "2" | "3" | "4" | "5";
 
-const ButtonContainer = styled("div", {
-  base: {
-    display: "flex",
-    justifyContent: "space-between",
-  },
-});
-
 const StyledRadioGroupRoot = styled(RadioGroupRoot, {
   base: {
     _horizontal: {
       flexDirection: "column",
+      gap: "xxsmall",
     },
   },
 });
@@ -277,21 +271,19 @@ const QualityEvaluationForm = ({
               </FieldRoot>
             )}
           </FormField>
-          <ButtonContainer>
+          <FormActionsContainer>
             {node.qualityEvaluation?.grade && (
               <Button variant="danger" type="reset" loading={loading.delete}>
                 {t("qualityEvaluationForm.delete")}
               </Button>
             )}
-            <FormActionsContainer>
-              <Button variant="secondary" onClick={() => setOpen(false)}>
-                {t("form.abort")}
-              </Button>
-              <Button disabled={!dirty || !isValid || isSubmitting} loading={loading.save} type="submit">
-                {t("form.save")}
-              </Button>
-            </FormActionsContainer>
-          </ButtonContainer>
+            <Button variant="secondary" onClick={() => setOpen(false)}>
+              {t("form.abort")}
+            </Button>
+            <Button disabled={!dirty || !isValid || isSubmitting} loading={loading.save} type="submit">
+              {t("form.save")}
+            </Button>
+          </FormActionsContainer>
           {updateTaxMutation.isError && <Text color="text.error">{t("qualityEvaluationForm.error")}</Text>}
         </FormikForm>
       )}
diff --git a/src/components/QualityEvaluation/QualityEvaluationModal.tsx b/src/components/QualityEvaluation/QualityEvaluationModal.tsx
index a84dfe377f..1a9359fbbd 100644
--- a/src/components/QualityEvaluation/QualityEvaluationModal.tsx
+++ b/src/components/QualityEvaluation/QualityEvaluationModal.tsx
@@ -9,23 +9,23 @@
 import { FieldHelperProps, FieldInputProps } from "formik";
 import { useState } from "react";
 import { useTranslation } from "react-i18next";
-import styled from "@emotion/styled";
-import { IconButtonV2 } from "@ndla/button";
-import { spacing } from "@ndla/core";
+import { Portal } from "@ark-ui/react";
 import { Pencil } from "@ndla/icons/action";
-import { Modal, ModalBody, ModalCloseButton, ModalContent, ModalHeader, ModalTitle, ModalTrigger } from "@ndla/modal";
+import {
+  DialogBody,
+  DialogContent,
+  DialogHeader,
+  DialogRoot,
+  DialogTitle,
+  DialogTrigger,
+  IconButton,
+  Text,
+} from "@ndla/primitives";
 import { IArticle, IUpdatedArticle } from "@ndla/types-backend/draft-api";
 import { Node } from "@ndla/types-taxonomy";
-import { Text } from "@ndla/typography";
 import QualityEvaluationForm from "./QualityEvaluationForm";
 import { ArticleFormType } from "../../containers/FormikForm/articleFormHooks";
-
-const StyledModalBody = styled(ModalBody)`
-  display: flex;
-  flex-direction: column;
-  gap: ${spacing.nsmall};
-  padding-top: 0px;
-`;
+import { DialogCloseButton } from "../DialogCloseButton";
 
 interface Props {
   articleType?: string;
@@ -41,7 +41,6 @@ const QualityEvaluationModal = ({
   articleType,
   article,
   taxonomy,
-  iconButtonColor = "light",
   revisionMetaField,
   revisionMetaHelpers,
   updateNotes,
@@ -54,41 +53,36 @@ const QualityEvaluationModal = ({
   const title = taxonomy?.length ? t("qualityEvaluationForm.edit") : t("qualityEvaluationForm.disabled");
 
   return (
-    <Modal open={open} onOpenChange={setOpen}>
-      <ModalTrigger>
-        <IconButtonV2
-          title={title}
-          aria-label={title}
-          variant="solid"
-          colorTheme={iconButtonColor}
-          size="xsmall"
-          disabled={!taxonomy?.length}
-        >
+    <DialogRoot open={open} onOpenChange={(details) => setOpen(details.open)}>
+      <DialogTrigger asChild>
+        <IconButton title={title} aria-label={title} size="small" disabled={!taxonomy?.length}>
           <Pencil />
-        </IconButtonV2>
-      </ModalTrigger>
-      <ModalContent>
-        <ModalHeader>
-          <ModalTitle>{t("qualityEvaluationForm.modalTitle")}</ModalTitle>
-          <ModalCloseButton />
-        </ModalHeader>
-        <StyledModalBody>
-          <Text margin="none" textStyle="meta-text-small">
-            {t("qualityEvaluationForm.description", { resource: resourceTranslation })}
-          </Text>
-          {taxonomy && (
-            <QualityEvaluationForm
-              setOpen={setOpen}
-              taxonomy={taxonomy}
-              revisionMetaField={revisionMetaField}
-              revisionMetaHelpers={revisionMetaHelpers}
-              updateNotes={updateNotes}
-              article={article}
-            />
-          )}
-        </StyledModalBody>
-      </ModalContent>
-    </Modal>
+        </IconButton>
+      </DialogTrigger>
+      <Portal>
+        <DialogContent>
+          <DialogHeader>
+            <DialogTitle>{t("qualityEvaluationForm.modalTitle")}</DialogTitle>
+            <DialogCloseButton />
+          </DialogHeader>
+          <DialogBody>
+            <Text textStyle="label.small">
+              {t("qualityEvaluationForm.description", { resource: resourceTranslation })}
+            </Text>
+            {taxonomy && (
+              <QualityEvaluationForm
+                setOpen={setOpen}
+                taxonomy={taxonomy}
+                revisionMetaField={revisionMetaField}
+                revisionMetaHelpers={revisionMetaHelpers}
+                updateNotes={updateNotes}
+                article={article}
+              />
+            )}
+          </DialogBody>
+        </DialogContent>
+      </Portal>
+    </DialogRoot>
   );
 };
 
diff --git a/src/containers/StructurePage/resourceComponents/SubjectBanner.tsx b/src/containers/StructurePage/resourceComponents/SubjectBanner.tsx
index 127a381ee8..1122814296 100644
--- a/src/containers/StructurePage/resourceComponents/SubjectBanner.tsx
+++ b/src/containers/StructurePage/resourceComponents/SubjectBanner.tsx
@@ -59,7 +59,7 @@ const SubjectBanner = ({ subjectNode, showQuality, users }: Props) => {
           {showQuality && (
             <>
               <AverageQualityEvaluation gradeAverage={subjectNode.gradeAverage} nodeType="SUBJECT" />
-              <QualityEvaluation articleType="subject" taxonomy={[subjectNode]} iconButtonColor="primary" />
+              <QualityEvaluation articleType="subject" taxonomy={[subjectNode]} />
             </>
           )}
         </FlexContentWrapper>
diff --git a/src/containers/StructurePage/resourceComponents/TopicResourceBanner.tsx b/src/containers/StructurePage/resourceComponents/TopicResourceBanner.tsx
index 27f3d76c46..f7967a4cdf 100644
--- a/src/containers/StructurePage/resourceComponents/TopicResourceBanner.tsx
+++ b/src/containers/StructurePage/resourceComponents/TopicResourceBanner.tsx
@@ -100,7 +100,7 @@ const TopicResourceBanner = ({
           {showQuality && (
             <>
               <AverageQualityEvaluation gradeAverage={currentNode.gradeAverage} nodeType="TOPIC" />
-              <QualityEvaluation articleType="topic-article" taxonomy={[currentNode]} iconButtonColor="primary" />
+              <QualityEvaluation articleType="topic-article" taxonomy={[currentNode]} />
             </>
           )}
           <Text textStyle="label.small">{`${workflowCount}/${elementCount} ${t(