diff --git a/package.json b/package.json index 6c914fbe4..39439aecf 100644 --- 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 index 97e2bf5eb..303f91d5c 100644 --- 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 {} - 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 ( - - ( - - {placeholder.children} - - )} - /> - + + {({ field, meta, helpers }) => ( + + + {title} + + + {description} + + ( + + {placeholder.children} + + )} + /> + + {meta.error} + + )} + ); }; diff --git a/src/components/SlateEditor/plugins/uuDisclaimer/DisclaimerForm.tsx b/src/components/SlateEditor/plugins/uuDisclaimer/DisclaimerForm.tsx index 9d69f28e5..8c175b161 100644 --- 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 }) => ( - - {({ field, meta, helpers }) => ( - - - {t("form.disclaimer.editorHeader")} - - - {t("form.disclaimer.description")} - - {meta.error} - - )} - + - - - + setShowTaxWarning(false)} + severity={"danger"} + > + + + + + + )} ); }; diff --git a/src/containers/ArticlePage/LearningResourcePage/components/LearningResourcePanels.tsx b/src/containers/ArticlePage/LearningResourcePage/components/LearningResourcePanels.tsx index 2b01ba140..9ccf28c8d 100644 --- 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; 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("revisionMeta"); @@ -179,6 +182,17 @@ const LearningResourcePanels = ({ > + + + {config.ndlaEnvironment === "test" && ( ({ ...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 index 04942fc15..99bcff273 100644 --- 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 index 74411c828..b3678683d 100644 --- 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 index f3d059dc8..83e1c9d37 100644 --- 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 index c3705244b..5229b37b8 100644 --- 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 index e8548900e..2874417db 100644 --- 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"