@ndla/ui 56.0.180-alpha.0 → 56.0.182-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/AnchorHeading/AnchorHeading.mjs +1 -2
- package/es/AnchorHeading/AnchorHeading.mjs.map +1 -1
- package/es/Article/Article.mjs +1 -2
- package/es/Article/Article.mjs.map +1 -1
- package/es/Article/ArticleByline.mjs +1 -2
- package/es/Article/ArticleByline.mjs.map +1 -1
- package/es/Article/ArticleFootNotes.mjs +1 -2
- package/es/Article/ArticleFootNotes.mjs.map +1 -1
- package/es/Article/BadgesContainer.mjs +1 -2
- package/es/Article/BadgesContainer.mjs.map +1 -1
- package/es/AudioPlayer/AudioPlayer.mjs +1 -2
- package/es/AudioPlayer/AudioPlayer.mjs.map +1 -1
- package/es/AudioPlayer/Controls.mjs +1 -2
- package/es/AudioPlayer/Controls.mjs.map +1 -1
- package/es/AudioPlayer/SpeechControl.mjs +1 -2
- package/es/AudioPlayer/SpeechControl.mjs.map +1 -1
- package/es/Breadcrumb/Breadcrumb.mjs +1 -2
- package/es/Breadcrumb/Breadcrumb.mjs.map +1 -1
- package/es/Breadcrumb/BreadcrumbItem.mjs +1 -2
- package/es/Breadcrumb/BreadcrumbItem.mjs.map +1 -1
- package/es/Breadcrumb/HomeBreadcrumb.mjs +1 -2
- package/es/Breadcrumb/HomeBreadcrumb.mjs.map +1 -1
- package/es/CampaignBlock/CampaignBlock.mjs +1 -2
- package/es/CampaignBlock/CampaignBlock.mjs.map +1 -1
- package/es/CodeBlock/CodeBlock.mjs +1 -2
- package/es/CodeBlock/CodeBlock.mjs.map +1 -1
- package/es/CodeBlock/codeLanguageOptions.mjs +1 -1
- package/es/Concept/Concept.mjs +1 -2
- package/es/Concept/Concept.mjs.map +1 -1
- package/es/ContactBlock/ContactBlock.mjs +1 -2
- package/es/ContactBlock/ContactBlock.mjs.map +1 -1
- package/es/Embed/AudioEmbed.mjs +1 -2
- package/es/Embed/AudioEmbed.mjs.map +1 -1
- package/es/Embed/BrightcoveEmbed.mjs +1 -2
- package/es/Embed/BrightcoveEmbed.mjs.map +1 -1
- package/es/Embed/CodeEmbed.mjs +1 -2
- package/es/Embed/CodeEmbed.mjs.map +1 -1
- package/es/Embed/ConceptEmbed.mjs +1 -2
- package/es/Embed/ConceptEmbed.mjs.map +1 -1
- package/es/Embed/ConceptInlineTriggerButton.mjs +1 -2
- package/es/Embed/ConceptInlineTriggerButton.mjs.map +1 -1
- package/es/Embed/ContentLinkEmbed.mjs +1 -2
- package/es/Embed/ContentLinkEmbed.mjs.map +1 -1
- package/es/Embed/CopyrightEmbed.mjs +1 -2
- package/es/Embed/CopyrightEmbed.mjs.map +1 -1
- package/es/Embed/EmbedErrorPlaceholder.mjs +1 -2
- package/es/Embed/EmbedErrorPlaceholder.mjs.map +1 -1
- package/es/Embed/EmbedWrapper.mjs +1 -2
- package/es/Embed/EmbedWrapper.mjs.map +1 -1
- package/es/Embed/ExternalEmbed.mjs +1 -2
- package/es/Embed/ExternalEmbed.mjs.map +1 -1
- package/es/Embed/FootnoteEmbed.mjs +1 -2
- package/es/Embed/FootnoteEmbed.mjs.map +1 -1
- package/es/Embed/GlossEmbed.mjs +1 -2
- package/es/Embed/GlossEmbed.mjs.map +1 -1
- package/es/Embed/H5pEmbed.mjs +1 -2
- package/es/Embed/H5pEmbed.mjs.map +1 -1
- package/es/Embed/IframeEmbed.mjs +1 -2
- package/es/Embed/IframeEmbed.mjs.map +1 -1
- package/es/Embed/ImageEmbed.mjs +1 -2
- package/es/Embed/ImageEmbed.mjs.map +1 -1
- package/es/Embed/InlineTriggerButton.mjs +1 -2
- package/es/Embed/InlineTriggerButton.mjs.map +1 -1
- package/es/Embed/RelatedContentEmbed.mjs +1 -2
- package/es/Embed/RelatedContentEmbed.mjs.map +1 -1
- package/es/Embed/UnknownEmbed.mjs +1 -2
- package/es/Embed/UnknownEmbed.mjs.map +1 -1
- package/es/Embed/UuDisclaimerEmbed.mjs +1 -2
- package/es/Embed/UuDisclaimerEmbed.mjs.map +1 -1
- package/es/FactBox/FactBox.mjs +1 -2
- package/es/FactBox/FactBox.mjs.map +1 -1
- package/es/FileList/File.mjs +1 -2
- package/es/FileList/File.mjs.map +1 -1
- package/es/FileList/FileList.mjs +1 -2
- package/es/FileList/FileList.mjs.map +1 -1
- package/es/FileList/PdfFile.mjs +1 -2
- package/es/FileList/PdfFile.mjs.map +1 -1
- package/es/Gloss/Gloss.mjs +1 -2
- package/es/Gloss/Gloss.mjs.map +1 -1
- package/es/Gloss/GlossExample.mjs +1 -2
- package/es/Gloss/GlossExample.mjs.map +1 -1
- package/es/Grid/Grid.mjs +1 -2
- package/es/Grid/Grid.mjs.map +1 -1
- package/es/KeyFigure/KeyFigure.mjs +1 -2
- package/es/KeyFigure/KeyFigure.mjs.map +1 -1
- package/es/LicenseByline/EmbedByline.mjs +1 -2
- package/es/LicenseByline/EmbedByline.mjs.map +1 -1
- package/es/LicenseByline/LicenseLink.mjs +1 -2
- package/es/LicenseByline/LicenseLink.mjs.map +1 -1
- package/es/LinkBlock/LinkBlock.mjs +1 -2
- package/es/LinkBlock/LinkBlock.mjs.map +1 -1
- package/es/LinkBlock/LinkBlockSection.mjs +1 -2
- package/es/LinkBlock/LinkBlockSection.mjs.map +1 -1
- package/es/Pitch/Pitch.mjs +1 -2
- package/es/Pitch/Pitch.mjs.map +1 -1
- package/es/RelatedArticleList/RelatedArticleList.mjs +1 -2
- package/es/RelatedArticleList/RelatedArticleList.mjs.map +1 -1
- package/es/ResourceBox/ResourceBox.mjs +1 -2
- package/es/ResourceBox/ResourceBox.mjs.map +1 -1
- package/es/TagSelector/TagSelector.mjs +1 -2
- package/es/TagSelector/TagSelector.mjs.map +1 -1
- package/es/ZendeskButton/ZendeskButton.mjs +1 -2
- package/es/ZendeskButton/ZendeskButton.mjs.map +1 -1
- package/es/_virtual/_rolldown/runtime.mjs +6 -11
- package/es/i18n/useComponentTranslations.mjs +1 -2
- package/es/i18n/useComponentTranslations.mjs.map +1 -1
- package/es/index.mjs +1 -2
- package/es/model/ContentType.mjs +1 -1
- package/es/model/SubjectCategories.mjs +1 -2
- package/es/model/SubjectCategories.mjs.map +1 -1
- package/es/model/SubjectTypes.mjs +1 -2
- package/es/model/SubjectTypes.mjs.map +1 -1
- package/es/model/WordClass.mjs +1 -2
- package/es/model/WordClass.mjs.map +1 -1
- package/es/model/index.mjs +1 -2
- package/es/model/index.mjs.map +1 -1
- package/es/utils/licenseAttributes.mjs +1 -2
- package/es/utils/licenseAttributes.mjs.map +1 -1
- package/es/utils/relativeUrl.mjs +1 -1
- package/lib/AnchorHeading/AnchorHeading.js +2 -3
- package/lib/AnchorHeading/AnchorHeading.js.map +1 -1
- package/lib/Article/Article.js +3 -4
- package/lib/Article/Article.js.map +1 -1
- package/lib/Article/ArticleByline.js +3 -4
- package/lib/Article/ArticleByline.js.map +1 -1
- package/lib/Article/ArticleFootNotes.js +2 -3
- package/lib/Article/ArticleFootNotes.js.map +1 -1
- package/lib/Article/BadgesContainer.js +3 -5
- package/lib/Article/BadgesContainer.js.map +1 -1
- package/lib/AudioPlayer/AudioPlayer.js +4 -5
- package/lib/AudioPlayer/AudioPlayer.js.map +1 -1
- package/lib/AudioPlayer/Controls.js +2 -3
- package/lib/AudioPlayer/Controls.js.map +1 -1
- package/lib/AudioPlayer/SpeechControl.js +2 -3
- package/lib/AudioPlayer/SpeechControl.js.map +1 -1
- package/lib/Breadcrumb/Breadcrumb.js +4 -5
- package/lib/Breadcrumb/Breadcrumb.js.map +1 -1
- package/lib/Breadcrumb/BreadcrumbItem.js +3 -4
- package/lib/Breadcrumb/BreadcrumbItem.js.map +1 -1
- package/lib/Breadcrumb/HomeBreadcrumb.js +3 -4
- package/lib/Breadcrumb/HomeBreadcrumb.js.map +1 -1
- package/lib/CampaignBlock/CampaignBlock.js +4 -5
- package/lib/CampaignBlock/CampaignBlock.js.map +1 -1
- package/lib/CodeBlock/CodeBlock.js +2 -3
- package/lib/CodeBlock/CodeBlock.js.map +1 -1
- package/lib/CodeBlock/codeLanguageOptions.js +1 -2
- package/lib/CodeBlock/codeLanguageOptions.js.map +1 -1
- package/lib/Concept/Concept.js +9 -10
- package/lib/Concept/Concept.js.map +1 -1
- package/lib/ContactBlock/ContactBlock.js +3 -4
- package/lib/ContactBlock/ContactBlock.js.map +1 -1
- package/lib/Embed/AudioEmbed.js +6 -7
- package/lib/Embed/AudioEmbed.js.map +1 -1
- package/lib/Embed/BrightcoveEmbed.js +5 -6
- package/lib/Embed/BrightcoveEmbed.js.map +1 -1
- package/lib/Embed/CodeEmbed.js +5 -6
- package/lib/Embed/CodeEmbed.js.map +1 -1
- package/lib/Embed/ConceptEmbed.js +6 -7
- package/lib/Embed/ConceptEmbed.js.map +1 -1
- package/lib/Embed/ConceptInlineTriggerButton.js +4 -6
- package/lib/Embed/ConceptInlineTriggerButton.js.map +1 -1
- package/lib/Embed/ContentLinkEmbed.js +2 -3
- package/lib/Embed/ContentLinkEmbed.js.map +1 -1
- package/lib/Embed/CopyrightEmbed.js +3 -4
- package/lib/Embed/CopyrightEmbed.js.map +1 -1
- package/lib/Embed/EmbedErrorPlaceholder.js +4 -5
- package/lib/Embed/EmbedErrorPlaceholder.js.map +1 -1
- package/lib/Embed/EmbedWrapper.js +2 -3
- package/lib/Embed/EmbedWrapper.js.map +1 -1
- package/lib/Embed/ExternalEmbed.js +4 -5
- package/lib/Embed/ExternalEmbed.js.map +1 -1
- package/lib/Embed/FootnoteEmbed.js +2 -3
- package/lib/Embed/FootnoteEmbed.js.map +1 -1
- package/lib/Embed/GlossEmbed.js +5 -6
- package/lib/Embed/GlossEmbed.js.map +1 -1
- package/lib/Embed/H5pEmbed.js +3 -4
- package/lib/Embed/H5pEmbed.js.map +1 -1
- package/lib/Embed/IframeEmbed.js +4 -5
- package/lib/Embed/IframeEmbed.js.map +1 -1
- package/lib/Embed/ImageEmbed.js +5 -6
- package/lib/Embed/ImageEmbed.js.map +1 -1
- package/lib/Embed/InlineTriggerButton.js +2 -3
- package/lib/Embed/InlineTriggerButton.js.map +1 -1
- package/lib/Embed/RelatedContentEmbed.js +3 -4
- package/lib/Embed/RelatedContentEmbed.js.map +1 -1
- package/lib/Embed/UnknownEmbed.js +2 -3
- package/lib/Embed/UnknownEmbed.js.map +1 -1
- package/lib/Embed/UuDisclaimerEmbed.js +3 -4
- package/lib/Embed/UuDisclaimerEmbed.js.map +1 -1
- package/lib/FactBox/FactBox.js +2 -3
- package/lib/FactBox/FactBox.js.map +1 -1
- package/lib/FileList/File.js +3 -4
- package/lib/FileList/File.js.map +1 -1
- package/lib/FileList/FileList.js +3 -4
- package/lib/FileList/FileList.js.map +1 -1
- package/lib/FileList/PdfFile.js +2 -3
- package/lib/FileList/PdfFile.js.map +1 -1
- package/lib/Gloss/Gloss.js +4 -5
- package/lib/Gloss/Gloss.js.map +1 -1
- package/lib/Gloss/GlossExample.js +2 -3
- package/lib/Gloss/GlossExample.js.map +1 -1
- package/lib/Grid/Grid.js +3 -4
- package/lib/Grid/Grid.js.map +1 -1
- package/lib/KeyFigure/KeyFigure.js +2 -3
- package/lib/KeyFigure/KeyFigure.js.map +1 -1
- package/lib/LicenseByline/EmbedByline.js +3 -4
- package/lib/LicenseByline/EmbedByline.js.map +1 -1
- package/lib/LicenseByline/LicenseLink.js +2 -3
- package/lib/LicenseByline/LicenseLink.js.map +1 -1
- package/lib/LinkBlock/LinkBlock.js +3 -4
- package/lib/LinkBlock/LinkBlock.js.map +1 -1
- package/lib/LinkBlock/LinkBlockSection.js +2 -3
- package/lib/LinkBlock/LinkBlockSection.js.map +1 -1
- package/lib/Pitch/Pitch.js +3 -4
- package/lib/Pitch/Pitch.js.map +1 -1
- package/lib/RelatedArticleList/RelatedArticleList.js +2 -3
- package/lib/RelatedArticleList/RelatedArticleList.js.map +1 -1
- package/lib/ResourceBox/ResourceBox.js +2 -3
- package/lib/ResourceBox/ResourceBox.js.map +1 -1
- package/lib/TagSelector/TagSelector.js +2 -3
- package/lib/TagSelector/TagSelector.js.map +1 -1
- package/lib/ZendeskButton/ZendeskButton.js +2 -3
- package/lib/ZendeskButton/ZendeskButton.js.map +1 -1
- package/lib/_virtual/_rolldown/runtime.js +12 -22
- package/lib/i18n/useComponentTranslations.js +2 -3
- package/lib/i18n/useComponentTranslations.js.map +1 -1
- package/lib/index.js +78 -79
- package/lib/model/ContentType.js +1 -2
- package/lib/model/ContentType.js.map +1 -1
- package/lib/model/SubjectCategories.js +7 -9
- package/lib/model/SubjectCategories.js.map +1 -1
- package/lib/model/SubjectTypes.js +7 -9
- package/lib/model/SubjectTypes.js.map +1 -1
- package/lib/model/WordClass.js +7 -9
- package/lib/model/WordClass.js.map +1 -1
- package/lib/model/index.js +5 -6
- package/lib/model/index.js.map +1 -1
- package/lib/utils/licenseAttributes.js +2 -3
- package/lib/utils/licenseAttributes.js.map +1 -1
- package/lib/utils/relativeUrl.js +1 -2
- package/lib/utils/relativeUrl.js.map +1 -1
- package/package.json +6 -6
- package/src/AudioPlayer/Controls.tsx +1 -1
- package/src/AudioPlayer/SpeechControl.tsx +1 -1
- package/src/Embed/InlineTriggerButton.tsx +1 -0
- package/src/Grid/Grid.stories.tsx +3 -3
package/es/Concept/Concept.mjs
CHANGED
|
@@ -9,7 +9,6 @@ import { Figure } from "@ndla/primitives";
|
|
|
9
9
|
import { styled } from "@ndla/styled-system/jsx";
|
|
10
10
|
import { forwardRef } from "react";
|
|
11
11
|
import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
|
|
12
|
-
|
|
13
12
|
//#region src/Concept/Concept.tsx
|
|
14
13
|
/**
|
|
15
14
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -51,7 +50,7 @@ const Concept = forwardRef(({ copyright, visualElement, lang, children, title, s
|
|
|
51
50
|
]
|
|
52
51
|
});
|
|
53
52
|
});
|
|
54
|
-
|
|
55
53
|
//#endregion
|
|
56
54
|
export { Concept };
|
|
55
|
+
|
|
57
56
|
//# sourceMappingURL=Concept.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"Concept.mjs","names":[],"sources":["../../src/Concept/Concept.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n copyright?: ConceptCopyright;\n visualElement?: ConceptVisualElementMeta;\n lang?: string;\n title?: ReactNode;\n children?: ReactNode;\n source?: string;\n previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n textStyle: \"body.large\",\n display: \"inline\",\n \"& p\": {\n display: \"inline\",\n },\n },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n return (\n <StyledFigure ref={ref} {...rest} {...licenseProps}>\n <ContentWrapper lang={lang}>\n {!!title && (\n <>\n <b>{title}</b>\n {` – `}\n </>\n )}\n {children}\n </ContentWrapper>\n {visualElement?.resource === \"image\" ? (\n <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n ) : visualElement?.resource === \"brightcove\" ? (\n <BrightcoveEmbed embed={visualElement} />\n ) : visualElement?.resource === \"h5p\" ? (\n <H5pEmbed embed={visualElement} />\n ) : visualElement?.resource === \"iframe\" ? (\n <IframeEmbed embed={visualElement} />\n ) : visualElement?.resource === \"external\" ? (\n <ExternalEmbed embed={visualElement} />\n ) : null}\n {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n </StyledFigure>\n );\n },\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"Concept.mjs","names":[],"sources":["../../src/Concept/Concept.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { DraftCopyrightDTO as ConceptCopyright } from \"@ndla/types-backend/concept-api\";\nimport type { ConceptVisualElementMeta } from \"@ndla/types-embed\";\nimport { type ComponentPropsWithRef, type ReactNode, forwardRef } from \"react\";\nimport { BrightcoveEmbed } from \"../Embed/BrightcoveEmbed\";\nimport { ExternalEmbed } from \"../Embed/ExternalEmbed\";\nimport { H5pEmbed } from \"../Embed/H5pEmbed\";\nimport { IframeEmbed } from \"../Embed/IframeEmbed\";\nimport { ImageEmbed } from \"../Embed/ImageEmbed\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\n\nexport interface ConceptProps extends Omit<ComponentPropsWithRef<\"figure\">, \"title\"> {\n copyright?: ConceptCopyright;\n visualElement?: ConceptVisualElementMeta;\n lang?: string;\n title?: ReactNode;\n children?: ReactNode;\n source?: string;\n previewAlt?: boolean;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n textStyle: \"body.large\",\n display: \"inline\",\n \"& p\": {\n display: \"inline\",\n },\n },\n});\n\nexport const Concept = forwardRef<HTMLElement, ConceptProps>(\n ({ copyright, visualElement, lang, children, title, source, previewAlt, ...rest }, ref) => {\n const licenseProps = licenseAttributes(copyright?.license?.license, lang, source);\n\n return (\n <StyledFigure ref={ref} {...rest} {...licenseProps}>\n <ContentWrapper lang={lang}>\n {!!title && (\n <>\n <b>{title}</b>\n {` – `}\n </>\n )}\n {children}\n </ContentWrapper>\n {visualElement?.resource === \"image\" ? (\n <ImageEmbed embed={visualElement} lang={lang} previewAlt={previewAlt} />\n ) : visualElement?.resource === \"brightcove\" ? (\n <BrightcoveEmbed embed={visualElement} />\n ) : visualElement?.resource === \"h5p\" ? (\n <H5pEmbed embed={visualElement} />\n ) : visualElement?.resource === \"iframe\" ? (\n <IframeEmbed embed={visualElement} />\n ) : visualElement?.resource === \"external\" ? (\n <ExternalEmbed embed={visualElement} />\n ) : null}\n {!!copyright && <EmbedByline copyright={copyright} type=\"concept\" />}\n </StyledFigure>\n );\n },\n);\n"],"mappings":";;;;;;;;;;;;;;;;;;;AA+BA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACN,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,WAAW;CACX,SAAS;CACT,OAAO,EACL,SAAS,UACV;CACF,EACF,CAAC;AAEF,MAAa,UAAU,YACpB,EAAE,WAAW,eAAe,MAAM,UAAU,OAAO,QAAQ,YAAY,GAAG,QAAQ,QAAQ;CACzF,MAAM,eAAe,kBAAkB,WAAW,SAAS,SAAS,MAAM,OAAO;AAEjF,QACE,qBAAC,cAAD;EAAmB;EAAK,GAAI;EAAM,GAAI;YAAtC;GACE,qBAAC,gBAAD;IAAsB;cAAtB,CACG,CAAC,CAAC,SACD,qBAAA,YAAA,EAAA,UAAA,CACE,oBAAC,KAAD,EAAA,UAAI,OAAU,CAAA,EACb,MACA,EAAA,CAAA,EAEJ,SACc;;GAChB,eAAe,aAAa,UAC3B,oBAAC,YAAD;IAAY,OAAO;IAAqB;IAAkB;IAAc,CAAA,GACtE,eAAe,aAAa,eAC9B,oBAAC,iBAAD,EAAiB,OAAO,eAAiB,CAAA,GACvC,eAAe,aAAa,QAC9B,oBAAC,UAAD,EAAU,OAAO,eAAiB,CAAA,GAChC,eAAe,aAAa,WAC9B,oBAAC,aAAD,EAAa,OAAO,eAAiB,CAAA,GACnC,eAAe,aAAa,aAC9B,oBAAC,eAAD,EAAe,OAAO,eAAiB,CAAA,GACrC;GACH,CAAC,CAAC,aAAa,oBAAC,aAAD;IAAwB;IAAW,MAAK;IAAY,CAAA;GACvD;;EAGpB"}
|
|
@@ -3,7 +3,6 @@ import { Text } from "@ndla/primitives";
|
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { useTranslation } from "react-i18next";
|
|
5
5
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
6
|
//#region src/ContactBlock/ContactBlock.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -146,7 +145,7 @@ const ContactBlock = ({ image, jobTitle, description, name, email, embedAlt, lan
|
|
|
146
145
|
})]
|
|
147
146
|
});
|
|
148
147
|
};
|
|
149
|
-
|
|
150
148
|
//#endregion
|
|
151
149
|
export { ContactBlock, contactBlockBackgrounds };
|
|
150
|
+
|
|
152
151
|
//# sourceMappingURL=ContactBlock.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContactBlock.mjs","names":[],"sources":["../../src/ContactBlock/ContactBlock.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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n minWidth: \"surface.xxsmall\",\n padding: \"medium\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n boxShadow: \"full\",\n border: \"1px solid\",\n gap: \"medium\",\n position: \"relative\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n overflow: \"hidden\",\n background: \"surface.default\",\n flexDirection: \"column-reverse\",\n tablet: {\n alignItems: \"unset\",\n flexDirection: \"row\",\n },\n },\n});\n\nconst EmailLink = styled(\"a\", {\n base: {\n color: \"text.default\",\n textDecoration: \"underline\",\n _hover: { textDecoration: \"none\" },\n _focusVisible: { textDecoration: \"none\" },\n },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n base: {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n zIndex: \"base\",\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-60px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"calc(100% + 50px)\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n variants: {\n variant: BackgroundVariant,\n imageExists: {\n true: {\n tabletDown: {\n _before: {\n display: \"none\",\n },\n },\n },\n },\n },\n});\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n flexDirection: \"column\",\n zIndex: \"base\",\n tabletDown: {\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-50px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"surface.xxsmall\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n },\n variants: {\n variant: BackgroundVariant,\n },\n});\n\nconst StyledImage = styled(\"img\", {\n base: {\n borderRadius: \"xsmall\",\n width: \"surface.xsmall\",\n height: \"surface.xsmall\",\n objectFit: \"cover\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n flex: \"1\",\n width: \"100%\",\n },\n});\n\nconst StyledDescription = styled(Text, {\n base: {\n fontFamily: \"serif\",\n },\n});\n\ninterface Props {\n image?: ImageMetaInformationV3DTO;\n jobTitle: string;\n description: string;\n backgroundColor?: ContactBlockBackground;\n imageWidth?: number;\n name: string;\n email: string;\n embedAlt?: string;\n lang?: string;\n}\n\nexport const ContactBlock = ({\n image,\n jobTitle,\n description,\n name,\n email,\n embedAlt,\n lang,\n backgroundColor = \"strong\",\n}: Props) => {\n const { t } = useTranslation();\n return (\n <StyledWrapper data-embed-type=\"contact-block\">\n <ContentWrapper>\n <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n {name}\n </Text>\n <Text lang={lang}>{jobTitle}</Text>\n <Text>\n {`${t(\"email\")}: `}\n <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n </Text>\n </HeaderWrapper>\n <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n </ContentWrapper>\n {!!image && (\n <ImageWrapper variant={backgroundColor}>\n <StyledImage\n alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n src={image.image.imageUrl}\n width={300}\n height={300}\n />\n <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n </ImageWrapper>\n )}\n </StyledWrapper>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContactBlock.mjs","names":[],"sources":["../../src/ContactBlock/ContactBlock.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 { Text } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { SystemStyleObject } from \"@ndla/styled-system/types\";\nimport type { ImageMetaInformationV3DTO } from \"@ndla/types-backend/image-api\";\nimport { useTranslation } from \"react-i18next\";\nimport { LicenseContainerContent } from \"../LicenseByline/EmbedByline\";\n\nexport type ContactBlockBackground = \"strong\" | \"moderate\" | \"subtle\";\n\nconst BackgroundVariant: Record<ContactBlockBackground, SystemStyleObject> = {\n strong: { _before: { backgroundColor: \"surface.brand.3\" } },\n moderate: { _before: { backgroundColor: \"surface.brand.3.moderate\" } },\n subtle: { _before: { backgroundColor: \"surface.brand.3.subtle\" } },\n};\n\nexport const contactBlockBackgrounds = Object.keys(BackgroundVariant) as ContactBlockBackground[];\n\nconst StyledWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n minWidth: \"surface.xxsmall\",\n padding: \"medium\",\n alignItems: \"center\",\n justifyContent: \"space-between\",\n boxShadow: \"full\",\n border: \"1px solid\",\n gap: \"medium\",\n position: \"relative\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n overflow: \"hidden\",\n background: \"surface.default\",\n flexDirection: \"column-reverse\",\n tablet: {\n alignItems: \"unset\",\n flexDirection: \"row\",\n },\n },\n});\n\nconst EmailLink = styled(\"a\", {\n base: {\n color: \"text.default\",\n textDecoration: \"underline\",\n _hover: { textDecoration: \"none\" },\n _focusVisible: { textDecoration: \"none\" },\n },\n});\n\nconst HeaderWrapper = styled(\"div\", {\n base: {\n position: \"relative\",\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"3xsmall\",\n zIndex: \"base\",\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-60px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"calc(100% + 50px)\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n variants: {\n variant: BackgroundVariant,\n imageExists: {\n true: {\n tabletDown: {\n _before: {\n display: \"none\",\n },\n },\n },\n },\n },\n});\n\nconst ImageWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n gap: \"xxsmall\",\n alignItems: \"flex-start\",\n justifyContent: \"flex-start\",\n flexDirection: \"column\",\n zIndex: \"base\",\n tabletDown: {\n _before: {\n content: '\"\"',\n position: \"absolute\",\n top: \"-50px\",\n left: \"-50px\",\n right: \"0\",\n bottom: \"0\",\n height: \"surface.xxsmall\",\n width: \"surface.3xlarge\",\n transform: \"rotate(-4deg)\",\n zIndex: \"hide\",\n },\n },\n },\n variants: {\n variant: BackgroundVariant,\n },\n});\n\nconst StyledImage = styled(\"img\", {\n base: {\n borderRadius: \"xsmall\",\n width: \"surface.xsmall\",\n height: \"surface.xsmall\",\n objectFit: \"cover\",\n },\n});\n\nconst ContentWrapper = styled(\"div\", {\n base: {\n display: \"flex\",\n flexDirection: \"column\",\n gap: \"medium\",\n flex: \"1\",\n width: \"100%\",\n },\n});\n\nconst StyledDescription = styled(Text, {\n base: {\n fontFamily: \"serif\",\n },\n});\n\ninterface Props {\n image?: ImageMetaInformationV3DTO;\n jobTitle: string;\n description: string;\n backgroundColor?: ContactBlockBackground;\n imageWidth?: number;\n name: string;\n email: string;\n embedAlt?: string;\n lang?: string;\n}\n\nexport const ContactBlock = ({\n image,\n jobTitle,\n description,\n name,\n email,\n embedAlt,\n lang,\n backgroundColor = \"strong\",\n}: Props) => {\n const { t } = useTranslation();\n return (\n <StyledWrapper data-embed-type=\"contact-block\">\n <ContentWrapper>\n <HeaderWrapper variant={backgroundColor} imageExists={!!image}>\n <Text lang={lang} fontWeight=\"bold\" textStyle=\"heading.small\">\n {name}\n </Text>\n <Text lang={lang}>{jobTitle}</Text>\n <Text>\n {`${t(\"email\")}: `}\n <EmailLink href={`mailto:${email}`}>{email}</EmailLink>\n </Text>\n </HeaderWrapper>\n <StyledDescription textStyle=\"body.large\">{description}</StyledDescription>\n </ContentWrapper>\n {!!image && (\n <ImageWrapper variant={backgroundColor}>\n <StyledImage\n alt={embedAlt !== undefined ? embedAlt : image.alttext.alttext}\n src={image.image.imageUrl}\n width={300}\n height={300}\n />\n <LicenseContainerContent type=\"image\" copyright={image.copyright} />\n </ImageWrapper>\n )}\n </StyledWrapper>\n );\n};\n"],"mappings":";;;;;;;;;;;;;AAiBA,MAAM,oBAAuE;CAC3E,QAAQ,EAAE,SAAS,EAAE,iBAAiB,mBAAmB,EAAE;CAC3D,UAAU,EAAE,SAAS,EAAE,iBAAiB,4BAA4B,EAAE;CACtE,QAAQ,EAAE,SAAS,EAAE,iBAAiB,0BAA0B,EAAE;CACnE;AAED,MAAa,0BAA0B,OAAO,KAAK,kBAAkB;AAErE,MAAM,gBAAgB,OAAO,OAAO,EAClC,MAAM;CACJ,SAAS;CACT,UAAU;CACV,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,WAAW;CACX,QAAQ;CACR,KAAK;CACL,UAAU;CACV,aAAa;CACb,cAAc;CACd,UAAU;CACV,YAAY;CACZ,eAAe;CACf,QAAQ;EACN,YAAY;EACZ,eAAe;EAChB;CACF,EACF,CAAC;AAEF,MAAM,YAAY,OAAO,KAAK,EAC5B,MAAM;CACJ,OAAO;CACP,gBAAgB;CAChB,QAAQ,EAAE,gBAAgB,QAAQ;CAClC,eAAe,EAAE,gBAAgB,QAAQ;CAC1C,EACF,CAAC;AAEF,MAAM,gBAAgB,OAAO,OAAO;CAClC,MAAM;EACJ,UAAU;EACV,SAAS;EACT,eAAe;EACf,KAAK;EACL,QAAQ;EACR,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT;EACF;CACD,UAAU;EACR,SAAS;EACT,aAAa,EACX,MAAM,EACJ,YAAY,EACV,SAAS,EACP,SAAS,QACV,EACF,EACF,EACF;EACF;CACF,CAAC;AAEF,MAAM,eAAe,OAAO,OAAO;CACjC,MAAM;EACJ,SAAS;EACT,KAAK;EACL,YAAY;EACZ,gBAAgB;EAChB,eAAe;EACf,QAAQ;EACR,YAAY,EACV,SAAS;GACP,SAAS;GACT,UAAU;GACV,KAAK;GACL,MAAM;GACN,OAAO;GACP,QAAQ;GACR,QAAQ;GACR,OAAO;GACP,WAAW;GACX,QAAQ;GACT,EACF;EACF;CACD,UAAU,EACR,SAAS,mBACV;CACF,CAAC;AAEF,MAAM,cAAc,OAAO,OAAO,EAChC,MAAM;CACJ,cAAc;CACd,OAAO;CACP,QAAQ;CACR,WAAW;CACZ,EACF,CAAC;AAEF,MAAM,iBAAiB,OAAO,OAAO,EACnC,MAAM;CACJ,SAAS;CACT,eAAe;CACf,KAAK;CACL,MAAM;CACN,OAAO;CACR,EACF,CAAC;AAEF,MAAM,oBAAoB,OAAO,MAAM,EACrC,MAAM,EACJ,YAAY,SACb,EACF,CAAC;AAcF,MAAa,gBAAgB,EAC3B,OACA,UACA,aACA,MACA,OACA,UACA,MACA,kBAAkB,eACP;CACX,MAAM,EAAE,MAAM,gBAAgB;AAC9B,QACE,qBAAC,eAAD;EAAe,mBAAgB;YAA/B,CACE,qBAAC,gBAAD,EAAA,UAAA,CACE,qBAAC,eAAD;GAAe,SAAS;GAAiB,aAAa,CAAC,CAAC;aAAxD;IACE,oBAAC,MAAD;KAAY;KAAM,YAAW;KAAO,WAAU;eAC3C;KACI,CAAA;IACP,oBAAC,MAAD;KAAY;eAAO;KAAgB,CAAA;IACnC,qBAAC,MAAD,EAAA,UAAA,CACG,GAAG,EAAE,QAAQ,CAAC,KACf,oBAAC,WAAD;KAAW,MAAM,UAAU;eAAU;KAAkB,CAAA,CAClD,EAAA,CAAA;IACO;MAChB,oBAAC,mBAAD;GAAmB,WAAU;aAAc;GAAgC,CAAA,CAC5D,EAAA,CAAA,EAChB,CAAC,CAAC,SACD,qBAAC,cAAD;GAAc,SAAS;aAAvB,CACE,oBAAC,aAAD;IACE,KAAK,aAAa,KAAA,IAAY,WAAW,MAAM,QAAQ;IACvD,KAAK,MAAM,MAAM;IACjB,OAAO;IACP,QAAQ;IACR,CAAA,EACF,oBAAC,yBAAD;IAAyB,MAAK;IAAQ,WAAW,MAAM;IAAa,CAAA,CACvD;KAEH"}
|
package/es/Embed/AudioEmbed.mjs
CHANGED
|
@@ -5,7 +5,6 @@ import { AudioPlayer } from "../AudioPlayer/AudioPlayer.mjs";
|
|
|
5
5
|
import { Figure } from "@ndla/primitives";
|
|
6
6
|
import { styled } from "@ndla/styled-system/jsx";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
|
-
|
|
9
8
|
//#region src/Embed/AudioEmbed.tsx
|
|
10
9
|
/**
|
|
11
10
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -52,7 +51,7 @@ const AudioEmbed = ({ embed, lang }) => {
|
|
|
52
51
|
})]
|
|
53
52
|
});
|
|
54
53
|
};
|
|
55
|
-
|
|
56
54
|
//#endregion
|
|
57
55
|
export { AudioEmbed };
|
|
56
|
+
|
|
58
57
|
//# sourceMappingURL=AudioEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"AudioEmbed.mjs","names":[],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\ninterface Props {\n embed: AudioMetaData;\n lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n creators: Author[];\n rightsholders: Author[];\n processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={type} />;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.type === \"minimal\") {\n return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n }\n\n const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n const coverPhoto = data.podcastMeta?.coverPhoto;\n\n const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n return (\n <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n <AudioPlayer\n description={data.podcastMeta?.introduction ?? \"\"}\n img={img}\n src={data.audioFile.url}\n textVersion={\n data.manuscript?.manuscript.length ? (\n <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n ) : undefined\n }\n title={data.title.title}\n subtitle={subtitle}\n />\n <EmbedByline\n error={false}\n type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n copyright={embed.data.copyright}\n />\n </StyledFigure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"AudioEmbed.mjs","names":[],"sources":["../../src/Embed/AudioEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { AudioMetaData } from \"@ndla/types-embed\";\nimport { AudioPlayer } from \"../AudioPlayer/AudioPlayer\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { Author } from \"./ImageEmbed\";\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n },\n});\n\ninterface Props {\n embed: AudioMetaData;\n lang?: string;\n}\n\nexport const getFirstNonEmptyLicenseCredits = (authors: {\n creators: Author[];\n rightsholders: Author[];\n processors: Author[];\n}) => Object.values(authors).find((i) => i.length > 0) ?? [];\n\nexport const AudioEmbed = ({ embed, lang }: Props) => {\n const type = embed.embedData.type === \"standard\" ? \"audio\" : \"podcast\";\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type={type} />;\n }\n\n const { data, embedData } = embed;\n\n if (embedData.type === \"minimal\") {\n return <AudioPlayer speech src={data.audioFile.url} title={data.title.title} />;\n }\n\n const subtitle = data.series ? { title: data.series.title.title, url: `/podkast/${data.series.id}` } : undefined;\n\n const coverPhoto = data.podcastMeta?.coverPhoto;\n\n const img = coverPhoto && { url: coverPhoto.url, alt: coverPhoto.altText };\n\n const licenseProps = licenseAttributes(data.copyright.license.license, lang, embedData.url);\n\n return (\n <StyledFigure lang={lang} data-embed-type={type} {...licenseProps}>\n <AudioPlayer\n description={data.podcastMeta?.introduction ?? \"\"}\n img={img}\n src={data.audioFile.url}\n textVersion={\n data.manuscript?.manuscript.length ? (\n <div dangerouslySetInnerHTML={{ __html: data.manuscript.manuscript }} />\n ) : undefined\n }\n title={data.title.title}\n subtitle={subtitle}\n />\n <EmbedByline\n error={false}\n type={data.audioType === \"standard\" ? \"audio\" : \"podcast\"}\n copyright={embed.data.copyright}\n />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAiBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,OAAO,QACR,EACF,CAAC;AAaF,MAAa,cAAc,EAAE,OAAO,WAAkB;CACpD,MAAM,OAAO,MAAM,UAAU,SAAS,aAAa,UAAU;AAC7D,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,uBAAD,EAA6B,MAAQ,CAAA;CAG9C,MAAM,EAAE,MAAM,cAAc;AAE5B,KAAI,UAAU,SAAS,UACrB,QAAO,oBAAC,aAAD;EAAa,QAAA;EAAO,KAAK,KAAK,UAAU;EAAK,OAAO,KAAK,MAAM;EAAS,CAAA;CAGjF,MAAM,WAAW,KAAK,SAAS;EAAE,OAAO,KAAK,OAAO,MAAM;EAAO,KAAK,YAAY,KAAK,OAAO;EAAM,GAAG,KAAA;CAEvG,MAAM,aAAa,KAAK,aAAa;CAErC,MAAM,MAAM,cAAc;EAAE,KAAK,WAAW;EAAK,KAAK,WAAW;EAAS;CAE1E,MAAM,eAAe,kBAAkB,KAAK,UAAU,QAAQ,SAAS,MAAM,UAAU,IAAI;AAE3F,QACE,qBAAC,cAAD;EAAoB;EAAM,mBAAiB;EAAM,GAAI;YAArD,CACE,oBAAC,aAAD;GACE,aAAa,KAAK,aAAa,gBAAgB;GAC1C;GACL,KAAK,KAAK,UAAU;GACpB,aACE,KAAK,YAAY,WAAW,SAC1B,oBAAC,OAAD,EAAK,yBAAyB,EAAE,QAAQ,KAAK,WAAW,YAAY,EAAI,CAAA,GACtE,KAAA;GAEN,OAAO,KAAK,MAAM;GACR;GACV,CAAA,EACF,oBAAC,aAAD;GACE,OAAO;GACP,MAAM,KAAK,cAAc,aAAa,UAAU;GAChD,WAAW,MAAM,KAAK;GACtB,CAAA,CACW"}
|
|
@@ -7,7 +7,6 @@ import { useEffect, useMemo, useRef, useState } from "react";
|
|
|
7
7
|
import parse from "html-react-parser";
|
|
8
8
|
import { useTranslation } from "react-i18next";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
|
|
11
10
|
//#region src/Embed/BrightcoveEmbed.tsx
|
|
12
11
|
/**
|
|
13
12
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -96,7 +95,7 @@ const BrightcoveEmbed = ({ embed, renderContext = "article", lang }) => {
|
|
|
96
95
|
})]
|
|
97
96
|
});
|
|
98
97
|
};
|
|
99
|
-
|
|
100
98
|
//#endregion
|
|
101
99
|
export { BrightcoveEmbed };
|
|
100
|
+
|
|
102
101
|
//# sourceMappingURL=BrightcoveEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"BrightcoveEmbed.mjs","names":[],"sources":["../../src/Embed/BrightcoveEmbed.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 { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\n\ninterface Props {\n embed: BrightcoveMetaData;\n renderContext?: RenderContext;\n lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n base: {\n marginBlockStart: \"3xsmall\",\n },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n base: {\n border: 0,\n height: \"auto\",\n width: \"100%\",\n },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n const urlOrTitle = title || url;\n return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" style=\"border: none;\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n const { account, videoid, player = \"default\" } = data;\n\n const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n return {\n src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n height: source?.height ?? \"480\",\n width: source?.width ?? \"640\",\n };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const { embedData } = embed;\n const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n } else if (embed.status === \"success\" && embed.data.description) {\n return parse(embed.data.description);\n }\n }, [embed, renderContext]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width}/${height}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n if (embed.status === \"error\") {\n return (\n <EmbedErrorPlaceholder type=\"video\">\n <BrightcoveIframe\n ref={iframeRef}\n title={embedData.alt || fallbackTitle}\n aria-label={embedData.alt || fallbackTitle}\n {...getIframeProps(embedData, [])}\n allow=\"fullscreen; encrypted-media\"\n />\n </EmbedErrorPlaceholder>\n );\n }\n const { data } = embed;\n\n const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n const originalVideoProps = getIframeProps(embedData, data.sources);\n const alternativeVideoProps = linkedVideoId\n ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n : undefined;\n\n const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n return (\n <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n <div className=\"brightcove-video\">\n <BrightcoveIframe\n ref={iframeRef}\n className=\"original\"\n title={title}\n aria-label={title}\n {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n allow=\"fullscreen; encrypted-media\"\n />\n </div>\n <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n <div>\n {!!linkedVideoId && (\n <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n </LinkedVideoButton>\n )}\n </div>\n </EmbedByline>\n </Figure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"BrightcoveEmbed.mjs","names":[],"sources":["../../src/Embed/BrightcoveEmbed.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 { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { BrightcoveEmbedData, BrightcoveMetaData, BrightcoveVideoSource } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { useEffect, useMemo, useRef, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\nimport { licenseAttributes } from \"../utils/licenseAttributes\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport type { RenderContext } from \"./types\";\n\ninterface Props {\n embed: BrightcoveMetaData;\n renderContext?: RenderContext;\n lang?: string;\n}\n\nconst LinkedVideoButton = styled(Button, {\n base: {\n marginBlockStart: \"3xsmall\",\n },\n});\n\nconst BrightcoveIframe = styled(\"iframe\", {\n base: {\n border: 0,\n height: \"auto\",\n width: \"100%\",\n },\n});\n\nexport const makeIframeString = (url: string, width: string | number, height: string | number, title = \"\") => {\n const strippedWidth = typeof width === \"number\" ? width : width.replace(/\\s*px/, \"\");\n const strippedHeight = typeof height === \"number\" ? height : height.replace(/\\s*px/, \"\");\n const urlOrTitle = title || url;\n return `<iframe title=\"${urlOrTitle}\" aria-label=\"${urlOrTitle}\" src=\"${url}\" width=\"${strippedWidth}\" height=\"${strippedHeight}\" allowfullscreen scrolling=\"no\" style=\"border: none;\" loading=\"lazy\"></iframe>`;\n};\n\nexport const isNumeric = (value: any) => !Number.isNaN(value - Number.parseFloat(value));\n\nconst getIframeProps = (data: BrightcoveEmbedData, sources: BrightcoveVideoSource[]) => {\n const { account, videoid, player = \"default\" } = data;\n\n const source = sources.filter((s) => s.width && s.height).toSorted((a, b) => a!.height! - b.height!)[0];\n\n return {\n src: `https://players.brightcove.net/${account}/${player}_default/index.html?videoId=${videoid}`,\n height: source?.height ?? \"480\",\n width: source?.width ?? \"640\",\n };\n};\nexport const BrightcoveEmbed = ({ embed, renderContext = \"article\", lang }: Props) => {\n const [showOriginalVideo, setShowOriginalVideo] = useState(true);\n const { t } = useTranslation();\n const iframeRef = useRef<HTMLIFrameElement>(null);\n const { embedData } = embed;\n const fallbackTitle = `${t(\"embed.type.video\")}: ${embedData.videoid}`;\n const parsedDescription = useMemo(() => {\n if (embed.embedData.caption || renderContext === \"article\") {\n return embed.embedData.caption ? parse(embed.embedData.caption) : undefined;\n } else if (embed.status === \"success\" && embed.data.description) {\n return parse(embed.data.description);\n }\n }, [embed, renderContext]);\n\n useEffect(() => {\n const iframe = iframeRef.current;\n if (iframe) {\n const [width, height] = [parseInt(iframe.width), parseInt(iframe.height)];\n iframe.style.aspectRatio = `${width}/${height}`;\n iframe.width = \"\";\n iframe.height = \"\";\n }\n }, []);\n if (embed.status === \"error\") {\n return (\n <EmbedErrorPlaceholder type=\"video\">\n <BrightcoveIframe\n ref={iframeRef}\n title={embedData.alt || fallbackTitle}\n aria-label={embedData.alt || fallbackTitle}\n {...getIframeProps(embedData, [])}\n allow=\"fullscreen; encrypted-media\"\n />\n </EmbedErrorPlaceholder>\n );\n }\n const { data } = embed;\n\n const linkedVideoId = isNumeric(data.link?.text) ? data.link?.text : undefined;\n\n const originalVideoProps = getIframeProps(embedData, data.sources);\n const alternativeVideoProps = linkedVideoId\n ? getIframeProps({ ...embedData, videoid: linkedVideoId }, data.sources)\n : undefined;\n\n const licenseProps = licenseAttributes(data?.copyright?.license.license, lang, embedData.pageUrl);\n\n const title = data.name?.trim() ? `${t(\"embed.type.video\")}: ${data.name}` : fallbackTitle;\n\n return (\n <Figure data-embed-type=\"brightcove\" {...licenseProps}>\n <div className=\"brightcove-video\">\n <BrightcoveIframe\n ref={iframeRef}\n className=\"original\"\n title={title}\n aria-label={title}\n {...(alternativeVideoProps && !showOriginalVideo ? alternativeVideoProps : originalVideoProps)}\n allow=\"fullscreen; encrypted-media\"\n />\n </div>\n <EmbedByline type=\"video\" copyright={data.copyright!} description={parsedDescription}>\n <div>\n {!!linkedVideoId && (\n <LinkedVideoButton size=\"small\" variant=\"secondary\" onClick={() => setShowOriginalVideo((p) => !p)}>\n {t(`figure.button.${!showOriginalVideo ? \"original\" : \"alternative\"}`)}\n </LinkedVideoButton>\n )}\n </div>\n </EmbedByline>\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAyBA,MAAM,oBAAoB,OAAO,QAAQ,EACvC,MAAM,EACJ,kBAAkB,WACnB,EACF,CAAC;AAEF,MAAM,mBAAmB,OAAO,UAAU,EACxC,MAAM;CACJ,QAAQ;CACR,QAAQ;CACR,OAAO;CACR,EACF,CAAC;AASF,MAAa,aAAa,UAAe,CAAC,OAAO,MAAM,QAAQ,OAAO,WAAW,MAAM,CAAC;AAExF,MAAM,kBAAkB,MAA2B,YAAqC;CACtF,MAAM,EAAE,SAAS,SAAS,SAAS,cAAc;CAEjD,MAAM,SAAS,QAAQ,QAAQ,MAAM,EAAE,SAAS,EAAE,OAAO,CAAC,UAAU,GAAG,MAAM,EAAG,SAAU,EAAE,OAAQ,CAAC;AAErG,QAAO;EACL,KAAK,kCAAkC,QAAQ,GAAG,OAAO,8BAA8B;EACvF,QAAQ,QAAQ,UAAU;EAC1B,OAAO,QAAQ,SAAS;EACzB;;AAEH,MAAa,mBAAmB,EAAE,OAAO,gBAAgB,WAAW,WAAkB;CACpF,MAAM,CAAC,mBAAmB,wBAAwB,SAAS,KAAK;CAChE,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,YAAY,OAA0B,KAAK;CACjD,MAAM,EAAE,cAAc;CACtB,MAAM,gBAAgB,GAAG,EAAE,mBAAmB,CAAC,IAAI,UAAU;CAC7D,MAAM,oBAAoB,cAAc;AACtC,MAAI,MAAM,UAAU,WAAW,kBAAkB,UAC/C,QAAO,MAAM,UAAU,UAAU,MAAM,MAAM,UAAU,QAAQ,GAAG,KAAA;WACzD,MAAM,WAAW,aAAa,MAAM,KAAK,YAClD,QAAO,MAAM,MAAM,KAAK,YAAY;IAErC,CAAC,OAAO,cAAc,CAAC;AAE1B,iBAAgB;EACd,MAAM,SAAS,UAAU;AACzB,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,SAAS,OAAO,MAAM,EAAE,SAAS,OAAO,OAAO,CAAC;AACzE,UAAO,MAAM,cAAc,GAAG,MAAM,GAAG;AACvC,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AACN,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC,uBAAD;EAAuB,MAAK;YAC1B,oBAAC,kBAAD;GACE,KAAK;GACL,OAAO,UAAU,OAAO;GACxB,cAAY,UAAU,OAAO;GAC7B,GAAI,eAAe,WAAW,EAAE,CAAC;GACjC,OAAM;GACN,CAAA;EACoB,CAAA;CAG5B,MAAM,EAAE,SAAS;CAEjB,MAAM,gBAAgB,UAAU,KAAK,MAAM,KAAK,GAAG,KAAK,MAAM,OAAO,KAAA;CAErE,MAAM,qBAAqB,eAAe,WAAW,KAAK,QAAQ;CAClE,MAAM,wBAAwB,gBAC1B,eAAe;EAAE,GAAG;EAAW,SAAS;EAAe,EAAE,KAAK,QAAQ,GACtE,KAAA;CAEJ,MAAM,eAAe,kBAAkB,MAAM,WAAW,QAAQ,SAAS,MAAM,UAAU,QAAQ;CAEjG,MAAM,QAAQ,KAAK,MAAM,MAAM,GAAG,GAAG,EAAE,mBAAmB,CAAC,IAAI,KAAK,SAAS;AAE7E,QACE,qBAAC,QAAD;EAAQ,mBAAgB;EAAa,GAAI;YAAzC,CACE,oBAAC,OAAD;GAAK,WAAU;aACb,oBAAC,kBAAD;IACE,KAAK;IACL,WAAU;IACH;IACP,cAAY;IACZ,GAAK,yBAAyB,CAAC,oBAAoB,wBAAwB;IAC3E,OAAM;IACN,CAAA;GACE,CAAA,EACN,oBAAC,aAAD;GAAa,MAAK;GAAQ,WAAW,KAAK;GAAY,aAAa;aACjE,oBAAC,OAAD,EAAA,UACG,CAAC,CAAC,iBACD,oBAAC,mBAAD;IAAmB,MAAK;IAAQ,SAAQ;IAAY,eAAe,sBAAsB,MAAM,CAAC,EAAE;cAC/F,EAAE,iBAAiB,CAAC,oBAAoB,aAAa,gBAAgB;IACpD,CAAA,EAElB,CAAA;GACM,CAAA,CACP"}
|
package/es/Embed/CodeEmbed.mjs
CHANGED
|
@@ -7,7 +7,6 @@ import { useEffect, useState } from "react";
|
|
|
7
7
|
import { useTranslation } from "react-i18next";
|
|
8
8
|
import { CheckLine, FileCopyLine } from "@ndla/icons";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
|
-
|
|
11
10
|
//#region src/Embed/CodeEmbed.tsx
|
|
12
11
|
/**
|
|
13
12
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -61,7 +60,7 @@ const CodeEmbed = ({ embed }) => {
|
|
|
61
60
|
]
|
|
62
61
|
});
|
|
63
62
|
};
|
|
64
|
-
|
|
65
63
|
//#endregion
|
|
66
64
|
export { CodeEmbed };
|
|
65
|
+
|
|
67
66
|
//# sourceMappingURL=CodeEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CodeEmbed.mjs","names":[],"sources":["../../src/Embed/CodeEmbed.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 { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n base: {\n textStyle: \"label.large\",\n fontWeight: \"bold\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n // We apply margin here to allow for the float and size props on figure to work as intended.\n \"& > *:not(:where(:first-child))\": {\n marginBlockStart: \"xsmall\",\n },\n },\n});\n\nconst getTitleFromFormat = (format: string) => {\n const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n if (selectedLanguage) {\n return selectedLanguage.title;\n }\n return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n const [isCopied, setIsCopied] = useState(false);\n const { t } = useTranslation();\n\n useEffect(() => {\n if (isCopied) {\n const timer = setInterval(() => setIsCopied(false), 3000);\n // ensure interval is cleared - also if unmounted\n return () => {\n clearTimeout(timer);\n };\n }\n }, [isCopied]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"code\" />;\n }\n\n return (\n <StyledFigure data-embed-type=\"code-block\">\n <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n <CodeBlock\n highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n format={embed.embedData.codeFormat}\n />\n <Button\n variant=\"secondary\"\n onClick={async () => {\n if (embed.status === \"success\") {\n try {\n await navigator.clipboard.writeText(embed.data.decodedContent);\n setIsCopied(true);\n } catch {\n // do nothing\n }\n }\n }}\n >\n {isCopied ? <CheckLine /> : <FileCopyLine />}\n {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n </Button>\n </StyledFigure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CodeEmbed.mjs","names":[],"sources":["../../src/Embed/CodeEmbed.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 { FileCopyLine, CheckLine } from \"@ndla/icons\";\nimport { Button, Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { CodeMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useState } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { CodeBlock } from \"../CodeBlock/CodeBlock\";\nimport { codeLanguageOptions, type ICodeLangugeOption } from \"../CodeBlock/codeLanguageOptions\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: CodeMetaData;\n}\n\nconst StyledFigCaption = styled(\"figcaption\", {\n base: {\n textStyle: \"label.large\",\n fontWeight: \"bold\",\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n clear: \"both\",\n // We apply margin here to allow for the float and size props on figure to work as intended.\n \"& > *:not(:where(:first-child))\": {\n marginBlockStart: \"xsmall\",\n },\n },\n});\n\nconst getTitleFromFormat = (format: string) => {\n const selectedLanguage = codeLanguageOptions.find((item: ICodeLangugeOption) => item.format === format);\n if (selectedLanguage) {\n return selectedLanguage.title;\n }\n return;\n};\n\nexport const CodeEmbed = ({ embed }: Props) => {\n const [isCopied, setIsCopied] = useState(false);\n const { t } = useTranslation();\n\n useEffect(() => {\n if (isCopied) {\n const timer = setInterval(() => setIsCopied(false), 3000);\n // ensure interval is cleared - also if unmounted\n return () => {\n clearTimeout(timer);\n };\n }\n }, [isCopied]);\n\n if (embed.status === \"error\") {\n return <EmbedErrorPlaceholder type=\"code\" />;\n }\n\n return (\n <StyledFigure data-embed-type=\"code-block\">\n <StyledFigCaption>{embed.embedData.title || getTitleFromFormat(embed.embedData.codeFormat)}</StyledFigCaption>\n <CodeBlock\n highlightedCode={embed.status === \"success\" ? embed.data.highlightedCode : \"\"}\n format={embed.embedData.codeFormat}\n />\n <Button\n variant=\"secondary\"\n onClick={async () => {\n if (embed.status === \"success\") {\n try {\n await navigator.clipboard.writeText(embed.data.decodedContent);\n setIsCopied(true);\n } catch {\n // do nothing\n }\n }\n }}\n >\n {isCopied ? <CheckLine /> : <FileCopyLine />}\n {isCopied ? t(\"codeBlock.copiedCode\") : t(\"codeBlock.copyCode\")}\n </Button>\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;AAsBA,MAAM,mBAAmB,OAAO,cAAc,EAC5C,MAAM;CACJ,WAAW;CACX,YAAY;CACb,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CAEP,mCAAmC,EACjC,kBAAkB,UACnB;CACF,EACF,CAAC;AAEF,MAAM,sBAAsB,WAAmB;CAC7C,MAAM,mBAAmB,oBAAoB,MAAM,SAA6B,KAAK,WAAW,OAAO;AACvG,KAAI,iBACF,QAAO,iBAAiB;;AAK5B,MAAa,aAAa,EAAE,YAAmB;CAC7C,MAAM,CAAC,UAAU,eAAe,SAAS,MAAM;CAC/C,MAAM,EAAE,MAAM,gBAAgB;AAE9B,iBAAgB;AACd,MAAI,UAAU;GACZ,MAAM,QAAQ,kBAAkB,YAAY,MAAM,EAAE,IAAK;AAEzD,gBAAa;AACX,iBAAa,MAAM;;;IAGtB,CAAC,SAAS,CAAC;AAEd,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,uBAAD,EAAuB,MAAK,QAAS,CAAA;AAG9C,QACE,qBAAC,cAAD;EAAc,mBAAgB;YAA9B;GACE,oBAAC,kBAAD,EAAA,UAAmB,MAAM,UAAU,SAAS,mBAAmB,MAAM,UAAU,WAAW,EAAoB,CAAA;GAC9G,oBAAC,WAAD;IACE,iBAAiB,MAAM,WAAW,YAAY,MAAM,KAAK,kBAAkB;IAC3E,QAAQ,MAAM,UAAU;IACxB,CAAA;GACF,qBAAC,QAAD;IACE,SAAQ;IACR,SAAS,YAAY;AACnB,SAAI,MAAM,WAAW,UACnB,KAAI;AACF,YAAM,UAAU,UAAU,UAAU,MAAM,KAAK,eAAe;AAC9D,kBAAY,KAAK;aACX;;cAPd,CAaG,WAAW,oBAAC,WAAD,EAAa,CAAA,GAAG,oBAAC,cAAD,EAAgB,CAAA,EAC3C,WAAW,EAAE,uBAAuB,GAAG,EAAE,qBAAqB,CACxD;;GACI"}
|
|
@@ -8,7 +8,6 @@ import { forwardRef, useMemo, useRef } from "react";
|
|
|
8
8
|
import parse from "html-react-parser";
|
|
9
9
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
10
10
|
import { Portal } from "@ark-ui/react";
|
|
11
|
-
|
|
12
11
|
//#region src/Embed/ConceptEmbed.tsx
|
|
13
12
|
/**
|
|
14
13
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -83,7 +82,7 @@ const BlockConcept = forwardRef((props, ref) => /* @__PURE__ */ jsx(Concept, {
|
|
|
83
82
|
"data-embed-type": "concept",
|
|
84
83
|
ref
|
|
85
84
|
}));
|
|
86
|
-
|
|
87
85
|
//#endregion
|
|
88
86
|
export { BlockConcept, ConceptEmbed, InlineConcept };
|
|
87
|
+
|
|
89
88
|
//# sourceMappingURL=ConceptEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ConceptEmbed.mjs","names":[],"sources":["../../src/Embed/ConceptEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport parse from \"html-react-parser\";\nimport { forwardRef, useMemo, useRef, type ReactNode } from \"react\";\nimport { Concept, type ConceptProps } from \"../Concept/Concept\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\nimport { GlossEmbed } from \"./GlossEmbed\";\nimport type { RenderContext } from \"./types\";\n\ninterface BaseProps {\n renderContext?: RenderContext;\n lang?: string;\n previewAlt?: boolean;\n}\n\ninterface Props extends BaseProps {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n maxHeight: \"50vh\",\n overflowY: \"auto\",\n },\n});\n\nexport const ConceptEmbed = ({ embed, renderContext, lang, previewAlt, children }: Props) => {\n const parsedContent = useMemo(() => {\n if (embed.status === \"error\" || !embed.data.concept.content) return undefined;\n return parse(embed.data.concept.content.htmlContent);\n }, [embed]);\n\n const parsedTitle = useMemo(\n () => (embed.status === \"success\" ? parse(embed.data.concept.title.htmlTitle) : undefined),\n [embed],\n );\n\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\") {\n // TODO: This could be either concept or gloss. We don't know if it errors out. :)\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n // TODO: Consider whether we should do this in article-converter instead.\n if (embed.data.concept.glossData) {\n return <GlossEmbed embed={embed}>{children}</GlossEmbed>;\n }\n\n if (embed.embedData.type === \"inline\") {\n return (\n <InlineConcept\n previewAlt={previewAlt}\n linkContent={children}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </InlineConcept>\n );\n }\n\n return (\n <BlockConcept\n previewAlt={previewAlt}\n copyright={concept.copyright}\n visualElement={visualElement}\n lang={lang}\n title={renderContext === \"embed\" ? undefined : parsedTitle}\n source={concept.source}\n >\n {parsedContent}\n </BlockConcept>\n );\n};\n\nexport interface InlineConceptProps extends ConceptProps, BaseProps {\n linkContent?: ReactNode;\n source?: string;\n}\n\nexport const InlineConcept = forwardRef<HTMLSpanElement, InlineConceptProps>(\n ({ linkContent, copyright, visualElement, previewAlt, lang, children, title, source, ...rest }, ref) => {\n const contentRef = useRef<HTMLDivElement>(null);\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n {/* @ts-expect-error placing ref and rest on popover trigger somehow removes a bug where the popover target becomes a bit bigger */}\n <PopoverTrigger asChild ref={ref} {...rest}>\n <ConceptInlineTriggerButton>{linkContent}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Concept\n copyright={copyright}\n visualElement={visualElement}\n title={title}\n lang={lang}\n source={source}\n previewAlt={previewAlt}\n >\n {children}\n </Concept>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n },\n);\n\nexport interface BlockConceptProps extends ConceptProps {}\n\nexport const BlockConcept = forwardRef<HTMLElement, BlockConceptProps>((props, ref) => (\n <Concept {...props} data-embed-type=\"concept\" ref={ref} />\n));\n"],"mappings":";;;;;;;;;;;;;;;;;;AA+BA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM;CACJ,OAAO;CACP,WAAW;CACX,WAAW;CACZ,EACF,CAAC;AAEF,MAAa,gBAAgB,EAAE,OAAO,eAAe,MAAM,YAAY,eAAsB;CAC3F,MAAM,gBAAgB,cAAc;AAClC,MAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,QAAS,QAAO,KAAA;AACpE,SAAO,MAAM,MAAM,KAAK,QAAQ,QAAQ,YAAY;IACnD,CAAC,MAAM,CAAC;CAEX,MAAM,cAAc,cACX,MAAM,WAAW,YAAY,MAAM,MAAM,KAAK,QAAQ,MAAM,UAAU,GAAG,KAAA,GAChF,CAAC,MAAM,CACR;AAED,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAEhC,KAAI,MAAM,WAAW,QAEnB,QAAO,oBAAC,uBAAD,EAAuB,MAAK,SAAU,CAAA;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;AAGzC,KAAI,MAAM,KAAK,QAAQ,UACrB,QAAO,oBAAC,YAAD;EAAmB;EAAQ;EAAsB,CAAA;AAG1D,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,oBAAC,eAAD;EACc;EACZ,aAAa;EACb,WAAW,QAAQ;EACJ;EACT;EACN,OAAO;EACP,QAAQ,QAAQ;YAEf;EACa,CAAA;AAIpB,QACE,oBAAC,cAAD;EACc;EACZ,WAAW,QAAQ;EACJ;EACT;EACN,OAAO,kBAAkB,UAAU,KAAA,IAAY;EAC/C,QAAQ,QAAQ;YAEf;EACY,CAAA;;AASnB,MAAa,gBAAgB,YAC1B,EAAE,aAAa,WAAW,eAAe,YAAY,MAAM,UAAU,OAAO,QAAQ,GAAG,QAAQ,QAAQ;CACtG,MAAM,aAAa,OAAuB,KAAK;AAC/C,QACE,qBAAC,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CAEE,oBAAC,gBAAD;GAAgB,SAAA;GAAa;GAAK,GAAI;aACpC,oBAAC,4BAAD,EAAA,UAA6B,aAAyC,CAAA;GACvD,CAAA,EACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,KAAK;aACzB,oBAAC,SAAD;IACa;IACI;IACR;IACD;IACE;IACI;IAEX;IACO,CAAA;GACW,CAAA,EAChB,CAAA,CACG;;EAGnB;AAID,MAAa,eAAe,YAA4C,OAAO,QAC7E,oBAAC,SAAD;CAAS,GAAI;CAAO,mBAAgB;CAAe;CAAO,CAAA,CAC1D"}
|
|
@@ -1,6 +1,5 @@
|
|
|
1
1
|
import { InlineTriggerButton } from "./InlineTriggerButton.mjs";
|
|
2
2
|
import { styled } from "@ndla/styled-system/jsx";
|
|
3
|
-
|
|
4
3
|
//#region src/Embed/ConceptInlineTriggerButton.tsx
|
|
5
4
|
/**
|
|
6
5
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -41,7 +40,7 @@ const ConceptInlineTriggerButton = styled(InlineTriggerButton, { base: {
|
|
|
41
40
|
}
|
|
42
41
|
}
|
|
43
42
|
} });
|
|
44
|
-
|
|
45
43
|
//#endregion
|
|
46
44
|
export { ConceptInlineTriggerButton };
|
|
45
|
+
|
|
47
46
|
//# sourceMappingURL=ConceptInlineTriggerButton.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ConceptInlineTriggerButton.mjs","names":[],"sources":["../../src/Embed/ConceptInlineTriggerButton.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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n base: {\n position: \"relative\",\n overflow: \"visible\",\n borderBottom: \"1px solid\",\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n paddingBlockStart: \"5xsmall\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _hover: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.active\",\n },\n // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n _focusVisible: {\n outline: \"none\",\n borderRadius: \"0\",\n _after: {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n});\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ConceptInlineTriggerButton.mjs","names":[],"sources":["../../src/Embed/ConceptInlineTriggerButton.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 { styled } from \"@ndla/styled-system/jsx\";\nimport { InlineTriggerButton } from \"./InlineTriggerButton\";\n\nexport const ConceptInlineTriggerButton = styled(InlineTriggerButton, {\n base: {\n position: \"relative\",\n overflow: \"visible\",\n borderBottom: \"1px solid\",\n borderStyle: \"dashed\",\n borderColor: \"stroke.hover\",\n paddingBlockStart: \"5xsmall\",\n width: \"fit-content\",\n cursor: \"pointer\",\n _hover: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.hover\",\n },\n _active: {\n borderColor: \"text.link\",\n background: \"surface.actionSubtle.active\",\n },\n // The global focus ring forces the border-radius to be xsmall, causing the dashed border to be cut off. This is a workaround.\n _focusVisible: {\n outline: \"none\",\n borderRadius: \"0\",\n _after: {\n content: '\"\"',\n position: \"absolute\",\n inset: \"0\",\n outline: \"3px\",\n borderRadius: \"xsmall\",\n outlineColor: \"stroke.default\",\n outlineOffset: \"3px\",\n outlineStyle: \"solid\",\n },\n },\n },\n});\n"],"mappings":";;;;;;;;;;AAWA,MAAa,6BAA6B,OAAO,qBAAqB,EACpE,MAAM;CACJ,UAAU;CACV,UAAU;CACV,cAAc;CACd,aAAa;CACb,aAAa;CACb,mBAAmB;CACnB,OAAO;CACP,QAAQ;CACR,QAAQ;EACN,aAAa;EACb,YAAY;EACb;CACD,SAAS;EACP,aAAa;EACb,YAAY;EACb;CAED,eAAe;EACb,SAAS;EACT,cAAc;EACd,QAAQ;GACN,SAAS;GACT,UAAU;GACV,OAAO;GACP,SAAS;GACT,cAAc;GACd,cAAc;GACd,eAAe;GACf,cAAc;GACf;EACF;CACF,EACF,CAAC"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { Text } from "@ndla/primitives";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
4
|
//#region src/Embed/ContentLinkEmbed.tsx
|
|
6
5
|
/**
|
|
7
6
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -31,7 +30,7 @@ const ContentLinkEmbed = ({ embed, isOembed, children }) => {
|
|
|
31
30
|
children
|
|
32
31
|
});
|
|
33
32
|
};
|
|
34
|
-
|
|
35
33
|
//#endregion
|
|
36
34
|
export { ContentLinkEmbed };
|
|
35
|
+
|
|
37
36
|
//# sourceMappingURL=ContentLinkEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ContentLinkEmbed.mjs","names":[],"sources":["../../src/Embed/ContentLinkEmbed.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 { Text } from \"@ndla/primitives\";\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: ContentLinkMetaData;\n isOembed?: boolean;\n children?: ReactNode;\n}\n\nexport const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return (\n <Text color=\"text.error\" asChild consumeCss>\n <span>\n <span>{`${t(\"embed.linkError\")}: `}</span>\n {children}\n </span>\n </Text>\n );\n }\n\n const { embedData, data } = embed;\n\n if (embedData.openIn === \"new-context\" || isOembed) {\n return (\n <a href={data.path} data-embed-type=\"content-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n {children}\n </a>\n );\n }\n\n return <a href={data.path}>{children}</a>;\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ContentLinkEmbed.mjs","names":[],"sources":["../../src/Embed/ContentLinkEmbed.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 { Text } from \"@ndla/primitives\";\nimport type { ContentLinkMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: ContentLinkMetaData;\n isOembed?: boolean;\n children?: ReactNode;\n}\n\nexport const ContentLinkEmbed = ({ embed, isOembed, children }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return (\n <Text color=\"text.error\" asChild consumeCss>\n <span>\n <span>{`${t(\"embed.linkError\")}: `}</span>\n {children}\n </span>\n </Text>\n );\n }\n\n const { embedData, data } = embed;\n\n if (embedData.openIn === \"new-context\" || isOembed) {\n return (\n <a href={data.path} data-embed-type=\"content-link\" target=\"_blank\" rel=\"noopener noreferrer\">\n {children}\n </a>\n );\n }\n\n return <a href={data.path}>{children}</a>;\n};\n"],"mappings":";;;;;;;;;;;AAmBA,MAAa,oBAAoB,EAAE,OAAO,UAAU,eAAsB;CACxE,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QACE,oBAAC,MAAD;EAAM,OAAM;EAAa,SAAA;EAAQ,YAAA;YAC/B,qBAAC,QAAD,EAAA,UAAA,CACE,oBAAC,QAAD,EAAA,UAAO,GAAG,EAAE,kBAAkB,CAAC,KAAW,CAAA,EACzC,SACI,EAAA,CAAA;EACF,CAAA;CAIX,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,WAAW,iBAAiB,SACxC,QACE,oBAAC,KAAD;EAAG,MAAM,KAAK;EAAM,mBAAgB;EAAe,QAAO;EAAS,KAAI;EACpE;EACC,CAAA;AAIR,QAAO,oBAAC,KAAD;EAAG,MAAM,KAAK;EAAO;EAAa,CAAA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { EmbedByline } from "../LicenseByline/EmbedByline.mjs";
|
|
2
2
|
import { styled } from "@ndla/styled-system/jsx";
|
|
3
3
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
4
|
//#region src/Embed/CopyrightEmbed.tsx
|
|
6
5
|
/**
|
|
7
6
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -23,7 +22,7 @@ const CopyrightEmbed = ({ embed, children }) => {
|
|
|
23
22
|
})]
|
|
24
23
|
});
|
|
25
24
|
};
|
|
26
|
-
|
|
27
25
|
//#endregion
|
|
28
26
|
export { CopyrightEmbed };
|
|
27
|
+
|
|
29
28
|
//# sourceMappingURL=CopyrightEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"CopyrightEmbed.mjs","names":[],"sources":["../../src/Embed/CopyrightEmbed.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n embed: CopyrightMetaData;\n children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n base: {\n marginBlockEnd: \"xsmall\",\n },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n return (\n <figure data-embed-type=\"copyright\">\n <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n </figure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"CopyrightEmbed.mjs","names":[],"sources":["../../src/Embed/CopyrightEmbed.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { CopyrightMetaData } from \"@ndla/types-embed\";\nimport type { ReactNode } from \"react\";\nimport { EmbedByline } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n embed: CopyrightMetaData;\n children?: ReactNode;\n}\n\nconst StyledCopyrightContent = styled(\"div\", {\n base: {\n marginBlockEnd: \"xsmall\",\n },\n});\n\nexport const CopyrightEmbed = ({ embed, children }: Props) => {\n return (\n <figure data-embed-type=\"copyright\">\n <StyledCopyrightContent data-copyright-content=\"\">{children}</StyledCopyrightContent>\n <EmbedByline type=\"copyright\" copyright={embed.embedData.copyright} />\n </figure>\n );\n};\n"],"mappings":";;;;;;;;;;;AAkBA,MAAM,yBAAyB,OAAO,OAAO,EAC3C,MAAM,EACJ,gBAAgB,UACjB,EACF,CAAC;AAEF,MAAa,kBAAkB,EAAE,OAAO,eAAsB;AAC5D,QACE,qBAAC,UAAD;EAAQ,mBAAgB;YAAxB,CACE,oBAAC,wBAAD;GAAwB,0BAAuB;GAAI;GAAkC,CAAA,EACrF,oBAAC,aAAD;GAAa,MAAK;GAAY,WAAW,MAAM,UAAU;GAAa,CAAA,CAC/D"}
|
|
@@ -4,7 +4,6 @@ import { styled } from "@ndla/styled-system/jsx";
|
|
|
4
4
|
import "react";
|
|
5
5
|
import { ErrorWarningLine } from "@ndla/icons";
|
|
6
6
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
7
|
-
|
|
8
7
|
//#region src/Embed/EmbedErrorPlaceholder.tsx
|
|
9
8
|
/**
|
|
10
9
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -43,7 +42,7 @@ const EmbedErrorPlaceholder = ({ type, children, figureType, float }) => {
|
|
|
43
42
|
})]
|
|
44
43
|
});
|
|
45
44
|
};
|
|
46
|
-
|
|
47
45
|
//#endregion
|
|
48
46
|
export { EmbedErrorPlaceholder };
|
|
47
|
+
|
|
49
48
|
//# sourceMappingURL=EmbedErrorPlaceholder.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedErrorPlaceholder.mjs","names":[],"sources":["../../src/Embed/EmbedErrorPlaceholder.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 { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { EmbedByline, type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n type: EmbedBylineErrorProps[\"type\"];\n figureType?: FigureSize;\n float?: FigureFloat;\n children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"background.subtle\",\n height: \"surface.xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n \"& svg\": {\n height: \"5xlarge\",\n width: \"5xlarge\",\n fill: \"stroke.default\",\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& > *:not(:first-child)\": {\n marginBlockStart: \"3xsmall\",\n },\n },\n});\n\nexport const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {\n return (\n <StyledFigure size={figureType} float={float} data-embed-type={type}>\n {children ?? (\n <ErrorPlaceholder data-embed-type={type}>\n <ErrorWarningLine />\n </ErrorPlaceholder>\n )}\n <EmbedByline error type={type} />\n </StyledFigure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmbedErrorPlaceholder.mjs","names":[],"sources":["../../src/Embed/EmbedErrorPlaceholder.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 { ErrorWarningLine } from \"@ndla/icons\";\nimport { Figure, type FigureFloat, type FigureSize } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport { type ReactNode } from \"react\";\nimport { EmbedByline, type EmbedBylineErrorProps } from \"../LicenseByline/EmbedByline\";\n\ninterface Props {\n type: EmbedBylineErrorProps[\"type\"];\n figureType?: FigureSize;\n float?: FigureFloat;\n children?: ReactNode;\n}\n\nconst ErrorPlaceholder = styled(\"div\", {\n base: {\n display: \"flex\",\n alignItems: \"center\",\n justifyContent: \"center\",\n background: \"background.subtle\",\n height: \"surface.xsmall\",\n border: \"1px solid\",\n borderColor: \"stroke.default\",\n borderRadius: \"xsmall\",\n \"& svg\": {\n height: \"5xlarge\",\n width: \"5xlarge\",\n fill: \"stroke.default\",\n },\n },\n});\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& > *:not(:first-child)\": {\n marginBlockStart: \"3xsmall\",\n },\n },\n});\n\nexport const EmbedErrorPlaceholder = ({ type, children, figureType, float }: Props) => {\n return (\n <StyledFigure size={figureType} float={float} data-embed-type={type}>\n {children ?? (\n <ErrorPlaceholder data-embed-type={type}>\n <ErrorWarningLine />\n </ErrorPlaceholder>\n )}\n <EmbedByline error type={type} />\n </StyledFigure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;AAqBA,MAAM,mBAAmB,OAAO,OAAO,EACrC,MAAM;CACJ,SAAS;CACT,YAAY;CACZ,gBAAgB;CAChB,YAAY;CACZ,QAAQ;CACR,QAAQ;CACR,aAAa;CACb,cAAc;CACd,SAAS;EACP,QAAQ;EACR,OAAO;EACP,MAAM;EACP;CACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,2BAA2B,EACzB,kBAAkB,WACnB,EACF,EACF,CAAC;AAEF,MAAa,yBAAyB,EAAE,MAAM,UAAU,YAAY,YAAmB;AACrF,QACE,qBAAC,cAAD;EAAc,MAAM;EAAmB;EAAO,mBAAiB;YAA/D,CACG,YACC,oBAAC,kBAAD;GAAkB,mBAAiB;aACjC,oBAAC,kBAAD,EAAoB,CAAA;GACH,CAAA,EAErB,oBAAC,aAAD;GAAa,OAAA;GAAY;GAAQ,CAAA,CACpB"}
|
|
@@ -3,7 +3,6 @@ import { forwardRef } from "react";
|
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
4
|
import { ark } from "@ark-ui/react";
|
|
5
5
|
import { css, cva } from "@ndla/styled-system/css";
|
|
6
|
-
|
|
7
6
|
//#region src/Embed/EmbedWrapper.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -27,7 +26,7 @@ const EmbedWrapper = forwardRef(({ noClear, css: cssProp, ...props }, ref) => /*
|
|
|
27
26
|
...props,
|
|
28
27
|
ref
|
|
29
28
|
}));
|
|
30
|
-
|
|
31
29
|
//#endregion
|
|
32
30
|
export { EmbedWrapper };
|
|
31
|
+
|
|
33
32
|
//# sourceMappingURL=EmbedWrapper.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"EmbedWrapper.mjs","names":[],"sources":["../../src/Embed/EmbedWrapper.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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst embedWrapperRecipe = cva({\n base: {\n position: \"relative\",\n },\n defaultVariants: {\n noClear: false,\n },\n variants: {\n noClear: {\n true: {\n \"& + [data-embed-wrapper]\": {\n clear: \"both\",\n },\n },\n false: {\n clear: \"both\",\n },\n },\n },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n ({ noClear, css: cssProp, ...props }, ref) => (\n <StyledEmbedWrapper\n css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n data-embed-wrapper=\"\"\n {...props}\n ref={ref}\n />\n ),\n);\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"EmbedWrapper.mjs","names":[],"sources":["../../src/Embed/EmbedWrapper.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 { ark, type HTMLArkProps } from \"@ark-ui/react\";\nimport { css, cva } from \"@ndla/styled-system/css\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { StyledProps, RecipeVariantProps } from \"@ndla/styled-system/types\";\nimport { forwardRef } from \"react\";\n\nconst embedWrapperRecipe = cva({\n base: {\n position: \"relative\",\n },\n defaultVariants: {\n noClear: false,\n },\n variants: {\n noClear: {\n true: {\n \"& + [data-embed-wrapper]\": {\n clear: \"both\",\n },\n },\n false: {\n clear: \"both\",\n },\n },\n },\n});\n\nexport type EmbedWrapperVariantProps = NonNullable<RecipeVariantProps<typeof embedWrapperRecipe>>;\n\nexport interface EmbedWrapperProps extends HTMLArkProps<\"div\">, StyledProps, EmbedWrapperVariantProps {}\n\nconst StyledEmbedWrapper = styled(ark.div, {}, { baseComponent: true });\n\nexport const EmbedWrapper = forwardRef<HTMLDivElement, EmbedWrapperProps>(\n ({ noClear, css: cssProp, ...props }, ref) => (\n <StyledEmbedWrapper\n css={css.raw(embedWrapperRecipe.raw({ noClear }), cssProp)}\n data-embed-wrapper=\"\"\n {...props}\n ref={ref}\n />\n ),\n);\n"],"mappings":";;;;;;;;;;;;;AAcA,MAAM,qBAAqB,IAAI;CAC7B,MAAM,EACJ,UAAU,YACX;CACD,iBAAiB,EACf,SAAS,OACV;CACD,UAAU,EACR,SAAS;EACP,MAAM,EACJ,4BAA4B,EAC1B,OAAO,QACR,EACF;EACD,OAAO,EACL,OAAO,QACR;EACF,EACF;CACF,CAAC;AAMF,MAAM,qBAAqB,OAAO,IAAI,KAAK,EAAE,EAAE,EAAE,eAAe,MAAM,CAAC;AAEvE,MAAa,eAAe,YACzB,EAAE,SAAS,KAAK,SAAS,GAAG,SAAS,QACpC,oBAAC,oBAAD;CACE,KAAK,IAAI,IAAI,mBAAmB,IAAI,EAAE,SAAS,CAAC,EAAE,QAAQ;CAC1D,sBAAmB;CACnB,GAAI;CACC;CACL,CAAA,CAEL"}
|
|
@@ -5,7 +5,6 @@ import { styled } from "@ndla/styled-system/jsx";
|
|
|
5
5
|
import { useEffect, useRef } from "react";
|
|
6
6
|
import { useTranslation } from "react-i18next";
|
|
7
7
|
import { jsx } from "react/jsx-runtime";
|
|
8
|
-
|
|
9
8
|
//#region src/Embed/ExternalEmbed.tsx
|
|
10
9
|
/**
|
|
11
10
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -54,7 +53,7 @@ const ExternalEmbed = ({ embed }) => {
|
|
|
54
53
|
dangerouslySetInnerHTML: { __html: data?.oembed?.html ?? "" }
|
|
55
54
|
});
|
|
56
55
|
};
|
|
57
|
-
|
|
58
56
|
//#endregion
|
|
59
57
|
export { ExternalEmbed };
|
|
58
|
+
|
|
60
59
|
//# sourceMappingURL=ExternalEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"ExternalEmbed.mjs","names":[],"sources":["../../src/Embed/ExternalEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\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 image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\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 </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"ExternalEmbed.mjs","names":[],"sources":["../../src/Embed/ExternalEmbed.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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { OembedMetaData } from \"@ndla/types-embed\";\nimport { useEffect, useRef } from \"react\";\nimport { useTranslation } from \"react-i18next\";\nimport { ResourceBox } from \"../ResourceBox/ResourceBox\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: OembedMetaData;\n}\n\nconst StyledFigure = styled(Figure, {\n base: {\n \"& iframe\": {\n height: \"auto\",\n width: \"100%\",\n },\n },\n});\n\nexport const ExternalEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n const figRef = useRef<HTMLElement>(null);\n\n useEffect(() => {\n const iframe = figRef.current?.querySelector(\"iframe\");\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 image = {\n src: data.iframeImage?.image.imageUrl,\n alt: embedData.alt !== undefined ? embedData.alt : (data.iframeImage?.alttext?.alttext ?? \"\"),\n };\n return (\n <Figure data-embed-type=\"external\">\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 </Figure>\n );\n }\n\n return (\n <StyledFigure\n data-embed-type=\"external\"\n ref={figRef}\n dangerouslySetInnerHTML={{ __html: data?.oembed?.html ?? \"\" }}\n />\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;AAoBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;CAC9B,MAAM,SAAS,OAAoB,KAAK;AAExC,iBAAgB;EACd,MAAM,SAAS,OAAO,SAAS,cAAc,SAAS;AACtD,MAAI,QAAQ;GACV,MAAM,CAAC,OAAO,UAAU,CAAC,OAAO,SAAS,OAAO,MAAM,EAAE,OAAO,SAAS,OAAO,OAAO,CAAC;AACvF,UAAO,MAAM,cAAc,GAAG,QAAQ,QAAQ,GAAG,GAAG,SAAS,SAAS;AACtE,UAAO,QAAQ;AACf,UAAO,SAAS;;IAEjB,EAAE,CAAC;AAEN,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,uBAAD,EAAuB,MAAK,YAAa,CAAA;CAGlD,MAAM,EAAE,WAAW,SAAS;AAE5B,KAAI,UAAU,SAAS,cAAc;EACnC,MAAM,QAAQ;GACZ,KAAK,KAAK,aAAa,MAAM;GAC7B,KAAK,UAAU,QAAQ,KAAA,IAAY,UAAU,MAAO,KAAK,aAAa,SAAS,WAAW;GAC3F;AACD,SACE,oBAAC,QAAD;GAAQ,mBAAgB;aACtB,oBAAC,aAAD;IACS;IACP,OAAO,UAAU,SAAS;IAC1B,KAAK,UAAU;IACf,SAAS,UAAU,WAAW;IAC9B,YAAY,EAAE,oCAAoC;IAClD,CAAA;GACK,CAAA;;AAIb,QACE,oBAAC,cAAD;EACE,mBAAgB;EAChB,KAAK;EACL,yBAAyB,EAAE,QAAQ,MAAM,QAAQ,QAAQ,IAAI;EAC7D,CAAA"}
|
|
@@ -1,7 +1,6 @@
|
|
|
1
1
|
import { styled } from "@ndla/styled-system/jsx";
|
|
2
2
|
import { useTranslation } from "react-i18next";
|
|
3
3
|
import { jsx } from "react/jsx-runtime";
|
|
4
|
-
|
|
5
4
|
//#region src/Embed/FootnoteEmbed.tsx
|
|
6
5
|
/**
|
|
7
6
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -27,7 +26,7 @@ const FootnoteEmbed = ({ embed }) => {
|
|
|
27
26
|
}) })
|
|
28
27
|
});
|
|
29
28
|
};
|
|
30
|
-
|
|
31
29
|
//#endregion
|
|
32
30
|
export { FootnoteEmbed };
|
|
31
|
+
|
|
33
32
|
//# sourceMappingURL=FootnoteEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"FootnoteEmbed.mjs","names":[],"sources":["../../src/Embed/FootnoteEmbed.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n base: {\n \"& a\": {\n textStyle: \"label.xsmall\",\n marginInlineStart: \"1\",\n },\n },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <div>{t(\"error\")}</div>;\n }\n\n return (\n <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n <StyledSup>\n <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n </StyledSup>\n </span>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"FootnoteEmbed.mjs","names":[],"sources":["../../src/Embed/FootnoteEmbed.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 { styled } from \"@ndla/styled-system/jsx\";\nimport type { FootnoteMetaData } from \"@ndla/types-embed\";\nimport { useTranslation } from \"react-i18next\";\n\ninterface Props {\n embed: FootnoteMetaData;\n}\n\nconst StyledSup = styled(\"sup\", {\n base: {\n \"& a\": {\n textStyle: \"label.xsmall\",\n marginInlineStart: \"1\",\n },\n },\n});\n\nexport const FootnoteEmbed = ({ embed }: Props) => {\n const { t } = useTranslation();\n if (embed.status === \"error\") {\n return <div>{t(\"error\")}</div>;\n }\n\n return (\n <span id={`ref${embed.data.entryNum}`} data-embed-type=\"footnote\">\n <StyledSup>\n <a href={`#note${embed.data.entryNum}`} target=\"_self\">{`[${embed.data.entryNum}]`}</a>\n </StyledSup>\n </span>\n );\n};\n"],"mappings":";;;;;;;;;;;AAgBA,MAAM,YAAY,OAAO,OAAO,EAC9B,MAAM,EACJ,OAAO;CACL,WAAW;CACX,mBAAmB;CACpB,EACF,EACF,CAAC;AAEF,MAAa,iBAAiB,EAAE,YAAmB;CACjD,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,OAAD,EAAA,UAAM,EAAE,QAAQ,EAAO,CAAA;AAGhC,QACE,oBAAC,QAAD;EAAM,IAAI,MAAM,MAAM,KAAK;EAAY,mBAAgB;YACrD,oBAAC,WAAD,EAAA,UACE,oBAAC,KAAD;GAAG,MAAM,QAAQ,MAAM,KAAK;GAAY,QAAO;aAAS,IAAI,MAAM,KAAK,SAAS;GAAO,CAAA,EAC7E,CAAA;EACP,CAAA"}
|
package/es/Embed/GlossEmbed.mjs
CHANGED
|
@@ -6,7 +6,6 @@ import { styled } from "@ndla/styled-system/jsx";
|
|
|
6
6
|
import { useRef } from "react";
|
|
7
7
|
import { jsx, jsxs } from "react/jsx-runtime";
|
|
8
8
|
import { Portal } from "@ark-ui/react";
|
|
9
|
-
|
|
10
9
|
//#region src/Embed/GlossEmbed.tsx
|
|
11
10
|
/**
|
|
12
11
|
* Copyright (c) 2024-present, NDLA.
|
|
@@ -53,7 +52,7 @@ const GlossEmbed = ({ embed, children }) => {
|
|
|
53
52
|
})
|
|
54
53
|
});
|
|
55
54
|
};
|
|
56
|
-
|
|
57
55
|
//#endregion
|
|
58
56
|
export { GlossEmbed };
|
|
57
|
+
|
|
59
58
|
//# sourceMappingURL=GlossEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"GlossEmbed.mjs","names":[],"sources":["../../src/Embed/GlossEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { Gloss } from \"../Gloss/Gloss\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n const contentRef = useRef<HTMLDivElement>(null);\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\" || !embed.data.concept.glossData) {\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n const audio =\n visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n ? {\n src: visualElement.data.audioFile.url,\n title: visualElement.data.title.title,\n }\n : undefined;\n\n if (embed.embedData.type === \"inline\") {\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n <PopoverTrigger asChild>\n <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Figure>\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n />\n </Figure>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n }\n\n return (\n <Figure data-embed-type=\"gloss\">\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n variant=\"bordered\"\n />\n </Figure>\n );\n};\n"],"mappings":"
|
|
1
|
+
{"version":3,"file":"GlossEmbed.mjs","names":[],"sources":["../../src/Embed/GlossEmbed.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 { Portal } from \"@ark-ui/react\";\nimport { Figure, PopoverContent, PopoverRoot, PopoverTrigger } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { ConceptMetaData } from \"@ndla/types-embed\";\nimport { useRef, type ReactNode } from \"react\";\nimport { Gloss } from \"../Gloss/Gloss\";\nimport { ConceptInlineTriggerButton } from \"./ConceptInlineTriggerButton\";\nimport { EmbedErrorPlaceholder } from \"./EmbedErrorPlaceholder\";\n\ninterface Props {\n embed: ConceptMetaData;\n children?: ReactNode;\n}\n\nconst StyledPopoverContent = styled(PopoverContent, {\n base: {\n width: \"surface.xlarge\",\n },\n});\n\nexport const GlossEmbed = ({ embed, children }: Props) => {\n const contentRef = useRef<HTMLDivElement>(null);\n if (embed.status === \"error\" && embed.embedData.type === \"inline\") {\n return <span>{children}</span>;\n }\n if (embed.status === \"error\" || !embed.data.concept.glossData) {\n return <EmbedErrorPlaceholder type=\"gloss\" />;\n }\n\n const { concept, visualElement } = embed.data;\n\n const audio =\n visualElement?.status === \"success\" && visualElement.resource === \"audio\"\n ? {\n src: visualElement.data.audioFile.url,\n title: visualElement.data.title.title,\n }\n : undefined;\n\n if (embed.embedData.type === \"inline\") {\n return (\n <PopoverRoot initialFocusEl={() => contentRef.current}>\n <PopoverTrigger asChild>\n <ConceptInlineTriggerButton>{children}</ConceptInlineTriggerButton>\n </PopoverTrigger>\n <Portal>\n <StyledPopoverContent ref={contentRef}>\n <Figure>\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n />\n </Figure>\n </StyledPopoverContent>\n </Portal>\n </PopoverRoot>\n );\n }\n\n return (\n <Figure data-embed-type=\"gloss\">\n <Gloss\n glossData={concept.glossData}\n title={concept.title}\n audio={audio}\n exampleIds={embed.embedData.exampleIds}\n exampleLangs={embed.embedData.exampleLangs}\n variant=\"bordered\"\n />\n </Figure>\n );\n};\n"],"mappings":";;;;;;;;;;;;;;;;AAsBA,MAAM,uBAAuB,OAAO,gBAAgB,EAClD,MAAM,EACJ,OAAO,kBACR,EACF,CAAC;AAEF,MAAa,cAAc,EAAE,OAAO,eAAsB;CACxD,MAAM,aAAa,OAAuB,KAAK;AAC/C,KAAI,MAAM,WAAW,WAAW,MAAM,UAAU,SAAS,SACvD,QAAO,oBAAC,QAAD,EAAO,UAAgB,CAAA;AAEhC,KAAI,MAAM,WAAW,WAAW,CAAC,MAAM,KAAK,QAAQ,UAClD,QAAO,oBAAC,uBAAD,EAAuB,MAAK,SAAU,CAAA;CAG/C,MAAM,EAAE,SAAS,kBAAkB,MAAM;CAEzC,MAAM,QACJ,eAAe,WAAW,aAAa,cAAc,aAAa,UAC9D;EACE,KAAK,cAAc,KAAK,UAAU;EAClC,OAAO,cAAc,KAAK,MAAM;EACjC,GACD,KAAA;AAEN,KAAI,MAAM,UAAU,SAAS,SAC3B,QACE,qBAAC,aAAD;EAAa,sBAAsB,WAAW;YAA9C,CACE,oBAAC,gBAAD;GAAgB,SAAA;aACd,oBAAC,4BAAD,EAA6B,UAAsC,CAAA;GACpD,CAAA,EACjB,oBAAC,QAAD,EAAA,UACE,oBAAC,sBAAD;GAAsB,KAAK;aACzB,oBAAC,QAAD,EAAA,UACE,oBAAC,OAAD;IACE,WAAW,QAAQ;IACnB,OAAO,QAAQ;IACR;IACP,YAAY,MAAM,UAAU;IAC5B,cAAc,MAAM,UAAU;IAC9B,CAAA,EACK,CAAA;GACY,CAAA,EAChB,CAAA,CACG;;AAIlB,QACE,oBAAC,QAAD;EAAQ,mBAAgB;YACtB,oBAAC,OAAD;GACE,WAAW,QAAQ;GACnB,OAAO,QAAQ;GACR;GACP,YAAY,MAAM,UAAU;GAC5B,cAAc,MAAM,UAAU;GAC9B,SAAQ;GACR,CAAA;EACK,CAAA"}
|
package/es/Embed/H5pEmbed.mjs
CHANGED
|
@@ -3,7 +3,6 @@ import { Figure } from "@ndla/primitives";
|
|
|
3
3
|
import { styled } from "@ndla/styled-system/jsx";
|
|
4
4
|
import { useTranslation } from "react-i18next";
|
|
5
5
|
import { jsx } from "react/jsx-runtime";
|
|
6
|
-
|
|
7
6
|
//#region src/Embed/H5pEmbed.tsx
|
|
8
7
|
/**
|
|
9
8
|
* Copyright (c) 2023-present, NDLA.
|
|
@@ -38,7 +37,7 @@ const H5pEmbed = ({ embed }) => {
|
|
|
38
37
|
})
|
|
39
38
|
});
|
|
40
39
|
};
|
|
41
|
-
|
|
42
40
|
//#endregion
|
|
43
41
|
export { H5pEmbed };
|
|
42
|
+
|
|
44
43
|
//# sourceMappingURL=H5pEmbed.mjs.map
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"file":"H5pEmbed.mjs","names":[],"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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport { useTranslation } from \"react-i18next\";\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\nexport const 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"],"mappings":"
|
|
1
|
+
{"version":3,"file":"H5pEmbed.mjs","names":[],"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 { Figure } from \"@ndla/primitives\";\nimport { styled } from \"@ndla/styled-system/jsx\";\nimport type { H5pMetaData } from \"@ndla/types-embed\";\nimport { useTranslation } from \"react-i18next\";\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\nexport const 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"],"mappings":";;;;;;;;;;;;;AAkBA,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM,EACJ,YAAY;CACV,QAAQ;CACR,OAAO;CACR,EACF,EACF,CAAC;AAEF,MAAM,eAAe,OAAO,QAAQ,EAClC,MAAM;CACJ,OAAO;CACP,YAAY,EACV,OAAO,QACR;CACF,EACF,CAAC;AAEF,MAAa,YAAY,EAAE,YAAmB;CAC5C,MAAM,EAAE,MAAM,gBAAgB;AAC9B,KAAI,MAAM,WAAW,QACnB,QAAO,oBAAC,uBAAD,EAAuB,MAAK,OAAQ,CAAA;AAG7C,KAAI,MAAM,KAAK,OACb,QAAO,oBAAC,cAAD;EAAc,mBAAgB;EAAM,yBAAyB,EAAE,QAAQ,MAAM,KAAK,OAAO,QAAQ,IAAI;EAAI,CAAA;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,kBAAkB,GAAG,EAAE,iBAAiB,CAAC,IAAI;AAEnD,QACE,oBAAC,cAAD;EAAc,mBAAgB;YAC5B,oBAAC,UAAD;GAAQ,OAAO;GAAiB,cAAY;GAAiB,KAAK,MAAM,UAAU;GAAO,CAAA;EAC5E,CAAA"}
|