@ndla/ui 56.0.154-alpha.0 → 56.0.155-alpha.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/panda.buildinfo.json +2 -0
- package/dist/styles.css +8 -0
- package/es/Article/Article.mjs +8 -1
- package/es/Article/Article.mjs.map +1 -1
- package/es/Article/ArticleByline.mjs +7 -0
- package/es/Article/ArticleByline.mjs.map +1 -1
- package/es/Article/ArticleFootNotes.mjs +7 -0
- package/es/Article/ArticleFootNotes.mjs.map +1 -1
- package/es/Article/BadgesContainer.mjs +7 -0
- package/es/Article/BadgesContainer.mjs.map +1 -1
- package/es/AudioPlayer/AudioPlayer.mjs +7 -0
- package/es/AudioPlayer/AudioPlayer.mjs.map +1 -1
- package/es/AudioPlayer/Controls.mjs +7 -0
- package/es/AudioPlayer/Controls.mjs.map +1 -1
- package/es/AudioPlayer/SpeechControl.mjs +7 -0
- package/es/AudioPlayer/SpeechControl.mjs.map +1 -1
- package/es/Breadcrumb/HomeBreadcrumb.mjs +7 -0
- package/es/Breadcrumb/HomeBreadcrumb.mjs.map +1 -1
- package/es/CampaignBlock/CampaignBlock.mjs +7 -0
- package/es/CampaignBlock/CampaignBlock.mjs.map +1 -1
- package/es/CodeBlock/CodeBlock.mjs +7 -0
- package/es/CodeBlock/CodeBlock.mjs.map +1 -1
- package/es/Concept/Concept.mjs +7 -0
- package/es/Concept/Concept.mjs.map +1 -1
- package/es/ContactBlock/ContactBlock.mjs +7 -0
- package/es/ContactBlock/ContactBlock.mjs.map +1 -1
- package/es/ContentTypeBadge/ContentTypeBadge.mjs +7 -0
- package/es/ContentTypeBadge/ContentTypeBadge.mjs.map +1 -1
- package/es/CopyParagraphButton/CopyParagraphButton.mjs +7 -0
- package/es/CopyParagraphButton/CopyParagraphButton.mjs.map +1 -1
- package/es/Embed/AudioEmbed.mjs +7 -0
- package/es/Embed/AudioEmbed.mjs.map +1 -1
- package/es/Embed/BrightcoveEmbed.mjs +7 -0
- package/es/Embed/BrightcoveEmbed.mjs.map +1 -1
- package/es/Embed/CodeEmbed.mjs +7 -0
- package/es/Embed/CodeEmbed.mjs.map +1 -1
- package/es/Embed/ConceptEmbed.mjs +7 -0
- package/es/Embed/ConceptEmbed.mjs.map +1 -1
- package/es/Embed/ConceptInlineTriggerButton.mjs +7 -0
- package/es/Embed/ConceptInlineTriggerButton.mjs.map +1 -1
- package/es/Embed/EmbedWrapper.mjs +7 -0
- package/es/Embed/EmbedWrapper.mjs.map +1 -1
- package/es/Embed/ExternalEmbed.mjs +7 -0
- package/es/Embed/ExternalEmbed.mjs.map +1 -1
- package/es/Embed/FootnoteEmbed.mjs +7 -0
- package/es/Embed/FootnoteEmbed.mjs.map +1 -1
- package/es/Embed/GlossEmbed.mjs +7 -0
- package/es/Embed/GlossEmbed.mjs.map +1 -1
- package/es/Embed/H5pEmbed.mjs +7 -0
- package/es/Embed/H5pEmbed.mjs.map +1 -1
- package/es/Embed/IframeEmbed.mjs +7 -0
- package/es/Embed/IframeEmbed.mjs.map +1 -1
- package/es/Embed/ImageEmbed.mjs +13 -6
- package/es/Embed/ImageEmbed.mjs.map +1 -1
- package/es/Embed/InlineTriggerButton.mjs +7 -0
- package/es/Embed/InlineTriggerButton.mjs.map +1 -1
- package/es/Embed/RelatedContentEmbed.mjs +9 -7
- package/es/Embed/RelatedContentEmbed.mjs.map +1 -1
- package/es/Embed/UnknownEmbed.mjs +7 -0
- package/es/Embed/UnknownEmbed.mjs.map +1 -1
- package/es/FactBox/FactBox.mjs +7 -0
- package/es/FactBox/FactBox.mjs.map +1 -1
- package/es/FileList/File.mjs +7 -0
- package/es/FileList/File.mjs.map +1 -1
- package/es/FileList/PdfFile.mjs +7 -0
- package/es/FileList/PdfFile.mjs.map +1 -1
- package/es/Gloss/Gloss.mjs +7 -0
- package/es/Gloss/Gloss.mjs.map +1 -1
- package/es/Gloss/GlossExample.mjs +7 -0
- package/es/Gloss/GlossExample.mjs.map +1 -1
- package/es/KeyFigure/KeyFigure.mjs +7 -0
- package/es/KeyFigure/KeyFigure.mjs.map +1 -1
- package/es/LicenseByline/EmbedByline.mjs +7 -0
- package/es/LicenseByline/EmbedByline.mjs.map +1 -1
- package/es/LicenseByline/LicenseLink.mjs +7 -0
- package/es/LicenseByline/LicenseLink.mjs.map +1 -1
- package/es/LinkBlock/LinkBlock.mjs +7 -0
- package/es/LinkBlock/LinkBlock.mjs.map +1 -1
- package/es/LinkBlock/LinkBlockSection.mjs +7 -0
- package/es/LinkBlock/LinkBlockSection.mjs.map +1 -1
- package/es/Pitch/Pitch.mjs +10 -2
- package/es/Pitch/Pitch.mjs.map +1 -1
- package/es/RelatedArticleList/RelatedArticleList.mjs +13 -8
- package/es/RelatedArticleList/RelatedArticleList.mjs.map +1 -1
- package/es/ResourceBox/ResourceBox.mjs +7 -0
- package/es/ResourceBox/ResourceBox.mjs.map +1 -1
- package/es/TagSelector/TagSelector.mjs +7 -0
- package/es/TagSelector/TagSelector.mjs.map +1 -1
- package/es/ZendeskButton/ZendeskButton.mjs +7 -0
- package/es/ZendeskButton/ZendeskButton.mjs.map +1 -1
- package/es/i18n/useComponentTranslations.mjs +7 -0
- package/es/i18n/useComponentTranslations.mjs.map +1 -1
- package/es/index.mjs +1 -1
- package/es/locale/messages-en.mjs +7 -0
- package/es/locale/messages-en.mjs.map +1 -1
- package/es/locale/messages-nb.mjs +7 -0
- package/es/locale/messages-nb.mjs.map +1 -1
- package/es/locale/messages-nn.mjs +7 -0
- package/es/locale/messages-nn.mjs.map +1 -1
- package/es/locale/messages-se.mjs +7 -0
- package/es/locale/messages-se.mjs.map +1 -1
- package/es/model/index.mjs +7 -0
- package/es/model/index.mjs.map +1 -1
- package/es/utils/licenseAttributes.mjs +7 -0
- package/es/utils/licenseAttributes.mjs.map +1 -1
- package/lib/Article/Article.js +8 -7
- package/lib/Article/Article.js.map +1 -1
- package/lib/Article/ArticleByline.js +7 -8
- package/lib/Article/ArticleByline.js.map +1 -1
- package/lib/Article/ArticleFootNotes.js +7 -3
- package/lib/Article/ArticleFootNotes.js.map +1 -1
- package/lib/Article/BadgesContainer.js +7 -1
- package/lib/Article/BadgesContainer.js.map +1 -1
- package/lib/AudioPlayer/AudioPlayer.js +7 -6
- package/lib/AudioPlayer/AudioPlayer.js.map +1 -1
- package/lib/AudioPlayer/Controls.js +7 -7
- package/lib/AudioPlayer/SpeechControl.js +7 -5
- package/lib/AudioPlayer/SpeechControl.js.map +1 -1
- package/lib/Breadcrumb/Breadcrumb.js +7 -4
- package/lib/Breadcrumb/Breadcrumb.js.map +1 -1
- package/lib/Breadcrumb/BreadcrumbItem.js +7 -3
- package/lib/Breadcrumb/BreadcrumbItem.js.map +1 -1
- package/lib/Breadcrumb/HomeBreadcrumb.js +7 -4
- package/lib/Breadcrumb/HomeBreadcrumb.js.map +1 -1
- package/lib/CampaignBlock/CampaignBlock.js +7 -6
- package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
- package/lib/CodeBlock/CodeBlock.js +7 -4
- package/lib/CodeBlock/CodeBlock.js.map +1 -1
- package/lib/Concept/Concept.d.ts +1 -1
- package/lib/Concept/Concept.js +7 -4
- package/lib/Concept/Concept.js.map +1 -1
- package/lib/ContactBlock/ContactBlock.d.ts +2 -2
- package/lib/ContactBlock/ContactBlock.js +7 -4
- package/lib/ContactBlock/ContactBlock.js.map +1 -1
- package/lib/ContentTypeBadge/ContentTypeBadge.js +7 -4
- package/lib/ContentTypeBadge/ContentTypeBadge.js.map +1 -1
- package/lib/CopyParagraphButton/CopyParagraphButton.js +7 -6
- package/lib/CopyParagraphButton/CopyParagraphButton.js.map +1 -1
- package/lib/Embed/AudioEmbed.js +7 -3
- package/lib/Embed/AudioEmbed.js.map +1 -1
- package/lib/Embed/BrightcoveEmbed.js +7 -5
- package/lib/Embed/BrightcoveEmbed.js.map +1 -1
- package/lib/Embed/CodeEmbed.js +7 -6
- package/lib/Embed/CodeEmbed.js.map +1 -1
- package/lib/Embed/ConceptEmbed.js +7 -5
- package/lib/Embed/ConceptEmbed.js.map +1 -1
- package/lib/Embed/ConceptInlineTriggerButton.js +7 -1
- package/lib/Embed/ConceptInlineTriggerButton.js.map +1 -1
- package/lib/Embed/ContentLinkEmbed.js +0 -3
- package/lib/Embed/ContentLinkEmbed.js.map +1 -1
- package/lib/Embed/CopyrightEmbed.js +0 -2
- package/lib/Embed/CopyrightEmbed.js.map +1 -1
- package/lib/Embed/EmbedErrorPlaceholder.js +7 -5
- package/lib/Embed/EmbedErrorPlaceholder.js.map +1 -1
- package/lib/Embed/EmbedWrapper.js +7 -5
- package/lib/Embed/EmbedWrapper.js.map +1 -1
- package/lib/Embed/ExternalEmbed.js +7 -5
- package/lib/Embed/ExternalEmbed.js.map +1 -1
- package/lib/Embed/FootnoteEmbed.js +7 -3
- package/lib/Embed/FootnoteEmbed.js.map +1 -1
- package/lib/Embed/GlossEmbed.js +7 -5
- package/lib/Embed/GlossEmbed.js.map +1 -1
- package/lib/Embed/H5pEmbed.js +7 -4
- package/lib/Embed/H5pEmbed.js.map +1 -1
- package/lib/Embed/IframeEmbed.js +7 -5
- package/lib/Embed/IframeEmbed.js.map +1 -1
- package/lib/Embed/ImageEmbed.js +13 -12
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Embed/InlineTriggerButton.js +7 -4
- package/lib/Embed/InlineTriggerButton.js.map +1 -1
- package/lib/Embed/RelatedContentEmbed.d.ts +1 -2
- package/lib/Embed/RelatedContentEmbed.js +9 -10
- package/lib/Embed/RelatedContentEmbed.js.map +1 -1
- package/lib/Embed/UnknownEmbed.js +7 -3
- package/lib/Embed/UnknownEmbed.js.map +1 -1
- package/lib/Embed/UuDisclaimerEmbed.js +7 -7
- package/lib/Embed/types.d.ts +2 -2
- package/lib/FactBox/FactBox.js +7 -5
- package/lib/FactBox/FactBox.js.map +1 -1
- package/lib/FileList/File.js +7 -8
- package/lib/FileList/File.js.map +1 -1
- package/lib/FileList/FileList.js +7 -4
- package/lib/FileList/FileList.js.map +1 -1
- package/lib/FileList/PdfFile.js +7 -3
- package/lib/FileList/PdfFile.js.map +1 -1
- package/lib/Gloss/Gloss.d.ts +2 -2
- package/lib/Gloss/Gloss.js +7 -7
- package/lib/Gloss/Gloss.js.map +1 -1
- package/lib/Gloss/GlossExample.d.ts +2 -2
- package/lib/Gloss/GlossExample.js +7 -4
- package/lib/Gloss/GlossExample.js.map +1 -1
- package/lib/Grid/Grid.js +7 -3
- package/lib/Grid/Grid.js.map +1 -1
- package/lib/Grid/GridParallaxItem.js +7 -3
- package/lib/Grid/GridParallaxItem.js.map +1 -1
- package/lib/KeyFigure/KeyFigure.js +7 -2
- package/lib/KeyFigure/KeyFigure.js.map +1 -1
- package/lib/LicenseByline/EmbedByline.d.ts +4 -4
- package/lib/LicenseByline/EmbedByline.js +7 -7
- package/lib/LicenseByline/EmbedByline.js.map +1 -1
- package/lib/LicenseByline/LicenseLink.js +7 -4
- package/lib/LicenseByline/LicenseLink.js.map +1 -1
- package/lib/LinkBlock/LinkBlock.js +7 -6
- package/lib/LinkBlock/LinkBlock.js.map +1 -1
- package/lib/LinkBlock/LinkBlockSection.js +7 -3
- package/lib/LinkBlock/LinkBlockSection.js.map +1 -1
- package/lib/Pitch/Pitch.js +10 -7
- package/lib/Pitch/Pitch.js.map +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.d.ts +2 -3
- package/lib/RelatedArticleList/RelatedArticleList.js +13 -16
- package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
- package/lib/ResourceBox/ResourceBox.js +7 -6
- package/lib/ResourceBox/ResourceBox.js.map +1 -1
- package/lib/TagSelector/TagSelector.js +7 -6
- package/lib/TagSelector/TagSelector.js.map +1 -1
- package/lib/ZendeskButton/ZendeskButton.js +7 -3
- package/lib/ZendeskButton/ZendeskButton.js.map +1 -1
- package/lib/i18n/useComponentTranslations.js +7 -2
- package/lib/i18n/useComponentTranslations.js.map +1 -1
- package/lib/index.js +1 -1
- package/lib/locale/messages-en.js +7 -1
- package/lib/locale/messages-en.js.map +1 -1
- package/lib/locale/messages-nb.js +7 -1
- package/lib/locale/messages-nb.js.map +1 -1
- package/lib/locale/messages-nn.js +7 -1
- package/lib/locale/messages-nn.js.map +1 -1
- package/lib/locale/messages-se.js +7 -1
- package/lib/locale/messages-se.js.map +1 -1
- package/lib/model/index.js +7 -0
- package/lib/model/index.js.map +1 -1
- package/lib/utils/licenseAttributes.js +7 -1
- package/lib/utils/licenseAttributes.js.map +1 -1
- package/package.json +7 -7
- package/src/Concept/Concept.tsx +1 -1
- package/src/ContactBlock/ContactBlock.tsx +2 -2
- package/src/Embed/ImageEmbed.stories.tsx +2 -2
- package/src/Embed/ImageEmbed.tsx +6 -6
- package/src/Embed/RelatedContentEmbed.tsx +1 -9
- package/src/Embed/types.ts +2 -2
- package/src/Gloss/Gloss.tsx +4 -4
- package/src/Gloss/GlossExample.tsx +2 -2
- package/src/LicenseByline/EmbedByline.tsx +4 -4
- package/src/Pitch/Pitch.tsx +3 -2
- package/src/RelatedArticleList/RelatedArticleList.tsx +11 -28
package/lib/Embed/IframeEmbed.js
CHANGED
|
@@ -2,17 +2,19 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
|
2
2
|
const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
3
|
const require_ResourceBox = require('../ResourceBox/ResourceBox.js');
|
|
4
4
|
let react = require("react");
|
|
5
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
6
5
|
let __ndla_primitives = require("@ndla/primitives");
|
|
7
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
8
6
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
9
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
10
7
|
let react_i18next = require("react-i18next");
|
|
11
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
12
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
14
9
|
|
|
15
10
|
//#region src/Embed/IframeEmbed.tsx
|
|
11
|
+
/**
|
|
12
|
+
* Copyright (c) 2023-present, NDLA.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
16
18
|
const StyledIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: {
|
|
17
19
|
width: "100%",
|
|
18
20
|
border: 0
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"IframeEmbed.js","names":["Figure","width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n base: {\n width: \"100%\",\n border: 0,\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\nexport const IframeEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n return (\n <StyledFigure data-embed-type=\"iframe\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </StyledFigure>\n );\n }\n\n const { width, height, url } = embedData;\n\n const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n return (\n <StyledFigure data-embed-type=\"iframe\">\n <StyledIframe\n ref={iframeRef}\n title={title}\n aria-label={title}\n src={url}\n width={strippedWidth}\n height={strippedHeight}\n allow=\"fullscreen; encrypted-media\"\n loading=\"lazy\"\n />\n </StyledFigure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"IframeEmbed.js","names":["Figure","width","height","EmbedErrorPlaceholder","ResourceBox"],"sources":["../../src/Embed/IframeEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { IframeMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\n\ninterface Props {\n embed: IframeMetaData;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n base: {\n width: \"100%\",\n border: 0,\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\nexport const IframeEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [Number.parseInt(iframe.width), Number.parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width ? width : 16}/${height ? height : 9}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"external\" />;\n }\n\n const { embedData, data } = embed;\n\n if (embedData.type === \"fullscreen\") {\n const iframeImage = embed.status === \"success\" ? data.iframeImage : undefined;\n const alt = embedData.alt !== undefined ? embedData.alt : iframeImage?.alttext.alttext;\n const image = { src: iframeImage?.image.imageUrl, alt: alt ?? \"\" };\n return (\n <StyledFigure data-embed-type=\"iframe\">\n <ResourceBox\n image={image}\n title={embedData.title ?? \"\"}\n url={embedData.url}\n caption={embedData.caption ?? \"\"}\n buttonText={t(\"license.other.itemImage.ariaLabel\")}\n />\n </StyledFigure>\n );\n }\n\n const { width, height, url } = embedData;\n\n const strippedWidth = typeof width === \"number\" ? width : width?.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height?.replace(/\\s*px/, \"\");\n const title = `${t(\"embed.type.external\")}: ${embedData.title?.trim() ? embedData.title : url}`;\n\n return (\n <StyledFigure data-embed-type=\"iframe\">\n <StyledIframe\n ref={iframeRef}\n title={title}\n aria-label={title}\n src={url}\n width={strippedWidth}\n height={strippedHeight}\n allow=\"fullscreen; encrypted-media\"\n loading=\"lazy\"\n />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAoBA,MAAM,oDAAsB,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;CACT,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAa,eAAe,EAAE,YAAmB;CAC/C,MAAM,EAAE,yCAAsB;CAC9B,MAAM,8BAAsC,KAAK;AAEjD,4BAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACC,SAAOC,YAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAGD,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC,uDAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK,cAAc;EACpE,MAAM,MAAM,UAAU,QAAQ,SAAY,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;GAAI;AAClE,SACE,2CAAC;GAAa,mBAAgB;aAC5B,2CAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;;CAInB,MAAM,EAAE,OAAO,QAAQ,QAAQ;CAE/B,MAAM,gBAAgB,OAAO,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,iBAAiB,OAAO,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,QAAQ,GAAG,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ;AAE1F,QACE,2CAAC;EAAa,mBAAgB;YAC5B,2CAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW"}
|
package/lib/Embed/ImageEmbed.js
CHANGED
|
@@ -3,21 +3,22 @@ const require_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
|
3
3
|
const require_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
4
4
|
const require_licenseAttributes = require('../utils/licenseAttributes.js');
|
|
5
5
|
let react = require("react");
|
|
6
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
7
6
|
let __ndla_primitives = require("@ndla/primitives");
|
|
8
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
9
7
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
10
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
11
8
|
let html_react_parser = require("html-react-parser");
|
|
12
9
|
html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
|
|
13
10
|
let react_i18next = require("react-i18next");
|
|
14
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
15
11
|
let __ndla_icons = require("@ndla/icons");
|
|
16
|
-
__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
|
|
17
12
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
18
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
19
13
|
|
|
20
14
|
//#region src/Embed/ImageEmbed.tsx
|
|
15
|
+
/**
|
|
16
|
+
* Copyright (c) 2023-present, NDLA.
|
|
17
|
+
*
|
|
18
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
19
|
+
* LICENSE file in the root directory of this source tree.
|
|
20
|
+
*
|
|
21
|
+
*/
|
|
21
22
|
const getFigureProps = (size, float) => {
|
|
22
23
|
const actualFloat = float === "left" ? "left" : float === "right" ? "right" : void 0;
|
|
23
24
|
const replacedSize = size?.replace("-hide-byline", "") ?? "full";
|
|
@@ -119,7 +120,7 @@ const ExpandButton = (0, __ndla_styled_system_jsx.styled)("button", { base: {
|
|
|
119
120
|
tabletDown: { display: "none" }
|
|
120
121
|
} }, { defaultProps: { type: "button" } });
|
|
121
122
|
const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", children }) => {
|
|
122
|
-
const [
|
|
123
|
+
const [expanded, setExpanded] = (0, react.useState)(false);
|
|
123
124
|
const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);
|
|
124
125
|
const { t } = (0, react_i18next.useTranslation)();
|
|
125
126
|
const parsedDescription = (0, react.useMemo)(() => {
|
|
@@ -137,13 +138,13 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
137
138
|
const focalPoint = getFocalPoint(embedData);
|
|
138
139
|
const crop = getCrop(embedData);
|
|
139
140
|
const toggleImageSize = () => {
|
|
140
|
-
|
|
141
|
+
setExpanded((prev) => !prev);
|
|
141
142
|
};
|
|
142
143
|
const licenseProps = require_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
|
|
143
144
|
const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
|
|
144
145
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
|
|
145
146
|
float: figureProps?.float,
|
|
146
|
-
size:
|
|
147
|
+
size: expanded ? "full" : figureSize,
|
|
147
148
|
"data-embed-type": "image",
|
|
148
149
|
...licenseProps,
|
|
149
150
|
children: [
|
|
@@ -155,16 +156,16 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
155
156
|
focalPoint,
|
|
156
157
|
contentType: data.image.contentType,
|
|
157
158
|
crop,
|
|
158
|
-
sizes:
|
|
159
|
+
sizes: expanded ? expandedSizes : sizes,
|
|
159
160
|
alt: altText,
|
|
160
161
|
src: data.image.imageUrl,
|
|
161
162
|
lang,
|
|
162
163
|
onClick: figureProps?.float ? toggleImageSize : void 0,
|
|
163
164
|
variant: "rounded"
|
|
164
165
|
}), (embedData.align === "right" || embedData.align === "left") && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(ExpandButton, {
|
|
165
|
-
"aria-label": t(`license.images.itemImage.zoom${
|
|
166
|
+
"aria-label": t(`license.images.itemImage.zoom${expanded ? "Out" : ""}ImageButtonLabel`),
|
|
166
167
|
onClick: toggleImageSize,
|
|
167
|
-
"data-expanded":
|
|
168
|
+
"data-expanded": expanded,
|
|
168
169
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AddLine, {})
|
|
169
170
|
})]
|
|
170
171
|
}),
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEmbed.js","names":["actualSize: FigureSize","Figure","EmbedErrorPlaceholder","sizes","licenseAttributes","Image","AddLine","EmbedByline"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n creators?: Author[];\n rightsholders?: Author[];\n processors?: Author[];\n}) => {\n return {\n creators: copyright?.creators ?? [],\n rightsholders: copyright?.rightsholders ?? [],\n processors: copyright?.processors ?? [],\n };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [imageSizes, setImageSizes] = useState<string | undefined>(undefined);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setImageSizes((sizes) => (!sizes ? expandedSizes : undefined));\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={imageSizes ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={imageSizes ?? sizes}\n alt={altText}\n src={data.image.imageUrl}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${imageSizes ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={!!imageSizes}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;;;AA6CA,MAAM,kBAAkB,MAAe,UAAuC;CAC5E,MAAM,cAAc,UAAU,SAAS,SAAS,UAAU,UAAU,UAAU;CAC9E,MAAM,eAAe,MAAM,QAAQ,gBAAgB,GAAG,IAAI;CAC1D,MAAMA,aAA0B,iBAAiB,cAAc,SAAS;AACxE,QAAO;EACL,OAAO;EAEP,MAAM,eAAe,UAAU,QAAQ,WAAW;EACnD;;AAGH,MAAM,YAAY,MAAe,UAAmB;AAClD,KAAI,SAAS,SAAS,OACpB,QAAO;AAET,KAAI,SAAS,SAAS,QACpB,QAAO;AAET,KAAI,SAAS,SAAS,SACpB,QAAO;AAET,QAAO;;AAGT,MAAa,iBAAiB,SAAyB;CACrD,MAAM,SAAS,OAAO,WAAW,KAAK,UAAU,GAAG;CACnD,MAAM,SAAS,OAAO,WAAW,KAAK,UAAU,GAAG;AACnD,KAAI,CAAC,OAAO,MAAM,OAAO,IAAI,CAAC,OAAO,MAAM,OAAO,CAChD,QAAO;EAAE,GAAG;EAAQ,GAAG;EAAQ;;AAKnC,MAAa,WAAW,SAAyB;CAC/C,MAAM,cAAc,OAAO,WAAW,KAAK,eAAe,GAAG;CAC7D,MAAM,cAAc,OAAO,WAAW,KAAK,eAAe,GAAG;CAC7D,MAAM,aAAa,OAAO,WAAW,KAAK,cAAc,GAAG;CAC3D,MAAM,aAAa,OAAO,WAAW,KAAK,cAAc,GAAG;AAC3D,KACE,CAAC,OAAO,MAAM,YAAY,IAC1B,CAAC,OAAO,MAAM,YAAY,IAC1B,CAAC,OAAO,MAAM,WAAW,IACzB,CAAC,OAAO,MAAM,WAAW,CAEzB,QAAO;EACL,QAAQ;EACR,QAAQ;EACR,MAAM;EACN,MAAM;EACP;;AAKL,MAAM,gBAAgB;AAEtB,MAAM,oDAAsB,OAAO;CACjC,MAAM;EACJ,UAAU;EACV,UAAU;EACV,OAAO;EACP,SAAS,EACP,OAAO,QACR;EACF;CACD,UAAU;EACR,KAAK;GACH,MAAM;IACJ,SAAS;IACT,gBAAgB;IACjB;GACD,OAAO,EAAE;GACV;EACD,QAAQ;GACN,MAAM;IACJ,QAAQ;IACR,aAAa;IACb,cAAc;IACd,SAAS,EACP,cAAc,KACf;IACF;GACD,OAAO,EAAE;GACV;EACD,YAAY;GACV,MAAM,EACJ,QAAQ,WACT;GACD,OAAO,EAAE;GACV;EACF;CACF,CAAC;AAEF,MAAM,oDAAsBC,0BAAQ,EAClC,MAAM;CACJ,QAAQ;CACR,QAAQ;EACN,0BAA0B,EACxB,YAAY,sBACb;EACD,2BAA2B,EACzB,WAAW,cACZ;EACF;CACD,kCAAkC,EAChC,SAAS,EACP,WAAW,kBACZ,EACF;CACF,EACF,CAAC;AAEF,MAAM,oDACJ,UACA,EACE,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,QAAQ;CACR,UAAU;CACV,SAAS;CACT,KAAK;CACL,OAAO;CACP,OAAO;CACP,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,oBAAoB;CACpB,oBAAoB;CACpB,0BAA0B;CAC1B,OAAO;CACP,iBAAiB;CACjB,cAAc;CACd,SAAS;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC3B;CACD,YAAY,EACV,SAAS,QACV;CACF,EACF,EACD,EAAE,cAAc,EAAE,MAAM,UAAU,EAAE,CACrC;AAED,MAAa,cAAc,EAAE,OAAO,YAAY,MAAM,gBAAgB,WAAW,eAAsB;CACrG,MAAM,CAAC,YAAY,qCAA8C,OAAU;CAC3E,MAAM,cAAc,eAAe,MAAM,UAAU,MAAM,MAAM,UAAU,MAAM;CAC/E,MAAM,EAAE,yCAAsB;CAE9B,MAAM,6CAAkC;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,yCAAgB,MAAM,UAAU,QAAQ,GAAG;AAEpE,MAAI,MAAM,WAAW,aAAa,MAAM,KAAK,QAAQ,QACnD,uCAAa,MAAM,KAAK,QAAQ,QAAQ;IAEzC,CAAC,OAAO,cAAc,CAAC;AAE1B,KAAI,MAAM,WAAW,QACnB,QAAO,2CAACC;EAAsB,MAAM;EAAS,YAAY,aAAa;EAAM,OAAO,aAAa;GAAS;CAG3G,MAAM,EAAE,MAAM,cAAc;CAE5B,MAAM,UAAU,UAAU,OAAO;CAEjC,MAAM,QAAQ,SAAS,UAAU,MAAM,UAAU,MAAM;CAEvD,MAAM,aAAa,cAAc,UAAU;CAC3C,MAAM,OAAO,QAAQ,UAAU;CAE/B,MAAM,wBAAwB;AAC5B,iBAAe,YAAW,CAACC,UAAQ,gBAAgB,OAAW;;CAGhE,MAAM,eAAeC,4CAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;CAE3F,MAAM,aAAa,aAAa,QAAS,aAAa,QAAQ,WAAY;AAE1E,QACE,4CAAC;EACC,OAAO,aAAa;EACpB,MAAM,aAAa,SAAS;EAC5B,mBAAgB;EAChB,GAAI;;GAEH;GACD,4CAAC;IAAa,QAAQ,UAAU,WAAW;IAAQ,YAAY,CAAC,CAAC,aAAa;eAC5E,2CAACC;KACa;KACZ,aAAa,KAAK,MAAM;KAClB;KACN,OAAO,cAAc;KACrB,KAAK;KACL,KAAK,KAAK,MAAM;KACV;KACN,SAAS,aAAa,QAAQ,kBAAkB;KAChD,SAAQ;MACR,GACA,UAAU,UAAU,WAAW,UAAU,UAAU,WACnD,2CAAC;KACC,cAAY,EAAE,gCAAgC,aAAa,QAAQ,GAAG,kBAAkB;KACxF,SAAS;KACT,iBAAe,CAAC,CAAC;eAEjB,2CAACC,yBAAU;MACE;KAEJ;GACf,2CAACC;IACC,MAAK;IACL,WAAW,KAAK;IAChB,aAAa;IACb,iBAAiB,UAAU,gBAAgB;IAC3C,eAAe,UAAU,eAAe;IACxC,YAAY,aAAa,MAAM,UAAU,MAAM;KAC/C;;GACW"}
|
|
1
|
+
{"version":3,"file":"ImageEmbed.js","names":["actualSize: FigureSize","Figure","EmbedErrorPlaceholder","licenseAttributes","Image","AddLine","EmbedByline"],"sources":["../../src/Embed/ImageEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport parse from \"html-react-parser\";\nimport { type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { AddLine } from \"@ndla/icons\";\nimport { Figure, type FigureSize, type FigureVariantProps, Image } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ImageEmbedData, ImageMetaData } from \"@ndla/types-embed\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\ninterface Props {\n embed: ImageMetaData;\n previewAlt?: boolean;\n lang?: string;\n renderContext?: RenderContext;\n children?: ReactNode;\n}\n\nexport interface Author {\n name: string;\n type: string;\n}\n\nexport const getLicenseCredits = (copyright?: {\n creators?: Author[];\n rightsholders?: Author[];\n processors?: Author[];\n}) => {\n return {\n creators: copyright?.creators ?? [],\n rightsholders: copyright?.rightsholders ?? [],\n processors: copyright?.processors ?? [],\n };\n};\n\nconst getFigureProps = (size?: string, float?: string): FigureVariantProps => {\n const actualFloat = float === \"left\" ? \"left\" : float === \"right\" ? \"right\" : undefined;\n const replacedSize = size?.replace(\"-hide-byline\", \"\") ?? \"full\";\n const actualSize: FigureSize = (replacedSize === \"fullwidth\" ? \"full\" : replacedSize) as FigureSize;\n return {\n float: actualFloat,\n // Figure expects you to set a size when floating. If you don't, the figure will simply take up the available width. Fallback to medium in those cases.\n size: actualSize === \"full\" && float ? \"medium\" : actualSize,\n };\n};\n\nconst getSizes = (size?: string, align?: string) => {\n if (align && size === \"full\") {\n return \"(min-width: 1024px) 512px, (min-width: 768px) 350px, 100vw\";\n }\n if (align && size === \"small\") {\n return \"(min-width: 1024px) 350px, (min-width: 768px) 180px, 100vw\";\n }\n if (align && size === \"xsmall\") {\n return \"(min-width: 1024px) 180px, (min-width: 768px) 180px, 100vw\";\n }\n return \"(min-width: 1024px) 1024px, 100vw\";\n};\n\nexport const getFocalPoint = (data: ImageEmbedData) => {\n const focalX = Number.parseFloat(data.focalX ?? \"\");\n const focalY = Number.parseFloat(data.focalY ?? \"\");\n if (!Number.isNaN(focalX) && !Number.isNaN(focalY)) {\n return { x: focalX, y: focalY };\n }\n return undefined;\n};\n\nexport const getCrop = (data: ImageEmbedData) => {\n const lowerRightX = Number.parseFloat(data.lowerRightX ?? \"\");\n const lowerRightY = Number.parseFloat(data.lowerRightY ?? \"\");\n const upperLeftX = Number.parseFloat(data.upperLeftX ?? \"\");\n const upperLeftY = Number.parseFloat(data.upperLeftY ?? \"\");\n if (\n !Number.isNaN(lowerRightX) &&\n !Number.isNaN(lowerRightY) &&\n !Number.isNaN(upperLeftX) &&\n !Number.isNaN(upperLeftY)\n ) {\n return {\n startX: lowerRightX,\n startY: lowerRightY,\n endX: upperLeftX,\n endY: upperLeftY,\n };\n }\n return undefined;\n};\n\nconst expandedSizes = \"(min-width: 1024px) 1024px, 100vw\";\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n overflow: \"hidden\",\n position: \"relative\",\n width: \"100%\",\n \"& img\": {\n width: \"100%\",\n },\n },\n variants: {\n svg: {\n true: {\n display: \"flex\",\n justifyContent: \"center\",\n },\n false: {},\n },\n border: {\n true: {\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& img\": {\n borderRadius: \"0\",\n },\n },\n false: {},\n },\n expandable: {\n true: {\n cursor: \"pointer\",\n },\n false: {},\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n zIndex: \"docked\",\n _hover: {\n \"& [data-byline-button]\": {\n background: \"background.default\",\n },\n \"& button[data-expanded]\": {\n transform: \"scale(1.2)\",\n },\n },\n \"& button[data-expanded='true']\": {\n \"& svg\": {\n transform: \"rotate(-45deg)\",\n },\n },\n },\n});\n\nconst ExpandButton = styled(\n \"button\",\n {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n cursor: \"pointer\",\n position: \"absolute\",\n padding: \"0\",\n top: \"xsmall\",\n right: \"xsmall\",\n width: \"medium\",\n height: \"medium\",\n border: \"2px solid\",\n borderColor: \"background.default\",\n transitionProperty: \"transform, background-color, color\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n color: \"background.default\",\n backgroundColor: \"surface.action\",\n borderRadius: \"large\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionDuration: \"normal\",\n transitionTimingFunction: \"ease-out\",\n },\n tabletDown: {\n display: \"none\",\n },\n },\n },\n { defaultProps: { type: \"button\" } },\n);\n\nexport const ImageEmbed = ({ embed, previewAlt, lang, renderContext = \"article\", children }: Props) => {\n const [expanded, setExpanded] = useState(false);\n const figureProps = getFigureProps(embed.embedData.size, embed.embedData.align);\n const { t } = useTranslation();\n\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n }\n if (embed.status === \"success\" && embed.data.caption.caption) {\n return parse(embed.data.caption.caption);\n }\n }, [embed, renderContext]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={\"image\"} figureType={figureProps?.size} float={figureProps?.float} />;\n }\n\n const { data, embedData } = embed;\n\n const altText = embedData.alt || \"\";\n\n const sizes = getSizes(embedData.size, embedData.align);\n\n const focalPoint = getFocalPoint(embedData);\n const crop = getCrop(embedData);\n\n const toggleImageSize = () => {\n setExpanded((prev) => !prev);\n };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n const figureSize = figureProps?.float ? (figureProps?.size ?? \"medium\") : \"full\";\n\n return (\n <StyledFigure\n float={figureProps?.float}\n size={expanded ? \"full\" : figureSize}\n data-embed-type=\"image\"\n {...licenseProps}\n >\n {children}\n <ImageWrapper border={embedData.border === \"true\"} expandable={!!figureProps?.float}>\n <Image\n focalPoint={focalPoint}\n contentType={data.image.contentType}\n crop={crop}\n sizes={expanded ? expandedSizes : sizes}\n alt={altText}\n src={data.image.imageUrl}\n lang={lang}\n onClick={figureProps?.float ? toggleImageSize : undefined}\n variant=\"rounded\"\n />\n {(embedData.align === \"right\" || embedData.align === \"left\") && (\n <ExpandButton\n aria-label={t(`license.images.itemImage.zoom${expanded ? \"Out\" : \"\"}ImageButtonLabel`)}\n onClick={toggleImageSize}\n data-expanded={expanded}\n >\n <AddLine />\n </ExpandButton>\n )}\n </ImageWrapper>\n <EmbedByline\n type=\"image\"\n copyright={data.copyright}\n description={parsedDescription}\n hideDescription={embedData.hideCaption === \"true\"}\n hideCopyright={embedData.hideByline === \"true\"}\n visibleAlt={previewAlt ? embed.embedData.alt : \"\"}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"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"}
|
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
let react = require("react");
|
|
3
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
4
3
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
6
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
8
5
|
let __ndla_util = require("@ndla/util");
|
|
9
|
-
__ndla_util = require_rolldown_runtime.__toESM(__ndla_util);
|
|
10
6
|
|
|
11
7
|
//#region src/Embed/InlineTriggerButton.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Copyright (c) 2024-present, NDLA.
|
|
10
|
+
*
|
|
11
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
12
15
|
const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {} });
|
|
13
16
|
const InlineTriggerButton = (0, react.forwardRef)(({ onClick,...props }, ref) => {
|
|
14
17
|
const spanRef = (0, react.useRef)(null);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"InlineTriggerButton.js","names":[],"sources":["../../src/Embed/InlineTriggerButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { composeRefs } from \"@ndla/util\";\n\nconst StyledSpan = styled(\"span\", { base: {} });\n\nexport const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<\"span\">>(\n ({ onClick, ...props }, ref) => {\n const spanRef = useRef<HTMLSpanElement>(null);\n\n // Emulate a button click when pressing Enter or Space\n const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n spanRef.current?.click();\n }\n }, []);\n\n return (\n <StyledSpan\n ref={composeRefs(spanRef, ref)}\n onKeyUp={onKeyboardEvent}\n onClick={onClick}\n role=\"button\"\n tabIndex={0}\n {...props}\n />\n );\n },\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"InlineTriggerButton.js","names":[],"sources":["../../src/Embed/InlineTriggerButton.tsx"],"sourcesContent":["/**\n * Copyright (c) 2024-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, type KeyboardEvent, forwardRef, useCallback, useRef } from \"react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { composeRefs } from \"@ndla/util\";\n\nconst StyledSpan = styled(\"span\", { base: {} });\n\nexport const InlineTriggerButton = forwardRef<HTMLSpanElement, ComponentPropsWithRef<\"span\">>(\n ({ onClick, ...props }, ref) => {\n const spanRef = useRef<HTMLSpanElement>(null);\n\n // Emulate a button click when pressing Enter or Space\n const onKeyboardEvent = useCallback((event: KeyboardEvent<HTMLSpanElement>) => {\n if (event.key === \"Enter\" || event.key === \" \") {\n spanRef.current?.click();\n }\n }, []);\n\n return (\n <StyledSpan\n ref={composeRefs(spanRef, ref)}\n onKeyUp={onKeyboardEvent}\n onClick={onClick}\n role=\"button\"\n tabIndex={0}\n {...props}\n />\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;AAYA,MAAM,kDAAoB,QAAQ,EAAE,MAAM,EAAE,EAAE,CAAC;AAE/C,MAAa,6CACV,EAAE,QAAS,GAAG,SAAS,QAAQ;CAC9B,MAAM,4BAAkC,KAAK;CAG7C,MAAM,0CAA+B,UAA0C;AAC7E,MAAI,MAAM,QAAQ,WAAW,MAAM,QAAQ,IACzC,SAAQ,SAAS,OAAO;IAEzB,EAAE,CAAC;AAEN,QACE,2CAAC;EACC,kCAAiB,SAAS,IAAI;EAC9B,SAAS;EACA;EACT,MAAK;EACL,UAAU;EACV,GAAI;GACJ;EAGP"}
|
|
@@ -11,7 +11,6 @@ interface Props {
|
|
|
11
11
|
isOembed?: boolean;
|
|
12
12
|
subject?: string;
|
|
13
13
|
ndlaFrontendDomain?: string;
|
|
14
|
-
language?: string;
|
|
15
14
|
}
|
|
16
|
-
export declare const RelatedContentEmbed: ({ embed, isOembed, subject, ndlaFrontendDomain
|
|
15
|
+
export declare const RelatedContentEmbed: ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => import("react/jsx-runtime").JSX.Element | null;
|
|
17
16
|
export {};
|
|
@@ -1,34 +1,33 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
const require_RelatedArticleList = require('../RelatedArticleList/RelatedArticleList.js');
|
|
3
|
-
let __ndla_primitives = require("@ndla/primitives");
|
|
4
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
5
3
|
let react_i18next = require("react-i18next");
|
|
6
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
7
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
8
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
9
5
|
|
|
10
6
|
//#region src/Embed/RelatedContentEmbed.tsx
|
|
11
|
-
|
|
7
|
+
/**
|
|
8
|
+
* Copyright (c) 2023-present, NDLA.
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
14
|
+
const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) => {
|
|
12
15
|
const { t } = (0, react_i18next.useTranslation)();
|
|
13
16
|
if (embed.status === "error") return null;
|
|
14
17
|
const { data, embedData } = embed;
|
|
15
18
|
if (embedData.articleId && data) {
|
|
16
|
-
const badges = data.resource?.resourceTypes?.map((rt) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Badge, { children: rt.translations.find((t$1) => t$1.language === language)?.name ?? rt.name }, rt.id));
|
|
17
19
|
const url = (data.resource?.contexts.find((c) => c.rootId === subject))?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
|
|
18
20
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RelatedArticleList.RelatedArticle, {
|
|
19
21
|
title: data.article.title?.title ?? "",
|
|
20
22
|
introduction: data.article.metaDescription?.metaDescription ?? "",
|
|
21
23
|
target: isOembed ? "_blank" : void 0,
|
|
22
|
-
to: `${ndlaFrontendDomain ?? ""}${url ?? ""}
|
|
23
|
-
badges
|
|
24
|
+
to: `${ndlaFrontendDomain ?? ""}${url ?? ""}`
|
|
24
25
|
});
|
|
25
26
|
}
|
|
26
27
|
if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_RelatedArticleList.RelatedArticle, {
|
|
27
28
|
title: embedData.title ?? "",
|
|
28
|
-
introduction: "",
|
|
29
29
|
to: embedData.url,
|
|
30
30
|
target: "_blank",
|
|
31
|
-
badges: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Badge, { children: t("contentTypes.external") }),
|
|
32
31
|
linkInfo: `${t("related.linkInfo")} ${embedData.urlDomain}`
|
|
33
32
|
});
|
|
34
33
|
return null;
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedContentEmbed.js","names":["
|
|
1
|
+
{"version":3,"file":"RelatedContentEmbed.js","names":["RelatedArticle"],"sources":["../../src/Embed/RelatedContentEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport type { RelatedContentMetaData } from \"@ndla/types-embed\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n embed: RelatedContentMetaData;\n isOembed?: boolean;\n subject?: string;\n ndlaFrontendDomain?: string;\n}\n\nexport const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return null;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.articleId && data) {\n const context = data.resource?.contexts.find((c) => c.rootId === subject);\n const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;\n return (\n <RelatedArticle\n title={data.article.title?.title ?? \"\"}\n introduction={data.article.metaDescription?.metaDescription ?? \"\"}\n target={isOembed ? \"_blank\" : undefined}\n to={`${ndlaFrontendDomain ?? \"\"}${url ?? \"\"}`}\n />\n );\n }\n if (typeof embedData.url === \"string\") {\n return (\n <RelatedArticle\n title={embedData.title ?? \"\"}\n to={embedData.url}\n target=\"_blank\"\n linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n />\n );\n }\n return null;\n};\n"],"mappings":";;;;;;;;;;;;;AAmBA,MAAa,uBAAuB,EAAE,OAAO,UAAU,SAAS,yBAAgC;CAC9F,MAAM,EAAE,yCAAsB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,aAAa,MAAM;EAE/B,MAAM,OADU,KAAK,UAAU,SAAS,MAAM,MAAM,EAAE,WAAW,QAAQ,GACpD,OAAO,KAAK,UAAU,OAAO,YAAY,UAAU;AACxE,SACE,2CAACA;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW,WAAW;GAC9B,IAAI,GAAG,sBAAsB,KAAK,OAAO;IACzC;;AAGN,KAAI,OAAO,UAAU,QAAQ,SAC3B,QACE,2CAACA;EACC,OAAO,UAAU,SAAS;EAC1B,IAAI,UAAU;EACd,QAAO;EACP,UAAU,GAAG,EAAE,mBAAmB,CAAC,GAAG,UAAU;GAChD;AAGN,QAAO"}
|
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
let __ndla_primitives = require("@ndla/primitives");
|
|
3
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
4
3
|
let react_i18next = require("react-i18next");
|
|
5
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
6
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
8
5
|
|
|
9
6
|
//#region src/Embed/UnknownEmbed.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Copyright (c) 2023-present, NDLA.
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
10
14
|
const UnknownEmbed = ({ embed }) => {
|
|
11
15
|
const { t } = (0, react_i18next.useTranslation)();
|
|
12
16
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.Text, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: MetaData<any, any>;\n}\n\nexport const UnknownEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n return (\n <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n </Text>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"UnknownEmbed.js","names":["Text"],"sources":["../../src/Embed/UnknownEmbed.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { useTranslation } from \"react-i18next\";\nimport { Text } from \"@ndla/primitives\";\nimport type { MetaData } from \"@ndla/types-embed\";\n\ninterface Props {\n embed: MetaData<any, any>;\n}\n\nexport const UnknownEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n return (\n <Text color=\"text.error\" asChild consumeCss data-embed-type=\"unknown\">\n <span>{t(\"embed.unsupported\", { type: embed.resource })}</span>\n </Text>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAa,gBAAgB,EAAE,YAAmB;CAChD,MAAM,EAAE,yCAAsB;AAC9B,QACE,2CAACA;EAAK,OAAM;EAAa;EAAQ;EAAW,mBAAgB;YAC1D,2CAAC,oBAAM,EAAE,qBAAqB,EAAE,MAAM,MAAM,UAAU,CAAC,GAAQ;GAC1D"}
|
|
@@ -1,20 +1,20 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
let react = require("react");
|
|
3
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
4
3
|
let __ndla_primitives = require("@ndla/primitives");
|
|
5
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
6
4
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
7
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
8
5
|
let react_i18next = require("react-i18next");
|
|
9
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
10
6
|
let __ndla_icons = require("@ndla/icons");
|
|
11
|
-
__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
|
|
12
7
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
14
8
|
let __ark_ui_react = require("@ark-ui/react");
|
|
15
|
-
__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
|
|
16
9
|
|
|
17
10
|
//#region src/Embed/UuDisclaimerEmbed.tsx
|
|
11
|
+
/**
|
|
12
|
+
* Copyright (c) 2024-present, NDLA.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
18
18
|
const DisclaimerWrapper = (0, __ndla_styled_system_jsx.styled)("div", { base: {
|
|
19
19
|
display: "flex",
|
|
20
20
|
flexDirection: "column",
|
package/lib/Embed/types.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import type { ElementType } from "react";
|
|
9
|
-
import type {
|
|
9
|
+
import type { ImageMetaInformationV3DTO } from "@ndla/types-backend/image-api";
|
|
10
10
|
import type { EmbedMetaData } from "@ndla/types-embed";
|
|
11
11
|
export type HeartButtonType = ElementType<{
|
|
12
12
|
embed: Extract<EmbedMetaData, {
|
|
@@ -18,6 +18,6 @@ export type EmbedParameter<T extends EmbedMetaData["resource"]> = Partial<Extrac
|
|
|
18
18
|
resource: T;
|
|
19
19
|
}>>;
|
|
20
20
|
export type CanonicalUrlFuncs = {
|
|
21
|
-
image?: (image:
|
|
21
|
+
image?: (image: ImageMetaInformationV3DTO) => string;
|
|
22
22
|
};
|
|
23
23
|
export type RenderContext = "article" | "embed";
|
package/lib/FactBox/FactBox.js
CHANGED
|
@@ -2,17 +2,19 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
|
2
2
|
let react = require("react");
|
|
3
3
|
react = require_rolldown_runtime.__toESM(react);
|
|
4
4
|
let __ndla_primitives = require("@ndla/primitives");
|
|
5
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
6
5
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
7
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
8
6
|
let react_i18next = require("react-i18next");
|
|
9
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
10
7
|
let __ndla_icons = require("@ndla/icons");
|
|
11
|
-
__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
|
|
12
8
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
13
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
14
9
|
|
|
15
10
|
//#region src/FactBox/FactBox.tsx
|
|
11
|
+
/**
|
|
12
|
+
* Copyright (c) 2016-present, NDLA.
|
|
13
|
+
*
|
|
14
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
15
|
+
* LICENSE file in the root directory of this source tree.
|
|
16
|
+
*
|
|
17
|
+
*/
|
|
16
18
|
const StyledAside = (0, __ndla_styled_system_jsx.styled)("aside", {
|
|
17
19
|
base: {
|
|
18
20
|
position: "relative",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport React, {\n type ComponentProps,\n type ReactNode,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n children?: ReactNode;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n base: {\n position: \"relative\",\n padding: \"medium\",\n display: \"grid\",\n gridTemplateRows: \"0fr\",\n transitionProperty: \"grid-template-rows\",\n transitionDuration: \"slow\",\n transitionTimingFunction: \"ease-in-out\",\n justifyItems: \"center\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n clear: \"both\",\n _open: {\n gridTemplateRows: \"1fr\",\n },\n _closed: {\n _print: {\n overflow: \"visible\",\n maxHeight: \"500vh\",\n },\n },\n \"& > div\": {\n minHeight: \"surface.3xsmall\",\n },\n },\n variants: {\n overflowHidden: {\n true: {\n \"& > div\": {\n overflow: \"hidden\",\n },\n },\n },\n },\n});\n\nconst StyledContent = styled(\"div\", {\n base: {\n position: \"relative\",\n width: \"100%\",\n // Reset the top margin of the very first child.\n \"& :first-child\": {\n marginBlockStart: \"0\",\n },\n _after: {\n content: '\"\"',\n textAlign: \"center\",\n position: \"absolute\",\n inset: \"0\",\n transitionProperty: \"opacity\",\n transitionDuration: \"slow\",\n transitionTimingFunction: \"ease-in-out\",\n gradientFrom: \"surface.default/20\",\n gradientTo: \"surface.default/95\",\n backgroundGradient: \"to-b\",\n opacity: \"1\",\n zIndex: \"base\",\n pointerEvents: \"none\",\n },\n _print: {\n overflow: \"visible\",\n _after: {\n display: \"none\",\n },\n },\n _open: {\n paddingBlockEnd: \"xsmall\",\n _after: {\n opacity: \"0\",\n },\n },\n },\n});\n\nconst StyledIconButton = styled(IconButton, {\n base: {\n position: \"absolute\",\n bottom: \"-medium\",\n zIndex: \"base\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"fast\",\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n _print: {\n display: \"none\",\n },\n },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n const { t } = useTranslation();\n const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n const contentId = useId();\n // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n // When running in React 18, we need to use an empty string instead of true.\n // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n const inertAttribute = useMemo(() => {\n return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n }, [state]) as { inert?: boolean };\n\n useEffect(() => {\n if (open !== undefined) {\n setState(open ? \"open\" : \"closed\");\n }\n }, [open]);\n\n const onClick = useCallback(() => {\n const newState = state === \"open\" ? \"closed\" : \"open\";\n setState(newState);\n onOpenChange?.(newState === \"open\");\n }, [state, onOpenChange]);\n\n return (\n <StyledAside\n data-state={state}\n data-embed-type=\"factbox\"\n {...rest}\n ref={ref}\n overflowHidden={overflowHidden}\n onTransitionStart={(e) => {\n if (e.target === e.currentTarget && state === \"closed\") {\n setOverflowHidden(true);\n }\n }}\n onTransitionEnd={(e) => {\n if (e.target === e.currentTarget && state === \"open\") {\n setOverflowHidden(false);\n }\n }}\n >\n <StyledIconButton\n data-state={state}\n onClick={onClick}\n contentEditable={false}\n aria-expanded={state === \"open\"}\n aria-controls={contentId}\n aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n >\n <ArrowDownShortLine />\n </StyledIconButton>\n <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n {children}\n </StyledContent>\n </StyledAside>\n );\n },\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FactBox.js","names":["IconButton","React","ArrowDownShortLine"],"sources":["../../src/FactBox/FactBox.tsx"],"sourcesContent":["/**\n * Copyright (c) 2016-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport React, {\n type ComponentProps,\n type ReactNode,\n forwardRef,\n useCallback,\n useEffect,\n useId,\n useMemo,\n useState,\n} from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ArrowDownShortLine } from \"@ndla/icons\";\nimport { IconButton } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentProps<\"aside\"> {\n children?: ReactNode;\n defaultOpen?: boolean;\n open?: boolean;\n onOpenChange?: (open: boolean) => void;\n}\n\nconst StyledAside = styled(\"aside\", {\n base: {\n position: \"relative\",\n padding: \"medium\",\n display: \"grid\",\n gridTemplateRows: \"0fr\",\n transitionProperty: \"grid-template-rows\",\n transitionDuration: \"slow\",\n transitionTimingFunction: \"ease-in-out\",\n justifyItems: \"center\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n clear: \"both\",\n _open: {\n gridTemplateRows: \"1fr\",\n },\n _closed: {\n _print: {\n overflow: \"visible\",\n maxHeight: \"500vh\",\n },\n },\n \"& > div\": {\n minHeight: \"surface.3xsmall\",\n },\n },\n variants: {\n overflowHidden: {\n true: {\n \"& > div\": {\n overflow: \"hidden\",\n },\n },\n },\n },\n});\n\nconst StyledContent = styled(\"div\", {\n base: {\n position: \"relative\",\n width: \"100%\",\n // Reset the top margin of the very first child.\n \"& :first-child\": {\n marginBlockStart: \"0\",\n },\n _after: {\n content: '\"\"',\n textAlign: \"center\",\n position: \"absolute\",\n inset: \"0\",\n transitionProperty: \"opacity\",\n transitionDuration: \"slow\",\n transitionTimingFunction: \"ease-in-out\",\n gradientFrom: \"surface.default/20\",\n gradientTo: \"surface.default/95\",\n backgroundGradient: \"to-b\",\n opacity: \"1\",\n zIndex: \"base\",\n pointerEvents: \"none\",\n },\n _print: {\n overflow: \"visible\",\n _after: {\n display: \"none\",\n },\n },\n _open: {\n paddingBlockEnd: \"xsmall\",\n _after: {\n opacity: \"0\",\n },\n },\n },\n});\n\nconst StyledIconButton = styled(IconButton, {\n base: {\n position: \"absolute\",\n bottom: \"-medium\",\n zIndex: \"base\",\n \"& svg\": {\n transitionProperty: \"transform\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"fast\",\n },\n _open: {\n \"& svg\": {\n transform: \"rotate(180deg)\",\n },\n },\n _print: {\n display: \"none\",\n },\n },\n});\n\n// TODO: Consider moving the open trigger depending on whether the content is open or closed.\n\nexport const FactBox = forwardRef<HTMLElement, Props>(\n ({ children, open, onOpenChange, defaultOpen = false, ...rest }, ref) => {\n const { t } = useTranslation();\n const [state, setState] = useState<\"open\" | \"closed\">(defaultOpen ? \"open\" : \"closed\");\n const [overflowHidden, setOverflowHidden] = useState(!defaultOpen);\n const contentId = useId();\n // Inert has existed since early 2023. It allows us to disable tabindex inside the content if it is closed, allowing us to be accessible for users with newish browsers. React 18 removes this because it doesn't recognize the attribute. This is a workaround for that.\n // When running in React 18, we need to use an empty string instead of true.\n // TODO: Remove this hack once we upgrade to React 19 as a peer dep.\n const inertAttribute = useMemo(() => {\n return state === \"closed\" ? { inert: typeof React.use === \"function\" ? true : \"\" } : {};\n }, [state]) as { inert?: boolean };\n\n useEffect(() => {\n if (open !== undefined) {\n setState(open ? \"open\" : \"closed\");\n }\n }, [open]);\n\n const onClick = useCallback(() => {\n const newState = state === \"open\" ? \"closed\" : \"open\";\n setState(newState);\n onOpenChange?.(newState === \"open\");\n }, [state, onOpenChange]);\n\n return (\n <StyledAside\n data-state={state}\n data-embed-type=\"factbox\"\n {...rest}\n ref={ref}\n overflowHidden={overflowHidden}\n onTransitionStart={(e) => {\n if (e.target === e.currentTarget && state === \"closed\") {\n setOverflowHidden(true);\n }\n }}\n onTransitionEnd={(e) => {\n if (e.target === e.currentTarget && state === \"open\") {\n setOverflowHidden(false);\n }\n }}\n >\n <StyledIconButton\n data-state={state}\n onClick={onClick}\n contentEditable={false}\n aria-expanded={state === \"open\"}\n aria-controls={contentId}\n aria-label={t(`factbox.${state === \"open\" ? \"close\" : \"open\"}`)}\n >\n <ArrowDownShortLine />\n </StyledIconButton>\n <StyledContent id={contentId} data-state={state} aria-hidden={state === \"closed\"} {...inertAttribute}>\n {children}\n </StyledContent>\n </StyledAside>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;AA8BA,MAAM,mDAAqB,SAAS;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,SAAS;EACT,kBAAkB;EAClB,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,QAAQ;EACR,aAAa;EACb,cAAc;EACd,OAAO;EACP,OAAO,EACL,kBAAkB,OACnB;EACD,SAAS,EACP,QAAQ;GACN,UAAU;GACV,WAAW;GACZ,EACF;EACD,WAAW,EACT,WAAW,mBACZ;EACF;CACD,UAAU,EACR,gBAAgB,EACd,MAAM,EACJ,WAAW,EACT,UAAU,UACX,EACF,EACF,EACF;CACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,UAAU;CACV,OAAO;CAEP,kBAAkB,EAChB,kBAAkB,KACnB;CACD,QAAQ;EACN,SAAS;EACT,WAAW;EACX,UAAU;EACV,OAAO;EACP,oBAAoB;EACpB,oBAAoB;EACpB,0BAA0B;EAC1B,cAAc;EACd,YAAY;EACZ,oBAAoB;EACpB,SAAS;EACT,QAAQ;EACR,eAAe;EAChB;CACD,QAAQ;EACN,UAAU;EACV,QAAQ,EACN,SAAS,QACV;EACF;CACD,OAAO;EACL,iBAAiB;EACjB,QAAQ,EACN,SAAS,KACV;EACF;CACF,EACF,CAAC;AAEF,MAAM,wDAA0BA,8BAAY,EAC1C,MAAM;CACJ,UAAU;CACV,QAAQ;CACR,QAAQ;CACR,SAAS;EACP,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;EACrB;CACD,OAAO,EACL,SAAS,EACP,WAAW,kBACZ,EACF;CACD,QAAQ,EACN,SAAS,QACV;CACF,EACF,CAAC;AAIF,MAAa,iCACV,EAAE,UAAU,MAAM,cAAc,cAAc,MAAO,GAAG,QAAQ,QAAQ;CACvE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,CAAC,OAAO,gCAAwC,cAAc,SAAS,SAAS;CACtF,MAAM,CAAC,gBAAgB,yCAA8B,CAAC,YAAY;CAClE,MAAM,8BAAmB;CAIzB,MAAM,0CAA+B;AACnC,SAAO,UAAU,WAAW,EAAE,OAAO,OAAOC,cAAM,QAAQ,aAAa,OAAO,IAAI,GAAG,EAAE;IACtF,CAAC,MAAM,CAAC;AAEX,4BAAgB;AACd,MAAI,SAAS,OACX,UAAS,OAAO,SAAS,SAAS;IAEnC,CAAC,KAAK,CAAC;CAEV,MAAM,uCAA4B;EAChC,MAAM,WAAW,UAAU,SAAS,WAAW;AAC/C,WAAS,SAAS;AAClB,iBAAe,aAAa,OAAO;IAClC,CAAC,OAAO,aAAa,CAAC;AAEzB,QACE,4CAAC;EACC,cAAY;EACZ,mBAAgB;EAChB,GAAI;EACC;EACW;EAChB,oBAAoB,MAAM;AACxB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,SAC5C,mBAAkB,KAAK;;EAG3B,kBAAkB,MAAM;AACtB,OAAI,EAAE,WAAW,EAAE,iBAAiB,UAAU,OAC5C,mBAAkB,MAAM;;aAI5B,2CAAC;GACC,cAAY;GACH;GACT,iBAAiB;GACjB,iBAAe,UAAU;GACzB,iBAAe;GACf,cAAY,EAAE,WAAW,UAAU,SAAS,UAAU,SAAS;aAE/D,2CAACC,oCAAqB;IACL,EACnB,2CAAC;GAAc,IAAI;GAAW,cAAY;GAAO,eAAa,UAAU;GAAU,GAAI;GACnF;IACa;GACJ;EAGnB"}
|
package/lib/FileList/File.js
CHANGED
|
@@ -1,23 +1,22 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
const require_FileList = require('./FileList.js');
|
|
3
3
|
let react = require("react");
|
|
4
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
5
4
|
let __ndla_primitives = require("@ndla/primitives");
|
|
6
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
7
5
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
8
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
9
6
|
let react_i18next = require("react-i18next");
|
|
10
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
11
7
|
let __ndla_icons = require("@ndla/icons");
|
|
12
|
-
__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
|
|
13
8
|
let __ndla_safelink = require("@ndla/safelink");
|
|
14
|
-
__ndla_safelink = require_rolldown_runtime.__toESM(__ndla_safelink);
|
|
15
9
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
16
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
17
10
|
let __ndla_styled_system_patterns = require("@ndla/styled-system/patterns");
|
|
18
|
-
__ndla_styled_system_patterns = require_rolldown_runtime.__toESM(__ndla_styled_system_patterns);
|
|
19
11
|
|
|
20
12
|
//#region src/FileList/File.tsx
|
|
13
|
+
/**
|
|
14
|
+
* Copyright (c) 2023-present, NDLA.
|
|
15
|
+
*
|
|
16
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
17
|
+
* LICENSE file in the root directory of this source tree.
|
|
18
|
+
*
|
|
19
|
+
*/
|
|
21
20
|
const StyledSafeLink = (0, __ndla_styled_system_jsx.styled)(__ndla_safelink.SafeLink, { base: {
|
|
22
21
|
textUnderlineOffset: "2px",
|
|
23
22
|
textDecoration: "underline",
|
package/lib/FileList/File.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst FileContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nconst InfoContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"center\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download=${filename}`;\n const tooltip = `${t(\"download\")} ${filename}`;\n\n return (\n <FileContainer ref={ref} {...rest}>\n <InfoContainer>\n <DownloadLine />\n {fileExists ? (\n <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n {title}\n </StyledSafeLink>\n ) : (\n <Text textStyle=\"label.medium\">{title}</Text>\n )}\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>({fileType?.toUpperCase()})</span>\n </Text>\n </InfoContainer>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </FileContainer>\n );\n },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n <FileListItem>\n <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n </FileListItem>\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"File.js","names":["SafeLink","DownloadLine","linkOverlay","Text","FileListItem"],"sources":["../../src/FileList/File.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithRef, forwardRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { DownloadLine } from \"@ndla/icons\";\nimport { Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \"./FileList\";\n\nexport interface FileProps extends ComponentPropsWithRef<\"div\"> {\n title: string;\n url: string;\n fileExists: boolean;\n fileType: string;\n fileSize?: string;\n}\n\nexport interface FileType {\n title: string;\n formats: FileFormat[];\n fileExists?: boolean;\n}\n\nexport interface FileFormat {\n url: string;\n fileType: string;\n tooltip: string;\n}\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n textUnderlineOffset: \"2px\",\n textDecoration: \"underline\",\n _hover: {\n textDecoration: \"none\",\n },\n },\n});\n\nconst FileContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\n },\n});\n\nconst InfoContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"center\",\n },\n});\n\nexport const File = forwardRef<HTMLDivElement, FileProps>(\n ({ title, url, fileExists, fileType, fileSize, ...rest }, ref) => {\n const { t } = useTranslation();\n const filename = `${title}-${url.split(\"/\").pop() ?? \"\"}`;\n const downloadUrl = `${url}?download=${filename}`;\n const tooltip = `${t(\"download\")} ${filename}`;\n\n return (\n <FileContainer ref={ref} {...rest}>\n <InfoContainer>\n <DownloadLine />\n {fileExists ? (\n <StyledSafeLink unstyled css={linkOverlay.raw()} to={downloadUrl} title={tooltip}>\n {title}\n </StyledSafeLink>\n ) : (\n <Text textStyle=\"label.medium\">{title}</Text>\n )}\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>({fileType?.toUpperCase()})</span>\n </Text>\n </InfoContainer>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </FileContainer>\n );\n },\n);\n\nexport const FileListElement = ({ title, url, fileExists, fileType, fileSize }: FileProps) => (\n <FileListItem>\n <File title={title} url={url} fileExists={fileExists} fileType={fileType} fileSize={fileSize} />\n </FileListItem>\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AAqCA,MAAM,sDAAwBA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,QACjB;CACF,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;CACR,EACF,CAAC;AAEF,MAAM,qDAAuB,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,KAAK;CACL,YAAY;CACb,EACF,CAAC;AAEF,MAAa,8BACV,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,QAAQ,QAAQ;CAChE,MAAM,EAAE,yCAAsB;CAC9B,MAAM,WAAW,GAAG,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI;CACrD,MAAM,cAAc,GAAG,IAAI,YAAY;CACvC,MAAM,UAAU,GAAG,EAAE,WAAW,CAAC,GAAG;AAEpC,QACE,4CAAC;EAAmB;EAAK,GAAI;aAC3B,4CAAC;GACC,2CAACC,8BAAe;GACf,aACC,2CAAC;IAAe;IAAS,KAAKC,0CAAY,KAAK;IAAE,IAAI;IAAa,OAAO;cACtE;KACc,GAEjB,2CAACC;IAAK,WAAU;cAAgB;KAAa;GAE/C,2CAACA;IAAK,WAAU;IAAc;IAAQ;cACpC,4CAAC;KAAK;KAAE,UAAU,aAAa;KAAC;QAAQ;KACnC;MACO,EAChB,2CAACA;GAAK,WAAU;GAAc;GAAQ;aACpC,2CAAC,oBAAM,WAAgB;IAClB;GACO;EAGrB;AAED,MAAa,mBAAmB,EAAE,OAAO,KAAK,YAAY,UAAU,eAClE,2CAACC,2CACC,2CAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
|
package/lib/FileList/FileList.js
CHANGED
|
@@ -1,14 +1,17 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
let react = require("react");
|
|
3
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
4
3
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
6
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
8
5
|
let __ark_ui_react = require("@ark-ui/react");
|
|
9
|
-
__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
|
|
10
6
|
|
|
11
7
|
//#region src/FileList/FileList.tsx
|
|
8
|
+
/**
|
|
9
|
+
* Copyright (c) 2023-present, NDLA.
|
|
10
|
+
*
|
|
11
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
12
|
+
* LICENSE file in the root directory of this source tree.
|
|
13
|
+
*
|
|
14
|
+
*/
|
|
12
15
|
const FileListWrapper = (0, __ndla_styled_system_jsx.styled)(__ark_ui_react.ark.ul, { base: {
|
|
13
16
|
display: "flex",
|
|
14
17
|
flexDirection: "column",
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FileList.js","names":["ark"],"sources":["../../src/FileList/FileList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n ark.ul,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n clear: \"both\",\n },\n },\n { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n ark.li,\n {\n base: {\n listStyle: \"none\",\n background: \"surface.infoSubtle\",\n borderBlockEnd: \"1px solid\",\n borderColor: \"stroke.default\",\n display: \"flex\",\n justifyContent: \"space-between\",\n\n _hover: {\n backgroundColor: \"surface.infoSubtle.hover\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n return (\n <FileListWrapper {...rest} data-embed-type=\"file-list\">\n {children}\n </FileListWrapper>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FileList.js","names":["ark"],"sources":["../../src/FileList/FileList.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { type ComponentPropsWithoutRef } from \"react\";\nimport { ark } from \"@ark-ui/react\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props extends ComponentPropsWithoutRef<\"ul\"> {}\n\nexport const FileListWrapper = styled(\n ark.ul,\n {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n clear: \"both\",\n },\n },\n { baseComponent: true },\n);\n\nexport const FileListItem = styled(\n ark.li,\n {\n base: {\n listStyle: \"none\",\n background: \"surface.infoSubtle\",\n borderBlockEnd: \"1px solid\",\n borderColor: \"stroke.default\",\n display: \"flex\",\n justifyContent: \"space-between\",\n\n _hover: {\n backgroundColor: \"surface.infoSubtle.hover\",\n },\n },\n },\n { baseComponent: true },\n);\n\nexport const FileListEmbed = ({ children, ...rest }: Props) => {\n return (\n <FileListWrapper {...rest} data-embed-type=\"file-list\">\n {children}\n </FileListWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAa,uDACXA,mBAAI,IACJ,EACE,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,OAAO;CACR,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,oDACXA,mBAAI,IACJ,EACE,MAAM;CACJ,WAAW;CACX,YAAY;CACZ,gBAAgB;CAChB,aAAa;CACb,SAAS;CACT,gBAAgB;CAEhB,QAAQ,EACN,iBAAiB,4BAClB;CACF,EACF,EACD,EAAE,eAAe,MAAM,CACxB;AAED,MAAa,iBAAiB,EAAE,SAAU,GAAG,WAAkB;AAC7D,QACE,2CAAC;EAAgB,GAAI;EAAM,mBAAgB;EACxC;GACe"}
|
package/lib/FileList/PdfFile.js
CHANGED
|
@@ -1,12 +1,16 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
2
|
let __ndla_primitives = require("@ndla/primitives");
|
|
3
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
4
3
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
5
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
6
4
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
7
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
8
5
|
|
|
9
6
|
//#region src/FileList/PdfFile.tsx
|
|
7
|
+
/**
|
|
8
|
+
* Copyright (c) 2023-present, NDLA.
|
|
9
|
+
*
|
|
10
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
11
|
+
* LICENSE file in the root directory of this source tree.
|
|
12
|
+
*
|
|
13
|
+
*/
|
|
10
14
|
const StyledIframe = (0, __ndla_styled_system_jsx.styled)("iframe", { base: { width: "100%" } });
|
|
11
15
|
const StyledListElement = (0, __ndla_styled_system_jsx.styled)("li", { base: { listStyle: "none" } });
|
|
12
16
|
const StyledFigure = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figure, { base: {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"PdfFile.js","names":["Figure","Heading"],"sources":["../../src/FileList/PdfFile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n title: string;\n url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n base: {\n width: \"100%\",\n },\n});\n\nconst StyledListElement = styled(\"li\", {\n base: {\n listStyle: \"none\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n return (\n <StyledListElement>\n <StyledFigure>\n <Heading asChild consumeCss textStyle=\"title.medium\">\n <h4>{title}</h4>\n </Heading>\n <StyledIframe title={title} height=\"1050\" src={url} />\n </StyledFigure>\n </StyledListElement>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"PdfFile.js","names":["Figure","Heading"],"sources":["../../src/FileList/PdfFile.tsx"],"sourcesContent":["/**\n * Copyright (c) 2023-present, NDLA.\n *\n * This source code is licensed under the GPLv3 license found in the\n * LICENSE file in the root directory of this source tree.\n *\n */\n\nimport { Heading, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\n\ninterface Props {\n title: string;\n url: string;\n}\n\nconst StyledIframe = styled(\"iframe\", {\n base: {\n width: \"100%\",\n },\n});\n\nconst StyledListElement = styled(\"li\", {\n base: {\n listStyle: \"none\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n});\n\nexport const PdfFile = ({ title, url }: Props) => {\n return (\n <StyledListElement>\n <StyledFigure>\n <Heading asChild consumeCss textStyle=\"title.medium\">\n <h4>{title}</h4>\n </Heading>\n <StyledIframe title={title} height=\"1050\" src={url} />\n </StyledFigure>\n </StyledListElement>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAgBA,MAAM,oDAAsB,UAAU,EACpC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAEF,MAAM,yDAA2B,MAAM,EACrC,MAAM,EACJ,WAAW,QACZ,EACF,CAAC;AAEF,MAAM,oDAAsBA,0BAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAa,WAAW,EAAE,OAAO,UAAiB;AAChD,QACE,2CAAC,+BACC,4CAAC,2BACC,2CAACC;EAAQ;EAAQ;EAAW,WAAU;YACpC,2CAAC,kBAAI,QAAW;GACR,EACV,2CAAC;EAAoB;EAAO,QAAO;EAAO,KAAK;GAAO,IACzC,GACG"}
|
package/lib/Gloss/Gloss.d.ts
CHANGED
|
@@ -6,7 +6,7 @@
|
|
|
6
6
|
*
|
|
7
7
|
*/
|
|
8
8
|
import type { StyledVariantProps } from "@ndla/styled-system/types";
|
|
9
|
-
import type { ConceptTitleDTO,
|
|
9
|
+
import type { ConceptTitleDTO, GlossDataDTO } from "@ndla/types-backend/concept-api";
|
|
10
10
|
declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledComponent<import("react").ComponentClass<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps, import("@ndla/styled-system/types").JsxStyleProps>, any>, {
|
|
11
11
|
variant?: "simple" | "bordered" | undefined;
|
|
12
12
|
}> | import("@ndla/styled-system/types").StyledComponent<import("react").FunctionComponent<import("@ndla/styled-system/types").JsxHTMLProps<import("@ark-ui/react").AccordionItemProps & import("react").RefAttributes<HTMLDivElement> & import("@ndla/styled-system/jsx").UnstyledProps, import("@ndla/styled-system/types").JsxStyleProps>>, {
|
|
@@ -15,7 +15,7 @@ declare const StyledAccordionItem: import("@ndla/styled-system/types").StyledCom
|
|
|
15
15
|
type GlossVariantProps = StyledVariantProps<typeof StyledAccordionItem>;
|
|
16
16
|
export interface Props {
|
|
17
17
|
title: ConceptTitleDTO;
|
|
18
|
-
glossData?:
|
|
18
|
+
glossData?: GlossDataDTO;
|
|
19
19
|
audio?: {
|
|
20
20
|
title: string;
|
|
21
21
|
src?: string;
|
package/lib/Gloss/Gloss.js
CHANGED
|
@@ -2,23 +2,23 @@ const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
|
2
2
|
const require_SpeechControl = require('../AudioPlayer/SpeechControl.js');
|
|
3
3
|
const require_GlossExample = require('./GlossExample.js');
|
|
4
4
|
let react = require("react");
|
|
5
|
-
react = require_rolldown_runtime.__toESM(react);
|
|
6
5
|
let __ndla_primitives = require("@ndla/primitives");
|
|
7
|
-
__ndla_primitives = require_rolldown_runtime.__toESM(__ndla_primitives);
|
|
8
6
|
let __ndla_styled_system_jsx = require("@ndla/styled-system/jsx");
|
|
9
|
-
__ndla_styled_system_jsx = require_rolldown_runtime.__toESM(__ndla_styled_system_jsx);
|
|
10
7
|
let html_react_parser = require("html-react-parser");
|
|
11
8
|
html_react_parser = require_rolldown_runtime.__toESM(html_react_parser);
|
|
12
9
|
let react_i18next = require("react-i18next");
|
|
13
|
-
react_i18next = require_rolldown_runtime.__toESM(react_i18next);
|
|
14
10
|
let __ndla_icons = require("@ndla/icons");
|
|
15
|
-
__ndla_icons = require_rolldown_runtime.__toESM(__ndla_icons);
|
|
16
11
|
let react_jsx_runtime = require("react/jsx-runtime");
|
|
17
|
-
react_jsx_runtime = require_rolldown_runtime.__toESM(react_jsx_runtime);
|
|
18
12
|
let __ark_ui_react = require("@ark-ui/react");
|
|
19
|
-
__ark_ui_react = require_rolldown_runtime.__toESM(__ark_ui_react);
|
|
20
13
|
|
|
21
14
|
//#region src/Gloss/Gloss.tsx
|
|
15
|
+
/**
|
|
16
|
+
* Copyright (c) 2023-present, NDLA.
|
|
17
|
+
*
|
|
18
|
+
* This source code is licensed under the GPLv3 license found in the
|
|
19
|
+
* LICENSE file in the root directory of this source tree.
|
|
20
|
+
*
|
|
21
|
+
*/
|
|
22
22
|
const getFilteredExamples = (glossData, exampleIds, exampleLangs) => {
|
|
23
23
|
if (exampleIds !== void 0 || exampleLangs !== void 0) {
|
|
24
24
|
const exampleIdsList = exampleIds?.toString()?.split(",") ?? [];
|