diff --git a/package.json b/package.json index cc8576cc66..ece07b5fe7 100644 --- a/package.json +++ b/package.json @@ -44,9 +44,9 @@ "@graphql-codegen/typescript-operations": "^4.2.0", "@graphql-eslint/eslint-plugin": "^3.20.1", "@ndla/scripts": "^2.1.2", - "@ndla/types-backend": "^0.2.72", - "@ndla/types-embed": "^4.1.6", - "@ndla/types-taxonomy": "^1.0.22", + "@ndla/types-backend": "^0.2.84", + "@ndla/types-embed": "^4.1.7", + "@ndla/types-taxonomy": "^1.0.25", "@playwright/test": "^1.43.1", "@testing-library/jest-dom": "^6.4.2", "@testing-library/react": "^15.0.2", @@ -88,24 +88,24 @@ "@fontsource/source-sans-pro": "^4.5.9", "@fontsource/source-serif-pro": "^4.5.7", "@lexical/react": "^0.12.4", - "@ndla/article-converter": "^8.0.0", - "@ndla/button": "^13.0.0", - "@ndla/carousel": "^4.0.44", - "@ndla/core": "^5.0.0", - "@ndla/dropdown-menu": "^1.0.37", + "@ndla/article-converter": "^8.0.4", + "@ndla/button": "^13.0.3", + "@ndla/carousel": "^4.0.46", + "@ndla/core": "^5.0.1", + "@ndla/dropdown-menu": "^1.0.38", "@ndla/error-reporter": "^2.0.1", - "@ndla/forms": "^8.0.0", - "@ndla/icons": "^6.1.4", + "@ndla/forms": "^8.0.3", + "@ndla/icons": "^6.1.6", "@ndla/licenses": "^7.2.6", - "@ndla/modal": "^6.0.0", - "@ndla/pager": "^3.0.9", - "@ndla/safelink": "^5.1.3", - "@ndla/select": "^4.0.0", - "@ndla/switch": "^1.1.43", - "@ndla/tabs": "^4.0.6", + "@ndla/modal": "^6.0.2", + "@ndla/pager": "^3.0.12", + "@ndla/safelink": "^5.1.6", + "@ndla/select": "^4.0.2", + "@ndla/switch": "^1.1.44", + "@ndla/tabs": "^4.0.7", "@ndla/tracker": "^5.0.6", - "@ndla/typography": "^0.4.20", - "@ndla/ui": "^53.0.0", + "@ndla/typography": "^0.4.22", + "@ndla/ui": "^54.0.2", "@ndla/util": "^4.0.4", "cross-env": "^7.0.3", "date-fns": "^2.30.0", diff --git a/public/static/h5p-custom-css.css b/public/static/h5p-custom-css.css index b7790132a0..c52d5f9c57 100644 --- a/public/static/h5p-custom-css.css +++ b/public/static/h5p-custom-css.css @@ -23,3 +23,16 @@ .h5p-dialogcards.h5p-text-scaling .h5p-dialogcards-card-text-wrapper { height: auto; } + +.h5p-content { + border-width: 2px 2px 0 2px; + border-radius: 4px; + border-color: #94949E; +} + +.h5p-content .h5p-actions { + border-bottom-color: #94949E; + border-bottom-width: 2px; + border-bottom-left-radius: 4px; + border-bottom-right-radius: 4px; +} diff --git a/src/App.tsx b/src/App.tsx index 609bc2a386..f9f4246dea 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -54,6 +54,7 @@ import VideoPage from "./containers/ResourceEmbed/VideoPage"; import ResourcePage from "./containers/ResourcePage/ResourcePage"; import SearchPage from "./containers/SearchPage/SearchPage"; import SharedFolderPage from "./containers/SharedFolderPage/SharedFolderPage"; +import SharedFolderPageV2 from "./containers/SharedFolderPage/SharedFolderPageV2"; import SubjectRouting from "./containers/SubjectPage/SubjectRouting"; import WelcomePage from "./containers/WelcomePage/WelcomePage"; import handleError from "./util/handleError"; @@ -196,11 +197,18 @@ const AppRoutes = ({ base }: AppProps) => { } /> - - } /> - } /> - } /> - + {config.folderRedesign ? ( + + } /> + } /> + + ) : ( + + } /> + } /> + } /> + + )} } /> } /> } /> diff --git a/src/client.tsx b/src/client.tsx index fc141a6801..2b2c3a1dfa 100644 --- a/src/client.tsx +++ b/src/client.tsx @@ -34,6 +34,7 @@ import { ErrorReporter } from "@ndla/error-reporter"; import { i18nInstance } from "@ndla/ui"; import { getCookie, setCookie } from "@ndla/util"; import App from "./App"; +import ResponseContext from "./components/ResponseContext"; import { VersionHashProvider } from "./components/VersionHashContext"; import { EmotionCacheKey, STORED_LANGUAGE_COOKIE_KEY } from "./constants"; import { getLocaleInfoFromPath, initializeI18n, isValidLocale, supportedLanguages } from "./i18n"; @@ -46,7 +47,7 @@ declare global { } const { - DATA: { config, serverPath, serverQuery }, + DATA: { config, serverPath, serverQuery, serverResponse }, } = window; const { basepath, abbreviation } = getLocaleInfoFromPath(serverPath ?? ""); @@ -192,11 +193,13 @@ renderOrHydrate( - - - - - + + + + + + + , diff --git a/src/components/Learningpath/LearningpathMenu.tsx b/src/components/Learningpath/LearningpathMenu.tsx index 0bbaf6aa0f..5206f24a6e 100644 --- a/src/components/Learningpath/LearningpathMenu.tsx +++ b/src/components/Learningpath/LearningpathMenu.tsx @@ -195,7 +195,7 @@ const LearningpathMenu = ({ resource, learningpath, currentStep }: Props) => { {t("learningPath.youAreInALearningPath")} - + {learningpath.title} {!!resource?.path && config.feideEnabled && ( @@ -242,7 +242,6 @@ const LearningpathMenu = ({ resource, learningpath, currentStep }: Props) => { diff --git a/src/components/MyNdla/CopyFolder.tsx b/src/components/MyNdla/CopyFolder.tsx index b37eb76063..642c4d39aa 100644 --- a/src/components/MyNdla/CopyFolder.tsx +++ b/src/components/MyNdla/CopyFolder.tsx @@ -10,11 +10,13 @@ import { useContext, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; import { ButtonV2 as Button, LoadingButton } from "@ndla/button"; import { InformationOutline, WarningOutline } from "@ndla/icons/common"; +import { ModalContent, ModalHeader, ModalTitle, ModalCloseButton, ModalBody } from "@ndla/modal"; import { Folder, MessageBox, useSnack } from "@ndla/ui"; import { AddResourceContainer, ButtonRow } from "./AddResourceToFolder"; import FolderSelect from "./FolderSelect"; import { useCopySharedFolderMutation, useFolders } from "../../containers/MyNdla/folderMutations"; import { GQLFolder } from "../../graphqlTypes"; +import { routes } from "../../routeHelpers"; import { getTotalCountForFolder } from "../../util/folderHelpers"; import { AuthContext } from "../AuthenticationContext"; @@ -48,69 +50,77 @@ const CopyFolder = ({ folder, onClose }: Props) => { }; return ( - - - {examLock ? ( - - - {t("myNdla.examLockInfo")} - - ) : ( - <> - + + {t("myNdla.resource.copyToMyNdla")} + + + + + - - - {t("myNdla.copyFolderDisclaimer")} - - {copySharedFolderMutation.error && ( - - - {t("errorMessage.description")} + {examLock ? ( + + + {t("myNdla.examLockInfo")} + ) : ( + <> + + + + {t("myNdla.copyFolderDisclaimer")} + + {copySharedFolderMutation.error && ( + + + {t("errorMessage.description")} + + )} + )} - - )} - - - { - e.preventDefault(); - }} - onMouseUp={(e) => { - e.preventDefault(); - }} - onClick={onSave} - > - {t("myNdla.resource.save")} - - - + + + { + e.preventDefault(); + }} + onMouseUp={(e) => { + e.preventDefault(); + }} + onClick={onSave} + > + {t("myNdla.resource.save")} + + + + + ); }; diff --git a/src/components/MyNdla/CopyFolderModal.tsx b/src/components/MyNdla/CopyFolderModal.tsx index f7fb4ff708..d9f747e3b9 100644 --- a/src/components/MyNdla/CopyFolderModal.tsx +++ b/src/components/MyNdla/CopyFolderModal.tsx @@ -8,7 +8,7 @@ import { ReactNode, useCallback, useContext, useMemo, useState } from "react"; import { useTranslation } from "react-i18next"; -import { ModalBody, ModalCloseButton, ModalHeader, ModalTitle, Modal, ModalTrigger, ModalContent } from "@ndla/modal"; +import { Modal, ModalTrigger } from "@ndla/modal"; import { Folder } from "@ndla/ui"; import CopyFolder from "./CopyFolder"; import LoginModalContent from "./LoginModalContent"; @@ -34,15 +34,7 @@ const CopyFolderModal = ({ folder, children }: Props) => { {children} {authenticated ? ( - - - {t("myNdla.resource.copyToMyNdla")} - - - - - - + ) : ( (undefined); +export default ResponseContext; diff --git a/src/containers/AllSubjectsPage/SubjectLink.tsx b/src/containers/AllSubjectsPage/SubjectLink.tsx index 2cf7390adf..afbe5ee290 100644 --- a/src/containers/AllSubjectsPage/SubjectLink.tsx +++ b/src/containers/AllSubjectsPage/SubjectLink.tsx @@ -97,8 +97,8 @@ const SubjectLink = ({ subject, favorites, className }: Props) => { {authenticated && !isFavorite ? ( * { +.emotion-32>* { max-width: 1100px; } -.emotion-32 { +.emotion-34 { font-weight: 700; font-family: 'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif; font-size: 22px; @@ -320,157 +320,161 @@ exports[`ErrorPage renderers correctly 1`] = ` margin: 24px 0 24px 0; } -.emotion-32:where([lang='zh'], .emotion-32[lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34:where([lang='zh'], .emotion-34[lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(22px * 1.11); font-size: calc(1.2222222222222223rem * 1.11); } -.emotion-32[data-margin="none"] { +.emotion-34[data-serif="true"] { + font-family: 'Source Serif Pro',Times,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',serif; +} + +.emotion-34[data-margin="none"] { margin: 0px; } -.emotion-32[data-margin="xlarge"] { +.emotion-34[data-margin="xlarge"] { margin: 24px 0 12px 0; } @media (min-width: 37.5625em) { - .emotion-32[data-margin="xlarge"] { + .emotion-34[data-margin="xlarge"] { margin-bottom: 24px; } } -.emotion-32[data-margin="large"] { +.emotion-34[data-margin="large"] { margin-top: 48px; margin-bottom: 12px; } -.emotion-32[data-margin="small"] { +.emotion-34[data-margin="small"] { margin-top: 24px; margin-bottom: 12px; } -.emotion-32[data-style="h1"] { +.emotion-34[data-style="h1"] { font-family: 'Source Serif Pro',Times,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',serif; font-size: 30px; font-size: 1.6666666666666667rem; line-height: 36px; } -.emotion-32[data-style="h1"]:where([lang='zh'], .emotion-32[data-style="h1"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34[data-style="h1"]:where([lang='zh'], .emotion-34[data-style="h1"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(30px * 1.11); font-size: calc(1.6666666666666667rem * 1.11); } @media (min-width: 37.5625em) { - .emotion-32[data-style="h1"] { + .emotion-34[data-style="h1"] { font-size: 48px; font-size: 2.6666666666666665rem; line-height: 60px; margin-bottom: 24px; } - .emotion-32[data-style="h1"]:where([lang='zh'], .emotion-32[data-style="h1"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { + .emotion-34[data-style="h1"]:where([lang='zh'], .emotion-34[data-style="h1"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(48px * 1.11); font-size: calc(2.6666666666666665rem * 1.11); } } -.emotion-32[data-style="h1-resource"] { +.emotion-34[data-style="h1-resource"] { font-size: 30px; font-size: 1.6666666666666667rem; line-height: 36px; } -.emotion-32[data-style="h1-resource"]:where([lang='zh'], .emotion-32[data-style="h1-resource"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34[data-style="h1-resource"]:where([lang='zh'], .emotion-34[data-style="h1-resource"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(30px * 1.11); font-size: calc(1.6666666666666667rem * 1.11); } @media (min-width: 37.5625em) { - .emotion-32[data-style="h1-resource"] { + .emotion-34[data-style="h1-resource"] { font-size: 38px; font-size: 2.111111111111111rem; line-height: 48px; } - .emotion-32[data-style="h1-resource"]:where([lang='zh'], .emotion-32[data-style="h1-resource"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { + .emotion-34[data-style="h1-resource"]:where([lang='zh'], .emotion-34[data-style="h1-resource"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(38px * 1.11); font-size: calc(2.111111111111111rem * 1.11); } } -.emotion-32[data-style="h2"] { +.emotion-34[data-style="h2"] { font-size: 28px; font-size: 1.5555555555555556rem; line-height: 36px; } -.emotion-32[data-style="h2"]:where([lang='zh'], .emotion-32[data-style="h2"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34[data-style="h2"]:where([lang='zh'], .emotion-34[data-style="h2"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(28px * 1.11); font-size: calc(1.5555555555555556rem * 1.11); } @media (min-width: 37.5625em) { - .emotion-32[data-style="h2"] { + .emotion-34[data-style="h2"] { font-size: 30px; font-size: 1.6666666666666667rem; line-height: 38px; } - .emotion-32[data-style="h2"]:where([lang='zh'], .emotion-32[data-style="h2"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { + .emotion-34[data-style="h2"]:where([lang='zh'], .emotion-34[data-style="h2"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(30px * 1.11); font-size: calc(1.6666666666666667rem * 1.11); } } -.emotion-32[data-style="h3"] { +.emotion-34[data-style="h3"] { font-size: 26px; font-size: 1.4444444444444444rem; line-height: 35px; } -.emotion-32[data-style="h3"]:where([lang='zh'], .emotion-32[data-style="h3"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34[data-style="h3"]:where([lang='zh'], .emotion-34[data-style="h3"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(26px * 1.11); font-size: calc(1.4444444444444444rem * 1.11); } @media (min-width: 37.5625em) { - .emotion-32[data-style="h3"] { + .emotion-34[data-style="h3"] { font-size: 26px; font-size: 1.4444444444444444rem; line-height: 36px; } - .emotion-32[data-style="h3"]:where([lang='zh'], .emotion-32[data-style="h3"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { + .emotion-34[data-style="h3"]:where([lang='zh'], .emotion-34[data-style="h3"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(26px * 1.11); font-size: calc(1.4444444444444444rem * 1.11); } } -.emotion-32[data-style="h4"] { +.emotion-34[data-style="h4"] { font-size: 22px; font-size: 1.2222222222222223rem; line-height: 30px; } -.emotion-32[data-style="h4"]:where([lang='zh'], .emotion-32[data-style="h4"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34[data-style="h4"]:where([lang='zh'], .emotion-34[data-style="h4"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(22px * 1.11); font-size: calc(1.2222222222222223rem * 1.11); } -.emotion-32[data-style="list-title"] { +.emotion-34[data-style="list-title"] { font-size: 18px; font-size: 1rem; line-height: 24px; text-transform: uppercase; } -.emotion-32[data-style="list-title"]:where([lang='zh'], .emotion-32[data-style="list-title"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-34[data-style="list-title"]:where([lang='zh'], .emotion-34[data-style="list-title"][lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(18px * 1.11); font-size: calc(1rem * 1.11); } -.emotion-33 { +.emotion-35 { width: 100%; display: -webkit-box; display: -webkit-flex; @@ -483,7 +487,7 @@ exports[`ErrorPage renderers correctly 1`] = ` } @media (min-width: 48em) { - .emotion-33 { + .emotion-35 { display: grid; grid-template-columns: max-content max-content min-content; -webkit-box-pack: justify; @@ -493,7 +497,7 @@ exports[`ErrorPage renderers correctly 1`] = ` } } -.emotion-35 { +.emotion-37 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -504,7 +508,7 @@ exports[`ErrorPage renderers correctly 1`] = ` gap: 6px; } -.emotion-38 { +.emotion-40 { list-style: none; margin: 0; padding: 0; @@ -518,7 +522,7 @@ exports[`ErrorPage renderers correctly 1`] = ` gap: 6px; } -.emotion-40 { +.emotion-42 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -531,12 +535,12 @@ exports[`ErrorPage renderers correctly 1`] = ` padding: 0px; } -.emotion-40 svg { +.emotion-42 svg { width: 20px; height: 20px; } -.emotion-44 { +.emotion-46 { color: white; box-shadow: none; -webkit-text-decoration: underline; @@ -544,14 +548,14 @@ exports[`ErrorPage renderers correctly 1`] = ` text-underline-offset: 5px; } -.emotion-44:hover, -.emotion-44:focus, -.emotion-44:active { +.emotion-46:hover, +.emotion-46:focus, +.emotion-46:active { -webkit-text-decoration: none; text-decoration: none; } -.emotion-71 { +.emotion-73 { display: -webkit-box; display: -webkit-flex; display: -ms-flexbox; @@ -563,19 +567,19 @@ exports[`ErrorPage renderers correctly 1`] = ` justify-self: center; } -.emotion-117 { +.emotion-119 { grid-column: span 2; } @media (min-width: 48em) { - .emotion-117 { + .emotion-119 { -webkit-align-self: flex-end; -ms-flex-item-align: flex-end; align-self: flex-end; } } -.emotion-119 { +.emotion-121 { font-family: 'Source Sans Pro',Helvetica,Arial,STKaiti,'华文楷体',KaiTi,SimKai,'楷体',KaiU,DFKai-SB,'標楷體',SongTi,'宋体',sans-serif; font-weight: 400; font-size: 18px; @@ -584,12 +588,12 @@ exports[`ErrorPage renderers correctly 1`] = ` margin: 0px; } -.emotion-119:where([lang='zh'], .emotion-119[lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { +.emotion-121:where([lang='zh'], .emotion-121[lang='zh-Hans'], [lang='zh-Hant']):not([data-pinyin]) { font-size: calc(18px * 1.11); font-size: calc(1rem * 1.11); } -.emotion-121 { +.emotion-123 { z-index: 10; } @@ -674,7 +678,7 @@ exports[`ErrorPage renderers correctly 1`] = ` Kom igang: