Skip to content

Commit

Permalink
refactor: primitives for rest of quality evaluation
Browse files Browse the repository at this point in the history
  • Loading branch information
@Jonas-C
Jonas-C committed Nov 4, 2024
1 parent f87502a commit 9957251
Show file tree
Hide file tree
Showing 6 changed files with 79 additions and 96 deletions.
20 changes: 10 additions & 10 deletions src/components/QualityEvaluation/AverageQualityEvaluation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -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 ? (
Expand All @@ -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>
)}
</>
);
Expand Down
37 changes: 17 additions & 20 deletions src/components/QualityEvaluation/QualityEvaluation.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>;
Expand All @@ -42,7 +43,6 @@ const QualityEvaluation = ({
articleType,
article,
taxonomy,
iconButtonColor,
revisionMetaField,
revisionMetaHelpers,
updateNotes,
Expand All @@ -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}
Expand Down
26 changes: 9 additions & 17 deletions src/components/QualityEvaluation/QualityEvaluationForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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",
},
},
});
Expand Down Expand Up @@ -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>
)}
Expand Down
88 changes: 41 additions & 47 deletions src/components/QualityEvaluation/QualityEvaluationModal.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -41,7 +41,6 @@ const QualityEvaluationModal = ({
articleType,
article,
taxonomy,
iconButtonColor = "light",
revisionMetaField,
revisionMetaHelpers,
updateNotes,
Expand All @@ -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>
);
};

Expand Down
2 changes: 1 addition & 1 deletion src/containers/StructurePage/resourceComponents/SubjectBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
Expand Down
2 changes: 1 addition & 1 deletion src/containers/StructurePage/resourceComponents/TopicResourceBanner.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(
Expand Down

0 comments on commit 9957251

Please sign in to comment.