Add disclaimer accordion in learning resource form

NDLANO · Jan 3, 2025 · 4e551b7 · 4e551b7
1 parent 8ecd046
commit 4e551b7
Show file tree

Hide file tree

Showing 11 changed files with 135 additions and 87 deletions.
diff --git a/package.json b/package.json
@@ -34,7 +34,7 @@
     "@babel/core": "^7.26.0",
     "@ndla/preset-panda": "^0.0.48",
     "@ndla/scripts": "^2.1.3",
-    "@ndla/types-backend": "^1.0.1",
+    "@ndla/types-backend": "^1.0.4",
     "@ndla/types-embed": "^5.0.6-alpha.0",
     "@ndla/types-taxonomy": "^1.0.30",
     "@pandacss/dev": "^0.48.0",

diff --git a/src/components/SlateEditor/plugins/uuDisclaimer/DisclaimerField.tsx b/src/components/SlateEditor/plugins/uuDisclaimer/DisclaimerField.tsx
@@ -6,10 +6,13 @@
  *
  */
 
-import { TextArea, Text } from "@ndla/primitives";
+import { TextArea, Text, FieldRoot, FieldHelper, FieldErrorMessage } from "@ndla/primitives";
 import { styled } from "@ndla/styled-system/jsx";
+import { ContentEditableFieldLabel } from "../../../Form/ContentEditableFieldLabel";
+import { FormField } from "../../../FormField";
 import { SlatePlugin } from "../../interfaces";
-import RichTextEditor, { RichTextEditorProps } from "../../RichTextEditor";
+import RichTextEditor from "../../RichTextEditor";
+import { RichTextIndicator } from "../../RichTextIndicator";
 import { breakPlugin } from "../break";
 import { breakRenderer } from "../break/render";
 import { linkPlugin } from "../link";
@@ -27,8 +30,6 @@ import { textTransformPlugin } from "../textTransform";
 import { toolbarPlugin } from "../toolbar";
 import { createToolbarAreaOptions, createToolbarDefaultValues } from "../toolbar/toolbarState";
 
