@ndla/ui 56.0.131-alpha.0 → 56.0.133-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/es/AudioPlayer/Controls.js +2 -2
- package/es/AudioPlayer/Controls.js.map +1 -1
- package/lib/Article/Article.js +4 -4
- package/lib/Article/ArticleByline.js +2 -2
- package/lib/Article/ArticleByline.js.map +1 -1
- package/lib/AudioPlayer/AudioPlayer.js +4 -4
- package/lib/AudioPlayer/Controls.js +2 -2
- package/lib/AudioPlayer/Controls.js.map +1 -1
- package/lib/AudioPlayer/index.js +2 -2
- package/lib/Breadcrumb/Breadcrumb.js +2 -2
- package/lib/Breadcrumb/HomeBreadcrumb.js +2 -2
- package/lib/Breadcrumb/index.js +3 -3
- package/lib/CampaignBlock/CampaignBlock.js +2 -2
- package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
- package/lib/Concept/Concept.js +11 -11
- package/lib/Concept/Concept.js.map +1 -1
- package/lib/ContactBlock/ContactBlock.js +2 -2
- package/lib/ContentTypeBadge/ContentTypeBadge.js +20 -20
- package/lib/ContentTypeBadge/ContentTypeBadge.js.map +1 -1
- package/lib/ContentTypeHero/ContentTypeHero.js +20 -20
- package/lib/ContentTypeHero/ContentTypeHero.js.map +1 -1
- package/lib/CopyParagraphButton/index.js +2 -2
- package/lib/Embed/AudioEmbed.js +9 -9
- package/lib/Embed/AudioEmbed.js.map +1 -1
- package/lib/Embed/BrightcoveEmbed.js +6 -6
- package/lib/Embed/BrightcoveEmbed.js.map +1 -1
- package/lib/Embed/CodeEmbed.js +6 -6
- package/lib/Embed/CodeEmbed.js.map +1 -1
- package/lib/Embed/ConceptEmbed.js +9 -9
- package/lib/Embed/ConceptEmbed.js.map +1 -1
- package/lib/Embed/ConceptInlineTriggerButton.js +2 -2
- package/lib/Embed/ConceptInlineTriggerButton.js.map +1 -1
- package/lib/Embed/CopyrightEmbed.js +2 -2
- package/lib/Embed/EmbedErrorPlaceholder.js +2 -2
- package/lib/Embed/ExternalEmbed.js +4 -4
- package/lib/Embed/ExternalEmbed.js.map +1 -1
- package/lib/Embed/GlossEmbed.js +7 -7
- package/lib/Embed/GlossEmbed.js.map +1 -1
- package/lib/Embed/H5pEmbed.js +2 -2
- package/lib/Embed/H5pEmbed.js.map +1 -1
- package/lib/Embed/IframeEmbed.js +4 -4
- package/lib/Embed/IframeEmbed.js.map +1 -1
- package/lib/Embed/ImageEmbed.js +6 -6
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Embed/RelatedContentEmbed.js +6 -6
- package/lib/Embed/RelatedContentEmbed.js.map +1 -1
- package/lib/ErrorMessage/index.js +2 -2
- package/lib/FactBox/index.js +2 -2
- package/lib/FileList/File.js +2 -2
- package/lib/FileList/File.js.map +1 -1
- package/lib/Gloss/Gloss.js +4 -4
- package/lib/LicenseByline/EmbedByline.js +2 -2
- package/lib/LinkBlock/LinkBlock.js +2 -2
- package/lib/LinkBlock/LinkBlock.js.map +1 -1
- package/lib/Pitch/Pitch.js +2 -2
- package/lib/Pitch/Pitch.js.map +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.js +4 -4
- package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
- package/lib/RelatedArticleList/index.js +2 -2
- package/lib/i18n/i18n.js +8 -8
- package/lib/i18n/i18n.js.map +1 -1
- package/lib/index.js +156 -156
- package/lib/locale/messages-en.js +2 -2
- package/lib/locale/messages-nb.js +2 -2
- package/lib/locale/messages-nn.js +2 -2
- package/lib/locale/messages-se.js +2 -2
- package/lib/model/index.js +10 -10
- package/lib/utils/relativeUrl.js +2 -2
- package/lib/utils/relativeUrl.js.map +1 -1
- package/package.json +3 -3
- package/src/AudioPlayer/Controls.tsx +2 -2
package/lib/Embed/H5pEmbed.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
3
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
4
4
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
5
5
|
const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
|
|
@@ -16,7 +16,7 @@ const FigureOembed = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.Figu
|
|
|
16
16
|
} });
|
|
17
17
|
const H5pEmbed = ({ embed }) => {
|
|
18
18
|
const { t } = (0, react_i18next.useTranslation)();
|
|
19
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
19
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "h5p" });
|
|
20
20
|
if (embed.data.oembed) return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(FigureOembed, {
|
|
21
21
|
"data-embed-type": "h5p",
|
|
22
22
|
dangerouslySetInnerHTML: { __html: embed.data.oembed.html ?? "" }
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"H5pEmbed.js","names":["Figure","EmbedErrorPlaceholder"],"sources":["../../src/Embed/H5pEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: H5pMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nconst FigureOembed = styled(Figure, {\n base: {\n width: \"100%\",\n \"& iframe\": {\n width: \"100%\",\n },\n },\n});\n\nconst H5pEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"h5p\" />;\n }\n\n if (embed.data.oembed) {\n return <FigureOembed data-embed-type=\"h5p\" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? \"\" }} />;\n }\n\n const title = embed.embedData.title?.trim()\n ? embed.embedData.title\n : embed.data.h5pLicenseInformation?.h5p.title?.trim()\n ? embed.data.h5pLicenseInformation.h5p.title\n : embed.embedData.url;\n\n const titleWithPrefix = `${t(\"embed.type.h5p\")}: ${title}`;\n\n return (\n <StyledFigure data-embed-type=\"h5p\">\n <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />\n </StyledFigure>\n );\n};\n\nexport default H5pEmbed;\n"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,OACR;AACF,EACF,EAAC;AAEF,MAAM,WAAW,CAAC,EAAE,OAAc,KAAK;CACrC,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,
|
|
1
|
+
{"version":3,"file":"H5pEmbed.js","names":["Figure","EmbedErrorPlaceholder"],"sources":["../../src/Embed/H5pEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport EmbedErrorPlaceholder from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: H5pMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nconst FigureOembed = styled(Figure, {\n base: {\n width: \"100%\",\n \"& iframe\": {\n width: \"100%\",\n },\n },\n});\n\nconst H5pEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"h5p\" />;\n }\n\n if (embed.data.oembed) {\n return <FigureOembed data-embed-type=\"h5p\" dangerouslySetInnerHTML={{ __html: embed.data.oembed.html ?? \"\" }} />;\n }\n\n const title = embed.embedData.title?.trim()\n ? embed.embedData.title\n : embed.data.h5pLicenseInformation?.h5p.title?.trim()\n ? embed.data.h5pLicenseInformation.h5p.title\n : embed.embedData.url;\n\n const titleWithPrefix = `${t(\"embed.type.h5p\")}: ${title}`;\n\n return (\n <StyledFigure data-embed-type=\"h5p\">\n <iframe title={titleWithPrefix} aria-label={titleWithPrefix} src={embed.embedData.url} />\n </StyledFigure>\n );\n};\n\nexport default H5pEmbed;\n"],"mappings":";;;;;;;;AAkBA,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;AACR,EACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,OACR;AACF,EACF,EAAC;AAEF,MAAM,WAAW,CAAC,EAAE,OAAc,KAAK;CACrC,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,mIAAsB,MAAK,QAAQ;AAG7C,KAAI,MAAM,KAAK,OACb,wBAAO,2BAAC;EAAa,mBAAgB;EAAM,yBAAyB,EAAE,QAAQ,MAAM,KAAK,OAAO,QAAQ,GAAI;GAAI;CAGlH,MAAM,QAAQ,MAAM,UAAU,OAAO,MAAM,GACvC,MAAM,UAAU,QAChB,MAAM,KAAK,uBAAuB,IAAI,OAAO,MAAM,GACjD,MAAM,KAAK,sBAAsB,IAAI,QACrC,MAAM,UAAU;CAEtB,MAAM,mBAAmB,EAAE,EAAE,iBAAiB,CAAC,IAAI,MAAM;AAEzD,wBACE,2BAAC;EAAa,mBAAgB;4BAC5B,2BAAC;GAAO,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;IAAO;GAC5E;AAElB;AAED,uBAAe"}
|
package/lib/Embed/IframeEmbed.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox = require('../ResourceBox/ResourceBox.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -25,7 +25,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
25
25
|
iframe.height = "";
|
|
26
26
|
}
|
|
27
27
|
}, []);
|
|
28
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
28
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, { type: "external" });
|
|
29
29
|
const { embedData, data } = embed;
|
|
30
30
|
if (embedData.type === "fullscreen") {
|
|
31
31
|
const iframeImage = embed.status === "success" ? data.iframeImage : void 0;
|
|
@@ -36,7 +36,7 @@ const IframeEmbed = ({ embed }) => {
|
|
|
36
36
|
};
|
|
37
37
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledFigure, {
|
|
38
38
|
"data-embed-type": "iframe",
|
|
39
|
-
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
39
|
+
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ResourceBox_ResourceBox.ResourceBox_default, {
|
|
40
40
|
image,
|
|
41
41
|
title: embedData.title ?? "",
|
|
42
42
|
url: embedData.url,
|
|
@@ -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\";\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\nconst 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\nexport default IframeEmbed;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,eAAe,qCAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,cAAc,CAAC,EAAE,OAAc,KAAK;CACxC,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,kBAA0B,KAAK;AAEjD,sBAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACC,SAAOC,SAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAED,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,
|
|
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\";\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\nconst 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\nexport default IframeEmbed;\n"],"mappings":";;;;;;;;;;AAoBA,MAAM,eAAe,qCAAO,UAAU,EACpC,MAAM;CACJ,OAAO;CACP,QAAQ;AACT,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOA,0BAAQ,EAClC,MAAM,EACJ,OAAO,OACR,EACF,EAAC;AAEF,MAAM,cAAc,CAAC,EAAE,OAAc,KAAK;CACxC,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,kBAA0B,KAAK;AAEjD,sBAAU,MAAM;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAACC,SAAOC,SAAO,GAAG,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,AAAC;AACvF,UAAO,MAAM,eAAe,EAAED,UAAQA,UAAQ,GAAG,GAAGC,WAASA,WAAS,EAAE;AACxE,UAAO,QAAQ;AACf,UAAO,SAAS;EACjB;CACF,GAAE,CAAE,EAAC;AAEN,KAAI,MAAM,WAAW,QACnB,wBAAO,2BAACC,mIAAsB,MAAK,aAAa;CAGlD,MAAM,EAAE,WAAW,MAAM,GAAG;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,cAAc,MAAM,WAAW,YAAY,KAAK;EACtD,MAAM,MAAM,UAAU,iBAAoB,UAAU,MAAM,aAAa,QAAQ;EAC/E,MAAM,QAAQ;GAAE,KAAK,aAAa,MAAM;GAAU,KAAK,OAAO;EAAI;AAClE,yBACE,2BAAC;GAAa,mBAAgB;6BAC5B,2BAACC;IACQ;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;KAClD;IACW;CAElB;CAED,MAAM,EAAE,OAAO,QAAQ,KAAK,GAAG;CAE/B,MAAM,uBAAuB,UAAU,WAAW,QAAQ,OAAO,QAAQ,SAAS,GAAG;CACrF,MAAM,wBAAwB,WAAW,WAAW,SAAS,QAAQ,QAAQ,SAAS,GAAG;CACzF,MAAM,SAAS,EAAE,EAAE,sBAAsB,CAAC,IAAI,UAAU,OAAO,MAAM,GAAG,UAAU,QAAQ,IAAI;AAE9F,wBACE,2BAAC;EAAa,mBAAgB;4BAC5B,2BAAC;GACC,KAAK;GACE;GACP,cAAY;GACZ,KAAK;GACL,OAAO;GACP,QAAQ;GACR,OAAM;GACN,SAAQ;IACR;GACW;AAElB;AAED,0BAAe"}
|
package/lib/Embed/ImageEmbed.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline = require('../LicenseByline/EmbedByline.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder = require('./EmbedErrorPlaceholder.js');
|
|
4
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes = require('../utils/licenseAttributes.js');
|
|
5
5
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
6
6
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
7
7
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -121,7 +121,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
121
121
|
if (embed.embedData.caption || renderContext === "article") return embed.embedData.caption ? (0, html_react_parser.default)(embed.embedData.caption) : void 0;
|
|
122
122
|
if (embed.status === "success" && embed.data.caption.caption) return (0, html_react_parser.default)(embed.data.caption.caption);
|
|
123
123
|
}, [embed, renderContext]);
|
|
124
|
-
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
124
|
+
if (embed.status === "error") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Embed_EmbedErrorPlaceholder.EmbedErrorPlaceholder_default, {
|
|
125
125
|
type: "image",
|
|
126
126
|
figureType: figureProps?.size,
|
|
127
127
|
float: figureProps?.float
|
|
@@ -134,7 +134,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
134
134
|
const toggleImageSize = () => {
|
|
135
135
|
setImageSizes((sizes$1) => !sizes$1 ? expandedSizes : void 0);
|
|
136
136
|
};
|
|
137
|
-
const licenseProps =
|
|
137
|
+
const licenseProps = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_licenseAttributes.licenseAttributes(data.copyright.license.license, lang, embedData.url);
|
|
138
138
|
const figureSize = figureProps?.float ? figureProps?.size ?? "medium" : "full";
|
|
139
139
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(StyledFigure, {
|
|
140
140
|
float: figureProps?.float,
|
|
@@ -163,7 +163,7 @@ const ImageEmbed = ({ embed, previewAlt, lang, renderContext = "article", childr
|
|
|
163
163
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_icons.AddLine, {})
|
|
164
164
|
})]
|
|
165
165
|
}),
|
|
166
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
166
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_EmbedByline.EmbedByline, {
|
|
167
167
|
type: "image",
|
|
168
168
|
copyright: data.copyright,
|
|
169
169
|
description: parsedDescription,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ImageEmbed.js","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","Figure","EmbedErrorPlaceholder","sizes","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\";\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\nconst 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\nexport default ImageEmbed;\n"],"mappings":"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"}
|
|
1
|
+
{"version":3,"file":"ImageEmbed.js","names":["size?: string","float?: string","actualSize: FigureSize","align?: string","data: ImageEmbedData","Figure","EmbedErrorPlaceholder","sizes","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\";\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\nconst 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\nexport default ImageEmbed;\n"],"mappings":"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"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType = require('../model/ContentType.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList = require('../RelatedArticleList/RelatedArticleList.js');
|
|
4
4
|
const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
|
|
5
5
|
const react_jsx_runtime = require_rolldown_runtime.__toESM(require("react/jsx-runtime"));
|
|
6
6
|
|
|
@@ -10,11 +10,11 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
|
|
|
10
10
|
if (embed.status === "error") return null;
|
|
11
11
|
const { data, embedData } = embed;
|
|
12
12
|
if (embedData.articleId && data) {
|
|
13
|
-
const typeId = data.resource?.resourceTypes.find((rt) =>
|
|
14
|
-
const type = typeId ?
|
|
13
|
+
const typeId = data.resource?.resourceTypes.find((rt) => require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.contentTypeMapping[rt.id])?.id;
|
|
14
|
+
const type = typeId ? require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.contentTypeMapping[typeId] : void 0;
|
|
15
15
|
const context = data.resource?.contexts.find((c) => c.rootId === subject);
|
|
16
16
|
const url = context?.url ?? data.resource?.url ?? `/article/${embedData.articleId}`;
|
|
17
|
-
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
17
|
+
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList.RelatedArticle, {
|
|
18
18
|
title: data.article.title?.title ?? "",
|
|
19
19
|
introduction: data.article.metaDescription?.metaDescription ?? "",
|
|
20
20
|
target: isOembed ? "_blank" : void 0,
|
|
@@ -22,7 +22,7 @@ const RelatedContentEmbed = ({ embed, isOembed, subject, ndlaFrontendDomain }) =
|
|
|
22
22
|
type
|
|
23
23
|
});
|
|
24
24
|
}
|
|
25
|
-
if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
25
|
+
if (typeof embedData.url === "string") return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList.RelatedArticle, {
|
|
26
26
|
title: embedData.title ?? "",
|
|
27
27
|
introduction: "",
|
|
28
28
|
to: embedData.url,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","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 { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n embed: RelatedContentMetaData;\n isOembed?: boolean;\n subject?: string;\n ndlaFrontendDomain?: string;\n}\n\nconst 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 typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n const type = typeId ? contentTypeMapping[typeId] : undefined;\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 type={type}\n />\n );\n }\n if (typeof embedData.url === \"string\") {\n return (\n <RelatedArticle\n title={embedData.title ?? \"\"}\n introduction=\"\"\n to={embedData.url}\n target=\"_blank\"\n type=\"external\"\n linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n />\n );\n }\n return null;\n};\n\nexport default RelatedContentEmbed;\n"],"mappings":";;;;;;;AAoBA,MAAM,sBAAsB,CAAC,EAAE,OAAO,UAAU,SAAS,oBAA2B,KAAK;CACvF,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,CAAC,OAAOA,
|
|
1
|
+
{"version":3,"file":"RelatedContentEmbed.js","names":["contentTypeMapping","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 { contentTypeMapping } from \"../model/ContentType\";\nimport { RelatedArticle } from \"../RelatedArticleList/RelatedArticleList\";\n\ninterface Props {\n embed: RelatedContentMetaData;\n isOembed?: boolean;\n subject?: string;\n ndlaFrontendDomain?: string;\n}\n\nconst 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 typeId = data.resource?.resourceTypes.find((rt) => contentTypeMapping[rt.id])?.id;\n const type = typeId ? contentTypeMapping[typeId] : undefined;\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 type={type}\n />\n );\n }\n if (typeof embedData.url === \"string\") {\n return (\n <RelatedArticle\n title={embedData.title ?? \"\"}\n introduction=\"\"\n to={embedData.url}\n target=\"_blank\"\n type=\"external\"\n linkInfo={`${t(\"related.linkInfo\")} ${embedData.urlDomain}`}\n />\n );\n }\n return null;\n};\n\nexport default RelatedContentEmbed;\n"],"mappings":";;;;;;;AAoBA,MAAM,sBAAsB,CAAC,EAAE,OAAO,UAAU,SAAS,oBAA2B,KAAK;CACvF,MAAM,EAAE,GAAG,GAAG,mCAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO;CAGT,MAAM,EAAE,MAAM,WAAW,GAAG;AAE5B,KAAI,UAAU,aAAa,MAAM;EAC/B,MAAM,SAAS,KAAK,UAAU,cAAc,KAAK,CAAC,OAAOA,2GAAmB,GAAG,IAAI,EAAE;EACrF,MAAM,OAAO,SAASA,2GAAmB;EACzC,MAAM,UAAU,KAAK,UAAU,SAAS,KAAK,CAAC,MAAM,EAAE,WAAW,QAAQ;EACzE,MAAM,MAAM,SAAS,OAAO,KAAK,UAAU,QAAQ,WAAW,UAAU,UAAU;AAClF,yBACE,2BAACC;GACC,OAAO,KAAK,QAAQ,OAAO,SAAS;GACpC,cAAc,KAAK,QAAQ,iBAAiB,mBAAmB;GAC/D,QAAQ,WAAW;GACnB,KAAK,EAAE,sBAAsB,GAAG,EAAE,OAAO,GAAG;GACtC;IACN;CAEL;AACD,YAAW,UAAU,QAAQ,SAC3B,wBACE,2BAACA;EACC,OAAO,UAAU,SAAS;EAC1B,cAAa;EACb,IAAI,UAAU;EACd,QAAO;EACP,MAAK;EACL,WAAW,EAAE,EAAE,mBAAmB,CAAC,GAAG,UAAU,UAAU;GAC1D;AAGN,QAAO;AACR;AAED,kCAAe"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ErrorMessage_ErrorMessage = require('./ErrorMessage.js');
|
|
2
2
|
|
|
3
3
|
//#region src/ErrorMessage/index.ts
|
|
4
|
-
var ErrorMessage_default$1 =
|
|
4
|
+
var ErrorMessage_default$1 = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ErrorMessage_ErrorMessage.ErrorMessage_default$1;
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
exports.ErrorMessage_default = ErrorMessage_default$1;
|
package/lib/FactBox/index.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FactBox_FactBox = require('./FactBox.js');
|
|
2
2
|
|
|
3
3
|
//#region src/FactBox/index.ts
|
|
4
|
-
var FactBox_default$1 =
|
|
4
|
+
var FactBox_default$1 = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FactBox_FactBox.FactBox_default$1;
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
exports.FactBox_default = FactBox_default$1;
|
package/lib/FileList/File.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FileList_FileList = require('./FileList.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -64,7 +64,7 @@ const File = (0, react.forwardRef)(({ title, url, fileExists, fileType, fileSize
|
|
|
64
64
|
})]
|
|
65
65
|
});
|
|
66
66
|
});
|
|
67
|
-
const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
67
|
+
const FileListElement = ({ title, url, fileExists, fileType, fileSize }) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_FileList_FileList.FileListItem, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(File, {
|
|
68
68
|
title,
|
|
69
69
|
url,
|
|
70
70
|
fileExists,
|
package/lib/FileList/File.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","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 { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\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 StyledHStack = styled(HStack, {\n base: {\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\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 <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n <HStack gap=\"xxsmall\">\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 </HStack>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </StyledHStack>\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,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,
|
|
1
|
+
{"version":3,"file":"File.js","names":["SafeLink","HStack","DownloadLine","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 { HStack, styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { FileListItem } from \".\";\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 StyledHStack = styled(HStack, {\n base: {\n position: \"relative\",\n paddingBlock: \"small\",\n paddingInlineEnd: \"medium\",\n paddingInlineStart: \"small\",\n width: \"100%\",\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 <StyledHStack justify=\"space-between\" ref={ref} {...rest}>\n <HStack gap=\"xxsmall\">\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 </HStack>\n <Text textStyle=\"label.large\" asChild consumeCss>\n <span>{fileSize}</span>\n </Text>\n </StyledHStack>\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,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,qBAAqB;CACrB,gBAAgB;CAChB,QAAQ,EACN,gBAAgB,OACjB;AACF,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,iCAAQ,EAClC,MAAM;CACJ,UAAU;CACV,cAAc;CACd,kBAAkB;CAClB,oBAAoB;CACpB,OAAO;AACR,EACF,EAAC;AAEF,MAAa,OAAO,sBAClB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,SAAU,GAAG,MAAM,EAAE,QAAQ;CAChE,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,YAAY,EAAE,MAAM,GAAG,IAAI,MAAM,IAAI,CAAC,KAAK,IAAI,GAAG;CACxD,MAAM,eAAe,EAAE,IAAI,YAAY,SAAS;CAChD,MAAM,WAAW,EAAE,EAAE,WAAW,CAAC,GAAG,SAAS;AAE7C,wBACE,4BAAC;EAAa,SAAQ;EAAqB;EAAK,GAAI;6BAClD,4BAACA;GAAO,KAAI;;oBACV,2BAACC,8BAAe;IACf,6BACC,2BAAC;KAAe;KAAS,KAAK,0CAAY,KAAK;KAAE,IAAI;KAAa,OAAO;eACtE;MACc,mBAEjB,2BAACC;KAAK,WAAU;eAAgB;MAAa;oBAE/C,2BAACA;KAAK,WAAU;KAAc;KAAQ;+BACpC,4BAAC;MAAK;MAAE,UAAU,aAAa;MAAC;SAAQ;MACnC;;IACA,kBACT,2BAACA;GAAK,WAAU;GAAc;GAAQ;6BACpC,2BAAC,oBAAM,WAAgB;IAClB;GACM;AAElB,EACF;AAED,MAAa,kBAAkB,CAAC,EAAE,OAAO,KAAK,YAAY,UAAU,UAAqB,qBACvF,2BAACC,kIACC,2BAAC;CAAY;CAAY;CAAiB;CAAsB;CAAoB;EAAY,GACnF"}
|
package/lib/Gloss/Gloss.js
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl = require('../AudioPlayer/SpeechControl.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_GlossExample = require('./GlossExample.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -105,7 +105,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
|
|
|
105
105
|
children: t(`wordClass.${glossData.wordClass}`).toLowerCase()
|
|
106
106
|
})
|
|
107
107
|
})
|
|
108
|
-
] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
108
|
+
] }), !!audio?.src && /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_AudioPlayer_SpeechControl.SpeechControl_default, {
|
|
109
109
|
src: audio.src,
|
|
110
110
|
title: audio.title,
|
|
111
111
|
type: "gloss"
|
|
@@ -130,7 +130,7 @@ const Gloss = ({ title, glossData, audio, exampleIds, exampleLangs, variant }) =
|
|
|
130
130
|
})
|
|
131
131
|
})
|
|
132
132
|
})] }),
|
|
133
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
133
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledAccordionItemContent, { children: filteredExamples.map((examples, index) => /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_Gloss_GlossExample.GlossExample_default, {
|
|
134
134
|
examples,
|
|
135
135
|
originalLanguage: glossData.originalLanguage
|
|
136
136
|
}, `gloss-example-${index}`)) })
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_LicenseLink = require('./LicenseLink.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -110,7 +110,7 @@ const LicenseContainerContent = ({ children, copyright, type }) => {
|
|
|
110
110
|
children,
|
|
111
111
|
` ${t(`embed.type.${type}`)}${captionAuthors.length ? ": " : ""}`,
|
|
112
112
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", { children: captionAuthors.map((author) => author.name).join(", ") }),
|
|
113
|
-
license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
113
|
+
license ? /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(react_jsx_runtime.Fragment, { children: [" / ", /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_LicenseByline_LicenseLink.LicenseLink, {
|
|
114
114
|
license,
|
|
115
115
|
hideLink: !isOpen && !!children
|
|
116
116
|
})] }) : null
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
|
|
3
3
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
4
4
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
5
5
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -44,7 +44,7 @@ const StyledDateContainer = (0, __ndla_styled_system_jsx.styled)("div", { base:
|
|
|
44
44
|
} });
|
|
45
45
|
const StyledCalendarEd = (0, __ndla_styled_system_jsx.styled)(__ndla_icons.CalendarLine, { base: { color: "icon.strong" } });
|
|
46
46
|
const LinkBlock = ({ title, articleLanguage, date, url, path }) => {
|
|
47
|
-
const href =
|
|
47
|
+
const href = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path);
|
|
48
48
|
const formattedDate = (0, react.useMemo)(() => {
|
|
49
49
|
if (!date) return null;
|
|
50
50
|
return new Intl.DateTimeFormat(articleLanguage, {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.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 { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n background: \"surface.default\",\n padding: \"medium\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& h3\": {\n textDecoration: \"underline\",\n },\n \"& [data-forward]\": {\n transitionProperty: \"width, height\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"fast\",\n },\n _hover: {\n \"& h3\": {\n textDecoration: \"none\",\n },\n \"& [data-forward]\": {\n width: \"large\",\n height: \"large\",\n },\n },\n },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"xxsmall\",\n },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n base: {\n color: \"icon.strong\",\n },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n path?: string;\n articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n const href = getPossiblyRelativeUrl(url, path);\n const formattedDate = useMemo(() => {\n if (!date) return null;\n return new Intl.DateTimeFormat(articleLanguage, {\n timeZone: \"CET\",\n day: \"2-digit\",\n month: \"long\",\n year: \"numeric\",\n }).format(new Date(date));\n }, [date, articleLanguage]);\n return (\n <StyledSafeLink to={href} data-embed-type=\"link-block\">\n <InfoWrapper>\n <Heading asChild consumeCss textStyle=\"title.medium\">\n <h3 data-heading>{parse(title)}</h3>\n </Heading>\n {!!date && (\n <StyledDateContainer>\n <StyledCalendarEd />\n {formattedDate}\n </StyledDateContainer>\n )}\n </InfoWrapper>\n <ArrowRightLine data-forward />\n </StyledSafeLink>\n );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,YACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,OACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;EACT;CACF;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,qCAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOC,2BAAc,EAC5C,MAAM,EACJ,OAAO,cACR,EACF,EAAC;AAOF,MAAM,YAAY,CAAC,EAAE,OAAO,iBAAiB,MAAM,KAAK,MAAa,KAAK;CACxE,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"LinkBlock.js","names":["SafeLink","CalendarLine","Heading","ArrowRightLine"],"sources":["../../src/LinkBlock/LinkBlock.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 { useMemo } from \"react\";\nimport { ArrowRightLine, CalendarLine } from \"@ndla/icons\";\nimport { Heading } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { LinkBlockEmbedData } from \"@ndla/types-embed\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nconst InfoWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"xsmall\",\n },\n});\n\nconst StyledSafeLink = styled(SafeLink, {\n base: {\n display: \"flex\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n background: \"surface.default\",\n padding: \"medium\",\n border: \"1px solid\",\n borderColor: \"stroke.subtle\",\n borderRadius: \"xsmall\",\n \"& h3\": {\n textDecoration: \"underline\",\n },\n \"& [data-forward]\": {\n transitionProperty: \"width, height\",\n transitionTimingFunction: \"ease-in-out\",\n transitionDuration: \"fast\",\n },\n _hover: {\n \"& h3\": {\n textDecoration: \"none\",\n },\n \"& [data-forward]\": {\n width: \"large\",\n height: \"large\",\n },\n },\n },\n});\n\nconst StyledDateContainer = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n gap: \"xxsmall\",\n },\n});\n\nconst StyledCalendarEd = styled(CalendarLine, {\n base: {\n color: \"icon.strong\",\n },\n});\n\ninterface Props extends Omit<LinkBlockEmbedData, \"resource\"> {\n path?: string;\n articleLanguage?: string;\n}\n\nconst LinkBlock = ({ title, articleLanguage, date, url, path }: Props) => {\n const href = getPossiblyRelativeUrl(url, path);\n const formattedDate = useMemo(() => {\n if (!date) return null;\n return new Intl.DateTimeFormat(articleLanguage, {\n timeZone: \"CET\",\n day: \"2-digit\",\n month: \"long\",\n year: \"numeric\",\n }).format(new Date(date));\n }, [date, articleLanguage]);\n return (\n <StyledSafeLink to={href} data-embed-type=\"link-block\">\n <InfoWrapper>\n <Heading asChild consumeCss textStyle=\"title.medium\">\n <h3 data-heading>{parse(title)}</h3>\n </Heading>\n {!!date && (\n <StyledDateContainer>\n <StyledCalendarEd />\n {formattedDate}\n </StyledDateContainer>\n )}\n </InfoWrapper>\n <ArrowRightLine data-forward />\n </StyledSafeLink>\n );\n};\n\nexport default LinkBlock;\n"],"mappings":";;;;;;;;;;;AAiBA,MAAM,cAAc,qCAAO,OAAO,EAChC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOA,0BAAU,EACtC,MAAM;CACJ,SAAS;CACT,gBAAgB;CAChB,YAAY;CACZ,YAAY;CACZ,SAAS;CACT,QAAQ;CACR,aAAa;CACb,cAAc;CACd,QAAQ,EACN,gBAAgB,YACjB;CACD,oBAAoB;EAClB,oBAAoB;EACpB,0BAA0B;EAC1B,oBAAoB;CACrB;CACD,QAAQ;EACN,QAAQ,EACN,gBAAgB,OACjB;EACD,oBAAoB;GAClB,OAAO;GACP,QAAQ;EACT;CACF;AACF,EACF,EAAC;AAEF,MAAM,sBAAsB,qCAAO,OAAO,EACxC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,KAAK;AACN,EACF,EAAC;AAEF,MAAM,mBAAmB,qCAAOC,2BAAc,EAC5C,MAAM,EACJ,OAAO,cACR,EACF,EAAC;AAOF,MAAM,YAAY,CAAC,EAAE,OAAO,iBAAiB,MAAM,KAAK,MAAa,KAAK;CACxE,MAAM,OAAO,+GAAuB,KAAK,KAAK;CAC9C,MAAM,gBAAgB,mBAAQ,MAAM;AAClC,OAAK,KAAM,QAAO;AAClB,SAAO,IAAI,KAAK,eAAe,iBAAiB;GAC9C,UAAU;GACV,KAAK;GACL,OAAO;GACP,MAAM;EACP,GAAE,OAAO,IAAI,KAAK,MAAM;CAC1B,GAAE,CAAC,MAAM,eAAgB,EAAC;AAC3B,wBACE,4BAAC;EAAe,IAAI;EAAM,mBAAgB;6BACxC,4BAAC,0CACC,2BAACC;GAAQ;GAAQ;GAAW,WAAU;6BACpC,2BAAC;IAAG;cAAc,+BAAM,MAAM;KAAM;IAC5B,IACP,wBACD,4BAAC,kDACC,2BAAC,qBAAmB,EACnB,iBACmB,IAEZ,kBACd,2BAACC,+BAAe,uBAAe;GAChB;AAEpB;AAED,wBAAe"}
|
package/lib/Pitch/Pitch.js
CHANGED
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl = require('../utils/relativeUrl.js');
|
|
3
3
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
4
4
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
5
5
|
const html_react_parser = require_rolldown_runtime.__toESM(require("html-react-parser"));
|
|
@@ -21,7 +21,7 @@ const StyledCardImage = (0, __ndla_styled_system_jsx.styled)(__ndla_primitives.C
|
|
|
21
21
|
height: "unset"
|
|
22
22
|
} });
|
|
23
23
|
const Pitch = ({ title, url, metaImage, path, description }) => {
|
|
24
|
-
const href =
|
|
24
|
+
const href = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_utils_relativeUrl.getPossiblyRelativeUrl(url, path);
|
|
25
25
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(StyledCardRoot, {
|
|
26
26
|
variant: "subtle",
|
|
27
27
|
"data-embed-type": "pitch",
|
package/lib/Pitch/Pitch.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","SafeLink"],"sources":["../../src/Pitch/Pitch.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 parse from \"html-react-parser\";\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n title: string;\n url: string;\n description?: string;\n metaImage: {\n url: string;\n alt: string;\n };\n path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n base: {\n paddingBlockStart: \"medium\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n paddingBlockEnd: \"medium\",\n },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n base: {\n border: \"0\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"small\",\n },\n});\n\nconst StyledCardImage = styled(CardImage, {\n base: {\n aspectRatio: \"16/9\",\n height: \"unset\",\n },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n const href = getPossiblyRelativeUrl(url, path);\n\n return (\n <StyledCardRoot variant=\"subtle\" data-embed-type=\"pitch\" asChild consumeCss>\n <div>\n <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n {parse(title)}\n </SafeLink>\n </StyledCardHeading>\n {!!description && (\n <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n <div>{parse(description)}</div>\n </StyledText>\n )}\n <StyledCardImage\n variant=\"rounded\"\n src={metaImage.url}\n alt={metaImage.alt}\n sizes=\"480px\"\n fallbackWidth={300}\n width={550}\n height={310}\n />\n </div>\n </StyledCardRoot>\n );\n};\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,oBAAoB,qCAAOA,+BAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOC,4BAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAOC,6BAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,
|
|
1
|
+
{"version":3,"file":"Pitch.js","names":["CardHeading","Text","CardRoot","CardImage","SafeLink"],"sources":["../../src/Pitch/Pitch.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 parse from \"html-react-parser\";\nimport { CardHeading, CardImage, CardRoot, Text } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { getPossiblyRelativeUrl } from \"../utils/relativeUrl\";\n\nexport interface Props {\n title: string;\n url: string;\n description?: string;\n metaImage: {\n url: string;\n alt: string;\n };\n path?: string;\n}\n\nconst StyledCardHeading = styled(CardHeading, {\n base: {\n paddingBlockStart: \"medium\",\n },\n});\n\nconst StyledText = styled(Text, {\n base: {\n paddingBlockEnd: \"medium\",\n },\n});\n\nconst StyledCardRoot = styled(CardRoot, {\n base: {\n border: \"0\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"small\",\n },\n});\n\nconst StyledCardImage = styled(CardImage, {\n base: {\n aspectRatio: \"16/9\",\n height: \"unset\",\n },\n});\n\nexport const Pitch = ({ title, url, metaImage, path, description }: Props) => {\n const href = getPossiblyRelativeUrl(url, path);\n\n return (\n <StyledCardRoot variant=\"subtle\" data-embed-type=\"pitch\" asChild consumeCss>\n <div>\n <StyledCardHeading textStyle=\"heading.small\" asChild consumeCss>\n <SafeLink to={href} unstyled css={linkOverlay.raw()}>\n {parse(title)}\n </SafeLink>\n </StyledCardHeading>\n {!!description && (\n <StyledText textStyle=\"body.xlarge\" asChild consumeCss>\n <div>{parse(description)}</div>\n </StyledText>\n )}\n <StyledCardImage\n variant=\"rounded\"\n src={metaImage.url}\n alt={metaImage.alt}\n sizes=\"480px\"\n fallbackWidth={300}\n width={550}\n height={310}\n />\n </div>\n </StyledCardRoot>\n );\n};\n"],"mappings":";;;;;;;;;;AA0BA,MAAM,oBAAoB,qCAAOA,+BAAa,EAC5C,MAAM,EACJ,mBAAmB,SACpB,EACF,EAAC;AAEF,MAAM,aAAa,qCAAOC,wBAAM,EAC9B,MAAM,EACJ,iBAAiB,SAClB,EACF,EAAC;AAEF,MAAM,iBAAiB,qCAAOC,4BAAU,EACtC,MAAM;CACJ,QAAQ;CACR,SAAS;CACT,eAAe;CACf,KAAK;AACN,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAOC,6BAAW,EACxC,MAAM;CACJ,aAAa;CACb,QAAQ;AACT,EACF,EAAC;AAEF,MAAa,QAAQ,CAAC,EAAE,OAAO,KAAK,WAAW,MAAM,aAAoB,KAAK;CAC5E,MAAM,OAAO,+GAAuB,KAAK,KAAK;AAE9C,wBACE,2BAAC;EAAe,SAAQ;EAAS,mBAAgB;EAAQ;EAAQ;4BAC/D,4BAAC;mBACC,2BAAC;IAAkB,WAAU;IAAgB;IAAQ;8BACnD,2BAACC;KAAS,IAAI;KAAM;KAAS,KAAK,0CAAY,KAAK;eAChD,+BAAM,MAAM;MACJ;KACO;KACjB,+BACD,2BAAC;IAAW,WAAU;IAAc;IAAQ;8BAC1C,2BAAC,mBAAK,+BAAM,YAAY,GAAO;KACpB;mBAEf,2BAAC;IACC,SAAQ;IACR,KAAK,UAAU;IACf,KAAK,UAAU;IACf,OAAM;IACN,eAAe;IACf,OAAO;IACP,QAAQ;KACR;MACE;GACS;AAEpB"}
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType = require('../model/ContentType.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge = require('../ContentTypeBadge/ContentTypeBadge.js');
|
|
4
4
|
const react = require_rolldown_runtime.__toESM(require("react"));
|
|
5
5
|
const __ndla_primitives = require_rolldown_runtime.__toESM(require("@ndla/primitives"));
|
|
6
6
|
const __ndla_styled_system_jsx = require_rolldown_runtime.__toESM(require("@ndla/styled-system/jsx"));
|
|
@@ -15,11 +15,11 @@ const StyledSpan = (0, __ndla_styled_system_jsx.styled)("span", { base: {
|
|
|
15
15
|
display: "flex",
|
|
16
16
|
gap: "3xsmall"
|
|
17
17
|
} });
|
|
18
|
-
const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type =
|
|
18
|
+
const RelatedArticle = ({ title, introduction, to, linkInfo = "", target = "", type = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_model_ContentType.contentTypes.SUBJECT_MATERIAL }) => {
|
|
19
19
|
return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardRoot, {
|
|
20
20
|
"data-embed-type": "related-article",
|
|
21
21
|
children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(__ndla_primitives.CardContent, { children: [
|
|
22
|
-
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(
|
|
22
|
+
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_ContentTypeBadge_ContentTypeBadge.ContentTypeBadge, { contentType: type }),
|
|
23
23
|
/* @__PURE__ */ (0, react_jsx_runtime.jsx)(__ndla_primitives.CardHeading, {
|
|
24
24
|
asChild: true,
|
|
25
25
|
consumeCss: true,
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","ExternalLinkLine","Text","Button","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.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 { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n title: string;\n introduction: string;\n to: string;\n linkInfo?: string;\n target?: string;\n type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n },\n});\n\nexport const RelatedArticle = ({\n title,\n introduction,\n to,\n linkInfo = \"\",\n target = \"\",\n type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n return (\n <CardRoot data-embed-type=\"related-article\">\n <CardContent>\n <ContentTypeBadge contentType={type} />\n <CardHeading asChild consumeCss>\n <span>\n <SafeLink\n unstyled\n to={to}\n target={target}\n rel={linkInfo ? \"noopener noreferrer\" : undefined}\n css={linkOverlay.raw()}\n >\n <StyledSpan>\n {title}\n {target === \"_blank\" && <ExternalLinkLine />}\n </StyledSpan>\n </SafeLink>\n </span>\n </CardHeading>\n <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n <Text color=\"text.subtle\" textStyle=\"label.small\">\n {linkInfo}\n </Text>\n </CardContent>\n </CardRoot>\n );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n alignSelf: \"flex-start\",\n },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n base: {\n display: \"grid\",\n width: \"100%\",\n gridTemplateColumns: \"repeat(2, 1fr)\",\n gap: \"medium\",\n tabletDown: {\n gridTemplateColumns: \"1fr\",\n },\n },\n});\n\nconst StyledSection = styled(\"section\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"medium\",\n clear: \"both\",\n },\n});\n\nconst StyledButton = styled(Button, {\n base: {\n marginBlockStart: \"xsmall\",\n },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n children?: ReactElement[];\n articleCount?: number;\n headingLevel?: HeadingLevel;\n headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n children = [],\n articleCount,\n headingLevel: HeadingElement = \"h2\",\n headingButtons,\n ...rest\n}: Props) => {\n const [expanded, setExpanded] = useState(false);\n const { t } = useTranslation();\n const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n const childrenToShow = useMemo(\n () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n [childCount, children, expanded],\n );\n\n return (\n <StyledSection {...rest} data-embed-type=\"related-content-list\">\n <HeadingWrapper>\n <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n <HeadingElement>{t(\"related.title\")}</HeadingElement>\n </Heading>\n {headingButtons}\n </HeadingWrapper>\n <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n {childCount > 2 ? (\n <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n </StyledButton>\n ) : null}\n </StyledSection>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,qCAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAa,iBAAiB,CAAC,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,
|
|
1
|
+
{"version":3,"file":"RelatedArticleList.js","names":["contentTypes","CardRoot","CardContent","ContentTypeBadge","CardHeading","SafeLink","ExternalLinkLine","Text","Button","Heading"],"sources":["../../src/RelatedArticleList/RelatedArticleList.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 { Children, type ComponentPropsWithoutRef, type ReactElement, type ReactNode, useMemo, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ExternalLinkLine } from \"@ndla/icons\";\nimport { CardContent, CardHeading, CardRoot, Text, Heading, Button } from \"@ndla/primitives\";\nimport { SafeLink } from \"@ndla/safelink\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { linkOverlay } from \"@ndla/styled-system/patterns\";\nimport { ContentTypeBadge } from \"../ContentTypeBadge/ContentTypeBadge\";\nimport { contentTypes } from \"../model/ContentType\";\nimport type { HeadingLevel } from \"../types\";\n\ninterface RelatedArticleProps {\n title: string;\n introduction: string;\n to: string;\n linkInfo?: string;\n target?: string;\n type?: string;\n}\n\nconst StyledSpan = styled(\"span\", {\n base: {\n display: \"flex\",\n gap: \"3xsmall\",\n },\n});\n\nexport const RelatedArticle = ({\n title,\n introduction,\n to,\n linkInfo = \"\",\n target = \"\",\n type = contentTypes.SUBJECT_MATERIAL,\n}: RelatedArticleProps) => {\n return (\n <CardRoot data-embed-type=\"related-article\">\n <CardContent>\n <ContentTypeBadge contentType={type} />\n <CardHeading asChild consumeCss>\n <span>\n <SafeLink\n unstyled\n to={to}\n target={target}\n rel={linkInfo ? \"noopener noreferrer\" : undefined}\n css={linkOverlay.raw()}\n >\n <StyledSpan>\n {title}\n {target === \"_blank\" && <ExternalLinkLine />}\n </StyledSpan>\n </SafeLink>\n </span>\n </CardHeading>\n <Text dangerouslySetInnerHTML={{ __html: introduction }} />\n <Text color=\"text.subtle\" textStyle=\"label.small\">\n {linkInfo}\n </Text>\n </CardContent>\n </CardRoot>\n );\n};\n\nconst HeadingWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n width: \"100%\",\n justifyContent: \"space-between\",\n alignItems: \"center\",\n alignSelf: \"flex-start\",\n },\n});\n\nconst ArticlesWrapper = styled(\"div\", {\n base: {\n display: \"grid\",\n width: \"100%\",\n gridTemplateColumns: \"repeat(2, 1fr)\",\n gap: \"medium\",\n tabletDown: {\n gridTemplateColumns: \"1fr\",\n },\n },\n});\n\nconst StyledSection = styled(\"section\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n alignItems: \"center\",\n gap: \"medium\",\n clear: \"both\",\n },\n});\n\nconst StyledButton = styled(Button, {\n base: {\n marginBlockStart: \"xsmall\",\n },\n});\n\ninterface Props extends ComponentPropsWithoutRef<\"section\"> {\n children?: ReactElement[];\n articleCount?: number;\n headingLevel?: HeadingLevel;\n headingButtons?: ReactNode;\n}\n\nexport const RelatedArticleList = ({\n children = [],\n articleCount,\n headingLevel: HeadingElement = \"h2\",\n headingButtons,\n ...rest\n}: Props) => {\n const [expanded, setExpanded] = useState(false);\n const { t } = useTranslation();\n const childCount = useMemo(() => articleCount ?? Children.count(children), [children, articleCount]);\n const childrenToShow = useMemo(\n () => (childCount > 2 && !expanded ? children?.slice(0, 2) : children),\n [childCount, children, expanded],\n );\n\n return (\n <StyledSection {...rest} data-embed-type=\"related-content-list\">\n <HeadingWrapper>\n <Heading asChild consumeCss textStyle=\"title.large\" fontWeight=\"bold\">\n <HeadingElement>{t(\"related.title\")}</HeadingElement>\n </Heading>\n {headingButtons}\n </HeadingWrapper>\n <ArticlesWrapper>{childrenToShow}</ArticlesWrapper>\n {childCount > 2 ? (\n <StyledButton variant=\"secondary\" onClick={() => setExpanded((p) => !p)}>\n {t(`related.show${expanded ? \"Less\" : \"More\"}`)}\n </StyledButton>\n ) : null}\n </StyledSection>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AA4BA,MAAM,aAAa,qCAAO,QAAQ,EAChC,MAAM;CACJ,SAAS;CACT,KAAK;AACN,EACF,EAAC;AAEF,MAAa,iBAAiB,CAAC,EAC7B,OACA,cACA,IACA,WAAW,IACX,SAAS,IACT,OAAOA,qGAAa,kBACA,KAAK;AACzB,wBACE,2BAACC;EAAS,mBAAgB;4BACxB,4BAACC;mBACC,2BAACC,4HAAiB,aAAa,OAAQ;mBACvC,2BAACC;IAAY;IAAQ;8BACnB,2BAAC,oCACC,2BAACC;KACC;KACI;KACI;KACR,KAAK,WAAW;KAChB,KAAK,0CAAY,KAAK;+BAEtB,4BAAC,yBACE,OACA,WAAW,4BAAY,2BAACC,kCAAmB,IACjC;MACJ,GACN;KACK;mBACd,2BAACC,0BAAK,yBAAyB,EAAE,QAAQ,aAAc,IAAI;mBAC3D,2BAACA;IAAK,OAAM;IAAc,WAAU;cACjC;KACI;MACK;GACL;AAEd;AAED,MAAM,iBAAiB,qCAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,gBAAgB;CAChB,YAAY;CACZ,WAAW;AACZ,EACF,EAAC;AAEF,MAAM,kBAAkB,qCAAO,OAAO,EACpC,MAAM;CACJ,SAAS;CACT,OAAO;CACP,qBAAqB;CACrB,KAAK;CACL,YAAY,EACV,qBAAqB,MACtB;AACF,EACF,EAAC;AAEF,MAAM,gBAAgB,qCAAO,WAAW,EACtC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,YAAY;CACZ,KAAK;CACL,OAAO;AACR,EACF,EAAC;AAEF,MAAM,eAAe,qCAAOC,0BAAQ,EAClC,MAAM,EACJ,kBAAkB,SACnB,EACF,EAAC;AASF,MAAa,qBAAqB,CAAC,EACjC,WAAW,CAAE,GACb,cACA,cAAc,iBAAiB,MAC/B,eACA,GAAG,MACG,KAAK;CACX,MAAM,CAAC,UAAU,YAAY,GAAG,oBAAS,MAAM;CAC/C,MAAM,EAAE,GAAG,GAAG,mCAAgB;CAC9B,MAAM,aAAa,mBAAQ,MAAM,gBAAgB,eAAS,MAAM,SAAS,EAAE,CAAC,UAAU,YAAa,EAAC;CACpG,MAAM,iBAAiB,mBACrB,MAAO,aAAa,MAAM,WAAW,UAAU,MAAM,GAAG,EAAE,GAAG,UAC7D;EAAC;EAAY;EAAU;CAAS,EACjC;AAED,wBACE,4BAAC;EAAc,GAAI;EAAM,mBAAgB;;mBACvC,4BAAC,6CACC,2BAACC;IAAQ;IAAQ;IAAW,WAAU;IAAc,YAAW;8BAC7D,2BAAC,4BAAgB,EAAE,gBAAgB,GAAkB;KAC7C,EACT,kBACc;mBACjB,2BAAC,6BAAiB,iBAAiC;GAClD,aAAa,oBACZ,2BAAC;IAAa,SAAQ;IAAY,SAAS,MAAM,YAAY,CAAC,OAAO,EAAE;cACpE,GAAG,cAAc,WAAW,SAAS,OAAO,EAAE;KAClC,GACb;;GACU;AAEnB"}
|
|
@@ -1,7 +1,7 @@
|
|
|
1
|
-
const
|
|
1
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList = require('./RelatedArticleList.js');
|
|
2
2
|
|
|
3
3
|
//#region src/RelatedArticleList/index.ts
|
|
4
|
-
var RelatedArticleList_default =
|
|
4
|
+
var RelatedArticleList_default = require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_RelatedArticleList_RelatedArticleList.RelatedArticleList;
|
|
5
5
|
|
|
6
6
|
//#endregion
|
|
7
7
|
exports.RelatedArticleList_default = RelatedArticleList_default;
|
package/lib/i18n/i18n.js
CHANGED
|
@@ -1,8 +1,8 @@
|
|
|
1
1
|
const require_rolldown_runtime = require('../_virtual/rolldown_runtime.js');
|
|
2
|
-
const
|
|
3
|
-
const
|
|
4
|
-
const
|
|
5
|
-
const
|
|
2
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_en = require('../locale/messages-en.js');
|
|
3
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_nb = require('../locale/messages-nb.js');
|
|
4
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_nn = require('../locale/messages-nn.js');
|
|
5
|
+
const require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_se = require('../locale/messages-se.js');
|
|
6
6
|
const react_i18next = require_rolldown_runtime.__toESM(require("react-i18next"));
|
|
7
7
|
const i18next = require_rolldown_runtime.__toESM(require("i18next"));
|
|
8
8
|
|
|
@@ -18,10 +18,10 @@ i18nInstance.init({
|
|
|
18
18
|
fallbackLng: "nb",
|
|
19
19
|
supportedLngs: supportedTranslationLanguages,
|
|
20
20
|
resources: {
|
|
21
|
-
en: { translation:
|
|
22
|
-
nn: { translation:
|
|
23
|
-
nb: { translation:
|
|
24
|
-
se: { translation:
|
|
21
|
+
en: { translation: require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_en.messages_en_default },
|
|
22
|
+
nn: { translation: require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_nn.messages_nn_default },
|
|
23
|
+
nb: { translation: require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_nb.messages_nb_default },
|
|
24
|
+
se: { translation: require__home_gunnar_kode_ndla_frontend_packages_packages_ndla_ui_src_locale_messages_se.messages_se_default }
|
|
25
25
|
}
|
|
26
26
|
});
|
|
27
27
|
|
package/lib/i18n/i18n.js.map
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"i18n.js","names":["initReactI18next","messagesEN","messagesNN","messagesNB","messagesSE"],"sources":["../../src/i18n/i18n.ts"],"sourcesContent":["/**\n * Copyright (c) 2021-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 i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport messagesEN from \"../locale/messages-en\";\nimport messagesNB from \"../locale/messages-nb\";\nimport messagesNN from \"../locale/messages-nn\";\nimport messagesSE from \"../locale/messages-se\";\n\nexport const supportedTranslationLanguages = [\"nb\", \"nn\", \"en\", \"se\"] as const;\nconst i18nInstance = i18n.use(initReactI18next);\n\ni18nInstance.init({\n fallbackLng: \"nb\",\n supportedLngs: supportedTranslationLanguages,\n resources: {\n en: {\n translation: messagesEN,\n },\n nn: {\n translation: messagesNN,\n },\n nb: {\n translation: messagesNB,\n },\n se: {\n translation: messagesSE,\n },\n },\n});\n\nexport { i18nInstance };\n"],"mappings":";;;;;;;;;AAeA,MAAa,gCAAgC;CAAC;CAAM;CAAM;CAAM;AAAK;AACrE,MAAM,eAAe,gBAAK,IAAIA,+BAAiB;AAE/C,aAAa,KAAK;CAChB,aAAa;CACb,eAAe;CACf,WAAW;EACT,IAAI,EACF,aAAaC,
|
|
1
|
+
{"version":3,"file":"i18n.js","names":["initReactI18next","messagesEN","messagesNN","messagesNB","messagesSE"],"sources":["../../src/i18n/i18n.ts"],"sourcesContent":["/**\n * Copyright (c) 2021-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 i18n from \"i18next\";\nimport { initReactI18next } from \"react-i18next\";\nimport messagesEN from \"../locale/messages-en\";\nimport messagesNB from \"../locale/messages-nb\";\nimport messagesNN from \"../locale/messages-nn\";\nimport messagesSE from \"../locale/messages-se\";\n\nexport const supportedTranslationLanguages = [\"nb\", \"nn\", \"en\", \"se\"] as const;\nconst i18nInstance = i18n.use(initReactI18next);\n\ni18nInstance.init({\n fallbackLng: \"nb\",\n supportedLngs: supportedTranslationLanguages,\n resources: {\n en: {\n translation: messagesEN,\n },\n nn: {\n translation: messagesNN,\n },\n nb: {\n translation: messagesNB,\n },\n se: {\n translation: messagesSE,\n },\n },\n});\n\nexport { i18nInstance };\n"],"mappings":";;;;;;;;;AAeA,MAAa,gCAAgC;CAAC;CAAM;CAAM;CAAM;AAAK;AACrE,MAAM,eAAe,gBAAK,IAAIA,+BAAiB;AAE/C,aAAa,KAAK;CAChB,aAAa;CACb,eAAe;CACf,WAAW;EACT,IAAI,EACF,aAAaC,6GACd;EACD,IAAI,EACF,aAAaC,6GACd;EACD,IAAI,EACF,aAAaC,6GACd;EACD,IAAI,EACF,aAAaC,6GACd;CACF;AACF,EAAC"}
|