diff --git a/e2e/specs/versions.spec.ts b/e2e/specs/versions.spec.ts index acb1336731..8a57fb116c 100644 --- a/e2e/specs/versions.spec.ts +++ b/e2e/specs/versions.spec.ts @@ -42,9 +42,9 @@ test("Open previews", async ({ page }) => { await page.getByRole("heading", { name: "Versjonslogg og merknader" }).click(); await page.getByTestId("previewVersion").last().click(); await page.getByRole("article").first().waitFor(); - await expect(page.getByTestId("close-modal-button")).toBeVisible(); + await expect(page.getByRole("heading", { name: "Sammenlign med publisert" })).toBeVisible(); expect(await page.getByRole("article").count()).toBe(2); - await page.getByTestId("close-modal-button").click(); + await page.getByRole("button", { name: "Lukk" }).click(); await expect(page.getByTestId("preview-draft-modal")).toBeVisible({ visible: false }); }); diff --git a/src/components/HeaderWithLanguage/HeaderActions.tsx b/src/components/HeaderWithLanguage/HeaderActions.tsx index 6eade04717..aaa816459c 100644 --- a/src/components/HeaderWithLanguage/HeaderActions.tsx +++ b/src/components/HeaderWithLanguage/HeaderActions.tsx @@ -9,10 +9,10 @@ import { useFormikContext } from "formik"; import { memo, useCallback, useMemo } from "react"; import { useTranslation } from "react-i18next"; -import { ButtonV2 } from "@ndla/button"; import { FileCompare } from "@ndla/icons/action"; import { Launch } from "@ndla/icons/common"; import { CheckboxCircleFill, Eye } from "@ndla/icons/editor"; +import { Button } from "@ndla/primitives"; import { SafeLinkButton } from "@ndla/safelink"; import { styled } from "@ndla/styled-system/jsx"; import { IConcept } from "@ndla/types-backend/concept-api"; @@ -27,7 +27,7 @@ import { createEditUrl, hasArticleFieldsChanged, toMapping, translatableTypes } import { PUBLISHED } from "../../constants"; import { toCompareLanguage } from "../../util/routeHelpers"; import { useIsTranslatableToNN } from "../NynorskTranslateProvider"; -import PreviewDraftLightboxV2 from "../PreviewDraft/PreviewDraftLightboxV2"; +import { PreviewResourceDialog } from "../PreviewDraft/PreviewResourceDialog"; interface PreviewLightBoxProps { article?: IArticle; @@ -60,14 +60,14 @@ const PreviewLightBox = memo(({ type, currentLanguage, article, concept }: Previ const { t } = useTranslation(); if ((type === "concept" || type === "gloss") && concept) { return ( - + } /> ); @@ -193,14 +193,14 @@ const HeaderActions = ({ {lastPublishedVersion && ( <> - {t("form.previewVersion")} - + } /> diff --git a/src/components/PreviewDraft/PreviewDraftLightboxV2.tsx b/src/components/PreviewDraft/PreviewDraftLightboxV2.tsx deleted file mode 100644 index df3353374f..0000000000 --- a/src/components/PreviewDraft/PreviewDraftLightboxV2.tsx +++ /dev/null @@ -1,45 +0,0 @@ -/** - * Copyright (c) 2023-present, NDLA. - * - * This source code is licensed under the GPLv3 license found in the - * LICENSE file in the root directory of this source tree. - * - */ - -import { ElementType, ReactElement } from "react"; -import { ModalCloseButton, ModalHeader, ModalSizeType, Modal, ModalTrigger, ModalContent } from "@ndla/modal"; -import { ConceptPreviewProps, PreviewConcept } from "./PreviewConcept"; -import { CompareConceptPreviewProps, PreviewConceptCompare } from "./PreviewConceptCompare"; -import { MarkupPreviewProps, PreviewMarkup } from "./PreviewMarkup"; -import { PreviewVersion, VersionPreviewProps } from "./PreviewVersion"; - -type PreviewProps = MarkupPreviewProps | VersionPreviewProps | CompareConceptPreviewProps | ConceptPreviewProps; - -type Props = PreviewProps & { - activateButton: ReactElement; -}; - -const components: Record = { - markup: PreviewMarkup, - version: PreviewVersion, - conceptCompare: PreviewConceptCompare, - concept: PreviewConcept, -}; - -const PreviewDraftLightboxV2 = (props: Props) => { - const Component = components[props.type]; - const size: ModalSizeType = props.type === "version" ? "full" : { width: "large", height: "full" }; - return ( - - {props.activateButton} - - - - - - - - ); -}; - -export default PreviewDraftLightboxV2; diff --git a/src/components/PreviewDraft/PreviewResourceDialog.tsx b/src/components/PreviewDraft/PreviewResourceDialog.tsx new file mode 100644 index 0000000000..31f9e68055 --- /dev/null +++ b/src/components/PreviewDraft/PreviewResourceDialog.tsx @@ -0,0 +1,46 @@ +/** + * Copyright (c) 2023-present, NDLA. + * + * This source code is licensed under the GPLv3 license found in the + * LICENSE file in the root directory of this source tree. + * + */ + +import { ElementType, ReactElement } from "react"; +import { useTranslation } from "react-i18next"; +import { DialogContent, DialogHeader, DialogRoot, DialogTitle, DialogTrigger } from "@ndla/primitives"; +import { ConceptPreviewProps, PreviewConcept } from "./PreviewConcept"; +import { CompareConceptPreviewProps, PreviewConceptCompare } from "./PreviewConceptCompare"; +import { MarkupPreviewProps, PreviewMarkup } from "./PreviewMarkup"; +import { PreviewVersion, VersionPreviewProps } from "./PreviewVersion"; +import { DialogCloseButton } from "../DialogCloseButton"; + +type PreviewProps = MarkupPreviewProps | VersionPreviewProps | CompareConceptPreviewProps | ConceptPreviewProps; + +type Props = PreviewProps & { + activateButton: ReactElement; +}; + +const types: Record = { + markup: { title: "editMarkup.previewDialogTitle", component: PreviewMarkup }, + version: { title: "form.previewVersion", component: PreviewVersion }, + conceptCompare: { title: "conceptCompare.title", component: PreviewConceptCompare }, + concept: { title: "conceptPreview.title", component: PreviewConcept }, +}; + +export const PreviewResourceDialog = (props: Props) => { + const { t } = useTranslation(); + const { component: Component, title } = types[props.type]; + return ( + + {props.activateButton} + + + {t(title)} + + + + + + ); +}; diff --git a/src/components/SlateEditor/EditorFooter.tsx b/src/components/SlateEditor/EditorFooter.tsx index 7f7e66c208..47bbeea218 100644 --- a/src/components/SlateEditor/EditorFooter.tsx +++ b/src/components/SlateEditor/EditorFooter.tsx @@ -26,7 +26,7 @@ import { ConceptStatusStateMachineType, DraftStatusStateMachineType } from "../. import { toPreviewDraft } from "../../util/routeHelpers"; import Footer from "../Footer/Footer"; import { createEditUrl, TranslatableType, translatableTypes } from "../HeaderWithLanguage/util"; -import PreviewDraftLightboxV2 from "../PreviewDraft/PreviewDraftLightboxV2"; +import { PreviewResourceDialog } from "../PreviewDraft/PreviewResourceDialog"; import SaveMultiButton from "../SaveMultiButton"; interface Props { @@ -246,7 +246,7 @@ function EditorFooter({ <>
{values.id && isConcept && ( - {t("form.preview.button")}} diff --git a/src/containers/EditMarkupPage/EditMarkupPage.tsx b/src/containers/EditMarkupPage/EditMarkupPage.tsx index 5a9e8400f2..6079127217 100644 --- a/src/containers/EditMarkupPage/EditMarkupPage.tsx +++ b/src/containers/EditMarkupPage/EditMarkupPage.tsx @@ -10,7 +10,6 @@ import { lazy, Suspense, useState, useEffect } from "react"; import { useTranslation } from "react-i18next"; import { Link, useLocation, useParams } from "react-router-dom"; import styled from "@emotion/styled"; -import { ButtonV2 } from "@ndla/button"; import { spacing, colors } from "@ndla/core"; import { InformationLine } from "@ndla/icons/common"; import { @@ -22,6 +21,7 @@ import { DialogTrigger, IconButton, Text, + Button, } from "@ndla/primitives"; import { IArticle } from "@ndla/types-backend/draft-api"; import { Row } from "../../components"; @@ -29,7 +29,7 @@ import { DialogCloseButton } from "../../components/DialogCloseButton"; import FieldHeader from "../../components/Field/FieldHeader"; import HeaderSupportedLanguages from "../../components/HeaderWithLanguage/HeaderSupportedLanguages"; import { OldSpinner } from "../../components/OldSpinner"; -import PreviewDraftLightboxV2 from "../../components/PreviewDraft/PreviewDraftLightboxV2"; +import { PreviewResourceDialog } from "../../components/PreviewDraft/PreviewResourceDialog"; import SaveButton from "../../components/SaveButton"; import { DRAFT_HTML_SCOPE } from "../../constants"; import { fetchDraft, updateDraft } from "../../modules/draft/draftApi"; @@ -231,11 +231,11 @@ const EditMarkupPage = () => { /> {!!draft && ( - {t("form.preview.button")}} + activateButton={} /> )} diff --git a/src/containers/FormikForm/VersionActionButtons.tsx b/src/containers/FormikForm/VersionActionButtons.tsx index f30301f603..0d11323be5 100644 --- a/src/containers/FormikForm/VersionActionButtons.tsx +++ b/src/containers/FormikForm/VersionActionButtons.tsx @@ -11,7 +11,7 @@ import { Eye, Restore } from "@ndla/icons/editor"; import { IconButton } from "@ndla/primitives"; import { IArticle } from "@ndla/types-backend/draft-api"; -import PreviewDraftLightboxV2 from "../../components/PreviewDraft/PreviewDraftLightboxV2"; +import { PreviewResourceDialog } from "../../components/PreviewDraft/PreviewResourceDialog"; interface Props { showFromArticleApi: boolean; @@ -36,7 +36,7 @@ const VersionActionButtons = ({ if (current && !showFromArticleApi) return null; return ( <> -