-interface Props extends Omit<RichTextEditorProps, "toolbarOptions" | "toolbarAreaFilters"> {}
-
 const toolbarOptions = createToolbarDefaultValues({
   text: {
     hidden: true,
@@ -84,22 +85,42 @@ const StyledText = styled(Text, {
   },
 });
 
-export const DisclaimerField = ({ ...rest }: Props) => {
+interface Props {
+  submitted: boolean;
+  title: string;
+  description: string;
+}
+
+export const DisclaimerField = ({ submitted, title, description }: Props) => {
   return (
-    <StyledTextArea asChild>
-      <RichTextEditor
-        {...rest}
-        hideBlockPicker
-        plugins={plugins}
-        toolbarOptions={toolbarOptions}
-        toolbarAreaFilters={toolbarAreaFilters}
-        noArticleStyling
-        renderPlaceholder={(placeholder) => (
-          <StyledText {...placeholder.attributes} textStyle="body.article" asChild consumeCss>
-            <span>{placeholder.children}</span>
-          </StyledText>
-        )}
-      />
-    </StyledTextArea>
+    <FormField name="disclaimer">
+      {({ field, meta, helpers }) => (
+        <FieldRoot invalid={!!meta.error}>
+          <ContentEditableFieldLabel>
+            {title}
+            <RichTextIndicator />
+          </ContentEditableFieldLabel>
+          <FieldHelper textStyle="body.medium">{description}</FieldHelper>
+          <StyledTextArea asChild>
+            <RichTextEditor
+              {...field}
+              submitted={submitted}
+              onChange={helpers.setValue}
+              hideBlockPicker
+              plugins={plugins}
+              toolbarOptions={toolbarOptions}
+              toolbarAreaFilters={toolbarAreaFilters}
+              noArticleStyling
+              renderPlaceholder={(placeholder) => (
+                <StyledText {...placeholder.attributes} textStyle="body.article" asChild consumeCss>
+                  <span>{placeholder.children}</span>
+                </StyledText>
+              )}
+            />
+          </StyledTextArea>
+          <FieldErrorMessage>{meta.error}</FieldErrorMessage>
+        </FieldRoot>
+      )}
+    </FormField>
   );
 };
diff --git a/src/components/SlateEditor/plugins/uuDisclaimer/DisclaimerForm.tsx b/src/components/SlateEditor/plugins/uuDisclaimer/DisclaimerForm.tsx
@@ -10,15 +10,12 @@ import { Formik, FormikValues } from "formik";
 import { Dispatch, SetStateAction, useCallback, useMemo } from "react";
 import { useTranslation } from "react-i18next";
 import { Descendant } from "slate";
-import { Button, DialogBody, FieldErrorMessage, FieldHelper, FieldRoot } from "@ndla/primitives";
+import { Button, DialogBody } from "@ndla/primitives";
 import { UuDisclaimerEmbedData } from "@ndla/types-embed";
 import { DisclaimerField } from "./DisclaimerField";
 import { inlineContentToEditorValue, inlineContentToHTML } from "../../../../util/articleContentConverter";
-import { ContentEditableFieldLabel } from "../../../Form/ContentEditableFieldLabel";
-import { FormField } from "../../../FormField";
 import { FormActionsContainer, FormikForm } from "../../../FormikForm";
 import validateFormik, { RulesType } from "../../../formikValidationSchema";
-import { RichTextIndicator } from "../../RichTextIndicator";
 
 interface DisclaimerFormProps {
   initialData?: UuDisclaimerEmbedData;
@@ -71,19 +68,11 @@ const DisclaimerForm = ({ initialData, onOpenChange, onSave }: DisclaimerFormPro
       {({ isSubmitting }) => (
         <DialogBody>
           <FormikForm>
-            <FormField name="disclaimer">
-              {({ field, meta, helpers }) => (
-                <FieldRoot invalid={!!meta.error}>
-                  <ContentEditableFieldLabel>
-                    {t("form.disclaimer.editorHeader")}
-                    <RichTextIndicator />
-                  </ContentEditableFieldLabel>
-                  <FieldHelper textStyle="body.medium">{t("form.disclaimer.description")}</FieldHelper>
-                  <DisclaimerField {...field} submitted={isSubmitting} onChange={helpers.setValue} />
-                  <FieldErrorMessage>{meta.error}</FieldErrorMessage>
-                </FieldRoot>
-              )}
-            </FormField>
+            <DisclaimerField
+              submitted={isSubmitting}
+              title={t("form.disclaimer.editorHeader")}
+              description={t("form.disclaimer.description")}
+            />
             <FormActionsContainer>
               <Button onClick={() => onOpenChange(false)} variant="secondary">
                 {t("form.abort")}

diff --git a/src/containers/ArticlePage/LearningResourcePage/components/LearningResourceForm.tsx b/src/containers/ArticlePage/LearningResourcePage/components/LearningResourceForm.tsx
@@ -121,53 +121,56 @@ const LearningResourceForm = ({
       validate={validate}
       initialStatus={initialWarnings}
     >
-      <Form>
-        <HeaderWithLanguage
-          id={article?.id}
-          language={articleLanguage}
-          article={article}
-          status={article?.status}
-          articleHistory={articleHistory?.data}
-          supportedLanguages={supportedLanguages}
-          taxonomy={contexts}
-          title={article?.title?.title}
-          type="standard"
-          expirationDate={getExpirationDate(article)}
-        />
-        <TaxonomyVersionProvider>
-          <LearningResourcePanels
-            // Formik does not allow for invalid form submissions through their handleSubmit function, so we have to bypass formik
-            handleSubmit={handleSubmit}
-            articleLanguage={articleLanguage}
+      {({ isSubmitting }) => (
+        <Form>
+          <HeaderWithLanguage
+            id={article?.id}
+            language={articleLanguage}
             article={article}
+            status={article?.status}
             articleHistory={articleHistory?.data}
-            taxonomy={articleTaxonomy}
-            updateNotes={updateArticle}
-            contexts={contexts}
+            supportedLanguages={supportedLanguages}
+            taxonomy={contexts}
+            title={article?.title?.title}
+            type="standard"
+            expirationDate={getExpirationDate(article)}
+          />
+          <TaxonomyVersionProvider>
+            <LearningResourcePanels
+              // Formik does not allow for invalid form submissions through their handleSubmit function, so we have to bypass formik
+              handleSubmit={handleSubmit}
+              articleLanguage={articleLanguage}
+              article={article}
+              articleHistory={articleHistory?.data}
+              taxonomy={articleTaxonomy}
+              updateNotes={updateArticle}
+              contexts={contexts}
+              submitted={isSubmitting}
+            />
+          </TaxonomyVersionProvider>
+          <FormFooter
+            articleChanged={!!articleChanged}
+            isNewlyCreated={isNewlyCreated}
+            savedToServer={savedToServer}
+            handleSubmit={handleSubmit}
+            article={article}
           />
-        </TaxonomyVersionProvider>
-        <FormFooter
-          articleChanged={!!articleChanged}
-          isNewlyCreated={isNewlyCreated}
-          savedToServer={savedToServer}
-          handleSubmit={handleSubmit}
-          article={article}
-        />
-        <AlertDialog
-          text={t("errorMessage.missingTax")}
-          title={t("errorMessage.missingTaxTitle")}
-          label={t("errorMessage.missingTaxTitle")}
-          show={showTaxWarning}
-          onCancel={() => setShowTaxWarning(false)}
-          severity={"danger"}
-        >
-          <FormActionsContainer>
-            <Button variant="secondary" onClick={() => setShowTaxWarning(false)}>
-              {t("alertModal.continue")}
-            </Button>
-          </FormActionsContainer>
-        </AlertDialog>
-      </Form>
+          <AlertDialog
+            text={t("errorMessage.missingTax")}
+            title={t("errorMessage.missingTaxTitle")}
+            label={t("errorMessage.missingTaxTitle")}
+            show={showTaxWarning}
+            onCancel={() => setShowTaxWarning(false)}
+            severity={"danger"}
+          >
+            <FormActionsContainer>
+              <Button variant="secondary" onClick={() => setShowTaxWarning(false)}>
+                {t("alertModal.continue")}
+              </Button>
+            </FormActionsContainer>
+          </AlertDialog>
+        </Form>
+      )}
     </Formik>
   );
 };

diff --git a/src/containers/ArticlePage/LearningResourcePage/components/LearningResourcePanels.tsx b/src/containers/ArticlePage/LearningResourcePage/components/LearningResourcePanels.tsx
@@ -19,6 +19,7 @@ import FormAccordion from "../../../../components/Accordion/FormAccordion";
 import FormAccordions from "../../../../components/Accordion/FormAccordions";
 import QualityEvaluation from "../../../../components/QualityEvaluation/QualityEvaluation";
 import { IsNewArticleLanguageProvider } from "../../../../components/SlateEditor/IsNewArticleLanguageProvider";
+import { DisclaimerField } from "../../../../components/SlateEditor/plugins/uuDisclaimer/DisclaimerField";
 import config from "../../../../config";
 import { STORED_HIDE_COMMENTS, TAXONOMY_WRITE_SCOPE } from "../../../../constants";
 import { CopyrightFieldGroup, VersionAndNotesPanel, MetaDataField } from "../../../FormikForm";
@@ -64,6 +65,7 @@ interface Props {
   handleSubmit: HandleSubmitFunc<LearningResourceFormType>;
   articleLanguage: string;
   contexts?: TaxonomyContext[];
+  submitted: boolean;
 }
 
 const LearningResourcePanels = ({
@@ -74,6 +76,7 @@ const LearningResourcePanels = ({
   articleLanguage,
   contexts,
   handleSubmit,
+  submitted,
 }: Props) => {
   const [hideComments, setHideComments] = useLocalStorageBooleanState(STORED_HIDE_COMMENTS);
   const [revisionMetaField, , revisionMetaHelpers] = useField<ArticleFormType["revisionMeta"]>("revisionMeta");
@@ -179,6 +182,17 @@ const LearningResourcePanels = ({
           >
             <GrepCodesField prefixFilter={["KE", "KM", "TT"]} />
           </FormAccordion>
+          <FormAccordion
+            id="learning-resource-disclaimer"
+            title={t("form.name.disclaimer")}
+            hasError={!!errors.disclaimer}
+          >
+            <DisclaimerField
+              submitted={submitted}
+              title={t("form.articleDisclaimer.title")}
+              description={t("form.articleDisclaimer.description")}
+            />
+          </FormAccordion>
           {config.ndlaEnvironment === "test" && (
             <FormAccordion
               id={"learning-resource-related"}

diff --git a/src/containers/ArticlePage/articleTransformers.ts b/src/containers/ArticlePage/articleTransformers.ts
@@ -103,6 +103,7 @@ const draftApiTypeToArticleFormType = (
     responsibleId: article === undefined ? ndlaId : article?.responsible?.responsibleId,
     comments: getCommentsDraftApiToArticleFormType(article, articleType),
     priority: article?.priority ?? "unspecified",
+    disclaimer: inlineContentToEditorValue(article?.disclaimer?.disclaimer ?? "", true),
   };
 };
 
@@ -174,6 +175,7 @@ export const learningResourceFormTypeToDraftApiType = (
     responsibleId: article.responsibleId,
     comments: article.comments?.map((c) => ({ ...c, content: inlineContentToHTML(c.content) })),
     priority: article.priority ?? "unspecified",
+    disclaimer: article.disclaimer ? inlineContentToHTML(article.disclaimer) : undefined,
   };
 };
 

diff --git a/src/containers/FormikForm/articleFormHooks.ts b/src/containers/FormikForm/articleFormHooks.ts
@@ -84,6 +84,7 @@ export interface ArticleFormType {
   priority: string;
   processed: boolean;
   origin?: string;
+  disclaimer?: Descendant[];
 }
 
 export interface LearningResourceFormType extends ArticleFormType {}

diff --git a/src/phrases/phrases-en.ts b/src/phrases/phrases-en.ts
@@ -876,6 +876,7 @@ const phrases = {
       note: "Note",
       files: "File upload",
       code: "Code",
+      disclaimer: "Accessibility",
     },
     previewProductionArticle: {
       button: "Compare current version with last published version",
@@ -1276,6 +1277,11 @@ const phrases = {
       description:
         "Type in codes using the correct format ({{ codes }}) followed by one or more digits. Non existing codes will not be created. Texts will be displayed in norwegian here but will be shown correct in frontend.",
     },
+    articleDisclaimer: {
+      title: "Information about availability for the entire article",
+      description:
+        "Enter what is challenging about the content of the article. You can also add links to alternative content. Templates have been prepared for this. Check these before using the component.",
+    },
     resourceTypes: {
       label: "Resource type and properties",
       placeholder: "Add property",

diff --git a/src/phrases/phrases-nb.ts b/src/phrases/phrases-nb.ts
@@ -877,6 +877,7 @@ const phrases = {
       note: "Notat",
       files: "filopplasting",
       code: "Kode",
+      disclaimer: "Tilgjengelighet",
     },
     previewProductionArticle: {
       button: "Sammenlign gjeldende versjon med sist publiserte versjon",
@@ -1276,6 +1277,11 @@ const phrases = {
       description:
         "Skriv inn koder som starter på riktig format ({{ codes }}) fulgt av ett eller flere siffer. Koder som ikke finnes vil ikke bli opprettet. Tekstene vises på bokmål i ed men korrekt i artikkelvisning.",
     },
+    articleDisclaimer: {
+      title: "Informasjon om tilgjengelighet for hele artikkelen",
+      description:
+        "Skriv inn hva som er utfordrende med innholdet i artikkelen. Du kan også legge til lenker til alternativt innhold. Det er utarbeidet maler for dette. Sjekk disse før du tar i bruk komponenten. ",
+    },
     resourceTypes: {
       label: "Innholdstype og egenskaper",
       placeholder: "Legg til egenskap",

diff --git a/src/phrases/phrases-nn.ts b/src/phrases/phrases-nn.ts
@@ -876,6 +876,7 @@ const phrases = {
       note: "Notat",
       files: "filopplasting",
       code: "Kode",
+      disclaimer: "Tilgjengelighet",
     },
     previewProductionArticle: {
       button: "Samanlikn gjeldande versjon med sist publiserte versjon",
@@ -1276,6 +1277,11 @@ const phrases = {
       description:
         "Skriv inn koder som starter på riktig format ({{ codes }} fulgt av eit eller fleire siffer. Koder som ikkje eksisterer vil ikkje bli oppretta. Tekstene visast på bokmål i ed, men korrekt i artikkelvisning.",
     },
+    articleDisclaimer: {
+      title: "Informasjon om tilgjengelegheit for heile artikkelen",
+      description:
+        "Skriv inn kva som er utfordrande med innhaldet i artikkelen. Du kan òg leggje til lenkjer til alternativt innhald. Det er utarbeidd malar for dette. Sjekk desse før du tek i bruk komponenten.",
+    },
     resourceTypes: {
       label: "Innhaldstype og egenskaper",
       placeholder: "Legg til egenskap",

diff --git a/yarn.lock b/yarn.lock
@@ -1896,10 +1896,10 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@ndla/types-backend@npm:^1.0.1":
-  version: 1.0.1
-  resolution: "@ndla/types-backend@npm:1.0.1"
-  checksum: 10c0/417fd69c5fc526f4b90371b0d00162909c2cec496e4228230990839c10d2c5a0a0caf562cb4e7e44c8bf66b4583b826d87f3aababaed6e3a9e727ba8385f0e1b
+"@ndla/types-backend@npm:^1.0.4":
+  version: 1.0.4
+  resolution: "@ndla/types-backend@npm:1.0.4"
+  checksum: 10c0/4cc319856f87a03b65ff8b4d0955428d55725042f785d0cef14b0b07ba7c47f888528d929ed95f49b1a715cad42355584f2b1e0d29cfa2fe8142de2be4331c56
   languageName: node
   linkType: hard
 
@@ -5811,7 +5811,7 @@ __metadata:
     "@ndla/safelink": "npm:^7.0.66-alpha.0"
     "@ndla/scripts": "npm:^2.1.3"
     "@ndla/styled-system": "npm:^0.0.29"
-    "@ndla/types-backend": "npm:^1.0.1"
+    "@ndla/types-backend": "npm:^1.0.4"
     "@ndla/types-embed": "npm:^5.0.6-alpha.0"
     "@ndla/types-taxonomy": "npm:^1.0.30"
     "@ndla/ui": "npm:^56.0.81-alpha.0"